Merge pull request #63 from base-org/use-viem-2

Update to use stable Viem / Wagmi versions

.changeset/giant-poems-search.md

@@ -0,0 +1,9 @@
+---
+"@op-wagmi/example": major
+"@op-wagmi/docs": major
+"op-wagmi": major
+---
+
+Use Viem 2 stable release, remove OpConfig and rely on wagmi config.
+
+OpConfigs can be removed from the project and the wagmi config can be used instead. This will allow for a more streamlined configuration process. Please see the configuration documentation for more information. https://www.opwagmi.sh/docs/configuration.html

docs/docs/configuration.md

@@ -1,73 +1,25 @@
 ## Configuration
 
-OP Wagmi currently ships with support for Base, Base Goerli, Optimism, Optimism Goerli, Zora, and Zora Goerli. If you'd like to interact with other OP Stack chains, you can extend Wagmi's config to include a list of additional `l2Chains`. You'll also need to add the corresponding chain objects to your Wagmi config so OP Wagmi has access to RPC URLs etc.
+OP Wagmi works out of the box with any OP Stack Viem chain definition as of Viem 2.7.11. You'll just need to add the corresponding chain objects to your Wagmi config as normal. You can also specify custom chains and pass them to Wagmi's config.
 
 ::: code-group
 
-```ts [l2Chains.ts]
-export const customL2Chains = {
-  1230123: {
-    // Your L2 chain's ID
-    chainId: 1230123,
-    // The corresponding L1 chain ID
-    l1ChainId: 1,
-    // L1 OP Stack contract addresses for your chain
-    l1Addresses: {
-      portal: {
-        address: '0x...',
-        chainId: 1,
-      },
-      l2OutputOracle: {
-        address: '0x...',
-        chainId: 1,
-      },
-      l1StandardBridge: {
-        address: '0x...',
-        chainId: 1,
-      },
-      l1CrossDomainMessenger: {
-        address: '0x...',
-        chainId: 1,
-      },
-      l1Erc721Bridge: {
-        address: '0x...',
-        chainId: 1,
-      },
-    },
-    // L2 OP Stack contract addresses for your chain
-    l2Addresses: {
-      l2L1MessagePasserAddress: {
-        address: '0x4200000000000000000000000000000000000016',
-        chainId: 1230123,
-      },
-      l2StandardBridge: {
-        address: '0x4200000000000000000000000000000000000010',
-        chainId: 1230123,
-      },
-    },
-  },
-}
-```
-
 ```tsx [app.tsx]
 import { useWriteDepositETH } from 'op-wagmi'
 import { useConfig } from 'wagmi'
 import { customL2Chains } from './l2Chains'
 
 const { writeDepositETH } = useWriteDepositETH()
-const config = useConfig()
 
 return (
   <button
-    onClick={() =>
-      writeDepositETH({
-        args: {
-          to: '0x968Bb4fF2482ff56Af1255019d5b955510A1159e',
-          amount: 1n,
-        },
-        l2ChainId: 1230123,
-        config: { ...config, l2Chains: customL2Chains },
-      })}
+    onClick={() => (writeDepositETH({
+      args: {
+        to: '0x968Bb4fF2482ff56Af1255019d5b955510A1159e',
+        amount: 1n,
+      },
+      l2ChainId: 1230123,
+    }))}
   >
     Deposit ETH
   </button>
@@ -77,16 +29,61 @@ return (
 ```ts [config.ts]
 import { createConfig, http } from 'wagmi'
 import { mainnet, sepolia } from 'wagmi/chains'
