Built-in UI (Beta)

​

Swap Interface

​

showSwapUI()

public async showSwapUI(options?: {
  initialFromToken?: string;
  fallbackFromToken?: string;
  initialToToken?: string;
}): Promise<{ txHash: `0x${string}` }>

{
  txHash: string; // The transaction hash of the swap transaction
}

try {
  const result = await airService.showSwapUI();
  console.log("Swap completed! Transaction hash:", result.txHash);
} catch (error) {
  console.error("Swap failed:", error);
}

1. Opens the swap interface
2. User selects token and amount to swap
3. User confirms the swap transaction
4. Returns the transaction hash upon successful completion

• User must be logged in

• Experimental feature: This method is marked as experimental and may change in future versions
• Chain support: Currently only supported on Base network
• User experience: Opens a full swap interface with token selection, amount input, and slippage settings.
• Advanced control: For more control over the swap flow, use the RPC method air_getSwapQuote and air_sendSwapTransaction to specify exact token addresses, amounts, and slippage settings

​

On-Ramp Interface

​

showOnRampUI()

public async showOnRampUI(options: {
  displayCurrencyCode: string;
  targetCurrencyCode?: string;
}): Promise<void>

{
  displayCurrencyCode: string; // Fiat currency code (e.g., "USD", "EUR")
  targetCurrencyCode?: string; // Optional target cryptocurrency (e.g., "ETH", "USDC")
}

try {
  await airService.showOnRampUI({
    displayCurrencyCode: "USD",
    targetCurrencyCode: "USDC"
  });
  console.log("On-ramp interface opened");
} catch (error) {
  console.error("Failed to open on-ramp:", error);
}

1. Opens the on-ramp interface
2. User selects payment method and amount
3. User completes the fiat-to-crypto purchase
4. Cryptocurrency is deposited to their wallet

• User must be logged in

• Experimental feature: This method is marked as experimental and may change in future versions
• No return value: This method doesn’t return a transaction hash as the purchase is handled by the on-ramp provider
• Currency support: Supported currencies depend on the on-ramp provider configuration