Read a uint from a contract

This recipe demonstrates how to read data from contract functions and display it on the UI. We'll showcase an example that accepts some arguments (parameters), and another with no arguments at all.

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 get the connected address using the useAccount hook and pass it to args key in the useScaffoldContractRead hook configuration. This will be used as an argument to read the 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 the useScaffoldContractRead hook. This variable is set to true while fetching data from the 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>
  );
};