@rhinestone/deposit-modal 0.8.2 → 0.9.0

package/dist/server.cjs

@@ -0,0 +1,96 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/server.ts
+var DEFAULT_PROCESSOR_URL = "https://v1.orchestrator.rhinestone.dev/deposit-processor";
+function jsonError(message, status) {
+  return new Response(JSON.stringify({ error: message }), {
+    status,
+    headers: { "Content-Type": "application/json" }
+  });
+}
+function parseBody(value) {
+  if (typeof value !== "object" || value === null) return null;
+  const record = value;
+  const fields = ["chain", "txHash", "account", "token", "destination"];
+  for (const field of fields) {
+    if (typeof record[field] !== "string" || record[field] === "") return null;
+  }
+  return Object.fromEntries(
+    fields.map((field) => [field, record[field]])
+  );
+}
+function sameIdentifier(a, b) {
+  if (a === b) return true;
+  const isHex = (value) => /^0x[0-9a-fA-F]+$/.test(value);
+  return isHex(a) && isHex(b) && a.toLowerCase() === b.toLowerCase();
+}
+function createRefundHandler(options) {
+  const processorUrl = (_nullishCoalesce(options.processorUrl, () => ( DEFAULT_PROCESSOR_URL))).replace(
+    /\/$/,
+    ""
+  );
+  const headers = {
+    "Content-Type": "application/json",
+    "x-api-key": options.apiKey
+  };
+  return async function handleRefund(request) {
+    const body = parseBody(await request.json().catch(() => null));
+    if (!body) {
+      return jsonError("Malformed refund request", 400);
+    }
+    const authorization = await options.authorize(request, body);
+    if (!authorization) {
+      return jsonError("Unauthorized", 401);
+    }
+    const query = new URLSearchParams({
+      recipient: authorization.depositRecipient,
+      chain: body.chain,
+      txHash: body.txHash,
+      includeSpam: "true"
+    });
+    const lookup = await fetch(`${processorUrl}/deposits?${query}`, { headers });
+    if (!lookup.ok) {
+      return jsonError("Could not verify the deposit", 502);
+    }
+    const { deposits = [] } = await lookup.json();
+    const owned = deposits.some(
+      (deposit) => deposit.depositAddress !== void 0 && deposit.token !== void 0 && sameIdentifier(deposit.depositAddress, body.account) && sameIdentifier(deposit.token, body.token)
+    );
+    if (!owned) {
+      return jsonError("Forbidden", 403);
+    }
+    const destination = _nullishCoalesce(authorization.refundDestination, () => ( body.destination));
+    const upstream = await fetch(`${processorUrl}/deposits/refund`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        chain: body.chain,
+        txHash: body.txHash,
+        account: body.account,
+        token: body.token,
+        recipient: destination
+      })
+    });
+    const text = await upstream.text();
+    if (!upstream.ok) {
+      return new Response(text, {
+        status: upstream.status,
+        headers: { "Content-Type": "application/json" }
+      });
+    }
+    let body_;
+    try {
+      body_ = JSON.parse(text);
+    } catch (e) {
+      return new Response(text, {
+        status: upstream.status,
+        headers: { "Content-Type": "application/json" }
+      });
+    }
+    return new Response(
+      JSON.stringify({ ...body_, destination }),
+      { status: upstream.status, headers: { "Content-Type": "application/json" } }
+    );
+  };
+}
+
+
+exports.createRefundHandler = createRefundHandler;

package/dist/server.d.cts

