> ## Documentation Index
> Fetch the complete documentation index at: https://docs.layerswap.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Deposit Widget
> A drop-in component that lets your users fund a fixed address — from a connected wallet or from any wallet or exchange via a deposit address.
The **Deposit Widget** (`LayerswapDepositWidget`) renders the deposit flow instead of the Swap Widget's form: you fix the destination — one network, its allowed tokens, and the recipient address — and the end user only picks **how to fund** the deposit. It can render inline on your page, or as a button that opens the widget in a dialog.
It's delivered through the same verified CDN pipeline as [`LayerswapWidget`](/widget/quickstart) and accepts **all of the same props** plus the deposit-specific ones documented below.
`LayerswapDepositWidget` is a dedicated component for funding a destination fixed by your app. The **Deposit tab**—formerly called “Easy Deposit”—generates an address or QR code inside the Swap Widget (`LayerswapWidget`) and can use the destination wallet connected by the user. Choose the component when your app must set the recipient before the user starts.
## When to choose it
Use the Deposit Widget when:
* Your app already knows the receiving address and network.
* Your users may hold funds in different wallets, exchanges, or supported app balances.
* You want the widget to show only the funding methods supported for the selected destination.
* You want the experience to render inline with your product or open from a branded button.
Use the [Swap Widget](/widget/quickstart) when users need to choose the destination themselves. Use the [API](/api/quickstart) when you need to replace the method picker or own the complete funding interface.
## How it works
The user lands on a method picker offering a few ways to fund the deposit:
* **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 is needed.
* **Deposit from Hyperliquid** — fund the destination from a Hyperliquid USDC balance without copying an address or leaving the widget. See [Deposit from Hyperliquid](#deposit-from-hyperliquid).
* **Deposit from Polymarket** — fund the destination from a Polymarket balance. See [Deposit from Polymarket](#deposit-from-polymarket).
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.
## Usage
```tsx theme={null}
import { LayerswapDepositWidget } from '@layerswap/widget-react';
export function DepositPage() {
return (
Loading widget…}
/>
);
}
```
To render it as a button that opens a dialog instead of inline:
```tsx theme={null}
```
### Choosing which funding methods to show
By default every available method is offered. Pass `methods` as an allow-list to narrow them. The prop controls which methods may appear; it does not make an unavailable route available. For a deposit-address-only integration with no wallet connection at all:
```tsx theme={null}
```
### Deposit from Hyperliquid
When EVM wallet support is enabled and the destination is reachable from Hyperliquid, the method picker can offer **Deposit from Hyperliquid**. The user can fund the fixed destination straight from their Hyperliquid USDC balance, without copying an address or leaving the widget.
If the destination is not reachable, the option is disabled with **Not available for this destination**. To hide it, exclude `hyperliquid` from the `methods` allow-list.
### Deposit from Polymarket
The user connects the wallet that owns their Polymarket account and funds the fixed destination straight from their Polymarket balance. The method is shown only when EVM wallet support and the Polymarket integration are enabled.
If the destination is not reachable from Polymarket, the option is disabled with **Not available for this destination**. To hide it, exclude `polymarket` from the `methods` allow-list.
### Wallets, theming, and callbacks
Since the Deposit Widget takes all `LayerswapWidget` props, the same pages apply:
* [Wallets](/widget/wallets) — filter chains with `walletProvidersConfig`, supply credentials with `walletDefaults`
* [Sharing your wagmi config](/widget/wagmi-config) — reuse your app's EVM connection via `wagmiConfig`
* [Customization](/widget/theming) — theme via `config.theme`
* [Event Callbacks](/widget/events/overview) — `callbacks` fires for deposit swaps the same way
## Deposit-specific props
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](#supporteddestination) for the shape.
The recipient address on the destination network. Fixed by you — the Deposit Widget never asks the user for it.
`"inline"` renders the widget directly on the page. `"button"` renders a Deposit button that opens the widget inside a dialog.
Title shown in the widget header.
Label for the trigger button. Only applies when `mode="button"`.
Extra `className` applied to the trigger button. Only applies when `mode="button"`.
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.
Custom label for the action (submit) button inside the flow.
Default amount (in USD) seeded into the wallet flow once the user picks a source token. Set to `0` to disable seeding.
Allow-list of funding methods the picker may show — `"wallet"`, `"deposit_address"`, `"hyperliquid"`, and `"polymarket"`. The list permits methods; route availability and Layerswap feature configuration still determine whether each option is shown or enabled. Defaults to every method.
### SupportedDestination
```typescript theme={null}
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.
## Vanilla JS
The release plan includes `mountDepositWidget` for non-React hosts. Verify the export before relying on it; see [JavaScript package](/widget/vanilla-js#deposit-widget-release-check).