Web3 Adapter

A modern React-based Web3 adapter for Solana blockchain integration, featuring a clean UI built with Tailwind CSS and shadcn/ui components.

Features

• 🔐 Secure wallet integration with Solana
• 💰 Real-time balance tracking with 10 seconds auto-refresh time
• 📤 Token transfer functionality using Solana Web3.js
• ✍️ Message signing with Ed25519 verification
• 🎨 Modern UI with Tailwind CSS and shadcn/ui components
• 🌐 Devnet support with SOL airdrop functionality

Architecture

graph TD
    A[App.jsx] --> B[WalletProvider]
    A --> C[ConnectionProvider]
    B --> D[RequestAirdrop]
    B --> E[Balance]
    B --> F[SendTokens]
    B --> G[SignMessage]
    
    D --> H[Solana Connection]
    E --> H
    F --> H
    G --> H

Loading

Component Interaction Flow

sequenceDiagram
    participant User
    participant Wallet
    participant Components
    participant Solana

    User->>Wallet: Connect Wallet
    Wallet->>Components: Update Connection State
    Components->>Solana: Establish RPC Connection
    
    alt Balance Check
        Components->>Solana: getBalance()
        Solana-->>Components: Return SOL Balance
    end

    alt Send Tokens
        User->>Components: Input Recipient & Amount
        Components->>Solana: Create Transaction
        Solana-->>Wallet: Request Signature
        Wallet-->>User: Confirm Transaction
        User->>Wallet: Approve
        Wallet->>Solana: Send Signed Transaction
    end

    alt Sign Message
        User->>Components: Input Message
        Components->>Wallet: Request Signature
        Wallet-->>User: Confirm Signing
        User->>Wallet: Approve
        Wallet->>Components: Return Signature
        Components->>Components: Verify with Ed25519
    end

Loading

Prerequisites

• Node.js 16.x or higher
• npm 7.x or higher
• A Solana wallet (Phantom, Solflare, etc.)

Installation

1. Clone the repository:

git clone https://github.com/yourusername/web3-adapter.git
cd web3-adapter

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

Project Structure

src/
├── components/           # Reusable UI components
│   ├── ui/              # shadcn/ui components
│   │   ├── button.jsx   # Custom button component
│   │   └── input.jsx    # Custom input component
│   └── Background.jsx   # Gradient background component
├── lib/                 # Utility functions
│   └── utils.js        # Tailwind class merging utilities
├── App.jsx             # Main application component with providers
├── Balance.jsx         # SOL balance tracking (10s refresh)
├── RequestAirdrop.jsx  # Devnet SOL airdrop functionality
├── SendTokens.jsx      # SOL transfer with web3.js
└── SignMessage.jsx     # Message signing with ed25519

Technical Implementation

Wallet Integration

<ConnectionProvider endpoint="https://api.devnet.solana.com">
  <WalletProvider wallets={[]} autoConnect>
    <WalletModalProvider>
      // Application components
    </WalletModalProvider>
  </WalletProvider>
</ConnectionProvider>

Balance Tracking Implementation

const { connection } = useConnection();
const wallet = useWallet();

useEffect(() => {
  const intervalId = setInterval(async () => {
    if (wallet.publicKey) {
      const balance = await connection.getBalance(wallet.publicKey);
      // Update UI with balance in SOL
    }
  }, 10000);
  return () => clearInterval(intervalId);
}, [wallet.publicKey]);

Best Practices

This project follows these coding best practices:

1. Component Structure

   • Small, focused components
   • Single responsibility principle
   • Clear separation of concerns

2. Code Organization

   • Modular file structure
   • Consistent naming conventions
   • Logical grouping of related files

3. State Management

   • Efficient use of React hooks
   • Proper state isolation
   • Controlled component patterns

4. Performance

   • Optimized re-renders
   • Proper dependency management
   • Efficient blockchain interactions

Contributing

1. Fork the repository
2. Create your 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.

Acknowledgments

• shadcn/ui
• Tailwind CSS

Author

Made with ❤️ by Vedant Anand

Connect with me

• GitHub: @VedantAnand17
• LinkedIn: Vedant Anand
• Twitter: @Vedantsx