From bc115fd0d760d8900eed0f4f7b9b278394efbcd5 Mon Sep 17 00:00:00 2001 From: Fionna Chan Date: Fri, 8 Dec 2023 17:13:44 +0000 Subject: [PATCH 1/6] refactor: use wagmi as single source of truth for rpcURLs --- .../src/hooks/useNetworks.ts | 33 ++++++++++--------- .../src/util/wagmi/setup.ts | 14 +++++--- .../src/util/wagmi/wagmiAdditionalNetworks.ts | 14 +------- 3 files changed, 27 insertions(+), 34 deletions(-) diff --git a/packages/arb-token-bridge-ui/src/hooks/useNetworks.ts b/packages/arb-token-bridge-ui/src/hooks/useNetworks.ts index fd2259afd5..a57603cf40 100644 --- a/packages/arb-token-bridge-ui/src/hooks/useNetworks.ts +++ b/packages/arb-token-bridge-ui/src/hooks/useNetworks.ts @@ -1,16 +1,17 @@ import { Chain } from 'wagmi' import { StaticJsonRpcProvider } from '@ethersproject/providers' import { useCallback, useMemo } from 'react' -import { mainnet, arbitrum, goerli, arbitrumGoerli } from '@wagmi/core/chains' +import { + mainnet, + arbitrum, + goerli, + arbitrumGoerli, + sepolia +} from '@wagmi/core/chains' import { useArbQueryParams } from './useArbQueryParams' +import { ChainId, getCustomChainsFromLocalStorage } from '../util/networks' import { - ChainId, - getCustomChainsFromLocalStorage, - rpcURLs -} from '../util/networks' -import { - sepolia, arbitrumNova, arbitrumSepolia, xaiTestnet, @@ -60,21 +61,21 @@ const getProviderForChainCache: { // start with empty cache } -function createProviderWithCache(chainId: ChainId) { - const rpcUrl = rpcURLs[chainId] - const provider = new StaticJsonRpcProvider(rpcUrl, chainId) - getProviderForChainCache[chainId] = provider +function createProviderWithCache(chain: Chain) { + const rpcUrl = chain.rpcUrls.default.http[0] + const provider = new StaticJsonRpcProvider(rpcUrl, chain.id) + getProviderForChainCache[chain.id] = provider return provider } -function getProviderForChainId(chainId: ChainId): StaticJsonRpcProvider { - const cachedProvider = getProviderForChainCache[chainId] +function getProviderForChain(chain: Chain): StaticJsonRpcProvider { + const cachedProvider = getProviderForChainCache[chain.id] if (typeof cachedProvider !== 'undefined') { return cachedProvider } - return createProviderWithCache(chainId) + return createProviderWithCache(chain) } function isSupportedChainId(chainId: ChainId | undefined): chainId is ChainId { @@ -227,9 +228,9 @@ export function useNetworks(): [UseNetworksState, UseNetworksSetState] { return [ { sourceChain, - sourceChainProvider: getProviderForChainId(validSourceChainId), + sourceChainProvider: getProviderForChain(sourceChain), destinationChain, - destinationChainProvider: getProviderForChainId(validDestinationChainId) + destinationChainProvider: getProviderForChain(destinationChain) }, setState ] diff --git a/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts b/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts index bbfc38f1bb..5dd8c2c07c 100644 --- a/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts +++ b/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts @@ -1,12 +1,11 @@ import { createClient, configureChains, goerli } from 'wagmi' -import { mainnet, arbitrum, arbitrumGoerli } from '@wagmi/core/chains' +import { mainnet, arbitrum, arbitrumGoerli, sepolia } from '@wagmi/core/chains' import { publicProvider } from 'wagmi/providers/public' import { connectorsForWallets, getDefaultWallets } from '@rainbow-me/rainbowkit' import { trustWallet, ledgerWallet } from '@rainbow-me/rainbowkit/wallets' -import { infuraProvider } from 'wagmi/providers/infura' +import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc' import { - sepolia, arbitrumNova, arbitrumSepolia, xaiTestnet, @@ -16,7 +15,7 @@ import { chainToWagmiChain } from './wagmiAdditionalNetworks' import { isTestingEnvironment } from '../CommonUtils' -import { ChainId } from '../networks' +import { ChainId, rpcURLs } from '../networks' import { getCustomChainsFromLocalStorage } from '../networks' const customChains = getCustomChainsFromLocalStorage().map(chain => @@ -134,7 +133,12 @@ export function getProps(targetChainKey: string | null) { // https://github.com/wagmi-dev/references/blob/main/packages/connectors/src/walletConnect.ts#L114 getChains(sanitizeTargetChainKey(targetChainKey)), [ - infuraProvider({ apiKey: process.env.NEXT_PUBLIC_INFURA_KEY! }), + jsonRpcProvider({ + rpc: chain => ({ + http: rpcURLs[chain.id]! + }), + priority: 1 + }), publicProvider() ] ) diff --git a/packages/arb-token-bridge-ui/src/util/wagmi/wagmiAdditionalNetworks.ts b/packages/arb-token-bridge-ui/src/util/wagmi/wagmiAdditionalNetworks.ts index 45995d52d2..dfc78d8645 100644 --- a/packages/arb-token-bridge-ui/src/util/wagmi/wagmiAdditionalNetworks.ts +++ b/packages/arb-token-bridge-ui/src/util/wagmi/wagmiAdditionalNetworks.ts @@ -1,4 +1,4 @@ -import { Chain, sepolia as sepoliaDefault } from 'wagmi' +import { Chain } from 'wagmi' import { ether } from '../../constants' import { ChainId, ChainWithRpcUrl, explorerUrls, rpcURLs } from '../networks' @@ -20,18 +20,6 @@ export function chainToWagmiChain(chain: ChainWithRpcUrl): Chain { } } -export const sepolia: Chain = { - ...sepoliaDefault, - rpcUrls: { - ...sepoliaDefault.rpcUrls, - // override the default public RPC with the Infura RPC - // public RPCs are getting rate limited - default: { - http: [rpcURLs[ChainId.Sepolia]!] - } - } -} - export const arbitrumSepolia: Chain = { id: ChainId.ArbitrumSepolia, name: 'Arbitrum Sepolia', From 32e65fcf2ad96f646df647ee33cf7b17556a58f5 Mon Sep 17 00:00:00 2001 From: Fionna Chan Date: Fri, 8 Dec 2023 18:37:47 +0000 Subject: [PATCH 2/6] more updates --- .../TransferPanel/DepositCardL1Failure.tsx | 36 ++++++++++--------- .../src/components/common/Header.tsx | 11 +++--- .../common/HeaderAccountPopover.tsx | 5 ++- .../src/hooks/useNetworks.ts | 4 +-- .../src/types/ChainQueryParam.ts | 4 +-- .../arb-token-bridge-ui/src/util/networks.ts | 2 +- .../util/wagmi/getPartnerChainsForChainId.ts | 4 +-- .../src/util/wagmi/getWagmiChain.ts | 11 ++++-- .../src/util/wagmi/setup.ts | 9 +++-- .../src/util/wagmi/wagmiAdditionalNetworks.ts | 21 +---------- 10 files changed, 50 insertions(+), 57 deletions(-) diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardL1Failure.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardL1Failure.tsx index f6d76a8aa3..6ae90c342a 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardL1Failure.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardL1Failure.tsx @@ -27,23 +27,25 @@ export function DepositCardL1Failure({ tx }: { tx: MergedTransaction }) { Just paste the following information into a help request:

- + {l1.network.blockExplorers && ( + + )}
diff --git a/packages/arb-token-bridge-ui/src/hooks/useNetworks.ts b/packages/arb-token-bridge-ui/src/hooks/useNetworks.ts index a57603cf40..37c1a1490c 100644 --- a/packages/arb-token-bridge-ui/src/hooks/useNetworks.ts +++ b/packages/arb-token-bridge-ui/src/hooks/useNetworks.ts @@ -4,15 +4,15 @@ import { useCallback, useMemo } from 'react' import { mainnet, arbitrum, + arbitrumNova, goerli, arbitrumGoerli, sepolia -} from '@wagmi/core/chains' +} from '@wagmi/chains' import { useArbQueryParams } from './useArbQueryParams' import { ChainId, getCustomChainsFromLocalStorage } from '../util/networks' import { - arbitrumNova, arbitrumSepolia, xaiTestnet, stylusTestnet, diff --git a/packages/arb-token-bridge-ui/src/types/ChainQueryParam.ts b/packages/arb-token-bridge-ui/src/types/ChainQueryParam.ts index fc25cf4047..80308bd97f 100644 --- a/packages/arb-token-bridge-ui/src/types/ChainQueryParam.ts +++ b/packages/arb-token-bridge-ui/src/types/ChainQueryParam.ts @@ -1,5 +1,5 @@ import { Chain } from 'wagmi' -import * as chains from 'wagmi/chains' +import * as chains from '@wagmi/chains' import { ChainId, @@ -102,7 +102,7 @@ export function getChainForChainKeyQueryParam( return chains.arbitrum case 'arbitrum-nova': - return customChains.arbitrumNova + return chains.arbitrumNova case 'arbitrum-goerli': return chains.arbitrumGoerli diff --git a/packages/arb-token-bridge-ui/src/util/networks.ts b/packages/arb-token-bridge-ui/src/util/networks.ts index d55524c085..05b0edf014 100644 --- a/packages/arb-token-bridge-ui/src/util/networks.ts +++ b/packages/arb-token-bridge-ui/src/util/networks.ts @@ -270,7 +270,7 @@ const defaultL1Network: L1Network = { chainID: 1337, explorerUrl: '', isCustom: true, - name: 'EthLocal', + name: 'Ethereum', partnerChainIDs: [412346], isArbitrum: false } diff --git a/packages/arb-token-bridge-ui/src/util/wagmi/getPartnerChainsForChainId.ts b/packages/arb-token-bridge-ui/src/util/wagmi/getPartnerChainsForChainId.ts index fceed30d4c..4e030e3a1d 100644 --- a/packages/arb-token-bridge-ui/src/util/wagmi/getPartnerChainsForChainId.ts +++ b/packages/arb-token-bridge-ui/src/util/wagmi/getPartnerChainsForChainId.ts @@ -4,12 +4,12 @@ import { goerli, sepolia, arbitrum as arbitrumOne, + arbitrumNova, arbitrumGoerli -} from 'wagmi/chains' +} from '@wagmi/chains' import { ChainId, getCustomChainsFromLocalStorage } from '../networks' import { - arbitrumNova, arbitrumSepolia, chainToWagmiChain, stylusTestnet, diff --git a/packages/arb-token-bridge-ui/src/util/wagmi/getWagmiChain.ts b/packages/arb-token-bridge-ui/src/util/wagmi/getWagmiChain.ts index 0084bde7a2..552e38581f 100644 --- a/packages/arb-token-bridge-ui/src/util/wagmi/getWagmiChain.ts +++ b/packages/arb-token-bridge-ui/src/util/wagmi/getWagmiChain.ts @@ -1,10 +1,15 @@ import { Chain } from 'wagmi' -import { mainnet, goerli, arbitrum, arbitrumGoerli } from 'wagmi/chains' +import { + mainnet, + goerli, + arbitrum, + arbitrumNova, + arbitrumGoerli, + sepolia +} from '@wagmi/chains' import { chainToWagmiChain, - sepolia, - arbitrumNova, arbitrumSepolia, xaiTestnet, stylusTestnet, diff --git a/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts b/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts index 5dd8c2c07c..baf6a45f1d 100644 --- a/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts +++ b/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts @@ -1,12 +1,17 @@ import { createClient, configureChains, goerli } from 'wagmi' -import { mainnet, arbitrum, arbitrumGoerli, sepolia } from '@wagmi/core/chains' +import { + mainnet, + arbitrum, + arbitrumNova, + arbitrumGoerli, + sepolia +} from '@wagmi/chains' import { publicProvider } from 'wagmi/providers/public' import { connectorsForWallets, getDefaultWallets } from '@rainbow-me/rainbowkit' import { trustWallet, ledgerWallet } from '@rainbow-me/rainbowkit/wallets' import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc' import { - arbitrumNova, arbitrumSepolia, xaiTestnet, stylusTestnet, diff --git a/packages/arb-token-bridge-ui/src/util/wagmi/wagmiAdditionalNetworks.ts b/packages/arb-token-bridge-ui/src/util/wagmi/wagmiAdditionalNetworks.ts index dfc78d8645..116afc93ff 100644 --- a/packages/arb-token-bridge-ui/src/util/wagmi/wagmiAdditionalNetworks.ts +++ b/packages/arb-token-bridge-ui/src/util/wagmi/wagmiAdditionalNetworks.ts @@ -42,25 +42,6 @@ export const arbitrumSepolia: Chain = { } } -export const arbitrumNova: Chain = { - id: ChainId.ArbitrumNova, - name: 'Arbitrum Nova', - network: 'arbitrum-nova', - nativeCurrency: ether, - rpcUrls: { - default: { - http: [rpcURLs[ChainId.ArbitrumNova]!] - }, - public: { - http: [rpcURLs[ChainId.ArbitrumNova]!] - } - }, - blockExplorers: { - etherscan: { name: 'Arbiscan', url: 'https://nova.arbiscan.io' }, - default: { name: 'Arbiscan', url: 'https://nova.arbiscan.io' } - } -} - export const xaiTestnet: Chain = { id: ChainId.XaiTestnet, name: 'Xai Orbit Testnet', @@ -108,7 +89,7 @@ export const stylusTestnet: Chain = { */ export const localL1Network: Chain = { id: ChainId.Local, - name: 'EthLocal', + name: 'Ethereum', network: 'local', nativeCurrency: ether, rpcUrls: { From 7f408814f91ffa0264a4f83f11d9d0eadb431ede Mon Sep 17 00:00:00 2001 From: Fionna Chan Date: Mon, 11 Dec 2023 15:28:34 +0000 Subject: [PATCH 3/6] replace explorer links --- .../TransactionsTable/TransactionsTable.tsx | 38 +++---- .../TransactionsTableClaimableRow.tsx | 33 ++---- .../TransactionsTableDepositRow.tsx | 27 ++--- .../TransferPanel/AdvancedSettings.tsx | 33 +++--- .../TransferPanel/ClaimableCardConfirmed.tsx | 5 +- .../ClaimableCardUnconfirmed.tsx | 5 +- .../CustomFeeTokenApprovalDialog.tsx | 19 ++-- .../TransferPanel/DepositCardPending.tsx | 5 +- .../components/common/atoms/ExplorerLink.tsx | 107 ++++++++++++++++++ .../arb-token-bridge-ui/src/util/networks.ts | 5 - 10 files changed, 178 insertions(+), 99 deletions(-) create mode 100644 packages/arb-token-bridge-ui/src/components/common/atoms/ExplorerLink.tsx diff --git a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTable.tsx b/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTable.tsx index 5d8bc52bff..43f1440f0c 100644 --- a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTable.tsx +++ b/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 - 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 = ({ ) : ( Funds sent to: )} - - {shortenAddress(isDifferentSenderTx ? tx.sender : tx.destination)} - + ) } diff --git a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTableClaimableRow.tsx b/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTableClaimableRow.tsx index b13a2c6208..43489ec365 100644 --- a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTableClaimableRow.tsx +++ b/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,12 +255,10 @@ function ClaimedTxInfo({ tx, isSourceChainArbitrum }: CommonProps) { > Step 2 {getNetworkName(toNetworkId)}:{' '} - - {shortenTxHash(claimedTx.txId)} - + ) } @@ -274,6 +266,7 @@ function ClaimedTxInfo({ tx, isSourceChainArbitrum }: CommonProps) { 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) { > Step 1 {getNetworkName(fromNetworkId)}:{' '} - - {shortenTxHash(tx.txId)} - + diff --git a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTableDepositRow.tsx b/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTableDepositRow.tsx index 0b0f38d31a..c47822ce21 100644 --- a/packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionsTable/TransactionsTableDepositRow.tsx +++ b/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 }) { > Step 1 {getNetworkName(l1.network.id)}:{' '} - - {shortenTxHash(tx.txId)} - + {l2TxHash && ( @@ -192,12 +189,10 @@ function DepositRowTxID({ tx }: { tx: MergedTransaction }) { > Step 2 {getNetworkName(l2.network.id)}:{' '} - - {shortenTxHash(l2TxHash)} - + )}
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx index b52f8c64ea..028f27aa69 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/AdvancedSettings.tsx +++ b/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 && (

{warning}

)} - {destinationAddress && !error && ( - - - View account in explorer - - )} + {destinationAddress && + !error && + (isDepositMode ? l2 : l1).network.blockExplorers && ( + + + View account in explorer + + )} )} diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/ClaimableCardConfirmed.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/ClaimableCardConfirmed.tsx index b2fde4aca6..4c2678d047 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/ClaimableCardConfirmed.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/ClaimableCardConfirmed.tsx @@ -149,10 +149,7 @@ export function ClaimableCardConfirmed({ tx }: { tx: MergedTransaction }) { {isCustomDestinationAddressTx(tx) && ( - + )} diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/ClaimableCardUnconfirmed.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/ClaimableCardUnconfirmed.tsx index 23a78ca355..bf753487f9 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/ClaimableCardUnconfirmed.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/ClaimableCardUnconfirmed.tsx @@ -88,10 +88,7 @@ export function ClaimableCardUnconfirmed({ tx }: { tx: MergedTransaction }) { )} {isCustomDestinationAddressTx(tx) && ( - + )} diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/CustomFeeTokenApprovalDialog.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/CustomFeeTokenApprovalDialog.tsx index ac9d655a6b..4802b568f6 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/CustomFeeTokenApprovalDialog.tsx +++ b/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} - - {customFeeToken.address} - + diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardPending.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardPending.tsx index 5aa26ad2f9..f0cd352947 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardPending.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCardPending.tsx @@ -52,10 +52,7 @@ export function DepositCardPending({ tx }: { tx: MergedTransaction }) { {isCustomDestinationAddressTx(tx) && ( - + )} diff --git a/packages/arb-token-bridge-ui/src/components/common/atoms/ExplorerLink.tsx b/packages/arb-token-bridge-ui/src/components/common/atoms/ExplorerLink.tsx new file mode 100644 index 0000000000..1e8c915ebf --- /dev/null +++ b/packages/arb-token-bridge-ui/src/components/common/atoms/ExplorerLink.tsx @@ -0,0 +1,107 @@ +import { twMerge } from 'tailwind-merge' + +import { shortenAddress, shortenTxHash } from '../../../util/CommonUtils' +import { ExternalLink } from '../ExternalLink' +import { PropsWithChildren } from 'react' + +const ExplorerLink = ({ + explorerUrl, + txId, + address, + tokenAddress, + className, + children +}: PropsWithChildren<{ + explorerUrl: string | undefined + txId?: string + address?: string + tokenAddress?: string + className?: string +}>) => { + const shortenedAddress = shortenAddress(address ?? '') + const addressLink = `${explorerUrl}/address/${address}` + const shortenedTxHash = shortenTxHash(txId ?? '') + const txLink = `${explorerUrl}/tx/${txId}` + const tokenAddressLink = `${explorerUrl}/token/${tokenAddress}` + + if (!explorerUrl) { + if (address) { + return shortenedAddress + } + if (txId) { + return shortenedTxHash + } + if (tokenAddress) { + return tokenAddress + } + } + + if (tokenAddress) { + return ( + + {tokenAddress} + {children} + + ) + } + + return ( + + {address ? shortenedAddress : shortenedTxHash} + {children} + + ) +} + +export const ExplorerTxLink = ({ + explorerUrl, + txId, + className, + children +}: PropsWithChildren<{ + explorerUrl: string | undefined + txId: string + className?: string +}>) => ( + + {children} + +) + +export const ExplorerAddressLink = ({ + explorerUrl, + address, + className +}: { + explorerUrl: string | undefined + address: string + className?: string +}) => ( + +) + +export const ExplorerTokenLink = ({ + explorerUrl, + tokenAddress, + className +}: { + explorerUrl: string | undefined + tokenAddress: string + className?: string +}) => ( + +) diff --git a/packages/arb-token-bridge-ui/src/util/networks.ts b/packages/arb-token-bridge-ui/src/util/networks.ts index 05b0edf014..284ed1cea3 100644 --- a/packages/arb-token-bridge-ui/src/util/networks.ts +++ b/packages/arb-token-bridge-ui/src/util/networks.ts @@ -205,11 +205,6 @@ export const explorerUrls: { [chainId: number]: string } = { [ChainId.StylusTestnet]: 'https://stylus-testnet-explorer.arbitrum.io' } -export const getExplorerUrl = (chainId: ChainId) => { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - return explorerUrls[chainId] ?? explorerUrls[ChainId.Ethereum]! //defaults to etherscan, can never be null -} - export const getBlockTime = (chainId: ChainId) => { const network = parentChains[chainId] if (!network) { From 15fd50c9de011bb1f943ecc9e34fee0ad114b2c6 Mon Sep 17 00:00:00 2001 From: Fionna Chan Date: Mon, 11 Dec 2023 17:42:33 +0000 Subject: [PATCH 4/6] replace getExplorerUrl --- .../components/TransferPanel/DepositCard.tsx | 36 +++++++++---------- .../DepositCardCreationFailure.tsx | 7 +--- .../TransferPanel/DepositCardL1Failure.tsx | 1 - .../TransferPanel/TokenApprovalDialog.tsx | 26 +++++++------- .../TransferPanel/TokenImportDialog.tsx | 20 +++++------ .../src/components/TransferPanel/TokenRow.tsx | 13 +++++-- .../TransferPanel/TransferPanelMain.tsx | 12 +++---- .../TransferPanel/WithdrawalCard.tsx | 30 +++++++--------- .../src/hooks/useNetworkTPS.ts | 10 +++--- .../src/util/wagmi/setup.ts | 4 +++ 10 files changed, 77 insertions(+), 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 index ab0379ccda..27e7ba3d88 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCard.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/DepositCard.tsx @@ -1,10 +1,9 @@ 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' @@ -12,8 +11,8 @@ 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 ( - - {shortenTxHash(tx.txId)} - + ) default: @@ -59,18 +58,17 @@ export function DepositL2TxStatus({ return Pending... case DepositStatus.L2_SUCCESS: + if (!tx.l1ToL2MsgData || !tx.l1ToL2MsgData.l2TxID) { + return null + } return ( - - {shortenTxHash(tx.l1ToL2MsgData?.l2TxID || '')} - {tx.l1ToL2MsgData?.l2TxID && ( - - )} - + + ) 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 index 77cda1c17a..80c764fab4 100644 --- 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 index 6ae90c342a..23af99c476 100644 --- 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 index 319da05207..ccdc3d0d24 100644 --- 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) { {token?.name} - - {token?.address.toLowerCase()} - + {token?.address && ( + + )} @@ -222,9 +224,9 @@ export function TokenApprovalDialog(props: TokenApprovalDialogProps) { permission to the{' '} ) => { 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 index 78a29cf097..f54676cd2b 100644 --- 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} {tokenToImport?.name} - - {tokenToImport?.address} - + {tokenToImport?.address && ( + + )} {status === ImportStatus.UNKNOWN && (
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx index 35d585571a..86cfe11ec1 100644 --- 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,7 @@ import { } from '../../util/TokenUtils' import { SafeImage } from '../common/SafeImage' import { useNetworksAndSigners } from '../../hooks/useNetworksAndSigners' -import { getExplorerUrl, getNetworkName } from '../../util/networks' +import { getNetworkName } from '../../util/networks' import { Tooltip } from '../common/Tooltip' import { StatusBadge } from '../common/StatusBadge' import { useBalance } from '../../hooks/useBalance' @@ -58,13 +58,20 @@ function BlockExplorerTokenLink({ return null } + const shortenedAddress = shortenAddress(address).toLowerCase() + const explorerUrl = chain.blockExplorers?.default.url + + if (!explorerUrl) { + return shortenedAddress + } + return ( e.stopPropagation()} > - {shortenAddress(address).toLowerCase()} + {shortenedAddress} ) } diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx index 2a7b36d0c2..741a144754 100644 --- 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({ > Showing balance for Custom Destination Address:{' '} - - {shortenAddress(customAddress)} - +
) diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/WithdrawalCard.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/WithdrawalCard.tsx index d50db48a66..dea0583525 100644 --- 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 ( - - {shortenTxHash(tx.txId)} - + ) } @@ -71,13 +65,13 @@ export function WithdrawalL1TxStatus({ } return ( - - {shortenTxHash(l1Tx.txId)} - + ) } diff --git a/packages/arb-token-bridge-ui/src/hooks/useNetworkTPS.ts b/packages/arb-token-bridge-ui/src/hooks/useNetworkTPS.ts index 31f0abb5a9..bb4bb3677a 100644 --- a/packages/arb-token-bridge-ui/src/hooks/useNetworkTPS.ts +++ b/packages/arb-token-bridge-ui/src/hooks/useNetworkTPS.ts @@ -4,8 +4,9 @@ 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 } @@ -13,12 +14,13 @@ 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 index baf6a45f1d..34a94336ab 100644 --- 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) { From 5ba97a42e5b09f7e73e679e1919a1d45908046f6 Mon Sep 17 00:00:00 2001 From: Fionna Chan Date: Mon, 11 Dec 2023 19:24:09 +0000 Subject: [PATCH 5/6] getChainByChainId --- .../TransferPanel/TransferPanelMain.tsx | 4 +- .../src/hooks/useNetworksAndSigners.tsx | 10 +-- .../src/util/wagmi/getChainByChainId.ts | 12 ++++ .../src/util/wagmi/getWagmiChain.ts | 68 ------------------- .../src/util/wagmi/setup.ts | 6 +- 5 files changed, 20 insertions(+), 80 deletions(-) create mode 100644 packages/arb-token-bridge-ui/src/util/wagmi/getChainByChainId.ts delete mode 100644 packages/arb-token-bridge-ui/src/util/wagmi/getWagmiChain.ts diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx index 741a144754..4dc1adf19e 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx @@ -15,7 +15,7 @@ import { getL2ChainIds, isNetwork } from '../../util/networks' -import { getWagmiChain } from '../../util/wagmi/getWagmiChain' +import { getChainByChainId } from '../../util/wagmi/getChainByChainId' import { AdvancedSettings, useDestinationAddressStore @@ -110,7 +110,7 @@ export function SwitchNetworksButton( } function getListboxOptionsFromL1Network(network: Chain) { - return getL2ChainIds(network.id).map(chainId => getWagmiChain(chainId)) + return getL2ChainIds(network.id).map(chainId => getChainByChainId(chainId)) } function CustomAddressBanner({ diff --git a/packages/arb-token-bridge-ui/src/hooks/useNetworksAndSigners.tsx b/packages/arb-token-bridge-ui/src/hooks/useNetworksAndSigners.tsx index 4dfb1171e0..c55e89586c 100644 --- a/packages/arb-token-bridge-ui/src/hooks/useNetworksAndSigners.tsx +++ b/packages/arb-token-bridge-ui/src/hooks/useNetworksAndSigners.tsx @@ -36,7 +36,7 @@ import { isNetwork, rpcURLs } from '../util/networks' -import { getWagmiChain } from '../util/wagmi/getWagmiChain' +import { getChainByChainId } from '../util/wagmi/getChainByChainId' import { useArbQueryParams } from './useArbQueryParams' import { trackEvent } from '../util/AnalyticsUtils' import { errorToast } from '../components/common/atoms/Toast' @@ -335,11 +335,11 @@ export function NetworksAndSignersProvider( setResult({ status: UseNetworksAndSignersStatus.CONNECTED, l1: { - network: getWagmiChain(parentChain.chainID), + network: getChainByChainId(parentChain.chainID), provider: parentProvider }, l2: { - network: getWagmiChain(chain.chainID), + network: getChainByChainId(chain.chainID), provider: chainProvider } }) @@ -388,11 +388,11 @@ export function NetworksAndSignersProvider( setResult({ status: UseNetworksAndSignersStatus.CONNECTED, l1: { - network: getWagmiChain(parentChain.chainID), + network: getChainByChainId(parentChain.chainID), provider: parentProvider }, l2: { - network: getWagmiChain(chain.chainID), + network: getChainByChainId(chain.chainID), provider: chainProvider } }) diff --git a/packages/arb-token-bridge-ui/src/util/wagmi/getChainByChainId.ts b/packages/arb-token-bridge-ui/src/util/wagmi/getChainByChainId.ts new file mode 100644 index 0000000000..1e734b93d0 --- /dev/null +++ b/packages/arb-token-bridge-ui/src/util/wagmi/getChainByChainId.ts @@ -0,0 +1,12 @@ +import { Chain } from 'wagmi' +import { chainList } from './setup' + +export function getChainByChainId(chainId: number): Chain { + const chain = chainList.find(chain => chain.id === chainId) + + if (!chain) { + throw new Error(`[getWagmiChain] Unexpected chain id: ${chainId}`) + } + + return chain +} diff --git a/packages/arb-token-bridge-ui/src/util/wagmi/getWagmiChain.ts b/packages/arb-token-bridge-ui/src/util/wagmi/getWagmiChain.ts deleted file mode 100644 index 552e38581f..0000000000 --- a/packages/arb-token-bridge-ui/src/util/wagmi/getWagmiChain.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Chain } from 'wagmi' -import { - mainnet, - goerli, - arbitrum, - arbitrumNova, - arbitrumGoerli, - sepolia -} from '@wagmi/chains' - -import { - chainToWagmiChain, - arbitrumSepolia, - xaiTestnet, - stylusTestnet, - localL1Network, - localL2Network -} from './wagmiAdditionalNetworks' -import { ChainId } from '../networks' -import { getCustomChainFromLocalStorageById } from '../networks' - -export function getWagmiChain(chainId: number): Chain { - const customChain = getCustomChainFromLocalStorageById(chainId) - - if (customChain) { - return chainToWagmiChain(customChain) - } - - switch (chainId) { - case ChainId.Ethereum: - return mainnet - - case ChainId.ArbitrumOne: - return arbitrum - - case ChainId.ArbitrumNova: - return arbitrumNova - - // Testnets - case ChainId.Goerli: - return goerli - - case ChainId.ArbitrumGoerli: - return arbitrumGoerli - - case ChainId.Sepolia: - return sepolia - - case ChainId.ArbitrumSepolia: - return arbitrumSepolia - - case ChainId.XaiTestnet: - return xaiTestnet - - case ChainId.StylusTestnet: - return stylusTestnet - - // Local networks - case ChainId.Local: - return localL1Network - - case ChainId.ArbitrumLocal: - return localL2Network - - default: - throw new Error(`[getWagmiChain] Unexpected chain id: ${chainId}`) - } -} diff --git a/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts b/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts index 34a94336ab..08f6612362 100644 --- a/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts +++ b/packages/arb-token-bridge-ui/src/util/wagmi/setup.ts @@ -27,7 +27,7 @@ const customChains = getCustomChainsFromLocalStorage().map(chain => chainToWagmiChain(chain) ) -const chainList = isTestingEnvironment +export const chainList = isTestingEnvironment ? [ // mainnet, arb1, & arb nova are for network switch tests mainnet, @@ -61,10 +61,6 @@ 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) { From cb3e671bfb622151fa55a847e5ad2d72486f07e8 Mon Sep 17 00:00:00 2001 From: Fionna Chan Date: Tue, 12 Dec 2023 14:24:03 +0000 Subject: [PATCH 6/6] fix import --- packages/arb-token-bridge-ui/src/hooks/useNetworkTPS.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/arb-token-bridge-ui/src/hooks/useNetworkTPS.ts b/packages/arb-token-bridge-ui/src/hooks/useNetworkTPS.ts index bb4bb3677a..44f42a4b57 100644 --- a/packages/arb-token-bridge-ui/src/hooks/useNetworkTPS.ts +++ b/packages/arb-token-bridge-ui/src/hooks/useNetworkTPS.ts @@ -6,7 +6,7 @@ import useSWR from 'swr' import { isNetwork } from '../util/networks' import { useNetworksAndSigners } from './useNetworksAndSigners' -import { getChainByChainId } from '../util/wagmi/setup' +import { getChainByChainId } from '../util/wagmi/getChainByChainId' const emptyData = { tps: null }