Does below error means, need pay some fee?
Error: This Moralis Server is rate-limited because of the plan restrictions. See the details about the current rate and throttle limits: {"x-rate-limit-limit":"25","x-rate-limit-remaining-ttl":"5","x-rate-limit-used":"29","x-rate-limit-remaining-ip-ttl":"5","x-rate-limit-ip-used":"29"}
Yes. The free version server has a rate limit.
Check this for more details: https://docs.moralis.io/misc/rate-limit#error-141-rate-limit-between-your-moralis-server-and-web3-api
it looks like 29 compute units were used in a second from a limit of 25 per second (x-rate-limit-ip-used: 29 and x-rate-limit-limit: 25)
you can fix this by adding a delay between requests or making fewer requests
But, it is one total new created. Just few seconds, when I use it.
And, you can see, I just tried it, from locahost, not deploy on internet.
it can depend on what requests it made, you can get over rate limit with few requests in a second
maybe add a delay between getNFTs and getNativeBalance somehow, 1 second should be enough for a delay
I think, maybe the point is, why dev tool report 400…
POST https://3jt5nqagzphw.usemoralis.com:2053/server/functions/getTokenBalances 400
POST https://3jt5nqagzphw.usemoralis.com:2053/server/functions/getTransactions 400
Anyway, I append setTimeout to decrease request frequency, now limit-rate issue disappeared.
It only disappeared once.
Then I increase the time delay, to 2000, 3000, there is no any effect.
400 still there, and no balance or NFTs were retrieved.
you may need to add a delay between calls, if you have a timeout and you make multiple calls at the same time then it will be the same as before
There is no any tab click, or tab switch, etc. action. Maybe it is the root cause?
import { Flex, Text, Button, Box, TabList, Tabs, Tab, TabPanels, TabPanel } from "@chakra-ui/react"
import Head from "next/head"
import { useMoralis } from "react-moralis"
import Header from "../components/Header"
import Profile from "../components/Profile"
import Balance from "../components/Balance"
import Transacitons from "../components/Transactions"
import Nft from "../components/Nft"
export default function Home() {
const { isAuthenticated, authenticate, user, logout, isLoggingOut } = useMoralis()
if (!isAuthenticated) {
console.log("false")
// console.log(network)
return (
<>
<Head>
<title> Login | Dashboard3</title>
</Head>
<Flex direction="column"
justifyContent="center" alignItems="center"
width="100vw" height="100vh"
bgGradient="linear(to-br, teal.400, purple.300)">
<Text fontSize="5xl" fontWeight="bold" color="white">Freedom DAO</Text>
<Button colorScheme={"purple"} size="lg" mt="6"
onClick={() => authenticate({
signingMessage: "Sign to login website, freedomdao.monster"
})}
>Login with Metamask</Button>
</Flex>
</>
)
}
return (
<>
<Head>
<title>Login | Dashboard3</title>
</Head>
<Flex direction="column" width="100vw" height={"100vh"}>
<Header user={user} logout={logout} isLoggingOut={isLoggingOut} />
<Box flex="1" bg="purple.100" px="44" py="20">
<Tabs size="lg" colorScheme="purple" align="center" variant={"enclosed"}>
<TabList justifyContent={"space-evenly"}>
<Tab fontWeight="bold">Profile</Tab>
<Tab fontWeight="bold">Balance</Tab>
<Tab fontWeight="bold">Transacitons</Tab>
<Tab fontWeight="bold">NFTs</Tab>
<Tab fontWeight="bold">Send ETH</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Profile user={user}></Profile>
</TabPanel>
<TabPanel>
<Balance user={user}></Balance>
</TabPanel>
<TabPanel>
<Transacitons user={user}></Transacitons>
</TabPanel>
<TabPanel>
<Nft user={user}></Nft>
</TabPanel>
<TabPanel>Send ETH</TabPanel>
</TabPanels>
</Tabs>
</Box>
</Flex>
</>
)
}
can you also paste the code for those two components?
Nft.js
import { useEffect, useCallback } from "react"
import { useMoralisWeb3Api } from "react-moralis"
import { Box, Image, Text } from "@chakra-ui/react";
import CustomContainer from "./CustomContainer"
export default function Nft({ user }) {
const Web3Api = useMoralisWeb3Api();
// declare the async data fetching function
const fetchNFTs = useCallback(async () => {
// get NFTs for current user on Mainnet
const userEthNFTs = await Web3Api.account.getNFTs();
console.log(userEthNFTs);
// get testnet NFTs for user
const testnetNFTs = await Web3Api.Web3API.account.getNFTs({
chain: process.env.CHAIN_NAME,
});
console.log(testnetNFTs);
// get polygon NFTs for address
const options = {
chain: process.env.CHAIN_NAME,
address: user.get('ethAddress'),
};
const polygonNFTs = await Web3Api.account.getNFTs(options);
console.log(polygonNFTs);
}, [Web3Api.Web3API.account, Web3Api.account, user])
useEffect(() => {
setTimeout(() => { fetchNFTs() }, 3000)
}, [fetchNFTs])
return (
<CustomContainer>
<Text>
<Box>xxx</Box>
</Text>
</CustomContainer>
)
// data && data.result.map(e => { console.log(e) })
// return (
// <CustomContainer>
// <Text fontSize="xl" fontWeight="bold">My NFTs</Text>
// {data && data.result.map(nft => (
// <Box key={nft.token_uri} mt="4" px="2" py="2" borderWidth="1px" borderRadius="md">
// {nft.image && <Image alt="img" src={nft.image} />}
// <p>{nft.token_uri}</p>
// </Box>
// ))}
// </CustomContainer>
// )
}
Balance.js
import Moralis from "moralis";
import { useEffect, useState } from "react";
import { Text, Divider } from "@chakra-ui/react";
import { useERC20Balances, useMoralisWeb3Api } from "react-moralis";
import CustomContainer from "./CustomContainer"
export default function Balance({ user }) {
const Web3Api = useMoralisWeb3Api()
const { fetchERC20Balances, data } = useERC20Balances()
const [ethBalance, setEthBalance] = useState(0)
useEffect(() => {
const fetchNativeBalance = async () => {
// ropsten eth rinkeby
const result = await Web3Api.account.getNativeBalance({
chain: process.env.CHAIN_NAME,
address: user.get("ethAddress")
}).catch(e => console.error("err", e))
if (result && result.balance) {
setEthBalance(Moralis.Units.FromWei(result.balance))
} else {
console.log("00000?")
}
}
fetchNativeBalance()
// ropsten eth rinkeby
fetchERC20Balances({
params: {
chain: process.env.CHAIN_NAME,
address: user.get("ethAddress"),
}
})
}, [Web3Api.account, fetchERC20Balances, user])
// console.log(data)
return (
<CustomContainer>
<Text mb="6" fontSize={"xl"} fontWeight="bold">My ERC20 Tokens</Text>
{ethBalance && <Text>💲 {ethBalance} <b>ETH</b></Text>}
<Divider></Divider>
{data && data.map(token => (
<div key={token.token_address}>
<Text>💲 {Moralis.Units.FromWei(token.balance)}<b>{token.symbol}</b> - <b>{token.token_address}</b></Text>
</div>
))}
</CustomContainer>
)
}
try to add a delay between these two calls to Web3API
how can delay two calls in detail?
use a delay, like a sleep, it also depends how you make the calls, if you make then in parallel then it doesn’t help to add that delay