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}
           />
-          <a
-            className="block text-sm text-gray-500 pl-px underline"
-            href="TODO"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            View in block explorer
-          </a>
+          {originTxExplorerLink && (
+            <a
+              className="block text-sm text-gray-500 pl-px underline"
+              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}
               />
-              <a
-                className="block text-sm text-gray-500 pl-px underline"
-                href="TODO"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                View in block explorer
-              </a>
+              {destinationTxExplorerLink && (
+                <a
+                  className="block text-sm text-gray-500 pl-px underline"
+                  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>