Add chain explorer txn link to txn history (#3316)

Author: kev1n-peters

wormhole-connect/src/views/v2/TxHistory/Item/index.tsx

@@ -12,13 +12,15 @@ import config from 'config';
 import AssetBadge from 'components/AssetBadge';
 import {
   calculateUSDPrice,
+  getExplorerUrl,
   getUSDFormat,
   millisToRelativeTime,
   trimTxHash,
 } from 'utils';
 
 import type { Transaction } from 'config/types';
 import { useTokens } from 'contexts/TokensContext';
+import ExplorerLink from 'components/ExplorerLink';
 
 const useStyles = makeStyles()((theme: any) => ({
   container: {
@@ -177,6 +179,15 @@ const TxHistoryItem = (props: Props) => {
     return `${dateTimeFormat.format(senderDate)}`;
   }, [senderTimestamp]);
 
+  const chainExplorerLink = useMemo(() => {
+    return (
+      <ExplorerLink
+        url={getExplorerUrl(fromChain, txHash, 'tx')}
+        text={trimTxHash(txHash, 4, 4)}
+      />
+    );
+  }, [fromChain, txHash]);
+
   return (
     <div className={classes.container}>
       <Card className={classes.card}>
@@ -194,7 +205,7 @@ const TxHistoryItem = (props: Props) => {
                 color={theme.palette.text.secondary}
                 display="flex"
               >
-                <span>{`Transaction #${trimTxHash(txHash, 4, 4)}`}</span>
+                <span>Transaction #{chainExplorerLink}</span>
                 <span>{transactionDateTime}</span>
               </Typography>
             }