Read a uint from a contract

This recipe demonstrates how to read data from contract functions that accept some arguments (parameters) or no arguments at all and displays it on the UI.

Here is the full code, which we will be implementing in the guide below:

components/GreetingsCount.tsx

import { useAccount } from "wagmi";
import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";

export const GreetingsCount = () => {
  const { address: connectedAddress } = useAccount();

  const { data: totalCounter, isLoading: isTotalCounterLoading } = useScaffoldContractRead({
    contractName: "YourContract",
    functionName: "totalCounter",
    watch: true,
  });

  const { data: connectedAddressCounter, isLoading: isConnectedAddressCounterLoading } = useScaffoldContractRead({
    contractName: "YourContract",
    functionName: "userGreetingCounter",
    args: [connectedAddress], // passing args to function
    watch: true,
  });

  return (
    <div className="card card-compact w-64 bg-secondary text-primary-content shadow-xl m-4">
      <div className="card-body items-center text-center">
        <h2 className="card-title">Greetings Count</h2>
        <div className="card-actions items-center flex-col gap-1 text-lg">
          <h2 className="font-bold m-0">Total Greetings count:</h2>
          {isTotalCounterLoading ? (
            <span className="loading loading-spinner"></span>
          ) : (
            <p className="m-0">{totalCounter ? totalCounter.toString() : 0}</p>
          )}
          <h2 className="font-bold m-0">Your Greetings count:</h2>
          {isConnectedAddressCounterLoading ? (
            <span className="loading loading-spinner"></span>
          ) : (
            <p className="m-0">{connectedAddressCounter ? connectedAddressCounter.toString() : 0}</p>
          )}
        </div>
      </div>
    </div>
  );
};

Implementation guide

Step 1: Create a new Component

Begin by creating a new component in the "components" folder of your application.

components/GreetingsCount.tsx

export const GreetingsCount = () => {
  return (
    <div>
      <h2 className="font-bold m-0">Total Greetings count:</h2>
      <h2 className="font-bold m-0">Your Greetings count:</h2>
    </div>
  );
};

Step 2: Retrieve total greetings count

Initialize the useScaffoldContractRead hook to read from the contract. This hook provides the data which contains the return value of the function.

components/GreetingsCount.tsx

import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";

export const GreetingsCount = () => {
  const { data: totalCounter } = useScaffoldContractRead({
    contractName: "YourContract",
    functionName: "totalCounter",
    watch: true,
  });

  return (
    <div>
      <h2 className="font-bold m-0">Total Greetings count:</h2>
      <p>{totalCounter ? totalCounter.toString() : 0}</p>
      <h2 className="font-bold m-0">Your Greetings count:</h2>
    </div>
  );
};

In the line const {data: totalCounter} = useScaffoldContractRead({...}) we are using destructuring asssignment to assign data to a new name totalCounter.

In the contract, totalCounter returns an uint value, which is represented as a BigInt in javascript and can be converted to a readable string using .toString().

Step 3: Retrieve connected address greetings count

We can access connected address using useAccount hook and pass it to args key in useScaffoldContractRead hooks configuration which will be used as an argument to the read contract function.

components/GreetingsCount.tsx

import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";
import { useAccount } from "wagmi";

export const GreetingsCount = () => {
  const { address: connectedAddress } = useAccount();

  const { data: totalCounter } = useScaffoldContractRead({
    contractName: "YourContract",
    functionName: "totalCounter",
    watch: true,
  });

  const { data: connectedAddressCounter } = useScaffoldContractRead({
    contractName: "YourContract",
    functionName: "userGreetingCounter",
    args: [connectedAddress], // passing args to function
    watch: true,
  });

  return (
    <div>
      <h2>Total Greetings count:</h2>
      <p>{totalCounter ? totalCounter.toString() : 0}</p>
      <h2>Your Greetings count:</h2>
      <p>{connectedAddressCounter ? connectedAddressCounter.toString() : 0}</p>
    </div>
  );
};

Step 4: Bonus adding loading state

We can use isLoading returned from useScaffoldContractRead which is set to true while fetching the data from contract.

components/GreetingsCount.tsx

import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";
import { useAccount } from "wagmi";

export const GreetingsCount = () => {
  const { address: connectedAddress } = useAccount();

  const { data: totalCounter, isLoading: isTotalCounterLoading } = useScaffoldContractRead({
    contractName: "YourContract",
    functionName: "totalCounter",
    watch: true,
  });

  const { data: connectedAddressCounter, isLoading: isConnectedAddressCounterLoading } = useScaffoldContractRead({
    contractName: "YourContract",
    functionName: "userGreetingCounter",
    args: [connectedAddress], // passing args to function
    watch: true,
  });

  return (
    <div>
      <h2>Total Greetings count:</h2>
      {isTotalCounterLoading ? "Loading..." : <p>{totalCounter ? totalCounter.toString() : 0}</p>}
      <h2>Your Greetings count:</h2>
      {isConnectedAddressCounterLoading ? (
        "Loading..."
      ) : (
        <p>{connectedAddressCounter ? connectedAddressCounter.toString() : 0}</p>
      )}
    </div>
  );
};