@rhinestone/deposit-modal 0.3.0-alpha.5 → 0.3.0-alpha.7

package/dist/styles.css

@@ -61,6 +61,9 @@
   --rs-surface-subtle: #fcfbfb;
   --rs-surface: var(--color-gray3);
   --rs-surface-hover: var(--color-gray4);
+  /* Figma coin-select/selected — zinc-100 fill + zinc-300 border. */
+  --rs-asset-selected-bg: #f4f4f5;
+  --rs-asset-selected-border: #d4d4d8;
   /* Figma: icon-wrapper tokens. Same as surface in light, but dark mode
      diverges so we keep them separate. */
   --rs-icon-wrapper-bg: #f4f4f5;
@@ -89,11 +92,23 @@
 
   --rs-success: var(--color-green9);
   --rs-success-tint: var(--color-green3);
+  /* Figma alert palette — alert/red (error) + alert/amber (warning). Amber
+     has no distinct border token in the design, so its border matches its bg. */
   --rs-error: #fb2c36;
-  --rs-error-tint: var(--color-red3);
-  --rs-warning: var(--color-amber11);
-  --rs-warning-tint: var(--color-amber3);
-  --rs-warning-border: rgba(146, 64, 14, 0.18);
+  --rs-error-tint: #fef2f2;
+  --rs-error-border: #ffc9c9;
+  --rs-warning: #7b3306;
+  --rs-warning-tint: #fee685;
+  --rs-warning-border: #fee685;
+  /* Callout (generic error/warning notice) — lighter translucent "glass"
+     tints so the modal surface shows through. Kept separate from the solid
+     alert palette above, which input-error states and badges still use. */
+  --rs-callout-error-bg: rgba(251, 44, 54, 0.07);
+  --rs-callout-error-border: rgba(251, 44, 54, 0.18);
+  --rs-callout-error-text: #e7000b;
+  --rs-callout-warning-bg: rgba(245, 158, 11, 0.12);
+  --rs-callout-warning-border: rgba(245, 158, 11, 0.24);
+  --rs-callout-warning-text: #b45309;
 
   --rs-foreground: var(--color-gray12);
   --rs-muted: var(--color-gray10);
@@ -107,13 +122,14 @@
   --rs-secondary: var(--color-gray3);
   --rs-secondary-hover: var(--color-gray4);
 
-  --rs-shadow-dropdown:
-    0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
+  /* Figma: dropdown/select menu uses a tight 0/2/4 shadow at 0.25 so it
+     reads on every edge (including the side that sits against the modal). */
+  --rs-shadow-dropdown: 0 2px 4px rgba(0, 0, 0, 0.25);
 
   /* Sizing */
   --rs-height-button: 42px;
   --rs-height-titlebar: 36px;
-  --rs-width-dialog: 400px;
+  --rs-width-dialog: 380px;
 
   /* Radius */
   --rs-radius-none: 0;
@@ -203,6 +219,9 @@
   --rs-button-ghost-bg-hover: #3f3f46;
   --rs-button-ghost-text: #e4e4e7;
   --rs-surface-hover: #3f3f46;
+  /* Figma coin-select/selected (dark) — zinc-900 fill + zinc-700 border. */
+  --rs-asset-selected-bg: #18181b;
+  --rs-asset-selected-border: #3f3f46;
   /* Figma button-dark in dark mode: zinc-200 disc, near-black label. */
   --rs-primary: #e4e4e7;
   --rs-primary-hover: #d4d4d8;
@@ -215,7 +234,20 @@
   --rs-shadow-dropdown:
     0 4px 20px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
 
-  --rs-warning-border: rgba(252, 211, 77, 0.22);
+  /* Figma alert palette (dark) — alert/red red-950 bg / red-800 border,
+     alert/amber amber-600 bg / amber-50 text (border matches bg). */
+  --rs-error-tint: #460809;
+  --rs-error-border: #9f0712;
+  --rs-warning: #fffbeb;
+  --rs-warning-tint: #e17100;
+  --rs-warning-border: #e17100;
+  /* Callout glass tints (dark) — translucent over the near-black surface. */
+  --rs-callout-error-bg: rgba(251, 44, 54, 0.13);
+  --rs-callout-error-border: rgba(251, 44, 54, 0.3);
+  --rs-callout-error-text: #ff6467;
+  --rs-callout-warning-bg: rgba(245, 158, 11, 0.13);
+  --rs-callout-warning-border: rgba(245, 158, 11, 0.28);
+  --rs-callout-warning-text: #fcd34d;
 
   color-scheme: dark;
 }
