Skip to content

React Integration Overview

SilentSwap provides a comprehensive React integration with hooks for Silent Swap (private/hidden swaps) functionality.

Full Integration with SilentSwapContext

The recommended way to integrate SilentSwap is using the SilentSwapProvider. This consolidated context handles all aspects of the protocol:

  • Authentication - Automatic SIWE (Sign-In with Ethereum) management
  • Wallet Management - Generation and caching of facilitator wallets
  • Quoting - Automated quote fetching and validation
  • Order Tracking - Real-time monitoring of swap status
  • Balances & Prices - Global access to user balances and asset prices

Installation

pnpm add @silentswap/react @silentswap/sdk

Quick Start

Full Integration Example

SilentSwap provides a consolidated SilentSwapProvider that handles authentication, wallet management, quoting, and order tracking in one place.

import { SilentSwapProvider, useSilentSwap, useSwap } from '@silentswap/react';
import { createSilentSwapClient, ENVIRONMENT } from '@silentswap/sdk';
import { useAccount } from 'wagmi';
 
// 1. Setup the provider at the root of your app
import { useAccount, useWalletClient } from 'wagmi';
import { useUserAddress, useSolanaAdapter } from '@/hooks'; // Your custom hooks
 
// Initialize the client
const client = createSilentSwapClient({ environment: ENVIRONMENT.STAGING });
 
function AppProvider({ children }) {
  const { isConnected, connector } = useAccount();
  const { data: walletClient } = useWalletClient();
  const { evmAddress, solAddress } = useUserAddress();
  const { solanaConnector, solanaConnectionAdapter } = useSolanaAdapter();
  
  return (
    <SilentSwapProvider 
      client={client} 
      environment={ENVIRONMENT.STAGING}
      evmAddress={evmAddress}
      solAddress={solAddress}
      isConnected={isConnected}
      connector={connector}
      walletClient={walletClient}
      solanaConnector={solanaConnector}
      solanaConnection={solanaConnectionAdapter}
    >
      {children}
    </SilentSwapProvider>
  );
}
 
// 2. Use the hook in your components
function SwapForm() {
  const { executeSwap, swapLoading, orderComplete } = useSilentSwap();
  const { tokenIn, inputAmount, destinations, splits } = useSwap();
  const { evmAddress } = useUserAddress();
 
  const handleSwap = async () => {
    if (!tokenIn || !inputAmount || !evmAddress) return;
    
    const result = await executeSwap({
      sourceAsset: tokenIn.caip19,
      sourceAmount: inputAmount,
      destinations: destinations,
      splits: splits,
      senderContactId: `caip10:eip155:1:${evmAddress}`, // Format: caip10:chainId:address
      integratorId: process.env.NEXT_PUBLIC_INTEGRATOR_ID, // Optional: for tracking
    });
    console.log('Swap initiated:', result);
  };
 
  return (
    <div>
      <button onClick={handleSwap} disabled={swapLoading}>
        {swapLoading ? 'Swapping...' : 'Execute Swap'}
      </button>
      {orderComplete && <p>Swap Successful!</p>}
    </div>
  );
}

Next Steps