Eclipse Documentation
HomeBridge
  • 🐮Users
    • Getting Started
      • 1. Set Up Your Eclipse Wallet
      • 2. Bridge Assets for Gas and Transactions
      • 3. Explore the Eclipse Ecosystem
      • 4. Engage with the Community on Discord
    • User Resources
    • Unified Restaking Tokens (URTs)
  • 🛠️Developers
    • Getting Started
    • Wallet
      • Mainnet Wallets
      • Testnet & Devnet Wallets
        • Adding Eclipse Wallet to dApp
        • Custom Wallets
    • RPC & Block Explorers
      • Dragon's Mouth gRPC Subscriptions
    • Bridges
      • Eclipse Canonical Bridge
      • Hyperlane
    • Oracles
      • Pyth Network
      • Switchboard
    • NFTs
      • Metaplex
      • Nifty Asset
      • Libreplex (Token-2022)
    • Developer Tooling
      • Faucet
      • Benchmarking
        • Running AMM benchmarking tests
      • Decentralized Identities
        • AllDomains
      • OpenBook Quickstart
      • Multisig
    • Eclipse Bug Bounty Program
    • Eclipse Status Page
    • Frequently Asked Questions
    • Differences Between Eclipse and Solana
    • Eclipse Program Registry Guide
  • 📖Tutorials & Guides
    • Developer Guides
      • Quick Start: "Hello World"
        • Deployment Walkthrough
      • Reading from the blockchain
      • Modifying a Solana dApp to Support Eclipse: "Chomping Glass"
        • Developing on the Solana Virtual Machine (SVM)
        • Multi-chain toggle frontend component
      • Dapp Deployment Tutorial - Eclipse Devnet
        • ⚙️Install Dependencies - Windows
          • Step 1: Install Visual Studio Code (VSC)
          • Step 2: Install Rust and Cargo
          • Step 3: Download Visual Studio C++ Build Tools
          • Step 4: Download Node.js
          • Step 5: Install Git on Windows
          • Step 6: Install the Solana CLI
          • Step 7: Install WSL on Visual Studio Code and Upgrade to WSL2
          • Step 8: Set Up Development Environment in Ubuntu WSL
          • Step 9: Install Anchor on Windows and WSL
        • 🏝️Solana CLI & Solana Keypair
          • Step 1: Set Solana CLI to Use Eclipse Devnet
          • Step 2: Verify Solana CLI Configuration
          • Step 3: Generate a New Solana Keypair
          • Step 4: Claim Devnet ETH for Transaction Fees
          • Optional Step: View Balance on Devnet Explorer
        • 🖥️Creating an Anchor Project in Visual Studio Code
          • Step 1: Initialize Anchor Project
          • Step 2: Update the lib.rs File with Smart Contract Code
          • Step 3: Update the Smart Contract's Cargo.toml File
          • Step 4: Update the Project's Root Cargo.toml File
          • Step 5: Compile Your Program with anchor build
          • Step 6: Deploy Your Project to the Eclipse Devnet
          • Step 7: Verify Program Deployment on the Eclipse Devnet Explorer
        • ✨Building a React App Front-End
          • Step 1: Create a New React Project with TypeScript
          • Step 2: Install Solana Web3.js and Wallet Adapter Dependencies
          • Step 3: Install Additional Dependencies for Enhanced Functionality and Compatibility
          • Step 4: Configure Webpack for Browser Compatibility
          • Step 5: Start the Development Server and Verify Setup
          • Step 6: Implement the UI for Your NFT Minter in App.tsx with Updated Code
      • Eclipse Testnet ETH Transfer Transaction Fee Estimator
        • Program Breakdown
        • Program JSX & CSS
        • Program Execution
      • Pyth: How to Use Real-Time Data in Solana Programs
      • Quick Start: User Guide - Testnet
      • cNFTs on Eclipse
        • Create 1 Million NFTs on Eclipse
        • How to Interact with cNFTs
  • 🧠Eclipse Architecture
    • What is Eclipse Mainnet?
      • Settlement - Ethereum
      • Execution - Solana Virtual Machine (SVM)
      • Data Availability - Celestia
      • Proving - RISC Zero
      • Why Eclipse, Why Ethereum, Why Now
    • Lifecycle of an Eclipse Transaction
  • 📚Additional Resources
    • External Documentation
    • Disclosures
Powered by GitBook
On this page
  • App Preview
  • Learning Goals
  • Tech Stack
  • Getting Started
  • Prerequisites
  • Setup Steps
  • Important! Wallet Setup
  • Code Highlights
  • Source Code
  • License
Edit on GitHub
  1. Tutorials & Guides
  2. Developer Guides

Reading from the blockchain

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

PreviousDeployment WalkthroughNextModifying a Solana dApp to Support Eclipse: "Chomping Glass"

Last updated 21 days ago

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

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

License

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

Open in your browser

📖
http://localhost:3000
Link to Github