Skip to content

React Integration Overview

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

Two Swap Types

Simple Bridge

Simple Bridge is a straightforward cross-chain asset bridge that works without authentication. It's perfect for:

  • Quick asset transfers between chains
  • Public, transparent transactions
  • Simple integration without user authentication
Key Hooks:
  • useQuote - Get quotes from multiple bridge providers
  • useTransaction - Execute bridge transactions

Silent Swap (Private)

Silent Swap enables private, hidden cross-chain swaps with enhanced privacy features. It requires:

  • User authentication via SIWE (Sign-In with Ethereum)
  • Wallet generation for facilitator accounts
  • Quote and order management
Key Hooks:
  • useSilentClient - Initialize the SilentSwap client
  • useAuth - Handle SIWE authentication
  • useWallet - Generate and manage facilitator wallets
  • useSilentQuote - Get quotes and execute private swaps
  • useSilentOrders - Manage orders and quotes (lower-level API)

Installation

pnpm add @silentswap/react @silentswap/sdk

Quick Start

Simple Bridge Example

import { useQuote, useTransaction } from '@silentswap/react';
import { useAccount, useWalletClient } from 'wagmi';
 
function SimpleBridge() {
  const { address } = useAccount();
  const { data: walletClient } = useWalletClient();
  
  const { getQuote } = useQuote({ address });
  const { executeTransaction } = useTransaction({
    address: address!,
    walletClient,
  });
 
  const handleBridge = async () => {
    const quote = await getQuote(
      1, // Ethereum
      '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC
      '1000000', // 1 USDC
      43114, // Avalanche
      '0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E' // USDC.e
    );
    
    if (quote) {
      await executeTransaction(quote);
    }
  };
 
  return <button onClick={handleBridge}>Bridge</button>;
}

Silent Swap Example

import { 
  useSilentClient, 
  useAuth, 
  useWallet, 
  useSilentQuote 
} from '@silentswap/react';
import { useAccount, useWalletClient } from 'wagmi';
 
function SilentSwap() {
  const { address } = useAccount();
  const { data: walletClient } = useWalletClient();
  
  const { client } = useSilentClient({ config: { /* ... */ } });
  const { auth, signIn, isAuthenticated } = useAuth({
    client,
    address: address!,
    walletClient,
    autoAuthenticate: true,
  });
  const { wallet, generateWallet } = useWallet({
    address: address!,
    auth,
    walletClient,
  });
  const { getQuote, executeSwap } = useSilentQuote({
    client,
    address: address!,
    walletClient,
    facilitatorGroup: wallet?.accounts[0]?.group(),
  });
 
  // ... swap logic
}

Live Examples & Playbooks

Try out the SilentSwap SDK with our interactive examples and demos:

🎮 Interactive Demo Apps

SilentSwap SDK React Playbook - Interactive demo application featuring:

  • Simple Bridge Form - Try out transparent cross-chain swaps without authentication
  • Silent Swap Form - Experience private swaps with full authentication flow
  • Complete UI Components - See all hooks in action with real wallet integration
  • Multi-Output Swaps - Test splitting one input across multiple outputs
  • Live Transaction Execution - Execute real swaps on testnet/mainnet

Perfect for understanding how to integrate SilentSwap into your application.

📚 Storybook Documentation

SilentSwap SDK Storybook - Comprehensive component library and examples:

  • Component Showcase - Browse all UI components and their variations
  • Hook Examples - Interactive examples of each React hook
  • Code Snippets - Copy-paste ready code examples
  • API Documentation - Detailed API reference for all components
  • Visual Testing - See components in different states and configurations

Great for exploring component APIs and finding the right component for your use case.

Framework Support

SilentSwap provides integrations for multiple frameworks:

  • React - Full-featured hooks for both Simple Bridge and Silent Swap (this section)
  • Vue 3 - Composables for Silent Swap operations (Vue Integration)

Next Steps