From 6d567efda00e493f9c151928f283b94205df8f8c Mon Sep 17 00:00:00 2001 From: Matthew Bunday Date: Tue, 20 Feb 2024 08:41:27 -0500 Subject: [PATCH] Update example site --- example/app/providers.tsx | 10 +++++----- example/components/DepositContainer.tsx | 6 +----- example/components/FinalizeContainer.tsx | 6 +----- example/components/ProveContainer.tsx | 6 +----- example/components/WithdrawContainer.tsx | 6 +----- example/components/WithdrawERC20.tsx | 6 +----- example/components/WithdrawETH.tsx | 6 +----- example/constants/chainIdToExplorer.ts | 6 ++++++ example/constants/networkToChainId.ts | 6 ++++++ 9 files changed, 23 insertions(+), 35 deletions(-) create mode 100644 example/constants/chainIdToExplorer.ts create mode 100644 example/constants/networkToChainId.ts diff --git a/example/app/providers.tsx b/example/app/providers.tsx index 44c30ff..93274d0 100644 --- a/example/app/providers.tsx +++ b/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(), }, }) diff --git a/example/components/DepositContainer.tsx b/example/components/DepositContainer.tsx index 644381b..207370b 100644 --- a/example/components/DepositContainer.tsx +++ b/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') diff --git a/example/components/FinalizeContainer.tsx b/example/components/FinalizeContainer.tsx index 9c1ae63..e6ede93 100644 --- a/example/components/FinalizeContainer.tsx +++ b/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 ( diff --git a/example/components/ProveContainer.tsx b/example/components/ProveContainer.tsx index c7315eb..d7ef3b9 100644 --- a/example/components/ProveContainer.tsx +++ b/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 ( diff --git a/example/components/WithdrawContainer.tsx b/example/components/WithdrawContainer.tsx index 33b4081..5deb3d7 100644 --- a/example/components/WithdrawContainer.tsx +++ b/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') diff --git a/example/components/WithdrawERC20.tsx b/example/components/WithdrawERC20.tsx index ef07268..a840110 100644 --- a/example/components/WithdrawERC20.tsx +++ b/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 = { - 84531: 'https://goerli.basescan.org', - 420: 'https://goerli-optimism.etherscan.io', -} - type WithdrawERC20Props = { selectedChainId: number } diff --git a/example/components/WithdrawETH.tsx b/example/components/WithdrawETH.tsx index 381cf42..acaf77b 100644 --- a/example/components/WithdrawETH.tsx +++ b/example/components/WithdrawETH.tsx @@ -1,3 +1,4 @@ +import { chainIdToExplorer } from '@/constants/chainIdToExplorer' import { useSimulateWithdrawETH, useWriteWithdrawETH } from 'op-wagmi' import { useState } from 'react' import { Address, parseEther } from 'viem' @@ -5,11 +6,6 @@ import { Action, ActionToggle } from './ActionToggle' import { Button } from './Button' import { InputGroup } from './InputGroup' -const chainIdToExplorer: Record = { - 84531: 'https://goerli.basescan.org', - 420: 'https://goerli-optimism.etherscan.io', -} - type WithdrawETHProps = { selectedChainId: number } diff --git a/example/constants/chainIdToExplorer.ts b/example/constants/chainIdToExplorer.ts new file mode 100644 index 0000000..dadf201 --- /dev/null +++ b/example/constants/chainIdToExplorer.ts @@ -0,0 +1,6 @@ +import { base, optimism } from 'viem/chains' + +export const chainIdToExplorer: Record = { + [base.id]: base.blockExplorers.default.url, + [optimism.id]: optimism.blockExplorers.default.url, +} diff --git a/example/constants/networkToChainId.ts b/example/constants/networkToChainId.ts new file mode 100644 index 0000000..9adb625 --- /dev/null +++ b/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, +}