From 1a9c92b6c70cc01108b5b2936e8e878fb4480484 Mon Sep 17 00:00:00 2001
From: Stas <stasn139@gmail.com>
Date: Sat, 28 Dec 2024 22:40:15 +0000
Subject: [PATCH 1/4] connect transactions component

---
 .../transactions/ActiveTransactions.tsx       | 55 +++++++++++++++++++
 .../transfer/TransfersDetailsModal.tsx        |  7 +++
 src/pages/index.tsx                           |  2 +
 3 files changed, 64 insertions(+)
 create mode 100644 src/components/transactions/ActiveTransactions.tsx

diff --git a/src/components/transactions/ActiveTransactions.tsx b/src/components/transactions/ActiveTransactions.tsx
new file mode 100644
index 00000000..dd9843a3
--- /dev/null
+++ b/src/components/transactions/ActiveTransactions.tsx
@@ -0,0 +1,55 @@
+import { SpinnerIcon } from '@hyperlane-xyz/widgets';
+import Image from 'next/image';
+import { useMemo, useState } from 'react';
+import { config } from '../../consts/config';
+import { useMultiProvider } from '../../features/chains/hooks';
+import { useStore } from '../../features/store';
+import InfoCircle from '../../images/icons/info-circle.svg';
+import { Card } from '../layout/Card';
+
+export function ActiveTransactions() {
+  const [show, setShow] = useState(config.showTipBox);
+  const multiProvider = useMultiProvider();
+  const { transfers, transferLoading } = useStore((s) => ({
+    transfers: s.transfers,
+    transferLoading: s.transferLoading,
+  }));
+
+  const transfersList = useMemo(() => transfers.filter(t => t.status === "signing-transfer"), [transfers]);
+
+  console.log(transfers, transferLoading)
+  // const {
+  //   status,
+  //   origin,
+  //   destination,
+  //   amount,
+  //   sender,
+  //   recipient,
+  //   originTokenAddressOrDenom,
+  //   originTxHash,
+  //   msgId,
+  //   timestamp,
+  // } = transfer || {};
+  if (!show) return null;
+  return (
+    <Card className="w-100 p-2 sm:w-[31rem]">
+      <h2 className="text-primary-500">Active Transactions</h2>
+      <div className="flex items-end justify-between">
+        {transfersList.map((item) => (
+          <div>
+            <Image src={InfoCircle} width={12} alt="" />
+            <div>
+              <h5>
+                12312 ammount
+              </h5>
+              <div>
+              {/* {getChainDisplayName(multiProvider, origin, true)} -arrow {getChainDisplayName(multiProvider, destination, true)} */}
+              </div>
+            </div>  
+            <SpinnerIcon />
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}
diff --git a/src/features/transfer/TransfersDetailsModal.tsx b/src/features/transfer/TransfersDetailsModal.tsx
index aa859430..311cbfb2 100644
--- a/src/features/transfer/TransfersDetailsModal.tsx
+++ b/src/features/transfer/TransfersDetailsModal.tsx
@@ -15,6 +15,7 @@ import Image from 'next/image';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ChainLogo } from '../../components/icons/ChainLogo';
 import { TokenIcon } from '../../components/icons/TokenIcon';
+import ArrowRightIcon from '../../images/icons/arrow-right.svg';
 import LinkIcon from '../../images/icons/external-link-icon.svg';
 import { Color } from '../../styles/Color';
 import { formatTimestamp } from '../../utils/date';
@@ -112,6 +113,12 @@ export function TransfersDetailsModal({
 
   return (
     <Modal isOpen={isOpen} close={onClose} panelClassname="p-4 md:p-5 max-w-sm">
+      <div className="flex justify-center p-4 relative items-center">
+        <Image className="transform rotate-180 absolute left-0" src={ArrowRightIcon} width={25} height={25} alt="" />
+        <span className="text-xl font-bold">
+          Bridge
+        </span>
+      </div>
       {isFinal && (
         <div className="flex justify-between">
           <h2 className="font-medium text-gray-600">{date}</h2>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3fb706aa..e86a6dad 100755
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import type { NextPage } from 'next';
 import { TipCard } from '../components/tip/TipCard';
+import { ActiveTransactions } from '../components/transactions/ActiveTransactions';
 import { TransferTokenCard } from '../features/transfer/TransferTokenCard';
 import { WalletFloatingButtons } from '../features/wallet/WalletFloatingButtons';
 
@@ -7,6 +8,7 @@ const Home: NextPage = () => {
   return (
     <div className="space-y-3 pt-4">
       <TipCard />
+      <ActiveTransactions />
       <div className="relative">
         <TransferTokenCard />
         <WalletFloatingButtons />

From f94ee168ed630293861944541c71c581e35ec348 Mon Sep 17 00:00:00 2001
From: Stas <stasn139@gmail.com>
Date: Sun, 29 Dec 2024 22:59:19 +0000
Subject: [PATCH 2/4] refactor struct

---
 .../transactions/ActiveTransactions.tsx       | 46 +++----------------
 .../transactions/TransactionItem.tsx          | 41 +++++++++++++++++
 2 files changed, 48 insertions(+), 39 deletions(-)
 create mode 100644 src/components/transactions/TransactionItem.tsx

diff --git a/src/components/transactions/ActiveTransactions.tsx b/src/components/transactions/ActiveTransactions.tsx
index dd9843a3..2db0c257 100644
--- a/src/components/transactions/ActiveTransactions.tsx
+++ b/src/components/transactions/ActiveTransactions.tsx
@@ -1,54 +1,22 @@
-import { SpinnerIcon } from '@hyperlane-xyz/widgets';
-import Image from 'next/image';
-import { useMemo, useState } from 'react';
-import { config } from '../../consts/config';
-import { useMultiProvider } from '../../features/chains/hooks';
+import { useMemo } from 'react';
 import { useStore } from '../../features/store';
-import InfoCircle from '../../images/icons/info-circle.svg';
 import { Card } from '../layout/Card';
+import { TransactionItem } from './TransactionItem';
 
 export function ActiveTransactions() {
-  const [show, setShow] = useState(config.showTipBox);
-  const multiProvider = useMultiProvider();
-  const { transfers, transferLoading } = useStore((s) => ({
+  const { transfers } = useStore((s) => ({
     transfers: s.transfers,
     transferLoading: s.transferLoading,
   }));
 
   const transfersList = useMemo(() => transfers.filter(t => t.status === "signing-transfer"), [transfers]);
+  if (!transfersList.length) return null;
 
-  console.log(transfers, transferLoading)
-  // const {
-  //   status,
-  //   origin,
-  //   destination,
-  //   amount,
-  //   sender,
-  //   recipient,
-  //   originTokenAddressOrDenom,
-  //   originTxHash,
-  //   msgId,
-  //   timestamp,
-  // } = transfer || {};
-  if (!show) return null;
   return (
     <Card className="w-100 p-2 sm:w-[31rem]">
-      <h2 className="text-primary-500">Active Transactions</h2>
-      <div className="flex items-end justify-between">
-        {transfersList.map((item) => (
-          <div>
-            <Image src={InfoCircle} width={12} alt="" />
-            <div>
-              <h5>
-                12312 ammount
-              </h5>
-              <div>
-              {/* {getChainDisplayName(multiProvider, origin, true)} -arrow {getChainDisplayName(multiProvider, destination, true)} */}
-              </div>
-            </div>  
-            <SpinnerIcon />
-          </div>
-        ))}
+      <h2 className="text-primary-500 mb-2">Active Transactions</h2>
+      <div className="flex flex-col gap-2">
+        {transfersList.map((item) => <TransactionItem key={item.originTxHash} transaction={item} />)}
       </div>
     </Card>
   );
diff --git a/src/components/transactions/TransactionItem.tsx b/src/components/transactions/TransactionItem.tsx
new file mode 100644
index 00000000..ec736505
--- /dev/null
+++ b/src/components/transactions/TransactionItem.tsx
@@ -0,0 +1,41 @@
+import { SpinnerIcon } from '@hyperlane-xyz/widgets';
+import Image from 'next/image';
+import { useMultiProvider } from '../../features/chains/hooks';
+import { getChainDisplayName } from '../../features/chains/utils';
+import { tryFindToken, useWarpCore } from '../../features/tokens/hooks';
+import { TransferContext } from '../../features/transfer/types';
+import InfoCircle from '../../images/icons/info-circle.svg';
+
+export function TransactionItem({ transaction }: { transaction: TransferContext }) {
+  const multiProvider = useMultiProvider();
+  const warpCore = useWarpCore();
+
+  const {
+    status,
+    origin,
+    destination,
+    amount,
+    sender,
+    recipient,
+    originTokenAddressOrDenom,
+    originTxHash,
+    msgId,
+    timestamp,
+  } = transaction || {};
+
+  const token = tryFindToken(warpCore, origin, originTokenAddressOrDenom);
+  return (
+    <div>
+      <Image src={InfoCircle} width={12} alt="" />
+      <div>
+        <h5>
+          {amount} {token.symbol}
+        </h5>
+        <div>
+          {getChainDisplayName(multiProvider, origin, true)} -arrow {getChainDisplayName(multiProvider, destination, true)}
+        </div>
+      </div>
+      <SpinnerIcon />
+    </div>
+  );
+}

From 6463b6cfb26710d554f4b0bb6f6de215ee4248ea Mon Sep 17 00:00:00 2001
From: Stas <stasn139@gmail.com>
Date: Sun, 29 Dec 2024 22:59:39 +0000
Subject: [PATCH 3/4] code cleanuo + styles

---
 .../transactions/TransactionItem.tsx          | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/components/transactions/TransactionItem.tsx b/src/components/transactions/TransactionItem.tsx
index ec736505..36ab21c1 100644
--- a/src/components/transactions/TransactionItem.tsx
+++ b/src/components/transactions/TransactionItem.tsx
@@ -1,41 +1,57 @@
 import { SpinnerIcon } from '@hyperlane-xyz/widgets';
 import Image from 'next/image';
+import { useState } from 'react';
 import { useMultiProvider } from '../../features/chains/hooks';
 import { getChainDisplayName } from '../../features/chains/utils';
 import { tryFindToken, useWarpCore } from '../../features/tokens/hooks';
+import { TransfersDetailsModal } from '../../features/transfer/TransfersDetailsModal';
 import { TransferContext } from '../../features/transfer/types';
-import InfoCircle from '../../images/icons/info-circle.svg';
+import ArrowRightIcon from '../../images/icons/arrow-right.svg';
+import { TokenIcon } from '../icons/TokenIcon';
 
 export function TransactionItem({ transaction }: { transaction: TransferContext }) {
+  const [showDetails, setShowDetails] = useState(false);
   const multiProvider = useMultiProvider();
   const warpCore = useWarpCore();
 
   const {
-    status,
     origin,
     destination,
     amount,
-    sender,
-    recipient,
     originTokenAddressOrDenom,
-    originTxHash,
-    msgId,
-    timestamp,
   } = transaction || {};
 
   const token = tryFindToken(warpCore, origin, originTokenAddressOrDenom);
+
   return (
-    <div>
-      <Image src={InfoCircle} width={12} alt="" />
+    <div className="flex items-center gap-2 p-1 rounded w-full hover:bg-gray-200 cursor-pointer" onClick={() => setShowDetails(true)}>
+      <TokenIcon token={token} size={30} />
       <div>
-        <h5>
+        <h5 className="text-sm font-normal">
           {amount} {token.symbol}
         </h5>
-        <div>
-          {getChainDisplayName(multiProvider, origin, true)} -arrow {getChainDisplayName(multiProvider, destination, true)}
+        <div className='flex items-center gap-2 text-xs text-gray-600'>
+          <span>
+            {getChainDisplayName(multiProvider, origin, true)}
+          </span>
+          <Image src={ArrowRightIcon} width={12} height={12} alt="arrow" />
+          <span>
+            {getChainDisplayName(multiProvider, destination, true)}
+          </span>
         </div>
       </div>
-      <SpinnerIcon />
+      <div className='ml-auto'>
+        <SpinnerIcon width={30} height={30} />
+      </div>
+      {showDetails && (
+        <TransfersDetailsModal
+          isOpen={showDetails}
+          onClose={() => {
+            setShowDetails(false);
+          }}
+          transfer={transaction}
+        />
+      )}
     </div>
   );
 }

From 0d5df88e9099f934456de2fa9e954791740cb580 Mon Sep 17 00:00:00 2001
From: Stas <stasn139@gmail.com>
Date: Sun, 29 Dec 2024 23:00:04 +0000
Subject: [PATCH 4/4] add btn close handeler

---
 src/features/transfer/TransfersDetailsModal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/transfer/TransfersDetailsModal.tsx b/src/features/transfer/TransfersDetailsModal.tsx
index 311cbfb2..09ee9122 100644
--- a/src/features/transfer/TransfersDetailsModal.tsx
+++ b/src/features/transfer/TransfersDetailsModal.tsx
@@ -113,12 +113,12 @@ export function TransfersDetailsModal({
 
   return (
     <Modal isOpen={isOpen} close={onClose} panelClassname="p-4 md:p-5 max-w-sm">
-      <div className="flex justify-center p-4 relative items-center">
-        <Image className="transform rotate-180 absolute left-0" src={ArrowRightIcon} width={25} height={25} alt="" />
+      {!isFinal && <div className="flex justify-center p-4 relative items-center">
+        <Image className="transform rotate-180 absolute left-0 cursor-pointer" src={ArrowRightIcon} width={25} height={25} alt="back" onClick={onClose} />
         <span className="text-xl font-bold">
           Bridge
         </span>
-      </div>
+      </div>}
       {isFinal && (
         <div className="flex justify-between">
           <h2 className="font-medium text-gray-600">{date}</h2>