From b682091ccd7893307ed3bc66e83eaa1fc6c3378d Mon Sep 17 00:00:00 2001 From: Rinat Date: Mon, 8 Apr 2024 18:37:55 +0200 Subject: [PATCH 1/6] Gitignored dist folder and updated gitigore files (#804) --- .gitignore | 14 +++++++++++--- packages/hardhat/.gitignore | 16 +++++++++++++--- packages/nextjs/.gitignore | 2 +- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/.gitignore b/.gitignore index 1b920d414..6db6ff8e7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,15 +1,23 @@ +# dependencies node_modules -# dependencies, yarn, etc -# yarn / eslint +# yarn .yarn/* !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/sdks !.yarn/versions + +# eslint .eslintcache + +# misc .DS_Store + +# IDE .vscode .idea -.vercel + +# cli +dist diff --git a/packages/hardhat/.gitignore b/packages/hardhat/.gitignore index be5e27655..dc3ed2793 100644 --- a/packages/hardhat/.gitignore +++ b/packages/hardhat/.gitignore @@ -1,17 +1,27 @@ +# dependencies node_modules + +# env files .env + +# coverage coverage coverage.json + +# typechain typechain typechain-types -temp -#Hardhat files +# hardhat files cache artifacts -#zkSync files +# zkSync files artifacts-zk cache-zk +# deployments deployments/localhost + +# other +temp diff --git a/packages/nextjs/.gitignore b/packages/nextjs/.gitignore index 81eda21d1..d5e09402a 100644 --- a/packages/nextjs/.gitignore +++ b/packages/nextjs/.gitignore @@ -11,6 +11,7 @@ # next.js /.next/ /out/ +.vercel # production /build @@ -34,4 +35,3 @@ yarn-error.log* # typescript *.tsbuildinfo -.vercel From 5d4f1c4078be88f271bbdafc9333ddb8e3f5ef5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20S=C3=A1nchez?= Date: Fri, 12 Apr 2024 17:44:37 +0200 Subject: [PATCH 2/6] Tailwind dark variant working (#810) --- packages/nextjs/package.json | 2 +- packages/nextjs/tailwind.config.js | 1 + yarn.lock | 40 ++++++++++++++++-------------- 3 files changed, 24 insertions(+), 19 deletions(-) diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index c77574eef..9238fc705 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -49,7 +49,7 @@ "eslint-plugin-prettier": "^4.2.1", "postcss": "^8.4.16", "prettier": "^2.8.4", - "tailwindcss": "^3.3.3", + "tailwindcss": "^3.4.3", "type-fest": "^4.6.0", "typescript": "^5.1.6", "vercel": "^32.4.1" diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js index d0e358b21..9099dc5f4 100644 --- a/packages/nextjs/tailwind.config.js +++ b/packages/nextjs/tailwind.config.js @@ -3,6 +3,7 @@ module.exports = { content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"], plugins: [require("daisyui")], darkTheme: "dark", + darkMode: ["selector", "[data-theme='dark']"], // DaisyUI theme colors daisyui: { themes: [ diff --git a/yarn.lock b/yarn.lock index cdd9ea40e..2a590e3a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1886,7 +1886,7 @@ __metadata: react-copy-to-clipboard: ^5.1.0 react-dom: ^18.2.0 react-hot-toast: ^2.4.0 - tailwindcss: ^3.3.3 + tailwindcss: ^3.4.3 type-fest: ^4.6.0 typescript: ^5.1.6 use-debounce: ^8.0.4 @@ -7097,7 +7097,7 @@ __metadata: languageName: node linkType: hard -"fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.12, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.1": +"fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.1": version: 3.3.1 resolution: "fast-glob@npm:3.3.1" dependencies: @@ -7110,6 +7110,19 @@ __metadata: languageName: node linkType: hard +"fast-glob@npm:^3.3.0": + version: 3.3.2 + resolution: "fast-glob@npm:3.3.2" + dependencies: + "@nodelib/fs.stat": ^2.0.2 + "@nodelib/fs.walk": ^1.2.3 + glob-parent: ^5.1.2 + merge2: ^1.3.0 + micromatch: ^4.0.4 + checksum: 900e4979f4dbc3313840078419245621259f349950411ca2fa445a2f9a1a6d98c3b5e7e0660c5ccd563aa61abe133a21765c6c0dec8e57da1ba71d8000b05ec1 + languageName: node + linkType: hard + "fast-json-stable-stringify@npm:^2.0.0": version: 2.1.0 resolution: "fast-json-stable-stringify@npm:2.1.0" @@ -9023,16 +9036,7 @@ __metadata: languageName: node linkType: hard -"jiti@npm:^1.18.2": - version: 1.20.0 - resolution: "jiti@npm:1.20.0" - bin: - jiti: bin/jiti.js - checksum: 7924062b5675142e3e272a27735be84b7bfc0a0eb73217fc2dcafa034f37c4f7b4b9ffc07dd98bcff0f739a8811ce1544db205ae7e97b1c86f0df92c65ce3c72 - languageName: node - linkType: hard - -"jiti@npm:^1.20.0": +"jiti@npm:^1.20.0, jiti@npm:^1.21.0": version: 1.21.0 resolution: "jiti@npm:1.21.0" bin: @@ -13126,19 +13130,19 @@ __metadata: languageName: node linkType: hard -"tailwindcss@npm:^3.3.3": - version: 3.3.3 - resolution: "tailwindcss@npm:3.3.3" +"tailwindcss@npm:^3.4.3": + version: 3.4.3 + resolution: "tailwindcss@npm:3.4.3" dependencies: "@alloc/quick-lru": ^5.2.0 arg: ^5.0.2 chokidar: ^3.5.3 didyoumean: ^1.2.2 dlv: ^1.1.3 - fast-glob: ^3.2.12 + fast-glob: ^3.3.0 glob-parent: ^6.0.2 is-glob: ^4.0.3 - jiti: ^1.18.2 + jiti: ^1.21.0 lilconfig: ^2.1.0 micromatch: ^4.0.5 normalize-path: ^3.0.0 @@ -13155,7 +13159,7 @@ __metadata: bin: tailwind: lib/cli.js tailwindcss: lib/cli.js - checksum: 0195c7a3ebb0de5e391d2a883d777c78a4749f0c532d204ee8aea9129f2ed8e701d8c0c276aa5f7338d07176a3c2a7682c1d0ab9c8a6c2abe6d9325c2954eb50 + checksum: 7d181a6aafb520c5760d23d0a199444a324dfa36538edd31934daa253ed9a7ac4bde18c4205aaa89c1269bc2ff11781efda04d2e27ded535a9a2547667a344b1 languageName: node linkType: hard From 8e069983ce475ec63b9a4be8fbf7e8b840fb2b85 Mon Sep 17 00:00:00 2001 From: Konstantin Komelin Date: Sat, 13 Apr 2024 12:33:32 +0700 Subject: [PATCH 3/6] Fixed the main frontend path in README (#808) --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9c5c0c761..8e30258ad 100644 --- a/README.md +++ b/README.md @@ -63,9 +63,12 @@ Visit your app on: `http://localhost:3000`. You can interact with your smart con Run smart contract test with `yarn hardhat:test` +**What's next**: + - Edit your smart contract `YourContract.sol` in `packages/hardhat/contracts` -- Edit your frontend in `packages/nextjs/pages` +- Edit your frontend homepage at `packages/nextjs/app/page.tsx`. For guidance on [routing](https://nextjs.org/docs/app/building-your-application/routing/defining-routes) and configuring [pages/layouts](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts) checkout the Next.js documentation. - Edit your deployment scripts in `packages/hardhat/deploy` +- Edit your smart contract test in: `packages/hardhat/test`. To run test use `yarn hardhat:test` ## Documentation From 699b259fe176f720bd9da9946ff7a02b14bd8f36 Mon Sep 17 00:00:00 2001 From: "Shiv Bhonde | shivbhonde.eth" Date: Mon, 15 Apr 2024 23:06:59 +0530 Subject: [PATCH 4/6] Wagmi v2 migration (#700) --- .../blockexplorer/_components/SearchBar.tsx | 2 +- .../transaction/[txHash]/page.tsx | 2 +- .../_components/contract/DisplayVariable.tsx | 22 +- .../contract/ReadOnlyFunctionForm.tsx | 23 +- .../contract/WriteOnlyFunctionForm.tsx | 34 +- .../ScaffoldEthAppWithProviders.tsx | 33 +- .../components/scaffold-eth/Address.tsx | 13 +- .../components/scaffold-eth/Balance.tsx | 18 +- .../nextjs/components/scaffold-eth/Faucet.tsx | 4 +- .../components/scaffold-eth/FaucetButton.tsx | 21 +- .../scaffold-eth/Input/AddressInput.tsx | 21 +- .../AddressInfoDropdown.tsx | 3 +- .../NetworkOptions.tsx | 8 +- .../RainbowKitCustomConnectButton/index.tsx | 3 +- packages/nextjs/hooks/scaffold-eth/index.ts | 7 +- .../hooks/scaffold-eth/useAutoConnect.ts | 82 - .../hooks/scaffold-eth/useBurnerWallet.ts | 13 +- .../hooks/scaffold-eth/useContractLogs.ts | 9 +- .../scaffold-eth/useDeployedContractInfo.ts | 6 +- .../hooks/scaffold-eth/useScaffoldContract.ts | 30 +- .../scaffold-eth/useScaffoldContractWrite.ts | 102 - .../scaffold-eth/useScaffoldEventHistory.ts | 10 +- ...ractRead.ts => useScaffoldReadContract.ts} | 47 +- ...er.ts => useScaffoldWatchContractEvent.ts} | 15 +- .../scaffold-eth/useScaffoldWriteContract.ts | 130 ++ .../hooks/scaffold-eth/useTargetNetwork.ts | 4 +- .../hooks/scaffold-eth/useTransactor.tsx | 23 +- packages/nextjs/package.json | 9 +- packages/nextjs/scaffold.config.ts | 8 - .../web3/wagmi-burner/BurnerConnector.ts | 155 -- .../wagmi-burner/BurnerConnectorErrors.ts | 23 - .../web3/wagmi-burner/BurnerConnectorTypes.ts | 10 - .../web3/wagmi-burner/burnerWalletConfig.ts | 16 +- .../wagmi-burner/createBurnerConnector.ts | 153 ++ packages/nextjs/services/web3/wagmiConfig.tsx | 28 +- .../nextjs/services/web3/wagmiConnectors.tsx | 75 +- packages/nextjs/types/abitype/abi.d.ts | 12 +- .../nextjs/utils/scaffold-eth/contract.ts | 49 +- .../nextjs/utils/scaffold-eth/decodeTxData.ts | 16 +- .../scaffold-eth/fetchPriceFromUniswap.ts | 7 +- .../utils/scaffold-eth/getParsedError.ts | 2 +- .../nextjs/utils/scaffold-eth/networks.ts | 29 +- yarn.lock | 1936 +++++++++++------ 43 files changed, 1904 insertions(+), 1309 deletions(-) delete mode 100644 packages/nextjs/hooks/scaffold-eth/useAutoConnect.ts delete mode 100644 packages/nextjs/hooks/scaffold-eth/useScaffoldContractWrite.ts rename packages/nextjs/hooks/scaffold-eth/{useScaffoldContractRead.ts => useScaffoldReadContract.ts} (52%) rename packages/nextjs/hooks/scaffold-eth/{useScaffoldEventSubscriber.ts => useScaffoldWatchContractEvent.ts} (74%) create mode 100644 packages/nextjs/hooks/scaffold-eth/useScaffoldWriteContract.ts delete mode 100644 packages/nextjs/services/web3/wagmi-burner/BurnerConnector.ts delete mode 100644 packages/nextjs/services/web3/wagmi-burner/BurnerConnectorErrors.ts delete mode 100644 packages/nextjs/services/web3/wagmi-burner/BurnerConnectorTypes.ts create mode 100644 packages/nextjs/services/web3/wagmi-burner/createBurnerConnector.ts diff --git a/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx b/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx index 82b883987..e602096d3 100644 --- a/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx +++ b/packages/nextjs/app/blockexplorer/_components/SearchBar.tsx @@ -16,7 +16,7 @@ export const SearchBar = () => { event.preventDefault(); if (isHex(searchInput)) { try { - const tx = await client.getTransaction({ hash: searchInput }); + const tx = await client?.getTransaction({ hash: searchInput }); if (tx) { router.push(`/blockexplorer/transaction/${searchInput}`); return; diff --git a/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx b/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx index d9c45f557..f3e0431df 100644 --- a/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx +++ b/packages/nextjs/app/blockexplorer/transaction/[txHash]/page.tsx @@ -25,7 +25,7 @@ const TransactionPage: NextPage = ({ params }: PageProps) => { const { targetNetwork } = useTargetNetwork(); useEffect(() => { - if (txHash) { + if (txHash && client) { const fetchTransaction = async () => { const tx = await client.getTransaction({ hash: txHash }); const receipt = await client.getTransactionReceipt({ hash: txHash }); diff --git a/packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx b/packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx index 805593d05..bf7fe3f45 100644 --- a/packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx +++ b/packages/nextjs/app/debug/_components/contract/DisplayVariable.tsx @@ -5,10 +5,11 @@ import { InheritanceTooltip } from "./InheritanceTooltip"; import { displayTxResult } from "./utilsDisplay"; import { Abi, AbiFunction } from "abitype"; import { Address } from "viem"; -import { useContractRead } from "wagmi"; +import { useReadContract } from "wagmi"; import { ArrowPathIcon } from "@heroicons/react/24/outline"; import { useAnimationConfig } from "~~/hooks/scaffold-eth"; -import { notification } from "~~/utils/scaffold-eth"; +import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork"; +import { getParsedError, notification } from "~~/utils/scaffold-eth"; type DisplayVariableProps = { contractAddress: Address; @@ -25,16 +26,20 @@ export const DisplayVariable = ({ abi, inheritedFrom, }: DisplayVariableProps) => { + const { targetNetwork } = useTargetNetwork(); + const { data: result, isFetching, refetch, - } = useContractRead({ + error, + } = useReadContract({ address: contractAddress, functionName: abiFunction.name, abi: abi, - onError: error => { - notification.error(error.message); + chainId: targetNetwork.id, + query: { + retry: false, }, }); @@ -44,6 +49,13 @@ export const DisplayVariable = ({ refetch(); }, [refetch, refreshDisplayVariables]); + useEffect(() => { + if (error) { + const parsedError = getParsedError(error); + notification.error(parsedError); + } + }, [error]); + return (
diff --git a/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx b/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx index 91bae120b..9ccc37fed 100644 --- a/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx +++ b/packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx @@ -1,10 +1,10 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { InheritanceTooltip } from "./InheritanceTooltip"; import { Abi, AbiFunction } from "abitype"; import { Address } from "viem"; -import { useContractRead } from "wagmi"; +import { useReadContract } from "wagmi"; import { ContractInput, displayTxResult, @@ -13,6 +13,7 @@ import { getParsedContractFunctionArgs, transformAbiFunction, } from "~~/app/debug/_components/contract"; +import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork"; import { getParsedError, notification } from "~~/utils/scaffold-eth"; type ReadOnlyFunctionFormProps = { @@ -30,19 +31,27 @@ export const ReadOnlyFunctionForm = ({ }: ReadOnlyFunctionFormProps) => { const [form, setForm] = useState>(() => getInitialFormState(abiFunction)); const [result, setResult] = useState(); + const { targetNetwork } = useTargetNetwork(); - const { isFetching, refetch } = useContractRead({ + const { isFetching, refetch, error } = useReadContract({ address: contractAddress, functionName: abiFunction.name, abi: abi, args: getParsedContractFunctionArgs(form), - enabled: false, - onError: (error: any) => { - const parsedErrror = getParsedError(error); - notification.error(parsedErrror); + chainId: targetNetwork.id, + query: { + enabled: false, + retry: false, }, }); + useEffect(() => { + if (error) { + const parsedError = getParsedError(error); + notification.error(parsedError); + } + }, [error]); + const transformedFunction = transformAbiFunction(abiFunction); const inputElements = transformedFunction.inputs.map((input, inputIndex) => { const key = getFunctionInputKey(abiFunction.name, input, inputIndex); diff --git a/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx b/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx index 7d7574645..b8e8f8490 100644 --- a/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx +++ b/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from "react"; import { InheritanceTooltip } from "./InheritanceTooltip"; import { Abi, AbiFunction } from "abitype"; import { Address, TransactionReceipt } from "viem"; -import { useContractWrite, useNetwork, useWaitForTransaction } from "wagmi"; +import { useAccount, useWaitForTransactionReceipt, useWriteContract } from "wagmi"; import { ContractInput, TxReceipt, @@ -34,26 +34,24 @@ export const WriteOnlyFunctionForm = ({ }: WriteOnlyFunctionFormProps) => { const [form, setForm] = useState>(() => getInitialFormState(abiFunction)); const [txValue, setTxValue] = useState(""); - const { chain } = useNetwork(); + const { chain } = useAccount(); const writeTxn = useTransactor(); const { targetNetwork } = useTargetNetwork(); const writeDisabled = !chain || chain?.id !== targetNetwork.id; - const { - data: result, - isLoading, - writeAsync, - } = useContractWrite({ - address: contractAddress, - functionName: abiFunction.name, - abi: abi, - args: getParsedContractFunctionArgs(form), - }); + const { data: result, isPending, writeContractAsync } = useWriteContract(); const handleWrite = async () => { - if (writeAsync) { + if (writeContractAsync) { try { - const makeWriteWithParams = () => writeAsync({ value: BigInt(txValue) }); + const makeWriteWithParams = () => + writeContractAsync({ + address: contractAddress, + functionName: abiFunction.name, + abi: abi, + args: getParsedContractFunctionArgs(form), + value: BigInt(txValue), + }); await writeTxn(makeWriteWithParams); onChange(); } catch (e: any) { @@ -63,8 +61,8 @@ export const WriteOnlyFunctionForm = ({ }; const [displayedTxResult, setDisplayedTxResult] = useState(); - const { data: txResult } = useWaitForTransaction({ - hash: result?.hash, + const { data: txResult } = useWaitForTransactionReceipt({ + hash: result, }); useEffect(() => { setDisplayedTxResult(txResult); @@ -126,8 +124,8 @@ export const WriteOnlyFunctionForm = ({ }`} data-tip={`${writeDisabled && "Wallet not connected or in the wrong network"}`} > -
diff --git a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx index 56a82f6de..05273c2b7 100644 --- a/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx +++ b/packages/nextjs/components/ScaffoldEthAppWithProviders.tsx @@ -2,9 +2,10 @@ import { useEffect, useState } from "react"; import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { useTheme } from "next-themes"; import { Toaster } from "react-hot-toast"; -import { WagmiConfig } from "wagmi"; +import { WagmiProvider } from "wagmi"; import { Footer } from "~~/components/Footer"; import { Header } from "~~/components/Header"; import { BlockieAvatar } from "~~/components/scaffold-eth"; @@ -12,7 +13,6 @@ import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar"; import { useNativeCurrencyPrice } from "~~/hooks/scaffold-eth"; import { useGlobalState } from "~~/services/store/store"; import { wagmiConfig } from "~~/services/web3/wagmiConfig"; -import { appChains } from "~~/services/web3/wagmiConnectors"; const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => { const price = useNativeCurrencyPrice(); @@ -36,6 +36,14 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => { ); }; +export const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + }, + }, +}); + export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => { const { resolvedTheme } = useTheme(); const isDarkMode = resolvedTheme === "dark"; @@ -46,15 +54,16 @@ export const ScaffoldEthAppWithProviders = ({ children }: { children: React.Reac }, []); return ( - - - - {children} - - + + + + + {children} + + + ); }; diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx index 1c1ad600a..2241edc89 100644 --- a/packages/nextjs/components/scaffold-eth/Address.tsx +++ b/packages/nextjs/components/scaffold-eth/Address.tsx @@ -5,6 +5,7 @@ import Link from "next/link"; import { CopyToClipboard } from "react-copy-to-clipboard"; import { Address as AddressType, getAddress, isAddress } from "viem"; import { hardhat } from "viem/chains"; +import { normalize } from "viem/ens"; import { useEnsAvatar, useEnsName } from "wagmi"; import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline"; import { BlockieAvatar } from "~~/components/scaffold-eth"; @@ -41,14 +42,18 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }: const { data: fetchedEns } = useEnsName({ address: checkSumAddress, - enabled: isAddress(checkSumAddress ?? ""), chainId: 1, + query: { + enabled: isAddress(checkSumAddress ?? ""), + }, }); const { data: fetchedEnsAvatar } = useEnsAvatar({ - name: fetchedEns, - enabled: Boolean(fetchedEns), + name: fetchedEns ? normalize(fetchedEns) : undefined, chainId: 1, - cacheTime: 30_000, + query: { + enabled: Boolean(fetchedEns), + gcTime: 30_000, + }, }); // We need to apply this pattern to avoid Hydration errors. diff --git a/packages/nextjs/components/scaffold-eth/Balance.tsx b/packages/nextjs/components/scaffold-eth/Balance.tsx index d778cb44f..0108e953a 100644 --- a/packages/nextjs/components/scaffold-eth/Balance.tsx +++ b/packages/nextjs/components/scaffold-eth/Balance.tsx @@ -1,8 +1,9 @@ "use client"; -import { useState } from "react"; -import { Address } from "viem"; -import { useBalance } from "wagmi"; +import { useEffect, useState } from "react"; +import { useQueryClient } from "@tanstack/react-query"; +import { Address, formatEther } from "viem"; +import { useBalance, useBlockNumber } from "wagmi"; import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork"; import { useGlobalState } from "~~/services/store/store"; @@ -18,14 +19,16 @@ type BalanceProps = { export const Balance = ({ address, className = "", usdMode }: BalanceProps) => { const { targetNetwork } = useTargetNetwork(); + const queryClient = useQueryClient(); + const { data: blockNumber } = useBlockNumber({ watch: true, chainId: targetNetwork.id }); const price = useGlobalState(state => state.nativeCurrencyPrice); const { data: balance, isError, isLoading, + queryKey, } = useBalance({ address, - watch: true, }); const [displayUsdMode, setDisplayUsdMode] = useState(price > 0 ? Boolean(usdMode) : false); @@ -36,6 +39,11 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => { } }; + useEffect(() => { + queryClient.invalidateQueries({ queryKey }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [blockNumber]); + if (!address || isLoading || balance === null) { return (
@@ -55,7 +63,7 @@ export const Balance = ({ address, className = "", usdMode }: BalanceProps) => { ); } - const formattedBalance = balance ? Number(balance.formatted) : 0; + const formattedBalance = balance ? Number(formatEther(balance.value)) : 0; return (