@rhinestone/deposit-modal 0.3.0 → 0.4.0

package/dist/styles.css

@@ -77,6 +77,11 @@
   --rs-button-ghost-bg: #e4e4e7;
   --rs-button-ghost-bg-hover: #d4d4d8;
   --rs-button-ghost-text: #27272a;
+  /* Segmented toggle (Crypto/Cash) — track + raised selected pill. */
+  --rs-segmented-track: #e4e4e7;
+  --rs-segmented-active-bg: #ffffff;
+  --rs-segmented-active-fg: #18181b;
+  --rs-segmented-idle-fg: #52525c;
 
   /* Primary (CTA). Default theme uses the dark-on-light pair.
      A custom theme overrides these directly via inline CSS vars,
@@ -218,6 +223,11 @@
   --rs-button-ghost-bg: #27272a;
   --rs-button-ghost-bg-hover: #3f3f46;
   --rs-button-ghost-text: #e4e4e7;
+  /* Segmented toggle (Crypto/Cash) — dark track + raised selected pill. */
+  --rs-segmented-track: #27272a;
+  --rs-segmented-active-bg: #52525c;
+  --rs-segmented-active-fg: #fafafa;
+  --rs-segmented-idle-fg: #9f9fa9;
   --rs-surface-hover: #3f3f46;
   /* Figma coin-select/selected (dark) — zinc-900 fill + zinc-700 border. */
   --rs-asset-selected-bg: #18181b;
@@ -2229,6 +2239,75 @@
   width: 100%;
 }
 
+/* Expandable "Fees" row on the Swapped receipt. Summary matches a detail row;
+   the breakdown reveals below. */
+.rs-fees-accordion {
+  display: flex;
+  flex-direction: column;
+}
+
+.rs-fees-accordion-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 0;
+  background: none;
+  border: 0;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-muted);
+  cursor: pointer;
+}
+
+.rs-fees-accordion-summary:disabled {
+  cursor: default;
+}
+
+.rs-fees-accordion-summary:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.rs-fees-accordion-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--rs-muted);
+  transition: transform 0.18s ease;
+}
+
+.rs-fees-accordion-chevron svg {
+  width: 16px;
+  height: 16px;
+}
+
+.rs-fees-accordion-chevron--open {
+  transform: rotate(180deg);
+}
+
+.rs-fees-accordion-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.rs-fees-accordion-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: normal;
+  color: var(--rs-muted);
+}
+
 .rs-review-detail-row {
   display: flex;
   align-items: center;
@@ -3378,6 +3457,40 @@
   border-radius: 8px;
 }
 
+/* DappImportAssetSelectSkeleton rows. `-fill` floods a shaped container
+   (token icon / chain badge circles); `-text` mimics a one-line text block
+   at the asset row's font sizes. */
+.rs-skeleton-fill {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.rs-skeleton-text {
+  display: inline-block;
+  height: 12px;
+  border-radius: 6px;
+}
+
+.rs-skeleton-text--name {
+  width: 96px;
+  height: 14px;
+}
+
+.rs-skeleton-text--balance {
+  width: 64px;
+}
+
+.rs-skeleton-text--usd {
+  width: 48px;
+}
+
+.rs-asset-row--skeleton {
+  cursor: default;
+  pointer-events: none;
+}
+
 /* Inline placeholder sized to the fee value (e.g. "$0.04") while the
    pre-deposit quote resolves. Stays put if the quote fails. */
 .rs-skeleton-fee {
@@ -4448,6 +4561,20 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
+  min-width: 0;
+}
+
+/* Row that holds the title/subtitle block plus an optional right-aligned
+   aside (the Crypto/Cash toggle on the method picker). */
+.rs-body-header-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.rs-body-header-aside {
+  flex-shrink: 0;
 }
 
 .rs-body-header-title {
@@ -4466,6 +4593,45 @@
   margin: 0;
 }
 
+/* Segmented toggle (Crypto / Cash) — Figma "toggle container". */
+.rs-segmented {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  background: var(--rs-segmented-track);
+  border-radius: var(--rs-radius-full);
+}
+
+.rs-segmented-option {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 5px 12px;
+  border-radius: var(--rs-radius-full);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--rs-segmented-idle-fg);
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s,
+    box-shadow 0.15s;
+}
+
+.rs-segmented-option:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
+.rs-segmented-option--active {
+  background: var(--rs-segmented-active-bg);
+  color: var(--rs-segmented-active-fg);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
 /* Ticker — per-digit odometer-style animation for the live timer.
    Each slot clips its content; the outgoing digit slides up and out while
    the incoming digit slides up from below. Static chars (e.g. ":") never
@@ -4659,7 +4825,6 @@
 .rs-list-row-meta-icons {
   display: flex;
   align-items: center;
-  gap: 4px;
 }
 
 .rs-list-row-meta-icons > * {
@@ -4669,6 +4834,15 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  /* Ring in the row's surface color so overlapping marks read cleanly. */
+  box-shadow: 0 0 0 1.5px var(--rs-background-secondary);
+}
+
+/* Overlap each subsequent mark for the stacked-cluster look. */
+.rs-list-row-meta-icons > * + * {
+  margin-left: -6px;
 }
 
 .rs-list-row-meta-icons img,
