@rhinestone/deposit-modal 0.4.0 → 0.4.2

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import {
   DepositModal
-} from "./chunk-3PVDRSJ7.mjs";
+} from "./chunk-ANPDY6NJ.mjs";
 import "./chunk-FJWLC4AM.mjs";
 import {
   WithdrawModal
-} from "./chunk-WCIGOV34.mjs";
-import "./chunk-GKC22JC4.mjs";
+} from "./chunk-7JVBUMFE.mjs";
+import "./chunk-7EQQD7B4.mjs";
 import "./chunk-F7P4MV72.mjs";
 import {
   CHAIN_BY_ID,

package/dist/styles.css

@@ -4595,19 +4595,39 @@
 
 /* Segmented toggle (Crypto / Cash) — Figma "toggle container". */
 .rs-segmented {
-  display: inline-flex;
+  position: relative;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
   align-items: center;
-  gap: 2px;
-  padding: 2px;
+  padding: var(--rs-segmented-inset);
   background: var(--rs-segmented-track);
   border-radius: var(--rs-radius-full);
+  isolation: isolate;
+}
+
+.rs-segmented-thumb {
+  position: absolute;
+  z-index: 0;
+  top: var(--rs-segmented-inset);
+  bottom: var(--rs-segmented-inset);
+  left: calc(var(--rs-segmented-inset) + var(--rs-segmented-thumb-offset));
+  width: var(--rs-segmented-thumb-width);
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-segmented-active-bg);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  transition: left 180ms ease;
+  pointer-events: none;
 }
 
 .rs-segmented-option {
+  position: relative;
+  z-index: 1;
   appearance: none;
   border: 0;
   background: transparent;
   padding: 5px 12px;
+  min-width: 70px;
   border-radius: var(--rs-radius-full);
   font-family: inherit;
   font-size: 13px;
@@ -4616,9 +4636,7 @@
   color: var(--rs-segmented-idle-fg);
   cursor: pointer;
   transition:
-    background-color 0.15s,
-    color 0.15s,
-    box-shadow 0.15s;
+    color 0.15s;
 }
 
 .rs-segmented-option:focus-visible {
@@ -4627,9 +4645,7 @@
 }
 
 .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.
@@ -4852,17 +4868,27 @@
   display: block;
 }
 