@@ -0,0 +1,65 @@
+/**
+ * Server-side helper for the claim flow. Import from
+ * `@rhinestone/deposit-modal/server` — this module talks to the processor with
+ * your API key and must never reach the browser.
+ *
+ * Deposit accounts are service-managed, so no user wallet can sign for a
+ * refund, and an exchange-funded deposit has no signable sender either.
+ * Whether a deposit belongs to a given user is something only your app knows,
+ * so that one decision is yours (`authorize`) and everything else is here.
+ */
+/** Body the ClaimModal POSTs to your endpoint. Never trusted on its own. */
+interface RefundRequestBody {
+    chain: string;
+    txHash: string;
+    account: string;
+    token: string;
+    destination: string;
+}
+interface RefundAuthorization {
+    /**
+     * The deposit `recipient` this user owns — the same value your app passes
+     * `<DepositModal>`. Used *only* to prove the deposit belongs to them: the
+     * handler lists deposits settling to it and rejects a txHash that isn't
+     * among them.
+     *
+     * Not where the money goes. One recipient covers every deposit account the
+     * user has, since the account salt includes the target chain and token.
+     */
+    depositRecipient: string;
+    /**
+     * Where the refund is paid. Set this to override whatever the browser asked
+     * for, taking the choice away from the page. Omit it to honour the address
+     * the user typed.
+     */
+    refundDestination?: string;
+}
+interface CreateRefundHandlerOptions {
+    /** Write-scoped Rhinestone API key. Server-side only. */
+    apiKey: string;
+    /**
+     * Authenticate the caller and return the recipient they own, or `null` to
+     * reject with 401. This is the only part we can't write for you.
+     */
+    authorize: (request: Request, refund: RefundRequestBody) => Promise<RefundAuthorization | null> | RefundAuthorization | null;
+    /** Defaults to the production processor. */
+    processorUrl?: string;
+}
+/**
+ * Builds a `(Request) => Promise<Response>` you can mount in any fetch-based
+ * runtime (Next.js route handlers, Hono, Bun.serve, Cloudflare Workers).
+ *
+ * ```ts
+ * // app/api/refund/route.ts
+ * export const POST = createRefundHandler({
+ *   apiKey: process.env.RHINESTONE_API_KEY!,
+ *   async authorize(request) {
+ *     const session = await getSession(request);
+ *     return session ? { depositRecipient: session.depositRecipient } : null;
+ *   },
+ * });
+ * ```
+ */
+declare function createRefundHandler(options: CreateRefundHandlerOptions): (request: Request) => Promise<Response>;
+
+export { type CreateRefundHandlerOptions, type RefundAuthorization, createRefundHandler };

package/dist/server.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Server-side helper for the claim flow. Import from
+ * `@rhinestone/deposit-modal/server` — this module talks to the processor with
+ * your API key and must never reach the browser.
+ *
+ * Deposit accounts are service-managed, so no user wallet can sign for a
+ * refund, and an exchange-funded deposit has no signable sender either.
+ * Whether a deposit belongs to a given user is something only your app knows,
+ * so that one decision is yours (`authorize`) and everything else is here.
+ */
+/** Body the ClaimModal POSTs to your endpoint. Never trusted on its own. */
+interface RefundRequestBody {
+    chain: string;
+    txHash: string;
+    account: string;
+    token: string;
+    destination: string;
+}
+interface RefundAuthorization {
+    /**
+     * The deposit `recipient` this user owns — the same value your app passes
+     * `<DepositModal>`. Used *only* to prove the deposit belongs to them: the
+     * handler lists deposits settling to it and rejects a txHash that isn't
+     * among them.
+     *
+     * Not where the money goes. One recipient covers every deposit account the
+     * user has, since the account salt includes the target chain and token.
+     */
+    depositRecipient: string;
+    /**
+     * Where the refund is paid. Set this to override whatever the browser asked
+     * for, taking the choice away from the page. Omit it to honour the address
+     * the user typed.
+     */
+    refundDestination?: string;
+}
+interface CreateRefundHandlerOptions {
+    /** Write-scoped Rhinestone API key. Server-side only. */
+    apiKey: string;
+    /**
+     * Authenticate the caller and return the recipient they own, or `null` to
+     * reject with 401. This is the only part we can't write for you.
+     */
+    authorize: (request: Request, refund: RefundRequestBody) => Promise<RefundAuthorization | null> | RefundAuthorization | null;
+    /** Defaults to the production processor. */
+    processorUrl?: string;
+}
+/**
+ * Builds a `(Request) => Promise<Response>` you can mount in any fetch-based
+ * runtime (Next.js route handlers, Hono, Bun.serve, Cloudflare Workers).
+ *
+ * ```ts
+ * // app/api/refund/route.ts
+ * export const POST = createRefundHandler({
+ *   apiKey: process.env.RHINESTONE_API_KEY!,
+ *   async authorize(request) {
+ *     const session = await getSession(request);
+ *     return session ? { depositRecipient: session.depositRecipient } : null;
+ *   },
+ * });
+ * ```
+ */
+declare function createRefundHandler(options: CreateRefundHandlerOptions): (request: Request) => Promise<Response>;
+
+export { type CreateRefundHandlerOptions, type RefundAuthorization, createRefundHandler };

