Reading from the blockchain

Eclipse Token Dashboard demonstrates essential functionality like connecting wallets, checking balances, and sending tokens - all with a clean, approachable codebase.

App Preview

Here's what the application looks like when running:

Balance View

Transfer View

Gas Fee Comparison

Learning Goals

This example project covers:

  • Connecting crypto wallets to your dApp

  • Displaying token balances

  • Transferring tokens between addresses

  • Comparing gas fees across networks

  • Handling transaction receipts and errors

No previous blockchain experience needed - just basic React knowledge!

Tech Stack

Built with beginner-friendly tools:

  • Next.js

  • Solana wallet adapters (compatible with Eclipse)

  • shadcn/ui components

  • Tailwind CSS

Getting Started

Prerequisites

  • Node.js 18+

  • pnpm (or npm/yarn if you prefer)

Setup Steps

  1. Clone this repo

    git clone https://github.com/Eclipse-Laboratories-Inc/Beginner-Example-App.git
    cd Beginner-Example-App
  2. Install dependencies

    pnpm install
  3. Set up your environment Create a .env.local file:

    # Testnet is easier to start with
    NEXT_PUBLIC_SOLANA_RPC_URL=https://testnet.dev2.eclipsenetwork.xyz
    
    # For mainnet later (just uncomment)
    # NEXT_PUBLIC_SOLANA_RPC_URL=https://mainnet.eclipsenetwork.xyz
  4. Start the dev server

    pnpm dev
  5. Open http://localhost:3000 in your browser

Important! Wallet Setup

Before testing the app:

  • Make sure your wallet is set to the Eclipse testnet

  • For testnet, use this RPC URL: https://testnet.dev2.eclipsenetwork.xyz

  • If you switch to mainnet later, update your wallet settings accordingly

Code Highlights

Some key aspects of the implementation:

Wallet Connection

// Simple wallet connection with just one line
const { publicKey, sendTransaction, connected, disconnect } = useWallet()

Sending Tokens

// Basic transaction creation and sending
const transferTokens = async () => {
  const transaction = new Transaction().add(
    SystemProgram.transfer({
      fromPubkey: publicKey,
      toPubkey: recipientPubkey,
      lamports,
    })
  );
  
  const signature = await sendTransaction(transaction, connection);
}

Source Code

Link to Github

License

This project is MIT licensed - feel free to use it as a starting point for your own applications!

Was this helpful?