@arbitrum-pay/react

Beautiful React components for Arbitrum Pay - Live stats dashboards, payment buttons, and enterprise UI components.

🚀 Quick Start

npm install @arbitrum-pay/react @arbitrum-pay/core

import { ArbitrumPayButton, LiveStats, ArbitrumPayLogo } from '@arbitrum-pay/react';

function App() {
  return (
    <div>
      {/* Payment button with Arbitrum branding */}
      <ArbitrumPayButton
        receiver="0x742d35cc6634c0532925a3b8d4b9089d4"
        amount="0.1"
        label="Buy Coffee ☕"
        onSuccess={(txHash) => console.log('Payment successful!', txHash)}
      />

      {/* Live ecosystem stats */}
      <LiveStats 
        updateInterval={30000}
        showRecentTransactions={true}
        showTopTokens={true}
      />

      {/* Official Arbitrum + Pay branding */}
      <ArbitrumPayLogo size="lg" variant="horizontal" />
    </div>
  );
}

✨ Components

💳 ArbitrumPayButton

A beautiful payment button with built-in wallet connection and transaction handling:

import { ArbitrumPayButton } from '@arbitrum-pay/react';

<ArbitrumPayButton
  receiver="0x742d35cc6634c0532925a3b8d4b9089d4"
  amount="0.1"
  token="0xA0b86a33E6441b33Bf93C7aa3e2E4E75b9f7B5B" // USDC
  chainId={42161}
  label="Buy Premium Plan"
  className="w-full"
  onSuccess={(txHash) => {
    console.log('Payment completed:', txHash);
    window.location.href = '/success';
  }}
  onError={(error) => {
    console.error('Payment failed:', error);
    alert('Payment failed. Please try again.');
  }}
/>

Props:

• receiver: Recipient wallet address
• amount: Payment amount (in token units)
• token?: Token contract address (defaults to ETH)
• chainId?: Arbitrum chain ID (defaults to 42161)
• label?: Button text
• className?: CSS classes
• onSuccess?: Success callback with transaction hash
• onError?: Error callback
• disabled?: Disable the button

📊 LiveStats

Real-time ecosystem dashboard showing transaction volume, network stats, and recent activity:

import { LiveStats } from '@arbitrum-pay/react';

<LiveStats
  updateInterval={30000}
  showRecentTransactions={true}
  showTopTokens={true}
  className="my-8"
/>

Props:

• updateInterval?: Update frequency in milliseconds (default: 30000)
• showRecentTransactions?: Show recent activity panel (default: true)
• showTopTokens?: Show top tokens panel (default: true)
• className?: CSS classes

Features:

• 📈 Total volume and transaction count
• ⚡ 24-hour activity metrics
• ✅ Success rate and confirmation times
• 💰 Average gas costs
• 🏪 Active integrations and merchants
• 🎯 Recent transactions with real-time updates
• 🔥 Top tokens by volume

🎨 ArbitrumPayLogo

Official Arbitrum + Pay branding component with multiple variants:

import { ArbitrumPayLogo } from '@arbitrum-pay/react';

{/* Horizontal layout with logo + text */}
<ArbitrumPayLogo size="lg" variant="horizontal" />

{/* Stacked layout */}
<ArbitrumPayLogo size="md" variant="stacked" />

{/* Icon only */}
<ArbitrumPayLogo size="sm" variant="icon" />

Props:

• size: 'sm' | 'md' | 'lg' | 'xl'
• variant: 'horizontal' | 'stacked' | 'icon'
• theme?: 'light' | 'dark' | 'auto'
• className?: CSS classes

🏷️ PoweredBy

Attribution component for showing "Powered by Arbitrum Pay":

import { PoweredBy } from '@arbitrum-pay/react';

<PoweredBy 
  size="sm" 
  position="bottom-right"
  className="fixed"
/>

Props:

• size?: 'sm' | 'md'
• position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
• className?: CSS classes

🎯 Hooks

useArbitrumPay

Main hook for payment functionality:

import { useArbitrumPay } from '@arbitrum-pay/react';

function PaymentComponent() {
  const { 
    pay, 
    isLoading, 
    error, 
    txHash,
    isConnected,
    connect 
  } = useArbitrumPay();

  const handlePayment = async () => {
    try {
      const hash = await pay({
        receiver: '0x742d35cc6634c0532925a3b8d4b9089d4',
        amount: '0.1',
        chainId: 42161
      });
      console.log('Payment successful:', hash);
    } catch (err) {
      console.error('Payment failed:', err);
    }
  };

  return (
    <div>
      {!isConnected ? (
        <button onClick={connect}>Connect Wallet</button>
      ) : (
        <button onClick={handlePayment} disabled={isLoading}>
          {isLoading ? 'Processing...' : 'Pay Now'}
        </button>
      )}
      {error && <p>Error: {error.message}</p>}
      {txHash && <p>Transaction: {txHash}</p>}
    </div>
  );
}

usePaymentStatus

Track payment status and confirmations:

import { usePaymentStatus } from '@arbitrum-pay/react';

