Update example site

example/app/providers.tsx

@@ -2,16 +2,16 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createConfig, http, WagmiProvider } from 'wagmi'
-import { baseGoerli, goerli, optimismGoerli } from 'wagmi/chains'
+import { base, mainnet, optimism } from 'wagmi/chains'
 
 const queryClient = new QueryClient()
 
 const config = createConfig({
-  chains: [goerli, baseGoerli, optimismGoerli],
+  chains: [base, mainnet, optimism],
   transports: {
-    [goerli.id]: http(),
-    [baseGoerli.id]: http(),
-    [optimismGoerli.id]: http(),
+    [base.id]: http(),
+    [mainnet.id]: http(),
+    [optimism.id]: http(),
   },
 })
 

example/components/DepositContainer.tsx

@@ -1,14 +1,10 @@
+import { networkToChainId } from '@/constants/networkToChainId'
 import { useState } from 'react'
 import { AssetTypeToggle } from './AssetTypeToggle'
 import { DepositERC20 } from './DepositERC20'
 import { DepositETH } from './DepositETH'
 import { NetworkSelector } from './NetworkSelector'
 
-const networkToChainId: Record<'optimism' | 'base', number> = {
-  base: 84531,
-  optimism: 420,
-}
-
 export function DepositContainer() {
   const [selectedAssetType, setSelectedAssetType] = useState<'eth' | 'erc20'>('eth')
   const [selectedNetwork, setSelectedNetwork] = useState<'optimism' | 'base'>('base')

example/components/FinalizeContainer.tsx

@@ -1,12 +1,8 @@
+import { networkToChainId } from '@/constants/networkToChainId'
 import { useState } from 'react'
 import { FinalizeWithdrawalTransaction } from './FinalizeWithdrawalTransaction'
 import { NetworkSelector } from './NetworkSelector'
 
-const networkToChainId: Record<'optimism' | 'base', number> = {
-  base: 84531,
-  optimism: 420,
-}
-
 export function FinalizeContainer() {
   const [selectedNetwork, setSelectedNetwork] = useState<'optimism' | 'base'>('base')
   return (

example/components/ProveContainer.tsx

@@ -1,12 +1,8 @@
+import { networkToChainId } from '@/constants/networkToChainId'
 import { useState } from 'react'
 import { NetworkSelector } from './NetworkSelector'
 import { ProveWithdrawalTransaction } from './ProveWithdrawalTransaction'
 
-const networkToChainId: Record<'optimism' | 'base', number> = {
-  base: 84531,
-  optimism: 420,
-}
-
 export function ProveContainer() {
   const [selectedNetwork, setSelectedNetwork] = useState<'optimism' | 'base'>('base')
   return (

example/components/WithdrawContainer.tsx

@@ -1,14 +1,10 @@
+import { networkToChainId } from '@/constants/networkToChainId'
 import { useState } from 'react'
 import { AssetTypeToggle } from './AssetTypeToggle'
 import { NetworkSelector } from './NetworkSelector'
 import { WithdrawERC20 } from './WithdrawERC20'
 import { WithdrawETH } from './WithdrawETH'
 
-const networkToChainId: Record<'optimism' | 'base', number> = {
-  base: 84531,
-  optimism: 420,
-}
-
 export function WithdrawContainer() {
   const [selectedAssetType, setSelectedAssetType] = useState<'eth' | 'erc20'>('eth')
   const [selectedNetwork, setSelectedNetwork] = useState<'optimism' | 'base'>('base')

example/components/WithdrawERC20.tsx

@@ -1,3 +1,4 @@
+import { chainIdToExplorer } from '@/constants/chainIdToExplorer'
 import { useSimulateWithdrawERC20, useWriteWithdrawERC20 } from 'op-wagmi'
 import { useState } from 'react'
 import { Address, erc20Abi, isAddress, parseUnits } from 'viem'
@@ -8,11 +9,6 @@ import { InputGroup } from './InputGroup'
 
 const cbETHL2 = '0x7c6b91D9Be155A6Db01f749217d76fF02A7227F2'
 
-const chainIdToExplorer: Record<number, string> = {
-  84531: 'https://goerli.basescan.org',
-  420: 'https://goerli-optimism.etherscan.io',
-}
-
 type WithdrawERC20Props = {
   selectedChainId: number
 }

example/components/WithdrawETH.tsx

@@ -1,15 +1,11 @@
+import { chainIdToExplorer } from '@/constants/chainIdToExplorer'
 import { useSimulateWithdrawETH, useWriteWithdrawETH } from 'op-wagmi'
 import { useState } from 'react'
 import { Address, parseEther } from 'viem'
 import { Action, ActionToggle } from './ActionToggle'
 import { Button } from './Button'
 import { InputGroup } from './InputGroup'
 
-const chainIdToExplorer: Record<number, string> = {
-  84531: 'https://goerli.basescan.org',
-  420: 'https://goerli-optimism.etherscan.io',
-}
-
 type WithdrawETHProps = {
   selectedChainId: number
 }

example/constants/chainIdToExplorer.ts

@@ -0,0 +1,6 @@
+import { base, optimism } from 'viem/chains'
+
+export const chainIdToExplorer: Record<number, string> = {
+  [base.id]: base.blockExplorers.default.url,
+  [optimism.id]: optimism.blockExplorers.default.url,
+}

example/constants/networkToChainId.ts

@@ -0,0 +1,6 @@
+import { base, optimism } from 'viem/chains'
+
+export const networkToChainId: Record<'optimism' | 'base', number> = {
+  base: base.id,
+  optimism: optimism.id,
+}