Merge branch 'develop' into PS/dkg-stats-fixes

apps/bridge-dapp/src/components/Header/TxProgressDropdown/TxItem.tsx

@@ -1,10 +1,10 @@
 import type { Transaction } from '@webb-tools/abstract-api-provider/transaction';
-import type { WebbProviderType } from '@webb-tools/abstract-api-provider/webb-provider.interface';
+import type { WebbProviderType } from '@webb-tools/abstract-api-provider/types';
 import {
-  getExplorerURI,
   getTxMessageFromStatus,
   transactionItemStatusFromTxStatus,
 } from '@webb-tools/api-provider-environment/transaction/useTransactionQueue';
+import { getExplorerURI } from '@webb-tools/api-provider-environment/transaction/utils';
 import { useWebContext } from '@webb-tools/api-provider-environment/webb-context';
 import TxProgressor from '@webb-tools/webb-ui-components/components/TxProgressor';
 import type { TxInfo } from '@webb-tools/webb-ui-components/components/TxProgressor/types';

apps/bridge-dapp/src/components/Header/TxProgressDropdown/index.tsx

@@ -14,6 +14,7 @@ import type { LoadingPillStatus } from '@webb-tools/webb-ui-components/component
 import type { TransactionItemStatus } from '@webb-tools/webb-ui-components/containers/TransactionProgressCard';
 import { useEffect, useMemo, useState } from 'react';
 import TxItem from './TxItem';
