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

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
@@ -2782,7 +2818,7 @@
 .rs-withdraw-dropdown-arrow {
   width: 24px;
   height: 24px;
-  color: var(--rs-icon-secondary);
+  color: #9f9fa9;
   transition: transform 0.15s;
 }
 
@@ -3085,7 +3121,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding-top: 12px;
+  padding-top: 8px;
   font-size: 12px;
   color: var(--rs-muted);
 }
@@ -3205,7 +3241,7 @@
 .rs-deposit-address-dropdown-chevron {
   width: 24px;
   height: 24px;
-  color: var(--rs-icon-secondary);
+  color: #9f9fa9;
   margin-left: auto;
   flex-shrink: 0;
   transition: transform 0.15s ease;
@@ -3226,10 +3262,10 @@
   border: 1px solid var(--rs-surface-subtle);
   border-radius: var(--rs-radius-sm);
   box-shadow: var(--rs-shadow-dropdown);
-  padding: 12px;
+  padding: 8px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 0;
   max-height: 240px;
   overflow-y: auto;
   overscroll-behavior: none;
@@ -3241,8 +3277,8 @@
   align-items: center;
   gap: 6px;
   width: 100%;
-  padding: 0;
-  border-radius: calc(var(--rs-radius-sm) - 2px);
+  padding: 8px 4px;
+  border-radius: 4px;
   border: none;
   background: transparent;
   color: var(--rs-foreground);
@@ -3251,12 +3287,12 @@
   line-height: normal;
   cursor: pointer;
   text-align: left;
-  transition: opacity 0.1s;
+  transition: background-color 0.1s;
   font-family: inherit;
 }
 
 .rs-deposit-address-dropdown-item:hover {
-  opacity: 0.7;
+  background: var(--rs-surface);
 }
 
 .rs-deposit-address-dropdown-item--active {
@@ -3323,6 +3359,51 @@
   word-break: break-all;
 }
 
+/* Visually hidden but exposed to assistive tech — used by the skeleton's
+   "Preparing…" status, whose visual placeholders are all aria-hidden. */
+.rs-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Loading placeholders for DepositAddressSkeleton — grey blocks that pulse
+   while the smart account / deposit address are being prepared. Uses
+   --color-gray4 (zinc-200 light / zinc-800 dark) so it reads on the well in
+   both themes. */
+.rs-skeleton {
+  background: var(--color-gray4);
+  border-radius: 8px;
+  animation: rs-skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+.rs-skeleton-qr {
+  width: 200px;
+  height: 200px;
+}
+
+.rs-skeleton-address {
+  height: 12px;
+  margin: 0 16px 12px;
+  border-radius: 8px;
+}
+
+@keyframes rs-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
 .rs-deposit-address-copy {
   display: flex;
   align-items: center;
@@ -3990,8 +4071,8 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 16px 12px;
+  gap: 0;
+  padding: 12px 8px;
   background: var(--rs-surface-subtle);
   border: none;
   border-radius: 8px;
@@ -4106,12 +4187,38 @@
   white-space: nowrap;
 }
 
+/* Collapsing wrapper that animates the detail block between closed/open. */
+.rs-history-card-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s ease;
+}
+
+.rs-history-card--expanded .rs-history-card-panel {
+  grid-template-rows: 1fr;
+}
+
+.rs-history-card-panel-inner {
+  overflow: hidden;
+  min-height: 0;
+  /* Keep the collapsed panel (and its tx link) out of the tab order.
+     visibility stays "visible" through the collapse so the content is
+     present during the height animation, then flips hidden at the end. */
+  visibility: hidden;
+  transition: visibility 0.25s;
+}
+
+.rs-history-card--expanded .rs-history-card-panel-inner {
+  visibility: visible;
+}
+
 /* Expanded detail block under the row. */
 .rs-history-card-details {
   display: flex;
   flex-direction: column;
   gap: 8px;
   width: 100%;
+  padding-top: 16px;
 }
 
 .rs-history-card-link {
@@ -4601,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;