X0Pay React SDK

A React SDK for integrating X0Pay functionality into web applications. This SDK provides a complete solution for handling cross-chain token transfers with fee management.

Features

• Cross-chain transfers: Support for multiple blockchain networks
• Fee management: Support for both inner and outer fee types
• MetaMask integration: Seamless wallet connection and transaction signing
• Exchange rate handling: Automatic IDR to USD conversion
• Progress tracking: Step-by-step transaction flow
• Error handling: Comprehensive error management

Installation

npm install x0-react-sdk

Usage

Basic Usage

import React from 'react';
import { X0PayComponent } from 'x0-react-sdk';

function App() {
  const transactionParams = {
    merchantNumber: '12345',
    transferAmount: 150000, // 150,000 IDR
    feeAmount: 15000, // 15,000 IDR
    isInnerFee: false, // false for outer fee, true for inner fee
  };

  return (
    <X0PayComponent
      transactionParams={transactionParams}
      onSuccess={(txHash) => console.log('Success!', txHash)}
      onError={(err) => console.error('Error:', err.message)}
    />
  );
}

Fee Types

The SDK supports two types of fee structures:

Outer Fee (isInnerFee: false)

• The fee is added on top of the transfer amount
• Total amount = Transfer Amount + Fee Amount
• User pays the full transfer amount plus the fee

Example:

• Transfer Amount: 150,000 IDR
• Fee Amount: 15,000 IDR
• Total Amount: 165,000 IDR

Inner Fee (isInnerFee: true)

• The fee is deducted from the transfer amount
• Total amount = Transfer Amount (fee is included)
• User pays only the transfer amount, but receives (Transfer Amount - Fee Amount)

Example:

• Transfer Amount: 150,000 IDR
• Fee Amount: 15,000 IDR
• Total Amount: 150,000 IDR
• Amount received: 135,000 IDR (150,000 - 15,000)

Transaction Parameters

interface X0PayTransactionParams {
  merchantNumber: string;     // Merchant identifier
  transferAmount: number;     // Transfer amount in IDR
  feeAmount: number;          // Fee amount in IDR
  isInnerFee: boolean;        // Fee type (true = inner, false = outer)
  exchangeRate?: number;      // Optional exchange rate (USD/IDR)
}

Configuration

You can provide custom configuration for different networks and tokens:

const config = {
  erc20TokenAddress: '0x...',
  hypColAddress: '0x...',
  recipient: '0x...',
  hookAddress: '0x...',
};

<X0PayComponent
  config={config}
  transactionParams={transactionParams}
  onSuccess={onSuccess}
  onError={onError}
/>

Supported Networks

The SDK supports multiple blockchain networks including:

• Polygon
• Mumbai (Polygon Testnet)
• Arbitrum
• Optimism
• Base
• And more...

Exchange Rate

The SDK automatically fetches the current USD/IDR exchange rate from a reliable API. You can also provide a custom exchange rate in the transaction parameters.

Error Handling

The SDK provides comprehensive error handling for:

• Network connection issues
• Insufficient balance
• Transaction failures
• Exchange rate errors
• MetaMask connection problems

Styling

The SDK includes default styling that can be customized using CSS classes:

• .x0pay-container
• .x0pay-button
• .x0pay-error
• .x0pay-transaction-details

Development

To run the SDK in development mode:

cd X0-sdk
npm install
npm run dev

Testing

The test app demonstrates both inner and outer fee functionality:

cd test-app
npm install
npm start

License

MIT License

Supported Token Addresses

Arbitrum One

• USDC: 0xaf88d065e77c8cC2239327C5EDb3A432268e5831
  • Hyperlane Collateral: 0x922D6956C99E12DFeB3224DEA977D0939758A1Fe
• USDT: 0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9
  • Hyperlane Collateral: 0x1234567890123456789012345678901234567890

Polygon

• USDC: 0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174
  • Hyperlane Collateral: 0x922D6956C99E12DFeB3224DEA977D0939758A1Fe
• USDT: 0xc2132D05D31c914a87C6611C10748AEb04B58e8F
  • Hyperlane Collateral: 0xabcdef1234567890abcdef1234567890abcdef12