@sodax/wallet-sdk

A comprehensive wallet SDK 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) ✅
- Sui ✅
- Solana ✅
- Stellar ✅
- Injective ✅
- ICON ✅

Installation

# Using npm
npm install @sodax/wallet-sdk

# Using yarn
yarn add @sodax/wallet-sdk

# Using pnpm
pnpm add @sodax/wallet-sdk

Peer Dependencies

This package requires the following peer dependencies:

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

Quick Start

import { XWagmiProviders, useXConnectors, useXConnect, useXAccount } from '@sodax/wallet-sdk';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import {
  ARBITRUM_MAINNET_CHAIN_ID,
  AVALANCHE_MAINNET_CHAIN_ID,
  BASE_MAINNET_CHAIN_ID,
  BSC_MAINNET_CHAIN_ID,
  OPTIMISM_MAINNET_CHAIN_ID,
  POLYGON_MAINNET_CHAIN_ID,
  SONIC_MAINNET_CHAIN_ID,
} from '@sodax/types';

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

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <XWagmiProviders
        config={{
          EVM: {
            chains: [
              ARBITRUM_MAINNET_CHAIN_ID,
              AVALANCHE_MAINNET_CHAIN_ID,
              BASE_MAINNET_CHAIN_ID,
              BSC_MAINNET_CHAIN_ID,
              OPTIMISM_MAINNET_CHAIN_ID,
              POLYGON_MAINNET_CHAIN_ID,
              SONIC_MAINNET_CHAIN_ID,
            ],
          },
          SUI: {
            isMainnet: true,
          },
          SOLANA: {
            endpoint: 'https://your-rpc-endpoint',
          },
          ICON: {},
          INJECTIVE: {},
          STELLAR: {},
        }}
      >
        <WalletConnect />
      </XWagmiProviders>
    </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:

Setting up the required providers (QueryClientProvider and XWagmiProviders)
Using useXConnectors to get available wallet connectors
Using useXConnect to handle wallet connections
Using useXAccount to display the connected wallet address
A basic UI to display and connect to available wallets

Requirements

Node.js >= 18.0.0
React >= 19
TypeScript

API Reference

Components

XWagmiProviders - 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

PreviousBackend API Next@sodax/dapp-kit

Last updated 2 months ago