custom useBalance() implementation (from starknet-react)

until @starknet-react/core migrates to v6
apibara/starknet-react#451

client/src/lib/dojo/hooks/useDojoContractWrite.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useState } from 'react'
+import { BigNumberish, Abi, Account } from 'starknet'
 import { useWaitForTransaction } from '@starknet-react/core'
 import { useDojoAccount } from '@/lib/dojo/DojoContext'
-import { execute } from '@/lib/utils/starknet'
 import { bigintToHex } from '@/lib/utils/types'
-import { BigNumberish, Abi, Account } from 'starknet'
+import { execute } from '@/lib/utils/starknet'
 
 export function useDojoContractWrite(contractAddress: BigNumberish, abi: Abi, functionName: string, callData: BigNumberish[], fromAccount: Account = null) {
   const { account } = useDojoAccount()

client/src/lib/dojo/hooks/useDojoERC20.tsx

@@ -1,12 +1,12 @@
 import { useMemo } from 'react'
 import { useDojoContractWrite } from '@/lib/dojo/hooks/useDojoContractWrite'
-import { splitU256 } from '@/lib/utils/starknet'
+import { bigintToUint256 } from '@/lib/utils/starknet'
 import { bigintToHex } from '@/lib/utils/types'
 import { erc20_abi } from '@/lib/abi'
 import { BigNumberish, Account } from 'starknet'
 
 export function useDojoERC20Transfer(contractAddress: BigNumberish, toAddress: BigNumberish, amount: bigint, fromAccount: Account = null) {
-  const { low, high } = useMemo(() => splitU256(amount), [amount])
+  const { low, high } = useMemo(() => bigintToUint256(amount), [amount])
   const callData = useMemo(() => {
     return [
       bigintToHex(toAddress),

client/src/lib/utils/hooks/useERC20.tsx

@@ -1,12 +1,16 @@
-import { useMemo } from 'react'
-import { useAccount, useBalance, useContractRead } from '@starknet-react/core'
+import { useEffect, useMemo } from 'react'
+import { useContractRead,
+  // useBalance,
+  UseBalanceProps, Balance,
+ } from '@starknet-react/core'
 import { bigintToHex } from '@/lib/utils/types'
-import { BigNumberish } from 'starknet'
+import { BigNumberish, Uint256 } from 'starknet'
 import { erc20_abi } from '@/lib/abi'
-import { feltToString } from '../starknet'
+import { Uint256ToBigint, feltToString, weiToEth } from '../starknet'
 
 export const useERC20Balance = (contractAddress: BigNumberish, ownerAddress: BigNumberish, fee: BigNumberish = 0n) => {
-  const { data: balance } = useBalance({
+  // const { data: balance } = useBalance({
+  const balance = _useBalance({
     token: bigintToHex(contractAddress),
     address: bigintToHex(ownerAddress),
     watch: true,
@@ -52,3 +56,36 @@ export const useERC20TokenName = (contractAddress: BigNumberish) => {
   }
 }
 
+
+//--------------------------------------
+// TEMP
+// until @starknet-react/core v3 + starknet v6
+// https://github.com/apibara/starknet-react/issues/451
+//
+enum BlockTag {
+  pending = "pending",
+  latest = "latest"
+}
+export const _useBalance = (props: UseBalanceProps): Balance => {
+  const { data, isError, isLoading, error } = useContractRead({
+    functionName: "balanceOf",
+    args: [bigintToHex(props.address)],
+    abi: erc20_abi,
+    address: bigintToHex(props.token),
+    enabled: (BigInt(props.address || 0) > 0n && BigInt(props.token || 0) > 0n),
+    // refetchInterval: 2000, // update every 2 seconds
+    // update every block
+    watch: true,
+    blockIdentifier: BlockTag.pending,
+  })
+  useEffect(() => { if (error) console.warn(`_useBalance() ERROR:`, error) }, [error])
+  //@ts-ignore
+  const value = useMemo<bigint>(() => (data?.balance ? Uint256ToBigint(data.balance as Uint256) : 0n), [data])
+  const formatted = useMemo(() => Number(weiToEth(value)).toString(), [value])
+  return {
+    decimals: 18,
+    symbol: '$?',
+    formatted,
+    value,
+  }
+}

client/src/lib/utils/starknet.tsx

@@ -1,13 +1,14 @@
 import {
-  ec,
-  shortString,
   Account,
-  BigNumberish,
   AccountInterface,
   InvocationsDetails,
   InvokeFunctionResponse,
   RpcProvider,
+  shortString,
+  BigNumberish,
+  Uint256,
   Abi,
+  ec,
 } from 'starknet'
 import { bigintToHex } from './types'
 
@@ -22,7 +23,8 @@ export const ethToWei = (v: BigNumberish): bigint => (BigInt(v) * ETH_TO_WEI)
 export const weiToEth = (v: BigNumberish): bigint => (BigInt(v) / ETH_TO_WEI)
 export const dummyAccount = (rpc?: RpcProvider): Account => (new Account(rpc ?? {}, '0x0', '0x0'))
 
-export const splitU256 = (v: BigNumberish): { low: bigint, high: bigint } => ({
+export const Uint256ToBigint = (v: Uint256): bigint => ((BigInt(v.high) << 128n) + BigInt(v.low))
+export const bigintToUint256 = (v: BigNumberish): Uint256 => ({
   low: BigInt(v) & 0xffffffffffffffffffffffffffffffffn,
   high: BigInt(v) >> 128n,
 })