@rhinestone/deposit-modal 0.8.1 → 0.9.0

package/dist/styles.css

@@ -327,7 +327,12 @@
        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);
+    min-height 280ms cubic-bezier(0.22, 1, 0.36, 1),
+    /* The Swapped iframe phase raises the shell corner to the widget's 28px
+       (see the sizing rules at the bottom of this file); animate it on the same
+       curve as max-width/min-height so the corner doesn't pop while the modal
+       is still resizing into the iframe. */
+    border-radius 240ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .rs-modal-content[data-theme="dark"] {
@@ -557,6 +562,19 @@
   gap: 6px;
 }
 
+/* Chrome/Safari paint their own autofill background with !important UA
+   styles. Clip that paint to the glyphs so every themed input keeps its real
+   surface — including the transparent withdrawal inputs — without replacing
+   the focus/error box-shadows. The standard pseudo-class and WebKit alias are
+   both kept for current and older browser engines. */
+.rs-modal
+  :is(.rs-input, .rs-withdraw-input):is(:autofill, :-webkit-autofill) {
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--rs-foreground);
+  caret-color: var(--rs-foreground);
+}
+
 .rs-input-label {
   font-size: 13px;
   color: var(--rs-muted);
@@ -2555,7 +2573,8 @@
    the image is loading (`data-loading`), show a muted pulsing placeholder so the
    first paint isn't a blank/broken-image flash; it inherits the caller's size
    and border-radius, so there's no layout shift when the icon paints in. */
-.rs-token-icon[data-loading] {
+.rs-token-icon[data-loading],
+.rs-cdn-icon[data-loading] {
   background-color: var(--rs-muted);
   animation: rs-token-icon-pulse 1.2s ease-in-out infinite;
 }
@@ -2571,7 +2590,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .rs-token-icon[data-loading] {
+  .rs-token-icon[data-loading],
+  .rs-cdn-icon[data-loading] {
     animation: none;
   }
 }
@@ -4867,6 +4887,53 @@
   object-fit: cover;
 }
 
+/* Provider-hosted fiat method icons (regional methods: GCash, Maya, PIX, …).
+   When a dark-background variant is supplied, the theme toggles which img
+   shows; otherwise the single (light) icon shows in both themes. */
+.rs-fiat-remote-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.rs-fiat-remote-icon img {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.rs-fiat-remote-icon-dark {
+  display: none;
+}
+
+.rs-modal[data-theme="dark"] .rs-fiat-remote-icon--has-dark .rs-fiat-remote-icon-light {
+  display: none;
+}
+
+.rs-modal[data-theme="dark"] .rs-fiat-remote-icon--has-dark .rs-fiat-remote-icon-dark {
+  display: inline-block;
+}
+
+/* Sits in the row's meta slot, so no inline-with-the-label wrapper is needed —
+   `.rs-list-row-title` already handles its own truncation. */
+.rs-fiat-method-badge {
+  flex-shrink: 0;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: #a4f4cf;
+  color: #004f3b;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.rs-modal[data-theme="dark"] .rs-fiat-method-badge {
+  background: #006045;
+  color: #d0fae5;
+}
+
 .rs-list-row-body {
   flex: 1;
   min-width: 0;
@@ -4949,6 +5016,18 @@
   border-radius: 4px;
 }
 
+/* Chain with no bundled icon: short-label chip inside the badge circle. */
+.rs-chain-badge-fallback {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 1;
+}
+
 /* Card-network chips: exported Figma tiles are all 38×24. */
 .rs-list-row-meta-icons--cards > .rs-card-network {
   position: relative;
@@ -4970,7 +5049,10 @@
 }
 
 .rs-list-row-meta-icons--cards > .rs-card-network + .rs-card-network {
-  margin-left: -7px;
+  /* Cards paint in source order, so Mastercard (last) sits on top and Amex
+     (first) beneath. Amex's mark is right-aligned, so this overlap is kept
+     gentle — a larger one would tuck Amex's "EX" under Visa. */
+  margin-left: -3px;
 }
 
 .rs-list-row-meta-icons--cards .rs-card-network svg {
@@ -5065,8 +5147,8 @@
 }
 
 /* The iframe phase owns the whole modal width. Normal screens keep the
-   16px body inset, but Swapped now provides its own in-iframe back chrome so
-   the embedded sheet should not look like a padded card inside our modal. */
+   16px body inset, but the embedded sheet should not look like a padded card
+   inside our modal. */
 .rs-modal-body[data-flow-mode="fiat-onramp"]:has(.rs-fiat-onramp),
 .rs-modal-body[data-flow-mode="exchange-connect"]:has(.rs-fiat-onramp) {
   padding-inline: 0;
@@ -5088,7 +5170,9 @@
   width: 100%;
   min-height: 586px;
   margin: 0;
-  border-radius: 0;
+  /* Matches the iframe's 28px below so the loading / error overlays that sit
+     on top of it share the same corner arc. */
+  border-radius: 28px;
   overflow: hidden;
 }
 
@@ -5096,13 +5180,45 @@
   min-height: 585px;
 }
 
+/* Swapped paints its widget as a card with a 28px corner radius and its drop
+   shadow sits just outside that arc, so the embedding iframe has to clip at the
+   same 28px — otherwise the shadow's corners bleed out past the card and read as
+   grey smudges in our modal corners. Confirmed with Swapped: their iframe-
+   initialization docs still show a stale `border-radius: 0.75rem`, 28px is the
+   value that matches the current widget. */
 .rs-fiat-onramp-iframe {
   display: block;
   width: 100%;
   height: 586px;
   min-height: 586px;
   border: 0;
+  border-radius: 28px;
   background: var(--rs-background);
+  /* Swapped's widget paints its own page background behind a rounded card, and
+     that card is rounder than our modal. Where their radius exceeds ours the
+     modal's corner clip doesn't reach their page background, so a grey wedge
+     shows in each corner (visible on their payment-method screen). Clipping the
+     iframe at a radius at least as round as their card puts the modal's own
+     background there instead.
+     ponytail: one blunt radius rather than tracking Swapped's per-screen shape
+     — if they round their card past this, raise it. */
+  border-radius: 28px;
+  /* Swapped's embedded widget has no theme URL param and follows
+     `prefers-color-scheme`. Setting `color-scheme` on the iframe element
+     propagates into its (cross-origin) document's `prefers-color-scheme`, so
+     we pin it to the modal's theme — a light modal renders a light widget and
+     a dark modal a dark one — instead of following the visitor's OS setting.
+     This base rule forces light; because it wins over the `color-scheme: dark`
+     inherited from `.rs-modal[data-theme="dark"]`, the dark override below is
+     required to re-assert dark. NOTE: this only takes effect because
+     SwappedIframeStep assigns the iframe `src` one commit after mount — the
+     widget reads prefers-color-scheme at its first navigation, which must
+     happen after this rule is resolved on the element. */
+  color-scheme: light;
+}
+
+.rs-modal[data-theme="dark"] .rs-fiat-onramp-iframe {
+  color-scheme: dark;
 }
 
 .rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe {
@@ -5110,6 +5226,15 @@
   min-height: 585px;
 }
 
+/* Connect sits below our header (only fiat is immersive), so only its bottom
+   corners meet the modal's rounded edge. Rounding the top too would leave the
+   shell background showing through as light notches under the header. Applies to
+   the wrap as well so the loading / error overlays share the same arc. */
+.rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe-wrap,
+.rs-fiat-onramp[data-variant="connect"] .rs-fiat-onramp-iframe {
+  border-radius: 0 0 28px 28px;
+}
+
 /* Finalising deposit — compact centered spinner screen (Swapped Connect). */
 .rs-finalising-body {
   display: flex;
@@ -5306,6 +5431,16 @@
   line-height: 1.35;
 }
 
+/* Pre-deposit "Exchange Fee" disclosure shown below the picker footer. */
+.rs-exchange-select-fee-note {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--rs-muted);
+  text-align: center;
+  margin: 0;
+}
+
 /* =============================================================================
    Modal sizing for the Swapped iframe step
    =============================================================================
@@ -5349,16 +5484,32 @@
   min-height: 698px;
 }
 
-/* Iframe phase: with no header/footer chrome the modal is sized to the
-   embedded iframe exactly (586 fiat / 585 connect) so it fills the modal with
-   no whitespace below. The taller setup values above pre-reserve the space
-   before SwappedIframeStep mounts. */
+/* Iframe phase: fiat is immersive (no header/footer chrome), so the modal is
+   sized to the embedded iframe exactly — 586 — and fills top-to-bottom with no
+   whitespace. The taller setup values above pre-reserve the space before
+   SwappedIframeStep mounts. */
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"] .rs-fiat-onramp) {
   min-height: 586px;
 }
 