package/dist/server.mjs

@@ -0,0 +1,96 @@
+// src/server.ts
+var DEFAULT_PROCESSOR_URL = "https://v1.orchestrator.rhinestone.dev/deposit-processor";
+function jsonError(message, status) {
+  return new Response(JSON.stringify({ error: message }), {
+    status,
+    headers: { "Content-Type": "application/json" }
+  });
+}
+function parseBody(value) {
+  if (typeof value !== "object" || value === null) return null;
+  const record = value;
+  const fields = ["chain", "txHash", "account", "token", "destination"];
+  for (const field of fields) {
+    if (typeof record[field] !== "string" || record[field] === "") return null;
+  }
+  return Object.fromEntries(
+    fields.map((field) => [field, record[field]])
+  );
+}
+function sameIdentifier(a, b) {
+  if (a === b) return true;
+  const isHex = (value) => /^0x[0-9a-fA-F]+$/.test(value);
+  return isHex(a) && isHex(b) && a.toLowerCase() === b.toLowerCase();
+}
+function createRefundHandler(options) {
+  const processorUrl = (options.processorUrl ?? DEFAULT_PROCESSOR_URL).replace(
+    /\/$/,
+    ""
+  );
+  const headers = {
+    "Content-Type": "application/json",
+    "x-api-key": options.apiKey
+  };
+  return async function handleRefund(request) {
+    const body = parseBody(await request.json().catch(() => null));
+    if (!body) {
+      return jsonError("Malformed refund request", 400);
+    }
+    const authorization = await options.authorize(request, body);
+    if (!authorization) {
+      return jsonError("Unauthorized", 401);
+    }
+    const query = new URLSearchParams({
+      recipient: authorization.depositRecipient,
+      chain: body.chain,
+      txHash: body.txHash,
+      includeSpam: "true"
+    });
+    const lookup = await fetch(`${processorUrl}/deposits?${query}`, { headers });
+    if (!lookup.ok) {
+      return jsonError("Could not verify the deposit", 502);
+    }
+    const { deposits = [] } = await lookup.json();
+    const owned = deposits.some(
+      (deposit) => deposit.depositAddress !== void 0 && deposit.token !== void 0 && sameIdentifier(deposit.depositAddress, body.account) && sameIdentifier(deposit.token, body.token)
+    );
+    if (!owned) {
+      return jsonError("Forbidden", 403);
+    }
+    const destination = authorization.refundDestination ?? body.destination;
+    const upstream = await fetch(`${processorUrl}/deposits/refund`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        chain: body.chain,
+        txHash: body.txHash,
+        account: body.account,
+        token: body.token,
+        recipient: destination
+      })
+    });
+    const text = await upstream.text();
+    if (!upstream.ok) {
+      return new Response(text, {
+        status: upstream.status,
+        headers: { "Content-Type": "application/json" }
+      });
+    }
+    let body_;
+    try {
+      body_ = JSON.parse(text);
+    } catch {
+      return new Response(text, {
+        status: upstream.status,
+        headers: { "Content-Type": "application/json" }
+      });
+    }
+    return new Response(
+      JSON.stringify({ ...body_, destination }),
+      { status: upstream.status, headers: { "Content-Type": "application/json" } }
+    );
+  };
+}
+export {
+  createRefundHandler
+};

package/dist/styles.css

@@ -327,7 +327,12 @@
        the previous step's height instead of jumping. Min-height is on
        modal-content rather than modal-body so the transitioned property
        lives on an element that survives step swaps. */
-    min-height 280ms cubic-bezier(0.22, 1, 0.36, 1);
+    min-height 280ms cubic-bezier(0.22, 1, 0.36, 1),
+    /* The Swapped iframe phase raises the shell corner to the widget's 28px
+       (see the sizing rules at the bottom of this file); animate it on the same
+       curve as max-width/min-height so the corner doesn't pop while the modal
+       is still resizing into the iframe. */
+    border-radius 240ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .rs-modal-content[data-theme="dark"] {
@@ -557,6 +562,19 @@
   gap: 6px;
 }
 