@@ -4678,6 +4852,19 @@
   display: block;
 }
 
+/* Card-network chips: wider rounded tiles rather than circles. */
+.rs-list-row-meta-icons--cards > * {
+  width: 26px;
+  height: 18px;
+  border-radius: 3px;
+  overflow: visible;
+  box-shadow: none;
+}
+
+.rs-list-row-meta-icons--cards > * + * {
+  margin-left: -4px;
+}
+
 .rs-list-row-chevron {
   flex-shrink: 0;
   width: 16px;
@@ -4760,14 +4947,14 @@
   color: var(--rs-muted);
 }
 
-/* Iframe wrap sized to Swapped's documented dimensions — 400×482 for the
+/* Iframe wrap sized to Swapped's documented dimensions — 400×586 for the
    fiat on-ramp, 445×585 for Connect (overrides below). Centered horizontally
    inside the modal so the step body can have header padding. */
 .rs-fiat-onramp-iframe-wrap {
   position: relative;
   width: 100%;
   max-width: 400px;
-  min-height: 482px;
+  min-height: 586px;
   margin: 0 auto;
   border-radius: var(--rs-radius);
   overflow: hidden;
@@ -4781,8 +4968,8 @@
 .rs-fiat-onramp-iframe {
   display: block;
   width: 100%;
-  height: 482px;
-  min-height: 482px;
+  height: 586px;
+  min-height: 586px;
   border: 0;
   background: var(--rs-background);
 }
@@ -4792,6 +4979,51 @@
   min-height: 585px;
 }
 
+/* Finalising deposit — compact centered spinner screen (Swapped Connect). */
+.rs-finalising-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 32px 0 24px;
+  text-align: center;
+}
+
+.rs-finalising-spinner {
+  display: inline-flex;
+  color: var(--color-blue10);
+}
+
+.rs-finalising-spinner .rs-spinner {
+  width: 56px;
+  height: 56px;
+}
+
+.rs-finalising-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.rs-finalising-title {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--rs-foreground);
+  margin: 0;
+}
+
+.rs-finalising-subtitle {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--rs-muted);
+  margin: 0;
+  max-width: 280px;
+}
+
 .rs-fiat-onramp-loading,
 .rs-fiat-onramp-error {
   position: absolute;
@@ -4829,7 +5061,7 @@
 
 .rs-exchange-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
 }
 
@@ -4883,6 +5115,17 @@
   object-fit: contain;
 }
 
