@rhinestone/deposit-modal 0.3.1 → 0.4.0

package/dist/polymarket.mjs

@@ -2,9 +2,9 @@ import {
   POLYMARKET_POLYGON_CHAIN_ID,
   fetchPolymarketProxyWallet,
   readPolymarketBalances
-} from "./chunk-BAEB5AFZ.mjs";
-import "./chunk-TQ2AYMWS.mjs";
-import "./chunk-6YRDD462.mjs";
+} from "./chunk-FJWLC4AM.mjs";
+import "./chunk-F7P4MV72.mjs";
+import "./chunk-WJX3TJFK.mjs";
 
 // src/core/dapp-imports/polymarket/account.ts
 import {

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;
@@ -4482,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 {
@@ -4500,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
@@ -4693,7 +4825,6 @@
 .rs-list-row-meta-icons {
   display: flex;
   align-items: center;
-  gap: 4px;
 }
 
 .rs-list-row-meta-icons > * {
@@ -4703,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,
@@ -4712,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;
@@ -4794,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;
@@ -4815,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);
 }
@@ -4826,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;
@@ -4863,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;
 }
 
@@ -4917,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;
@@ -4951,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
@@ -4992,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-RzfAD14B.d.ts → types-CFRuisqK.d.cts}

@@ -231,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-RzfAD14B.d.cts → types-CFRuisqK.d.ts}

@@ -231,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,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkLEL6GMEQcjs = require('./chunk-LEL6GMEQ.cjs');
-require('./chunk-MQIJZNTP.cjs');
-require('./chunk-AJHFNHG3.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 = _chunkLEL6GMEQcjs.WithdrawModal;
+exports.WithdrawModal = _chunkAE5LHTPMcjs.WithdrawModal;

package/dist/withdraw.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { n as WithdrawModalProps } from './types-RzfAD14B.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-RzfAD14B.cjs';
+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.Element;

package/dist/withdraw.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { n as WithdrawModalProps } from './types-RzfAD14B.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-RzfAD14B.js';
+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.Element;

package/dist/withdraw.mjs

@@ -1,9 +1,9 @@
 import {
   WithdrawModal
-} from "./chunk-DZQD3DAV.mjs";
-import "./chunk-3C35DVPE.mjs";
-import "./chunk-TQ2AYMWS.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.1",
+  "version": "0.4.0",
   "description": "React modal component for Rhinestone cross-chain deposits",
   "author": "Rhinestone <dev@rhinestone.wtf>",
   "bugs": {