Skip to main content
The Deposit Widget is a standalone, self-contained <Deposit> component for letting your users send funds to an address. You hard-code the recipient address, the destination network, and the tokens you accept; the end user only decides how to fund the deposit. It can render inline on your page, or as a button that opens the widget in a dialog.

​
How it works

When wallet providers are configured, the user lands on a method picker offering two ways to fund the deposit: Deposit Widget — method picker showing Wallet transfer and Deposit address options
  • Wallet transfer — the user connects a wallet, picks a source token (only routes the wallet supports and has a balance for are shown), enters an amount, reviews the quote, and executes the transfer. Deposit Widget — wallet transfer flow showing source token, amount, and quote summary
  • Deposit address — the widget generates a deposit address with a QR code. The user pays from any wallet app, hardware wallet, or exchange account. No source-side wallet integration is required. Deposit Widget — deposit address screen with QR code and copyable address
The destination network is fixed by the destination prop; the accepted tokens come from its tokens allow-list. When more than one token is accepted, the user gets a “You receive” picker to choose between them; with a single token the picker is hidden and that token is used automatically.
If you pass no walletProviders, the Wallet transfer method is unavailable, so the method picker is skipped entirely — the widget opens straight on the deposit address flow. This gives you a deposit-address-only integration with zero wallet dependencies.

​
Installation

Import the component from the dedicated @layerswap/widget/deposit entry point along with the widget styles: 
import { Deposit } from '@layerswap/widget/deposit';
import '@layerswap/widget/index.css';
See the Quickstart for installing @layerswap/widget and the wallet provider packages.

​
Usage

A complete example rendering the widget as a button that opens a dialog: 
import { Deposit } from '@layerswap/widget/deposit';
import '@layerswap/widget/index.css';
import { createEVMProvider } from '@layerswap/wallet-evm';

export default function Fund() {
  return (
    <Deposit
      mode="button"
      config={{ apiKey: 'YOUR_API_KEY', version: 'mainnet' }}
      walletProviders={[createEVMProvider()]}
      destination={{ network: 'STARKNET_MAINNET', tokens: ['ETH'] }}
      destinationAddress="0x0183...FF11b"
    />
  );
}
To embed the widget directly on the page instead of behind a button, use mode="inline" (the default). This example also accepts multiple tokens, so the user gets a token picker: 
<Deposit
  mode="inline"
  config={{ apiKey: 'YOUR_API_KEY', version: 'mainnet' }}
  walletProviders={[createEVMProvider()]}
  destination={{ network: 'BASE_MAINNET', tokens: ['USDC', 'USDT', 'ETH'] }}
  destinationAddress="0x0183...FF11b"
/>

​
Deposit address only (no wallet providers)

Omit walletProviders to skip the method picker and open straight on the deposit address flow: 
<Deposit
  config={{ apiKey: 'YOUR_API_KEY', version: 'mainnet' }}
  destination={{ network: 'BASE_MAINNET', tokens: ['USDC'] }}
  destinationAddress="0x0183...FF11b"
/>

​
Inside an existing LayerswapProvider

If your app already renders LayerswapProvider (for example alongside <Swap>), use DepositComponent instead — it’s the same widget without the built-in provider. Pass DepositLoading as the provider’s loadingComponent so the init state matches the deposit layout: 
import { LayerswapProvider } from '@layerswap/widget';
import { DepositComponent, DepositLoading } from '@layerswap/widget/deposit';

<LayerswapProvider
  config={{
    apiKey: 'YOUR_API_KEY',
    version: 'mainnet',
    loadingComponent: <DepositLoading />
  }}
  walletProviders={[createEVMProvider()]}
>
  <DepositComponent
    mode="button"
    destination={{ network: 'STARKNET_MAINNET', tokens: ['ETH'] }}
    destinationAddress="0x0183...FF11b"
  />
</LayerswapProvider>

​
Props

<Deposit> accepts the deposit props below plus the LayerswapProvider props (config, callbacks, walletProviders), since it renders the provider internally. DepositComponent accepts only the deposit props.
​
destination
SupportedDestination
required
The single destination network and its allowed tokens. The network is fixed; the user picks one of the tokens via the token dropdown (hidden when only one token is accepted). See SupportedDestination for the shape.
​
destinationAddress
string
required
The recipient address on the destination network. Fixed by you — the deposit widget never asks the user for it.
​
mode
"inline" | "button"
default:"inline"
"inline" renders the widget directly on the page. "button" renders a Deposit button that opens the widget inside a dialog.
​
title
string
default:"Deposit"
Title shown in the widget header.
​
buttonLabel
string
default:"Deposit"
Label for the trigger button. Only applies when mode="button".
​
buttonClassName
string
Extra className applied to the trigger button. Only applies when mode="button".
​
showDestinationAddress
boolean
default:"false"
When true, shows the “Send to” destination address row in the quote summary. Hidden by default because the recipient is your own fixed address and the row is usually redundant for the user — opt in only if you want to surface the destination address explicitly.
​
actionButtonText
string
default:"Deposit"
Custom label for the action (submit) button inside the flow.
​
defaultAmountUsd
number
default:"1"
Default amount (in USD) seeded into the wallet flow once the user picks a source token. Set to 0 to disable seeding.
​
config
LayerswapWidgetConfig
Provider configuration — apiKey, version, theme, settings, etc. Only on <Deposit> (not DepositComponent). See the Quickstart for details.
​
walletProviders
WalletProvider[]
Wallet providers available for the Wallet transfer method. Only on <Deposit> (not DepositComponent). When omitted, the widget runs in deposit-address-only mode. See Wallet Management.
​
callbacks
CallbacksContextType
Event callbacks. Only on <Deposit> (not DepositComponent). See Event Callbacks.

​
SupportedDestination

type SupportedDestination = {
  /** Network name — the canonical identifier, e.g. `BASE_MAINNET`. */
  network: string;
  /** Token symbols, case-insensitive, e.g. `["USDC", "USDT"]`. The user picks
   * one of these via the token dropdown; the network is fixed. */
  tokens: string[];
};
Tokens that don’t match an active token on the network are dropped. If only one valid token remains, the token picker is hidden.
While a transfer is in flight, the dialog’s close button is hidden and clicking outside the dialog doesn’t dismiss it, so the user can’t accidentally abandon an in-progress deposit.