useGetBalance from interchain-react

hooks/useBalance.ts

@@ -1,8 +1,8 @@
-import { createGetBalance } from 'interchainjs/cosmos/bank/v1beta1/query.rpc.func'
 import { defaultRpcEndpoint as rpcEndpoint } from '@/config';
+import { defaultContext } from '@tanstack/react-query'
 import BigNumber from "bignumber.js";
 import { defaultAssetList } from "@/config";
-import { useEffect, useState } from 'react';
+import { useGetBalance } from 'interchain-react/cosmos/bank/v1beta1/query.rpc.func'
 
 export default function useBalance({
   address,
@@ -11,24 +11,39 @@ export default function useBalance({
 }) {
 
   const coin = defaultAssetList?.assets[0];
+
   const denom = coin!.base!
+
   const COIN_DISPLAY_EXPONENT = coin!.denomUnits.find(
     (unit) => unit.denom === coin!.display
   )?.exponent as number;
 
-  const [balance, setBalance] = useState<BigNumber | null>(null);
-
-  useEffect(() => {
-    const getBalance = createGetBalance(rpcEndpoint);
-    getBalance({
+  const {
+    data: balance,
+    isSuccess: isBalanceLoaded,
+    isLoading: isFetchingBalance,
+    refetch: refetchBalance,
+  } = useGetBalance({
+    request: {
       address,
       denom,
-    }).then(({balance})=>{
-      setBalance(new BigNumber(balance?.amount ?? 0).multipliedBy(  10 ** -COIN_DISPLAY_EXPONENT))
-    })
-  }, [address, denom, COIN_DISPLAY_EXPONENT]);
+    },
+    options: {
+      context: defaultContext,
+      enabled: !!address,
+      select: ({ balance }) =>
+        new BigNumber(balance?.amount ?? 0).multipliedBy(
+          10 ** -COIN_DISPLAY_EXPONENT
+        ),
+    },
+    // with the new version, simply pass the endpoint to the clientResolver
+    clientResolver: rpcEndpoint,
+  });
 
   return {
-    balance
+    balance,
+    isBalanceLoaded,
+    isFetchingBalance,
+    refetchBalance,
   }
 }