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
Edit on GitHub
  1. Tutorials & Guides
  2. Developer Guides
  3. Eclipse Testnet ETH Transfer Transaction Fee Estimator

Program Breakdown

Here's a breakdown of the program's functionality:

  1. State Initialization:

    const [fee, setFee] = useState<number | null>(null);
    const [error, setError] = useState<string>('');
    const [senderAddress, setSenderAddress] = useState<string>('');
    const [receiverAddress, setReceiverAddress] = useState<string>('');
    const [rpcUrl, setRpcUrl] = useState<string>('');

    Here, React's useState hook initializes five pieces of state: fee for storing the estimated fee, error for any errors that occur during the estimation process, senderAddress and receiverAddress for the respective blockchain addresses involved in the transaction, and rpcUrl for the URL of the connected RPC.

  2. Effect Hook for Fee Estimation:

    useEffect(() => {
      // Async function to estimate transaction fee
      const estimateTransactionFee = async () => {
        // ... Code to estimate fee
      };
      estimateTransactionFee();
    }, []);

    This useEffect hook runs once when the component mounts, thanks to the empty dependency array ([]). It defines and invokes the estimateTransactionFee async function to estimate the transaction fee.

  3. Setting Up Connection and Transaction Details:

    const customRpcUrl = "https://testnet.dev2.eclipsenetwork.xyz";
    const connection = new web3.Connection(customRpcUrl);
    setRpcUrl(customRpcUrl);

    The program establishes a connection to the Eclipse testnet using a custom RPC URL and updates the customRpcUrl const with this URL.

    const senderPublicKey = new web3.PublicKey('...');
    const recipientPublicKey = new web3.PublicKey('...');
    const amountInLamports = 1_000_000_000;
    setSenderAddress(senderPublicKey.toString());
    setReceiverAddress(recipientPublicKey.toString());

    It sets up the sender and receiver public keys and the amount to transfer (in lamports/wei), updating the corresponding states with these details.

  4. Transaction Preparation and Fee Estimation:

    const transferInstruction = web3.SystemProgram.transfer({
      fromPubkey: senderPublicKey,
      toPubkey: recipientPublicKey,
      lamports: amountInLamports
    });
    transaction.add(transferInstruction);

    A transfer instruction is created and added to the transaction. This instruction specifies the sender, receiver, and amount to transfer.

    const { blockhash } = await connection.getLatestBlockhash();
    transaction.recentBlockhash = blockhash;
    transaction.feePayer = senderPublicKey;

    The transaction is prepared with the latest blockhash and the fee payer's public key.

    const message = transaction.compileMessage();
    const estimatedFee = await connection.getFeeForMessage(message, 'recent');

    The transaction's message is compiled, and the fee is estimated by querying the blockchain with this message.

  5. Updating State with the Estimated Fee or Error:

    if (estimatedFee.value === null) {
      throw new Error('Failed to estimate fee');
    }
    setFee(estimatedFee.value);

    If the fee estimation is successful, the fee state is updated with the estimated value. If the estimation fails or an error occurs, the error state is updated accordingly.

  6. Rendering UI Components: The UI displays the connected RPC URL, sender and receiver addresses, and either the estimated fee, an error message, or a loading indicator, based on the current state:

    <p>Connected RPC URL: {rpcUrl}</p>
    <p>Sender Address: {senderAddress}</p>
    <p>Receiver Address: {receiverAddress}</p>

    This straightforward approach allows users to see the fee estimation results or the error encountered during the process, providing transparency and insight into the transaction fee estimation on the Eclipse blockchain.

PreviousEclipse Testnet ETH Transfer Transaction Fee EstimatorNextProgram JSX & CSS

Last updated 1 year ago

📖