Configuration

Full reference for the Deposit Widget's config prop

The Deposit Widget takes a single config prop, typed as DepositConfig. Like the Swap Widget, it accepts your Integrator ID and a theme for customization. On top of that, it adds the settings specific to deposits and payments: the destination address and token, and the mode.

import { DepositWidget, type DepositConfig } from "@0xsquid/deposit-widget";

<DepositWidget config={config} />;

Modes

DepositConfig is a discriminated union over mode:

• "deposit" — the user enters the amount to send. Use this for top-ups, account funding, and any flow where the amount is open-ended.

• "payment" — the integrator fixes the amount via an extra amount: string field. Use this for checkout / pay-this-invoice flows.

Config fields

Field	Type	Required	Description
mode	"deposit" | "payment"	✅	Selects the widget flow. In "payment" mode, amount is required.
amount	string	✅ (payment mode only)	Fixed amount the user will pay, in destination-token units (human-readable string, e.g. "25.5").
destinationAddress	string	✅	Address that receives the deposit on the destination chain.
destinationToken.address	string	✅	Token contract address on the destination chain.
destinationToken.chainId	string	✅	Squid chain ID of the destination chain (e.g. "42161" for Arbitrum, "xrpl-mainnet" for XRPL).
integrator.id	string	✅	Your Integrator ID. Required for Squid to route and account for your traffic.
integrator.name	string	✅	Displayed in the widget header so users know which app they're paying / depositing to.
integrator.logoUrl	string	✅	URL of your logo, displayed alongside the name.
apiUrl	string	❌	Override the Squid API endpoint. Defaults to Squid's production API.
theme	Theme	❌	Theme object (colors, border radii, shadows, font sizes / weights). See Theme customization below.
themeType	"light" | "dark"	❌	Selects the base palette before theme overrides apply. Defaults to "light".

Deposit-mode example

const config: DepositConfig = {
  mode: "deposit",
  destinationAddress: "0xYourReceivingAddress",
  destinationToken: {
    address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", // USDC on Arbitrum
    chainId: "42161",
  },
  integrator: {
    id: "<your-integrator-id>",
    name: "Your App",
    logoUrl: "https://your.app/logo.png",
  },
};

Payment-mode example

const config: DepositConfig = {
  mode: "payment",
  amount: "25.00",
  destinationAddress: "0xYourReceivingAddress",
  destinationToken: {
    address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831", // USDC on Arbitrum
    chainId: "42161",
  },
  integrator: {
    id: "<your-integrator-id>",
    name: "Your App",
    logoUrl: "https://your.app/logo.png",
  },
};

Theme customization

To customize the widget's appearance:

1. Use the Widget Studio to generate a custom theme.

2. Copy the generated theme (and themeType) and paste them into your config.