Total Greetings count:
{totalCounter ? totalCounter.toString() : 0}
Your Greetings count:
//highlight-start
{connectedAddressCounter ? connectedAddressCounter.toString() : 0}
//highlight-end
);
};
```
#### Step 4: Bonus adding loading state
We can use `isLoading` returned from the [`useScaffoldReadContract`](/hooks/usescaffoldreadcontract) hook. This variable is set to `true` while fetching data from the contract.
```tsx title="components/GreetingsCount.tsx"
import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
import { useAccount } from "wagmi";
export const GreetingsCount = () => {
const { address: connectedAddress } = useAccount();
// highlight-start
const { data: totalCounter, isLoading: isTotalCounterLoading } = useScaffoldReadContract({
// highlight-end
contractName: "YourContract",
functionName: "totalCounter",
});
// highlight-start
const { data: connectedAddressCounter, isLoading: isConnectedAddressCounterLoading } = useScaffoldReadContract({
// highlight-end
contractName: "YourContract",
functionName: "userGreetingCounter",
args: [connectedAddress], // passing args to function
});
return (
Total Greetings count:
// highlight-start
{isTotalCounterLoading ? (
) : (
{totalCounter ? totalCounter.toString() : 0}
)}
// highlight-end
Your Greetings count:
// highlight-start
{isConnectedAddressCounterLoading ? (
) : (
{connectedAddressCounter ? connectedAddressCounter.toString() : 0}
)}
// highlight-end
);
};
```
### WagmiContractWriteWithFeedback
Source: https://docs.scaffoldeth.io/recipes/WagmiContractWriteWithFeedback
#### Wagmi `useWriteContract` with transaction status
This recipe demonstrates how to create a button for contract interaction using the "useTransactor" and "useWriteContract" hooks from the "wagmi" library. The interaction includes the capability to provide feedback on the transaction status when using wagmi `useWriteContract`.