@sodax/wallet-sdk-react

A comprehensive React Wallet SDK tailored for the Sodax ecosystem that provides unified wallet connectivity across multiple blockchain networks.

Features

• Seamless wallet connectivity for all supported wallets in the Sodax network

  • EVM Wallets: All browser extensions that support EIP-6963 (Hana Wallet, MetaMask, Phantom, etc.) ✅

  • Sui Wallets: All browser extension that @mysten/dapp-kit supports (Hana, Sui Wallet, Suiet, etc.) ✅

  • Solana Wallets: ✅

  • Stellar Wallets: ✅

  • Injective Wallets: ✅

  • ICON Wallets: ✅ (Hana Wallet and other ICON-compatible extensions)

• Address and connection state management

  • EVM (Arbitrum, Avalanche, Base, BSC, Optimism, Polygon, Sonic, HyperEVM, LightLink) ✅

  • Sui ✅

  • Solana ✅

  • Stellar ✅

  • Injective ✅

  • ICON ✅

Installation

# Using npm
npm install @sodax/wallet-sdk-react

# Using yarn
yarn add @sodax/wallet-sdk-react

# Using pnpm
pnpm add @sodax/wallet-sdk-react

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": ">=19",
  "@tanstack/react-query": "latest"
}

Quick Start

import { SodaxWalletProvider, useXConnectors, useXConnect, useXAccount } from '@sodax/wallet-sdk-react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import type { RpcConfig } from '@sodax/types';

// Create a QueryClient instance
const queryClient = new QueryClient();

const rpcConfig: RpcConfig = {
  // EVM chains
  sonic: 'https://rpc.soniclabs.com',
  '0xa86a.avax': 'https://api.avax.network/ext/bc/C/rpc',
  '0xa4b1.arbitrum': 'https://arb1.arbitrum.io/rpc',
  '0x2105.base': 'https://mainnet.base.org',
  '0x38.bsc': 'https://bsc-dataseed1.binance.org',
  '0xa.optimism': 'https://mainnet.optimism.io',
  '0x89.polygon': 'https://polygon-rpc.com',
  
  // Other chains
  '0x1.icon': 'https://ctz.solidwallet.io/api/v3',
  solana: 'https://solana-mainnet.g.alchemy.com/v2/your-api-key',
  sui: 'https://fullnode.mainnet.sui.io',
  'injective-1': 'https://sentry.tm.injective.network:26657',
};

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <SodaxWalletProvider rpcConfig={rpcConfig}>
        <WalletConnect />
      </SodaxWalletProvider>
    </QueryClientProvider>
  );
}

function WalletConnect() {
  // Get available connectors for EVM chain
  const connectors = useXConnectors('EVM');
  
  // Get connect mutation
  const { mutateAsync: connect } = useXConnect();

  // Get connected account info
  const account = useXAccount('EVM');

  return (
    <div className="space-y-4">
      {/* Display connected wallet address if connected */}
      {account?.address && (
        <div className="p-4 bg-gray-100 rounded-lg">
          <p className="text-sm text-gray-600">Connected Wallet:</p>
          <p className="font-mono">{account.address}</p>
        </div>
      )}

      {/* Display available connectors */}
      <div className="space-y-2">
        {connectors.map((connector) => (
          <button
            key={connector.id}
            onClick={() => connect(connector)}
            className="flex items-center gap-2 p-2 border rounded-lg hover:bg-gray-50"
          >
            <img 
              src={connector.icon} 
              alt={connector.name} 
              width={24} 
              height={24} 
              className="rounded-md" 
            />
            <span>Connect {connector.name}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

This example demonstrates:

1. Setting up the required providers (QueryClientProvider and SodaxWalletProvider)

2. Using useXConnectors to get available wallet connectors

3. Using useXConnect to handle wallet connections

4. Using useXAccount to display the connected wallet address

5. A basic UI to display and connect to available wallets

Requirements

• Node.js >= 18.0.0

• React >= 19

• TypeScript

API Reference

Components

• SodaxWalletProvider - Main provider component for wallet connectivity

Hooks

Core Wallet Hooks

• useXConnectors - Get available wallet connectors

• useXConnect - Connect to a wallet

• useXAccount - Get account information

• useXDisconnect - Disconnect from a wallet

Chain-Specific Hooks

• useEvmSwitchChain - Switch between EVM chains

Balance Hooks

• useXBalances - Fetch token balances

Service Hooks

• useXService - Access chain-specific service

Types

Core Types

• XAccount - Wallet account type

• XConnection - Wallet connection type

• XConnector - Wallet connector type

• XToken - Cross-chain token type

Classes

XConnector

• XConnector - Base class for wallet connectors

• EvmXConnector - EVM wallet connector

• SolanaXConnector - Solana wallet connector

• SuiXConnector - Sui wallet connector

• StellarXConnector - Stellar wallet connector

• InjectiveMetamaskXConnector - Injective MetaMask connector

• InjectiveKelprXConnector - Injective Keplr connector

• IconXConnector - ICON wallet connector

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development

# Install dependencies
pnpm install

# Build the package
pnpm build      

# Run in development mode
pnpm dev

# Run type checking
pnpm checkTs

# Format code
pnpm pretty

# Lint code
pnpm lint

License

MIT

Support

• GitHub Issues

• Discord Community