+import useCurrentTx from '../../../hooks/useCurrentTx';
 
 const TxProgressDropdown = () => {
   const { txQueue: txQueue_ } = useWebContext();
@@ -25,7 +26,7 @@ const TxProgressDropdown = () => {
   // Sort the latest tx to the top
   const sortedTxQueue = useSortedTxQueue(txQueue);
 
-  const currentTx = useCurrentTx(sortedTxQueue, currentTxId);
+  const currentTx = useCurrentTx(sortedTxQueue, currentTxId, { latest: true });
 
   useEffect(() => {
     if (!currentTx) {
@@ -48,7 +49,7 @@ const TxProgressDropdown = () => {
   }
 
   return (
-    <Dropdown>
+    <Dropdown radixRootProps={{ defaultOpen: true }}>
       <DropdownTrigger asChild>
         <LoadingPill status={pillStatus} />
       </DropdownTrigger>
@@ -76,20 +77,6 @@ const useSortedTxQueue = (txQueue: Array<Transaction<unknown>>) => {
   );
 };
 
-const useCurrentTx = (
-  txQueue: Array<Transaction<unknown>>,
-  txId: string | null
-) => {
-  return useMemo(() => {
-    if (typeof txId === 'string') {
-      return txQueue.find((tx) => tx.id === txId);
-    }
-
-    // Get the latest tx
-    return txQueue[0];
-  }, [txId, txQueue]);
-};
-
 const getPillStatus = (txStatus: TransactionItemStatus): LoadingPillStatus =>
   txStatus === 'completed'
     ? 'success'

apps/bridge-dapp/src/containers/DepositConfirmContainer/DepositConfirmContainer.tsx

@@ -12,7 +12,11 @@ import { isViemError } from '@webb-tools/web3-api-provider';
 import { DepositConfirm } from '@webb-tools/webb-ui-components';
 import { forwardRef, useCallback, useMemo, useState } from 'react';
 import { ContractFunctionRevertedError, formatUnits } from 'viem';
-import { useEnqueueSubmittedTx, useLatestTransactionStage } from '../../hooks';
+import {
+  useCurrentTx,
+  useEnqueueSubmittedTx,
+  useLatestTransactionStage,
+} from '../../hooks';
 import {
   captureSentryException,
   getCardTitle,
@@ -52,7 +56,6 @@ const DepositConfirmContainer = forwardRef<
     const [totalStep, setTotalStep] = useState<number | undefined>();
 
     const stage = useLatestTransactionStage(txId);
-
     const depositTxInProgress = useMemo(
       () => stage !== TransactionState.Ideal,
       [stage]
@@ -61,6 +64,8 @@ const DepositConfirmContainer = forwardRef<
     const { activeApi, activeAccount, activeChain, apiConfig, txQueue } =
       useWebContext();
 
+    const currentTx = useCurrentTx(txQueue.txQueue, txId);
+
     const enqueueSubmittedTx = useEnqueueSubmittedTx();
 
     const { api: txQueueApi, txPayloads } = txQueue;
@@ -239,12 +244,16 @@ const DepositConfirmContainer = forwardRef<
     );
 
     const cardTitle = useMemo(() => {
-      return getCardTitle(stage, wrappingFlow).trim();
-    }, [stage, wrappingFlow]);
+      if (!currentTx) {
+        return undefined;
+      }
 
-    const [txStatusMessage, currentStep] = useMemo(() => {
+      return getCardTitle(stage, currentTx.name, wrappingFlow).trim();
+    }, [currentTx, stage, wrappingFlow]);
+
+    const [txStatusMessage, currentStep, txStatus] = useMemo(() => {
       if (!txId) {
-        return ['', undefined];
+        return ['', undefined, undefined];
       }
 
       const txPayload = txPayloads.find((txPayload) => txPayload.id === txId);
@@ -253,7 +262,9 @@ const DepositConfirmContainer = forwardRef<
         : '';
 
       const step = txPayload?.currentStep;
-      return [message, step];
+      const status = txPayload?.txStatus.status;
+
+      return [message, step, status];
     }, [txId, txPayloads]);
 
     return (
@@ -285,6 +296,13 @@ const DepositConfirmContainer = forwardRef<
         sourceChain={sourceChain}
         destChain={destChain}
         wrappableTokenSymbol={wrappableToken?.view.symbol}
+        txStatusColor={
+          txStatus === 'completed'
+            ? 'green'
+            : txStatus === 'warning'
+            ? 'red'
+            : undefined
+        }
         txStatusMessage={txStatusMessage}
         onClose={onClose}
       />

apps/bridge-dapp/src/containers/Layout/Layout.tsx

@@ -11,6 +11,8 @@ import { Header } from '../../components/Header';
 import { WEBB_DAPP_NEW_ISSUE_URL } from '../../constants';
 import sidebarProps from '../../constants/sidebar';
 
+const heightClsx = cx('min-h-screen h-full');
+
 export const Layout: FC<{ children?: React.ReactNode }> = ({ children }) => {
   const [showBanner, setShowBanner] = useState(true);
 
@@ -19,11 +21,17 @@ export const Layout: FC<{ children?: React.ReactNode }> = ({ children }) => {
   };
 
   return (
-    <div className="flex flex-col justify-between h-screen min-w-full min-h-full bg-[url('assets/bridge-bg.png')] dark:bg-[url('assets/bridge-dark-bg.png')] bg-top object-fill bg-no-repeat bg-cover">
-      <div className="flex flex-1 overflow-hidden">
+    <div
+      className={cx(
+        "bg-[url('assets/bridge-bg.png')] dark:bg-[url('assets/bridge-dark-bg.png')]",
+        'bg-top object-fill bg-no-repeat bg-cover',
+        heightClsx
+      )}
+    >
+      <div className={cx('flex', heightClsx)}>
         <SideBar {...sidebarProps} className="hidden lg:flex" />
 
-        <div className="flex flex-col w-full mx-auto overflow-y-auto px-4 max-w-[1565px] gap-6 justify-between">
+        <div className="flex flex-col w-full mx-auto px-4 max-w-[1565px] gap-6 justify-between">
           <div className="space-y-6">
             <Header />
             <main className="w-full">

apps/bridge-dapp/src/containers/TransferConfirmContainer/TransferConfirmContainer.tsx

@@ -18,9 +18,14 @@ import {
 import { forwardRef, useCallback, useMemo, useState } from 'react';
 import type { Hash } from 'viem';
 import { ContractFunctionRevertedError, formatEther } from 'viem';
-import { useEnqueueSubmittedTx, useLatestTransactionStage } from '../../hooks';
+import {
+  useCurrentTx,
+  useEnqueueSubmittedTx,
+  useLatestTransactionStage,
+} from '../../hooks';
 import {
   captureSentryException,
+  getCardTitle,
   getErrorMessage,
   getTokenURI,
   getTransactionHash,
@@ -94,7 +99,7 @@ const TransferConfirmContainer = forwardRef<
         : undefined,
     });
 
-    const isTransfering = useMemo(
+    const isTransferring = useMemo(
       () => stage !== TransactionState.Ideal,
       [stage]
     );
@@ -122,7 +127,7 @@ const TransferConfirmContainer = forwardRef<
           return;
         }
 
-        if (isTransfering) {
+        if (isTransferring) {
           txQueueApi.startNewTransaction();
           onResetState?.();
           return;
@@ -248,7 +253,7 @@ const TransferConfirmContainer = forwardRef<
             await removeNoteFromNoteManager(note);
           }
         } catch (error) {
-          console.error('Error occured while transfering', error);
+          console.error('Error occured while transferring', error);
           changeNote && (await removeNoteFromNoteManager(changeNote));
           tx.txHash = getTransactionHash(error);
 
@@ -271,20 +276,32 @@ const TransferConfirmContainer = forwardRef<
         }
       },
       // prettier-ignore
-      [activeApi, activeRelayer, addNoteToNoteManager, amount, apiConfig, changeNote, changeUtxo, currency.id, enqueueSubmittedTx, feeAmount, inputNotes, isTransfering, noteManager, onResetState, recipient, refundAmount, refundRecipient, removeNoteFromNoteManager, transferUtxo, txQueueApi, vAnchorApi]
+      [activeApi, activeRelayer, addNoteToNoteManager, amount, apiConfig, changeNote, changeUtxo, currency.id, enqueueSubmittedTx, feeAmount, inputNotes, isTransferring, noteManager, onResetState, recipient, refundAmount, refundRecipient, removeNoteFromNoteManager, transferUtxo, txQueueApi, vAnchorApi]
     );
 
-    const [txStatusMessage, currentStep] = useMemo(() => {
+    const currentTx = useCurrentTx(txQueue.txQueue, txId);
+
+    const cardTitle = useMemo(() => {
+      if (!currentTx) {
+        return;
+      }
+
+      return getCardTitle(stage, currentTx.name);
+    }, [currentTx, stage]);
+
+    const [txStatusMessage, currentStep, txStatus] = useMemo(() => {
       if (!txId) {
-        return ['', undefined];
+        return ['', undefined, undefined];
       }
 
       const txPayload = txPayloads.find((txPayload) => txPayload.id === txId);
       const message = txPayload
         ? txPayload.txStatus.message?.replace('...', '')
         : '';
 
-      return [message, txPayload?.currentStep];
+      const txStatus = txPayload?.txStatus.status;
+
+      return [message, txPayload?.currentStep, txStatus];
     }, [txId, txPayloads]);
 
     const formattedFee = useMemo(() => {
@@ -304,7 +321,7 @@ const TransferConfirmContainer = forwardRef<
         {...props}
         className="min-h-[var(--card-height)]"
         ref={ref}
-        title={isTransfering ? 'Transfer in Progress...' : undefined}
+        title={cardTitle}
         totalProgress={totalStep}
         progress={currentStep}
         amount={amount}
@@ -339,8 +356,15 @@ const TransferConfirmContainer = forwardRef<
         actionBtnProps={{
           isDisabled: changeNote ? !isChecked : false,
           onClick: handleTransferExecute,
-          children: isTransfering ? 'Make Another Transaction' : 'Transfer',
+          children: isTransferring ? 'Make Another Transaction' : 'Transfer',
         }}
+        txStatusColor={
+          txStatus === 'completed'
+            ? 'green'
+            : txStatus === 'warning'
+            ? 'red'
+            : undefined
+        }
         txStatusMessage={txStatusMessage}
         refundAmount={
           typeof refundAmount === 'bigint'

apps/bridge-dapp/src/containers/WithdrawConfirmContainer/WithdrawConfirmContainer.tsx

@@ -21,9 +21,14 @@ import {
   formatEther,
   formatUnits,
 } from 'viem';
-import { useEnqueueSubmittedTx, useLatestTransactionStage } from '../../hooks';
+import {
+  useCurrentTx,
+  useEnqueueSubmittedTx,
+  useLatestTransactionStage,
+} from '../../hooks';
 import {
   captureSentryException,
+  getCardTitle,
   getErrorMessage,
   getTokenURI,
   getTransactionHash,
@@ -101,39 +106,15 @@ const WithdrawConfirmContainer = forwardRef<
         : 'substrate';
     }, [targetTypedChainId]);
 
-    const cardTitle = useMemo(() => {
-      let status = '';
-
-      switch (stage) {
-        case TransactionState.Ideal: {
-          break;
-        }
+    const currentTx = useCurrentTx(txQueue.txQueue, txId);
 
-        case TransactionState.Done: {
-          status = 'Completed';
-          break;
-        }
-
-        case TransactionState.Failed: {
-          status = 'Failed';
-          break;
-        }
-
-        default: {
-          status = 'in Progress...';
-          break;
-        }
+    const cardTitle = useMemo(() => {
+      if (!currentTx) {
+        return;
       }
 
-      if (!status)
-        return unwrapCurrency
-          ? 'Confirm Unwrap and Withdraw'
-          : 'Confirm Withdraw';
-
-      return unwrapCurrency
-        ? `Unwrap and Withdraw ${status}`
-        : `Withdraw ${status}`;
-    }, [stage, unwrapCurrency]);
+      return getCardTitle(stage, currentTx.name, Boolean(unwrapCurrency));
+    }, [currentTx, stage, unwrapCurrency]);
 
     // The main action onClick handler
     const handleExecuteWithdraw = useCallback(
@@ -309,16 +290,18 @@ const WithdrawConfirmContainer = forwardRef<
       [activeApi, activeRelayer, addNoteToNoteManager, amountAfterFee, apiConfig, availableNotes, changeNote, changeUtxo, enqueueSubmittedTx, fee, onResetState, recipient, refundAmount, removeNoteFromNoteManager, txQueueApi, unwrapCurrency, vAnchorApi, withdrawTxInProgress]
     );
 
-    const [txStatusMessage, currentStep] = useMemo(() => {
+    const [txStatusMessage, currentStep, txStatus] = useMemo(() => {
       if (!txId) {
-        return ['', undefined];
+        return ['', undefined, undefined];
       }
 
       const txPayload = txPayloads.find((txPayload) => txPayload.id === txId);
       const message = txPayload
         ? txPayload.txStatus.message?.replace('...', '')
         : '';
-      return [message, txPayload?.currentStep];
+
+      const txStatus = txPayload?.txStatus.status;
+      return [message, txPayload?.currentStep, txStatus];
     }, [txId, txPayloads]);
 
     const formattedFee = useMemo(() => {
@@ -406,6 +389,13 @@ const WithdrawConfirmContainer = forwardRef<
         relayerAvatarTheme={avatarTheme}
         fungibleTokenSymbol={fungibleCurrency.view.symbol}
         wrappableTokenSymbol={unwrapCurrency?.view.symbol}
+        txStatusColor={
+          txStatus === 'completed'
+            ? 'green'
+            : txStatus === 'warning'
+            ? 'red'
+            : undefined
+        }
         txStatusMessage={txStatusMessage}
         onClose={onClose}
       />

apps/bridge-dapp/src/hooks/index.ts

@@ -1,14 +1,19 @@
 export * from './useAddCurrency';
 export { default as useAmountWithRoute } from './useAmountWithRoute';
 export { default as useChainsFromNote } from './useChainsFromNote';
+export { default as useChainsFromRoute } from './useChainsFromRoute';
 export * from './useConnectWallet';
 export { default as useCurrenciesFromRoute } from './useCurrenciesFromRoute';
+export { default as useTxTabFromRoute } from './useTxTabFromRoute';
+export { default as useDefaultChainAndPool } from './useDefaultChainAndPool';
 export { default as useEnqueueSubmittedTx } from './useEnqueueSubmittedTx';
 export * from './useLatestTransactionStage';
 export * from './useMaxFeeInfo';
 export { default as useNavigateWithPersistParams } from './useNavigateWithPersistParams';
 export * from './useRelayerManager';
+export { default as useRelayerWithRoute } from './useRelayerWithRoute';
 export * from './useShieldedAssets';
 export * from './useSpendNotes';
 export { default as useStateWithRoute } from './useStateWithRoute';
+export { default as useCurrentTx } from './useCurrentTx';
 export * from './useTryAnotherWalletWithView';