diff --git a/apps/tangle-dapp/data/evm/useContractWrite.ts b/apps/tangle-dapp/data/evm/useContractWrite.ts index 9bcaae2d0..8ed179f27 100644 --- 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: 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 index 634f3a5f0..c4ed82823 100644 --- 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={ + + } > View Explorer