+/* Chrome/Safari paint their own autofill background with !important UA
+   styles. Clip that paint to the glyphs so every themed input keeps its real
+   surface — including the transparent withdrawal inputs — without replacing
+   the focus/error box-shadows. The standard pseudo-class and WebKit alias are
+   both kept for current and older browser engines. */
+.rs-modal
+  :is(.rs-input, .rs-withdraw-input):is(:autofill, :-webkit-autofill) {
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--rs-foreground);
+  caret-color: var(--rs-foreground);
+}
+
 .rs-input-label {
   font-size: 13px;
   color: var(--rs-muted);
@@ -2555,7 +2573,8 @@
    the image is loading (`data-loading`), show a muted pulsing placeholder so the
    first paint isn't a blank/broken-image flash; it inherits the caller's size
    and border-radius, so there's no layout shift when the icon paints in. */
-.rs-token-icon[data-loading] {
+.rs-token-icon[data-loading],
+.rs-cdn-icon[data-loading] {
   background-color: var(--rs-muted);
   animation: rs-token-icon-pulse 1.2s ease-in-out infinite;
 }
@@ -2571,7 +2590,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .rs-token-icon[data-loading] {
+  .rs-token-icon[data-loading],
+  .rs-cdn-icon[data-loading] {
     animation: none;
   }
 }
@@ -4867,6 +4887,53 @@
   object-fit: cover;
 }
 
+/* Provider-hosted fiat method icons (regional methods: GCash, Maya, PIX, …).
+   When a dark-background variant is supplied, the theme toggles which img
+   shows; otherwise the single (light) icon shows in both themes. */
+.rs-fiat-remote-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.rs-fiat-remote-icon img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.rs-fiat-remote-icon-dark {
+  display: none;
+}
+
+.rs-modal[data-theme="dark"] .rs-fiat-remote-icon--has-dark .rs-fiat-remote-icon-light {
+  display: none;
+}
+
+.rs-modal[data-theme="dark"] .rs-fiat-remote-icon--has-dark .rs-fiat-remote-icon-dark {
+  display: inline-block;
+}
+
+/* Sits in the row's meta slot, so no inline-with-the-label wrapper is needed —
+   `.rs-list-row-title` already handles its own truncation. */
+.rs-fiat-method-badge {
+  flex-shrink: 0;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: #a4f4cf;
+  color: #004f3b;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.rs-modal[data-theme="dark"] .rs-fiat-method-badge {
+  background: #006045;
+  color: #d0fae5;
+}
+
 .rs-list-row-body {
   flex: 1;
   min-width: 0;
@@ -4949,6 +5016,18 @@
   border-radius: 4px;
 }
 
+/* Chain with no bundled icon: short-label chip inside the badge circle. */
+.rs-chain-badge-fallback {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 1;
+}
+
 /* Card-network chips: exported Figma tiles are all 38×24. */
 .rs-list-row-meta-icons--cards > .rs-card-network {
   position: relative;
@@ -5068,8 +5147,8 @@
 }
 
 /* The iframe phase owns the whole modal width. Normal screens keep the
-   16px body inset, but Swapped now provides its own in-iframe back chrome so
-   the embedded sheet should not look like a padded card inside our modal. */
+   16px body inset, but the embedded sheet should not look like a padded card
+   inside our modal. */
 .rs-modal-body[data-flow-mode="fiat-onramp"]:has(.rs-fiat-onramp),
 .rs-modal-body[data-flow-mode="exchange-connect"]:has(.rs-fiat-onramp) {
   padding-inline: 0;
@@ -5091,7 +5170,9 @@
   width: 100%;
   min-height: 586px;
   margin: 0;
-  border-radius: 0;
+  /* Matches the iframe's 28px below so the loading / error overlays that sit
+     on top of it share the same corner arc. */
+  border-radius: 28px;
   overflow: hidden;
 }
 
@@ -5099,13 +5180,29 @@
   min-height: 585px;
 }
 
