Discussion on: Web3 Tutorial: build DApp with Web3-React and SWR

View post

Hi fangjun,

Thanks a lot for the detailed tutorial. It finally allowed me to do some progress in my DApp after spending hours trying to deal with truffle suite dependencies and errors. I managed to successfully follow all steps and what I have learned is very useful for what I am currently working with. I still am struggling with a point however, that this tutorial did not address: how can I retrieve the values of functions that are public view on Solidity? For example if I am doing a simple storage DApp like the one given in Remix as an example:

contract Storage {
uint256 number;
function store(uint256 num) public {
number = num;
}
function retrieve() public view returns (uint256){
return number;
}
}

where my intent is to fill a number in a form and click a button and have this number shown to me. How can I accomplish that? I have tried multiple alternatives but nothing works. Could you please address this case in the next tutorial?

Thank you

fangjun • Feb 27 '22

a quick reply:

using ethers.js to call contract.retrieve()

value = await contract.retrieve()

ThetaKing • Feb 27 '22 • Edited

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

    <form onSubmit={Retrieve}>
      <FormControl>
      <FormLabel htmlFor='amount'>Number that was stored: {Retrieve}</FormLabel>
        <NumberInput defaultValue={Retrieve} min={0} max={1000} onChange={handleChange}>
          <NumberInputField />
        </NumberInput>
        <Button type="submit">Retrieve</Button>
      </FormControl>
    </form>
</div>

)
}