update

examples/nextjs/package.json

@@ -21,8 +21,8 @@
     "superjson": "^2.0.0",
     "undici": "^5.26.3",
     "valtio": "^1.11.2",
-    "viem": "^1.20.0",
-    "wagmi": "^1.4.4",
+    "viem": "^2.17.11",
+    "wagmi": "^2.12.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

examples/nextjs/src/app/page.tsx

@@ -5,15 +5,21 @@ import { EditionInfo } from '@/components/editionInfo'
 import { WalletPrivateKeyInput } from '@/components/walletInput'
 import { useContractAddress } from '@/context/contractAddress'
 import { useWallet } from '@/context/wallet'
-import { useBalance } from 'wagmi'
+import { useQueryClient } from '@tanstack/react-query'
+import { useEffect } from 'react'
+import { useBlockNumber, useBalance } from 'wagmi'
 
 export default function Home() {
   const { wallet } = useWallet()
 
-  const balance = useBalance({
+  const queryClient = useQueryClient()
+  const { data: blockNumber } = useBlockNumber({ watch: true })
+  const { data: balance, queryKey } = useBalance({
     address: wallet?.account.address,
-    watch: true,
   })
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey })
+  }, [blockNumber, queryClient, queryKey])
 
   const {
     contractAddress,
@@ -33,7 +39,7 @@ export default function Home() {
         {wallet && (
           <>
             <p>Balance of {wallet.account.address}</p>
-            <p>{balance.data ? `${Number(balance.data.formatted).toFixed(5)} eth` : 'Loading...'}</p>
+            <p>{balance?.decimals != null ? `${Number(balance.decimals).toFixed(5)} eth` : 'Loading...'}</p>
             <br />
           </>
         )}

examples/nextjs/src/context/wagmi.tsx

@@ -34,8 +34,10 @@ export const publicClient = createPublicClient({
   .extend(soundEditionVersionPublicActions)
 
 const config = createConfig({
-  autoConnect: true,
-  publicClient,
+  chains: [chain],
+  transports: {
+    [chain.id]: http(RPC_URL),
+  },
 })
 
 export function WagmiContext({ children }: { children: React.ReactNode }) {