+/* Swapped paints its widget as a card with a 28px corner radius and its drop
+   shadow sits just outside that arc, so the embedding iframe has to clip at the
+   same 28px — otherwise the shadow's corners bleed out past the card and read as
+   grey smudges in our modal corners. Confirmed with Swapped: their iframe-
+   initialization docs still show a stale `border-radius: 0.75rem`, 28px is the
+   value that matches the current widget. */
 .rs-fiat-onramp-iframe {
   display: block;
   width: 100%;
   height: 586px;
   min-height: 586px;
   border: 0;
+  border-radius: 28px;
   background: var(--rs-background);
+  /* Swapped's widget paints its own page background behind a rounded card, and
+     that card is rounder than our modal. Where their radius exceeds ours the
+     modal's corner clip doesn't reach their page background, so a grey wedge
+     shows in each corner (visible on their payment-method screen). Clipping the
+     iframe at a radius at least as round as their card puts the modal's own
+     background there instead.
+     ponytail: one blunt radius rather than tracking Swapped's per-screen shape
+     — if they round their card past this, raise it. */
+  border-radius: 28px;
   /* Swapped's embedded widget has no theme URL param and follows
      `prefers-color-scheme`. Setting `color-scheme` on the iframe element
      propagates into its (cross-origin) document's `prefers-color-scheme`, so
@@ -5129,6 +5226,15 @@
   min-height: 585px;
 }
 
+/* Connect sits below our header (only fiat is immersive), so only its bottom
+   corners meet the modal's rounded edge. Rounding the top too would leave the
+   shell background showing through as light notches under the header. Applies to
+   the wrap as well so the loading / error overlays share the same arc. */
+.rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe-wrap,
+.rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe {
+  border-radius: 0 0 28px 28px;
+}
+
 /* Finalising deposit — compact centered spinner screen (Swapped Connect). */
 .rs-finalising-body {
   display: flex;
@@ -5325,6 +5431,16 @@
   line-height: 1.35;
 }
 
+/* Pre-deposit "Exchange Fee" disclosure shown below the picker footer. */
+.rs-exchange-select-fee-note {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--rs-muted);
+  text-align: center;
+  margin: 0;
+}
+
 /* =============================================================================
    Modal sizing for the Swapped iframe step
    =============================================================================
@@ -5368,16 +5484,32 @@
   min-height: 698px;
 }
 
-/* Iframe phase: with no header/footer chrome the modal is sized to the
-   embedded iframe exactly (586 fiat / 585 connect) so it fills the modal with
-   no whitespace below. The taller setup values above pre-reserve the space
-   before SwappedIframeStep mounts. */
+/* Iframe phase: fiat is immersive (no header/footer chrome), so the modal is
+   sized to the embedded iframe exactly — 586 — and fills top-to-bottom with no
+   whitespace. The taller setup values above pre-reserve the space before
+   SwappedIframeStep mounts. */
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"] .rs-fiat-onramp) {
   min-height: 586px;
 }
 
+/* Connect keeps our header, so its exact height is the sum of the chrome above
+   the widget: 16px top inset + 24px header row + 16px gap + 585px iframe + 2px
+   borders (border-box). Matching it here means the setup → iframe hand-off
+   settles on one height instead of overshooting and snapping back. */
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"] .rs-fiat-onramp) {
-  min-height: 585px;
+  min-height: 643px;
+}
+
+/* In the iframe phase the Swapped widget owns the modal's bottom edge (fiat owns
+   all four corners; Connect owns the bottom two, under our header), so the shell
+   corner takes the widget's 28px instead of our default 16px. Left at 16px, our
+   border would trace a tighter arc than the widget inside it and those corners
+   would show a sliver of modal background between the two curves — plus the
+   widget's own drop shadow. Kept uniform so the shell stays one shape, and
+   scoped to this phase only — every other screen keeps 16px. */
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"] .rs-fiat-onramp),
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"] .rs-fiat-onramp) {
+  border-radius: 28px;
 }
 
 /* =============================================================================
@@ -5621,15 +5753,17 @@
   }
 
   /* Swapped/fiat/exchange flows pre-reserve a tall desktop iframe height
-     (min-height 585-699px) plus a 445px max-width. On a phone that would force
-     the sheet taller than the screen and push its top chrome out of reach, so
-     cap it to the sheet height and let the body scroll. Specificity (0,4,0)
-     matches the tallest :has() sizing rule and, appended last, wins the tie. */
+     (min-height 585-699px), a 445px max-width, and a 28px shell radius. On a
+     phone that would force the sheet taller than the screen and round its
+     bottom corners away from the viewport edge, so restore the bottom-sheet
+     dimensions and top-only radius. Specificity (0,4,0) matches the iframe
+     phase :has() rules and, appended last, wins the tie. */
   .rs-modal-overlay .rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"]),
   .rs-modal-overlay .rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) {
     max-width: none;
     min-height: 0;
     max-height: min(92dvh, calc(100dvh - 24px));
+    border-radius: 16px 16px 0 0;
   }
 
   /* The history panel is a long, scrollable list overlaid position:absolute, so