Complete Simple Bridge Example

import React, { useState } from 'react';
import { useQuote, useTransaction } from '@silentswap/react';
import { useAccount, useWalletClient } from 'wagmi';
 
export function SimpleBridge() {
  const { address, connector, isConnected } = useAccount();
  const { data: walletClient } = useWalletClient();
  const [quote, setQuote] = useState<any>(null);
 
  // 1. Hook for fetching quotes
  const { getQuote, isLoading: isQuoteLoading } = useQuote({ address });
 
  // 2. Hook for executing transactions
  const { 
    executeTransaction, 
    isLoading: isTxLoading, 
    currentStep, 
    error: txError 
  } = useTransaction({
    address: address!,
    walletClient,
    connector,
  });
 
  const handleFetchQuote = async () => {
    const result = await getQuote(
      1, // Source chain ID (Ethereum)
      '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // Source token (USDC)
      '10000000', // Source amount (10 USDC in token units)
      43114, // Destination chain ID (Avalanche)
      '0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E', // Destination token (USDC.e)
      // Optional: recipientAddress (required for Solana destinations)
      // Optional: sourceAddress (for relay.link, must match source chain format)
    );
    setQuote(result);
  };
 
  const handleBridge = async () => {
    if (!quote) return;
    const status = await executeTransaction(quote);
    if (status) {
      alert('Bridge Initiated! Request ID: ' + status.requestId);
    }
  };
 
  if (!isConnected) return <p>Please connect your wallet.</p>;
 
  return (
    <div className="bridge-container">
      <h2>Simple Cross-Chain Bridge</h2>
      
      <button onClick={handleFetchQuote} disabled={isQuoteLoading || isTxLoading}>
        {isQuoteLoading ? 'Fetching Quote...' : '1. Get Quote'}
      </button>
 
      {quote && (
        <div className="quote-details">
          <p>Provider: {quote.provider}</p>
          <p>You will receive: {quote.outputAmount} USDC.e</p>
          
          <button onClick={handleBridge} disabled={isTxLoading}>
            {isTxLoading ? `Step: ${currentStep}` : '2. Execute Bridge'}
          </button>
        </div>
      )}
 
      {txError && <p className="error">{txError.message}</p>}
    </div>
  );
}