I have tried to delay, why still have this warn?
setTimeout(() => {
(
async () => {
const erc20balance = await Web3API.account.getTokenBalances({
chain: chainId,
address: account,
})
console.log("erc20balance -> ", erc20balance)
setErcBalance(erc20balance)
}
)()
}, 1000)
full file like below
import Moralis from "moralis";
import { useEffect, useState, useCallback } from "react";
import { Text, Divider } from "@chakra-ui/react";
import { useMoralisWeb3Api } from "react-moralis";
import CustomContainer from "./CustomContainer"
export default function Balance({ user, account }) {
const Web3API = useMoralisWeb3Api()
const [ethBalance, setEthBalance] = useState()
const [ercBalance, setErcBalance] = useState()
// 1. Native Balance
const fetchNativeBalance = useCallback(async () => {
const chainId = Moralis.getChainId()
const result = await Web3API.account.getNativeBalance({
chain: chainId,
address: account, // user.get("ethAddress")
})
if (result && result.balance) {
setEthBalance(Moralis.Units.FromWei(result.balance))
}
setTimeout(() => {
(
async () => {
const erc20balance = await Web3API.account.getTokenBalances({
chain: chainId,
address: account,
})
console.log("erc20balance -> ", erc20balance)
setErcBalance(erc20balance)
}
)()
}, 1000)
}, [Web3API.account, account])
// 2 ERC20 Balance
useEffect(() => {
fetchNativeBalance()
}, [Web3API.account, user, Web3API, fetchNativeBalance])
return (
<CustomContainer>
<Text mb="6" fontSize={"xl"} fontWeight="bold">My NativeBalance</Text>
{ethBalance && <Text>💲 {ethBalance} <b>ETH</b></Text>}
<Divider></Divider>
{ercBalance && ercBalance.map(token => (
<div key={token.token_address}>
<Text>💲 {Moralis.Units.FromWei(token.balance, token.decimals)}<b>{token.symbol}</b> - <b>{token.token_address}</b></Text>
</div>
))}
</CustomContainer>
)
}