Stasn13/ux enhancement back btn

src/components/transactions/ActiveTransactions.tsx

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { useStore } from '../../features/store';
+import { Card } from '../layout/Card';
+import { TransactionItem } from './TransactionItem';
+
+export function ActiveTransactions() {
+  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;
+
+  return (
+    <Card className="w-100 p-2 sm:w-[31rem]">
+      <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>
+  );
+}

src/components/transactions/TransactionItem.tsx

@@ -0,0 +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 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 {
+    origin,
+    destination,
+    amount,
+    originTokenAddressOrDenom,
+  } = transaction || {};
+
+  const token = tryFindToken(warpCore, origin, originTokenAddressOrDenom);
+
+  return (
+    <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 className="text-sm font-normal">
+          {amount} {token.symbol}
+        </h5>
+        <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>
+      <div className='ml-auto'>
+        <SpinnerIcon width={30} height={30} />
+      </div>
+      {showDetails && (
+        <TransfersDetailsModal
+          isOpen={showDetails}
+          onClose={() => {
+            setShowDetails(false);
+          }}
+          transfer={transaction}
+        />
+      )}
+    </div>
+  );
+}

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">
+      {!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>}
       {isFinal && (
         <div className="flex justify-between">
           <h2 className="font-medium text-gray-600">{date}</h2>

src/pages/index.tsx

@@ -1,12 +1,14 @@
 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';
 
 const Home: NextPage = () => {
   return (
     <div className="space-y-3 pt-4">
       <TipCard />
+      <ActiveTransactions />
       <div className="relative">
         <TransferTokenCard />
         <WalletFloatingButtons />