tessl/npm-ant-design--web3

Efficient React components for building Web3 dApps with comprehensive wallet integration and blockchain UI components.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Payment Interface

Name: tessl/npm-ant-design--web3
Author: tessl

Payment panel component for handling cryptocurrency payments with multi-chain support, QR code generation, and wallet integration.

Capabilities

PayPanel

Comprehensive payment panel component providing cryptocurrency payment interface with chain selection, QR code generation, and wallet connectivity.

/**
 * Panel component for cryptocurrency payments with chain selection and QR codes
 * @param amount - Payment amount in token units
 * @param target - Payment targets by chain or function returning targets
 * @param supportedChains - List of supported blockchain networks
 * @param token - Payment token configuration
 * @param wallets - Available wallet options for payment
 * @param onFinish - Callback when payment is completed
 * @param children - Custom content to display in the panel
 */
const PayPanel: React.FC<React.PropsWithChildren<PayPanelProps>>;

interface PayPanelProps {
  amount: number | bigint;
  target: PayPanelTargetProps | (() => Promise<PayPanelTargetProps>);
  supportedChains: Array<{
    chain: Chain;
    extra?: React.ReactNode;
  }>;
  token: Token;
  wallets: WalletMetadata[];
  onFinish: () => void;
}

type PayPanelTargetProps = Record<string | number, string>;

interface WalletMetadata {
  name: string;
  remark: string;
  key?: React.Key;
  icon?: string | React.ReactNode;
  extensions?: false | WalletExtensionItem[];
  app?: false | { link: string };
  group?: string;
  universalProtocol?: { link: string };
  supportChainTypes?: ChainType[];
  transferQRCodeFormatter?: (params: Record<string, any>) => string;
  deeplink?: { urlTemplate: string };
}

interface WalletExtensionItem {
  key: string;
  browserIcon: string;
  browserName: string;
  link: string;
  description: string;
}

Usage Examples:

import { PayPanel } from "@ant-design/web3";

// Basic payment panel
<PayPanel 
  amount={BigInt("1000000000000000000")} // 1 ETH
  target={{
    1: "0x742d35Cc6634C0532925a3b8D71C69999f8A03F5", // Ethereum mainnet
    137: "0x742d35Cc6634C0532925a3b8D71C69999f8A03F5" // Polygon
  }}
  supportedChains={[
    {
      chain: {
        id: 1,
        name: "Ethereum",
        type: ChainType.EVM,
        icon: <EthereumIcon />
      }
    },
    {
      chain: {
        id: 137,
        name: "Polygon",
        type: ChainType.EVM,
        icon: <PolygonIcon />
      },
      extra: <span style={{ color: 'green' }}>Low fees</span>
    }
  ]}
  token={{
    name: "Ethereum",
    symbol: "ETH",
    icon: <EthIcon />,
    decimal: 18,
    availableChains: [
      { chain: { id: 1, name: "Ethereum" } },
      { chain: { id: 137, name: "Polygon" } }
    ]
  }}
  wallets={[
    {
      name: "MetaMask",
      remark: "Connect with MetaMask",
      icon: <MetaMaskIcon />,
      extensions: [{
        key: 'Chrome',
        browserIcon: 'chrome-icon',
        browserName: 'Chrome',
        link: 'https://chrome.google.com/webstore/detail/metamask',
        description: 'Install MetaMask for Chrome'
      }]
    }
  ]}
  onFinish={() => {
    console.log('Payment completed');
  }}
/>

// Payment panel with QR codes
<PayPanel 
  amount={500}
  target={{
    1: "0x742d35Cc6634C0532925a3b8D71C69999f8A03F5", // Ethereum mainnet
    137: "0x742d35Cc6634C0532925a3b8D71C69999f8A03F5" // Polygon
  }}
  supportedChains={supportedChains}
  token={usdcToken}
  wallets={availableWallets}
  onFinish={() => {
    // Handle payment completion
    router.push('/payment-success');
  }}
/>

// Dynamic payment targets
<PayPanel 
  amount={BigInt("2000000")} // 2 USDC (6 decimals)
  target={async () => {
    // Fetch payment addresses dynamically
    const response = await fetch('/api/payment-addresses');
    const addresses = await response.json();
    
    return {
      1: {
        address: addresses.ethereum,
        qrCode: `ethereum:${addresses.ethereum}?value=2000000`,
        extra: <span>Processing fee: 0.1 USDC</span>
      },
      137: {
        address: addresses.polygon,
        qrCode: `polygon:${addresses.polygon}?value=2000000`,
        extra: <span>No processing fee</span>
      }
    };
  }}
  supportedChains={supportedChains}
  token={usdcToken}
  wallets={wallets}
  onFinish={() => {
    console.log('Payment completed');
  }}
