chore: adds viem compatibility from @arbitrum/sdk

packages/arb-token-bridge-ui/package.json

@@ -11,10 +11,11 @@
     "@headlessui/tailwindcss": "^0.1.2",
     "@heroicons/react": "^2.0.18",
     "@offchainlabs/cobalt": "0.3.2",
-    "@rainbow-me/rainbowkit": "^0.12.16",
+    "@rainbow-me/rainbowkit": "^2.1.2",
     "@rehooks/local-storage": "^2.4.4",
     "@sentry/react": "^7.73.0",
     "@sentry/tracing": "^7.73.0",
+    "@tanstack/react-query": "^5.49.2",
     "@tippyjs/react": "^4.2.6",
     "@uidotdev/usehooks": "^2.4.1",
     "@uniswap/token-lists": "^1.0.0-beta.31",
@@ -26,7 +27,6 @@
     "boring-avatars": "^1.7.0",
     "cheerio": "^1.0.0-rc.12",
     "dayjs": "^1.11.8",
-    "ethers": "^5.6.0",
     "fetch-retry": "^5.0.3",
     "graphql": "^16.8.1",
     "lodash-es": "^4.17.21",
@@ -46,7 +46,8 @@
     "swr": "^2.1.2",
     "tailwind-merge": "^2.0.0",
     "use-query-params": "^2.2.1",
-    "wagmi": "^0.12.18",
+    "viem": "2.16.5",
+    "wagmi": "^2.10.8",
     "zod": "^3.22.4",
     "zustand": "^4.3.9"
   },

packages/arb-token-bridge-ui/src/components/App/App.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useState } from 'react'
 import * as Sentry from '@sentry/react'
 
