I cannot read data from the blockchain using the moralis useWeb3ExecuteFunction in reactâŚ
this is the code:
import React from "react";
import { useMoralis } from "react-moralis";
import { useParams } from "react-router";
import circle from "../../Images/circle.svg";
import { Button } from "antd";
import Sblockie from "components/Sblockie";
import { useWeb3ExecuteFunction } from "react-moralis"
export default function MobileUserPage() {
const { id } = useParams();
const { isWeb3Enabled, isAuthenticated, account } =
useMoralis();
if (isAuthenticated && isWeb3Enabled && id==account) {
return (
<div>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gap: "20px",
}
}
>
<div></div>
<div>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gap: "20px",
}
}
>
<div>
<Sblockie currentWallet scale={20} />
</div>
<div>
<Button
style={{
display: "block",
marginLeft: "auto",
marginRight: "auto"
}}
>Create Fundme!</Button>
</div>
</div>
<h1 style={{
lineHeight: "1.2",
marginTop: "30px",
marginBottom: "30px",
fontSize: "20px",
}}
>{id}</h1>
</div>
<div>
<img
src={circle}
style={{
width: "20%",
marginRight: "100px"
}}
/>
<h2
style={{
textAlign: "center",
}}
>0/1</h2>
</div>
</div>
</div>
)
} else {
return (
<div>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gap: "20px",
}
}
>
<div>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gap: "20px",
}
}
>
<div>
<Sblockie currentWallet scale={20} />
</div>
</div>
<h1 style={{
lineHeight: "1.2",
marginTop: "30px",
marginBottom: "30px",
fontSize: "20px",
}}
>{id}</h1>
</div>
<div style={{
display: "grid",
gridTemplateColumns: "repeat(2, 1fr)",
gap: "20px",
}
}
>
<div>
<div className="dot2"></div>
<div className="dot"><h2
style={{
display: "flex",
marginLeft: "auto",
marginRight: "auto",
marginTop: "auto",
marginBottom: "auto",
textAlign: "center"
}}
>{ActiveFundme()}/1</h2></div>
</div>
<div>
<div className="dot2"></div>
<div className="dot"><h2
style={{
display: "flex",
marginLeft: "auto",
marginRight: "auto",
marginTop: "auto",
marginBottom: "auto",
textAlign: "center"
}}
>{AmountDonated()}</h2></div>
</div>
</div>
<div></div>
</div>
</div>
)
}
}
async function ActiveFundme(){
const processor = useWeb3ExecuteFunction();
const { id } = useParams();
const ABI = [
{
"inputs": [
{
"internalType": "address",
"name": "_user",
"type": "address"
}
],
"name": "GetactiveFundme",
"outputs": [
{
"internalType": "bool",
"name": "",
"type": "bool"
}
],
"stateMutability": "view",
"type": "function"
},
]
const activeornote = {
chainin: "matic",
contractAddress: "0x4ca23e9584cc784814180fcf08f72b5d94ca5379",
functionName: "GetactiveFundme",
abi: ABI,
params:{
_user: {id}
}
};
await processor.fetch({
params: activeornote
})
return 0;
}
async function AmountDonated(){
const processor=useWeb3ExecuteFunction();
const {id} = useParams();
const ABI = [
{
"inputs": [
{
"internalType": "address",
"name": "_user",
"type": "address"
}
],
"name": "GetAmountDonated",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
]
const amountdonatedd = {
chainin: "matic",
contractAddress: "0x4ca23e9584cc784814180fcf08f72b5d94ca5379",
functionName: "GetAmountDonated",
abi: ABI,
params:{
_user: {id}
}
};
await processor.fetch({
params: amountdonatedd
})
}
and a white screen comes out in the localhost