make explorer link dynamic depending on route (wormhole-foundation#2514)

wormholelabs-xyz · Sep 3, 2024 · fec0007 · fec0007
1 parent 1771e07
commit fec0007
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 22 deletions.
diff --git a/wormhole-connect/src/utils/sdkv2.ts b/wormhole-connect/src/utils/sdkv2.ts
@@ -11,7 +11,9 @@ import {
   DestinationQueuedTransferReceipt,
   CompletedTransferReceipt,
   TokenBridge,
+  Network,
   amount,
+  routes,
   CircleTransfer,
 } from '@wormhole-foundation/sdk';
 import config from 'config';
@@ -20,6 +22,7 @@ import { Connection } from '@solana/web3.js';
 import { PublicKey } from '@solana/web3.js';
 import * as splToken from '@solana/spl-token';
 import { getTokenDecimals, getWrappedTokenId } from 'utils';
+import { WORMSCAN } from 'config/constants';
 
 // Used to represent an initiated transfer. Primarily for the Redeem view.
 export interface TransferInfo {
@@ -101,6 +104,32 @@ export async function getDecimals(
   return await wh.getDecimals(chain, token.address);
 }
 
+export type ExplorerLink = {
+  url: string;
+  name: string;
+};
+
+// TODO SDKV2 add a way for the Route interface to offer this
+export function getExplorerLink(
+  route: routes.Route<Network>,
+  txHash: string,
+): ExplorerLink {
+  switch ((route.constructor as routes.RouteConstructor).meta.name) {
+    case 'MayanSwap':
+      return {
+        url: `https://explorer.mayan.finance/swap/${txHash}`,
+        name: 'Mayan Explorer',
+      };
+    default:
+      return {
+        url: `${WORMSCAN}tx/${txHash}${
+          config.isMainnet ? '' : '?network=TESTNET'
+        }`,
+        name: 'Wormholescan',
+      };
+  }
+}
+
 type ReceiptWithAttestation<AT> =
   | AttestedTransferReceipt<AT>
   | RedeemedTransferReceipt<AT>

diff --git a/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx b/wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx
@@ -12,11 +12,12 @@ import Stack from '@mui/material/Stack';
 import { makeStyles } from 'tss-react/mui';
 
 import config from 'config';
-import { WORMSCAN } from 'config/constants';
 import useFetchTokenPricesV2 from 'hooks/useFetchTokenPricesV2';
+import { RouteContext } from 'contexts/RouteContext';
 import TokenIcon from 'icons/TokenIcons';
 import { calculateUSDPrice, trimAddress, trimTxHash } from 'utils';
 import { millisToMinutesAndSeconds } from 'utils/transferValidation';
+import { getExplorerLink } from 'utils/sdkv2';
 
 import type { RootState } from 'store';
 
@@ -33,6 +34,7 @@ const useStyles = makeStyles()((theme: any) => ({
 const TransactionDetails = () => {
   const { classes } = useStyles();
   const theme = useTheme();
+  const routeContext = React.useContext(RouteContext);
 
   const {
     sendTx,
@@ -231,26 +233,27 @@ const TransactionDetails = () => {
     );
   }, [isFetchingTokenPrices, receiveNativeAmount, toChain, tokenPrices]);
 
-  const wormscanLink = useMemo(() => {
-    const href = `${WORMSCAN}tx/${sendTx}${
-      config.isMainnet ? '' : '?network=TESTNET'
-    }`;
-
-    return (
-      <Stack alignItems="center" padding="24px 12px">
-        <Link
-          display="flex"
-          gap="8px"
-          href={href}
-          rel="noreferrer"
-          target="_blank"
-          underline="none"
-        >
-          <Typography>View on Wormholescan</Typography>
-          <LaunchIcon fontSize="small" sx={{ marginTop: '2px' }} />
-        </Link>
-      </Stack>
-    );
+  const explorerLink = useMemo(() => {
+    if (routeContext.route) {
+      const { name, url } = getExplorerLink(routeContext.route, sendTx);
+      return (
+        <Stack alignItems="center" padding="24px 12px">
+          <Link
+            display="flex"
+            gap="8px"
+            href={url}
+            rel="noreferrer"
+            target="_blank"
+            underline="none"
+          >
+            <Typography>{name}</Typography>
+            <LaunchIcon fontSize="small" sx={{ marginTop: '2px' }} />
+          </Link>
+        </Stack>
+      );
+    } else {
+      return null;
+    }
   }, [sendTx]);
 
   const timeToDestination = useMemo(() => {
@@ -297,7 +300,7 @@ const TransactionDetails = () => {
           </Stack>
         </CardContent>
         <Divider flexItem sx={{ margin: '0 16px', opacity: '50%' }} />
-        {wormscanLink}
+        {explorerLink}
       </Card>
     </div>
   );