refactor: wagmi v2

danilo-89 · Mar 16, 2024 · 1f85f9f · 1f85f9f
1 parent c6302f1
commit 1f85f9f
Show file tree

Hide file tree

Showing 8 changed files with 1,312 additions and 715 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,15 +1,17 @@
 'use client'
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { WagmiConfig, createConfig, configureChains, mainnet } from 'wagmi'
-import { publicProvider } from 'wagmi/providers/public'
+import {  WagmiProvider, http } from 'wagmi'
+// import { publicProvider } from 'wagmi/providers/public'
 import { defineChain } from 'viem'
 import { polygonMumbai } from 'viem/chains'
-import { alchemyProvider } from 'wagmi/providers/alchemy'
+// import { alchemyProvider } from 'wagmi/providers/alchemy'
 import {
     RainbowKitProvider,
     connectorsForWallets,
+    getDefaultConfig,
 } from '@rainbow-me/rainbowkit'
+
 import { metaMaskWallet } from '@rainbow-me/rainbowkit/wallets'
 import '@rainbow-me/rainbowkit/styles.css'
 // Contexts
@@ -45,45 +47,59 @@ const preferredChain = defineChain({
     },
 })
 
-const { chains, publicClient, webSocketPublicClient } = configureChains(
-    [preferredChain],
-    [
-        publicProvider(),
-        alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY || '' }),
-    ]
-)
+// const { chains, publicClient, webSocketPublicClient } = configureChains(
+//     [preferredChain],
+//     [
+//         publicProvider(),
+//         alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY || '' }),
+//     ]
+// )
 