-/* Card-network chips: wider rounded tiles rather than circles. */
-.rs-list-row-meta-icons--cards > * {
-  width: 26px;
+.rs-list-row-meta-icons--exchanges > * {
+  border-radius: 4px;
+}
+
+/* Card-network chips: exported Figma tiles are all 38×24. */
+.rs-list-row-meta-icons--cards > .rs-card-network {
+  width: 29px;
   height: 18px;
-  border-radius: 3px;
-  overflow: visible;
+  border-radius: 3.25px;
+  overflow: hidden;
+  background: transparent;
   box-shadow: none;
 }
 
-.rs-list-row-meta-icons--cards > * + * {
-  margin-left: -4px;
+.rs-list-row-meta-icons--cards > .rs-card-network + .rs-card-network {
+  margin-left: -7px;
+}
+
+.rs-list-row-meta-icons--cards .rs-card-network svg {
+  width: 100%;
+  height: 100%;
 }
 
 .rs-list-row-chevron {
@@ -4906,10 +4932,13 @@
    ============================================================================= */
 
 /* `.rs-fiat-onramp` is a marker class on the .rs-screen root so the
-   modal-content `:has()` rules below can size correctly. Layout (padding,
-   gap, flex direction) comes from .rs-screen itself, identical to
-   ConnectStep — keeps the top of the page visually unchanged across the
-   payment-method picker → Swapped iframe transition. */
+   modal-content `:has()` rules below can size correctly. The Swapped iframe
+   phase intentionally omits the BodyHeader so the embedded widget starts
+   immediately below the modal nav chrome. */
+
+.rs-fiat-onramp-body {
+  gap: 0;
+}
 
 .rs-fiat-onramp-banner {
   display: flex;
@@ -5099,9 +5128,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: 10px;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
   background: var(--rs-surface);
   color: #71717b;
   overflow: hidden;
@@ -5121,9 +5150,11 @@
   background: transparent;
 }
 
+.rs-exchange-card-logo--brand img,
 .rs-exchange-card-logo--brand svg {
   width: 100%;
   height: 100%;
+  object-fit: cover;
 }
 
 .rs-exchange-card-name {
@@ -5201,11 +5232,11 @@
    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: 795px;
+  min-height: 699px;
 }
 .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) {
-  min-height: 794px;
+  min-height: 698px;
 }
 
 /* =============================================================================
@@ -5260,15 +5291,21 @@
   padding: 16px 0;
 }
 
-/* Dotted vertical connector between adjacent step markers. */
+/* Dashed vertical connector between adjacent step markers. */
 .rs-swapped-tracker-step + .rs-swapped-tracker-step::before {
   content: "";
   position: absolute;
   top: -14px;
   right: 11px;
-  width: 0;
+  width: 2px;
   height: 28px;
-  border-left: 1.5px dotted #d4d4d8;
+  background: repeating-linear-gradient(
+    to bottom,
+    #5f5f5f 0,
+    #5f5f5f 3px,
+    transparent 3px,
+    transparent 7px
+  );
 }
 
 .rs-swapped-tracker-step-label {
@@ -5292,7 +5329,8 @@
 }
 
 .rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker {
-  border-color: #d4d4d8;
+  border-color: transparent;
+  border-width: 0;
   background: transparent;
   /* Spinner SVG uses currentColor; base marker class sets color:transparent
      for the (hidden) ring glyph — re-establish a visible color here so the
@@ -5301,8 +5339,10 @@
 }
 
 .rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker .rs-spinner {
-  width: 14px;
-  height: 14px;
+  display: block;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
 }
 
 /* Satisfying scale-pop when a step ticks complete — the color transition
@@ -5370,13 +5410,13 @@
   background: var(--rs-border);
 }
 
-.rs-modal[data-theme="dark"] .rs-swapped-tracker-step + .rs-swapped-tracker-step::before {
-  border-left-color: #3f3f46;
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--pending .rs-swapped-tracker-step-marker {
+  border-color: #3f3f46;
 }
 
-.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--pending .rs-swapped-tracker-step-marker,
 .rs-modal[data-theme="dark"] .rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker {
-  border-color: #3f3f46;
+  border-color: transparent;
+  color: #fafafa;
 }
 
 .rs-modal[data-theme="dark"] .rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker {

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

@@ -95,6 +95,13 @@ interface DepositModalUIConfig {
      * "Fees are sponsored" / "Fees apply" message based on `feeSponsored`.
      */
     feeTooltip?: string;
+    /**
+     * Run the liquidity check before the amount step continues. Off by default:
+     * the check adds an orchestrator round-trip per continue and its low/unavailable
+     * result isn't surfaced anyway, so skipping it makes the route faster. Enable
+     * to gate continue on liquidity and show the unavailable/check-failed warning.
+     */
+    checkLiquidity?: boolean;
 }
 interface ConnectedEventData {
     address: Address;

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

@@ -95,6 +95,13 @@ interface DepositModalUIConfig {
      * "Fees are sponsored" / "Fees apply" message based on `feeSponsored`.
      */
     feeTooltip?: string;
+    /**
+     * Run the liquidity check before the amount step continues. Off by default:
+     * the check adds an orchestrator round-trip per continue and its low/unavailable
+     * result isn't surfaced anyway, so skipping it makes the route faster. Enable
+     * to gate continue on liquidity and show the unavailable/check-failed warning.
+     */
+    checkLiquidity?: boolean;
 }
 interface ConnectedEventData {
     address: Address;

package/dist/withdraw.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkAE5LHTPMcjs = require('./chunk-AE5LHTPM.cjs');
-require('./chunk-OQVLEVNR.cjs');
+var _chunkPNN2YBPFcjs = require('./chunk-PNN2YBPF.cjs');
+require('./chunk-EDUWRMQI.cjs');
 require('./chunk-UEKPBRBY.cjs');
 require('./chunk-ABVRVW3P.cjs');
 
 
-exports.WithdrawModal = _chunkAE5LHTPMcjs.WithdrawModal;
+exports.WithdrawModal = _chunkPNN2YBPFcjs.WithdrawModal;

package/dist/withdraw.d.cts

@@ -1,6 +1,6 @@
 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 { n as WithdrawModalProps } from './types-CUOqIIvZ.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-CUOqIIvZ.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-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 { n as WithdrawModalProps } from './types-CUOqIIvZ.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-CUOqIIvZ.js';
 import 'viem';
 
 declare function WithdrawModal(props: WithdrawModalProps): react.JSX.Element;

package/dist/withdraw.mjs

@@ -1,7 +1,7 @@
 import {
   WithdrawModal
-} from "./chunk-WCIGOV34.mjs";
-import "./chunk-GKC22JC4.mjs";
+} from "./chunk-7JVBUMFE.mjs";
+import "./chunk-7EQQD7B4.mjs";
 import "./chunk-F7P4MV72.mjs";
 import "./chunk-WJX3TJFK.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhinestone/deposit-modal",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "React modal component for Rhinestone cross-chain deposits",
   "author": "Rhinestone <dev@rhinestone.wtf>",
   "bugs": {