Skip to main content
The Universal Deposit SDK (@particle-network/universal-deposit) lets your app accept deposits from any chain. It gives your users deposit addresses for every chain supported by Universal Accounts, with funds automatically detected and bridged to your configured destination chain in USDC.

Learn More About Universal Accounts

Universal Deposit leverages Universal Accounts. Learn what they are and how they work.
Universal Deposit uses USDC as the bridged asset. All deposits are automatically converted to USDC and sent to your configured destination chain.
Due to the architecture of Universal Deposit, it is not compatible with Particle Connectkit or Authkit.

​
Try Live Demo

You can try the Universal Deposit SDK in action by visiting the Universal Deposit Demo.

Try Live Demo

Try the Universal Deposit SDK in action.

​
Widget UI overview

The Universal Deposit SDK provides a modal UI that allows users to deposit funds from any chain to your configured destination chain.
Universal Deposit Widget UI

​
Installation

npm install @particle-network/universal-deposit

​
Quick Start

​
1. Import styles

The React components (DepositWidget, DepositModal, RecoveryWidget, RecoveryModal) use Tailwind utility classes. The SDK ships a pre-built CSS file that you must import in your app: 
/* In your global CSS file */
@import "@particle-network/universal-deposit/styles.css";
Or in a JS/TS entry point: 
import '@particle-network/universal-deposit/styles.css';
Tailwind v4 users: If you prefer to avoid duplicate utility CSS, you can skip the import above and add an @source directive in your CSS instead: 
@source "../node_modules/@particle-network/universal-deposit/dist/**/*.mjs";

​
2. Setup — Wrap your app with DepositProvider

import { DepositProvider, CHAIN } from '@particle-network/universal-deposit/react';

function App() {
  return (
    <YourAuthProvider>
      <DepositProvider config={{
        destination: { chainId: CHAIN.POLYGON },
        autoSweep: true,
        minValueUSD: 1,
      }}>
        <YourApp />
      </DepositProvider>
    </YourAuthProvider>
  );
}

​
3. Modal — Open a deposit dialog

import { useDeposit, DepositModal } from '@particle-network/universal-deposit/react';

function Page() {
  const { address } = useYourWallet();
  const [open, setOpen] = useState(false);
  const { isReady } = useDeposit({ ownerAddress: address });

  return (
    <>
      <button onClick={() => setOpen(true)} disabled={!isReady}>
        Deposit
      </button>
      <DepositModal isOpen={open} onClose={() => setOpen(false)} />
    </>
  );
}
The user address above is only used as reference for the deposit account generation, the SDK is fully wallet-agnostic.

​
4. Inline Widget — Embed the deposit UI

import { useDeposit, DepositWidget } from '@particle-network/universal-deposit/react';

function Page() {
  const { address } = useYourWallet();
  const { isReady } = useDeposit({ ownerAddress: address });

  if (!isReady) return <Loading />;
  return <DepositWidget fullWidth />;
}

​
5. Headless — Build your own UI

import { useDeposit, getChainName } from '@particle-network/universal-deposit/react';

function Page() {
  const { address } = useYourWallet();
  const {
    isReady, depositAddresses, pendingDeposits,
    recentActivity, status, sweep, currentDestination,
  } = useDeposit({ ownerAddress: address });

  if (!isReady) return <Loading />;

  return (
    <div>
      <p>EVM: {depositAddresses?.evm}</p>
      <p>Solana: {depositAddresses?.solana}</p>
      <p>Status: {status}</p>
      <p>Destination: {getChainName(currentDestination?.chainId)}</p>

      {pendingDeposits.map(d => (
        <div key={d.id}>
          {d.token} — ${d.amountUSD.toFixed(2)}
          <button onClick={() => sweep(d.id)}>Sweep</button>
        </div>
      ))}
    </div>
  );
}

​
Next Steps

React SDK

DepositProvider, hooks, and UI components.

Core SDK

Headless DepositClient for non-React apps.

Reference

Types, constants, chain utilities, and advanced topics.