Layerswap Docs

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 a few 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 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 from Hyperliquid — when an EVM provider is configured and the destination is reachable from Hyperliquid, the user can fund the deposit straight from their Hyperliquid balance, without copying an address or leaving the widget. See Deposit from Hyperliquid.

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"
/>

Choosing which funding methods to show

By default every available method is offered. Pass methods as an allow-list to narrow them — only the listed methods can appear, and each still needs its own runtime conditions (e.g. wallet needs walletProviders, hyperliquid needs a reachable destination). For example, to offer wallet and deposit-address funding but hide the Hyperliquid option:

<Deposit
  config={{ apiKey: 'YOUR_API_KEY', version: 'mainnet' }}
  walletProviders={[createEVMProvider()]}
  destination={{ network: 'BASE_MAINNET', tokens: ['USDC'] }}
  destinationAddress="0x0183...FF11b"
  methods={['wallet', 'deposit_address']}
/>

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>

Deposit from Hyperliquid

Available in @layerswap/widget 1.5.0 and later.

If the user has funds on Hyperliquid, the method picker can offer a Deposit from Hyperliquid option that funds the deposit straight from their Hyperliquid balance — no address to copy and no leaving the widget. It’s enabled by including an EVM provider (createEVMProvider()) in walletProviders. There’s no separate prop to turn it on — the widget shows the option automatically whenever the destination can be reached from Hyperliquid.

import { Deposit } from '@layerswap/widget/deposit';
import '@layerswap/widget/index.css';
import { createEVMProvider } from '@layerswap/wallet-evm';

<Deposit
  config={{ apiKey: 'YOUR_API_KEY', version: 'mainnet' }}
  walletProviders={[createEVMProvider()]}
  destination={{ network: 'BASE_MAINNET', tokens: ['USDC'] }}
  destinationAddress="0x0183...FF11b"
/>

To hide it, exclude 'hyperliquid' from the methods allow-list.

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.

methods

DepositMethodId[]

default:"all methods"

Allow-list of funding methods the picker may show — "wallet", "deposit_address", and "hyperliquid". Only listed methods can appear, and each still needs its own runtime conditions to be offered (for example, "hyperliquid" only shows when an EVM provider is configured and the destination is reachable). Defaults to every method. The DepositMethodId type and the full DEPOSIT_METHODS list are exported from @layerswap/widget.

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. Including an EVM provider (createEVMProvider()) also unlocks Deposit from Hyperliquid. 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.

​How it works

​Installation

​Usage

​Deposit address only (no wallet providers)

​Choosing which funding methods to show

​Inside an existing LayerswapProvider

​Deposit from Hyperliquid

​Props

​SupportedDestination

How it works

Installation

Usage

Deposit address only (no wallet providers)

Choosing which funding methods to show

Inside an existing LayerswapProvider

Deposit from Hyperliquid

Props

SupportedDestination