Read Contract

Read Symbol & Name

Ref contract : https://rinkeby.etherscan.io/address/0xeb36534c246fff16806be2922c98fa8acf2a9f56

in this tutorial, we want to read data stored in blockchain via our app.

App.js

import { ethers } from 'ethers';
import React, { useEffect, useState } from 'react'

function App() {
const [contractName,setContractName] = useState();
const [contractSymbol, setContractSymbol] = useState();

  const provider = new ethers.providers.Web3Provider(window.ethereum)
  const signer = provider.getSigner()
  const address = provider.getSigner().getAddress()

  const daiAddress = "xxxx"; // set your contract address here
  const daiAbi = [
  "function name() view returns (string)",
  "function symbol() view returns (string)",
  ]
  const daiContract = new ethers.Contract(daiAddress, daiAbi, provider);

  const getRead = async () => {
    try {
      const name = await daiContract.name()
      setContractName(name)
      
      const symbol = await daiContract.symbol()
      setContractSymbol(symbol)
      
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    getRead();
    return () => {
    }
  }, [])

  return (
    </Box>
      <Text>Contract : {contractName? contractName : ""}</Text>
      <Text>Symbol : {contractName? contractName : ""}</Text>
      <Text>
    </Box>
  )
}

export default App

Read other datas

You can also read other variables in a contract by declaring functions in your daiAbi

daiAbi

const daiAbi = [
  "function name() view returns (string)",
  "function symbol() view returns (string)",
  "function balanceOf(address) view returns(uint256)"
  ]

getRead

// Some code
const getRead = async () => {
    try {
      const name = await daiContract.name()
      setContractName(name)
      
      const symbol = await daiContract.symbol()
      setContractSymbol(symbol)
      
      const balance = await daiContract.balanceOf(address)
      setContractBalance(parseInt(balance._hex))
      
    } catch (error) {
      console.log(error)
    }
  }

return

return (
    </Box>
      <Text>Contract : {contractName? contractName : ""}</Text>
      <Text>Symbol : {contractName? contractName : ""}</Text>
      <Text>balance : {contractBalance? contractBalance : ""}</Text>
      <Text>
    </Box>
  )