Features

The widget supports three types of payment operations with comprehensive support for wallets and recipient management.

Transaction Types

Swap (Cross-Chain Token Exchange)

Exchange tokens across different blockchain networks.

1

User selects source token and chain (e.g., USDC on Ethereum)

2

User selects destination token and chain (e.g., USDT on Polygon)

3

User enters amount

4

Widget generates quote

5

User connects wallet and confirms transaction

6

Widget executes cross-chain swap

Supported:

• Same-chain swaps (e.g., ETH → USDC on Ethereum)

• Cross-chain swaps (e.g., USDC on Ethereum → USDT on Polygon)

• Native token swaps (e.g., ETH → MATIC)

---

Off-Ramp (Crypto to Fiat)

Convert cryptocurrency to fiat currency (currently BRL via PIX).

1

User selects source crypto (e.g., USDC on Polygon)

2

User enters amount in crypto or BRL

3

User enters PIX key or selects saved recipient

4

Widget generates quote with fees and exchange rate

5

User confirms and executes transaction

6

Fiat sent to recipient's bank account via PIX

Supported Fiat:

• BRL (Brazilian Real) via PIX

PIX Key Types:

• CPF (Individual Tax ID)

• CNPJ (Business Tax ID)

• Email

• Phone

• Random Key

---

On-Ramp (Fiat to Crypto)

Convert fiat currency to cryptocurrency (currently BRL → BRZ).

1

User selects destination crypto and chain

2

User enters amount in BRL or BRZ

3

Widget generates quote with payment details

4

User receives PIX payment instructions

5

User makes PIX payment from their bank app

6

Crypto sent to user's wallet after payment confirmation

Features:

• Real-time PIX payment detection

• QR code for easy payment

• Copy-paste PIX payment string

• Transaction status tracking

---

Wallet Connection

The widget integrates with WalletConnect/Reown AppKit for seamless wallet connections.

Supported Wallets:

• MetaMask

• WalletConnect compatible wallets

• Coinbase Wallet

• Rainbow Wallet

• Trust Wallet

• And more...

Features:

• One-click wallet connection

• Multi-chain support (automatically switch networks)

• Account management

• Transaction history

• Wallet disconnect

---

Recipient Management

Save and manage payment recipients for faster transactions.

Features:

• Crypto Recipients: Save wallet addresses with labels

• Fiat Recipients: Save PIX keys with labels

• Local Storage: Recipients persisted in browser

• Quick Selection: Choose from saved recipients

• Edit/Delete: Manage your recipient list

Example Usage:

import { useLocalRecipients } from '@ordanetwork/sdk/react';

function RecipientManager() {
  const {
    fiatRecipients,
    addFiatRecipient,
    cryptoRecipients,
    addCryptoRecipient,
  } = useLocalRecipients();

  const saveFiatRecipient = () => {
    addFiatRecipient({
      recipientId: 'rec_123',
      name: 'John Doe',
      pixKey: '12345678900',
    });
  };

  const saveCryptoRecipient = () => {
    addCryptoRecipient({
      recipientId: 'rec_456',
      name: 'Alice',
      address: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
      chainId: '1',
      tokenAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
    });
  };

  return (
    <div>
      <h2>Saved Recipients</h2>
      <p>Fiat: {fiatRecipients.length}</p>
      <p>Crypto: {cryptoRecipients.length}</p>
    </div>
  );
}