Use real chain explorer links for transactions

src/consts/domains.ts

@@ -1,8 +1,8 @@
-// Hard-coding here for better perf and reduced queries
-// Should match Domain table in db
 import { invertKeysAndValues } from '../utils/objects';
 
 // TODO move these to SDK
+// Hard-coding here for better perf and reduced queries
+// Should match Domain table in db
 export const DomainToChain = {
   1000: 44787, // alfajores
   6386274: 42161, // arbitrum

src/consts/networksConfig.ts

@@ -30,6 +30,7 @@ export const avalancheChain: Chain = {
     default: 'https://api.avax.network/ext/bc/C/rpc',
   },
   blockExplorers: {
+    etherscan: { name: 'SnowTrace', url: 'https://snowtrace.io' },
     default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
   },
   testnet: false,
@@ -48,6 +49,7 @@ export const bscChain: Chain = {
     default: 'https://bsc-dataseed.binance.org',
   },
   blockExplorers: {
+    etherscan: { name: 'BscScan', url: 'https://bscscan.com' },
     default: { name: 'BscScan', url: 'https://bscscan.com' },
   },
   testnet: false,
@@ -66,6 +68,11 @@ export const celoMainnetChain: Chain = {
     default: 'https://forno.celo.org',
   },
   blockExplorers: {
+    etherscan: { name: 'CeloScan', url: 'https://celoscan.io' },
+    blockscout: {
+      name: 'Blockscout',
+      url: 'https://explorer.celo.org',
+    },
     default: { name: 'CeloScan', url: 'https://celoscan.io' },
   },
   testnet: false,
@@ -84,6 +91,10 @@ export const celoAlfajoresChain: Chain = {
     default: 'https://alfajores-forno.celo-testnet.org',
   },
   blockExplorers: {
+    blockscout: {
+      name: 'Blockscout',
+      url: 'https://alfajores-blockscout.celo-testnet.org',
+    },
     default: {
       name: 'Blockscout',
       url: 'https://alfajores-blockscout.celo-testnet.org',
@@ -111,3 +122,11 @@ export const allChains = [
   celoMainnetChain,
   celoAlfajoresChain,
 ];
+
+export const chainIdToChain = allChains.reduce<Record<number, Chain>>(
+  (result, chain) => {
+    result[chain.id] = chain;
+    return result;
+  },
+  {},
+);

src/features/search/MessageDetails.tsx

@@ -20,6 +20,7 @@ import { useInterval } from '../../utils/timeout';
 import { PLACEHOLDER_MESSAGES } from './placeholderMessages';
 import { parseMessageQueryResult } from './query';
 import { MessagesQueryResult } from './types';
+import { getTxExplorerLink } from './utils';
 
 const AUTO_REFRESH_DELAY = 10000;
 
@@ -44,6 +45,14 @@ export function MessageDetails({ messageId }: { messageId: string }) {
     originTransaction,
     destinationTransaction,
   } = message;
+  const originTxExplorerLink = getTxExplorerLink(
+    originChainId,
+    originTransaction?.transactionHash,
+  );
+  const destinationTxExplorerLink = getTxExplorerLink(
+    destinationChainId,
+    destinationTransaction?.transactionHash,
+  );
 
   const { bannerClassName, setBannerClassName } = useBackgroundBanner();
   useEffect(() => {
@@ -141,14 +150,16 @@ export function MessageDetails({ messageId }: { messageId: string }) {
             displayWidth="w-44 sm:w-56"
             blurValue={shouldBlur}
           />
+          {originTxExplorerLink && (
             <a
               className="block text-sm text-gray-500 pl-px underline"
-            href="TODO"
+              href={originTxExplorerLink}
               target="_blank"
               rel="noopener noreferrer"
             >
               View in block explorer
             </a>
+          )}
         </Card>
         <Card classes="flex-1 min-w-fit space-y-4">
           <div className="flex items-center justify-between">
@@ -191,14 +202,16 @@ export function MessageDetails({ messageId }: { messageId: string }) {
                 displayWidth="w-44 sm:w-56"
                 blurValue={shouldBlur}
               />
+              {destinationTxExplorerLink && (
                 <a
                   className="block text-sm text-gray-500 pl-px underline"
-                href="TODO"
+                  href={destinationTxExplorerLink}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
                   View in block explorer
                 </a>
+              )}
             </>
           ) : (
             <div className="flex flex-col items-center py-6">

src/features/search/utils.ts

@@ -1,3 +1,4 @@
+import { chainIdToChain } from '../../consts/networksConfig';
 import {
   isValidAddressFast,
   isValidTransactionHash,
@@ -9,3 +10,18 @@ export function isValidSearchQuery(input: string) {
   if (isValidAddressFast(input)) return true;
   return false;
 }
+
+export function getTxExplorerLink(chainId: number, hash?: string) {
+  if (!chainId || !hash) return null;
+
+  const chain = chainIdToChain[chainId];
+  if (!chain?.blockExplorers) return null;
+
+  if (chain.blockExplorers.etherscan) {
+    return `${chain.blockExplorers.etherscan.url}/tx/${hash}`;
+  }
+  if (chain.blockExplorers.default) {
+    return `${chain.blockExplorers.default.url}/tx/${hash}`;
+  }
+  return null;
+}

src/pages/_app.tsx

@@ -81,7 +81,7 @@ export default function App({ Component, router, pageProps }: AppProps) {
         <ToastContainer
           transition={Zoom}
           position={toast.POSITION.BOTTOM_RIGHT}
-          limit={3}
+          limit={2}
         />
       </WagmiConfig>
     </ErrorBoundary>