Thanks for the reply. I tried but it still fails to show the value. I want to avoid turning your article into a stackoverflow thread, but would you be able to point what is missing here? The storage function works and I can verify that the contract has stored the number using Remix IDE. I don't get any error, but {Retrieve} comes out blank. Thanks
import React, { useState } from 'react';
import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import {Contract} from "@ethersproject/contracts";
import { ethers } from "ethers";
import { parseEther}from "@ethersproject/units"
import { Button, Input , NumberInput, NumberInputField, FormControl, FormLabel } from '@chakra-ui/react'
import {STORAGE} from "abi/STORAGE"
import Web3 from "web3"
Thanks for the reply. I tried but it still fails to show the value. I want to avoid turning your article into a stackoverflow thread, but would you be able to point what is missing here? The storage function works and I can verify that the contract has stored the number using Remix IDE. I don't get any error, but {Retrieve} comes out blank. Thanks
import React, { useState } from 'react';
import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import {Contract} from "@ethersproject/contracts";
import { ethers } from "ethers";
import { parseEther}from "@ethersproject/units"
import { Button, Input , NumberInput, NumberInputField, FormControl, FormLabel } from '@chakra-ui/react'
import {STORAGE} from "abi/STORAGE"
import Web3 from "web3"
const web3 = new Web3("localhost:8545")
interface Props {
numberStored: string
addressContract: string
}
export default function StoringNumber(props:Props){
const addressContract = props.addressContract
const numberStored = props.numberStored
const [toAddress, setToAddress]=useState("")
const [amount,setAmount]=useState('0.00001')
const [number, setNewNumber] = useState();
const { account, active, library} = useWeb3React()
async function Store(event:React.FormEvent) {
event.preventDefault()
if(!(active && account && library)) return
const storing = new Contract(addressContract, STORAGE, library.getSigner());
storing.store(amount).catch('error', console.error)
}
async function Retrieve(event:React.FormEvent) {
const retrieving = new ethers.Contract(addressContract, STORAGE)
await retrieving.retrieve()
}
const handleChange = (value:string) => setAmount(value)
return (
//storing form erased to save space
)
}
you can console.log to see the output:
add a line :
console.log(await retrieving.retrieve())
Oh I see. It is giving me:
"Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead."
will try to find out what can be done (if you know and can answer, will be very grateful). Thanks a lot!
good direction.
a suggestion: try to decouple two kind of jobs