Merge pull request #29 from base-org/lukas/cleanup

cleanup

example/app/providers.tsx

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

example/components/WithdrawContainer.tsx

@@ -1,6 +1,7 @@
 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> = {
@@ -17,6 +18,7 @@ export function WithdrawContainer() {
       <span className='text-white'>From</span>
       <NetworkSelector selectedNetwork={selectedNetwork} setSelectedNetwork={setSelectedNetwork} />
       {selectedAssetType === 'eth' && <WithdrawETH selectedChainId={networkToChainId[selectedNetwork]} />}
+      {selectedAssetType === 'erc20' && <WithdrawERC20 selectedChainId={networkToChainId[selectedNetwork]} />}
     </div>
   )
 }

example/components/WithdrawERC20.tsx

@@ -0,0 +1,109 @@
+import { useSimulateWithdrawERC20, useWriteWithdrawERC20 } from 'op-wagmi'
+import { useState } from 'react'
+import { Address, erc20Abi, isAddress, parseUnits } from 'viem'
+import { useReadContract } from 'wagmi'
+import { Action, ActionToggle } from './ActionToggle'
+import { Button } from './Button'
+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
+}
+
+export function WithdrawERC20({ selectedChainId }: WithdrawERC20Props) {
+  const [to, setTo] = useState('')
+  const [l2Token, setL2Token] = useState(cbETHL2)
+  const [amount, setAmount] = useState('')
+  const [action, setAction] = useState<Action>('simulate')
+  const { data: tokenDecimals } = useReadContract({
+    address: l2Token as Address,
+    abi: erc20Abi,
+    functionName: 'decimals',
+    chainId: 5,
+    query: { enabled: isAddress(l2Token) },
+  })
+
+  const { status: simulateStatus, refetch: simulateWithdrawERC20 } = useSimulateWithdrawERC20({
+    args: {
+      l2Token: l2Token as Address,
+      to: to as Address,
+      amount: parseUnits(amount, tokenDecimals ?? 18),
+    },
+    chainId: selectedChainId,
+    query: { enabled: false, retry: false },
+  })
+  const { data: l2TxHash, status: writeStatus, writeWithdrawERC20Async } = useWriteWithdrawERC20()
+
+  const handleClick = async () => {
+    if (action === 'simulate') {
+      simulateWithdrawERC20()
+    } else {
+      await writeWithdrawERC20Async({
+        args: {
+          l2Token: l2Token as Address,
+          to: to as Address,
+
+          amount: parseUnits(amount, tokenDecimals ?? 18),
+        },
+        chainId: selectedChainId,
+      })
+    }
+  }
+
+  return (
+    <div className='flex flex-col space-y-4'>
+      <div className='flex flex-col w-full px-16 space-y-4'>
+        <InputGroup
+          label='L2 Token:'
+          placeholder='0x...'
+          value={l2Token}
+          setValue={setL2Token}
+        />
+        <InputGroup label='To' placeholder='0x...' value={to} setValue={setTo} />
+        <InputGroup label='Amount' value={amount} setValue={setAmount} />
+        <ActionToggle action={action} setAction={setAction} />
+        <div className='self-center'>
+          <Button onClick={handleClick}>
+            {`🚀 ${action === 'simulate' ? 'Simulate' : 'Write'} Withdraw ERC20 🚀`}
+          </Button>
+        </div>
+      </div>
+      {action === 'simulate' && simulateStatus && (
+        <div className='flex flex-col w-full px-16 space-y-4'>
+          <div className='flex flex-row justify-center space-x-8 items-center w-full'>
+            <span className='text-white'>Status:</span>
+            <span className='text-white'>{simulateStatus}</span>
+          </div>
+        </div>
+      )}
+      {action === 'write' && writeStatus && (
+        <div className='flex flex-col w-full px-16 space-y-4'>
+          <div className='flex flex-row justify-center space-x-8 items-center w-full'>
+            <span className='text-white'>Status:</span>
+            <span className='text-white'>{writeStatus}</span>
+          </div>
+          {l2TxHash && (
+            <div className='flex flex-row justify-center space-x-8 items-center w-full'>
+              <span className='text-white'>L2 Tx:</span>
+              <a
+                className='text-blue-500 underline'
+                target='_blank'
+                rel='noreferrer'
+                href={`${chainIdToExplorer[selectedChainId]}/tx/${l2TxHash}`}
+              >
+                {`${l2TxHash?.slice(0, 8)}...`}
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

example/components/WithdrawETH.tsx

@@ -22,11 +22,10 @@ export function WithdrawETH({ selectedChainId }: WithdrawETHProps) {
   const { status: simulateStatus, refetch: simulateWithdrawETH } = useSimulateWithdrawETH({
     args: {
       to: to as Address,
-      minGasLimit: 100000,
       amount: parseEther(amount),
     },
     chainId: selectedChainId,
-    query: { enabled: false },
+    query: { enabled: false, retry: false },
   })
   const { data: l2TxHash, status: writeStatus, writeWithdrawETHAsync } = useWriteWithdrawETH()
 
@@ -37,7 +36,7 @@ export function WithdrawETH({ selectedChainId }: WithdrawETHProps) {
       await writeWithdrawETHAsync({
         args: {
           to: to as Address,
-          minGasLimit: 100000,
+
           amount: parseEther(amount),
         },
         chainId: selectedChainId,

src/constants/chains/base.ts

@@ -3,7 +3,7 @@ import type { L2Chain } from '../../types/OpConfig.js'
 
 export const base: L2Chain<number, number> = {
   chainId: 8453,
-  l1ChaindId: 1,
+  l1ChainId: 1,
   l1Addresses: baseAddresses,
   l2Addresses: {
     l2L1MessagePasserAddress: { address: '0x4200000000000000000000000000000000000016', chainId: 8453 },

src/constants/chains/baseGoerli.ts

@@ -3,7 +3,7 @@ import type { L2Chain } from '../../types/OpConfig.js'
 
 export const baseGoerli: L2Chain<number, number> = {
   chainId: 84531,
-  l1ChaindId: 5,
+  l1ChainId: 5,
   l1Addresses: baseGoerliAddresses,
   l2Addresses: {
     l2L1MessagePasserAddress: { address: '0x4200000000000000000000000000000000000016', chainId: 84531 },

src/constants/chains/optimism.ts

@@ -3,7 +3,7 @@ import type { L2Chain } from '../../types/OpConfig.js'
 
 export const optimism: L2Chain<number, number> = {
   chainId: 10,
-  l1ChaindId: 1,
+  l1ChainId: 1,
   l1Addresses: optimismAddresses,
   l2Addresses: {
     l2L1MessagePasserAddress: { address: '0x4200000000000000000000000000000000000016', chainId: 10 },

src/constants/chains/optimismGoerli.ts

@@ -3,7 +3,7 @@ import type { L2Chain } from '../../types/OpConfig.js'
 
 export const optimismGoerli: L2Chain<number, number> = {
   chainId: 420,
-  l1ChaindId: 5,
+  l1ChainId: 5,
   l1Addresses: optimismGoerliAddresses,
   l2Addresses: {
     l2L1MessagePasserAddress: { address: '0x4200000000000000000000000000000000000016', chainId: 420 },

src/constants/chains/zora.ts

@@ -3,7 +3,7 @@ import type { L2Chain } from '../../types/OpConfig.js'
 
 export const zora: L2Chain<number, number> = {
   chainId: 7777777,
-  l1ChaindId: 1,
+  l1ChainId: 1,
   l1Addresses: zoraAddresses,
   l2Addresses: {
     l2L1MessagePasserAddress: { address: '0x4200000000000000000000000000000000000016', chainId: 7777777 },

src/constants/chains/zoraGoerli.ts

@@ -3,7 +3,7 @@ import type { L2Chain } from '../../types/OpConfig.js'
 
 export const zoraGoerli: L2Chain<number, number> = {
   chainId: 999,
-  l1ChaindId: 5,
+  l1ChainId: 5,
   l1Addresses: zoraGoerliAddresses,
   l2Addresses: {
     l2L1MessagePasserAddress: { address: '0x4200000000000000000000000000000000000016', chainId: 999 },

src/hooks/L1/useBlockNumberOfLatestL2OutputProposal.ts

@@ -8,6 +8,11 @@ export function useBlockNumberOfLatestL2OutputProposal(
 ) {
   const opConfig = useConfig({ config })
   const l2Chain = opConfig.l2chains[l2ChainId]
+
+  if (!l2Chain) {
+    throw new Error('L2 chain not configured')
+  }
+
   const result = useReadContract({
     abi: l2OutputOracleABI,
     address: l2Chain.l1Addresses.l2OutputOracle.address,

src/hooks/L1/useGetL2OutputIndexAfter.ts

@@ -11,6 +11,11 @@ export function useGetL2OutputIndexAfter(
 ) {
   const opConfig = useConfig({ config })
   const l2Chain = opConfig.l2chains[l2ChainId]
+
+  if (!l2Chain) {
+    throw new Error('L2 chain not configured')
+  }
+
   const result = useReadContract({
     abi: l2OutputOracleABI,
     address: l2Chain.l1Addresses.l2OutputOracle.address,

src/hooks/L1/useSimulateDepositERC20.ts

@@ -39,12 +39,16 @@ export function useSimulateDepositERC20<
   const opConfig = useOpConfig(rest)
   const l2Chain = opConfig.l2chains[l2ChainId]
 
+  if (!l2Chain) {
+    throw new Error('L2 chain not configured')
+  }
+
   return useSimulateContract({
     address: l2Chain.l1Addresses.l1StandardBridge.address,
     abi: ABI,
     functionName: FUNCTION,
-    args: [args.l1Token, args.l2Token, args.to, args.amount, args?.minGasLimit ?? 0, args?.extraData ?? '0x'],
-    chainId: l2Chain.l1ChaindId,
+    args: [args.l1Token, args.l2Token, args.to, args.amount, args.minGasLimit ?? 0, args.extraData ?? '0x'],
+    chainId: l2Chain.l1ChainId,
     query: query as UseSimulateContractParameters['query'],
     ...rest,
   }) as unknown as UseSimulateDepositERC20ReturnType<config, chainId>