feat: add condition to render view account button or dismiss button

tangle-network · Oct 31, 2023 · 18f19be · 18f19be
1 parent c672176
commit 18f19be
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/apps/bridge-dapp/src/components/Header/TxProgressDropdown/TxItem.tsx b/apps/bridge-dapp/src/components/Header/TxProgressDropdown/TxItem.tsx
@@ -8,10 +8,15 @@ import { getExplorerURI } from '@webb-tools/api-provider-environment/transaction
 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';
+import type { ButtonProps } from '@webb-tools/webb-ui-components/components/buttons/types';
 import type { TransactionItemStatus } from '@webb-tools/webb-ui-components/containers/TransactionProgressCard/types';
 import type { FC } from 'react';
+import { NOTE_ACCOUNT_PATH } from '../../../constants/paths';
 
-const TxItem: FC<{ tx: Transaction<unknown> }> = ({ tx }) => {
+const TxItem: FC<{ tx: Transaction<unknown>; isOnAccountPage?: boolean }> = ({
+  tx,
+  isOnAccountPage,
+}) => {
   const { activeApi, apiConfig, txQueue } = useWebContext();
   const { api } = txQueue;
 
@@ -48,12 +53,17 @@ const TxItem: FC<{ tx: Transaction<unknown> }> = ({ tx }) => {
 
   const externalUrl = getExternalUrl(blockExplorer, activeApi?.type, tx.txHash);
 
-  const btnProps = {
-    onClick: () => {
-      api.dismissTransaction(tx.id);
-    },
-    children: 'Dismiss',
-  };
+  const btnProps = isOnAccountPage
+    ? ({
+        onClick: () => {
+          api.dismissTransaction(tx.id);
+        },
+        children: 'Dismiss',
+      } satisfies ButtonProps)
+    : ({
+        href: `/#/${NOTE_ACCOUNT_PATH}`,
+        children: 'View Account',
+      } satisfies ButtonProps);
 
   return (
     <TxProgressor.Root key={tx.id}>

diff --git a/apps/bridge-dapp/src/components/Header/TxProgressDropdown/index.tsx b/apps/bridge-dapp/src/components/Header/TxProgressDropdown/index.tsx
@@ -10,11 +10,14 @@ import LoadingPill from '@webb-tools/webb-ui-components/components/buttons/Loadi
 import type { LoadingPillStatus } from '@webb-tools/webb-ui-components/components/buttons/types';
 import type { TransactionItemStatus } from '@webb-tools/webb-ui-components/containers/TransactionProgressCard';
 import { useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-router';
+import { NOTE_ACCOUNT_PATH } from '../../../constants/paths';
 import useCurrentTx from '../../../hooks/useCurrentTx';
 import TxItem from './TxItem';
 
 const TxProgressDropdown = () => {
   const { txQueue: txQueue_ } = useWebContext();
+  const { pathname } = useLocation();
 
   const { txQueue, currentTxId } = txQueue_;
 
@@ -25,6 +28,11 @@ const TxProgressDropdown = () => {
 
   const currentTx = useCurrentTx(sortedTxQueue, currentTxId, { latest: true });
 
+  const isOnAccountPage = useMemo(
+    () => pathname.includes(`/${NOTE_ACCOUNT_PATH}`),
+    [pathname]
+  );
+
   useEffect(() => {
     if (!currentTx) {
       return;
@@ -56,7 +64,9 @@ const TxProgressDropdown = () => {
         className="mt-4 -ml-14 max-h-80 w-[30rem] overflow-scroll overflow-x-hidden"
       >
         {sortedTxQueue.map((tx) => {
-          return <TxItem key={tx.id} tx={tx} />;
+          return (
+            <TxItem key={tx.id} tx={tx} isOnAccountPage={isOnAccountPage} />
+          );
         })}
       </DropdownBody>
     </Dropdown>