Simple Deposit — Quickstart

/* In your global CSS file */
@import "@particle-network/simple-deposit/styles.css";

import '@particle-network/simple-deposit/styles.css';

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

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

import { useDeposit, DepositModal } from '@particle-network/simple-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)} />
    </>
  );
}

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

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

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

import { useDeposit, getChainName } from '@particle-network/simple-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>
  );
}