-import { useAccount, useNetwork, WagmiConfig, useDisconnect } from 'wagmi'
+import { useAccount, WagmiProvider, useDisconnect } from 'wagmi'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import {
   darkTheme,
   RainbowKitProvider,
@@ -319,7 +320,7 @@ function ConnectedChainSyncer() {
 
   const [{ sourceChain, destinationChain }, setQueryParams] =
     useArbQueryParams()
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
 
   const setSourceChainToConnectedChain = useCallback(() => {
     if (typeof chain === 'undefined') {
@@ -402,22 +403,25 @@ function ConnectedChainSyncer() {
 
 export default function App() {
   const [overmind] = useState<Overmind<typeof config>>(createOvermind(config))
+  const queryClient = new QueryClient()
 
   return (
     <Provider value={overmind}>
-      <ArbQueryParamProvider>
-        <WagmiConfig {...wagmiConfigProps}>
-          <RainbowKitProvider
-            theme={rainbowkitTheme}
-            {...rainbowKitProviderProps}
-          >
-            <ConnectedChainSyncer />
-            <AppContextProvider>
-              <AppContent />
-            </AppContextProvider>
-          </RainbowKitProvider>
-        </WagmiConfig>
-      </ArbQueryParamProvider>
+      <QueryClientProvider client={queryClient}>
+        <ArbQueryParamProvider>
+          <WagmiProvider config={wagmiConfigProps.config}>
+            <RainbowKitProvider
+              theme={rainbowkitTheme}
+              {...rainbowKitProviderProps}
+            >
+              <ConnectedChainSyncer />
+              <AppContextProvider>
+                <AppContent />
+              </AppContextProvider>
+            </RainbowKitProvider>
+          </WagmiProvider>
+        </ArbQueryParamProvider>
+      </QueryClientProvider>
     </Provider>
   )
 }

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { Address } from 'wagmi'
+import { Address } from 'viem'
 import { twMerge } from 'tailwind-merge'
 import {
   ArrowTopRightOnSquareIcon,

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

@@ -9,7 +9,7 @@ import { getNetworkName } from '../../util/networks'
 import { errorToast } from '../common/atoms/Toast'
 import { Button } from '../common/Button'
 import { useSwitchNetworkWithConfig } from '../../hooks/useSwitchNetworkWithConfig'
-import { useNetwork } from 'wagmi'
+import { useAccount } from 'wagmi'
 import { isDepositReadyToRedeem } from '../../state/app/utils'
 import { useRedeemRetryable } from '../../hooks/useRedeemRetryable'
 import { WithdrawalCountdown } from '../common/WithdrawalCountdown'
@@ -30,7 +30,7 @@ export function TransactionsTableRowAction({
   type: 'deposits' | 'withdrawals'
   address: Address | undefined
 }) {
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
   const { switchNetworkAsync } = useSwitchNetworkWithConfig()
   const networkName = getNetworkName(chain?.id ?? 0)
 

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

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
-import { useSigner } from 'wagmi'
+import { useWalletClient } from 'wagmi'
 import { BigNumber, constants, utils } from 'ethers'
 import { Dialog, UseDialogProps } from '../common/Dialog'
 import { Checkbox } from '../common/Checkbox'
@@ -35,7 +35,7 @@ export function CustomFeeTokenApprovalDialog(
   const { parentChain, parentChainProvider } = useNetworksRelationship(networks)
   const { isEthereumMainnet } = isNetwork(parentChain.id)
 
-  const { data: l1Signer } = useSigner({ chainId: parentChain.id })
+  const { data: l1Signer } = useWalletClient({ chainId: parentChain.id })
   const l1GasPrice = useGasPrice({ provider: parentChainProvider })
 
   const [checked, setChecked] = useState(false)

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

@@ -1,7 +1,7 @@
 import { Listbox } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
-import { Chain } from 'wagmi'
+import { Chain } from 'viem'
 
 import { getNetworkName } from '../../util/networks'
 import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'

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

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { BigNumber, constants, utils } from 'ethers'
 import { useAccount, useChainId } from 'wagmi'
 
-import { useSigner } from 'wagmi'
+import { useWalletClient } from 'wagmi'
 import { Dialog, UseDialogProps } from '../common/Dialog'
 import { Checkbox } from '../common/Checkbox'
 import { ExternalLink } from '../common/ExternalLink'
@@ -56,7 +56,7 @@ export function TokenApprovalDialog(props: TokenApprovalDialogProps) {
   const provider = isDepositMode ? parentChainProvider : childChainProvider
   const gasPrice = useGasPrice({ provider })
   const chainId = useChainId()
-  const { data: signer } = useSigner({
+  const { data: signer } = useWalletClient({
     chainId
   })
 

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

@@ -4,7 +4,7 @@ import {
   CheckCircleIcon,
   ExclamationCircleIcon
 } from '@heroicons/react/24/outline'
-import { Chain } from 'wagmi'
+import { Chain } from 'viem'
 
 import { Loader } from '../common/atoms/Loader'
 import { useAppState } from '../../state'

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

@@ -4,7 +4,7 @@ import Tippy from '@tippyjs/react'
 import { constants, utils } from 'ethers'
 import { useLatest } from 'react-use'
 import * as Sentry from '@sentry/react'
-import { useAccount, useChainId, useSigner } from 'wagmi'
+import { useAccount, useChainId, useWalletClient } from 'wagmi'
 import { TransactionResponse } from '@ethersproject/providers'
 import { twMerge } from 'tailwind-merge'
 
@@ -130,10 +130,10 @@ export function TransferPanel() {
 
   const { isEOA, isSmartContractWallet } = useAccountType()
 
-  const { data: l1Signer } = useSigner({
+  const { data: l1Signer } = useWalletClient({
     chainId: parentChain.id
   })
-  const { data: l2Signer } = useSigner({
+  const { data: l2Signer } = useWalletClient({
     chainId: childChain.id
   })
 

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

@@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { ArrowsUpDownIcon, ArrowDownIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
 import { BigNumber, constants, utils } from 'ethers'
-import { Chain, useAccount } from 'wagmi'
+import { useAccount } from 'wagmi'
+import { Chain } from 'viem'
 import { useMedia } from 'react-use'
 
 import { Loader } from '../common/atoms/Loader'

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

@@ -2,7 +2,7 @@ import { ExternalLink } from '../../common/ExternalLink'
 import { Checkbox } from '../../common/Checkbox'
 import { useEffect, useState } from 'react'
 import { isNetwork } from '../../../util/networks'
-import { useNetwork } from 'wagmi'
+import { useAccount } from 'wagmi'
 
 export function USDCDepositConfirmationDialogCheckbox({
   onChange,
@@ -19,7 +19,7 @@ export function USDCDepositConfirmationDialogCheckbox({
     false
   ])
   const externalLinkClassnames = 'arb-hover underline'
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
   const { isTestnet } = isNetwork(chain?.id ?? 0)
 
   const destinationNetworkName = isTestnet ? 'Arbitrum Sepolia' : 'Arbitrum One'

packages/arb-token-bridge-ui/src/components/common/NetworkSelectionContainer.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
   useState
 } from 'react'
-import { Chain } from 'wagmi'
+import { Chain } from 'viem'
 import { useDebounce } from '@uidotdev/usehooks'
 import { ShieldExclamationIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'

packages/arb-token-bridge-ui/src/hooks/TransferPanel/useGasEstimates.ts

@@ -1,6 +1,6 @@
 import { BigNumber, Signer } from 'ethers'
 import useSWR from 'swr'
-import { useSigner } from 'wagmi'
+import { useWalletClient } from 'wagmi'
 
 import { DepositGasEstimates, GasEstimates } from '../arbTokenBridge.types'
 import { BridgeTransferStarterFactory } from '@/token-bridge-sdk/BridgeTransferStarterFactory'
@@ -55,7 +55,7 @@ export function useGasEstimates({
   gasEstimates: GasEstimates | DepositGasEstimates | undefined
   error: any
 } {
-  const { data: signer } = useSigner()
+  const { data: signer } = useWalletClient()
 
   const { data: gasEstimates, error } = useSWR(
     signer && sourceChainBalance && sourceChainBalance.gte(amount)

packages/arb-token-bridge-ui/src/hooks/useAccountIsBlocked.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { useAccount, useNetwork } from 'wagmi'
+import { useAccount } from 'wagmi'
 import useSWRImmutable from 'swr/immutable'
 
 import { ApiResponseSuccess } from '../pages/api/screenings'
@@ -40,7 +40,7 @@ async function fetcher(address: Address): Promise<boolean> {
 
 export function useAccountIsBlocked() {
   const { address } = useAccount()
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
 
   const queryKey = useMemo(() => {
     if (typeof address === 'undefined') {

packages/arb-token-bridge-ui/src/hooks/useAccountMenu.ts

@@ -3,10 +3,9 @@ import { useState, useEffect, useMemo } from 'react'
 import Resolution from '@unstoppabledomains/resolution'
 
 import {
-  useProvider,
+  usePublicClient,
   useAccount,
   useDisconnect,
-  useNetwork,
   useEnsName,
   useEnsAvatar
 } from 'wagmi'
@@ -46,12 +45,12 @@ async function tryLookupUDName(provider: JsonRpcProvider, address: string) {
 }
 
 export const useAccountMenu = () => {
-  const l1Provider = useProvider({ chainId: 1 })
+  const l1Provider = usePublicClient({ chainId: 1 })
   const { address } = useAccount()
   const { disconnect } = useDisconnect({
     onSettled: onDisconnectHandler
   })
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
 
   const { openTransactionHistoryPanel } = useAppContextActions()
   const [, setQueryParams] = useArbQueryParams()

packages/arb-token-bridge-ui/src/hooks/useArbTokenBridge.ts

@@ -1,5 +1,6 @@
 import { useCallback, useState, useMemo } from 'react'
-import { Chain, useAccount } from 'wagmi'
+import { useAccount } from 'wagmi'
+import { Chain } from 'viem'
 import { BigNumber } from 'ethers'
 import { Signer } from '@ethersproject/abstract-signer'
 import { JsonRpcProvider } from '@ethersproject/providers'

packages/arb-token-bridge-ui/src/hooks/useClaimWithdrawal.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import * as Sentry from '@sentry/react'
-import { useAccount, useSigner } from 'wagmi'
+import { useAccount, useWalletClient } from 'wagmi'
 
 import { useAppState } from '../state'
 import { MergedTransaction, WithdrawalStatus } from '../state/app/state'
@@ -30,7 +30,7 @@ export function useClaimWithdrawal(
     app: { arbTokenBridge }
   } = useAppState()
   const { address } = useAccount()
-  const { data: signer } = useSigner({ chainId: tx.parentChainId })
+  const { data: signer } = useWalletClient({ chainId: tx.parentChainId })
   const { updatePendingTransaction } = useTransactionHistory(address)
   const [isClaiming, setIsClaiming] = useState(false)
 

packages/arb-token-bridge-ui/src/hooks/useIsConnectedToArbitrum.ts

@@ -1,9 +1,9 @@
-import { useNetwork } from 'wagmi'
+import { useAccount } from 'wagmi'
 
 import { isNetwork } from '../util/networks'
 
 export function useIsConnectedToArbitrum() {
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
 
   if (typeof chain === 'undefined') {
     return undefined

packages/arb-token-bridge-ui/src/hooks/useIsConnectedToOrbitChain.ts

@@ -1,9 +1,9 @@
-import { useNetwork } from 'wagmi'
+import { useAccount } from 'wagmi'
 
 import { isNetwork } from '../util/networks'
 
 export function useIsConnectedToOrbitChain() {
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
 
   if (typeof chain === 'undefined') {
     return undefined

packages/arb-token-bridge-ui/src/hooks/useNetworks.ts

@@ -1,4 +1,4 @@
-import { Chain } from 'wagmi'
+import { Chain } from 'viem'
 import { StaticJsonRpcProvider } from '@ethersproject/providers'
 import { useCallback, useMemo } from 'react'
 import { mainnet, arbitrum } from '@wagmi/core/chains'

packages/arb-token-bridge-ui/src/hooks/useNetworksRelationship.ts

@@ -1,6 +1,6 @@
 import { StaticJsonRpcProvider } from '@ethersproject/providers'
 import { useMemo } from 'react'
-import { Chain } from 'wagmi'
+import { Chain } from 'viem'
 import { UseNetworksState } from './useNetworks'
 import { isDepositMode } from '../util/isDepositMode'
 import { isTeleport } from '@/token-bridge-sdk/teleport'

packages/arb-token-bridge-ui/src/hooks/useRedeemRetryable.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import { L1ToL2MessageStatus } from '@arbitrum/sdk'
-import { useSigner } from 'wagmi'
+import { useWalletClient } from 'wagmi'
 import dayjs from 'dayjs'
 import { TransactionReceipt } from '@ethersproject/providers'
 
@@ -23,7 +23,7 @@ export function useRedeemRetryable(
   tx: MergedTransaction,
   address: Address | undefined
 ): UseRedeemRetryableResult {
-  const { data: signer } = useSigner({ chainId: tx.destinationChainId })
+  const { data: signer } = useWalletClient({ chainId: tx.destinationChainId })
   const { updatePendingTransaction } = useTransactionHistory(address)
 
   const destinationNetworkName = getNetworkName(tx.destinationChainId)

packages/arb-token-bridge-ui/src/hooks/useRedeemTeleporter.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react'
 import { Signer } from 'ethers'
 import { L1ToL2MessageStatus, L1ToL2MessageWriter } from '@arbitrum/sdk'
-import { useSigner } from 'wagmi'
+import { useWalletClient } from 'wagmi'
 import dayjs from 'dayjs'
 import { TransactionReceipt } from '@ethersproject/providers'
 import { getProviderForChainId } from '@/token-bridge-sdk/utils'
@@ -149,7 +149,7 @@ export function useRedeemTeleporter(
 ): UseRedeemRetryableResult {
   const chainIdForRedeemingRetryable = getChainIdForRedeemingRetryable(tx)
 
-  const { data: signer } = useSigner({
+  const { data: signer } = useWalletClient({
     chainId: chainIdForRedeemingRetryable
   })
   const { updatePendingTransaction } = useTransactionHistory(address)