Skip to main content

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>
);
};