DEV Community

Web3 Tutorial: build DApp with Web3-React and SWR

fangjun on February 24, 2022

In "Tutorial: Build DAPP with hardhat, React and Ethers.js", we connect to and interact with the blockchain using Ethers.js directly. It is ok, but...

Read full post

ThetaKing • Feb 26 '22

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>

)
}

fangjun • Feb 27 '22

you can console.log to see the output:

add a line :
console.log(await retrieving.retrieve())

ThetaKing • Feb 27 '22

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!

fangjun • Feb 27 '22 • Edited

good direction.

a suggestion: try to decouple two kind of jobs

interact with smart contract (just as a traditional restful API) to get/set data correctly
render react page and components with data

t_p • Aug 15 '22

@yakul curious, would using wagmi lib suffice and replace the need for web3-react and SWR ? since wagmi hooks have cache and watch that allow to refetch data from the blockchain? Wondering since it seems using one library would be simpler. Have you tired wagmi and still prefer using the libs from the tutorial?

fangjun • Aug 16 '22

using wagmi these days, the hooks are simpler.

I haven't used the cache of wagmi yet. Will take a look at this feature. Thank you.

ombayoeco11 • Jan 17 '23 • Edited

hi fangjun, i was trying to interact with my NFT Contract using web3-react with ReactJS. my BIGGEST problem is ABI part. it's always gave me the same error "Uncaught SyntaxError: Unexpected non-whitespace character after JSON at position 1"
when i inspect it, it just point at ** abi = JSON.parse(fragments)**; in interface,js (i'm using Google Chrome). can you point any solution for this?

*edit: my bad, i misplaced the abi with contract address. But then a new problem arise. i still can't interact with my contract. i'm using React Js and i haven't got any example on using web3-react with contract interaction.