+/* Connect keeps our header, so its exact height is the sum of the chrome above
+   the widget: 16px top inset + 24px header row + 16px gap + 585px iframe + 2px
+   borders (border-box). Matching it here means the setup → iframe hand-off
+   settles on one height instead of overshooting and snapping back. */
 .rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"] .rs-fiat-onramp) {
-  min-height: 585px;
+  min-height: 643px;
+}
+
+/* In the iframe phase the Swapped widget owns the modal's bottom edge (fiat owns
+   all four corners; Connect owns the bottom two, under our header), so the shell
+   corner takes the widget's 28px instead of our default 16px. Left at 16px, our
+   border would trace a tighter arc than the widget inside it and those corners
+   would show a sliver of modal background between the two curves — plus the
+   widget's own drop shadow. Kept uniform so the shell stays one shape, and
+   scoped to this phase only — every other screen keeps 16px. */
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"] .rs-fiat-onramp),
+.rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"] .rs-fiat-onramp) {
+  border-radius: 28px;
 }
 
 /* =============================================================================
@@ -5565,3 +5716,103 @@
   border-color: #fafafa;
   color: #18181b;
 }
+
+/* =============================================================================
+   Mobile bottom sheet (<= 639px)
+   =============================================================================
+   Below the 640px breakpoint the modal docks to the bottom of the viewport and
+   slides up as a full-width sheet — matching the 1auth dialog (bottom sheet on
+   mobile, centered card on desktop). Everything here is scoped under
+   `.rs-modal-overlay` so inline mode (`.rs-modal-content--inline`, which has no
+   overlay ancestor) is untouched, and desktop (>= 640px) keeps the centered
+   card verbatim. */
+@media (max-width: 639px) {
+  .rs-modal-overlay {
+    /* Dock the sheet to the bottom edge (desktop centers it). */
+    align-items: flex-end;
+    /* Fade the scrim in as the sheet rises. Animating background-color rather
+       than opacity keeps the sheet itself fully opaque while it slides — the
+       overlay is both scrim and flex parent, so an opacity fade would dim the
+       sheet too. */
+    animation: rs-backdrop-fade-in 0.2s ease-out;
+  }
+
+  .rs-modal-overlay .rs-modal-content {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    /* Top corners only; the bottom sits flush against the viewport edge. */
+    border-radius: 16px 16px 0 0;
+    /* Cap below full height so a strip of scrim shows above the sheet (the
+       bottom-sheet "peek"); taller content scrolls inside .rs-modal-body. */
+    max-height: min(92dvh, calc(100dvh - 24px));
+    /* Slide up from below the fold — iOS-sheet easing, matching 1auth's
+       dialog-slide-up. When it ends the content rests at its --open transform
+       (scale(1) == identity), so the settled position is unchanged. */
+    animation: rs-sheet-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* Swapped/fiat/exchange flows pre-reserve a tall desktop iframe height
+     (min-height 585-699px), a 445px max-width, and a 28px shell radius. On a
+     phone that would force the sheet taller than the screen and round its
+     bottom corners away from the viewport edge, so restore the bottom-sheet
+     dimensions and top-only radius. Specificity (0,4,0) matches the iframe
+     phase :has() rules and, appended last, wins the tie. */
+  .rs-modal-overlay .rs-modal-content:has(.rs-modal-body[data-flow-mode="fiat-onramp"]),
+  .rs-modal-overlay .rs-modal-content:has(.rs-modal-body[data-flow-mode="exchange-connect"]) {
+    max-width: none;
+    min-height: 0;
+    max-height: min(92dvh, calc(100dvh - 24px));
+    border-radius: 16px 16px 0 0;
+  }
+
+  /* The history panel is a long, scrollable list overlaid position:absolute, so
+     it can't grow the sheet itself — left alone the sheet stays as short as the
+     screen behind it and crams the list into a sliver at the bottom. When the
+     panel is mounted, give the sheet a tall min-height so the list uses most of
+     the phone screen. Placed after the fiat/exchange reset above so it wins when
+     history is opened over one of those flows. */
+  .rs-modal-overlay .rs-modal-content:has(.rs-history-panel) {
+    min-height: min(85dvh, calc(100dvh - 24px));
+  }
+
+  /* Clear the iOS home indicator. Excludes the immersive Swapped iframe, which
+     is intentionally full-bleed to the sheet edges. */
+  .rs-modal-overlay .rs-modal:not(.rs-modal--swapped-iframe) {
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+  }
+
+  /* iOS Safari zooms the page in when a focused input's font is < 16px. Bump
+     the small text inputs (the deposit amount input is 64px, so it is
+     unaffected) to kill the zoom-on-focus jump. */
+  .rs-modal-overlay .rs-modal .rs-input,
+  .rs-modal-overlay .rs-modal .rs-withdraw-input {
+    font-size: 16px;
+  }
+}
+
+@keyframes rs-sheet-slide-up {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes rs-backdrop-fade-in {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* Honour "Reduce motion": snap the sheet + scrim to their settled state. */
+@media (prefers-reduced-motion: reduce) {
+  .rs-modal-overlay,
+  .rs-modal-overlay .rs-modal-content {
+    animation: none !important;
+  }
+}