-import { customChain } from './chains'
+import { exampleChain } from './chains'
 
 export const config = createConfig({
-  chains: [mainnet, sepolia, customChain],
+  chains: [mainnet, sepolia, exampleChain],
   transports: {
     [mainnet.id]: http(),
     [sepolia.id]: http(),
-    [customChain.id]: http(),
+    [exampleChain.id]: http(),
   },
 })
 ```
 
+```ts [l2Chains.ts]
+import { type Chain, mainnet } from 'viem/chains'
+
+export const exampleChain: Chain = {
+  id: 31415926,
+  name: 'ExampleChain',
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+  rpcUrls: {
+    default: {
+      http: ['https://rpc.examplechain.org'],
+    },
+  },
+  blockExplorers: {
+    default: {
+      name: 'ExampleChain Scan',
+      url: 'https://examplechainscan.org',
+      apiUrl: 'https://api.examplechainscan.org/api',
+    },
+  },
+  contracts: {
+    l2OutputOracle: {
+      [mainnet.id]: {
+        address: '0x56315b90c40730925ec5485cf004d835058518A0',
+      },
+    },
+    multicall3: {
+      address: '0xca11bde05977b3631167028862be2a173976ca11',
+      blockCreated: 5022,
+    },
+    l1StandardBridge: {
+      [mainnet.id]: {
+        address: '0x4C36d2919e407f0Cc2Ee3c993ccF8ac26d9CE64e',
+        blockCreated: 17482143,
+      },
+    },
+    portal: {
+      [mainnet.id]: {
+        address: '0x49048044D57e1C92A77f79988d21Fa8fAF74E97e',
+        blockCreated: 17482143,
+      },
+    },
+  },
+}
+```
+
 :::

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 { baseSepolia, optimismSepolia, sepolia } from 'wagmi/chains'
 
 const queryClient = new QueryClient()
 
-const config = createConfig({
-  chains: [goerli, baseGoerli, optimismGoerli],
+export const config = createConfig({
+  chains: [sepolia, baseSepolia, optimismSepolia],
   transports: {
-    [goerli.id]: http(),
-    [baseGoerli.id]: http(),
-    [optimismGoerli.id]: http(),
+    [sepolia.id]: http(),
+    [baseSepolia.id]: http(),
+    [optimismSepolia.id]: http(),
   },
 })
 

example/components/DepositContainer.tsx

@@ -1,17 +1,14 @@
+import { networkToChainId } from '@/constants/networkToChainId'
+import { useSelectedNetwork } from '@/hooks/useSelectedNetwork'
 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')
+  const { selectedNetwork, setSelectedNetwork } = useSelectedNetwork('baseSepolia')
   return (
     <div className='w-full flex flex-col items-center space-y-4'>
       <AssetTypeToggle selectedAssetType={selectedAssetType} setSelectedAssetType={setSelectedAssetType} />

example/components/FinalizeContainer.tsx

@@ -1,14 +1,10 @@
-import { useState } from 'react'
+import { networkToChainId } from '@/constants/networkToChainId'
+import { useSelectedNetwork } from '@/hooks/useSelectedNetwork'
 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')
+  const { selectedNetwork, setSelectedNetwork } = useSelectedNetwork('baseSepolia')
   return (
     <div className='w-full flex flex-col items-center space-y-4'>
       <span className='text-white'>From</span>

example/components/NetworkSelector.tsx

@@ -1,26 +1,28 @@
 type NetworkSelectorProps = {
-  selectedNetwork: 'optimism' | 'base'
-  setSelectedNetwork: (network: 'optimism' | 'base') => void
+  selectedNetwork: 'optimismSepolia' | 'baseSepolia' | 'sepolia'
+  setSelectedNetwork: (network: 'optimismSepolia' | 'baseSepolia' | 'sepolia') => void
 }
 
 export function NetworkSelector({ selectedNetwork, setSelectedNetwork }: NetworkSelectorProps) {
   return (
     <div className='flex flex-row justify-center items-center self-center w-48 rounded-full divide-x bg-white'>
       <button
         className={`w-24 flex items-center justify-center h-8 rounded-l-full ${
-          selectedNetwork === 'base' ? 'bg-blue-500 text-white shadow-inner shadow-stone-900' : 'bg-white text-black'
+          selectedNetwork === 'baseSepolia'
+            ? 'bg-blue-500 text-white shadow-inner shadow-stone-900'
+            : 'bg-white text-black'
         }`}
-        onClick={() => setSelectedNetwork('base')}
+        onClick={() => setSelectedNetwork('baseSepolia')}
       >
         Base
       </button>
       <button
         className={`w-24 flex items-center justify-center h-8 rounded-r-full ${
-          selectedNetwork === 'optimism'
+          selectedNetwork === 'optimismSepolia'
             ? 'bg-red-600 text-white shadow-inner shadow-stone-900'
             : 'bg-white text-black'
         }`}
-        onClick={() => setSelectedNetwork('optimism')}
+        onClick={() => setSelectedNetwork('optimismSepolia')}
       >
         Optimism
       </button>

example/components/ProveContainer.tsx

@@ -1,14 +1,10 @@
-import { useState } from 'react'
+import { networkToChainId } from '@/constants/networkToChainId'
+import { useSelectedNetwork } from '@/hooks/useSelectedNetwork'
 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')
+  const { selectedNetwork, setSelectedNetwork } = useSelectedNetwork('baseSepolia')
   return (
     <div className='w-full flex flex-col items-center space-y-4'>
       <span className='text-white'>From</span>

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,7 @@
+import { blastSepolia, optimismSepolia, sepolia } from 'viem/chains'
+
+export const chainIdToExplorer: Record<number, string> = {
+  [sepolia.id]: sepolia.blockExplorers.default.url,
+  [blastSepolia.id]: blastSepolia.blockExplorers.default.url,
+  [optimismSepolia.id]: optimismSepolia.blockExplorers.default.url,
+}

example/constants/networkToChainId.ts

@@ -0,0 +1,7 @@
+import { baseSepolia, optimismSepolia, sepolia } from 'viem/chains'
+
+export const networkToChainId: Record<string, number> = {
+  sepolia: sepolia.id,
+  baseSepolia: baseSepolia.id,
+  optimismSepolia: optimismSepolia.id,
+}

example/hooks/useSelectedNetwork.ts

@@ -0,0 +1,7 @@
+import { useState } from 'react'
+
+export function useSelectedNetwork(defaultNetwork: 'optimismSepolia' | 'baseSepolia' | 'sepolia' = 'baseSepolia') {
+  const [selectedNetwork, setSelectedNetwork] = useState<'optimismSepolia' | 'baseSepolia' | 'sepolia'>(defaultNetwork)
+
+  return { selectedNetwork, setSelectedNetwork }
+}

package.json

@@ -52,7 +52,7 @@
     "@types/use-sync-external-store": "^0.0.3",
     "@viem/anvil": "^0.0.7",
     "@vitest/coverage-v8": "^1.2.2",
-    "@wagmi/cli": "beta",
+    "@wagmi/cli": "^2.1.1",
     "dprint": "^0.42.5",
     "ethers": "^5.7.0",
     "happy-dom": "^12.10.3",
@@ -65,7 +65,8 @@
     "typescript": "5.0.4",
     "vitest": "^1.2.2",
     "@testing-library/react-hooks": "^8.0.1",
-    "@tanstack/react-query": ">=5.0.0"
+    "@tanstack/react-query": ">=5.0.0",
+    "@wagmi/connectors": "^4.1.14"
   },
   "scripts": {
     "build": "pnpm run clean && pnpm run build:cjs && pnpm run build:esm && pnpm run build:types",
@@ -99,11 +100,11 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",
-    "@wagmi/core": "beta",
+    "@wagmi/core": "^2.x",
     "op-viem": "1.3.1-alpha",
     "typescript": ">=5.0.4",
-    "viem": "beta",
-    "wagmi": "beta"
+    "viem": "^2.7.11",
+    "wagmi": "^2.x"
   },
   "peerDependenciesMeta": {
     "typescript": {