feat: wagmi v2

apps/gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apps/gallery",
-  "version": "3.6.0-1f872ccc",
+  "version": "4.0.0-alpha.0",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -9,8 +9,8 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/common": "3.6.0-1f872ccc",
-    "@web3modal/ui": "3.6.0-1f872ccc",
+    "@web3modal/common": "4.0.0-alpha.0",
+    "@web3modal/ui": "4.0.0-alpha.0",
     "lit": "3.1.0",
     "storybook": "7.6.7"
   },

apps/laboratory/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apps/laboratory",
-  "version": "3.6.0-1f872ccc",
+  "version": "4.0.0-alpha.0",
   "private": true,
   "scripts": {
     "dev:laboratory": "next dev",
@@ -19,15 +19,18 @@
     "@emotion/styled": "11.11.0",
     "@sentry/browser": "7.92.0",
     "@sentry/react": "7.92.0",
-    "@web3modal/ethers": "3.6.0-1f872ccc",
-    "@web3modal/ethers5": "3.6.0-1f872ccc",
-    "@web3modal/wagmi": "3.6.0-1f872ccc",
+    "@tanstack/react-query": "5.14.1",
+    "@web3modal/ethers": "4.0.0-alpha.0",
+    "@web3modal/ethers5": "4.0.0-alpha.0",
+    "@web3modal/wagmi": "4.0.0-alpha.0",
     "framer-motion": "10.17.9",
     "next": "14.0.4",
     "next-auth": "4.24.5",
     "react-icons": "4.12.0",
     "siwe": "2.1.4",
-    "valtio": "1.11.2"
+    "valtio": "1.11.2",
+    "viem": "2.0.10",
+    "wagmi": "2.2.1"
   },
   "devDependencies": {
     "@mailsac/api": "1.0.5",

apps/laboratory/src/components/Wagmi/WagmiSignMessageTest.tsx

@@ -4,11 +4,11 @@ import { ConstantsUtil } from '../../utils/ConstantsUtil'
 
 export function WagmiSignMessageTest() {
   const toast = useToast()
-  const { signMessageAsync } = useSignMessage({ message: 'Hello Web3Modal!' })
+  const { signMessageAsync } = useSignMessage()
 
   async function onSignMessage() {
     try {
-      const signature = await signMessageAsync()
+      const signature = await signMessageAsync({ message: 'Hello Web3Modal!' })
       toast({
         title: ConstantsUtil.SigningSucceededToastTitle,
         description: signature,

apps/laboratory/src/components/Wagmi/WagmiSignTypedDataTest.tsx

@@ -1,5 +1,5 @@
 import { Button, useToast } from '@chakra-ui/react'
-import { useNetwork, useSignTypedData } from 'wagmi'
+import { useAccount, useSignTypedData } from 'wagmi'
 
 // Example data
 const types = {
@@ -28,20 +28,15 @@ const message = {
 
 export function WagmiSignTypedDataTest() {
   const toast = useToast()
-  const { chain } = useNetwork()
+  const { chain } = useAccount()
   const domain = {
     name: 'Ether Mail',
     version: '1',
     chainId: chain?.id,
     verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC'
   } as const
 
-  const { signTypedDataAsync } = useSignTypedData({
-    domain,
-    message,
-    primaryType: 'Mail',
-    types
-  })
+  const { signTypedDataAsync } = useSignTypedData()
 
   async function onSignTypedData() {
     try {

apps/laboratory/src/components/Wagmi/WagmiTransactionTest.tsx

@@ -1,53 +1,59 @@
 import { Button, useToast, Stack, Link, Text, Spacer } from '@chakra-ui/react'
-import { parseEther, parseGwei } from 'viem'
-import { usePrepareSendTransaction, useSendTransaction, useNetwork, useAccount } from 'wagmi'
+import { parseGwei, type Address } from 'viem'
+import { useEstimateGas, useSendTransaction, useAccount } from 'wagmi'
 import { vitalikEthAddress } from '../../utils/DataUtil'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useState } from 'react'
 import { sepolia } from 'wagmi/chains'
 
+const TEST_TX = {
+  to: vitalikEthAddress as Address,
+  value: parseGwei('0.0002')
+}
+
 export function WagmiTransactionTest() {
   const toast = useToast()
-  const { chain } = useNetwork()
-  const { status } = useAccount()
-  const { config, error: prepareError } = usePrepareSendTransaction({
-    to: vitalikEthAddress,
-    value: parseEther('0.0001'),
-    maxFeePerGas: parseGwei('200'),
-    maxPriorityFeePerGas: parseGwei('200')
+  const { status, chain } = useAccount()
+  const { data: gas, error: prepareError } = useEstimateGas(TEST_TX)
+  const [isLoading, setLoading] = useState(false)
+  const { sendTransaction } = useSendTransaction({
+    mutation: {
+      onSuccess: hash => {
+        setLoading(false)
+        toast({
+          title: 'Transaction Success',
+          description: hash,
+          status: 'success',
+          isClosable: true
+        })
+      },
+      onError: () => {
+        setLoading(false)
+        toast({
+          title: 'Error',
+          description: 'Failed to send transaction',
+          status: 'error',
+          isClosable: true
+        })
+      }
+    }
   })
-  const { sendTransaction, data, error, reset, isLoading } = useSendTransaction(config)
 
   const onSendTransaction = useCallback(() => {
     if (prepareError) {
       toast({
         title: 'Error',
-        description: 'Not enough funds to send transaction',
+        description: 'Not enough funds for transaction',
         status: 'error',
         isClosable: true
       })
     } else {
-      sendTransaction?.()
-    }
-  }, [sendTransaction, prepareError])
-
-  useEffect(() => {
-    if (data) {
-      toast({
-        title: 'Transaction Success',
-        description: data.hash,
-        status: 'success',
-        isClosable: true
-      })
-    } else if (error) {
-      toast({
-        title: 'Error',
-        description: 'Failed to send transaction',
-        status: 'error',
-        isClosable: true
+      setLoading(true)
+      sendTransaction({
+        ...TEST_TX,
+        gas
       })
     }
-    reset()
-  }, [data, error])
+  }, [sendTransaction, prepareError])
 
   return chain?.id === sepolia.id && status === 'connected' ? (
     <Stack direction={['column', 'column', 'row']}>

apps/laboratory/src/components/Wagmi/WagmiWriteContractTest.tsx

@@ -1,58 +1,51 @@
 import { Button, useToast, Stack, Link, Text, Spacer, Flex } from '@chakra-ui/react'
 import { parseEther } from 'viem'
-import {
-  useContractWrite,
-  useNetwork,
-  useAccount,
-  usePrepareContractWrite,
-  useContractRead
-} from 'wagmi'
+import { useAccount, useSimulateContract, useWriteContract, useReadContract } from 'wagmi'
 import { useCallback, useEffect } from 'react'
 import { sepolia } from 'wagmi/chains'
 import { abi, address } from '../../utils/DonutContract'
 
 export function WagmiWriteContractTest() {
   const toast = useToast()
-  const { chain } = useNetwork()
-  const { status } = useAccount()
+  const { status, chain } = useAccount()
   const {
     data: donutsOwned,
     refetch: fetchDonutsOwned,
     isLoading: donutsQueryLoading,
     isRefetching: donutsQueryRefetching
-  } = useContractRead({
+  } = useReadContract({
     abi,
     address,
     functionName: 'getBalance'
   })
-  const { config, error: prepareError } = usePrepareContractWrite({
+  const { data: simulateData, error: simulateError } = useSimulateContract({
     abi,
     address,
     functionName: 'purchase',
     value: parseEther('0.0003'),
     args: [1]
   })
-  const { error, data, isLoading, write, reset } = useContractWrite(config)
+  const { writeContract, reset, data, error, isPending } = useWriteContract()
 
   const onSendTransaction = useCallback(async () => {
-    if (prepareError) {
+    if (simulateError || !simulateData?.request) {
       toast({
         title: 'Error',
-        description: 'Not enough funds to purchase donut',
+        description: 'Not able to execute this transaction. Check your balance.',
         status: 'error',
         isClosable: true
       })
     } else {
-      write?.()
+      writeContract(simulateData?.request)
       await fetchDonutsOwned()
     }
-  }, [write, prepareError])
+  }, [writeContract, simulateError, simulateData?.request])
 
   useEffect(() => {
     if (data) {
       toast({
         title: 'Donut Purchase Success!',
-        description: data.hash,
+        description: data,
         status: 'success',
         isClosable: true
       })
@@ -72,8 +65,8 @@ export function WagmiWriteContractTest() {
       <Button
         data-test-id="sign-transaction-button"
         onClick={onSendTransaction}
-        disabled={!write}
-        isDisabled={isLoading}
+        disabled={!simulateData?.request}
+        isDisabled={isPending}
       >
         Purchase crypto donut
       </Button>
@@ -88,13 +81,13 @@ export function WagmiWriteContractTest() {
       <Spacer />
 
       <Link isExternal href="https://sepoliafaucet.com">
-        <Button variant="outline" colorScheme="blue" isDisabled={isLoading}>
+        <Button variant="outline" colorScheme="blue" isDisabled={isPending}>
           Sepolia Faucet 1
         </Button>
       </Link>
 
       <Link isExternal href="https://www.infura.io/faucet/sepolia">
-        <Button variant="outline" colorScheme="orange" isDisabled={isLoading}>
+        <Button variant="outline" colorScheme="orange" isDisabled={isPending}>
           Sepolia Faucet 2
         </Button>
       </Link>

apps/laboratory/src/pages/library/wagmi-email.tsx

@@ -1,12 +1,15 @@
 import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
-import { WagmiConfig } from 'wagmi'
+import { WagmiProvider } from 'wagmi'
 import { Web3ModalButtons } from '../../components/Web3ModalButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
 import { WagmiConstantsUtil } from '../../utils/WagmiConstants'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 
+const queryClient = new QueryClient()
+
 export const wagmiConfig = defaultWagmiConfig({
   chains: WagmiConstantsUtil.chains,
   projectId: ConstantsUtil.ProjectId,
@@ -34,9 +37,11 @@ export default function Wagmi() {
   }, [])
 
   return ready ? (
-    <WagmiConfig config={wagmiConfig}>
-      <Web3ModalButtons />
-      <WagmiTests />
-    </WagmiConfig>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <Web3ModalButtons />
+        <WagmiTests />
+      </QueryClientProvider>
+    </WagmiProvider>
   ) : null
 }

apps/laboratory/src/pages/library/wagmi-siwe.tsx

@@ -1,5 +1,6 @@
 import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
-import { WagmiConfig } from 'wagmi'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { WagmiProvider } from 'wagmi'
 import { Web3ModalButtons } from '../../components/Web3ModalButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
@@ -8,6 +9,8 @@ import { SiweData } from '../../components/Siwe/SiweData'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 import { siweConfig } from '../../utils/SiweUtils'
 
+const queryClient = new QueryClient()
+
 export const wagmiConfig = defaultWagmiConfig({
   chains: WagmiConstantsUtil.chains,
   projectId: ConstantsUtil.ProjectId,
@@ -27,10 +30,12 @@ ThemeStore.setModal(modal)
 
 export default function Wagmi() {
   return (
-    <WagmiConfig config={wagmiConfig}>
-      <Web3ModalButtons />
-      <SiweData />
-      <WagmiTests />
-    </WagmiConfig>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <Web3ModalButtons />
+        <SiweData />
+        <WagmiTests />
+      </QueryClientProvider>
+    </WagmiProvider>
   )
 }

apps/laboratory/src/pages/library/wagmi.tsx

@@ -1,12 +1,15 @@
 import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
-import { WagmiConfig } from 'wagmi'
+import { WagmiProvider } from 'wagmi'
 import { Web3ModalButtons } from '../../components/Web3ModalButtons'
 import { WagmiTests } from '../../components/Wagmi/WagmiTests'
 import { ThemeStore } from '../../utils/StoreUtil'
 import { WagmiConstantsUtil } from '../../utils/WagmiConstants'
 import { ConstantsUtil } from '../../utils/ConstantsUtil'
 
+const queryClient = new QueryClient()
+
 export const wagmiConfig = defaultWagmiConfig({
   chains: WagmiConstantsUtil.chains,
   projectId: ConstantsUtil.ProjectId,
@@ -43,9 +46,11 @@ export default function Wagmi() {
   }, [])
 
   return ready ? (
-    <WagmiConfig config={wagmiConfig}>
-      <Web3ModalButtons />
-      <WagmiTests />
-    </WagmiConfig>
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <Web3ModalButtons />
+        <WagmiTests />
+      </QueryClientProvider>
+    </WagmiProvider>
   ) : null
 }

apps/laboratory/src/utils/ConstantsUtil.ts

@@ -11,7 +11,8 @@ export const ConstantsUtil = {
     name: 'Web3Modal',
     description: 'Web3Modal Laboratory',
     url: 'https://web3modal.com',
-    icons: ['https://avatars.githubusercontent.com/u/37784886']
+    icons: ['https://avatars.githubusercontent.com/u/37784886'],
+    verifyUrl: ''
   },
   ProjectId: projectId
 }