Chain Abstracted Swap

Build seamless cross-chain swaps powered by Mono Protocol and Privy

Now that your project is set up with Privy and Mono Protocol, let’s create a user interface for chain-abstracted swaps. This is the part that makes users go “wow”—they can swap tokens across different chains without ever dealing with bridges, gas fees, or network settings.

Why It Works

• Simplified UX: Privy handles smooth wallet interactions.

• Chain Abstraction: Mono Protocol ensures users don’t need to think about networks, gas, or bridging.

Step 1: Define Types

We’ll start by creating type definitions for swap quotes and operations. Add a new file at:

// src/lib/types/quote.ts
export interface Account {
  sessionAddress: string;
  adminAddress: string;
  accountAddress: string;
}

export interface TokenInfo {
  aggregatedAssetId: string;
  amount: string;
  assetType: string | string[];
  fiatValue: never;
}

export interface ChainOperation {
  userOp: {
    sender: string;
    nonce: string;
    callData: string;
    callGasLimit: string;
    verificationGasLimit: string;
    preVerificationGas: string;
    maxFeePerGas: string;
    maxPriorityFeePerGas: string;
    paymaster: string;
    paymasterVerificationGasLimit: string;
    paymasterPostOpGasLimit: string;
    paymasterData: string;
    signature: string;
  };
  typedDataToSign: {
    domain: unknown;
    types: unknown;
    primaryType: string;
    message: unknown;
  };
  assetType: string;
  amount: string;
}

export interface Quote {
  id: string;
  account: Account;
  originToken: TokenInfo;
  destinationToken: TokenInfo;
  expirationTimestamp: string;
  tamperProofSignature: string;
  originChainsOperations: ChainOperation[];
  destinationChainOperation?: ChainOperation;
}

export interface QuoteStatus {
  quoteId: string;
  status: {
    status: 'PENDING' | 'COMPLETED' | 'FAILED' | 'IN_PROGRESS' | 'REFUNDED';
  };
  user: string;
  recipientAccountId: string;
  originChainOperations: {
    hash: string;
    chainId: number;
    explorerUrl: string;
  }[];
  destinationChainOperations: {
    hash: string;
    chainId: number;
    explorerUrl: string;
  }[];
}

Executing a Swap

When a user initiates a swap, they’ll be prompted to sign the transaction with their Privy wallet.

Using API Functions

Our chain-abstracted swap flow relies on the API. These are the three core endpoints you’ll be working with:

• GetQuote — fetches a quote for cross-chain swaps or transfers.

• ExecuteQuote — submits a signed quote for execution.

• CheckStatus — polls the API to track transaction status.

Building the Dashboard Page

Next, let’s build a dashboard that allows users to swap USDC ↔ ETH with automatic transaction status updates.

Chain-Abstracted Swap Flow: Key Features

Bidirectional Swapping

• Users can swap USDC → ETH or ETH → USDC.

• The UI updates dynamically based on direction.

Real-Time Quote Estimation

• Entering an amount triggers a quote request.

• Users see the estimated output instantly for transparency.

Balance Display

• Aggregates USDC and ETH balances across all supported chains.

• Balances refresh automatically after successful swaps.

Rmpust Transaction Polling

• Polls transaction status until completion.

• Handles pending, completed, and failed states.

• Stops polling once the transaction finalizes.

Error Handling & Recovery

• Displays clear error messages.

• Cleans up polling intervals to prevent resource leaks.

Enhanced User Experience

• Loading indicators during swap operations.

• Visual feedback for transaction states.

• Links to block explorers for full transparency.

Multichain Asset Visibility

A core strength of this implementation is how it abstracts away multichain complexity:

• Users see one aggregated balance for each token across chains.

• They choose assets (USDC, ETH) without worrying about networks.

• The system handles cross-chain interactions under the hood.

From the user’s perspective, tokens exist in a unified asset space, making the experience as simple as swapping within a single network.