>
  <div style={{ padding: 16, borderTop: '1px solid #f0f0f0' }}>
    <h4>Payment Instructions</h4>
    <ul>
      <li>Select your preferred network</li>
      <li>Connect your wallet or scan QR code</li>
      <li>Confirm the transaction</li>
    </ul>
  </div>
</PayPanel>

// Payment with custom wallet configuration
<PayPanel 
  amount={BigInt("1000000000000000000")} // 1 ETH
  target={paymentTargets}
  supportedChains={chains}
  token={ethToken}
  wallets={[
    {
      name: "WalletConnect",
      remark: "Connect with any WalletConnect wallet",
      icon: <WalletConnectIcon />,
      universalProtocol: { 
        link: "wc:" 
      },
      transferQRCodeFormatter: (params) => 
        `${params.protocol}:${params.address}?value=${params.amount}`,
      supportChainTypes: [ChainType.EVM]
    },
    {
      name: "Coinbase Wallet",
      remark: "Connect with Coinbase Wallet",
      icon: <CoinbaseIcon />,
      app: { 
        link: "https://wallet.coinbase.com/" 
      },
      deeplink: {
        urlTemplate: "cbwallet://dapp?url=${url}"
      }
    }
  ]}
  onFinish={() => {
    // Redirect to success page
    window.location.href = '/success';
  }}
/>

Types

Payment Configuration Types

interface PayPanelTargetProps {
  [chainId: string | number]: PaymentTarget;
}

interface PaymentTarget {
  address: string;
  qrCode?: string | (() => Promise<string>);
  extra?: React.ReactNode;
}

interface SupportedChain {
  chain: Chain;
  extra?: React.ReactNode;
}

Chain Types for Payments

enum ChainType {
  EVM = 'EVM',
  SVM = 'SVM',
  Bitcoin = 'Bitcoin',
  Sui = 'Sui',
}

enum ChainIds {
  Mainnet = 1,
  Polygon = 137,
  BSC = 56,
  Arbitrum = 42_161,
  Optimism = 10,
  Avalanche = 43_114,
  Base = 8453,
  Scroll = 534_352,
}

QR Code Generation

PayPanel supports multiple QR code formats and generation methods:

Static QR Codes

// URI format for Ethereum
const qrCode = "ethereum:0x742d35Cc6634C0532925a3b8D71C69999f8A03F5?value=1000000000000000000";

// Custom format with parameters
const qrCode = "mycoin:0x742d35Cc6634C0532925a3b8D71C69999f8A03F5?amount=100&token=USDC";

Dynamic Target Generation

// Function that returns targets dynamically
const dynamicTarget = async (): Promise<PayPanelTargetProps> => {
  const response = await fetch('/api/get-payment-addresses');
  const data = await response.json();
  return {
    1: data.ethereum_address,
    137: data.polygon_address,
    56: data.bsc_address
  };
};

<PayPanel 
  amount={BigInt("1000000000000000000")}
  target={dynamicTarget}
  supportedChains={chains}
  token={token}
  wallets={wallets}
  onFinish={() => console.log('Payment completed')}
/>

Wallet-Specific QR Formatting

const wallets = [{
  name: "Custom Wallet",
  remark: "Custom wallet with specific QR format",
  transferQRCodeFormatter: (params) => {
    return `customwallet://pay?address=${params.address}&amount=${params.amount}&chain=${params.chainId}`;
  }
}];

Payment Flow Integration

PayPanel integrates with common payment flow patterns:

Transaction Monitoring

import { PayPanel } from "@ant-design/web3";

function PaymentPage() {
  const [paymentStatus, setPaymentStatus] = useState('pending');
  
  return (
    <PayPanel 
      amount={paymentAmount}
      target={paymentTargets}
      supportedChains={chains}
      token={selectedToken}
      wallets={wallets}
      onFinish={async () => {
        setPaymentStatus('processing');
        
        // Monitor transaction
        try {
          await monitorPayment(transactionHash);
          setPaymentStatus('confirmed');
        } catch (error) {
          setPaymentStatus('failed');
        }
      }}
    />
  );
}

Multi-Step Payment Process

function MultiStepPayment() {
  const [step, setStep] = useState(1);
  
  if (step === 1) {
    return <TokenSelection onNext={() => setStep(2)} />;
  }
  
  if (step === 2) {
    return (
      <PayPanel 
        amount={amount}
        target={targets}
        supportedChains={chains}
        token={selectedToken}
        wallets={wallets}
        onFinish={() => setStep(3)}
      />
    );
  }
  
  return <PaymentConfirmation />;
}