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

Payment-mode example

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.

Last updated