+/* Bundled branded logos fill the tile edge-to-edge (their own brand-colour
+   background), clipped to the tile's rounded corners. */
+.rs-exchange-card-logo--brand {
+  background: transparent;
+}
+
+.rs-exchange-card-logo--brand svg {
+  width: 100%;
+  height: 100%;
+}
+
 .rs-exchange-card-name {
   width: 100%;
   min-width: 0;
@@ -4917,12 +5160,12 @@
    Modal sizing for the Swapped iframe step
    =============================================================================
    Modal stays at the default 400px width for the fiat variant (matches
-   Swapped's 400×482 iframe edge-to-edge). Connect needs 445px because its
+   Swapped's 400×586 iframe edge-to-edge). Connect needs 445px because its
    iframe is 445×585. Height grows with the Rhinestone chrome (header
    icon/title/subtitle + iframe + PoweredBy); cap to viewport so smaller
    laptops get a scrollable modal-body instead of overflowing the screen. */
 
-/* Connect's iframe is 445×585 (vs fiat's 400×482). To preserve the same
+/* Connect's iframe is 445×585 (vs fiat's 400×586). To preserve the same
    12px horizontal padding as ConnectStep while still giving Swapped's
    Connect iframe its documented width, widen the modal by 24px (12 each
    side) → 469px. Applied from the moment the user enters exchange-connect
@@ -4958,7 +5201,7 @@
    when the iframe→tracker phase swap fires. */
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"][data-step-type="setup"]),
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"] .rs-fiat-onramp) {
-  min-height: 691px;
+  min-height: 795px;
 }
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"][data-step-type="setup"]),
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"] .rs-fiat-onramp) {

package/dist/{types-BMcGO5k_.d.cts → types-CFRuisqK.d.cts}

@@ -212,6 +212,15 @@ interface DepositModalProps {
      * entry screen.
      */
     dappImports?: DappImportsConfig;
+    /**
+     * Open the modal pre-routed into a dapp-import provider, skipping the
+     * deposit-method home screen. Must name an enabled `dappImports` key
+     * (e.g. "polymarket"); disabled/unknown values are a no-op. While the
+     * provider's balances are checked the modal shows a loading skeleton;
+     * if the flow turns out to be unreachable (no account, no balance, no
+     * wallet) it falls back to the home screen.
+     */
+    initialDappImport?: keyof DappImportsConfig;
     /** Show fiat on-ramp option(s) that embed Swapped's iframe. Default: false. */
     enableFiatOnramp?: boolean;
     /** Show the Transfer Crypto / QR row. Default: true. */
@@ -222,7 +231,7 @@ interface DepositModalProps {
      */
     fiatOnrampMethods?: FiatPaymentMethodOption[];
     /**
-     * Show a "Fund from Exchange" row that opens Swapped Connect — the user
+     * Show a "Connect exchange" row that opens Swapped Connect — the user
      * picks their CEX (Coinbase, Binance, Kraken…) or wallet inside the iframe
      * and Swapped pulls the crypto on-chain to the smart account. Default: false.
      */

package/dist/{types-BMcGO5k_.d.ts → types-CFRuisqK.d.ts}

@@ -212,6 +212,15 @@ interface DepositModalProps {
      * entry screen.
      */
     dappImports?: DappImportsConfig;
+    /**
+     * Open the modal pre-routed into a dapp-import provider, skipping the
+     * deposit-method home screen. Must name an enabled `dappImports` key
+     * (e.g. "polymarket"); disabled/unknown values are a no-op. While the
+     * provider's balances are checked the modal shows a loading skeleton;
+     * if the flow turns out to be unreachable (no account, no balance, no
+     * wallet) it falls back to the home screen.
+     */
+    initialDappImport?: keyof DappImportsConfig;
     /** Show fiat on-ramp option(s) that embed Swapped's iframe. Default: false. */
     enableFiatOnramp?: boolean;
     /** Show the Transfer Crypto / QR row. Default: true. */
@@ -222,7 +231,7 @@ interface DepositModalProps {
      */
     fiatOnrampMethods?: FiatPaymentMethodOption[];
     /**
-     * Show a "Fund from Exchange" row that opens Swapped Connect — the user
+     * Show a "Connect exchange" row that opens Swapped Connect — the user
      * picks their CEX (Coinbase, Binance, Kraken…) or wallet inside the iframe
      * and Swapped pulls the crypto on-chain to the smart account. Default: false.
      */

package/dist/withdraw.cjs

@@ -1,8 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk2SMS542Qcjs = require('./chunk-2SMS542Q.cjs');
-require('./chunk-RABZINV3.cjs');
-require('./chunk-MILJQWPT.cjs');
+var _chunkAE5LHTPMcjs = require('./chunk-AE5LHTPM.cjs');
+require('./chunk-OQVLEVNR.cjs');
+require('./chunk-UEKPBRBY.cjs');
+require('./chunk-ABVRVW3P.cjs');
 
 
-exports.WithdrawModal = _chunk2SMS542Qcjs.WithdrawModal;
+exports.WithdrawModal = _chunkAE5LHTPMcjs.WithdrawModal;

package/dist/withdraw.d.cts

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { n as WithdrawModalProps } from './types-BMcGO5k_.cjs';
-export { A as AssetOption, a as ConnectedEventData, E as ErrorEventData, S as SafeTransactionRequest, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, o as WithdrawSubmittedEventData } from './types-BMcGO5k_.cjs';
+import * as react from 'react';
+import { n as WithdrawModalProps } from './types-CFRuisqK.cjs';
+export { A as AssetOption, a as ConnectedEventData, E as ErrorEventData, S as SafeTransactionRequest, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, o as WithdrawSubmittedEventData } from './types-CFRuisqK.cjs';
 import 'viem';
 
-declare function WithdrawModal(props: WithdrawModalProps): react_jsx_runtime.JSX.Element;
+declare function WithdrawModal(props: WithdrawModalProps): react.JSX.Element;
 declare namespace WithdrawModal {
     var displayName: string;
 }

package/dist/withdraw.d.ts

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { n as WithdrawModalProps } from './types-BMcGO5k_.js';
-export { A as AssetOption, a as ConnectedEventData, E as ErrorEventData, S as SafeTransactionRequest, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, o as WithdrawSubmittedEventData } from './types-BMcGO5k_.js';
+import * as react from 'react';
+import { n as WithdrawModalProps } from './types-CFRuisqK.js';
+export { A as AssetOption, a as ConnectedEventData, E as ErrorEventData, S as SafeTransactionRequest, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, o as WithdrawSubmittedEventData } from './types-CFRuisqK.js';
 import 'viem';
 
-declare function WithdrawModal(props: WithdrawModalProps): react_jsx_runtime.JSX.Element;
+declare function WithdrawModal(props: WithdrawModalProps): react.JSX.Element;
 declare namespace WithdrawModal {
     var displayName: string;
 }

package/dist/withdraw.mjs

@@ -1,8 +1,9 @@
 import {
   WithdrawModal
-} from "./chunk-TKQYTBU6.mjs";
-import "./chunk-KAWJABTW.mjs";
-import "./chunk-6YRDD462.mjs";
+} from "./chunk-WCIGOV34.mjs";
+import "./chunk-GKC22JC4.mjs";
+import "./chunk-F7P4MV72.mjs";
+import "./chunk-WJX3TJFK.mjs";
 export {
   WithdrawModal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhinestone/deposit-modal",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React modal component for Rhinestone cross-chain deposits",
   "author": "Rhinestone <dev@rhinestone.wtf>",
   "bugs": {
@@ -51,6 +51,11 @@
         "default": "./dist/constants.cjs"
       }
     },
+    "./polymarket": {
+      "types": "./dist/polymarket.d.ts",
+      "import": "./dist/polymarket.mjs",
+      "require": "./dist/polymarket.cjs"
+    },
     "./styles.css": {
       "types": "./dist/styles.d.ts",
       "default": "./dist/styles.css"
@@ -169,6 +174,14 @@
         "porto",
         "porto/internal"
       ]
+    },
+    {
+      "name": "Headless Polymarket Account",
+      "path": "dist/polymarket.mjs",
+      "limit": "3 kB",
+      "ignore": [
+        "viem"
+      ]
     }
   ],
   "keywords": [
@@ -187,4 +200,4 @@
   "overrides": {
     "@reown/appkit-common": "1.8.20"
   }
-}
+}