Multi-Chain Payment App

import { t402Client } from '@t402/core/client';
import { ExactEvmScheme } from '@t402/evm/exact/client';
import { ExactTonScheme } from '@t402/ton';
import { ExactTronScheme } from '@t402/tron';
import { ExactSvmScheme } from '@t402/svm';
 
// Register all available wallets
const client = new t402Client();
 
// EVM (if wallet connected)
if (evmWallet) {
  client.register('eip155:*', new ExactEvmScheme(evmSigner));
}
 
// TON (if wallet connected)
if (tonWallet) {
  client.register('ton:mainnet', new ExactTonScheme(tonSigner));
}
 
// TRON (if wallet connected)
if (tronWallet) {
  client.register('tron:mainnet', new ExactTronScheme(tronSigner));
}
 
// Solana (if wallet connected)
if (solanaWallet) {
  client.register('solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp', new ExactSvmScheme(svmSigner));
}

import { SelectPaymentRequirements } from '@t402/core/client';
 
// Custom selector: prefer user's connected wallet network
const selectPayment: SelectPaymentRequirements = (requirements, context) => {
  // Get user's preferred network (e.g., from connected wallet)
  const preferredNetwork = getUserPreferredNetwork();
 
  // Try to find matching requirement
  const preferred = requirements.find(r => r.network === preferredNetwork);
  if (preferred) return preferred;
 
  // Fallback to lowest fee network
  const sorted = requirements.sort((a, b) => {
    return estimateFee(a.network) - estimateFee(b.network);
  });
 
  return sorted[0];
};
 
const client = new t402Client({ selectPaymentRequirements: selectPayment });

import { useState } from 'react';
import { usePaymentRequired, PaymentButton } from '@t402/react';
import { getNetworkDisplayName, isEvmNetwork, isTonNetwork } from '@t402/react';
 
function MultiChainPayment({ paymentRequired }) {
  const [selectedNetwork, setSelectedNetwork] = useState(null);
 
  const requirements = paymentRequired.accepts;
 
  return (
    <div className="payment-modal">
      <h2>Choose Payment Network</h2>
 
      <div className="network-list">
        {requirements.map((req, i) => (
          <button
            key={i}
            className={`network-option ${selectedNetwork === i ? 'selected' : ''}`}
            onClick={() => setSelectedNetwork(i)}
          >
            <NetworkIcon network={req.network} />
            <span>{getNetworkDisplayName(req.network)}</span>
            <span className="price">{req.maxAmountRequired} USDT</span>
          </button>
        ))}
      </div>
 
      {selectedNetwork !== null && (
        <PaymentButton
          onClick={() => handlePayment(requirements[selectedNetwork])}
          size="lg"
        >
          Pay with {getNetworkDisplayName(requirements[selectedNetwork].network)}
        </PaymentButton>
      )}
    </div>
  );
}
 
function NetworkIcon({ network }) {
  if (isEvmNetwork(network)) return <EvmIcon />;
  if (isTonNetwork(network)) return <TonIcon />;
  // ... other networks
}

import { useState, useEffect } from 'react';
 
function useMultiWallet() {
  const [wallets, setWallets] = useState({
    evm: null,
    ton: null,
    tron: null,
    solana: null,
  });
 
  // Connect EVM wallet (MetaMask, etc.)
  const connectEvm = async () => {
    if (window.ethereum) {
      const accounts = await window.ethereum.request({
        method: 'eth_requestAccounts',
      });
      setWallets(w => ({ ...w, evm: accounts[0] }));
    }
  };
 
  // Connect TON wallet (Tonkeeper, etc.)
  const connectTon = async () => {
    // TON Connect implementation
  };
 
  // Connect TRON wallet (TronLink)
  const connectTron = async () => {
    if (window.tronWeb) {
      const address = window.tronWeb.defaultAddress.base58;
      setWallets(w => ({ ...w, tron: address }));
    }
  };
 
  // Connect Solana wallet (Phantom)
  const connectSolana = async () => {
    if (window.solana?.isPhantom) {
      const response = await window.solana.connect();
      setWallets(w => ({ ...w, solana: response.publicKey.toString() }));
    }
  };
 
  return {
    wallets,
    connectEvm,
    connectTon,
    connectTron,
    connectSolana,
    connectedNetworks: Object.entries(wallets)
      .filter(([_, v]) => v)
      .map(([k]) => k),
  };
}