Deposit from a wallet

The connected-wallet flow lets users select a source chain and token, enter an amount, and submit the deposit. The wallet is only the payment source: the service-managed deposit account is derived from your configured recipient, target chain, and target token. Complete the shared widget quickstart and backend setup first. The user connects their own wallet through Reown (WalletConnect). The widget manages the connection UI internally. Use this when your app has no wallet infrastructure of its own.

import { DepositModal } from "@rhinestone/deposit-modal";
import "@rhinestone/deposit-modal/styles.css";

<DepositModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  targetChain={8453}
  targetToken="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  recipient="0xYOUR_RECIPIENT_ADDRESS"
  backendUrl={process.env.NEXT_PUBLIC_DEPOSIT_PROXY_URL}
  reownAppId="YOUR_REOWN_PROJECT_ID"
  onLifecycle={(event) => event.type === "complete" && console.log(event)}
/>

The widget-managed path requires the Reown and Solana peer dependencies listed in the quickstart. To disconnect a wallet the widget connected, call the exported disconnectWallet(). It no-ops with a warning if @reown/appkit is not installed.

Supply your app’s wallet

If your app already connected a wallet through Privy, Dynamic, Turnkey, wagmi, or another integration, pass its viem walletClient. The widget reuses that session instead of opening its own connect step. The widget reads the address from walletClient.account, so its connected identity cannot disagree with your app.

import { DepositModal } from "@rhinestone/deposit-modal";
import "@rhinestone/deposit-modal/styles.css";

<DepositModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  targetChain={8453}
  targetToken="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  recipient="0xYOUR_RECIPIENT_ADDRESS"
  backendUrl={process.env.NEXT_PUBLIC_DEPOSIT_PROXY_URL}
  walletClient={walletClient}
  publicClient={publicClient}
  onLifecycle={(event) => event.type === "complete" && console.log(event)}
/>

Pass onRequestConnect as well if your app needs to run a login flow when the user selects the wallet row before one is connected.

walletClient={undefined} is not the same as omitting the prop. Passing it while your wallet connects tells the widget that a wallet is coming, so it waits instead of deciding there is none.

Set enableWallet={false} to hide wallet funding even when you provide walletClient or reownAppId.

Deposit without connecting a wallet

A wallet is optional. To accept a manual transfer from any wallet or exchange, show a deposit address instead; see deposit addresses and QR codes.

Track the deposit

Use callbacks and error handling while the widget is open and webhooks for backend completion. See widget configuration for destination, routing, and the full props reference.

​Let the widget connect a wallet

​Supply your app’s wallet

​Deposit without connecting a wallet

​Track the deposit

Let the widget connect a wallet

Supply your app’s wallet

Deposit without connecting a wallet

Track the deposit