function PaymentTracker({ txHash }: { txHash: string }) {
  const { status, confirmations, isConfirmed } = usePaymentStatus(txHash);

  return (
    <div>
      <p>Status: {status}</p>
      <p>Confirmations: {confirmations}/1</p>
      {isConfirmed && <p>✅ Payment confirmed!</p>}
    </div>
  );
}

useWalletConnection

Manage wallet connection state:

import { useWalletConnection } from '@arbitrum-pay/react';

function WalletInfo() {
  const { 
    address, 
    chainId, 
    isConnected, 
    connect, 
    disconnect,
    switchChain 
  } = useWalletConnection();

  return (
    <div>
      {isConnected ? (
        <div>
          <p>Address: {address}</p>
          <p>Chain: {chainId}</p>
          <button onClick={disconnect}>Disconnect</button>
          {chainId !== 42161 && (
            <button onClick={() => switchChain(42161)}>
              Switch to Arbitrum
            </button>
          )}
        </div>
      ) : (
        <button onClick={connect}>Connect Wallet</button>
      )}
    </div>
  );
}

🎨 Styling

Tailwind CSS Support

All components are built with Tailwind CSS and support custom styling:

<ArbitrumPayButton 
  className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200"
  receiver="0x742d35cc6634c0532925a3b8d4b9089d4"
  amount="0.1"
  label="Premium Upgrade 🚀"
/>

Custom Themes

Supports light/dark mode and custom branding:

<div className="dark">
  <ArbitrumPayLogo theme="dark" />
  <LiveStats className="bg-gray-900 text-white" />
</div>

🔧 Setup & Configuration

Provider Setup

Wrap your app with the ArbitrumPayProvider:

import { ArbitrumPayProvider } from '@arbitrum-pay/react';

function App() {
  return (
    <ArbitrumPayProvider
      chainId={42161}
      rpcUrl="https://arb1.arbitrum.io/rpc"
      walletConnectProjectId="your-project-id"
    >
      <YourApp />
    </ArbitrumPayProvider>
  );
}

Environment Variables

# .env.local
NEXT_PUBLIC_ARBITRUM_RPC_URL=https://arb1.arbitrum.io/rpc
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your-project-id

📱 Mobile Support

Optimized for mobile wallets and responsive design:

<ArbitrumPayButton
  receiver="0x742d35cc6634c0532925a3b8d4b9089d4"
  amount="0.1"
  className="w-full sm:w-auto" // Responsive width
  label="Pay with Mobile Wallet"
/>

🔗 Integration Examples

E-commerce Checkout

import { ArbitrumPayButton, usePaymentStatus } from '@arbitrum-pay/react';

function CheckoutPage({ order }: { order: Order }) {
  const [txHash, setTxHash] = useState<string>();
  const { isConfirmed } = usePaymentStatus(txHash);

  useEffect(() => {
    if (isConfirmed) {
      // Redirect to success page
      window.location.href = `/order/${order.id}/success`;
    }
  }, [isConfirmed, order.id]);

  return (
    <div className="max-w-md mx-auto p-6">
      <h1>Complete Your Order</h1>
      <div className="border rounded p-4 mb-4">
        <p>Total: {order.total} ETH</p>
        <p>Items: {order.items.length}</p>
      </div>
      
      <ArbitrumPayButton
        receiver={process.env.NEXT_PUBLIC_MERCHANT_WALLET!}
        amount={order.total.toString()}
        label={`Pay ${order.total} ETH`}
        className="w-full"
        onSuccess={setTxHash}
        onError={(error) => alert(`Payment failed: ${error.message}`)}
      />
      
      {txHash && (
        <div className="mt-4 p-4 bg-blue-50 rounded">
          <p>Payment submitted! Transaction: {txHash}</p>
          <p>Waiting for confirmation...</p>
        </div>
      )}
    </div>
  );
}

Subscription Dashboard

import { LiveStats, ArbitrumPayLogo } from '@arbitrum-pay/react';

function AdminDashboard() {
  return (
    <div className="min-h-screen bg-gray-50">
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <ArbitrumPayLogo size="lg" variant="horizontal" />
        </div>
      </header>
      
      <main className="max-w-7xl mx-auto py-6 px-4">
        <h1 className="text-3xl font-bold mb-8">Payment Analytics</h1>
        <LiveStats 
          updateInterval={15000}
          showRecentTransactions={true}
          showTopTokens={true}
        />
      </main>
    </div>
  );
}

🔒 Security Features

• Automatic wallet validation
• Network verification
• Transaction confirmation tracking
• Error handling and recovery
• Rate limiting protection

📚 TypeScript Support

Fully typed with comprehensive TypeScript definitions:

interface ArbitrumPayButtonProps {
  receiver: string;
  amount: string;
  token?: string;
  chainId?: number;
  label?: string;
  className?: string;
  onSuccess?: (txHash: string) => void;
  onError?: (error: Error) => void;
  disabled?: boolean;
}

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT © Arbitrum Pay Team

🔗 Links

• Homepage
• Documentation
• GitHub
• Discord

Built with ❤️ for the Arbitrum ecosystem