@rhinestone/deposit-modal 0.3.0-alpha.12 → 0.3.0-alpha.13

package/dist/{chunk-QXIJLRKC.mjs → chunk-YB3JPWJW.mjs}

@@ -1,6 +1,6 @@
 import {
   isUnsupportedChainSwitchError
-} from "./chunk-WVE3JN3C.mjs";
+} from "./chunk-6K4JHM2D.mjs";
 import {
   SUPPORTED_CHAINS,
   getChainName

package/dist/deposit.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkI5G5ULRPcjs = require('./chunk-I5G5ULRP.cjs');
-require('./chunk-2TWQGPPB.cjs');
+var _chunkSEOQ66FWcjs = require('./chunk-SEOQ66FW.cjs');
+require('./chunk-DZNXG5JK.cjs');
 require('./chunk-7JIDIX27.cjs');
 
 
-exports.DepositModal = _chunkI5G5ULRPcjs.DepositModal;
+exports.DepositModal = _chunkSEOQ66FWcjs.DepositModal;

package/dist/deposit.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { f as DepositModalProps } from './types-D6wrO4Ow.cjs';
-export { A as AssetOption, a as ConnectedEventData, D as DappImportsConfig, c as DepositCompleteEventData, d as DepositFailedEventData, g as DepositModalTheme, h as DepositModalUIConfig, i as DepositSubmittedEventData, E as ErrorEventData } from './types-D6wrO4Ow.cjs';
+import { f as DepositModalProps } from './types-C8i2ebY1.cjs';
+export { A as AssetOption, a as ConnectedEventData, D as DappImportsConfig, c as DepositCompleteEventData, d as DepositFailedEventData, g as DepositModalTheme, h as DepositModalUIConfig, i as DepositSubmittedEventData, E as ErrorEventData } from './types-C8i2ebY1.cjs';
 import 'viem';
 
 declare function DepositModal(props: DepositModalProps): react_jsx_runtime.JSX.Element;

package/dist/deposit.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { f as DepositModalProps } from './types-D6wrO4Ow.js';
-export { A as AssetOption, a as ConnectedEventData, D as DappImportsConfig, c as DepositCompleteEventData, d as DepositFailedEventData, g as DepositModalTheme, h as DepositModalUIConfig, i as DepositSubmittedEventData, E as ErrorEventData } from './types-D6wrO4Ow.js';
+import { f as DepositModalProps } from './types-C8i2ebY1.js';
+export { A as AssetOption, a as ConnectedEventData, D as DappImportsConfig, c as DepositCompleteEventData, d as DepositFailedEventData, g as DepositModalTheme, h as DepositModalUIConfig, i as DepositSubmittedEventData, E as ErrorEventData } from './types-C8i2ebY1.js';
 import 'viem';
 
 declare function DepositModal(props: DepositModalProps): react_jsx_runtime.JSX.Element;

package/dist/deposit.mjs

@@ -1,7 +1,7 @@
 import {
   DepositModal
-} from "./chunk-HR6BABPX.mjs";
-import "./chunk-WVE3JN3C.mjs";
+} from "./chunk-HZBO2SIZ.mjs";
+import "./chunk-6K4JHM2D.mjs";
 import "./chunk-SZIYS42B.mjs";
 export {
   DepositModal

package/dist/index.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkI5G5ULRPcjs = require('./chunk-I5G5ULRP.cjs');
+var _chunkSEOQ66FWcjs = require('./chunk-SEOQ66FW.cjs');
 
 
-var _chunkYI63OMXNcjs = require('./chunk-YI63OMXN.cjs');
-require('./chunk-2TWQGPPB.cjs');
+var _chunk6RCOF3XUcjs = require('./chunk-6RCOF3XU.cjs');
+require('./chunk-DZNXG5JK.cjs');
 
 
 
@@ -79,4 +79,4 @@ async function disconnectWallet() {
 
 
 
-exports.CHAIN_BY_ID = _chunk7JIDIX27cjs.CHAIN_BY_ID; exports.DEFAULT_BACKEND_URL = _chunk7JIDIX27cjs.DEFAULT_BACKEND_URL; exports.DEFAULT_SIGNER_ADDRESS = _chunk7JIDIX27cjs.DEFAULT_SIGNER_ADDRESS; exports.DepositModal = _chunkI5G5ULRPcjs.DepositModal; exports.NATIVE_TOKEN_ADDRESS = _chunk7JIDIX27cjs.NATIVE_TOKEN_ADDRESS; exports.SOURCE_CHAINS = _chunk7JIDIX27cjs.SOURCE_CHAINS; exports.SUPPORTED_CHAINS = _chunk7JIDIX27cjs.SUPPORTED_CHAINS; exports.WithdrawModal = _chunkYI63OMXNcjs.WithdrawModal; exports.chainRegistry = _chunk7JIDIX27cjs.chainRegistry; exports.disconnectWallet = disconnectWallet; exports.findChainIdForToken = _chunk7JIDIX27cjs.findChainIdForToken; exports.getChainBadge = _chunk7JIDIX27cjs.getChainBadge; exports.getChainIcon = _chunk7JIDIX27cjs.getChainIcon; exports.getChainId = _chunk7JIDIX27cjs.getChainId; exports.getChainName = _chunk7JIDIX27cjs.getChainName; exports.getChainObject = _chunk7JIDIX27cjs.getChainObject; exports.getExplorerName = _chunk7JIDIX27cjs.getExplorerName; exports.getExplorerTxUrl = _chunk7JIDIX27cjs.getExplorerTxUrl; exports.getExplorerUrl = _chunk7JIDIX27cjs.getExplorerUrl; exports.getSupportedChainIds = _chunk7JIDIX27cjs.getSupportedChainIds; exports.getSupportedTargetTokens = _chunk7JIDIX27cjs.getSupportedTargetTokens; exports.getSupportedTokenSymbolsForChain = _chunk7JIDIX27cjs.getSupportedTokenSymbolsForChain; exports.getTargetTokenSymbolsForChain = _chunk7JIDIX27cjs.getTargetTokenSymbolsForChain; exports.getTokenAddress = _chunk7JIDIX27cjs.getTokenAddress; exports.getTokenDecimals = _chunk7JIDIX27cjs.getTokenDecimals; exports.getTokenDecimalsByAddress = _chunk7JIDIX27cjs.getTokenDecimalsByAddress; exports.getTokenIcon = _chunk7JIDIX27cjs.getTokenIcon; exports.getTokenSymbol = _chunk7JIDIX27cjs.getTokenSymbol; exports.getUsdcAddress = _chunk7JIDIX27cjs.getUsdcAddress; exports.getUsdcDecimals = _chunk7JIDIX27cjs.getUsdcDecimals; exports.isSupportedTokenAddressForChain = _chunk7JIDIX27cjs.isSupportedTokenAddressForChain;
+exports.CHAIN_BY_ID = _chunk7JIDIX27cjs.CHAIN_BY_ID; exports.DEFAULT_BACKEND_URL = _chunk7JIDIX27cjs.DEFAULT_BACKEND_URL; exports.DEFAULT_SIGNER_ADDRESS = _chunk7JIDIX27cjs.DEFAULT_SIGNER_ADDRESS; exports.DepositModal = _chunkSEOQ66FWcjs.DepositModal; exports.NATIVE_TOKEN_ADDRESS = _chunk7JIDIX27cjs.NATIVE_TOKEN_ADDRESS; exports.SOURCE_CHAINS = _chunk7JIDIX27cjs.SOURCE_CHAINS; exports.SUPPORTED_CHAINS = _chunk7JIDIX27cjs.SUPPORTED_CHAINS; exports.WithdrawModal = _chunk6RCOF3XUcjs.WithdrawModal; exports.chainRegistry = _chunk7JIDIX27cjs.chainRegistry; exports.disconnectWallet = disconnectWallet; exports.findChainIdForToken = _chunk7JIDIX27cjs.findChainIdForToken; exports.getChainBadge = _chunk7JIDIX27cjs.getChainBadge; exports.getChainIcon = _chunk7JIDIX27cjs.getChainIcon; exports.getChainId = _chunk7JIDIX27cjs.getChainId; exports.getChainName = _chunk7JIDIX27cjs.getChainName; exports.getChainObject = _chunk7JIDIX27cjs.getChainObject; exports.getExplorerName = _chunk7JIDIX27cjs.getExplorerName; exports.getExplorerTxUrl = _chunk7JIDIX27cjs.getExplorerTxUrl; exports.getExplorerUrl = _chunk7JIDIX27cjs.getExplorerUrl; exports.getSupportedChainIds = _chunk7JIDIX27cjs.getSupportedChainIds; exports.getSupportedTargetTokens = _chunk7JIDIX27cjs.getSupportedTargetTokens; exports.getSupportedTokenSymbolsForChain = _chunk7JIDIX27cjs.getSupportedTokenSymbolsForChain; exports.getTargetTokenSymbolsForChain = _chunk7JIDIX27cjs.getTargetTokenSymbolsForChain; exports.getTokenAddress = _chunk7JIDIX27cjs.getTokenAddress; exports.getTokenDecimals = _chunk7JIDIX27cjs.getTokenDecimals; exports.getTokenDecimalsByAddress = _chunk7JIDIX27cjs.getTokenDecimalsByAddress; exports.getTokenIcon = _chunk7JIDIX27cjs.getTokenIcon; exports.getTokenSymbol = _chunk7JIDIX27cjs.getTokenSymbol; exports.getUsdcAddress = _chunk7JIDIX27cjs.getUsdcAddress; exports.getUsdcDecimals = _chunk7JIDIX27cjs.getUsdcDecimals; exports.isSupportedTokenAddressForChain = _chunk7JIDIX27cjs.isSupportedTokenAddressForChain;

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 export { DepositModal } from './deposit.cjs';
 export { WithdrawModal } from './withdraw.cjs';
-export { A as AssetOption, C as ChainId, a as ConnectedEventData, D as DappImportsConfig, b as DepositAnalyticsEvent, c as DepositCompleteEventData, d as DepositFailedEventData, e as DepositLifecycleEvent, f as DepositModalProps, g as DepositModalTheme, h as DepositModalUIConfig, i as DepositSubmittedEventData, E as ErrorEventData, M as ModalAnalyticsEvent, O as OrderBookSwapAction, j as OutputTokenRule, P as PostBridgeAction, R as RouteConfig, S as SafeTransactionRequest, W as WithdrawAnalyticsEvent, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, m as WithdrawLifecycleEvent, n as WithdrawModalProps, o as WithdrawSubmittedEventData } from './types-D6wrO4Ow.cjs';
+export { A as AssetOption, C as ChainId, a as ConnectedEventData, D as DappImportsConfig, b as DepositAnalyticsEvent, c as DepositCompleteEventData, d as DepositFailedEventData, e as DepositLifecycleEvent, f as DepositModalProps, g as DepositModalTheme, h as DepositModalUIConfig, i as DepositSubmittedEventData, E as ErrorEventData, M as ModalAnalyticsEvent, O as OrderBookSwapAction, j as OutputTokenRule, P as PostBridgeAction, R as RouteConfig, S as SafeTransactionRequest, W as WithdrawAnalyticsEvent, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, m as WithdrawLifecycleEvent, n as WithdrawModalProps, o as WithdrawSubmittedEventData } from './types-C8i2ebY1.cjs';
 export { C as CHAIN_BY_ID, D as DEFAULT_BACKEND_URL, a as DEFAULT_SIGNER_ADDRESS, N as NATIVE_TOKEN_ADDRESS, S as SOURCE_CHAINS, b as SUPPORTED_CHAINS, c as chainRegistry, f as findChainIdForToken, g as getChainBadge, d as getChainIcon, e as getChainId, h as getChainName, i as getChainObject, j as getExplorerName, k as getExplorerTxUrl, l as getExplorerUrl, m as getSupportedChainIds, n as getSupportedTargetTokens, o as getSupportedTokenSymbolsForChain, p as getTargetTokenSymbolsForChain, q as getTokenAddress, r as getTokenDecimals, s as getTokenDecimalsByAddress, t as getTokenIcon, u as getTokenSymbol, v as getUsdcAddress, w as getUsdcDecimals, x as isSupportedTokenAddressForChain } from './constants-DqVn968d.cjs';
 import 'react/jsx-runtime';
 import 'viem';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { DepositModal } from './deposit.js';
 export { WithdrawModal } from './withdraw.js';
-export { A as AssetOption, C as ChainId, a as ConnectedEventData, D as DappImportsConfig, b as DepositAnalyticsEvent, c as DepositCompleteEventData, d as DepositFailedEventData, e as DepositLifecycleEvent, f as DepositModalProps, g as DepositModalTheme, h as DepositModalUIConfig, i as DepositSubmittedEventData, E as ErrorEventData, M as ModalAnalyticsEvent, O as OrderBookSwapAction, j as OutputTokenRule, P as PostBridgeAction, R as RouteConfig, S as SafeTransactionRequest, W as WithdrawAnalyticsEvent, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, m as WithdrawLifecycleEvent, n as WithdrawModalProps, o as WithdrawSubmittedEventData } from './types-D6wrO4Ow.js';
+export { A as AssetOption, C as ChainId, a as ConnectedEventData, D as DappImportsConfig, b as DepositAnalyticsEvent, c as DepositCompleteEventData, d as DepositFailedEventData, e as DepositLifecycleEvent, f as DepositModalProps, g as DepositModalTheme, h as DepositModalUIConfig, i as DepositSubmittedEventData, E as ErrorEventData, M as ModalAnalyticsEvent, O as OrderBookSwapAction, j as OutputTokenRule, P as PostBridgeAction, R as RouteConfig, S as SafeTransactionRequest, W as WithdrawAnalyticsEvent, k as WithdrawCompleteEventData, l as WithdrawFailedEventData, m as WithdrawLifecycleEvent, n as WithdrawModalProps, o as WithdrawSubmittedEventData } from './types-C8i2ebY1.js';
 export { C as CHAIN_BY_ID, D as DEFAULT_BACKEND_URL, a as DEFAULT_SIGNER_ADDRESS, N as NATIVE_TOKEN_ADDRESS, S as SOURCE_CHAINS, b as SUPPORTED_CHAINS, c as chainRegistry, f as findChainIdForToken, g as getChainBadge, d as getChainIcon, e as getChainId, h as getChainName, i as getChainObject, j as getExplorerName, k as getExplorerTxUrl, l as getExplorerUrl, m as getSupportedChainIds, n as getSupportedTargetTokens, o as getSupportedTokenSymbolsForChain, p as getTargetTokenSymbolsForChain, q as getTokenAddress, r as getTokenDecimals, s as getTokenDecimalsByAddress, t as getTokenIcon, u as getTokenSymbol, v as getUsdcAddress, w as getUsdcDecimals, x as isSupportedTokenAddressForChain } from './constants-DqVn968d.js';
 import 'react/jsx-runtime';
 import 'viem';

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import {
   DepositModal
-} from "./chunk-HR6BABPX.mjs";
+} from "./chunk-HZBO2SIZ.mjs";
 import {
   WithdrawModal
-} from "./chunk-7MZNQ4C2.mjs";
-import "./chunk-WVE3JN3C.mjs";
+} from "./chunk-EC63ZHY4.mjs";
+import "./chunk-6K4JHM2D.mjs";
 import {
   CHAIN_BY_ID,
   DEFAULT_BACKEND_URL,

package/dist/styles.css

@@ -284,6 +284,11 @@
   /* Cap the modal at 600px (or viewport-40 on tiny screens) so long lists
      scroll inside instead of growing the modal. */
   max-height: min(600px, calc(100vh - 40px));
+  /* Explicit 0 (not the `auto` default) so the min-height transition
+     below has a definite starting value when :has() rules later raise
+     it to the iframe-mounted height. Transitions from `auto` are
+     unreliable in browsers and tend to apply instantly. */
+  min-height: 0;
   display: flex;
   flex-direction: column;
   margin: 20px;
@@ -292,7 +297,18 @@
   border: 1px solid var(--rs-border);
   border-radius: var(--rs-radius-lg);
   transform: scale(0.95);
-  transition: transform 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    /* Smooth resize when the user moves between steps with different
+       widths (e.g. ConnectStep 400 → Connect-via-Swapped 469) instead of
+       a hard pop. */
+    max-width 240ms cubic-bezier(0.22, 1, 0.36, 1),
+    /* Same for height: when a flow starts that pre-reserves the iframe
+       size (via the min-height :has() rules below), grow smoothly from
+       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);
 }
 
 .rs-modal-content[data-theme="dark"] {
@@ -1300,6 +1316,11 @@
   justify-content: center;
   gap: 4px;
   width: 100%;
+  /* `border-box` so the 16px side padding counts INTO the 100% width
+     instead of adding 32px on top of it (which otherwise pushes the
+     footer past containers with their own horizontal padding — e.g.
+     the tracker — and paints a phantom horizontal scrollbar). */
+  box-sizing: border-box;
   padding: 0 16px 16px;
   font-size: 11px;
   font-weight: 500;
@@ -1660,6 +1681,21 @@
      manages the vertical rhythm between body slot and powered-by. */
   padding: 0;
   gap: 16px;
+  /* Each screen fades in on mount so step-to-step transitions feel
+     progressive instead of a hard swap. Short enough that the user
+     doesn't perceive a delay; long enough to look intentional. */
+  animation: rs-screen-enter 180ms ease-out;
+}
+
+@keyframes rs-screen-enter {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Body slot — direct child of .rs-screen. Always uses a 16px internal
@@ -4672,3 +4708,431 @@
   border: 1px solid var(--rs-border);
   background-color: var(--rs-background);
 }
