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. Dapp Deployment Tutorial - Eclipse Devnet
  4. Building a React App Front-End

Step 3: Install Additional Dependencies for Enhanced Functionality and Compatibility

To ensure your React app is fully equipped to interact with the Eclipse Devnet, including token operations and to provide a smooth experience across different browsers, you'll need to install a set of additional dependencies. These include libraries for cryptographic functions, HTTP requests, streaming, and specific Solana programming library for SPL token management.

Install Browser Compatibility and Utility Libraries

The Solana Web3.js library and interacting with blockchain often require node-specific functionalities which are not natively available in the browser. To address this, you'll need to polyfill these functionalities:

  1. Install Browser Polyfills and Utilities:

    • Open your terminal within your project directory and run the following commands to install the necessary packages:

      npm install crypto-browserify https-browserify browserify-zlib stream-http node-polyfill-webpack-plugin
    • These libraries polyfill Node.js modules for use in the browser, ensuring your application can use crypto, HTTP, and streaming functionalities in a web environment.

Install Solana SPL Token Library and Buffer

To interact with SPL tokens and handle binary data within your application, install the SPL token library and a buffer library:

  1. Execute Installation Commands:

    • Continue in your terminal and install the SPL token library and buffer library with:

      npm install @solana/spl-token buffer
    • @solana/spl-token provides convenient functions for interacting with the SPL Token program on the Solana blockchain, allowing for actions like querying token balances or transferring tokens.

    • buffer is used to handle binary data, a common requirement when dealing with blockchain transactions and data encoding/decoding.

Verifying Your Installation

  • After completing the installations, review your package.json file to ensure all packages are correctly listed under dependencies.

  • It's a good practice to run npm install again (or yarn install if using Yarn) to resolve any potential dependency conflicts or missing packages.

Next Steps

  • With these dependencies installed, your project is now better equipped to handle a wide range of blockchain-related functionalities, from token management to data encoding and ensuring browser compatibility.

By installing these additional dependencies, you ensure that your React app has the comprehensive capability to interact with the Eclipse Devnet effectively, including support for SPL tokens and seamless operation across web environments.

PreviousStep 2: Install Solana Web3.js and Wallet Adapter DependenciesNextStep 4: Configure Webpack for Browser Compatibility

Last updated 1 year ago

📖
✨