Use real chain explorer links for transactions

pull/1/head
J M Rossy 2 years ago
parent c19fd04282
commit 8e47628890
  1. 4
      src/consts/domains.ts
  2. 19
      src/consts/networksConfig.ts
  3. 17
      src/features/search/MessageDetails.tsx
  4. 16
      src/features/search/utils.ts
  5. 2
      src/pages/_app.tsx

@ -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

@ -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;
},
{},
);

@ -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">

@ -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;
}

@ -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>

Loading…
Cancel
Save