@@ -5,15 +5,21 @@ import { EditionInfo } from '@/components/editionInfo'
5
5
import { WalletPrivateKeyInput } from '@/components/walletInput'
6
6
import { useContractAddress } from '@/context/contractAddress'
7
7
import { useWallet } from '@/context/wallet'
8
- import { useBalance } from 'wagmi'
8
+ import { useQueryClient } from '@tanstack/react-query'
9
+ import { useEffect } from 'react'
10
+ import { useBlockNumber , useBalance } from 'wagmi'
9
11
10
12
export default function Home ( ) {
11
13
const { wallet } = useWallet ( )
12
14
13
- const balance = useBalance ( {
15
+ const queryClient = useQueryClient ( )
16
+ const { data : blockNumber } = useBlockNumber ( { watch : true } )
17
+ const { data : balance , queryKey } = useBalance ( {
14
18
address : wallet ?. account . address ,
15
- watch : true ,
16
19
} )
20
+ useEffect ( ( ) => {
21
+ queryClient . invalidateQueries ( { queryKey } )
22
+ } , [ blockNumber , queryClient , queryKey ] )
17
23
18
24
const {
19
25
contractAddress,
@@ -33,7 +39,7 @@ export default function Home() {
33
39
{ wallet && (
34
40
< >
35
41
< p > Balance of { wallet . account . address } </ p >
36
- < p > { balance . data ? `${ Number ( balance . data . formatted ) . toFixed ( 5 ) } eth` : 'Loading...' } </ p >
42
+ < p > { balance ?. decimals != null ? `${ Number ( balance . decimals ) . toFixed ( 5 ) } eth` : 'Loading...' } </ p >
37
43
< br />
38
44
</ >
39
45
) }
0 commit comments