npm - @abstraxn/signer-react - Versions diffs - 3.3.10 → 4.0.0 - Mend

@abstraxn/signer-react 3.3.10 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -5,6 +5,39 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## [4.0.0] - 2026-09-24
+### Fixed
+- **`WalletModal` overlay trapped under host layouts** – When the modal was rendered inside an app shell (e.g. main column with `z-index` below a fixed sidebar), the dim/blur only covered part of the page. `WalletModal` now portals its `ShadowHost` to `document.body` (same approach as onboarding) and applies `backdrop-filter` on `.wallet-modal-overlay` so integrators get a full-viewport overlay regardless of host stacking contexts.
+- **`ConnectButton` + portaled `WalletModal` invisible** – Nesting `WalletModal` inside `ConnectButton`'s `ShadowHost` caused nested-boundary mode: CSS stayed in the button shadow while the overlay DOM was on `body`. `WalletModal` now resets shadow context when portaling, and `ConnectButton` renders the modal outside its own `ShadowHost`.
+- **MFA “Use a backup code” looked like a raw button** – OnboardingUIWeb was missing `.onboarding-mfa-backup-link` styles (present only in OnboardingUI.css), so the control kept the browser default border. Styles are now in the Web embedded CSS as an underlined text link.
+- **Sign MFA used `window.prompt`** – When Send Funds (and other signing hooks) hit `SIGN_MFA_REQUIRED`, the SDK opened a native browser prompt. Signing step-up now opens the shared `MfaVerifyModal` (same OTP + backup UI as disable-2FA) via `AbstraxnProvider`, then retries the sign.
+- **Send Funds failed with `insufficient fee` / minimum global fee** – Wallet Send passed both EIP-1559 and legacy gas fields; viem serialized a type-2 tx with low tips that Ethermint chains (e.g. BlockMaze) reject. Send now prefers `eth_gasPrice` (legacy) when available, and `useSignTxn` / `useSignAndSendTxn` no longer mix both fee styles.
+- **Abstraxn brand mark updated** – “Powered by” footers in onboarding (React + Web) and Manage Wallet now use the current green mark from `frontend-ui` (`mob-logo.svg`) instead of the old pink/orange SVG.
+- **Disable 2FA failed with `SIGN_MFA_REQUIRED`** – The disable flow called login `verifyMfa` then signed a payload via `/sign/transaction`. Sign step-up requires `verifySignMfa`; Manage Wallet / `useDisableMfa` now use that, and `disableMfaWithSignedPayload` retries once via the shared MFA modal if sign MFA is still required.
+- **Select Network empty on Mainnets for testnet-only apps** – When every configured chain is a testnet (e.g. BlockMaze), the selector now opens on **Testnets** and empty states say “No mainnets configured” instead of `No networks found for ""`.
+- **Inline `OnboardingUI` scroll broken in embeds** – Non-modal React OnboardingUI was still `min-height: 100vh` + centered (Web already used `onboarding-inline`). It now applies `onboarding-inline` and drops the card’s nested max-height so hosts like sdk-integrate can scroll to wallet options.
+- **Auth Methods connect/unlink errors invisible** – OAuth link failures (e.g. Google account email mismatch via popup `?error=`) already set `linkUnlinkError`, but Auth Methods never rendered it. Connect/unlink failures now open a dedicated alert modal with an **Ok** button; success still shows on the Auth Methods list.
+- **Onboarding dark theme: X / Discord icons invisible** – Social icon buttons used `fill="currentColor"` but React OnboardingUI CSS never set `color` on the button (UA default stayed near-black on dark backgrounds). Dark theme now uses white icons; light theme uses near-black.
+- **OTP Verify button too wide** – React OnboardingUI kept `.onboarding-button { width: 100% }` on the OTP Verify CTA. It now matches the OTP digit row width (same as Web).
+- **OTP Verify loading content misaligned** – Constraining the button with `display: block` broke flex centering of the spinner + “Verifying...” label; restored flex layout and wired the spinner to the existing `onboarding-spin` animation.
+### Breaking
+- **CSS isolation via Shadow DOM.** `ConnectButton`, `WalletModal`, and the onboarding UI (both the React and vanilla-JS variants) now render inside a Shadow DOM boundary, so a consuming application's global CSS can no longer bleed into the SDK's UI, and the SDK's CSS can no longer bleed into the host page. Direct consequence: **overriding the onboarding UI's documented class names (`.onboarding-container`, `.onboarding-card`, `.onboarding-button-primary`, `.onboarding-button-google`, `.onboarding-input`, `.onboarding-theme-light/dark`) from your own application's global stylesheet no longer works** — a global CSS rule cannot reach inside a shadow root. Use `config.ui.customCSS` instead; the SDK injects it for you inside the boundary. See `signer-core`'s `OnboardingUI` README for details.
+- **`customCSS` vs `colors` precedence flipped.** Previously `colors` config won over `customCSS` on equal-specificity rules; `customCSS` is now always injected last and wins. Only affects consumers setting both with overlapping selectors/properties.
+### Added
+- **Turnkey-backed balances** — Wallet balance / token list prefer Turnkey `get_wallet_address_balances` (via `@abstraxn/signer-core@^2.2.0`) for supported CAIP-2 chains, with RPC fallback for native balance. New hooks: `useTokenBalances`, `useSolanaTokenBalances`. WalletModal / Send / chain selector consume the centralized provider balance state.
+- **`part` attributes** on the onboarding UI's 5 previously-documented elements (`container`, `card`, `button-primary`, `button-google`, `input`), for forward-compatible `::part()` styling across the shadow boundary — no `::part()` stylesheet or full theming API shipped yet, just the attribute hook.
+- **`config.ui.customCSS` now also applies to `WalletModal` and `ConnectButton`**, not just the onboarding UI — a new capability, not a breaking change (consumers who only ever used it for the login modal see no change; consumers who want it applied more broadly now can).
+### Dependencies
+- `@abstraxn/signer-core` bumped to `^2.2.0` (required for Turnkey get-balance APIs).
 ## [3.3.10] - 2026-09-18
 ### Fixed

package/dist/src/ConnectButton.css.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const cssText: string;
2	+ export default cssText;

package/dist/src/ConnectButton.css.js ADDED Viewed

@@ -0,0 +1 @@

+ export default "/* ConnectButton Styles */\n.abstraxn-connect-button {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 12px 24px;\n font-size: 16px;\n font-weight: 600;\n line-height: 1.5;\n border-radius: 12px;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n font-family: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n white-space: nowrap;\n user-select: none;\n outline: none;\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n}\n\n.abstraxn-connect-button:focus-visible {\n outline-offset: 2px;\n}\n\n.abstraxn-connect-button-light:focus-visible {\n outline: 2px solid #111827;\n}\n\n.abstraxn-connect-button-dark:focus-visible {\n outline: 2px solid #9ca3af;\n}\n\n.abstraxn-connect-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* Light Theme (Default) */\n.abstraxn-connect-button.abstraxn-connect-button-light {\n background-color: #111827;\n color: #ffffff;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-light:hover:not(:disabled) {\n background-color: #1f2937;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n transform: translateY(-1px);\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-light:active:not(:disabled) {\n transform: translateY(0);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n background-color: #374151;\n}\n\n/* Dark Theme */\n.abstraxn-connect-button.abstraxn-connect-button-dark {\n background-color: #4b5563;\n color: #ffffff;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-dark:hover:not(:disabled) {\n background-color: #6b7280;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);\n transform: translateY(-1px);\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-dark:active:not(:disabled) {\n transform: translateY(0);\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);\n background-color: #6b7280;\n}\n\n/* Connected State - Light Theme */\n.abstraxn-connect-button.abstraxn-connect-button-light.abstraxn-connect-button-connected {\n background: #f3f4f6;\n color: #111827;\n border: 1px solid #e5e7eb;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-light.abstraxn-connect-button-connected:hover:not(:disabled) {\n background: #e5e7eb;\n box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);\n}\n\n/* Connected State - Dark Theme */\n.abstraxn-connect-button.abstraxn-connect-button-dark.abstraxn-connect-button-connected {\n background: #374151;\n color: #ffffff;\n border: 1px solid #4b5563;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-dark.abstraxn-connect-button-connected:hover:not(:disabled) {\n background: #4b5563;\n box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.3);\n}\n\n/* Size Variants */\n.abstraxn-connect-button.abstraxn-connect-button-sm {\n padding: 8px 16px;\n font-size: 14px;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-md {\n padding: 12px 24px;\n font-size: 16px;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-lg {\n padding: 16px 32px;\n font-size: 18px;\n}\n\n/* Variant Styles */\n.abstraxn-connect-button.abstraxn-connect-button-outline {\n background: transparent;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-outline.abstraxn-connect-button-light {\n border: 2px solid #111827;\n color: #111827;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-outline.abstraxn-connect-button-light:hover:not(:disabled) {\n background: #111827;\n color: #ffffff;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-outline.abstraxn-connect-button-dark {\n border: 2px solid #9ca3af;\n color: #9ca3af;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-outline.abstraxn-connect-button-dark:hover:not(:disabled) {\n background: #9ca3af;\n color: #ffffff;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-ghost {\n background: transparent;\n border: none;\n box-shadow: none;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-ghost.abstraxn-connect-button-light {\n color: #111827;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-ghost.abstraxn-connect-button-light:hover:not(:disabled) {\n background: rgba(17, 24, 39, 0.1);\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-ghost.abstraxn-connect-button-dark {\n color: #9ca3af;\n}\n\n.abstraxn-connect-button.abstraxn-connect-button-ghost.abstraxn-connect-button-dark:hover:not(:disabled) {\n background: rgba(156, 163, 175, 0.2);\n}\n\n/* Loading State - show status text only (Connecting... / Disconnecting...) */\n.abstraxn-connect-button-loading {\n pointer-events: none;\n}\n\n/* Address Badge */\n.abstraxn-connect-button-address {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n background: rgba(255, 255, 255, 0.2);\n border-radius: 6px;\n font-size: 0.875em;\n font-weight: 500;\n margin-left: 8px;\n}\n\n.abstraxn-connect-button-dark .abstraxn-connect-button-address {\n background: rgba(255, 255, 255, 0.15);\n}\n\n.abstraxn-connect-button-light.abstraxn-connect-button-connected .abstraxn-connect-button-address {\n background: rgba(17, 24, 39, 0.1);\n color: #111827;\n}\n\n.abstraxn-connect-button-dark.abstraxn-connect-button-connected .abstraxn-connect-button-address {\n background: rgba(156, 163, 175, 0.2);\n color: #9ca3af;\n}\n\n";

package/dist/src/ConnectButton.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import type { ReactNode, ButtonHTMLAttributes, CSSProperties } from 'react';
-import './ConnectButton.css';
 export type ConnectButtonVariant = 'primary' | 'outline' | 'ghost';
 export type ConnectButtonSize = 'sm' | 'md' | 'lg';
 export interface ConnectButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> {

package/dist/src/ConnectButton.js CHANGED Viewed

@@ -5,8 +5,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useCallback, useState, useMemo } from 'react';
 import { useAbstraxnWallet } from './AbstraxnProvider';