-const connectors = connectorsForWallets([
-    {
-        groupName: 'Recommended',
-        wallets: [
-            metaMaskWallet({
-                projectId: WALLET_CONNECT_PROJECT_ID,
-                chains,
-            }),
-        ],
+const config = getDefaultConfig({
+    appName: 'SittingCatsNFT',
+    projectId: WALLET_CONNECT_PROJECT_ID,
+    chains: [preferredChain],
+    transports: {
+      [preferredChain.id]: http('https://polygon-mumbai.g.alchemy.com/v2/4wUHd-c4zm8RxA7P3KFxbnZDDyIRKA9T'),
     },
-])
+    // wallets: [{
+    //     groupName: 'Recommended',
+    //     wallets: [metaMaskWallet],
+    //   }],
+  })
 
-const config = createConfig({
-    autoConnect: true,
-    publicClient,
-    webSocketPublicClient,
-    connectors,
-})
+// const connectors = connectorsForWallets([
+//     {
+//         groupName: 'Recommended',
+//         wallets: [
+//             metaMaskWallet({
+//                 projectId: WALLET_CONNECT_PROJECT_ID,
+//                 chains,
+//             }),
+//         ],
+//     },
+// ])
+
+// const config = createConfig({
+//     autoConnect: true,
+//     publicClient,
+//     webSocketPublicClient,
+//     connectors,
+// })
 
 const queryClient = new QueryClient()
 
 export default function Home() {
     const isMounted = useIsMounted()
 
     return (
-        <WagmiConfig config={config}>
+        <WagmiProvider config={config}>
+            <QueryClientProvider client={queryClient}>
             <RainbowKitProvider
                 modalSize="compact"
-                chains={chains}
-            >
-                <QueryClientProvider client={queryClient}>
+                // chains={chains} 
+                
+                >
                     <ContractProvider>
                         <UserProvider>
                             <main className="max-w-full overflow-x-hidden">
@@ -92,11 +108,11 @@ export default function Home() {
                                 {isMounted ? <SectionMint /> : null}
                                 <SectionRoadmap />
                             </main>
-                            <Footer />
+                               <Footer />
                         </UserProvider>
                     </ContractProvider>
-                </QueryClientProvider>
             </RainbowKitProvider>
-        </WagmiConfig>
+                </QueryClientProvider>
+        </WagmiProvider>
     )
 }
diff --git a/components/sections/SectionMint/SectionMint.tsx b/components/sections/SectionMint/SectionMint.tsx
@@ -98,7 +98,8 @@ const SectionMint = () => {
         refetch: fetchClaimedMetadata,
         error: claimedMetadataError,
         isSuccess: isClaimedMetadataSuccess,
-        remove,
+        // remove,
+
     } = useQuery({
         enabled: false,
         queryKey: ['nftURILink', mintedNFTId],
@@ -197,9 +198,9 @@ const SectionMint = () => {
         setInputValue('1')
         setMintedNFTId(undefined)
         setMintedMetadata(null)
-        remove()
+       queryClient.removeQueries({queryKey:['nftURILink'], exact:false})
         dispatch(undefined)
-    }, [address, dispatch, remove])
+    }, [address, dispatch])
 
     return (
         <section className="pt-[7rem] md:pt-[10rem]">

diff --git a/components/sections/SectionMint/WrongNetworkNotice/WrongNetworkNotice.tsx b/components/sections/SectionMint/WrongNetworkNotice/WrongNetworkNotice.tsx
@@ -1,10 +1,10 @@
 import Button from '@/components/common/Button'
 import useIsWrongNetwork from '@/hooks/useIsWrongNetwork'
-import { useSwitchNetwork } from 'wagmi'
+import { useSwitchChain } from 'wagmi'
 
 const WrongNetworkNotice = () => {
-    const { chains, error, isLoading, pendingChainId, switchNetwork } =
-        useSwitchNetwork()
+    const { switchChain } =
+    useSwitchChain()
     const { preferredNetwork } = useIsWrongNetwork()
 
     return (
@@ -22,8 +22,8 @@ const WrongNetworkNotice = () => {
                 <Button
                     type="button"
                     onClick={() =>
-                        switchNetwork?.(
-                            Number(process.env.NEXT_PUBLIC_CHAIN_ID)
+                        switchChain?.(
+                            {chainId:Number(process.env.NEXT_PUBLIC_CHAIN_ID)}
                         )
                     }
                 >

diff --git a/components/shared/ButtonAccount/ButtonAccount.tsx b/components/shared/ButtonAccount/ButtonAccount.tsx
@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from 'react'
 import Image from 'next/image'
-import { useAccount, useSwitchNetwork } from 'wagmi'
+import { useAccount, useSwitchChain } from 'wagmi'
 
 // Assets
 import catIcon from '@/assets/cat-icon.svg'
@@ -25,7 +25,7 @@ const ButtonAccount = ({ handleClick }: IProps) => {
         useUserContext()
 
     const { address } = useAccount()
-    const { switchNetwork } = useSwitchNetwork()
+    const { switchChain } = useSwitchChain()
 
     const { isWrongNetwork } = useIsWrongNetwork()
 
@@ -35,7 +35,7 @@ const ButtonAccount = ({ handleClick }: IProps) => {
             className="ml-auto flex min-w-[12rem] items-center justify-center py-0"
             onClick={() => {
                 if (isWrongNetwork) {
-                    switchNetwork?.(Number(process.env.NEXT_PUBLIC_CHAIN_ID))
+                    switchChain?.({chainId:Number(process.env.NEXT_PUBLIC_CHAIN_ID)})
                 } else {
                     handleClick(true)
                 }

diff --git a/hooks/useIsWrongNetwork.tsx b/hooks/useIsWrongNetwork.tsx
@@ -1,8 +1,8 @@
-import { useAccount, useNetwork } from 'wagmi'
+import { useAccount, useConfig,  } from 'wagmi'
 
 const useIsWrongNetwork = () => {
-    const { address } = useAccount()
-    const { chain, chains } = useNetwork()
+    const { chain, address } = useAccount()
+    const { chains } = useConfig() 
 
     const isWrongNetwork =
         address && chain?.id !== Number(process.env.NEXT_PUBLIC_CHAIN_ID)

diff --git a/hooks/useMint.tsx b/hooks/useMint.tsx
@@ -1,9 +1,9 @@
 import { useReducer } from 'react'
 import { BaseError, TransactionReceipt, parseEther, parseUnits } from 'viem'
 import {
-    prepareWriteContract,
+    simulateContract,
     writeContract,
-    waitForTransaction,
+    waitForTransactionReceipt,
 } from '@wagmi/core'
 
 // Contract
@@ -14,10 +14,12 @@ import { useMintReducer } from '@/reducers'
 
 // Utilities
 import { toErrorWithMessage } from '@/utils'
+import { useConfig } from 'wagmi'
 
 const pricePerNFT = +process.env.NEXT_PUBLIC_NFT_PRICE! as unknown as number
 
 const useMint = () => {
+    const config = useConfig()
     const [state, dispatch] = useReducer(useMintReducer, {
         isLoading: false,
         isError: false,
@@ -48,7 +50,7 @@ const useMint = () => {
             prepareLoading = true
             dispatch({ isPrepareLoading: true })
 
-            const config = await prepareWriteContract({
+            const result = await simulateContract(config, {
                 ...contractConfig,
                 functionName: 'claim',
                 args: [
@@ -78,7 +80,7 @@ const useMint = () => {
                 isWriteLoading: true,
             })
 
-            const { hash } = await writeContract(config)
+            const writeResult = await writeContract(config,result.request)
 
             writeLoading = false
             receiptLoading = true
@@ -88,9 +90,7 @@ const useMint = () => {
                 isReceiptLoading: true,
             })
 
-            const data = await waitForTransaction({
-                hash,
-            })
+            const data = await waitForTransactionReceipt(config, {hash:writeResult})
 
             receiptLoading = false
 

diff --git a/package.json b/package.json
@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.4",
-    "@rainbow-me/rainbowkit": "^1.1.2",
-    "@tanstack/react-query": "^4.32.6",
+    "@rainbow-me/rainbowkit": "2",
+    "@tanstack/react-query": "^5.28.0",
     "@types/node": "20.4.2",
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",
@@ -27,13 +27,13 @@
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6",
-    "viem": "^1.21.0",
-    "wagmi": "^1.4.0"
+    "viem": "2.x",
+    "wagmi": "2"
   },
   "devDependencies": {
     "@types/lodash.debounce": "^4.0.7",
     "prettier": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.4.1",
     "vitest": "^0.34.3"
   }
-}
+}