fix(tangle-dapp): Fix last instance of explorer URL usage

tangle-network · Nov 2, 2024 · 3ba5851 · 3ba5851
1 parent 0f7aa2a
commit 3ba5851
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/apps/tangle-dapp/data/evm/useContractWrite.ts b/apps/tangle-dapp/data/evm/useContractWrite.ts
@@ -1,5 +1,6 @@
 import { HexString } from '@polkadot/util/types';
 import { useWebContext } from '@webb-tools/api-provider-environment';
+import { makeExplorerUrl } from '@webb-tools/api-provider-environment/transaction/utils';
 import chainsPopulated from '@webb-tools/dapp-config/chains/chainsPopulated';
 import {
   calculateTypedChainId,
@@ -97,7 +98,18 @@ const useContractWrite = <Abi extends ViemAbi>(abi: Abi) => {
         });
 
         if (txReceipt.status === 'success') {
-          notifySuccess(options.txName, txHash, txBlockHash);
+          let explorerUrl: string | undefined = undefined;
+
+          if (activeChain?.blockExplorers?.default !== undefined) {
+            explorerUrl = makeExplorerUrl(
+              activeChain.blockExplorers.default.url,
+              txHash,
+              'tx',
+              'web3',
+            );
+          }
+
+          notifySuccess(options.txName, explorerUrl);
         } else {
           // TODO: Improve UX by at least providing a link to the transaction hash. The idea is that if there was an error, it would have been caught by the try-catch, so this part here is sort of an 'unreachable' section.
           notifyError(

diff --git a/apps/tangle-dapp/hooks/useTxNotification.tsx b/apps/tangle-dapp/hooks/useTxNotification.tsx
@@ -1,3 +1,4 @@
+import { ExternalLinkLine } from '@webb-tools/icons';
 import { Button, Typography } from '@webb-tools/webb-ui-components';
 import capitalize from 'lodash/capitalize';
 import { useSnackbar } from 'notistack';
@@ -52,7 +53,7 @@ const useTxNotification = () => {
   const { isEvm: isEvmActiveAccount } = useAgnosticAccountInfo();
 
   const notifySuccess = useCallback(
-    (txName: TxName, explorerUrl: string, successMessage?: string | null) => {
+    (txName: TxName, explorerUrl?: string, successMessage?: string | null) => {
       closeSnackbar(makeKey(txName));
 
       // TODO: Finish handling EVM accounts case.
@@ -63,7 +64,10 @@ const useTxNotification = () => {
       // this allows the user to still see the success message if
       // for example, they disconnect their account while the
       // transaction is still processing.
-      const finalExplorerUrl = isEvmActiveAccount === null ? null : explorerUrl;
+      const finalExplorerUrl =
+        explorerUrl === undefined || isEvmActiveAccount === null
+          ? null
+          : explorerUrl;
 
       // Currently using SnackbarProvider for managing NotificationStacked
       // For one-off configurations, must use enqueueSnackbar.
@@ -82,6 +86,9 @@ const useTxNotification = () => {
               href={finalExplorerUrl.toString()}
               target="_blank"
               rel="noopener noreferrer"
+              rightIcon={
+                <ExternalLinkLine className="fill-current dark:fill-current" />
+              }
             >
               View Explorer
             </Button>