Skip to main content

Get the Current Balance of the Connected Account

This recipe shows how to fetch and display the STRK balance of the currently connected account.

Here is the full code, which we will be implementing in the guide below:
components/ConnectedAddressBalance.tsx
import { useAccount } from "@starknet-start/react";
import { Address, Balance } from "~~/components/scaffold-stark";

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

  return (
    <div className="bg-base-300 p-6 rounded-lg max-w-md mx-auto mt-6">
      <h2 className="text-lg font-bold mb-2">Your Balance</h2>

      <div className="text-sm font-semibold mb-2">
        Address: <Address address={connectedAddress} />
      </div>

      <div className="text-sm font-semibold">
        Balance: <Balance address={connectedAddress} />
      </div>
    </div>
  );
};

Implementation guide​

1. Create a new Component​

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

components/ConnectedAddressBalance.tsx
export const ConnectedAddressBalance = () => {
  return (
    <div>
      <h2>Your Balance</h2>
    </div>
  );
};

2. Retrieve the Connected Account​

Fetch the Starknet address of the currently connected account using the useAccount starknet-start hook and easily display them using Scaffold Stark Address and Balance components.

components/ConnectedAddressBalance.tsx
import { useAccount } from "@starknet-start/react";
import { Address, Balance } from "~~/components/scaffold-stark";

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

  return (
    <div>
      <h2>Your STRK Balance</h2>
      Address: <Address address={connectedAddress} />
      Balance: <Balance address={connectedAddress} />
    </div>
  );
};