Skip to main content
Install the @rhinestone/deposit-modal package, render the modal, and handle a completed deposit. This quickstart uses external wallet mode with Reown for wallet connection. If you don’t want to set up Reown, the modal also supports QR code deposits (no wallet connection) and embedded wallets (Privy, Dynamic, Turnkey, etc.).

​
Prerequisites

​
Install

npm install @rhinestone/deposit-modal viem wagmi @tanstack/react-query @reown/appkit @reown/appkit-adapter-wagmi @solana/web3.js @solana/spl-token
@solana/web3.js and @solana/spl-token are required even for EVM-only apps because Solana support is enabled by default. To drop these dependencies, pass enableSolana={false} on the modal.
The modal ships with its own wagmi and @tanstack/react-query providers — you do not need to wrap your app with WagmiProvider or QueryClientProvider.
1

Render the deposit modal

Import the modal and its styles. Pass the target chain, token, and your Reown project ID.
import { useState } from "react";
import { DepositModal } from "@rhinestone/deposit-modal";
import "@rhinestone/deposit-modal/styles.css";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Deposit</button>
      <DepositModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        targetChain={8453}
        targetToken="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
        recipient="0xYOUR_RECIPIENT_ADDRESS"
        reownAppId={process.env.NEXT_PUBLIC_REOWN_PROJECT_ID!}
      />
    </>
  );
}
This renders a modal where the user connects their wallet, picks a source chain and token, enters an amount, and confirms the deposit. Bridging to the target chain is handled automatically.
2

Handle completion

Add the onDepositComplete callback to react when tokens arrive on the target chain.
<DepositModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  targetChain={8453}
  targetToken="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  recipient="0xYOUR_RECIPIENT_ADDRESS"
  reownAppId={process.env.NEXT_PUBLIC_REOWN_PROJECT_ID!}
  onDepositComplete={(data) => {
    console.log("Deposit complete:", data.destinationTxHash);
    setIsOpen(false);
  }}
/>
See onDepositComplete for the full data payload shape, and status tracking for all available callbacks.

​
Next steps

Deposit modal

Integration modes, transfer configuration, and full props reference.

Customization

Theme, branding, and UI configuration.

Status tracking

Lifecycle events, callbacks, and error handling.

Withdraw modal

Withdraw tokens from a Safe to any supported chain.