@delta-trade/utils

A comprehensive utility library for DeltaTrade Web3 applications, providing essential tools for Solana wallet integration, common utilities, and React hooks.

Features

• 🔗 Solana wallet adapter components and hooks
• 📅 Day.js utilities for date/time handling
• 🌐 HTTP request utilities with error handling
• 🔢 Big number utilities for precise calculations
• 📱 Telegram integration utilities
• ⚛️ React hooks for mobile detection and common patterns
• 🎨 Pre-built wallet connection UI components

Installation

pnpm add @delta-trade/utils

Usage

Solana Wallet Integration

// Core wallet provider and hooks
import SolanaWalletProvider from '@delta-trade/utils/solana/wallet-adapter/provider';
import useSolanaWallet from '@delta-trade/utils/solana/wallet-adapter/provider/useSolanaWallet';

// Wallet adapters
import { OkxWalletAdapter, OkxWalletUIAdapter } from '@delta-trade/utils/solana/wallet-adapter/okx';
import { WalletConnectWalletAdapter } from '@delta-trade/utils/solana/wallet-adapter/walletconnect';

// Wallet UI components
import {
  WalletMultiButton,
  WalletConnectButton,
  WalletModal,
} from '@delta-trade/utils/solana/wallet-adapter/modal';

// Utility functions
import { getDeviceType } from '@delta-trade/utils/common';
import { useAsyncMemo } from '@delta-trade/utils/useHooks';

Complete Wallet Provider Setup

'use client';
import React, { createContext, useMemo } from 'react';
import { type WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import SolanaWalletProvider from '@delta-trade/utils/solana/wallet-adapter/provider';
import useSolanaWallet from '@delta-trade/utils/solana/wallet-adapter/provider/useSolanaWallet';
import { getDeviceType } from '@delta-trade/utils/common';
import { useAsyncMemo } from '@delta-trade/utils/useHooks';

// Create context for wallet hooks
export const SolanaWalletContext = createContext({} as ReturnType<typeof useSolanaWallet>);

const network = process.env.NEXT_PUBLIC_NETWORK === 'mainnet' ? 'mainnet-beta' : 'devnet';

export function MyAppWalletProvider({ children }: { children: React.ReactNode }) {
  const endpoint = useMemo(() => 'https://api.mainnet-beta.solana.com', []); // Your RPC endpoint
  const wallets = useAsyncMemo(async () => initWallets(), []);

  return (
    <SolanaWalletProvider endpoint={endpoint} wallets={wallets || []}>
      <SolanaHooksProvider>{children}</SolanaHooksProvider>
    </SolanaWalletProvider>
  );
}

function SolanaHooksProvider({ children }: { children: React.ReactNode }) {
  const solanaHooks = useSolanaWallet();

  return (
    <SolanaWalletContext.Provider value={solanaHooks}>
      {children}
    </SolanaWalletContext.Provider>
  );
}

// Initialize wallets based on device type
async function initWallets() {
  if (typeof window === 'undefined') {
    return [];
  }

  const { mobile } = getDeviceType();

  // WalletConnect configuration
  const WalletConnectWalletAdapter = await import(
    '@delta-trade/utils/solana/wallet-adapter/walletconnect'
  ).then((mod) => mod.WalletConnectWalletAdapter);

  const walletConnectParams = {
    network: network as WalletAdapterNetwork,
    options: {
      projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
      metadata: {
        name: 'Your App Name',
        description: 'Your App Description',
        url: 'https://yourapp.com',
        icons: ['https://yourapp.com/icon.png'],
      },
    },
  };

  if (mobile) {
    // Mobile wallets
    const { OkxWalletUIAdapter } = await import('@delta-trade/utils/solana/wallet-adapter/okx');
    return [
      new OkxWalletUIAdapter(),
      new WalletConnectWalletAdapter(walletConnectParams),
    ];
  } else {
    // Desktop wallets
    const { CoinbaseWalletAdapter, PhantomWalletAdapter, SolflareWalletAdapter } = await import(
      '@solana/wallet-adapter-wallets'
    );
    const { OkxWalletAdapter } = await import('@delta-trade/utils/solana/wallet-adapter/okx');

    return [
      new OkxWalletAdapter(),
      new PhantomWalletAdapter(),
      new CoinbaseWalletAdapter(),
      new SolflareWalletAdapter(),
      new WalletConnectWalletAdapter(walletConnectParams),
    ];
  }
}

Using Wallet Hooks

import { useContext } from 'react';
import { SolanaWalletContext } from './MyAppWalletProvider';

function WalletComponent() {
  const {
    wallet,
    publicKey,
    connected,
    connecting,
    connect,
    disconnect,
    sendTransaction,
    signTransaction,
    signAllTransactions,
    signMessage,
  } = useContext(SolanaWalletContext);

  const handleConnect = async () => {
    try {
      await connect();
    } catch (error) {
      console.error('Failed to connect:', error);
    }
  };

  const handleDisconnect = async () => {
    try {
      await disconnect();
    } catch (error) {
      console.error('Failed to disconnect:', error);
    }
  };

  return (
    <div>
      {connected ? (
        <div>
          <p>Connected: {publicKey?.toString()}</p>
          <button onClick={handleDisconnect}>Disconnect</button>
        </div>
      ) : (
        <button onClick={handleConnect} disabled={connecting}>
          {connecting ? 'Connecting...' : 'Connect Wallet'}
        </button>
      )}
    </div>
  );
}

App Root Setup

import { MyAppWalletProvider } from './providers/MyAppWalletProvider';

function App() {
  return (
    <MyAppWalletProvider>
      {/* Your app content */}
    </MyAppWalletProvider>
  );
}

API Reference

Core Modules

• dayjs: Date/time utilities built on Day.js
• common: General utility functions
• request: HTTP client with error handling
• big: Big number operations for precise calculations
• tg: Telegram Web App integration utilities
• useHooks: React hooks for common patterns

Solana Wallet Modules

• solana/wallet-adapter/provider: Wallet provider components
• solana/wallet-adapter/modal: Pre-built wallet UI components
• solana/wallet-adapter/okx: OKX wallet integration
• solana/wallet-adapter/walletconnect: WalletConnect integration

Peer Dependencies

This package requires the following peer dependencies:

{
  "@reown/appkit": "1.7.6",
  "@solana/web3.js": "^1.95.5",
  "react": "*",
  "react-dom": "*"
}

TypeScript Support

This package includes full TypeScript definitions and is built with TypeScript for better development experience.

Contributing

This package is part of the DeltaTrade monorepo. Please refer to the main repository for contribution guidelines.

License

MIT

Support

For issues and questions, please visit our GitHub repository.