> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rhinestone.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Try it out

> Run the deposit widget in the browser and watch a cross-chain deposit settle.

export const DepositDemo = () => {
  const frame = React.useRef(null);
  const [theme, setTheme] = React.useState(null);
  const [applied, setApplied] = React.useState(null);
  const origin = "https://demo.rhinestone.dev";
  const sendTheme = React.useCallback(() => {
    const mode = document.documentElement.classList.contains("dark") ? "dark" : "light";
    setTheme(mode);
    frame.current?.contentWindow?.postMessage({
      type: "rhinestone:deposit-demo:theme",
      mode
    }, origin);
  }, []);
  React.useEffect(() => {
    const onMessage = event => {
      if (event.origin !== origin || event.source !== frame.current?.contentWindow) return;
      if (event.data?.type === "rhinestone:deposit-demo:ready") sendTheme();
      if (event.data?.type === "rhinestone:deposit-demo:theme-applied" && (event.data.mode === "light" || event.data.mode === "dark")) setApplied(event.data.mode);
    };
    window.addEventListener("message", onMessage);
    const observer = new MutationObserver(sendTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    sendTheme();
    return () => {
      window.removeEventListener("message", onMessage);
      observer.disconnect();
    };
  }, [sendTheme]);
  const visible = theme !== null && applied === theme;
  return <iframe ref={frame} src={`${origin}/embed`} title="Live Rhinestone deposit widget demo" loading="lazy" allow="payment; camera; microphone; clipboard-write; geolocation" referrerPolicy="strict-origin-when-cross-origin" onLoad={sendTheme} tabIndex={visible ? 0 : -1} aria-hidden={!visible} data-ready={visible} style={{
    position: "absolute",
    inset: 0,
    display: "block",
    width: "100%",
    height: "100%",
    border: 0,
    borderRadius: 16,
    opacity: visible ? 1 : 0,
    pointerEvents: visible ? "auto" : "none",
    backgroundColor: "transparent"
  }} />;
};

The widget below is the same React modal you ship with `@rhinestone/deposit-modal`: funding method, chain and token selection, and status screens. It deposits **USDC on Base to Rhinestone**, not to your own wallet. Any funds you send are real mainnet funds.

<div className="not-prose deposit-demo" role="figure" aria-label="Deposit widget demo">
  <div className="deposit-demo-stage" style={{ position: "relative", height: "var(--deposit-demo-height, 521px)" }}>
    <p className="deposit-demo-loading text-sm text-gray-500 dark:text-gray-400" role="status">Demo is loading…</p>

    <DepositDemo />
  </div>

  <p className="mt-3 text-center text-xs text-gray-500 dark:text-gray-400">
    <a href="https://demo.rhinestone.dev" target="_blank" rel="noopener noreferrer" className="hover:underline underline-offset-4" style={{ color: "inherit", fontSize: "inherit" }}>
      Open in a new tab ↗
    </a>
  </p>
</div>

Ready to integrate? Start with the [widget quickstart](/deposits/overview/widget/quickstart), or build your own UI on the [Deposit API](/deposits/headless/quickstart).