docs.scaffoldeth.io Open in urlscan Pro
76.76.21.123  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Skip to main content

Scaffold-ETH 2 | Docs
GitHub DocsGitHub SE-2



 * 🏗 Welcome to Scaffold-ETH 2
 * 🚀 QuickStart
 * ⚙ Components
 * 🛠 Interacting with Your Smart Contracts
 * 🧪 Recipes
   * Get balance of the connected account
   * Write to contract with writeAsync button
   * Read a uint from a contract
   * Wagmi useContractWrite with transaction status
 * 🛳 Shipping Your dApp
 * ✅ Disabling Type and Linting Error Checks
 * 🙏 Contributing to Scaffold-ETH 2

 * 
 * 🧪 Recipes
 * Get balance of the connected account

On this page


GET THE CURRENT BALANCE OF THE CONNECTED ACCOUNT

This recipe shows how to fetch and display the ETH 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 "wagmi";
import { Address, Balance } from "~~/components/scaffold-eth";

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 Ethereum 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


STEP 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 Ethereum Balance</h2>
    </div>
  );
};





STEP 2: RETRIEVE THE CONNECTED ACCOUNT

Fetch the Ethereum address of the currently connected account using the
useAccount wagmi hook and easily display them using Scaffold ETH-2 Address and
Balance components.

components/ConnectedAddressBalance.tsx

import { useAccount } from "wagmi";
import { Address, Balance } from "~~/components/scaffold-eth";

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

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



Edit this page

Previous
🧪 Recipes
Next
Write to contract with writeAsync button
 * Implementation guide
   * Step 1: Create a new Component
   * Step 2: Retrieve the Connected Account

Built with ♥ at BuidlGuidl
 * BuidlGuidl Website
 * BuidlGuidl Twitter

GitHub
 * Scaffold-Eth 2 GitHub
 * Docs GitHub

Social
 * Twitter
 * Telegram
 * Youtube

Copyright © 2024 Scaffold-eth Docs. Built with Docusaurus.