@@ -248,7 +280,7 @@
 
   position: relative;
   width: 100%;
-  max-width: var(--rs-width-dialog, 400px);
+  max-width: var(--rs-width-dialog, 380px);
   /* 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));
@@ -334,6 +366,13 @@
   min-height: 280px;
   overflow-y: auto;
   overscroll-behavior: none;
+  /* overflow-y:auto forces overflow-x to clip too, which would cut the left/
+     right shadow of absolutely-positioned popups (e.g. the chain/token select
+     menus) that sit flush against this scroll container's edge. Pull the box
+     out to the modal's padding edge and pad it back so content stays put but
+     the clip region gains room for the popup shadow to render. */
+  margin-inline: -16px;
+  padding-inline: 16px;
 }
 
 .rs-modal-body::-webkit-scrollbar {
@@ -678,8 +717,10 @@
 
 .rs-info-panel-value {
   font-family:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+    Consolas, monospace;
   font-size: 12px;
+  font-weight: 500;
   color: var(--rs-foreground);
 }
 
@@ -731,8 +772,10 @@
 
 .rs-card-value--mono {
   font-family:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+    Consolas, monospace;
   font-size: 12px;
+  font-weight: 500;
 }
 
 .rs-card-value--accent {
@@ -933,9 +976,14 @@
   outline-offset: 2px;
 }
 
+/* Figma coin-select/selected: zinc-100 fill + 1px zinc-300 border (dark:
+   zinc-900 fill + zinc-700 border). The inset box-shadow draws the border
+   without shifting layout. Listed with :hover so the selected fill persists
+   when the row is hovered (a bare :hover out-specifies a single class). */
 .rs-asset-row--selected,
 .rs-asset-row--selected:hover:not(:disabled) {
-  background-color: var(--rs-surface);
+  background-color: var(--rs-asset-selected-bg);
+  box-shadow: inset 0 0 0 1px var(--rs-asset-selected-border);
 }
 
 .rs-asset-info {
@@ -1013,14 +1061,14 @@
 }
 
 .rs-asset-name {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--rs-foreground);
   line-height: normal;
 }
 
 .rs-asset-chain {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--rs-muted);
   line-height: normal;
@@ -1182,7 +1230,8 @@
 
 .rs-font-mono {
   font-family:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+    Consolas, monospace;
 }
 
 .rs-mt-2 {
@@ -1663,13 +1712,15 @@
 }
 
 /* Inline "Disconnect" pill that sits inside a connected-wallet ListRow's
-   meta slot. Figma: 14/Medium text, padded 12/16, transparent background
-   so the row's surface shows through. */
+   meta slot. 14/Medium text, transparent background so the row's surface
+   shows through. Vertical padding stays under the 36px title+subtitle block
+   so the pill never inflates the row past the 60px the other method cards
+   use — keeps Transfer crypto / External wallet / Polymarket rows uniform. */
 .rs-list-row-action {
   appearance: none;
   border: none;
   background: transparent;
-  padding: 12px 16px;
+  padding: 8px 12px;
   border-radius: 8px;
   font-family: inherit;
   font-size: 14px;
@@ -2005,30 +2056,67 @@
   font-feature-settings: "tnum";
 }
 
