Swap Widget

The fastest way to add XRPL swaps to your application is through the Squid Swap Widget — a drop-in React component that provides a full cross-chain swap interface. Users can select any source chain and token and swap into XRPL tokens like XRP, RLUSD, or SOIL.

You can prototype and customize your widget configuration interactively using Widget Studio.

---

Locking Destination to XRPL

To configure the widget so the destination is always XRPL, use the initialAssets, availableChains, and availableTokens configuration options:

<SquidWidget
  config={{
    integratorId: "<your-integrator-id>",
    apiUrl: "https://v2.api.squidrouter.com",
    initialAssets: {
      to: {
        address: "xrp",
        chainId: "xrpl-mainnet",
      },
    },
    availableChains: {
      destination: ["xrpl-mainnet"],
    },
    availableTokens: {
      destination: {
        "xrpl-mainnet": [
          "xrp",
          "524c555344000000000000000000000000000000.rmxckbedwqr76quhesumdegf4b9xj8m5de",
          "534F494C00000000000000000000000000000000.rfmS3zqrQrka8wVyhXifEeyTwe8AMz2Yhw",
          "5553444300000000000000000000000000000000.rGm7WCVp9gb4jZHWTEtGUr4dd74z2XuWhE",
        ],
      },
    },
    // ... other configuration options
  }}
/>

This configuration:

• Sets the default destination token to XRP on XRPL

• Restricts the destination chain selector to XRPL only

• Limits destination token choices to XRP, RLUSD, and SOIL

• Leaves the source chain and token open for the user to select

---

Locking Source to XRPL

To allow users to swap from XRPL to any destination, flip the configuration:

<SquidWidget
  config={{
    integratorId: "<your-integrator-id>",
    apiUrl: "https://v2.api.squidrouter.com",
    initialAssets: {
      from: {
        address: "xrp",
        chainId: "xrpl-mainnet",
      },
    },
    availableChains: {
      source: ["xrpl-mainnet"],
    },
    availableTokens: {
      source: {
        "xrpl-mainnet": [
          "xrp",
          "524c555344000000000000000000000000000000.rmxckbedwqr76quhesumdegf4b9xj8m5de",
          "534F494C00000000000000000000000000000000.rfmS3zqrQrka8wVyhXifEeyTwe8AMz2Yhw",
          "5553444300000000000000000000000000000000.rGm7WCVp9gb4jZHWTEtGUr4dd74z2XuWhE",
        ],
      },
    },
    // ... other configuration options
  }}
/>

---

Installation & Setup

For full installation instructions, framework-specific guides, and theming options, see the main Swap Widget documentation:

• Getting Started

• Installing the Widget

• Customization Guide

---

Next Steps

• Use Widget Studio to visually configure and preview your widget

• Need a fixed-amount payment or deposit flow instead? See the Payment Widget

• For full programmatic control, see the API & SDK guide