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

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import {
   DepositModal
-} from "./chunk-HZBO2SIZ.mjs";
+} from "./chunk-KDJS56TQ.mjs";
 import {
   WithdrawModal
-} from "./chunk-EC63ZHY4.mjs";
-import "./chunk-6K4JHM2D.mjs";
+} from "./chunk-LDMY67HP.mjs";
+import "./chunk-IZMF2WHM.mjs";
 import {
   CHAIN_BY_ID,
   DEFAULT_BACKEND_URL,
@@ -34,7 +34,7 @@ import {
   getUsdcAddress,
   getUsdcDecimals,
   isSupportedTokenAddressForChain
-} from "./chunk-SZIYS42B.mjs";
+} from "./chunk-7C4SPVM5.mjs";
 
 // src/core/reown-disconnect.ts
 import { modal } from "@reown/appkit/react";

package/dist/styles.css

@@ -391,21 +391,17 @@
   padding-inline: 16px;
 }
 
-.rs-modal-body::-webkit-scrollbar {
-  width: 6px;
+/* 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-track {
-  background: transparent;
-}
-
-.rs-modal-body::-webkit-scrollbar-thumb {
-  background-color: var(--rs-surface-hover);
-  border-radius: var(--rs-radius-full);
-}
-
-.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;
 }
 
 /* =============================================================================
@@ -1111,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
@@ -3004,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;
@@ -3016,8 +3017,8 @@
 }
 
 .rs-deposit-address-min-icon {
-  width: 16px;
-  height: 16px;
+  width: 12px;
+  height: 12px;
   flex-shrink: 0;
   color: var(--rs-icon-secondary);
 }
@@ -3041,6 +3042,7 @@
   border: none;
   cursor: pointer;
   font-family: inherit;
+  line-height: normal;
   color: var(--rs-muted);
   text-align: left;
 }
@@ -3202,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);
@@ -3310,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 {
@@ -3384,8 +3368,8 @@
 }
 
 .rs-skeleton-qr {
-  width: 200px;
-  height: 200px;
+  width: 190px;
+  height: 190px;
 }
 
 .rs-skeleton-address {
@@ -3417,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;
@@ -3521,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;
@@ -3579,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;
 }
@@ -3599,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 {
@@ -4049,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%;
@@ -4408,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;
@@ -4456,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;
 }

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

@@ -299,14 +299,40 @@ type DepositLifecycleEvent = {
     type: "submitted";
     txHash: string;
     sourceChain: ChainId | "unknown";
+    /** Source-token base units (e.g. "1100000" for 1.10 USDC). */
     amount: string;
+    /**
+     * Decimals of the source token, for converting `amount` to a
+     * human-readable value. Omitted when the token is not recognised
+     * (e.g. a QR deposit of an unlisted token).
+     */
+    sourceDecimals?: number;
+    /**
+     * USD equivalent of the deposit as entered in the modal (token units
+     * for unpriced non-stablecoins). Omitted for flows without an amount
+     * input (QR transfer, fiat onramp, exchange connect).
+     */
+    amountUsd?: string;
 } | {
     type: "complete";
     txHash: string;
     destinationTxHash?: string;
+    /** Source-token base units (e.g. "1100000" for 1.10 USDC). */
     amount: string;
     sourceChain: ChainId | "unknown";
     sourceToken?: string;
+    /**
+     * Decimals of the source token, for converting `amount` to a
+     * human-readable value. Omitted when the token is not recognised
+     * (e.g. a QR deposit of an unlisted token).
+     */
+    sourceDecimals?: number;
+    /**
+     * USD equivalent of the deposit as entered in the modal (token units
+     * for unpriced non-stablecoins). Omitted for flows without an amount
+     * input (QR transfer, fiat onramp, exchange connect).
+     */
+    amountUsd?: string;
     targetChain: number | "solana";
     targetToken: string;
 } | {

package/dist/{types-C8i2ebY1.d.ts → types-cXr3j4NV.d.ts}

@@ -299,14 +299,40 @@ type DepositLifecycleEvent = {
     type: "submitted";
     txHash: string;
     sourceChain: ChainId | "unknown";
+    /** Source-token base units (e.g. "1100000" for 1.10 USDC). */
     amount: string;
+    /**
+     * Decimals of the source token, for converting `amount` to a
+     * human-readable value. Omitted when the token is not recognised
+     * (e.g. a QR deposit of an unlisted token).
+     */
+    sourceDecimals?: number;
+    /**
+     * USD equivalent of the deposit as entered in the modal (token units
+     * for unpriced non-stablecoins). Omitted for flows without an amount
+     * input (QR transfer, fiat onramp, exchange connect).
+     */
+    amountUsd?: string;
 } | {
     type: "complete";
     txHash: string;
     destinationTxHash?: string;
+    /** Source-token base units (e.g. "1100000" for 1.10 USDC). */
     amount: string;
     sourceChain: ChainId | "unknown";
     sourceToken?: string;
+    /**
+     * Decimals of the source token, for converting `amount` to a
+     * human-readable value. Omitted when the token is not recognised
+     * (e.g. a QR deposit of an unlisted token).
+     */
+    sourceDecimals?: number;
+    /**
+     * USD equivalent of the deposit as entered in the modal (token units
+     * for unpriced non-stablecoins). Omitted for flows without an amount
+     * input (QR transfer, fiat onramp, exchange connect).
+     */
+    amountUsd?: string;
     targetChain: number | "solana";
     targetToken: string;
 } | {

package/dist/withdraw.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk6RCOF3XUcjs = require('./chunk-6RCOF3XU.cjs');
-require('./chunk-DZNXG5JK.cjs');
-require('./chunk-7JIDIX27.cjs');
+var _chunk7LJYEGZZcjs = require('./chunk-7LJYEGZZ.cjs');
+require('./chunk-7NO7WVJV.cjs');
+require('./chunk-DZ2RPLBM.cjs');
 
 
-exports.WithdrawModal = _chunk6RCOF3XUcjs.WithdrawModal;
+exports.WithdrawModal = _chunk7LJYEGZZcjs.WithdrawModal;

package/dist/withdraw.d.cts

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

package/dist/withdraw.d.ts

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

package/dist/withdraw.mjs

@@ -1,8 +1,8 @@
 import {
   WithdrawModal
-} from "./chunk-EC63ZHY4.mjs";
-import "./chunk-6K4JHM2D.mjs";
-import "./chunk-SZIYS42B.mjs";
+} from "./chunk-LDMY67HP.mjs";
+import "./chunk-IZMF2WHM.mjs";
+import "./chunk-7C4SPVM5.mjs";
 export {
   WithdrawModal
 };

package/package.json

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