+
+/* =============================================================================
+   Fiat On-Ramp (Swapped iframe flow)
+   ============================================================================= */
+
+/* `.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. */
+
+.rs-fiat-onramp-banner {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+  border-radius: var(--rs-radius-sm);
+  font-size: 12px;
+  line-height: 1.35;
+  border: 1px solid var(--rs-border);
+}
+
+.rs-fiat-onramp-banner--info {
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+}
+
+.rs-fiat-onramp-banner--success {
+  background: rgba(34, 197, 94, 0.08);
+  border-color: rgba(34, 197, 94, 0.35);
+  color: var(--rs-foreground);
+}
+
+.rs-fiat-onramp-banner--warning {
+  background: rgba(234, 179, 8, 0.08);
+  border-color: rgba(234, 179, 8, 0.4);
+  color: var(--rs-foreground);
+}
+
+.rs-fiat-onramp-banner-title {
+  font-weight: 600;
+}
+
+.rs-fiat-onramp-banner-detail {
+  color: var(--rs-muted);
+}
+
+/* Iframe wrap sized to Swapped's documented dimensions — 400×482 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;
+  margin: 0 auto;
+  border-radius: var(--rs-radius);
+  overflow: hidden;
+}
+
+.rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe-wrap {
+  max-width: 445px;
+  min-height: 585px;
+}
+
+.rs-fiat-onramp-iframe {
+  display: block;
+  width: 100%;
+  height: 482px;
+  min-height: 482px;
+  border: 0;
+  background: var(--rs-background);
+}
+
+.rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe {
+  height: 585px;
+  min-height: 585px;
+}
+
+.rs-fiat-onramp-loading,
+.rs-fiat-onramp-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+  background: var(--rs-background);
+  color: var(--rs-foreground);
+  padding: 16px;
+}
+
+.rs-fiat-onramp-retry {
+  padding: 6px 14px;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.rs-fiat-onramp-retry:hover {
+  background: var(--rs-border);
+}
+
+/* =============================================================================
+   Exchange picker (Swapped Connect)
+   ============================================================================= */
+
+.rs-exchange-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.rs-exchange-card {
+  display: flex;
+  min-width: 0;
+  min-height: 104px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 12px 8px;
+  border: 1px solid var(--rs-background-secondary);
+  border-radius: 8px;
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+}
+
+.rs-exchange-card:hover:not(:disabled) {
+  background: var(--rs-surface-hover);
+  border-color: var(--rs-surface-hover);
+}
+
+.rs-exchange-card:focus-visible {
+  outline: 2px solid var(--rs-border-accent);
+  outline-offset: 2px;
+}
+
+.rs-exchange-card-logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: var(--rs-surface);
+  color: #71717b;
+  overflow: hidden;
+}
+
+.rs-exchange-card-logo img,
+.rs-exchange-card-logo svg {
+  width: 28px;
+  height: 28px;
+  display: block;
+  object-fit: contain;
+}
+
+.rs-exchange-card-name {
+  width: 100%;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--rs-foreground);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rs-exchange-select-state {
+  min-height: 184px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--rs-foreground);
+}
+
+.rs-exchange-select-state-title {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+/* =============================================================================
+   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
+   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
+   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
+   mode (`data-flow-mode` on rs-modal-body) — not just the iframe step —
+   so the modal width is stable across SetupStep → SwappedIframeStep.
+   Fiat keeps the default 400px modal; its iframe renders at 376px
+   content-width, matching the visual width of ConnectStep's list rows. */
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) {
+  max-width: 469px;
+}
+
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"]),
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) {
+  max-height: calc(100vh - 40px);
+}
+
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"]) .rs-modal-body,
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) .rs-modal-body {
+  /* `overflow-x: hidden` is explicit because a `visible` x-axis with an
+     `auto` y-axis gets promoted to `auto` on both axes, which paints a
+     phantom horizontal scrollbar even when content fits horizontally. */
+  overflow: hidden auto;
+}
+
+/* Pre-size the modal-content to the eventual iframe-mounted height for
+   the iframe-phase only:
+   - `[data-step-type="setup"]` — brief pre-flight before SwappedIframeStep mounts
+   - `:has(...) .rs-fiat-onramp` — SwappedIframeStep's iframe phase is in DOM
+   The tracker phase (.rs-swapped-tracker) is naturally shorter and is
+   excluded so the modal shrinks down to its content instead of leaving
+   a tall empty area below the tracker. Applied on modal-content (not
+   modal-body) so the transition on its min-height animates smoothly
+   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;
+}
+.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;
+}
+
+/* =============================================================================
+   Custom order tracker
+   =============================================================================
+   Shown after the user creates an order with Swapped — replaces the iframe
+   until the deposit-processor reports bridge-complete. */
+/* Layout lives in rs-screen now — tracker just contributes the entrance
+   animation and a marker class for any future tracker-only tweaks. The
+   icon + title come from the shared BodyHeader so the header position
+   matches ConnectStep and SwappedIframeStep exactly. */
+.rs-swapped-tracker {
+  animation: rs-swapped-tracker-enter 250ms ease-out;
+}
+
+@keyframes rs-swapped-tracker-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes rs-tracker-step-complete {
+  0% {
+    transform: scale(0.72);
+  }
+  60% {
+    transform: scale(1.08);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.rs-swapped-tracker-steps {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.rs-swapped-tracker-step {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 0;
+}
+
+/* Dotted vertical connector between adjacent step markers. */
+.rs-swapped-tracker-step + .rs-swapped-tracker-step::before {
+  content: "";
+  position: absolute;
+  top: -14px;
+  right: 11px;
+  width: 0;
+  height: 28px;
+  border-left: 1.5px dotted #d4d4d8;
+}
+
+.rs-swapped-tracker-step-label {
+  font-size: 15px;
+  color: var(--rs-foreground);
+  flex-grow: 1;
+}
+
+.rs-swapped-tracker-step-marker {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1.5px solid #d4d4d8;
+  color: transparent;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker {
+  border-color: #d4d4d8;
+  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
+     active-state spinner actually paints. */
+  color: #18181b;
+}
+
+.rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker .rs-spinner {
+  width: 14px;
+  height: 14px;
+}
+
+/* Satisfying scale-pop when a step ticks complete — the color transition
+   alone is too subtle to register as "that just happened". */
+.rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker {
+  animation: rs-tracker-step-complete 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  background: #18181b;
+  border-color: #18181b;
+  color: #fff;
+}
+
+.rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker svg {
+  width: 14px;
+  height: 14px;
+  stroke-width: 3;
+}
+
+/* Failed step marker — terminal processor failure or cancellation. Red in
+   both themes (the failure color reads on light and dark). */
+.rs-swapped-tracker-step--failed .rs-swapped-tracker-step-marker {
+  background: #fb2c36;
+  border-color: #fb2c36;
+  color: #fff;
+}
+
+.rs-swapped-tracker-step--failed .rs-swapped-tracker-step-marker svg {
+  width: 14px;
+  height: 14px;
+  stroke-width: 3;
+}
+
+/* Terminal message block shown below the steps on failure / cancellation. */
+.rs-swapped-tracker-terminal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+}
+
+.rs-swapped-tracker-terminal-message {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--rs-foreground-secondary, #71717a);
+}
+
+.rs-swapped-tracker-terminal--failed .rs-swapped-tracker-terminal-message {
+  color: #fb2c36;
+}
+
+.rs-swapped-tracker-retry {
+  padding: 8px 16px;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-background-secondary);
+  color: var(--rs-foreground);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.rs-swapped-tracker-retry:hover {
+  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,
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--active .rs-swapped-tracker-step-marker {
+  border-color: #3f3f46;
+}
+
+.rs-modal[data-theme="dark"] .rs-swapped-tracker-step--complete .rs-swapped-tracker-step-marker {
+  background: #fafafa;
+  border-color: #fafafa;
+  color: #18181b;
+}

package/dist/{types-D6wrO4Ow.d.cts → types-C8i2ebY1.d.cts}

@@ -153,6 +153,16 @@ interface RouteConfig {
     sourceChains?: number[];
     sourceTokens?: string[];
 }
+interface FiatPaymentMethodOption {
+    /** Swapped's payment-method slug (e.g. `creditcard`, `applepay`, `bank-transfer`). */
+    method: string;
+    /** Row label shown in ConnectStep. */
+    label: string;
+    /** Optional sublabel under the row. */
+    sublabel?: string;
+    /** Optional icon name: `card` | `apple` | `bank`. Defaults to `card`. */
+    icon?: "card" | "apple" | "bank";
+}
 interface DepositModalProps {
     dappWalletClient?: WalletClient | null;
     dappPublicClient?: PublicClient | null;
@@ -197,6 +207,21 @@ interface DepositModalProps {
      * entry screen.
      */
     dappImports?: DappImportsConfig;
+    /** Show fiat on-ramp option(s) that embed Swapped's iframe. Default: false. */
+    enableFiatOnramp?: boolean;
+    /** Show the Transfer Crypto / QR row. Default: true. */
+    enableQrTransfer?: boolean;
+    /**
+     * One row per Swapped payment method (Pay with Card / Apple Pay / Bank
+     * Transfer). When set, replaces the generic "Pay with Card" row.
+     */
+    fiatOnrampMethods?: FiatPaymentMethodOption[];
+    /**
+     * Show a "Fund from 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.
+     */
+    enableExchangeConnect?: boolean;
     onRequestConnect?: () => void;
     theme?: DepositModalTheme;
     uiConfig?: DepositModalUIConfig;