replace getExplorerUrl

OffchainLabs · Dec 11, 2023 · c02da9c · c02da9c
1 parent 6d79a06
commit c02da9c
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 82 deletions.
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCard.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCard.tsx
@@ -1,19 +1,18 @@
 import React, { useMemo } from 'react'
 import Image from 'next/image'
+import { CheckCircleIcon } from '@heroicons/react/24/outline'
 
-import { ExternalLink } from '../common/ExternalLink'
 import { MergedTransaction, DepositStatus } from '../../state/app/state'
 import { useNetworksAndSigners } from '../../hooks/useNetworksAndSigners'
-import { shortenTxHash } from '../../util/CommonUtils'
 import { trackEvent } from '../../util/AnalyticsUtils'
 
 import { DepositCardPending } from './DepositCardPending'
 import { DepositCardL1Failure } from './DepositCardL1Failure'
 import { DepositCardCreationFailure } from './DepositCardCreationFailure'
 import { DepositCardL2Failure } from './DepositCardL2Failure'
 import { useAppContextActions, useAppContextState } from '../App/AppContext'
-import { ChainId, getExplorerUrl, getNetworkLogo } from '../../util/networks'
-import { CheckCircleIcon } from '@heroicons/react/24/outline'
+import { ChainId, getNetworkLogo } from '../../util/networks'
+import { ExplorerTxLink } from '../common/atoms/ExplorerLink'
 
 export function DepositL1TxStatus({
   tx
@@ -32,13 +31,13 @@ export function DepositL1TxStatus({
     case DepositStatus.CREATION_FAILED:
     case DepositStatus.EXPIRED:
       return (
-        <ExternalLink
-          href={`${getExplorerUrl(l1.network.id)}/tx/${tx.txId}`}
-          className="arb-hover flex flex-nowrap items-center gap-1 text-blue-link"
+        <ExplorerTxLink
+          explorerUrl={l1.network.blockExplorers?.default.url}
+          txId={tx.txId}
+          className="flex flex-nowrap items-center gap-1"
         >
-          {shortenTxHash(tx.txId)}
           <CheckCircleIcon className="h-4 w-4 text-lime-dark" />
-        </ExternalLink>
+        </ExplorerTxLink>
       )
 
     default:
@@ -59,18 +58,17 @@ export function DepositL2TxStatus({
       return <span>Pending...</span>
 
     case DepositStatus.L2_SUCCESS:
+      if (!tx.l1ToL2MsgData || !tx.l1ToL2MsgData.l2TxID) {
+        return null
+      }
       return (
-        <ExternalLink
-          href={`${getExplorerUrl(l2.network.id)}/tx/${
-            tx.l1ToL2MsgData?.l2TxID
-          }`}
-          className="arb-hover flex flex-nowrap items-center gap-1 text-blue-link"
+        <ExplorerTxLink
+          explorerUrl={l2.network.blockExplorers?.default.url}
+          txId={tx.l1ToL2MsgData.l2TxID}
+          className="flex flex-nowrap items-center gap-1"
         >
-          {shortenTxHash(tx.l1ToL2MsgData?.l2TxID || '')}
-          {tx.l1ToL2MsgData?.l2TxID && (
-            <CheckCircleIcon className="h-4 w-4 text-lime-dark" />
-          )}
-        </ExternalLink>
+          <CheckCircleIcon className="h-4 w-4 text-lime-dark" />
+        </ExplorerTxLink>
       )
 
     default:

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardCreationFailure.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardCreationFailure.tsx
@@ -7,7 +7,6 @@ import { useNetworksAndSigners } from '../../hooks/useNetworksAndSigners'
 import { DepositCardContainer } from './DepositCard'
 import { shortenTxHash } from '../../util/CommonUtils'
 import { GET_HELP_LINK } from '../../constants'
-import { getExplorerUrl } from '../../util/networks'
 import { useChainLayers } from '../../hooks/useChainLayers'
 
 // TODO: Remove after Nitro.
@@ -33,11 +32,7 @@ export function DepositCardCreationFailure({ tx }: { tx: MergedTransaction }) {
         style={{ background: 'rgba(118, 39, 22, 0.2)' }}
         onClick={() => {
           copyToClipboard(
-            `${parentLayer} transaction: ${getExplorerUrl(l1.network.id)}/tx/${
-              tx.txId
-            }\n${layer} transaction: ${getExplorerUrl(l2.network.id)}/tx/${
-              tx.l1ToL2MsgData?.retryableCreationTxID
-            }`
+            `${parentLayer} transaction: ${l1.network.blockExplorers?.default.url}/tx/${tx.txId}\n${layer} transaction: ${l2.network.blockExplorers?.default.url}/tx/${tx.l1ToL2MsgData?.retryableCreationTxID}`
           )
         }}
       >

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardL1Failure.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardL1Failure.tsx
@@ -7,7 +7,6 @@ import { useNetworksAndSigners } from '../../hooks/useNetworksAndSigners'
 import { shortenTxHash } from '../../util/CommonUtils'
 import { DepositCardContainer } from './DepositCard'
 import { GET_HELP_LINK } from '../../constants'
-import { getExplorerUrl } from '../../util/networks'
 import { useChainLayers } from '../../hooks/useChainLayers'
 
 export function DepositCardL1Failure({ tx }: { tx: MergedTransaction }) {

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenApprovalDialog.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenApprovalDialog.tsx
@@ -15,7 +15,7 @@ import { ExternalLink } from '../common/ExternalLink'
 import { useETHPrice } from '../../hooks/useETHPrice'
 import { useNetworksAndSigners } from '../../hooks/useNetworksAndSigners'
 import { formatAmount, formatUSD } from '../../util/NumberUtils'
-import { getExplorerUrl, isNetwork } from '../../util/networks'
+import { isNetwork } from '../../util/networks'
 import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
 import { useGasPrice } from '../../hooks/useGasPrice'
 import {
@@ -30,6 +30,7 @@ import {
   fetchErc20L2GatewayAddress
 } from '../../util/TokenUtils'
 import { shortenTxHash } from '../../util/CommonUtils'
+import { ExplorerTokenLink } from '../common/atoms/ExplorerLink'
 
 export type TokenApprovalDialogProps = UseDialogProps & {
   token: ERC20BridgeToken | null
@@ -200,14 +201,15 @@ export function TokenApprovalDialog(props: TokenApprovalDialogProps) {
               </span>
               <span className="text-xs text-gray-500">{token?.name}</span>
             </div>
-            <ExternalLink
-              href={`${getExplorerUrl(
-                isDepositMode ? l1.network.id : l2.network.id
-              )}/token/${token?.address}`}
-              className="text-xs text-blue-link underline"
-            >
-              {token?.address.toLowerCase()}
-            </ExternalLink>
+            {token?.address && (
+              <ExplorerTokenLink
+                explorerUrl={
+                  (isDepositMode ? l1 : l2).network.blockExplorers?.default.url
+                }
+                className="text-xs"
+                tokenAddress={token.address}
+              />
+            )}
           </div>
         </div>
 
@@ -222,9 +224,9 @@ export function TokenApprovalDialog(props: TokenApprovalDialogProps) {
               permission to the{' '}
               <ExternalLink
                 className="text-blue-link underline"
-                href={`${getExplorerUrl(
-                  isDepositMode ? l1.network.id : l2.network.id
-                )}/address/${contractAddress}`}
+                href={`${
+                  (isDepositMode ? l1 : l2).network.blockExplorers?.default.url
+                }/address/${contractAddress}`}
                 onClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
                   event.stopPropagation()
                 }}

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx
@@ -11,7 +11,6 @@ import { useLatest } from 'react-use'
 import { useERC20L1Address } from '../../hooks/useERC20L1Address'
 import { useNetworksAndSigners } from '../../hooks/useNetworksAndSigners'
 import { useActions, useAppState } from '../../state'
-import { getExplorerUrl } from '../../util/networks'
 import {
   erc20DataToErc20BridgeToken,
   fetchErc20Data,
@@ -24,6 +23,7 @@ import GrumpyCat from '@/images/grumpy-cat.webp'
 import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
 import { ERC20BridgeToken } from '../../hooks/arbTokenBridge.types'
 import { warningToast } from '../common/atoms/Toast'
+import { ExplorerTokenLink } from '../common/atoms/ExplorerLink'
 
 enum ImportStatus {
   LOADING,
@@ -358,17 +358,13 @@ export function TokenImportDialog({
             {tokenToImport?.symbol}
           </span>
           <span className="mb-3 mt-0">{tokenToImport?.name}</span>
-          <a
-            href={`${getExplorerUrl(l1.network.id)}/token/${
-              tokenToImport?.address
-            }`}
-            target="_blank"
-            rel="noopener noreferrer"
-            style={{ color: '#1366C1' }}
-            className="break-all underline"
-          >
-            {tokenToImport?.address}
-          </a>
+          {tokenToImport?.address && (
+            <ExplorerTokenLink
+              explorerUrl={l1.network.blockExplorers?.default.url}
+              tokenAddress={tokenToImport.address}
+              className="break-all"
+            />
+          )}
 
           {status === ImportStatus.UNKNOWN && (
             <div className="flex w-full justify-center pt-4">

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx
@@ -24,7 +24,6 @@ import {
 } from '../../util/TokenUtils'
 import { SafeImage } from '../common/SafeImage'
 import { useNetworksAndSigners } from '../../hooks/useNetworksAndSigners'
-import { getExplorerUrl } from '../../util/networks'
 import { Tooltip } from '../common/Tooltip'
 import { StatusBadge } from '../common/StatusBadge'
 import { useBalance } from '../../hooks/useBalance'
@@ -58,13 +57,20 @@ function BlockExplorerTokenLink({
     return null
   }
 
+  const shortenedAddress = shortenAddress(address).toLowerCase()
+  const explorerUrl = chain.blockExplorers?.default.url
+
+  if (!explorerUrl) {
+    return shortenedAddress
+  }
+
   return (
     <ExternalLink
-      href={`${getExplorerUrl(chain.id)}/token/${address}`}
+      href={`${explorerUrl}/token/${address}`}
       className="text-xs text-blue-link underline"
       onClick={e => e.stopPropagation()}
     >
-      {shortenAddress(address).toLowerCase()}
+      {shortenedAddress}
     </ExternalLink>
   )
 }

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx
@@ -12,7 +12,6 @@ import { formatAmount } from '../../util/NumberUtils'
 import {
   ChainId,
   getCustomChainFromLocalStorageById,
-  getExplorerUrl,
   getL2ChainIds,
   isNetwork
 } from '../../util/networks'
@@ -73,6 +72,7 @@ import {
 } from '../../hooks/useNativeCurrency'
 import { defaultErc20Decimals } from '../../defaults'
 import { TransferReadinessRichErrorMessage } from './useTransferReadinessUtils'
+import { ExplorerAddressLink } from '../common/atoms/ExplorerLink'
 
 enum NetworkType {
   l1 = 'l1',
@@ -145,12 +145,10 @@ function CustomAddressBanner({
     >
       <span>
         Showing balance for Custom Destination Address:{' '}
-        <ExternalLink
-          className="arb-hover underline"
-          href={`${getExplorerUrl(network.id)}/address/${customAddress}`}
-        >
-          {shortenAddress(customAddress)}
-        </ExternalLink>
+        <ExplorerAddressLink
+          explorerUrl={network.blockExplorers?.default.url}
+          address={customAddress}
+        />
       </span>
     </div>
   )

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/WithdrawalCard.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/WithdrawalCard.tsx
@@ -1,24 +1,18 @@
 import React, { useMemo } from 'react'
 
-import { ExternalLink } from '../common/ExternalLink'
 import { MergedTransaction } from '../../state/app/state'
 import { useNetworksAndSigners } from '../../hooks/useNetworksAndSigners'
-import { shortenTxHash } from '../../util/CommonUtils'
 import { trackEvent } from '../../util/AnalyticsUtils'
 
 import { useAppContextActions, useAppContextState } from '../App/AppContext'
-import {
-  ChainId,
-  getExplorerUrl,
-  getNetworkLogo,
-  isNetwork
-} from '../../util/networks'
+import { ChainId, getNetworkLogo, isNetwork } from '../../util/networks'
 import { CheckCircleIcon } from '@heroicons/react/24/outline'
 import { findMatchingL1TxForWithdrawal } from '../../state/app/utils'
 import Image from 'next/image'
 import { ClaimableCardConfirmed } from './ClaimableCardConfirmed'
 import { ClaimableCardUnconfirmed } from './ClaimableCardUnconfirmed'
 import { twMerge } from 'tailwind-merge'
+import { ExplorerTxLink } from '../common/atoms/ExplorerLink'
 
 export function WithdrawalL2TxStatus({
   tx
@@ -41,13 +35,13 @@ export function WithdrawalL2TxStatus({
   }
 
   return (
-    <ExternalLink
-      href={`${getExplorerUrl(l2Network.id)}/tx/${tx.txId}`}
-      className="arb-hover flex flex-nowrap items-center gap-1 text-blue-link"
+    <ExplorerTxLink
+      explorerUrl={l2Network.blockExplorers?.default.url}
+      txId={tx.txId}
+      className="flex flex-nowrap items-center gap-1"
     >
-      {shortenTxHash(tx.txId)}
       <CheckCircleIcon className="h-4 w-4 text-lime-dark" />
-    </ExternalLink>
+    </ExplorerTxLink>
   )
 }
 
@@ -71,13 +65,13 @@ export function WithdrawalL1TxStatus({
   }
 
   return (
-    <ExternalLink
-      href={`${getExplorerUrl(l1Network.id)}/tx/${l1Tx.txId}`}
-      className="arb-hover flex flex-nowrap items-center gap-1 text-blue-link"
+    <ExplorerTxLink
+      explorerUrl={l1Network.blockExplorers?.default.url}
+      txId={l1Tx.txId}
+      className="flex flex-nowrap items-center gap-1"
     >
-      {shortenTxHash(l1Tx.txId)}
       <CheckCircleIcon className="h-4 w-4 text-lime-dark" />
-    </ExternalLink>
+    </ExplorerTxLink>
   )
 }
 

diff --git a/packages/arb-token-bridge-ui/src/hooks/useNetworkTPS.ts b/packages/arb-token-bridge-ui/src/hooks/useNetworkTPS.ts
@@ -4,21 +4,23 @@ import axios from 'axios'
 import { load } from 'cheerio'
 import useSWR from 'swr'
 
-import { getExplorerUrl, isNetwork } from '../util/networks'
+import { isNetwork } from '../util/networks'
 import { useNetworksAndSigners } from './useNetworksAndSigners'
+import { getChainByChainId } from '../util/wagmi/setup'
 
 const emptyData = { tps: null }
 
 const fetchNetworkTPS = async (l2ChainId: number) => {
   // currently we only support TPS information for Arb-one and nova
   // return null for rest of the networks
   const canFetchTPS =
-    isNetwork(Number(l2ChainId)).isArbitrumNova ||
-    isNetwork(Number(l2ChainId)).isArbitrumOne
+    isNetwork(l2ChainId).isArbitrumNova || isNetwork(l2ChainId).isArbitrumOne
   if (!canFetchTPS) return emptyData
 
+  const chain = getChainByChainId(l2ChainId)
+
   // url from where we'll fetch stats
-  const explorerUrl = getExplorerUrl(Number(l2ChainId))
+  const explorerUrl = chain?.blockExplorers?.default.url ?? ''
 
   // for 403 or CORS blocked errors while scraping external endpoints, we use cors-proxy
   const finalUrl = `https://corsproxy.io/?${encodeURIComponent(explorerUrl)}`

diff --git a/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts b/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts
@@ -61,6 +61,10 @@ const chainList = isTestingEnvironment
       ...customChains
     ]
 
+export function getChainByChainId(chainId: ChainId) {
+  return chainList.find(chain => chain.id === chainId)
+}
+
 const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!
 
 if (!projectId) {