Fuel Dynamic SDK Integration

A Fuel wallet integration demo using Dynamic SDK for seamless wallet connections and blockchain interactions.

Overview

This project demonstrates how to integrate Fuel blockchain with Dynamic SDK, enabling users to connect various wallets and interact with Fuel contracts through a unified interface.

Migration from Para SDK

This project was migrated from Para SDK v2.0.0-alpha.29 to Dynamic SDK v4.22.1, maintaining all original functionality while providing a better user experience.

Key Changes

• Wallet Connection: Replaced Para SDK with Dynamic SDK for wallet management
• Predicate Integration: Uses Fuel predicates to enable EVM wallet interactions with Fuel blockchain
• UI/UX: Maintained original interface while using Dynamic SDK components
• Functionality: All features preserved - wallet connection, balance checking, transfers, counter contract interactions

Features

• 🔗 Universal Wallet Support: Connect with MetaMask, WalletConnect, and other EVM wallets
• 🚀 Fuel Integration: Seamless interaction with Fuel blockchain through predicates
• 💰 Balance Management: Check and manage ETH balances on Fuel testnet
• 🔄 Token Transfers: Send ETH to other addresses on Fuel network
• 📊 Contract Interaction: Interact with smart contracts (counter demo)
• 🎨 Modern UI: Clean, responsive interface with dark theme

Getting Started

Prerequisites

• Node.js (v16 or higher)
• pnpm package manager
• Git

Installation

1. Clone the repository:

   git clone https://github.com/rishabhkeshan/fuel-dynamic.git
   cd fuel-dynamic

2. Install dependencies:

   pnpm install

3. Start the development server:

   pnpm dev

4. Open your browser: Navigate to http://localhost:5173

Configuration

Environment Variables

Create a .env file in the root directory:

VITE_DYNAMIC_ENVIRONMENT_ID=your_dynamic_environment_id

Dynamic SDK Setup

This project uses Dynamic SDK for wallet connections. The configuration is in src/main.tsx:

<DynamicContextProvider
  settings={{
    environmentId: import.meta.env.VITE_DYNAMIC_ENVIRONMENT_ID,
    walletConnectors: [EthereumWalletConnectors],
  }}
>

Architecture

Key Components

• src/hooks/useDynamicWallet.ts: Dynamic SDK wallet integration
• src/hooks/useFuelWallet.ts: Fuel address generation from EVM addresses
• src/connectors/DynamicFuelConnector.ts: Connector for Fuel blockchain interactions
• src/utils/dynamicHelper.ts: Helper functions for transfers and contract interactions
• src/utils/hideSandboxIndicator.ts: Utility to hide Dynamic SDK sandbox indicator

How It Works

1. Wallet Connection: Users connect their EVM wallet through Dynamic SDK
2. Address Generation: EVM addresses are converted to Fuel addresses using predicates
3. Transaction Signing: Transactions are signed with the connected EVM wallet
4. Blockchain Interaction: Signed transactions are submitted to Fuel network

Usage

Connect Wallet

1. Click "Connect Wallet" button
2. Choose your preferred wallet from Dynamic SDK modal
3. Authorize the connection

Check Balance

• Your Fuel address and ETH balance will be displayed automatically
• Balance updates in real-time

Transfer ETH

1. Enter recipient Fuel address
2. Click "Transfer 0.00001 ETH"
3. Sign the transaction in your wallet
4. Wait for confirmation

Interact with Contracts

1. Use the counter contract demo
2. Click "Increment" to increase the counter
3. Sign the transaction
4. View the updated counter value

Development

Project Structure

src/
├── components/          # React components
├── connectors/         # Blockchain connectors
├── context/           # React context providers
├── hooks/             # Custom React hooks
├── utils/             # Utility functions
├── types/             # TypeScript type definitions
└── main.tsx           # Application entry point

Key Dependencies

• Dynamic SDK: Wallet connection and management
• Fuel SDK: Blockchain interactions
• React: UI framework
• TypeScript: Type safety
• Tailwind CSS: Styling

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions:

• Open an issue on GitHub
• Check the Dynamic SDK documentation
• Review the Fuel SDK documentation

Acknowledgments

• Dynamic Labs for the wallet SDK
• Fuel Network for the blockchain infrastructure
• Original Para SDK implementation for the foundation