refactor: use wagmi as single source of truth

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTable.tsx

@@ -18,9 +18,7 @@ import { TableBodyError } from './TableBodyError'
 import { TableActionHeader } from './TableActionHeader'
 import { useAppState } from '../../../state'
 import { useNetworksAndSigners } from '../../../hooks/useNetworksAndSigners'
-import { ExternalLink } from '../../common/ExternalLink'
-import { getExplorerUrl } from '../../../util/networks'
-import { shortenAddress } from '../../../util/CommonUtils'
+import { ExplorerAddressLink } from '../../common/atoms/ExplorerLink'
 
 export type PageParams = {
   searchString: string
@@ -85,11 +83,9 @@ export const TransactionsTableHeader = () => {
 }
 
 export const CustomAddressTxExplorer = ({
-  tx,
-  explorerClassName = 'arb-hover underline'
+  tx
 }: {
   tx: Pick<MergedTransaction, 'sender' | 'destination' | 'isWithdrawal'>
-  explorerClassName?: string
 }) => {
   const { address } = useAccount()
   const { l1, l2 } = useNetworksAndSigners()
@@ -108,7 +104,7 @@ export const CustomAddressTxExplorer = ({
     return tx.destination.toLowerCase() !== address.toLowerCase()
   }, [tx.destination, address])
 
-  const explorerChainId = useMemo(() => {
+  const explorerChain = useMemo(() => {
     if (!isDifferentSenderTx && !isCustomDestinationTx) {
       return null
     }
@@ -117,16 +113,22 @@ export const CustomAddressTxExplorer = ({
       // this is a withdrawal, so
       // if it's a different sender, show their L2 address (where the withdrawal originated)
       // otherwise it's a custom destination, show their L1 address (where the funds will land)
-      return isDifferentSenderTx ? l2.network.id : l1.network.id
+      return isDifferentSenderTx ? l2.network : l1.network
     }
 
     // this is a deposit, so
     // if it's a different sender, show their L1 address (where the deposit originated)
     // otherwise it's a custom destination, show their L2 address (where the funds will land)
-    return isDifferentSenderTx ? l1.network.id : l2.network.id
-  }, [isDifferentSenderTx, isCustomDestinationTx, l1, l2])
-
-  if (!explorerChainId || !isCustomDestinationAddressTx(tx)) {
+    return isDifferentSenderTx ? l1.network : l2.network
+  }, [
+    isDifferentSenderTx,
+    isCustomDestinationTx,
+    tx.isWithdrawal,
+    l1.network,
+    l2.network
+  ])
+
+  if (!explorerChain || !isCustomDestinationAddressTx(tx)) {
     return null
   }
 
@@ -141,14 +143,10 @@ export const CustomAddressTxExplorer = ({
       ) : (
         <span>Funds sent to: </span>
       )}
-      <ExternalLink
-        className={explorerClassName}
-        href={`${getExplorerUrl(explorerChainId)}/address/${
-          isDifferentSenderTx ? tx.sender : tx.destination
-        }`}
-      >
-        {shortenAddress(isDifferentSenderTx ? tx.sender : tx.destination)}
-      </ExternalLink>
+      <ExplorerAddressLink
+        explorerUrl={explorerChain.blockExplorers?.default.url}
+        address={isDifferentSenderTx ? tx.sender : tx.destination}
+      />
     </>
   )
 }

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTableClaimableRow.tsx

@@ -2,21 +2,13 @@ import { useMemo } from 'react'
 import { useAccount } from 'wagmi'
 import { twMerge } from 'tailwind-merge'
 
-import { NodeBlockDeadlineStatusTypes } from '../../../hooks/arbTokenBridge.types'
 import { MergedTransaction } from '../../../state/app/state'
 import { StatusBadge } from '../../common/StatusBadge'
 import { TransactionsTableCustomAddressLabel } from './TransactionsTableCustomAddressLabel'
 import { useNetworksAndSigners } from '../../../hooks/useNetworksAndSigners'
 import { WithdrawalCountdown } from '../../common/WithdrawalCountdown'
-import { ExternalLink } from '../../common/ExternalLink'
-import { shortenTxHash } from '../../../util/CommonUtils'
 import { Tooltip } from '../../common/Tooltip'
-import {
-  ChainId,
-  getExplorerUrl,
-  getNetworkName,
-  isNetwork
-} from '../../../util/networks'
+import { ChainId, getNetworkName, isNetwork } from '../../../util/networks'
 import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import {
   isCustomDestinationAddressTx,
@@ -29,6 +21,7 @@ import { sanitizeTokenSymbol } from '../../../util/TokenUtils'
 import { TransactionsTableRowAction } from './TransactionsTableRowAction'
 import { useRemainingTime } from '../../../state/cctpState'
 import { useChainLayers } from '../../../hooks/useChainLayers'
+import { ExplorerTxLink } from '../../common/atoms/ExplorerLink'
 
 type CommonProps = {
   tx: MergedTransaction
@@ -231,6 +224,7 @@ function ClaimableRowTime({ tx }: CommonProps) {
 function ClaimedTxInfo({ tx, isSourceChainArbitrum }: CommonProps) {
   const { l1, l2 } = useNetworksAndSigners()
   const { parentLayer } = useChainLayers()
+  const toNetwork = isSourceChainArbitrum ? l1.network : l2.network
   const toNetworkId = isSourceChainArbitrum ? l1.network.id : l2.network.id
 
   const isExecuted = tx.status === 'Executed'
@@ -261,19 +255,18 @@ function ClaimedTxInfo({ tx, isSourceChainArbitrum }: CommonProps) {
     >
       <span className="rounded-md px-2 text-xs text-dark">Step 2</span>
       {getNetworkName(toNetworkId)}:{' '}
-      <ExternalLink
-        href={`${getExplorerUrl(toNetworkId)}/tx/${claimedTx.txId}`}
-        className="arb-hover text-blue-link"
-      >
-        {shortenTxHash(claimedTx.txId)}
-      </ExternalLink>
+      <ExplorerTxLink
+        explorerUrl={toNetwork.blockExplorers?.default.url}
+        txId={claimedTx.txId}
+      />
     </span>
   )
 }
 
 function ClaimableRowTxID({ tx, isSourceChainArbitrum }: CommonProps) {
   const { l1, l2 } = useNetworksAndSigners()
   const { layer } = useChainLayers()
+  const fromNetwork = isSourceChainArbitrum ? l2.network : l1.network
   const fromNetworkId = isSourceChainArbitrum ? l2.network.id : l1.network.id
 
   return (
@@ -284,12 +277,10 @@ function ClaimableRowTxID({ tx, isSourceChainArbitrum }: CommonProps) {
       >
         <span className="rounded-md px-2 text-xs text-dark">Step 1</span>
         {getNetworkName(fromNetworkId)}:{' '}
-        <ExternalLink
-          href={`${getExplorerUrl(fromNetworkId)}/tx/${tx.txId}`}
-          className="arb-hover text-blue-link"
-        >
-          {shortenTxHash(tx.txId)}
-        </ExternalLink>
+        <ExplorerTxLink
+          explorerUrl={fromNetwork.blockExplorers?.default.url}
+          txId={tx.txId}
+        />
       </span>
 
       <ClaimedTxInfo tx={tx} isSourceChainArbitrum={isSourceChainArbitrum} />

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTableDepositRow.tsx

@@ -1,18 +1,15 @@
 import { useMemo } from 'react'
 import { useAccount } from 'wagmi'
 import { twMerge } from 'tailwind-merge'
+import { InformationCircleIcon } from '@heroicons/react/24/outline'
 
 import { DepositStatus, MergedTransaction } from '../../../state/app/state'
 import { StatusBadge } from '../../common/StatusBadge'
 import { useRedeemRetryable } from '../../../hooks/useRedeemRetryable'
 import { useNetworksAndSigners } from '../../../hooks/useNetworksAndSigners'
-import { shortenTxHash } from '../../../util/CommonUtils'
 import { DepositCountdown } from '../../common/DepositCountdown'
-import { ExternalLink } from '../../common/ExternalLink'
 import { Button } from '../../common/Button'
 import { Tooltip } from '../../common/Tooltip'
-import { getExplorerUrl, getNetworkName } from '../../../util/networks'
-import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import {
   isCustomDestinationAddressTx,
   isDepositReadyToRedeem,
@@ -26,6 +23,8 @@ import { TransactionsTableCustomAddressLabel } from './TransactionsTableCustomAd
 import { TransactionsTableRowAction } from './TransactionsTableRowAction'
 import { useChainLayers } from '../../../hooks/useChainLayers'
 import { AssetType } from '../../../hooks/arbTokenBridge.types'
+import { ExplorerTxLink } from '../../common/atoms/ExplorerLink'
+import { getNetworkName } from '../../../util/networks'
 
 function DepositRowStatus({ tx }: { tx: MergedTransaction }) {
   const { parentLayer, layer } = useChainLayers()
@@ -177,12 +176,10 @@ function DepositRowTxID({ tx }: { tx: MergedTransaction }) {
       >
         <span className="rounded-md px-2 text-xs text-dark">Step 1</span>
         {getNetworkName(l1.network.id)}:{' '}
-        <ExternalLink
-          href={`${getExplorerUrl(l1.network.id)}/tx/${tx.txId}`}
-          className="arb-hover text-blue-link"
-        >
-          {shortenTxHash(tx.txId)}
-        </ExternalLink>
+        <ExplorerTxLink
+          explorerUrl={l1.network.blockExplorers?.default.url}
+          txId={tx.txId}
+        />
       </span>
 
       {l2TxHash && (
@@ -192,12 +189,10 @@ function DepositRowTxID({ tx }: { tx: MergedTransaction }) {
         >
           <span className="rounded-md px-2 text-xs text-dark">Step 2</span>
           {getNetworkName(l2.network.id)}:{' '}
-          <ExternalLink
-            href={`${getExplorerUrl(l2.network.id)}/tx/${l2TxHash}`}
-            className="arb-hover text-blue-link"
-          >
-            {shortenTxHash(l2TxHash)}
-          </ExternalLink>
+          <ExplorerTxLink
+            explorerUrl={l2.network.blockExplorers?.default.url}
+            txId={l2TxHash}
+          />
         </span>
       )}
     </div>

packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx

@@ -12,7 +12,6 @@ import {
 import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/24/solid'
 
 import { Tooltip } from '../common/Tooltip'
-import { getExplorerUrl } from '../../util/networks'
 import { ExternalLink } from '../common/ExternalLink'
 
 import { useAppState } from '../../state'
@@ -274,21 +273,23 @@ export const AdvancedSettings = () => {
           {!error && warning && (
             <p className="text-xs text-yellow-500">{warning}</p>
           )}
-          {destinationAddress && !error && (
-            <ExternalLink
-              className="arb-hover mt-2 flex w-fit items-center text-xs font-bold text-gray-dark"
-              href={`${getExplorerUrl(
-                (isDepositMode ? l2 : l1).network.id
-              )}/address/${destinationAddress}`}
-            >
-              <ArrowDownTrayIcon
-                height={12}
-                strokeWidth={3}
-                className="mr-1 -rotate-90"
-              />
-              View account in explorer
-            </ExternalLink>
-          )}
+          {destinationAddress &&
+            !error &&
+            (isDepositMode ? l2 : l1).network.blockExplorers && (
+              <ExternalLink
+                className="arb-hover mt-2 flex w-fit items-center text-xs font-bold text-gray-dark"
+                href={`${
+                  (isDepositMode ? l2 : l1).network.blockExplorers!.default.url
+                }/address/${destinationAddress}`}
+              >
+                <ArrowDownTrayIcon
+                  height={12}
+                  strokeWidth={3}
+                  className="mr-1 -rotate-90"
+                />
+                View account in explorer
+              </ExternalLink>
+            )}
         </>
       )}
     </div>

packages/arb-token-bridge-ui/src/components/TransferPanel/ClaimableCardConfirmed.tsx

@@ -149,10 +149,7 @@ export function ClaimableCardConfirmed({ tx }: { tx: MergedTransaction }) {
 
             {isCustomDestinationAddressTx(tx) && (
               <span className="mt-2 flex flex-nowrap gap-1 text-sm text-gray-dark lg:text-base">
-                <CustomAddressTxExplorer
-                  tx={tx}
-                  explorerClassName="arb-hover text-blue-link"
-                />
+                <CustomAddressTxExplorer tx={tx} />
               </span>
             )}
           </div>

packages/arb-token-bridge-ui/src/components/TransferPanel/ClaimableCardUnconfirmed.tsx

@@ -88,10 +88,7 @@ export function ClaimableCardUnconfirmed({ tx }: { tx: MergedTransaction }) {
             )}
             {isCustomDestinationAddressTx(tx) && (
               <span className="mt-2 flex flex-nowrap gap-1 text-sm text-gray-dark lg:text-base">
-                <CustomAddressTxExplorer
-                  tx={tx}
-                  explorerClassName="arb-hover text-blue-link"
-                />
+                <CustomAddressTxExplorer tx={tx} />
               </span>
             )}
           </div>

packages/arb-token-bridge-ui/src/components/TransferPanel/CustomFeeTokenApprovalDialog.tsx

@@ -9,11 +9,15 @@ 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 { useGasPrice } from '../../hooks/useGasPrice'
 import { approveCustomFeeTokenEstimateGas } from './CustomFeeTokenUtils'
 import { NativeCurrencyErc20 } from '../../hooks/useNativeCurrency'
 import { useAppState } from '../../state'
+import {
+  ExplorerAddressLink,
+  ExplorerTokenLink
+} from '../common/atoms/ExplorerLink'
 
 export type CustomFeeTokenApprovalDialogProps = UseDialogProps & {
   customFeeToken: NativeCurrencyErc20
@@ -109,14 +113,11 @@ export function CustomFeeTokenApprovalDialog(
                 {customFeeToken.name}
               </span>
             </div>
-            <ExternalLink
-              href={`${getExplorerUrl(l1.network.id)}/token/${
-                customFeeToken.address
-              }`}
-              className="text-xs text-blue-link underline"
-            >
-              {customFeeToken.address}
-            </ExternalLink>
+            <ExplorerTokenLink
+              explorerUrl={l1.network.blockExplorers?.default.url}
+              tokenAddress={customFeeToken.address}
+              className="text-xs"
+            />
           </div>
         </div>