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

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"] {
@@ -375,21 +391,17 @@
   padding-inline: 16px;
 }
 
-.rs-modal-body::-webkit-scrollbar {
-  width: 6px;
-}
-
-.rs-modal-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.rs-modal-body::-webkit-scrollbar-thumb {
-  background-color: var(--rs-surface-hover);
-  border-radius: var(--rs-radius-full);
+/* Scrollbars are hidden throughout the modal UI. The portfolio list
+   (.rs-asset-list) is the sole exception — it keeps a visible scrollbar since
+   it's a long, independently-scrolling list. The :not() exemption also keeps
+   this rule's specificity above the per-container scrollbar rules elsewhere. */
+.rs-modal *:not(.rs-asset-list) {
+  scrollbar-width: none;
 }
 
-.rs-modal-body::-webkit-scrollbar-thumb:hover {
-  background-color: var(--rs-muted-foreground);
+.rs-modal *:not(.rs-asset-list)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
 }
 
 /* =============================================================================
@@ -1095,7 +1107,10 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  max-height: 320px;
+  /* Figma's asset list is 284px — exactly 4 rows (4×68 + 3×4 gaps). Cap here
+     so wallets with many assets scroll inside instead of growing the modal
+     past the design's height. */
+  max-height: 284px;
   overflow-y: auto;
   overscroll-behavior: contain;
   /* Pull rows back to the row's natural left edge inside a scrollable
@@ -1300,6 +1315,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 +1680,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
@@ -2968,11 +3003,13 @@
   align-items: center;
   justify-content: space-between;
   gap: 6px;
+  white-space: nowrap;
 }
 
 .rs-deposit-address-min {
   display: inline-flex;
   align-items: center;
+  flex-shrink: 0;
   gap: 4px;
   font-size: 11px;
   font-weight: 500;
@@ -2980,8 +3017,8 @@
 }
 
 .rs-deposit-address-min-icon {
-  width: 16px;
-  height: 16px;
+  width: 12px;
+  height: 12px;
   flex-shrink: 0;
   color: var(--rs-icon-secondary);
 }
@@ -3005,6 +3042,7 @@
   border: none;
   cursor: pointer;
   font-family: inherit;
+  line-height: normal;
   color: var(--rs-muted);
   text-align: left;
 }
@@ -3166,7 +3204,10 @@
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 12px;
+  /* 11px vertical (not 12) so the 1px border lands the input at Figma's
+     48px total height — Figma draws the stroke inside the box, CSS adds it
+     outside. Horizontal stays 12px to match the design. */
+  padding: 11px 12px;
   background: var(--rs-surface-subtle);
   border-radius: 8px;
   border: 1px solid var(--rs-surface-subtle);
@@ -3274,39 +3315,18 @@
   border-radius: 8px;
 }
 
-/* Mid-refetch: dim the address/QR and block interaction so a stale
-   registration can't be copied or scanned until setup is ready again. */
-.rs-deposit-address-well--updating {
-  opacity: 0.4;
-  pointer-events: none;
-  filter: grayscale(0.3);
-  transition: opacity 0.15s;
-}
-
-.rs-deposit-address-updating {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  padding: 10px 12px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--rs-muted);
-}
-
 .rs-deposit-address-qr {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 12px;
+  padding: 16px;
 }
 
 .rs-deposit-address-qr canvas,
 .rs-deposit-address-qr svg {
   display: block;
-  width: 200px;
-  height: 200px;
+  width: 190px;
+  height: 190px;
 }
 
 .rs-deposit-address-value {
@@ -3348,8 +3368,8 @@
 }
 
 .rs-skeleton-qr {
-  width: 200px;
-  height: 200px;
+  width: 190px;
+  height: 190px;
 }
 
 .rs-skeleton-address {
@@ -3381,6 +3401,7 @@
   color: var(--rs-foreground);
   font-size: 14px;
   font-weight: 500;
+  line-height: normal;
   font-family: inherit;
   cursor: pointer;
   transition: background-color 0.15s;
@@ -3485,8 +3506,8 @@
 .rs-deposit-notifications {
   position: absolute;
   bottom: 12px;
-  left: 12px;
-  right: 12px;
+  left: 0;
+  right: 0;
   z-index: 10;
   display: flex;
   flex-direction: column;
@@ -3543,7 +3564,8 @@
   justify-content: center;
 }
 
-.rs-deposit-notification-badge svg {
+.rs-deposit-notification-badge--complete svg,
+.rs-deposit-notification-badge--failed svg {
   width: 20px;
   height: 20px;
 }
@@ -3563,9 +3585,29 @@
   color: var(--rs-icon-secondary);
 }
 
-.rs-deposit-notification-badge--processing .rs-spinner {
+.rs-deposit-notification-spinner {
   width: 42px;
   height: 42px;
+  animation: rs-spin 1s linear infinite;
+}
+
+/* Spinner ring/arc colors flip with the theme. Light: a faint zinc-200 ring
+   with a zinc-600 arc on the near-white card. Dark: the Figma values — a
+   zinc-300 ring with a zinc-600 arc on the #18181b card. */
+.rs-deposit-notification-spinner-track {
+  stroke: #e4e4e7;
+}
+
+.rs-deposit-notification-spinner-head {
+  stroke: #52525c;
+}
+
+.rs-modal[data-theme="dark"] .rs-deposit-notification-spinner-track {
+  stroke: #d4d4d8;
+}
+
+.rs-modal[data-theme="dark"] .rs-deposit-notification-spinner-head {
+  stroke: #52525c;
 }
 
 .rs-deposit-notification-content {
@@ -4013,23 +4055,6 @@
   padding-right: 2px;
 }
 
-.rs-history-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.rs-history-list::-webkit-scrollbar-thumb {
-  background-color: var(--rs-surface-hover);
-  border-radius: var(--rs-radius-full);
-}
-
-.rs-history-list::-webkit-scrollbar-thumb:hover {
-  background-color: var(--rs-muted-foreground);
-}
-
-.rs-history-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
 /* Card */
 .rs-history-card {
   width: 100%;
@@ -4372,6 +4397,12 @@
   gap: 8px;
 }
 
+/* Figma gives subtitle headers a 12px icon→title gap (vs 8px for title-only
+   headers like the QR screen). */
+.rs-body-header:has(.rs-body-header-subtitle) {
+  gap: 12px;
+}
+
 .rs-body-header-icon {
   display: inline-flex;
   align-items: center;
@@ -4420,7 +4451,7 @@
 .rs-body-header-subtitle {
   font-size: 14px;
   font-weight: 500;
-  line-height: 1.4;
+  line-height: normal;
   color: var(--rs-muted);
   margin: 0;
 }
@@ -4672,3 +4703,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;
+}