-import { WalletModal } from './WalletModal';
-import './ConnectButton.css';
+import { WalletModal, WALLET_MODAL_CSS_TEXTS } from './WalletModal';
+import { ShadowHost } from './components/ShadowHost';
+import { formatAddress } from './components/WalletModal/utils/formatUtils';
+import connectButtonCss from './ConnectButton.css.js';
+const CONNECT_BUTTON_CSS_TEXTS = [connectButtonCss, ...WALLET_MODAL_CSS_TEXTS];
 /**
  * ConnectButton - A button component that triggers the onboarding modal
  *
@@ -93,9 +96,7 @@ export function ConnectButton({ connectText = 'Connect Wallet', connectedText =
         }
         if (isConnected) {
             if (showAddress && address) {
-                // Show shortened address
-                const shortAddress = `${address.slice(0, 6)}...${address.slice(-4)}`;
-                return (_jsxs(_Fragment, { children: [connectedText, _jsx("span", { className: "abstraxn-connect-button-address", children: shortAddress })] }));
+                return (_jsxs(_Fragment, { children: [connectedText, _jsx("span", { className: "abstraxn-connect-button-address", children: formatAddress(address) })] }));
             }
             else {
                 return connectedText;
@@ -105,6 +106,6 @@ export function ConnectButton({ connectText = 'Connect Wallet', connectedText =
             return connectText;
         }
     }, [children, isBusy, disconnecting, showLoading, disconnectingText, connectingText, isConnected, showAddress, address, connectedText, connectText]);
-    return (_jsxs(_Fragment, { children: [_jsx("button", { ...props, className: buttonClasses, style: style, onClick: handleClick, disabled: disabled || isBusy, type: props.type || 'button', children: buttonContent }), isConnected && (_jsx(WalletModal, { isOpen: isWalletModalOpen, onClose: handleCloseModal }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ShadowHost, { cssTexts: CONNECT_BUTTON_CSS_TEXTS, customCSS: uiConfig?.customCSS, children: _jsx("button", { ...props, className: buttonClasses, style: style, onClick: handleClick, disabled: disabled || isBusy, type: props.type || 'button', children: buttonContent }) }), isConnected && (_jsx(WalletModal, { isOpen: isWalletModalOpen, onClose: handleCloseModal }))] }));
 }
 //# sourceMappingURL=ConnectButton.js.map

package/dist/src/ExternalWalletButtons.css.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const cssText: string;
2	+ export default cssText;

package/dist/src/ExternalWalletButtons.css.js ADDED Viewed

@@ -0,0 +1 @@

+ export default ".external-wallet-buttons {\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: 100%;\n}\n\n.external-wallet-buttons-list {\n flex-direction: column;\n}\n\n.external-wallet-buttons-grid {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.external-wallet-button {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 12px;\n padding: 13px 24px;\n font-size: 15px;\n font-weight: 500;\n border: 1.5px solid #e5e7eb;\n border-radius: 12px;\n background-color: #ffffff;\n color: #1f2937;\n cursor: pointer;\n transition: all 0.2s ease;\n width: 100%;\n min-height: 48px;\n position: relative;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n /* Match onboarding button style */\n}\n\n/* Center content only in the initial \"Continue with wallet\" button */\n.external-wallet-button-initial {\n justify-content: center;\n}\n\n.onboarding-theme-light .external-wallet-button {\n background-color: #ffffff;\n border-color: #e5e7eb;\n color: #1f2937;\n}\n\n.onboarding-theme-light .external-wallet-button:hover:not(:disabled) {\n background-color: #f9fafb;\n border-color: #d1d5db;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n transform: translateY(-1px);\n}\n\n.onboarding-theme-light .external-wallet-button:active:not(:disabled) {\n background-color: #f3f4f6;\n transform: translateY(0);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n/* Dark theme */\n.onboarding-theme-dark .external-wallet-button {\n background-color: #374151;\n border-color: #4b5563;\n color: #ffffff;\n}\n\n.onboarding-theme-dark .external-wallet-button:hover:not(:disabled) {\n background-color: #4b5563;\n border-color: #6b7280;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n transform: translateY(-1px);\n}\n\n.onboarding-theme-dark .external-wallet-button:active:not(:disabled) {\n background-color: #4b5563;\n transform: translateY(0);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n\n.external-wallet-button:disabled {\n cursor: not-allowed;\n /* Don't change opacity on disabled to prevent blinking */\n}\n\n.external-wallet-button-connected {\n background-color: #f0fdf4;\n border-color: #86efac;\n color: #166534;\n}\n\n.external-wallet-button-connected:hover {\n background-color: #dcfce7;\n}\n\n.external-wallet-button-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n /* Prevent icon from blinking */\n position: relative;\n}\n\n.external-wallet-button-icon img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.external-wallet-button-icon svg {\n width: 100%;\n height: 100%;\n color: currentColor;\n}\n\n.external-wallet-icon-svg {\n width: 100%;\n height: 100%;\n}\n\n.external-wallet-icon-svg path {\n fill: currentColor;\n}\n\n/* Theme-specific icon colors */\n.onboarding-theme-light .external-wallet-button-icon svg {\n color: #1f2937;\n}\n\n.onboarding-theme-dark .external-wallet-button-icon svg {\n color: #ffffff;\n}\n\n.external-wallet-button-text {\n text-align: left;\n font-weight: 500;\n letter-spacing: -0.01em;\n line-height: 1.5;\n flex: 1;\n}\n\n/* Center text only in the initial button */\n.external-wallet-button-initial .external-wallet-button-text {\n text-align: center;\n flex: 0;\n white-space: nowrap;\n}\n\n.onboarding-theme-light .external-wallet-button-text {\n color: #1f2937;\n}\n\n.onboarding-theme-dark .external-wallet-button-text {\n color: #ffffff;\n}\n\n/* Connected state */\n.onboarding-theme-light .external-wallet-button-connected {\n background-color: #f0fdf4;\n border-color: #86efac;\n color: #166534;\n}\n\n.onboarding-theme-light .external-wallet-button-connected:hover {\n background-color: #dcfce7;\n}\n\n.onboarding-theme-dark .external-wallet-button-connected {\n background-color: #064e3b;\n border-color: #10b981;\n color: #6ee7b7;\n}\n\n.onboarding-theme-dark .external-wallet-button-connected:hover {\n background-color: #065f46;\n}\n\n/* More wallets modal */\n.external-wallet-modal {\n position: relative;\n width: 100%;\n background: transparent;\n}\n\n.external-wallet-modal-header {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n position: relative;\n}\n\n.external-wallet-modal-back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n border: none;\n background: transparent;\n cursor: pointer;\n border-radius: 8px;\n transition: all 0.2s ease;\n padding: 0;\n flex-shrink: 0;\n z-index: 10;\n position: relative;\n}\n\n.onboarding-theme-light .external-wallet-modal-back {\n color: #6b7280;\n}\n\n.onboarding-theme-light .external-wallet-modal-back:hover {\n background-color: #f3f4f6;\n color: #1f2937;\n}\n\n.onboarding-theme-dark .external-wallet-modal-back {\n color: #9ca3af;\n}\n\n.onboarding-theme-dark .external-wallet-modal-back:hover {\n background-color: #4b5563;\n color: #ffffff;\n}\n\n.external-wallet-modal-title {\n font-size: 18px;\n font-weight: 500;\n margin: 0;\n flex: 1;\n text-align: center;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n width: 100%;\n}\n\n.onboarding-theme-light .external-wallet-modal-title {\n color: #1f2937;\n}\n\n.onboarding-theme-dark .external-wallet-modal-title {\n color: #ffffff;\n}\n\n.external-wallet-button-more {\n /* Same styling as other buttons, but with a different icon */\n}\n\n.external-wallet-button-more .external-wallet-button-icon {\n opacity: 0.6;\n}\n\n/* WalletConnect Modal z-index fix - ensure it appears above onboarding modal (z-index: 9999) */\n/* WalletConnect v3 uses w3m-* classes */\nw3m-modal,\nw3m-modal-backdrop,\n.w3m-modal,\n.w3m-modal-backdrop,\n#w3m-modal,\n#w3m-modal-backdrop,\n[data-w3m-modal],\n[data-w3m-modal-backdrop] {\n z-index: 10000 !important;\n}\n\n/* WalletConnect v2 uses walletconnect-* classes */\n.walletconnect-modal,\n.walletconnect-modal__backdrop,\n.walletconnect-qrcode__base,\n.walletconnect-qrcode-modal,\n#walletconnect-qrcode-modal,\n[class*=\"walletconnect-modal\"],\n[class*=\"walletconnect-qrcode\"] {\n z-index: 10000 !important;\n}\n\n/* Ensure WalletConnect overlay appears above onboarding modal */\n.walletconnect-modal__backdrop,\n.w3m-modal-backdrop,\n[class*=\"walletconnect\"] [class*=\"backdrop\"],\n[class*=\"w3m\"] [class*=\"backdrop\"] {\n z-index: 10000 !important;\n}\n\n/* WalletConnect container and base elements */\n.walletconnect-modal__container,\n.walletconnect-qrcode__base,\n.w3m-container,\n[class*=\"walletconnect\"] [class*=\"container\"],\n[class*=\"w3m\"] [class*=\"container\"] {\n z-index: 10001 !important;\n}\n\n/* WalletConnect QR code modal specifically */\n.walletconnect-qrcode-modal,\n.walletconnect-qrcode__base,\n.w3m-qrcode,\n[class*=\"walletconnect-qrcode\"],\n[class*=\"w3m-qrcode\"] {\n z-index: 10001 !important;\n}\n\n/* Additional WalletConnect modal elements */\ndiv[class*=\"walletconnect\"],\ndiv[class*=\"w3m\"],\ndiv[id*=\"walletconnect\"],\ndiv[id*=\"w3m\"] {\n z-index: 10000 !important;\n}\n\n";

package/dist/src/ExternalWalletButtons.d.ts CHANGED Viewed

@@ -3,8 +3,11 @@
  * Displays buttons to connect external wallets (MetaMask, WalletConnect, etc.)
  */
 import React from 'react';
-import './ExternalWalletButtons.css';
+import externalWalletButtonsCss from './ExternalWalletButtons.css.js';
+export { externalWalletButtonsCss };
 export declare function resetExternalWalletViewState(): void;
+/** True while "Select your wallet" list is open — email / "or" divider must stay hidden. */
+export declare function isExternalWalletListOpen(): boolean;
 export interface ExternalWalletButtonsProps {
     /**
      * Show as a list of buttons

package/dist/src/ExternalWalletButtons.js CHANGED Viewed

@@ -6,7 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { useExternalWallet } from './hooks';
 import { useAbstraxnWallet } from './AbstraxnProvider';
-import './ExternalWalletButtons.css';
+import externalWalletButtonsCss from './ExternalWalletButtons.css.js';
+export { externalWalletButtonsCss };
 // Module-level variable to persist showMoreWallets state across component remounts
 // This is needed because the component is re-rendered by React Portal in AbstraxnProvider
 let globalShowMoreWallets = false;
@@ -17,6 +18,10 @@ export function resetExternalWalletViewState() {
         window.dispatchEvent(new Event(EXTERNAL_WALLET_VIEW_RESET_EVENT));
     }
 }
+/** True while "Select your wallet" list is open — email / "or" divider must stay hidden. */
+export function isExternalWalletListOpen() {
+    return globalShowMoreWallets;
+}
 /**
  * External Wallet Buttons Component
  *

package/dist/src/WalletModal.css CHANGED Viewed

@@ -58,6 +58,8 @@
   -webkit-backface-visibility: hidden;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   /* Theme variables (overridable via inline style from uiConfig.colors) */
   --abstraxn-primary: #111827;
   --abstraxn-primary-hover: #1f2937;

package/dist/src/WalletModal.css.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const cssText: string;
2	+ export default cssText;

package/dist/src/WalletModal.css.js ADDED Viewed

@@ -0,0 +1 @@

+ export default "/* Wallet Modal Styles */\n\n/* GeistSans Font */\n@font-face {\n font-family: 'GeistSans';\n src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GeistSans';\n src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GeistSans';\n src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GeistSans';\n src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GeistMono';\n src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n.wallet-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10000;\n animation: fadeIn 0.2s ease-out;\n font-family: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n will-change: opacity;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n transform: translateZ(0);\n -webkit-transform: translateZ(0);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n /* Theme variables (overridable via inline style from uiConfig.colors) */\n --abstraxn-primary: #111827;\n --abstraxn-primary-hover: #1f2937;\n --abstraxn-primary-text: #ffffff;\n}\n\n/* Dark Theme (Default) */\n.wallet-modal-overlay.wallet-modal-theme-dark {\n background: rgba(0, 0, 0, 0.5);\n --abstraxn-primary: #4b5563;\n --abstraxn-primary-hover: #6b7280;\n}\n\n/* Light Theme */\n.wallet-modal-overlay.wallet-modal-theme-light {\n background: rgba(0, 0, 0, 0.3);\n}\n\n/* Shared primary button (uses theme variables above) */\n.wallet-modal-primary-btn {\n width: 100%;\n padding: 14px 24px;\n border-radius: 12px;\n border: none;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n background: var(--abstraxn-primary);\n color: var(--abstraxn-primary-text);\n}\n\n.wallet-modal-primary-btn:hover:not(:disabled) {\n background: var(--abstraxn-primary-hover);\n transform: translateY(-1px);\n}\n\n.wallet-modal-primary-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.wallet-modal-content {\n position: relative;\n border-radius: 16px;\n width: 90%;\n max-width: 400px;\n max-height: 90vh;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 24px;\n animation: slideUp 0.3s ease-out;\n display: flex;\n flex-direction: column;\n gap: 20px;\n box-sizing: border-box;\n font-family: 'GeistSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n font-size: 14px;\n will-change: transform, opacity;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n transform: translate3d(0, 0, 0);\n -webkit-transform: translate3d(0, 0, 0);\n}\n\n.wallet-modal-content.selector-open {\n overflow: hidden;\n}\n\n/* Dark Theme Content */\n.wallet-modal-content.wallet-modal-theme-dark {\n background: #1a1a1a;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);\n}\n\n/* Light Theme Content */\n.wallet-modal-content.wallet-modal-theme-light {\n background: #ffffff;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n border: 1px solid #e5e7eb;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes slideUp {\n from {\n transform: translate3d(0, 20px, 0);\n opacity: 0;\n }\n to {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n\n/* Header */\n.wallet-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 8px;\n gap: 12px;\n}\n\n.wallet-modal-header-left {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.wallet-modal-user-info {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.wallet-modal-header-right {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.wallet-modal-avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n flex-shrink: 0;\n}\n\n.wallet-modal-theme-dark .wallet-modal-avatar {\n background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);\n}\n\n.wallet-modal-theme-light .wallet-modal-avatar {\n background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);\n}\n\n.wallet-modal-avatar svg {\n display: block;\n width: 32px;\n height: 32px;\n}\n\n.wallet-modal-user-details {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n min-width: 0;\n text-align: left;\n align-items: flex-start;\n}\n\n.wallet-modal-address {\n font-size: 16px;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n transition: opacity 0.2s;\n font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n}\n\n.wallet-modal-theme-dark .wallet-modal-address {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-address {\n color: #111827;\n}\n\n.wallet-modal-address:hover {\n opacity: 0.8;\n}\n\n.wallet-modal-copy-icon {\n flex-shrink: 0;\n transition: color 0.2s;\n}\n\n.wallet-modal-theme-dark .wallet-modal-copy-icon {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-copy-icon {\n color: #6b7280;\n}\n\n.wallet-modal-theme-dark .wallet-modal-address:hover .wallet-modal-copy-icon {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-address:hover .wallet-modal-copy-icon {\n color: #111827;\n}\n\n.wallet-modal-copy-notification {\n font-size: 12px;\n font-weight: 500;\n padding: 2px 6px;\n border-radius: 4px;\n flex-shrink: 0;\n animation: fadeInOut 2s ease-in-out;\n}\n\n.wallet-modal-theme-dark .wallet-modal-copy-notification {\n color: #10b981;\n background: rgba(16, 185, 129, 0.1);\n}\n\n.wallet-modal-theme-light .wallet-modal-copy-notification {\n color: #059669;\n background: rgba(5, 150, 105, 0.1);\n}\n\n@keyframes fadeInOut {\n 0% {\n opacity: 0;\n transform: scale(0.9);\n }\n 15% {\n opacity: 1;\n transform: scale(1);\n }\n 85% {\n opacity: 1;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(0.9);\n }\n}\n\n.wallet-modal-email {\n font-size: 14px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n max-width: 100%;\n}\n\n.wallet-modal-theme-dark .wallet-modal-email {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-email {\n color: #6b7280;\n}\n\n.wallet-modal-close {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n transition: all 0.2s;\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n}\n\n.wallet-modal-close:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.wallet-modal-theme-dark .wallet-modal-close {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-close {\n color: #6b7280;\n}\n\n.wallet-modal-theme-dark .wallet-modal-close:hover {\n background: #2a2a2a;\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-close:hover {\n background: #f3f4f6;\n color: #111827;\n}\n\n/* Action Buttons */\n.wallet-modal-actions {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n margin-top: 8px;\n}\n\n.wallet-modal-action-btn {\n border-radius: 12px;\n padding: 12px 8px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: 12px;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 15px;\n font-weight: 600;\n border: 1px solid;\n text-align: center;\n}\n\n.wallet-modal-theme-dark .wallet-modal-action-btn {\n background: #2a2a2a;\n border-color: #3a3a3a;\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-action-btn {\n background: #ffffff;\n border-color: #e5e7eb;\n color: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-action-btn:hover {\n background: #3a3a3a;\n border-color: #4a4a4a;\n transform: translateY(-2px);\n}\n\n.wallet-modal-theme-light .wallet-modal-action-btn:hover {\n background: #f3f4f6;\n border-color: #d1d5db;\n transform: translateY(-2px);\n}\n\n.wallet-modal-action-btn svg {\n flex-shrink: 0;\n}\n\n.wallet-modal-theme-dark .wallet-modal-action-btn svg {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-action-btn svg {\n color: #6b7280;\n}\n\n/* Asset Display */\n.wallet-modal-asset {\n border-radius: 12px;\n padding: 16px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n transition: all 0.2s;\n margin-top: 8px;\n border: 1px solid;\n}\n\n.wallet-modal-asset:hover {\n border-color: #9333ea;\n background: rgba(147, 51, 234, 0.02);\n}\n\n.wallet-modal-theme-dark .wallet-modal-asset {\n background: #2a2a2a;\n border-color: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-asset {\n background: #f9fafb;\n border-color: #e5e7eb;\n}\n\n.wallet-modal-theme-dark .wallet-modal-asset:hover {\n background: #3a3a3a;\n border-color: #4a4a4a;\n}\n\n.wallet-modal-theme-light .wallet-modal-asset:hover {\n background: #f3f4f6;\n border-color: #d1d5db;\n}\n\n.wallet-modal-asset-info {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n}\n\n.wallet-modal-asset-icon-wrapper {\n position: relative;\n width: 40px;\n height: 40px;\n flex-shrink: 0;\n}\n\n.wallet-modal-asset-icon-img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n}\n\n.wallet-modal-asset-icon {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background: linear-gradient(135deg, #627eea 0%, #4c6ef5 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.wallet-modal-asset-details {\n display: flex;\n flex-direction: column;\n gap: 2px;\n flex: 1;\n min-width: 0;\n}\n\n.wallet-modal-asset-name {\n font-size: 16px;\n font-weight: 600;\n text-align: left;\n}\n\n.wallet-modal-theme-dark .wallet-modal-asset-name {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-asset-name {\n color: #111827;\n}\n\n.wallet-modal-asset-balance {\n font-size: 14px;\n font-weight: 500;\n text-align: left;\n}\n\n.wallet-modal-theme-dark .wallet-modal-asset-balance {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-asset-balance {\n color: #6b7280;\n}\n\n.wallet-modal-asset-balance-skeleton {\n display: inline-block;\n width: 140px;\n max-width: 100%;\n height: 14px;\n border-radius: 999px;\n background: linear-gradient(90deg, rgba(156, 163, 175, 0.22), rgba(156, 163, 175, 0.44), rgba(156, 163, 175, 0.22));\n background-size: 200% 100%;\n animation: wallet-modal-balance-shimmer 1.2s ease-in-out infinite;\n}\n\n.wallet-modal-theme-dark .wallet-modal-asset-balance-skeleton {\n background: linear-gradient(90deg, rgba(75, 85, 99, 0.3), rgba(107, 114, 128, 0.55), rgba(75, 85, 99, 0.3));\n background-size: 200% 100%;\n}\n\n.wallet-modal-asset-explorer-link {\n display: inline-flex;\n width: fit-content;\n margin-top: 2px;\n font-size: 12px;\n font-weight: 500;\n text-decoration: none;\n}\n\n.wallet-modal-theme-dark .wallet-modal-asset-explorer-link {\n color: #a855f7;\n}\n\n.wallet-modal-theme-light .wallet-modal-asset-explorer-link {\n color: #9333ea;\n}\n\n.wallet-modal-asset-explorer-link:hover {\n text-decoration: underline;\n}\n\n@keyframes wallet-modal-balance-shimmer {\n 0% {\n background-position: 100% 0;\n }\n 100% {\n background-position: -100% 0;\n }\n}\n\n.wallet-modal-asset-status {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background: #10b981;\n border: 2px solid white;\n z-index: 1;\n}\n\n.wallet-modal-theme-dark .wallet-modal-asset-status {\n border-color: #1a1a1a;\n}\n\n.wallet-modal-asset-arrow {\n flex-shrink: 0;\n}\n\n.wallet-modal-theme-dark .wallet-modal-asset-arrow {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-asset-arrow {\n color: #6b7280;\n}\n\n/* Navigation Menu */\n.wallet-modal-menu {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-top: 8px;\n}\n\n.wallet-modal-menu-item {\n background: transparent;\n border: none;\n border-radius: 12px;\n padding: 14px 16px;\n display: flex;\n align-items: center;\n gap: 12px;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 15px;\n text-align: left;\n width: 100%;\n justify-content: flex-start;\n font-weight: 500;\n text-align: left;\n width: 100%;\n}\n\n.wallet-modal-theme-dark .wallet-modal-menu-item {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-menu-item {\n color: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-menu-item:hover {\n background: #2a2a2a;\n}\n\n.wallet-modal-theme-light .wallet-modal-menu-item:hover {\n background: #f3f4f6;\n}\n\n.wallet-modal-menu-item svg {\n flex-shrink: 0;\n}\n\n\n/* Disconnect button - Red theme */\n.wallet-modal-menu-item-disconnect {\n color: #ef4444 !important;\n}\n\n.wallet-modal-menu-item-disconnect svg {\n color: #ef4444 !important;\n}\n\n.wallet-modal-menu-item-disconnect:hover {\n background: rgba(239, 68, 68, 0.1) !important;\n}\n\n.wallet-modal-menu-item-disconnect:hover svg {\n color: #dc2626 !important;\n}\n\n.wallet-modal-theme-dark .wallet-modal-menu-item-disconnect {\n color: #ef4444 !important;\n}\n\n.wallet-modal-theme-dark .wallet-modal-menu-item-disconnect svg {\n color: #ef4444 !important;\n}\n\n.wallet-modal-theme-dark .wallet-modal-menu-item-disconnect:hover {\n background: rgba(239, 68, 68, 0.15) !important;\n}\n\n.wallet-modal-theme-dark .wallet-modal-menu-item-disconnect:hover svg {\n color: #f87171 !important;\n}\n\n/* Divider */\n.wallet-modal-divider {\n height: 1px;\n margin: 8px 0;\n}\n\n.wallet-modal-theme-dark .wallet-modal-divider {\n background: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-divider {\n background: #e5e7eb;\n}\n\n/* External Wallets Section */\n.wallet-modal-external-wallets {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-top: 8px;\n}\n\n.wallet-modal-external-wallets-label {\n font-size: 14px;\n font-weight: 500;\n margin-bottom: 4px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-external-wallets-label {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-external-wallets-label {\n color: #6b7280;\n}\n\n/* Disconnect Button */\n.wallet-modal-disconnect {\n background: transparent;\n border-radius: 12px;\n padding: 14px 16px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 12px;\n color: #ef4444;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 15px;\n font-weight: 500;\n width: 100%;\n margin-top: 8px;\n border: 1px solid;\n text-align: left;\n}\n\n.wallet-modal-theme-dark .wallet-modal-disconnect {\n border-color: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-disconnect {\n border-color: #e5e7eb;\n}\n\n.wallet-modal-theme-dark .wallet-modal-disconnect:hover {\n background: #2a1a1a;\n border-color: #ef4444;\n}\n\n.wallet-modal-theme-light .wallet-modal-disconnect:hover {\n background: #fef2f2;\n border-color: #ef4444;\n}\n\n.wallet-modal-disconnect svg {\n flex-shrink: 0;\n}\n\n/* Scrollbar Styling */\n.wallet-modal-content::-webkit-scrollbar {\n width: 8px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-content::-webkit-scrollbar-track {\n background: #1a1a1a;\n border-radius: 4px;\n}\n\n.wallet-modal-theme-light .wallet-modal-content::-webkit-scrollbar-track {\n background: #ffffff;\n border-radius: 4px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-content::-webkit-scrollbar-thumb {\n background: #3a3a3a;\n border-radius: 4px;\n}\n\n.wallet-modal-theme-light .wallet-modal-content::-webkit-scrollbar-thumb {\n background: #d1d5db;\n border-radius: 4px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-content::-webkit-scrollbar-thumb:hover {\n background: #4a4a4a;\n}\n\n.wallet-modal-theme-light .wallet-modal-content::-webkit-scrollbar-thumb:hover {\n background: #9ca3af;\n}\n\n/* Balance Display */\n.wallet-modal-balance {\n border-radius: 12px;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 8px;\n border: 1px solid;\n background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(126, 34, 206, 0.1) 100%);\n text-align: left;\n}\n\n.wallet-modal-theme-dark .wallet-modal-balance {\n border-color: #3a3a3a;\n background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(147, 51, 234, 0.15) 100%);\n}\n\n.wallet-modal-theme-light .wallet-modal-balance {\n border-color: #e5e7eb;\n background: linear-gradient(135deg, rgba(147, 51, 234, 0.05) 0%, rgba(126, 34, 206, 0.05) 100%);\n}\n\n.wallet-modal-balance-label {\n font-size: 14px;\n font-weight: 500;\n text-align: left;\n}\n\n.wallet-modal-theme-dark .wallet-modal-balance-label {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-balance-label {\n color: #6b7280;\n}\n\n.wallet-modal-balance-value {\n font-size: 28px;\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 8px;\n font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n text-align: left;\n}\n\n.wallet-modal-theme-dark .wallet-modal-balance-value {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-balance-value {\n color: #111827;\n}\n\n/* Receive Modal */\n.wallet-modal-receive-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.wallet-modal-back {\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 8px;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n transition: all 0.2s;\n width: 40px;\n height: 40px;\n box-sizing: border-box;\n}\n\n.wallet-modal-back:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.wallet-modal-theme-dark .wallet-modal-back {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-back {\n color: #6b7280;\n}\n\n.wallet-modal-theme-dark .wallet-modal-back:hover {\n background: #2a2a2a;\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-back:hover {\n background: #f3f4f6;\n color: #111827;\n}\n\n.wallet-modal-settings {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: none;\n cursor: pointer;\n border-radius: 8px;\n transition: all 0.2s ease;\n padding: 0;\n color: inherit;\n}\n\n.wallet-modal-theme-dark .wallet-modal-settings {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-settings {\n color: #6b7280;\n}\n\n.wallet-modal-theme-dark .wallet-modal-settings:hover {\n background: #2a2a2a;\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-settings:hover {\n background: #f3f4f6;\n color: #111827;\n}\n\n.wallet-modal-content .wallet-modal-receive-title {\n font-size: 20px;\n font-weight: 500;\n margin: 0;\n flex: 1;\n text-align: center;\n}\n\n.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-receive-title {\n color: #ffffff;\n}\n\n.wallet-modal-content.wallet-modal-theme-light .wallet-modal-receive-title {\n color: #111827;\n}\n\n.wallet-modal-receive-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 24px;\n}\n\n.wallet-modal-qr-container {\n padding: 20px;\n background: #ffffff;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n\n.wallet-modal-address-section {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.wallet-modal-address-label {\n font-size: 14px;\n font-weight: 500;\n text-align: center;\n}\n\n.wallet-modal-theme-dark .wallet-modal-address-label {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-address-label {\n color: #6b7280;\n}\n\n.wallet-modal-address-display {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n border-radius: 12px;\n border: 1px solid;\n}\n\n.wallet-modal-theme-dark .wallet-modal-address-display {\n background: #2a2a2a;\n border-color: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-address-display {\n background: #f9fafb;\n border-color: #e5e7eb;\n}\n\n.wallet-modal-address-full {\n flex: 1;\n font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n font-size: 14px;\n word-break: break-all;\n text-align: left;\n}\n\n.wallet-modal-theme-dark .wallet-modal-address-full {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-address-full {\n color: #111827;\n}\n\n.wallet-modal-copy-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border-radius: 8px;\n border: 1px solid;\n background: transparent;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 14px;\n font-weight: 500;\n white-space: nowrap;\n}\n\n.wallet-modal-theme-dark .wallet-modal-copy-btn {\n color: #ffffff;\n border-color: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-copy-btn {\n color: #111827;\n border-color: #e5e7eb;\n}\n\n.wallet-modal-theme-dark .wallet-modal-copy-btn:hover {\n background: #3a3a3a;\n border-color: #4a4a4a;\n}\n\n.wallet-modal-theme-light .wallet-modal-copy-btn:hover {\n background: #f3f4f6;\n border-color: #d1d5db;\n}\n\n.wallet-modal-copy-btn.copied {\n background: #10b981;\n border-color: #10b981;\n color: #ffffff;\n}\n\n.wallet-modal-address-hint {\n font-size: 13px;\n text-align: center;\n margin: 0;\n}\n\n.wallet-modal-theme-dark .wallet-modal-address-hint {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-address-hint {\n color: #6b7280;\n}\n\n/* Send Modal */\n.wallet-modal-send-content {\n display: flex;\n flex-direction: column;\n gap: 20px;\n /* padding: 20px 0; */\n}\n\n.wallet-modal-send-field {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.wallet-modal-send-label {\n font-size: 14px;\n font-weight: 500;\n text-align: left;\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-label {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-send-label {\n color: #6b7280;\n}\n\n/* Token Selector */\n.wallet-modal-send-token-selector-wrapper {\n position: relative;\n width: 100%;\n}\n\n.wallet-modal-send-token-selector {\n width: 100%;\n padding: 14px 16px;\n border-radius: 12px;\n border: 1px solid;\n background: transparent;\n cursor: pointer;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n}\n\n.wallet-modal-send-chain-dropdown {\n position: absolute;\n top: calc(100% + 8px);\n left: 0;\n right: 0;\n width: 100%;\n z-index: 10001;\n border-radius: 12px;\n border: 1px solid;\n overflow: hidden;\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-chain-dropdown {\n background: #1a1a1a;\n border-color: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-send-chain-dropdown {\n background: #ffffff;\n border-color: #e5e7eb;\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-token-selector {\n border-color: #3a3a3a;\n background: #2a2a2a;\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-send-token-selector {\n border-color: #e5e7eb;\n background: #f9fafb;\n color: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-token-selector:hover {\n background: #3a3a3a;\n border-color: #4a4a4a;\n}\n\n.wallet-modal-theme-light .wallet-modal-send-token-selector:hover {\n background: #f3f4f6;\n border-color: #d1d5db;\n}\n\n.wallet-modal-send-token-info {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.wallet-modal-send-token-name {\n font-size: 15px;\n font-weight: 500;\n}\n\n/* Amount Input */\n.wallet-modal-send-amount-wrapper {\n display: flex;\n align-items: center;\n border-radius: 12px;\n border: 1px solid;\n overflow: hidden;\n background: transparent;\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-amount-wrapper {\n border-color: #3a3a3a;\n background: #2a2a2a;\n}\n\n.wallet-modal-theme-light .wallet-modal-send-amount-wrapper {\n border-color: #e5e7eb;\n background: #f9fafb;\n}\n\n.wallet-modal-send-amount-wrapper.error {\n border-color: #ef4444;\n}\n\n.wallet-modal-send-amount-prefix {\n padding: 14px 16px;\n font-size: 15px;\n font-weight: 500;\n flex-shrink: 0;\n border-right: 1px solid;\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-amount-prefix {\n color: #ffffff;\n border-color: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-send-amount-prefix {\n color: #111827;\n border-color: #e5e7eb;\n}\n\n.wallet-modal-send-amount-input {\n flex: 1;\n padding: 14px 16px;\n border: none;\n background: transparent;\n font-size: 16px;\n font-weight: 500;\n outline: none;\n min-width: 0;\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-amount-input {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-send-amount-input {\n color: #111827;\n}\n\n.wallet-modal-send-amount-input::placeholder {\n opacity: 0.5;\n}\n\n.wallet-modal-send-amount-suffix {\n padding: 14px 16px;\n font-size: 14px;\n flex-shrink: 0;\n opacity: 0.7;\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-amount-suffix {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-send-amount-suffix {\n color: #6b7280;\n}\n\n.wallet-modal-send-balance {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n margin-top: 4px;\n}\n\n.wallet-modal-send-balance-label {\n opacity: 0.7;\n}\n\n.wallet-modal-send-balance-value {\n font-weight: 500;\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-balance {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-send-balance {\n color: #6b7280;\n}\n\n/* Address Input */\n.wallet-modal-send-address-input {\n width: 100%;\n padding: 14px 16px;\n border-radius: 12px;\n border: 1px solid;\n background: transparent;\n font-size: 14px;\n font-family: 'GeistMono', 'SF Mono', monospace;\n outline: none;\n transition: all 0.2s;\n box-sizing: border-box;\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-address-input {\n border-color: #3a3a3a;\n background: #2a2a2a;\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-send-address-input {\n border-color: #e5e7eb;\n background: #f9fafb;\n color: #111827;\n}\n\n.wallet-modal-send-address-input.error {\n border-color: #ef4444;\n}\n\n.wallet-modal-send-address-input:focus {\n border-color: #9333ea;\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-address-input:focus {\n border-color: #a855f7;\n}\n\n.wallet-modal-theme-light .wallet-modal-send-address-input:focus {\n border-color: #9333ea;\n}\n\n.wallet-modal-send-address-input::placeholder {\n opacity: 0.5;\n}\n\n/* Error Messages */\n.wallet-modal-send-error {\n font-size: 12px;\n color: #ef4444;\n margin-top: 4px;\n text-align: left;\n}\n\n/* Preview Transaction Button */\n.wallet-modal-send-preview-btn {\n width: 100%;\n padding: 14px 24px;\n border-radius: 12px;\n border: none;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-top: 8px;\n}\n\n.wallet-modal-send-preview-btn.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-preview-btn {\n background: var(--abstraxn-primary);\n color: var(--abstraxn-primary-text);\n}\n\n.wallet-modal-theme-light .wallet-modal-send-preview-btn {\n background: var(--abstraxn-primary);\n color: var(--abstraxn-primary-text);\n}\n\n.wallet-modal-theme-dark .wallet-modal-send-preview-btn:hover:not(.disabled) {\n background: var(--abstraxn-primary-hover);\n transform: translateY(-1px);\n}\n\n.wallet-modal-theme-light .wallet-modal-send-preview-btn:hover:not(.disabled) {\n background: var(--abstraxn-primary-hover);\n transform: translateY(-1px);\n}\n\n/* Preview Modal */\n.wallet-modal-preview-content {\n padding: 20px 0;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.wallet-modal-preview-section {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 20px;\n border-radius: 12px;\n border: 1px solid;\n}\n\n.wallet-modal-theme-dark .wallet-modal-preview-section {\n background: #2a2a2a;\n border-color: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-preview-section {\n background: #f9fafb;\n border-color: #e5e7eb;\n}\n\n.wallet-modal-preview-item {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.wallet-modal-preview-label {\n font-size: 12px;\n opacity: 0.7;\n text-align: left;\n}\n\n.wallet-modal-preview-value {\n font-size: 14px;\n font-weight: 500;\n word-break: break-all;\n text-align: left;\n}\n\n.wallet-modal-theme-dark .wallet-modal-preview-label,\n.wallet-modal-theme-dark .wallet-modal-preview-value {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-preview-label,\n.wallet-modal-theme-light .wallet-modal-preview-value {\n color: #111827;\n}\n\n.wallet-modal-preview-actions {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.wallet-modal-preview-btn {\n width: 100%;\n padding: 14px 24px;\n border-radius: 12px;\n border: none;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.wallet-modal-preview-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.wallet-modal-preview-btn-primary {\n background: var(--abstraxn-primary);\n color: var(--abstraxn-primary-text);\n}\n\n.wallet-modal-preview-btn-primary:hover:not(:disabled) {\n background: var(--abstraxn-primary-hover);\n transform: translateY(-1px);\n}\n\n.wallet-modal-preview-btn-secondary {\n background: transparent;\n border: 1px solid;\n}\n\n.wallet-modal-theme-dark .wallet-modal-preview-btn-secondary {\n border-color: #3a3a3a;\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-preview-btn-secondary {\n border-color: #e5e7eb;\n color: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-preview-btn-secondary:hover:not(:disabled) {\n background: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-preview-btn-secondary:hover:not(:disabled) {\n background: #f3f4f6;\n}\n\n/* Success Modal */\n.wallet-modal-success-content {\n padding: 40px 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n text-align: center;\n}\n\n.wallet-modal-success-icon {\n width: 64px;\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.wallet-modal-content .wallet-modal-success-title {\n font-size: 24px;\n font-weight: 500;\n margin: 0;\n}\n\n.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-success-title {\n color: #ffffff;\n}\n\n.wallet-modal-content.wallet-modal-theme-light .wallet-modal-success-title {\n color: #111827;\n}\n\n.wallet-modal-success-message {\n font-size: 14px;\n opacity: 0.7;\n margin: 0;\n}\n\n.wallet-modal-theme-dark .wallet-modal-success-message {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-success-message {\n color: #6b7280;\n}\n\n.wallet-modal-success-link {\n font-size: 14px;\n text-decoration: none;\n padding: 8px 16px;\n border-radius: 8px;\n transition: all 0.2s;\n}\n\n.wallet-modal-theme-dark .wallet-modal-success-link {\n color: #a855f7;\n background: rgba(147, 51, 234, 0.1);\n}\n\n.wallet-modal-theme-light .wallet-modal-success-link {\n color: #9333ea;\n background: rgba(147, 51, 234, 0.1);\n}\n\n.wallet-modal-success-link:hover {\n background: rgba(147, 51, 234, 0.2);\n}\n\n.wallet-modal-success-btn {\n width: 100%;\n padding: 14px 24px;\n border-radius: 12px;\n border: none;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n background: var(--abstraxn-primary);\n color: var(--abstraxn-primary-text);\n}\n\n.wallet-modal-success-btn:hover {\n background: var(--abstraxn-primary-hover);\n transform: translateY(-1px);\n}\n\n.wallet-modal-action-btn-primary {\n padding: 14px 24px;\n border-radius: 12px;\n border: none;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n background: var(--abstraxn-primary);\n color: var(--abstraxn-primary-text);\n}\n\n.wallet-modal-action-btn-primary:hover {\n transform: translateY(-2px);\n background: var(--abstraxn-primary-hover);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);\n}\n\n/* Manage Modal */\n.wallet-modal-manage-content {\n display: flex;\n flex-direction: column;\n gap: 32px;\n}\n\n.wallet-modal-manage-section {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.wallet-modal-content .wallet-modal-manage-section-title {\n font-size: 16px;\n font-weight: 500;\n margin: 0;\n text-align: left;\n letter-spacing: -0.01em;\n}\n\n.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-manage-section-title {\n color: #ffffff;\n}\n\n.wallet-modal-content.wallet-modal-theme-light .wallet-modal-manage-section-title {\n color: #111827;\n}\n\n.wallet-modal-manage-item {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 0;\n border-bottom: 1px solid;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-item {\n border-color: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-item {\n border-color: #e5e7eb;\n}\n\n.wallet-modal-manage-item:last-child {\n border-bottom: none;\n}\n\n.wallet-modal-manage-label {\n font-size: 13px;\n font-weight: 500;\n text-align: left;\n letter-spacing: 0.01em;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-label {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-label {\n color: #6b7280;\n}\n\n.wallet-modal-manage-value {\n font-size: 15px;\n font-weight: 500;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n text-align: left;\n word-break: break-word;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-value {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-value {\n color: #111827;\n}\n\n.wallet-modal-manage-value > span:not(.wallet-modal-manage-address-text) {\n flex: 1;\n text-align: left;\n min-width: 0;\n}\n\n.wallet-modal-manage-address-text {\n flex: 1;\n font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n font-size: 14px;\n word-break: break-all;\n min-width: 0;\n}\n\n.wallet-modal-manage-copy-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n background: transparent;\n border: 1px solid;\n cursor: pointer;\n padding: 6px 12px;\n border-radius: 8px;\n transition: all 0.2s;\n font-size: 13px;\n font-weight: 500;\n flex-shrink: 0;\n white-space: nowrap;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-copy-btn {\n color: #9ca3af;\n border-color: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-copy-btn {\n color: #6b7280;\n border-color: #e5e7eb;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-copy-btn:hover {\n background: #2a2a2a;\n border-color: #4a4a4a;\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-copy-btn:hover {\n background: #f3f4f6;\n border-color: #d1d5db;\n color: #111827;\n}\n\n.wallet-modal-manage-copy-btn.copied {\n background: #10b981;\n border-color: #10b981;\n color: #ffffff;\n}\n\n.wallet-modal-manage-copy-btn svg {\n flex-shrink: 0;\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .wallet-modal-content {\n width: 100%;\n max-width: 100%;\n border-radius: 16px 16px 0 0;\n max-height: 95vh;\n padding: 20px;\n }\n\n .wallet-modal-overlay {\n align-items: flex-end;\n }\n\n .wallet-modal-qr-container {\n padding: 16px;\n }\n\n .wallet-modal-address-display {\n flex-direction: column;\n align-items: stretch;\n }\n\n .wallet-modal-copy-btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n/* Export & Backup Section */\n.wallet-modal-manage-action-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n border-radius: 12px;\n border: 1px solid;\n cursor: pointer;\n transition: all 0.2s;\n width: 100%;\n text-align: left;\n background: transparent;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-action-item {\n background: #2a2a2a;\n border-color: #3a3a3a;\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-action-item {\n background: #f9fafb;\n border-color: #e5e7eb;\n color: #111827;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-action-item:hover {\n background: #3a3a3a;\n border-color: #4a4a4a;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-action-item:hover {\n background: #f3f4f6;\n border-color: #d1d5db;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n.wallet-modal-manage-action-icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n transition: all 0.2s;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-action-icon {\n color: #9ca3af;\n background: rgba(147, 51, 234, 0.1);\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-action-icon {\n color: #6b7280;\n background: rgba(147, 51, 234, 0.05);\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-action-item:hover .wallet-modal-manage-action-icon {\n background: rgba(147, 51, 234, 0.2);\n color: #a855f7;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-action-item:hover .wallet-modal-manage-action-icon {\n background: rgba(147, 51, 234, 0.1);\n color: #9333ea;\n}\n\n.wallet-modal-manage-action-label {\n flex: 1;\n font-size: 15px;\n font-weight: 500;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-action-label {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-action-label {\n color: #111827;\n}\n\n.wallet-modal-manage-action-arrow {\n flex-shrink: 0;\n transition: transform 0.2s;\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-action-arrow {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-action-arrow {\n color: #6b7280;\n}\n\n.wallet-modal-manage-action-item:hover .wallet-modal-manage-action-arrow {\n transform: translateX(2px);\n}\n\n.wallet-modal-theme-dark .wallet-modal-manage-action-item:hover .wallet-modal-manage-action-arrow {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-manage-action-item:hover .wallet-modal-manage-action-arrow {\n color: #111827;\n}\n\n/* Chain Selector Section */\n.wallet-modal-chain-selector-section {\n width: 100%;\n margin-top: 16px;\n margin-bottom: 16px;\n}\n\n/* Balance Display */\n\n/* Export Warning Modal */\n.wallet-modal-export-warning-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 20px;\n text-align: left;\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n}\n\n.wallet-modal-export-warning-illustration {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 120px;\n height: 120px;\n border-radius: 50%;\n margin-bottom: 8px;\n align-self: center;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-illustration {\n background: rgba(59, 130, 246, 0.1);\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-illustration {\n background: rgba(59, 130, 246, 0.1);\n}\n\n.wallet-modal-export-warning-icon-bg {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 80px;\n height: 80px;\n border-radius: 50%;\n background: rgba(59, 130, 246, 0.2);\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-icon-bg {\n color: #3b82f6;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-icon-bg {\n color: #2563eb;\n}\n\n.wallet-modal-export-warning-badge {\n display: inline-block;\n padding: 4px 12px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 500;\n align-self: center;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-badge {\n background: #2a2a2a;\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-badge {\n background: #f3f4f6;\n color: #6b7280;\n}\n\n.wallet-modal-export-warning-heading {\n font-size: 18px;\n font-weight: 600;\n margin: 0;\n line-height: 1.5;\n text-align: left;\n width: 100%;\n min-width: 0;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-heading {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-heading {\n color: #111827;\n}\n\n.wallet-modal-export-warning-info-cards {\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: 100%;\n margin-top: 8px;\n}\n\n.wallet-modal-export-warning-info-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 16px;\n border-radius: 12px;\n text-align: left;\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-info-card {\n background: #2a2a2a;\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-info-card {\n background: #f9fafb;\n color: #111827;\n}\n\n.wallet-modal-export-warning-info-card svg {\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-info-card svg {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-info-card svg {\n color: #6b7280;\n}\n\n.wallet-modal-export-warning-info-card span {\n font-size: 14px;\n line-height: 1.5;\n flex: 1;\n min-width: 0;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.wallet-modal-export-warning-checkbox {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n width: 100%;\n min-width: 0;\n padding: 16px;\n border-radius: 12px;\n transition: all 0.2s;\n box-sizing: border-box;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-checkbox {\n background: #2a2a2a;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-checkbox {\n background: #f9fafb;\n}\n\n.wallet-modal-export-warning-checkbox-input {\n width: 20px;\n height: 20px;\n margin-top: 2px;\n cursor: pointer;\n flex-shrink: 0;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border: 2px solid;\n border-radius: 6px;\n position: relative;\n transition: all 0.2s;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-checkbox-input {\n border-color: #4a4a4a;\n background: #2a2a2a;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-checkbox-input {\n border-color: #d1d5db;\n background: #ffffff;\n}\n\n.wallet-modal-export-warning-checkbox-input:checked {\n background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);\n border-color: #9333ea;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-checkbox-input:checked {\n background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);\n border-color: #a855f7;\n}\n\n.wallet-modal-export-warning-checkbox-input:checked::after {\n content: '';\n position: absolute;\n left: 6px;\n top: 2px;\n width: 5px;\n height: 10px;\n border: solid white;\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n}\n\n.wallet-modal-export-warning-checkbox-input:hover {\n border-color: #9333ea;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-checkbox-input:hover {\n border-color: #a855f7;\n}\n\n.wallet-modal-export-warning-checkbox span {\n font-size: 14px;\n line-height: 1.5;\n flex: 1;\n min-width: 0;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-checkbox span {\n color: #ffffff;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-checkbox span {\n color: #111827;\n}\n\n.wallet-modal-export-warning-reveal {\n width: 100%;\n min-width: 0;\n padding: 14px 24px;\n border-radius: 12px;\n border: none;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n background: var(--abstraxn-primary);\n color: var(--abstraxn-primary-text);\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-reveal:not(.disabled) {\n background: var(--abstraxn-primary);\n}\n\n.wallet-modal-export-warning-reveal:hover:not(.disabled) {\n transform: translateY(-2px);\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-reveal:hover:not(.disabled) {\n background: var(--abstraxn-primary-hover);\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-reveal:hover:not(.disabled) {\n background: var(--abstraxn-primary-hover);\n}\n\n.wallet-modal-loading-spinner {\n animation: spin 1s linear infinite;\n width: 16px;\n height: 16px;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.wallet-modal-export-warning-reveal.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background: #9ca3af;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-warning-reveal.disabled {\n background: #3a3a3a;\n color: #6b7280;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-warning-reveal.disabled {\n background: #e5e7eb;\n color: #9ca3af;\n}\n\n/* Export Key Modal */\n.wallet-modal-export-key {\n max-width: 480px;\n}\n\n.wallet-modal-export-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n}\n\n.wallet-modal-content .wallet-modal-export-title {\n font-size: 20px;\n font-weight: 500;\n margin: 0;\n flex: 1;\n text-align: center;\n}\n\n.wallet-modal-content.wallet-modal-theme-dark .wallet-modal-export-title {\n color: #ffffff;\n}\n\n.wallet-modal-content.wallet-modal-theme-light .wallet-modal-export-title {\n color: #111827;\n}\n\n.wallet-modal-export-content {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.wallet-modal-export-key-display {\n padding: 16px;\n border-radius: 12px;\n font-family: 'GeistMono', 'SF Mono', 'Monaco', 'Roboto Mono', monospace;\n font-size: 13px;\n line-height: 1.6;\n word-break: break-all;\n text-align: left;\n position: relative;\n transition: filter 0.3s ease;\n user-select: none;\n}\n\n.wallet-modal-export-key-display.blurred {\n filter: blur(8px);\n -webkit-filter: blur(8px);\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n.wallet-modal-export-key-display:not(.blurred) {\n user-select: text;\n -webkit-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-key-display {\n background: #2a2a2a;\n color: #ffffff;\n border: 1px solid #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-key-display {\n background: #f9fafb;\n color: #111827;\n border: 1px solid #e5e7eb;\n}\n\n.wallet-modal-export-key-hint {\n font-size: 13px;\n text-align: center;\n margin: -12px 0 0 0;\n padding: 0;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-key-hint {\n color: #9ca3af;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-key-hint {\n color: #6b7280;\n}\n\n.wallet-modal-export-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 12px 24px;\n border-radius: 12px;\n border: 1px solid;\n font-size: 15px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n background: transparent;\n}\n\n.wallet-modal-export-copy-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-copy-btn {\n color: #ffffff;\n border-color: #3a3a3a;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-copy-btn {\n color: #111827;\n border-color: #e5e7eb;\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-copy-btn:hover {\n background: #2a2a2a;\n border-color: #4a4a4a;\n}\n\n.wallet-modal-theme-light .wallet-modal-export-copy-btn:hover {\n background: #f3f4f6;\n border-color: #d1d5db;\n}\n\n.wallet-modal-export-copy-btn svg {\n flex-shrink: 0;\n}\n\n.wallet-modal-export-done-btn {\n width: 100%;\n padding: 14px 24px;\n border-radius: 12px;\n border: none;\n font-size: 16px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--abstraxn-primary-text);\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-done-btn {\n background: var(--abstraxn-primary);\n}\n\n.wallet-modal-theme-light .wallet-modal-export-done-btn {\n background: var(--abstraxn-primary);\n}\n\n.wallet-modal-export-done-btn:hover {\n transform: translateY(-2px);\n}\n\n.wallet-modal-theme-dark .wallet-modal-export-done-btn:hover {\n background: var(--abstraxn-primary-hover);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);\n}\n\n.wallet-modal-theme-light .wallet-modal-export-done-btn:hover {\n background: var(--abstraxn-primary-hover);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n}\n\n";

package/dist/src/WalletModal.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import "./WalletModal.css";
+export declare const WALLET_MODAL_CSS_TEXTS: string[];
 export interface WalletModalProps {
     isOpen: boolean;
     onClose: () => void;
     onRampUrl?: string;
 }
-export declare function WalletModal({ isOpen, onClose, onRampUrl }: WalletModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function WalletModal({ isOpen, onClose, onRampUrl }: WalletModalProps): import("react").ReactPortal | null;

package/dist/src/WalletModal.js CHANGED Viewed

@@ -4,16 +4,42 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Main wallet management interface
  */
 import { useCallback, useEffect, useRef, useState, useMemo, } from "react";
+import { createPortal } from "react-dom";
 import { useAbstraxnWallet } from "./AbstraxnProvider";
 import { ExternalWalletButtons, resetExternalWalletViewState, } from "./ExternalWalletButtons";
 import { AbstraxnContext } from "./AbstraxnProvider";
 import { createRoot } from "react-dom/client";
-import { useExportWallet } from "./hooks";
+import { useExportWallet, useTokenBalances, useSolanaTokenBalances } from "./hooks";
 import { generateP256KeyPair } from "@turnkey/crypto";
-import { LuWallet } from "./components/icons";
+import { LuWallet, CloseIcon } from "./components/icons";
 import { formatAddress, formatBalance } from "./components/WalletModal/utils";
 import { SendModal, ReceiveModal, ManageWalletModal, ChainSelector, ExportWarningModal, ExportKeyModal, UserAvatar, } from "./components/WalletModal/components";
-import "./WalletModal.css";
+import { ShadowHost } from "./components/ShadowHost";
+import { ShadowHostContext } from "./components/ShadowHost/ShadowHostContext";
+import { externalWalletButtonsCss } from "./ExternalWalletButtons";
+import walletModalCss from "./WalletModal.css.js";
+import chainSelectorCss from "./components/WalletModal/components/ChainSelector.css.js";
+import exportKeyModalCss from "./components/WalletModal/components/ExportKeyModal.css.js";
+import exportWarningModalCss from "./components/WalletModal/components/ExportWarningModal.css.js";
+import manageWalletModalCss from "./components/WalletModal/components/ManageWalletModal.css.js";
+import previewTransactionModalCss from "./components/WalletModal/components/PreviewTransactionModal.css.js";
+import receiveModalCss from "./components/WalletModal/components/ReceiveModal.css.js";
+import sendModalCss from "./components/WalletModal/components/SendModal.css.js";
+import successModalCss from "./components/WalletModal/components/SuccessModal.css.js";
+import tokenSelectorModalCss from "./components/WalletModal/components/TokenSelectorModal.css.js";
+export const WALLET_MODAL_CSS_TEXTS = [
+    walletModalCss,
+    chainSelectorCss,
+    exportKeyModalCss,
+    exportWarningModalCss,
+    manageWalletModalCss,
+    previewTransactionModalCss,
+    receiveModalCss,
+    sendModalCss,
+    successModalCss,
+    tokenSelectorModalCss,
+    externalWalletButtonsCss,
+];
 export function WalletModal({ isOpen, onClose, onRampUrl }) {
     const contextValue = useAbstraxnWallet();
     const { address, user, disconnect, whoami, uiConfig, availableConnectors, sendTransaction, isExternalWalletConnected, switchChainEnhanced, currentChain, availableChains, externalWalletBalance, walletBalance, refetchBalance, prefetchMfaStatus, } = contextValue;
@@ -80,12 +106,23 @@ export function WalletModal({ isOpen, onClose, onRampUrl }) {
             label: currentChain.blockExplorer?.name || "Explorer",
         };
     }, [currentChain]);
+    // Both hooks are called unconditionally every render (Rules of Hooks) - each is a
+    // no-op when the current chain doesn't match its type. The active result is picked
+    // afterward, and native (already shown by the row above) is excluded here since it's
+    // just the additional, non-native tokens.
+    const evmTokenBalances = useTokenBalances();
+    const solanaTokenBalances = useSolanaTokenBalances();
+    const activeTokenBalances = currentChain?.type === "solana" ? solanaTokenBalances : evmTokenBalances;
+    const additionalTokens = useMemo(() => activeTokenBalances.tokens.filter((token) => !token.isNative && token.balance && token.balance > 0n), [activeTokenBalances.tokens]);
     // Refetch balance from RPC when UI screen changes (back button, modal open/close, etc.)
+    // Triggers only on the actual screen-change flags, not on refetchBalance's identity -
+    // that identity can churn on unrelated re-renders and previously caused a refetch loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => {
         if (isOpen && refetchBalance) {
             void refetchBalance();
         }
-    }, [isOpen, showReceiveModal, showSendModal, showManageModal, showChainSelector, refetchBalance]);
+    }, [isOpen, showReceiveModal, showSendModal, showManageModal, showChainSelector]);
     /** Load MFA status once per session (in-memory) when this wallet modal opens; not persisted. */
     useEffect(() => {
         if (isOpen && !isExternalWalletConnected && prefetchMfaStatus) {
@@ -175,13 +212,19 @@ export function WalletModal({ isOpen, onClose, onRampUrl }) {
         if (!showChainSelector)
             return;
         const handleClickOutside = (e) => {
-            if (e.target instanceof Element) {
-                const target = e.target;
-                // Check for both the view class and the content wrapper
-                if (!target.closest(".wallet-modal-chain-selector-view") &&
-                    !target.closest(".wallet-modal-content")) {
-                    setShowChainSelector(false);
-                }
+            // The whole modal renders inside a ShadowHost (real Shadow DOM). Events that
+            // bubble out of a shadow tree to a document-level listener get e.target
+            // *retargeted* to the shadow host element, not the actual element clicked -
+            // so `e.target.closest(...)` always fails here, incorrectly treating every
+            // click as "outside" and closing the selector before it ever reaches a chain
+            // button. composedPath() returns the real path through the shadow tree, so
+            // check that instead.
+            const path = typeof e.composedPath === "function" ? e.composedPath() : [e.target];
+            const isInside = path.some((node) => node instanceof Element &&
+                (node.classList.contains("wallet-modal-chain-selector-view") ||
+                    node.classList.contains("wallet-modal-content")));
+            if (!isInside) {
+                setShowChainSelector(false);
             }
         };
         document.addEventListener("mousedown", handleClickOutside);
@@ -283,72 +326,83 @@ export function WalletModal({ isOpen, onClose, onRampUrl }) {
     ]);
     if (!isOpen)
         return null;
-    // Render sub-modals in priority order
+    // Render sub-modals in priority order (collapsed from early-return chain
+    // into a single `content` variable so exactly one ShadowHost wrap can be
+    // applied at the bottom — same priority order, same branches, just
+    // deferred to one final return instead of returning from each branch).
+    let content;
     // ExportKeyModal has highest priority (shown after export)
     if (showExportKey && exportedWalletResult) {
-        return (_jsx(ExportKeyModal, { isOpen: true, onClose: () => {
+        content = (_jsx(ExportKeyModal, { isOpen: true, onClose: () => {
                 setShowExportKey(false);
                 setExportedWalletResult(null);
                 setShowExportWarning(false); // Ensure warning modal is also closed
                 setShowManageModal(true); // Go back to manage modal
             }, privateKey: exportedWalletResult, theme: theme, style: walletModalThemeVars }));
     }
-    // ExportWarningModal (shown before export)
-    if (showExportWarning) {
-        return (_jsx(ExportWarningModal, { isOpen: true, onClose: () => {
+    else if (showExportWarning) {
+        // ExportWarningModal (shown before export)
+        content = (_jsx(ExportWarningModal, { isOpen: true, onClose: () => {
                 setShowExportWarning(false);
                 setShowManageModal(true); // Go back to manage modal when closing warning
             }, onAcknowledge: handleAcknowledgeExport, currentChain: currentChain || null, isExporting: isExporting, theme: theme, style: walletModalThemeVars }));
     }
-    // SendModal — use useSignAndSendTxn for embedded wallet (sendTransaction only for external)
-    if (showSendModal) {
-        return (_jsx(SendModal, { isOpen: true, onClose: () => setShowSendModal(false), currentChain: currentChain || null, displayAddress: displayAddress, availableBalance: externalWalletBalance || walletBalance || null, externalWalletBalance: externalWalletBalance || null, walletBalance: walletBalance || null, sendTransaction: isExternalWalletConnected ? sendTransaction : undefined, theme: theme }));
+    else if (showSendModal) {
+        // SendModal — use useSignAndSendTxn for embedded wallet (sendTransaction only for external)
+        content = (_jsx(SendModal, { isOpen: true, onClose: () => setShowSendModal(false), currentChain: currentChain || null, displayAddress: displayAddress, availableBalance: externalWalletBalance || walletBalance || null, externalWalletBalance: externalWalletBalance || null, walletBalance: walletBalance || null, liveTokens: activeTokenBalances.tokens, liveTokensLoading: activeTokenBalances.loading, sendTransaction: isExternalWalletConnected ? sendTransaction : undefined, theme: theme }));
     }
-    if (showReceiveModal) {
-        return (_jsx(ReceiveModal, { isOpen: true, onClose: () => setShowReceiveModal(false), address: displayAddress, theme: theme }));
+    else if (showReceiveModal) {
+        content = (_jsx(ReceiveModal, { isOpen: true, onClose: () => setShowReceiveModal(false), address: displayAddress, theme: theme }));
     }
-    // ManageWalletModal
-    if (showManageModal) {
-        return (_jsx(ManageWalletModal, { isOpen: true, onClose: () => setShowManageModal(false), displayAddress: displayAddress, userEmail: user?.email, organizationName: whoami?.organizationName, isExternalWalletConnected: isExternalWalletConnected || false, onExportPrivateKey: handleExportPrivateKey, theme: theme }));
+    else if (showManageModal) {
+        // ManageWalletModal
+        content = (_jsx(ManageWalletModal, { isOpen: true, onClose: () => setShowManageModal(false), displayAddress: displayAddress, userEmail: user?.email, organizationName: whoami?.organizationName, isExternalWalletConnected: isExternalWalletConnected || false, onExportPrivateKey: handleExportPrivateKey, theme: theme }));
     }
-    // Main Modal
-    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-abstraxn-sdk-root": true, className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: showChainSelector ? undefined : onClose, style: showChainSelector ? { pointerEvents: "none" } : undefined, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} ${showChainSelector ? "selector-open" : ""}`, onClick: (e) => e.stopPropagation(), style: showChainSelector ? { pointerEvents: "auto" } : undefined, children: [_jsxs("div", { className: "wallet-modal-header", children: [_jsx("div", { className: "wallet-modal-header-left", children: _jsxs("div", { className: "wallet-modal-user-info", children: [_jsx("div", { className: "wallet-modal-avatar", children: _jsx(UserAvatar, { user: user, isExternalWalletConnected: isExternalWalletConnected || false }) }), _jsxs("div", { className: "wallet-modal-user-details", children: [_jsxs("div", { className: "wallet-modal-address", onClick: handleCopyAddress, children: [formatAddress(displayAddress || address), copied ? (_jsx("span", { className: "wallet-modal-copy-notification", children: "Copied!" })) : (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "wallet-modal-copy-icon", children: [_jsx("path", { d: "M5.5 3.5H3.5C2.67157 3.5 2 4.17157 2 5V12.5C2 13.3284 2.67157 14 3.5 14H11C11.8284 14 12.5 13.3284 12.5 12.5V10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.5 3.5C5.5 2.67157 6.17157 2 7 2H12.5C13.3284 2 14 2.67157 14 3.5V9C14 9.82843 13.3284 10.5 12.5 10.5H7C6.17157 10.5 5.5 9.82843 5.5 9V3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))] }), user?.email && (_jsx("div", { className: "wallet-modal-email", children: user.email }))] })] }) }), _jsx("div", { className: "wallet-modal-header-right", children: _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M18 6L6 18M6 6L18 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) })] }), !isExternalWalletConnected && (_jsxs("div", { className: "wallet-modal-actions", children: [_jsxs("button", { className: "wallet-modal-action-btn", onClick: handleSend, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }), _jsx("span", { children: "Send" })] }), _jsxs("button", { className: "wallet-modal-action-btn", onClick: handleReceive, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "7 10 12 15 17 10" }), _jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] }), _jsx("span", { children: "Receive" })] }), _jsxs("button", { className: "wallet-modal-action-btn", onClick: handleBuy, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }), _jsx("span", { children: "Buy" })] })] })), !isExternalWalletConnected && currentChain && (_jsxs("div", { className: "wallet-modal-asset", onClick: () => setShowChainSelector(true), children: [_jsxs("div", { className: "wallet-modal-asset-info", children: [_jsxs("div", { className: "wallet-modal-asset-icon-wrapper", children: [currentChain.iconUrl ? (_jsx("img", { src: currentChain.iconUrl, alt: currentChain.displayName, className: "wallet-modal-asset-icon-img" })) : (_jsx("div", { className: "wallet-modal-asset-icon", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 2v20M2 12h20" })] }) })), _jsx("span", { className: "wallet-modal-asset-status" })] }), _jsxs("div", { className: "wallet-modal-asset-details", children: [_jsx("div", { className: "wallet-modal-asset-name", children: currentChain.displayName }), _jsx("div", { className: "wallet-modal-asset-balance", children: isBalanceRefreshing ? (_jsx("span", { className: "wallet-modal-asset-balance-skeleton", "aria-label": "Loading balance" })) : (balanceDisplay) }), chainExplorer?.url && (_jsx("a", { href: chainExplorer.url, target: "_blank", rel: "noopener noreferrer", className: "wallet-modal-asset-explorer-link", onClick: (e) => e.stopPropagation(), children: chainExplorer.label }))] })] }), _jsx("div", { className: "wallet-modal-asset-arrow", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) })] })), _jsxs("div", { className: "wallet-modal-menu", children: [_jsxs("button", { className: "wallet-modal-menu-item", onClick: handleManageWallet, children: [_jsx(LuWallet, { size: 20 }), _jsx("span", { children: "Manage Wallet" })] }), _jsxs("button", { className: "wallet-modal-menu-item wallet-modal-menu-item-disconnect", onClick: handleDisconnect, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [_jsx("path", { d: "M7 3H4C3.44772 3 3 3.44772 3 4V16C3 16.5523 3.44772 17 4 17H7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M13 7L17 10L13 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M17 10H9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { children: "Disconnect" })] })] })] }) }), showChainSelector && (_jsx("div", { "data-abstraxn-sdk-root": true, className: `wallet-modal-overlay wallet-modal-theme-${theme}`, style: { zIndex: 10006, pointerEvents: "auto" }, onClick: (e) => {
-                    e.stopPropagation();
-                    setShowChainSelector(false);
-                }, children: _jsx("div", { className: `wallet-modal-content wallet-modal-theme-${theme}`, onClick: (e) => e.stopPropagation(), children: _jsx(ChainSelector, { isOpen: showChainSelector, onClose: () => setShowChainSelector(false), currentChain: currentChain || null, availableChains: availableChains || [], onChainSelect: async (chainId) => {
-                            console.log("Chain select triggered:", {
-                                chainId,
-                                currentChainId: currentChain?.id,
-                                hasSwitchChainEnhanced: !!switchChainEnhanced,
-                            });
-                            // If selecting the same chain, just close
-                            if (chainId === currentChain?.id) {
-                                setShowChainSelector(false);
-                                return;
-                            }
-                            // Switch to a different chain
-                            if (switchChainEnhanced) {
-                                try {
-                                    setIsBalanceRefreshing(true);
-                                    await switchChainEnhanced(chainId);
-                                    if (refetchBalance) {
-                                        await refetchBalance();
-                                    }
-                                    // Only close if switch was successful
+    else {
+        // Main Modal
+        content = (_jsxs(_Fragment, { children: [_jsx("div", { "data-abstraxn-sdk-root": true, className: `wallet-modal-overlay wallet-modal-theme-${theme}`, onClick: showChainSelector ? undefined : onClose, style: showChainSelector ? { pointerEvents: "none" } : undefined, children: _jsxs("div", { className: `wallet-modal-content wallet-modal-theme-${theme} ${showChainSelector ? "selector-open" : ""}`, onClick: (e) => e.stopPropagation(), style: showChainSelector ? { pointerEvents: "auto" } : undefined, children: [_jsxs("div", { className: "wallet-modal-header", children: [_jsx("div", { className: "wallet-modal-header-left", children: _jsxs("div", { className: "wallet-modal-user-info", children: [_jsx("div", { className: "wallet-modal-avatar", children: _jsx(UserAvatar, { user: user, isExternalWalletConnected: isExternalWalletConnected || false }) }), _jsxs("div", { className: "wallet-modal-user-details", children: [_jsxs("div", { className: "wallet-modal-address", onClick: handleCopyAddress, children: [formatAddress(displayAddress || address), copied ? (_jsx("span", { className: "wallet-modal-copy-notification", children: "Copied!" })) : (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "wallet-modal-copy-icon", children: [_jsx("path", { d: "M5.5 3.5H3.5C2.67157 3.5 2 4.17157 2 5V12.5C2 13.3284 2.67157 14 3.5 14H11C11.8284 14 12.5 13.3284 12.5 12.5V10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.5 3.5C5.5 2.67157 6.17157 2 7 2H12.5C13.3284 2 14 2.67157 14 3.5V9C14 9.82843 13.3284 10.5 12.5 10.5H7C6.17157 10.5 5.5 9.82843 5.5 9V3.5Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))] }), user?.email && (_jsx("div", { className: "wallet-modal-email", children: user.email }))] })] }) }), _jsx("div", { className: "wallet-modal-header-right", children: _jsx("button", { className: "wallet-modal-close", onClick: onClose, "aria-label": "Close", children: _jsx(CloseIcon, { size: 24 }) }) })] }), !isExternalWalletConnected && (_jsxs("div", { className: "wallet-modal-actions", children: [_jsxs("button", { className: "wallet-modal-action-btn", onClick: handleSend, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), _jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })] }), _jsx("span", { children: "Send" })] }), _jsxs("button", { className: "wallet-modal-action-btn", onClick: handleReceive, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "7 10 12 15 17 10" }), _jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })] }), _jsx("span", { children: "Receive" })] }), _jsxs("button", { className: "wallet-modal-action-btn", onClick: handleBuy, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }), _jsx("span", { children: "Buy" })] })] })), !isExternalWalletConnected && currentChain && (_jsxs("div", { className: "wallet-modal-asset", onClick: () => setShowChainSelector(true), children: [_jsxs("div", { className: "wallet-modal-asset-info", children: [_jsxs("div", { className: "wallet-modal-asset-icon-wrapper", children: [currentChain.iconUrl ? (_jsx("img", { src: currentChain.iconUrl, alt: currentChain.displayName, className: "wallet-modal-asset-icon-img" })) : (_jsx("div", { className: "wallet-modal-asset-icon", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 2v20M2 12h20" })] }) })), _jsx("span", { className: "wallet-modal-asset-status" })] }), _jsxs("div", { className: "wallet-modal-asset-details", children: [_jsx("div", { className: "wallet-modal-asset-name", children: currentChain.displayName }), _jsx("div", { className: "wallet-modal-asset-balance", children: isBalanceRefreshing ? (_jsx("span", { className: "wallet-modal-asset-balance-skeleton", "aria-label": "Loading balance" })) : (balanceDisplay) }), chainExplorer?.url && (_jsx("a", { href: chainExplorer.url, target: "_blank", rel: "noopener noreferrer", className: "wallet-modal-asset-explorer-link", onClick: (e) => e.stopPropagation(), children: chainExplorer.label }))] })] }), _jsx("div", { className: "wallet-modal-asset-arrow", children: _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }) })] })), !isExternalWalletConnected && !isBalanceRefreshing && additionalTokens.map((token) => (_jsx("div", { className: "wallet-modal-asset", children: _jsxs("div", { className: "wallet-modal-asset-info", children: [_jsx("div", { className: "wallet-modal-asset-icon-wrapper", children: token.iconUrl ? (_jsx("img", { src: token.iconUrl, alt: token.name, className: "wallet-modal-asset-icon-img" })) : (_jsx("div", { className: "wallet-modal-asset-icon", children: token.symbol.charAt(0) })) }), _jsxs("div", { className: "wallet-modal-asset-details", children: [_jsx("div", { className: "wallet-modal-asset-name", children: token.name }), _jsx("div", { className: "wallet-modal-asset-balance", children: formatBalance(token.balance ?? 0n, token.decimals, token.symbol, 4) })] })] }) }, token.address))), _jsxs("div", { className: "wallet-modal-menu", children: [_jsxs("button", { className: "wallet-modal-menu-item", onClick: handleManageWallet, children: [_jsx(LuWallet, { size: 20 }), _jsx("span", { children: "Manage Wallet" })] }), _jsxs("button", { className: "wallet-modal-menu-item wallet-modal-menu-item-disconnect", onClick: handleDisconnect, children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [_jsx("path", { d: "M7 3H4C3.44772 3 3 3.44772 3 4V16C3 16.5523 3.44772 17 4 17H7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M13 7L17 10L13 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M17 10H9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { children: "Disconnect" })] })] })] }) }), showChainSelector && (_jsx("div", { "data-abstraxn-sdk-root": true, className: `wallet-modal-overlay wallet-modal-theme-${theme}`, style: { zIndex: 10006, pointerEvents: "auto" }, onClick: (e) => {
+                        e.stopPropagation();
+                        setShowChainSelector(false);
+                    }, children: _jsx("div", { className: `wallet-modal-content wallet-modal-theme-${theme}`, onClick: (e) => e.stopPropagation(), children: _jsx(ChainSelector, { isOpen: showChainSelector, onClose: () => setShowChainSelector(false), currentChain: currentChain || null, availableChains: availableChains || [], onChainSelect: async (chainId) => {
+                                console.log("Chain select triggered:", {
+                                    chainId,
+                                    currentChainId: currentChain?.id,
+                                    hasSwitchChainEnhanced: !!switchChainEnhanced,
+                                });
+                                // If selecting the same chain, just close
+                                if (chainId === currentChain?.id) {
                                     setShowChainSelector(false);
+                                    return;
                                 }
-                                catch (error) {
-                                    console.error("Failed to switch chain:", error);
-                                    // Don't close the selector on error so user can try again
+                                // Switch to a different chain
+                                if (switchChainEnhanced) {
+                                    try {
+                                        setIsBalanceRefreshing(true);
+                                        await switchChainEnhanced(chainId);
+                                        if (refetchBalance) {
+                                            await refetchBalance();
+                                        }
+                                        // Only close if switch was successful
+                                        setShowChainSelector(false);
+                                    }
+                                    catch (error) {
+                                        console.error("Failed to switch chain:", error);
+                                        // Don't close the selector on error so user can try again
+                                    }
+                                    finally {
+                                        setIsBalanceRefreshing(false);
+                                    }
                                 }
-                                finally {
-                                    setIsBalanceRefreshing(false);
+                                else {
+                                    console.warn("switchChainEnhanced not available");
+                                    setShowChainSelector(false);
                                 }
-                            }
-                            else {
-                                console.warn("switchChainEnhanced not available");
-                                setShowChainSelector(false);
-                            }
-                        }, theme: theme }) }) }))] }));
+                            }, theme: theme }) }) }))] }));
+    }
+    // Portal to document.body so host layouts (fixed sidebars, z-index shells)
+    // cannot trap the overlay. Reset ShadowHostContext so a parent ShadowHost
+    // (e.g. ConnectButton) cannot mark this as "nested" — nested mode would
+    // inject CSS into the parent shadow while the overlay DOM is on body.
+    return createPortal(_jsx(ShadowHostContext.Provider, { value: null, children: _jsx(ShadowHost, { cssTexts: WALLET_MODAL_CSS_TEXTS, customCSS: uiConfig?.customCSS, children: content }) }), document.body);
 }
 //# sourceMappingURL=WalletModal.js.map

package/dist/src/components/AbstraxnLogo.d.ts ADDED Viewed

@@ -0,0 +1,17 @@
+/**
+ * Abstraxn brand mark (green) — matches frontend-ui `assets/logo/mob-logo.svg`.
+ * Fixed brand colors work on both light and dark themes.
+ */
+import type { SVGProps } from "react";
+export type AbstraxnLogoProps = SVGProps<SVGSVGElement> & {
+    size?: number | string;
+    /** Unique gradient id when multiple logos mount on the same page. */
+    gradientId?: string;
+};
+/** Inline SVG HTML for OnboardingUIWeb (and other non-React mounts). */
+export declare function abstraxnLogoSvgHtml(options?: {
+    size?: number;
+    gradientId?: string;
+    style?: string;
+}): string;
+export declare function AbstraxnLogo({ size, gradientId, style, ...props }: AbstraxnLogoProps): import("react/jsx-runtime").JSX.Element;