Web3 Balance Checker

A minimal Web3 balance checker application built with SvelteKit, TypeScript, TailwindCSS, and viem.

Features

• Connect wallet (MetaMask or any injected provider)
• Display ETH balance
• Display ERC-20 token balances (DAI, USDC, USDT)
• Clean, responsive UI with TailwindCSS
• Fully typed with TypeScript

Setup

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open your browser and navigate to the local development URL (usually http://localhost:5173)

Project Structure

src/
  lib/
    components/
      ConnectButton.svelte    # Wallet connection component
      BalanceCard.svelte      # Token balance display card
    utils/
      web3.ts                 # Web3 utilities with viem
  routes/
    +page.svelte              # Main page
    +layout.svelte            # App layout
    +layout.ts                # Layout config

Technologies

• SvelteKit - Framework
• TypeScript - Type safety
• TailwindCSS - Styling
• viem - Ethereum library

Notes

This is a lightweight portfolio project focused on clarity and best practices. It's not production-ready code.