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)
    • Yield From Real World Treasury Bills
  • 🛠️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
  • The component​
  • Prerequisites​
  • Usage​
  • The onTabClick property​
  • Customizing UI​
  • Conclusion​
Edit on GitHub
  1. Tutorials & Guides
  2. Developer Guides
  3. Modifying a Solana dApp to Support Eclipse: "Chomping Glass"

Multi-chain toggle frontend component

PreviousDeveloping on the Solana Virtual Machine (SVM)NextDapp Deployment Tutorial - Eclipse Devnet

Last updated 1 year ago

The following section is a guide to working with React components to switch chains and make calls to desired RPC URLs in TypeScript.

The component

The component is a React TypeScript component designed to provide an easy toggle between different blockchain networks within a React application. It provides a tabbed interface that allows to easily navigate between various blockchain networks, and it dynamically connects to the selected blockchain using the associated RPC URL.

Prerequisites

  • Ensure that your project has React installed. If not, you can create a new React project using Create React App.

  • Copy the TabbedButtons.tsx file into your project directory.

  • Import and use the TabbedButtons component in your desired React component or page.

import TabbedButtons from "./TabbedButtons";

const App = () => {
  return (
    <div>
      <TabbedButtons tabs={customTabs} onTabClick={exampleFunction} />
    </div>
  );
};

export default App;

The TabbedButtons component consists of a tabbed interface with predefined tabs for the Solana and Eclipse mainnet. You can easily switch between these networks by clicking on the respective tabs.

Customizing the tabs by overriding the default options can simply be done by creating a customTabs array. This array contains the user tab configurations. You can modify this array by adding, removing, or updating tab objects according to your requirements.

const customTabs = [
  {
    name: "Solana Devnet", //Example tabs that can be overriden by the user
    rpcUrl: "https://api.devnet.solana.com",
    iconSrc: "sol.png",
  },
  {
    name: "Eclipse Devnet",
    rpcUrl: "https://staging-rpc.dev.eclipsenetwork.xyz",
    iconSrc: "eclipse.jpg",
  },
];

You can extend the functionality of the TabbedButtons component by adding a custom function using the onTabClick property. This function is called each time a user switches between blockchain networks, and it receives the selected RPC URL as a parameter.

const exampleFunction = (rpcUrl: string, networkName: string) => {
  // Add your arbitrary function here that uses rpcUrl
  console.log(`Setting RPC URL: ${rpcUrl}`);
  // Example: creating alert to confirm the rpcUrl
  alert(
    `Executing custom function with RPC URL: ${rpcUrl} for network: ${networkName}`,
  );
};

The UI is designed to be easily modifiable. As for the icons, you can directly modify them using the customTabs array. For the styling of the tabs themselves, you can modify the TabbedButtons.tsx file to match the requirements of your project. Since the component uses a UI framework, all the styling is taken care of by just modifying class names. This allows for easy customization without any prior modification.

The TabbedButtons component provides a user-friendly way to switch between blockchain networks in a React application. It is easily customizable, allowing developers to modify the UI, extend functionality and modify the displayed networks on the fly, according to their specific project requirements.

Usage

The onTabClick property

Customizing UI

Conclusion

📖
​
TabbedButtons
​
​
​
​
​