feat: show explorer links on redeem page

Author: kev1n-peters

wormhole-connect/src/components/ExplorerLink.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import Link from '@mui/material/Link';
+import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  addressLink: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+    color: theme.palette.text.primary,
+    opacity: 0.6,
+  },
+}));
+
+interface ExplorerLinkProps {
+  url: string;
+  text: string;
+}
+
+const ExplorerLink: React.FC<ExplorerLinkProps> = ({ url, text }) => {
+  const { classes } = useStyles();
+
+  if (!(url && text)) return null;
+
+  return (
+    <Link
+      onClick={(e) => e.stopPropagation()}
+      className={classes.addressLink}
+      href={url}
+      rel="noreferrer noopener"
+      target="_blank"
+    >
+      {text}
+      <ArrowOutwardIcon
+        sx={{
+          height: '10px',
+          width: '10px',
+          marginLeft: '2px',
+        }}
+      />
+    </Link>
+  );
+};
+
+export default ExplorerLink;

wormhole-connect/src/utils/index.ts

@@ -284,23 +284,34 @@ export const isEmptyObject = (value: object | null | undefined) => {
   return true;
 };
 
-export const getTokenExplorerUrl = (chain: Chain, address: string) => {
+export type ExplorerPathType = 'wallet' | 'tx' | 'token';
+
+export const getExplorerUrl = (
+  chain: Chain,
+  path: string,
+  pathType: ExplorerPathType,
+) => {
   const chainConfig = config.chains[chain]!;
-  let explorerUrl = '';
+  const baseUrl = chainConfig.explorerUrl;
 
-  if (chain === 'Sui') {
-    explorerUrl = `${chainConfig.explorerUrl}coin/${address}`;
-  } else if (chain === 'Aptos') {
-    if (isHexString(address)) {
-      explorerUrl = `${chainConfig.explorerUrl}fungible_asset/${address}`;
-    } else {
-      explorerUrl = `${chainConfig.explorerUrl}coin/${address}`;
-    }
-  } else {
-    explorerUrl = `${chainConfig.explorerUrl}address/${address}`;
+  if (pathType === 'wallet') {
+    return `${baseUrl}address/${path}`;
+  }
+
+  if (pathType === 'tx') {
+    return `${baseUrl}tx/${path}`;
   }
 
-  return explorerUrl;
+  switch (chain) {
+    case 'Sui':
+      return `${baseUrl}coin/${path}`;
+    case 'Aptos':
+      return `${baseUrl}${
+        isHexString(path) ? 'fungible_asset' : 'coin'
+      }/${path}`;
+    default:
+      return `${baseUrl}address/${path}`;
+  }
 };
 
 // Frankenstein tokens are wormhole-wrapped tokens that are not native to the chain

wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenItem.tsx

@@ -15,7 +15,7 @@ import TokenIcon from 'icons/TokenIcons';
 import { Token } from 'config/tokens';
 
 import type { Chain } from '@wormhole-foundation/sdk';
-import { chainDisplayName, getTokenExplorerUrl } from 'utils';
+import { chainDisplayName, getExplorerUrl } from 'utils';
 import ChainIcon from 'icons/ChainIcons';
 
 const useStyles = makeStyles()((theme) => ({
@@ -59,10 +59,10 @@ function TokenItem(props: TokenItemProps) {
   const theme = useTheme();
 
   const { chain, token } = props;
-  // If the token is native to the chain, show the token's address.
-  // Otherwise, show the wrapped token's address.
   const address = token.tokenId?.address.toString();
-  const explorerURL = address ? getTokenExplorerUrl(chain, address) : undefined;
+  const explorerURL = address
+    ? getExplorerUrl(chain, address, 'token')
+    : undefined;
   const addressDisplay = `${token.shortAddress}`;
 
   return (

wormhole-connect/src/views/v2/Redeem/TransactionDetails/index.tsx

@@ -13,11 +13,12 @@ import { makeStyles } from 'tss-react/mui';
 import config from 'config';
 import { RouteContext } from 'contexts/RouteContext';
 import AssetBadge from 'components/AssetBadge';
+import ExplorerLink from 'components/ExplorerLink';
 import {
   calculateUSDPrice,
+  getExplorerUrl,
   millisToHumanString,
   trimAddress,
-  trimTxHash,
 } from 'utils';
 import { getExplorerInfo } from 'utils/sdkv2';
 import { amount as sdkAmount } from '@wormhole-foundation/sdk';
@@ -88,6 +89,9 @@ const TransactionDetails = () => {
     );
 
     const senderAddress = sender ? trimAddress(sender) : '';
+    const explorerUrl = sender
+      ? getExplorerUrl(fromChain, sender, 'wallet')
+      : '';
 
     const formattedAmount = sdkAmount.display(sdkAmount.truncate(amount, 6));
 
@@ -107,7 +111,7 @@ const TransactionDetails = () => {
                 {usdAmount ? separator : null}
                 {sourceChainConfig.displayName}
                 {separator}
-                {senderAddress}
+                <ExplorerLink url={explorerUrl} text={senderAddress} />
               </>
             )}
           </Typography>
@@ -121,6 +125,7 @@ const TransactionDetails = () => {
     getTokenPrice,
     amount,
     sender,
+    sendTx,
     theme.palette.text.secondary,
     isFetchingTokenPrices,
     separator,
@@ -141,6 +146,9 @@ const TransactionDetails = () => {
     );
 
     const recipientAddress = recipient ? trimAddress(recipient) : '';
+    const explorerUrl = recipient
+      ? getExplorerUrl(toChain, recipient, 'wallet')
+      : '';
 
     const formattedReceiveAmount = receiveAmount
       ? sdkAmount.display(sdkAmount.truncate(receiveAmount, 6))
@@ -162,7 +170,7 @@ const TransactionDetails = () => {
                 {usdAmount ? separator : null}
                 {destChainConfig.displayName}
                 {separator}
-                {recipientAddress}
+                <ExplorerLink url={explorerUrl} text={recipientAddress} />
               </>
             )}
           </Typography>
@@ -335,14 +343,17 @@ const TransactionDetails = () => {
     );
   }, [eta, theme.palette.text.secondary, toChain]);
 
+  const trimmedTx = sendTx ? trimAddress(sendTx) : '';
+  const explorerUrl = sendTx ? getExplorerUrl(fromChain, sendTx, 'tx') : '';
+
   return (
     <div className={classes.container}>
       <Card className={classes.card}>
         <CardContent>
-          <Typography
-            color={theme.palette.text.secondary}
-            marginBottom="12px"
-          >{`Transaction #${trimTxHash(sendTx)}`}</Typography>
+          <Typography color={theme.palette.text.secondary} marginBottom="12px">
+            {`Transaction #`}
+            <ExplorerLink url={explorerUrl} text={trimmedTx} />
+          </Typography>
           {sentAmount}
           {verticalConnector}
           {receivedAmount}