-.rs-amount-input-row > input {
+.rs-amount-prefix {
+  flex: none;
+  user-select: none;
+}
+
+/* The number wrapper layers the real <input> transparently over a visual
+   glyph layer so the caret/editing stays native while the visible digits
+   are the ones we animate. Sized by the visual layer; the input fills it. */
+.rs-amount-number-wrap {
+  position: relative;
   flex: 1;
   min-width: 0;
+}
+
+.rs-amount-number-wrap > input {
+  position: absolute;
+  inset: 0;
   width: 100%;
+  height: 100%;
   background: transparent;
   border: none;
   outline: none;
   font: inherit;
-  color: inherit;
+  color: transparent;
   font-feature-settings: "tnum";
   padding: 0;
   caret-color: var(--rs-foreground);
 }
 
-.rs-amount-input-row > input::placeholder {
-  color: var(--rs-muted);
+.rs-amount-number-wrap > input::placeholder {
+  color: transparent;
 }
 
-.rs-amount-input-row > input::-webkit-outer-spin-button,
-.rs-amount-input-row > input::-webkit-inner-spin-button {
+.rs-amount-number-wrap > input::-webkit-outer-spin-button,
+.rs-amount-number-wrap > input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
+.rs-amount-visual {
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  font-feature-settings: "tnum";
+}
+
+.rs-amount-char-slot {
+  display: inline-block;
+  overflow: hidden;
+  height: 1em;
+  line-height: 1;
+}
+
+.rs-amount-char-inner {
+  display: block;
+}
+
+.rs-amount-visual--placeholder {
+  color: var(--rs-muted);
+}
+
 .rs-amount-meta {
   display: flex;
   align-items: center;
@@ -2267,6 +2355,54 @@
   border: 1px solid var(--rs-warning-border);
 }
 
+/* Generic inline error / warning notice (Callout). Two-line truncation keeps
+   long messages from blowing out the modal height. */
+.rs-callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: var(--rs-radius-sm);
+  border: 1px solid transparent;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.rs-callout-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+}
+
+.rs-callout-icon svg {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.rs-callout-text {
+  min-width: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+
+.rs-callout--error {
+  background: var(--rs-callout-error-bg);
+  border-color: var(--rs-callout-error-border);
+  color: var(--rs-callout-error-text);
+}
+
+.rs-callout--warning {
+  background: var(--rs-callout-warning-bg);
+  border-color: var(--rs-callout-warning-border);
+  color: var(--rs-callout-warning-text);
+}
+
 /* =============================================================================
    Confirm Step Redesign (Polymarket Style)
    ============================================================================= */
@@ -2385,17 +2521,6 @@
    Withdraw Form Step
    ============================================================================= */
 
-.rs-withdraw-form {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.rs-step-body.rs-withdraw-loading {
-  padding: 0 12px;
-}
-
 .rs-withdraw-loading {
   min-height: 240px;
   display: grid;
@@ -3100,7 +3225,7 @@
   background: var(--rs-surface-subtle);
   border: 1px solid var(--rs-surface-subtle);
   border-radius: var(--rs-radius-sm);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--rs-shadow-dropdown);
   padding: 12px;
   display: flex;
   flex-direction: column;
@@ -3149,6 +3274,27 @@
   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;
@@ -3710,6 +3856,8 @@
   z-index: 10;
   display: flex;
   flex-direction: column;
+  padding: 16px;
+  gap: 16px;
   background: var(--rs-background);
   border-radius: inherit;
   animation: rs-history-slide-in 0.2s cubic-bezier(0.32, 0.72, 0, 1);
@@ -3734,7 +3882,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  padding: 12px;
+  padding: 0;
   gap: 16px;
   min-height: 0;
 }

package/dist/{types-xSHZSlrT.d.cts → types-D8Q4TMk7.d.cts}

@@ -111,7 +111,7 @@ interface DepositCompleteEventData {
     amount: string;
     sourceChain: ChainId | "unknown";
     sourceToken?: string;
-    targetChain: number;
+    targetChain: number | "solana";
     targetToken: string;
 }
 interface DepositFailedEventData {
@@ -157,16 +157,28 @@ interface DepositModalProps {
     dappWalletClient?: WalletClient | null;
     dappPublicClient?: PublicClient | null;
     dappAddress?: Address | null;
-    targetChain: Chain | number;
-    targetToken: Address;
+    targetChain: Chain | number | "solana";
+    targetToken: Address | string;
     isOpen: boolean;
     onClose: () => void;
     inline?: boolean;
     closeOnOverlayClick?: boolean;
     sourceChain?: Chain | number;
     sourceToken?: Address;
+    /**
+     * Pre-fills the deposit amount. Either a USD-denominated number string
+     * (e.g. "25") or the case-insensitive sentinel `"max"`, which fills the
+     * full available balance once it loads (same as the Max preset).
+     */
     defaultAmount?: string;
-    recipient: Address;
+    recipient: Address | string;
+    /**
+     * The user's current in-app balance, in USD, as the consuming app displays
+     * it. When provided, the amount screen shows a "Balance after deposit" row
+     * (`appBalanceUsd + amount`) so the user sees their post-deposit app
+     * balance. The row is hidden when this is omitted.
+     */
+    appBalanceUsd?: number;
     postBridgeActions?: PostBridgeAction[];
     outputTokenRules?: OutputTokenRule[];
     rejectUnmapped?: boolean;
@@ -272,7 +284,7 @@ type DepositLifecycleEvent = {
     amount: string;
     sourceChain: ChainId | "unknown";
     sourceToken?: string;
-    targetChain: number;
+    targetChain: number | "solana";
     targetToken: string;
 } | {
     type: "failed";

package/dist/{types-xSHZSlrT.d.ts → types-D8Q4TMk7.d.ts}

@@ -111,7 +111,7 @@ interface DepositCompleteEventData {
     amount: string;
     sourceChain: ChainId | "unknown";
     sourceToken?: string;
-    targetChain: number;
+    targetChain: number | "solana";
     targetToken: string;
 }
 interface DepositFailedEventData {
@@ -157,16 +157,28 @@ interface DepositModalProps {
     dappWalletClient?: WalletClient | null;
     dappPublicClient?: PublicClient | null;
     dappAddress?: Address | null;
-    targetChain: Chain | number;
-    targetToken: Address;
+    targetChain: Chain | number | "solana";
+    targetToken: Address | string;
     isOpen: boolean;
     onClose: () => void;
     inline?: boolean;
     closeOnOverlayClick?: boolean;
     sourceChain?: Chain | number;
     sourceToken?: Address;
+    /**
+     * Pre-fills the deposit amount. Either a USD-denominated number string
+     * (e.g. "25") or the case-insensitive sentinel `"max"`, which fills the
+     * full available balance once it loads (same as the Max preset).
+     */
     defaultAmount?: string;
-    recipient: Address;
+    recipient: Address | string;
+    /**
+     * The user's current in-app balance, in USD, as the consuming app displays
+     * it. When provided, the amount screen shows a "Balance after deposit" row
+     * (`appBalanceUsd + amount`) so the user sees their post-deposit app
+     * balance. The row is hidden when this is omitted.
+     */
+    appBalanceUsd?: number;
     postBridgeActions?: PostBridgeAction[];
     outputTokenRules?: OutputTokenRule[];
     rejectUnmapped?: boolean;
@@ -272,7 +284,7 @@ type DepositLifecycleEvent = {
     amount: string;
     sourceChain: ChainId | "unknown";
     sourceToken?: string;
-    targetChain: number;
+    targetChain: number | "solana";
     targetToken: string;
 } | {
     type: "failed";

package/dist/withdraw.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkBB6UVRAVcjs = require('./chunk-BB6UVRAV.cjs');
-require('./chunk-DX2D2TRZ.cjs');
-require('./chunk-IVTXEYB2.cjs');
+var _chunkCPXERFGCcjs = require('./chunk-CPXERFGC.cjs');
+require('./chunk-ENMIKNXS.cjs');
+require('./chunk-MHKHSCIA.cjs');
 
 
-exports.WithdrawModal = _chunkBB6UVRAVcjs.WithdrawModal;
+exports.WithdrawModal = _chunkCPXERFGCcjs.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-xSHZSlrT.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-xSHZSlrT.cjs';
+import { n as WithdrawModalProps } from './types-D8Q4TMk7.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-D8Q4TMk7.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-xSHZSlrT.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-xSHZSlrT.js';
+import { n as WithdrawModalProps } from './types-D8Q4TMk7.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-D8Q4TMk7.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-QI6Q7V6O.mjs";
-import "./chunk-CTYKQ4B4.mjs";
-import "./chunk-VA3ANS7D.mjs";
+} from "./chunk-3FHYC3K7.mjs";
+import "./chunk-7VKAUBZ7.mjs";
+import "./chunk-UCZXBHLH.mjs";
 export {
   WithdrawModal
 };

package/package.json

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