@d13co/use-wallet-ui-react 1.0.0

package/dist/types/index.d.cts

@@ -0,0 +1,250 @@
+import { default as default_2 } from 'react';
+import { default as default_3 } from 'algosdk';
+import { JSX } from 'react/jsx-runtime';
+import { QueryClient } from '@tanstack/react-query';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { RefObject } from 'react';
+import { UseQueryResult } from '@tanstack/react-query';
+import { Wallet } from '@txnlab/use-wallet-react';
+
+export declare type ButtonSize = 'sm' | 'md' | 'lg';
+
+export declare const ConnectedWalletButton: default_2.ForwardRefExoticComponent<ConnectedWalletButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+declare interface ConnectedWalletButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Size variant for the button */
+    size?: ButtonSize;
+    style?: default_2.CSSProperties;
+}
+
+export declare function ConnectedWalletMenu(props: ConnectedWalletMenuProps): JSX.Element;
+
+declare interface ConnectedWalletMenuProps {
+    children?: RefableElement_2;
+}
+
+export declare const ConnectWalletButton: default_2.ForwardRefExoticComponent<ConnectWalletButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+declare interface ConnectWalletButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Size variant for the button */
+    size?: ButtonSize;
+    style?: default_2.CSSProperties;
+}
+
+export declare function ConnectWalletMenu({ children }: ConnectWalletMenuProps): JSX.Element;
+
+declare interface ConnectWalletMenuProps {
+    children?: RefableElement;
+}
+
+/**
+ * Component for displaying NFD avatar images with automatic IPFS handling
+ * - Handles IPFS URLs by converting them to HTTPS
+ * - Checks availability on images.nf.domains and falls back to IPFS gateway if needed
+ * - Caches results using TanStack Query
+ */
+export declare function NfdAvatar({ nfd, alt, className, size, fallback, lightOnly, }: NfdAvatarProps): JSX.Element;
+
+declare interface NfdAvatarProps {
+    /** NFD record containing avatar data */
+    nfd: NfdRecord | null | undefined;
+    /** Optional alt text for the image (defaults to NFD name or 'NFD Avatar') */
+    alt?: string;
+    /** Optional className for styling the image */
+    className?: string;
+    /** Optional size in pixels (defaults to 40px) */
+    size?: number;
+    /** Optional fallback element to show when no avatar is available */
+    fallback?: default_2.ReactNode;
+    /** Optional flag to show light only avatar */
+    lightOnly?: boolean;
+}
+
+export declare type NfdLookupResponse = {
+    [address: string]: NfdRecord | null;
+};
+
+export declare type NfdRecord = {
+    name: string;
+    properties: {
+        verified: {
+            [key: string]: string;
+        };
+        userDefined: {
+            [key: string]: string;
+        };
+    };
+    image?: string;
+    avatar?: {
+        url?: string;
+    };
+};
+
+declare type NfdView = 'tiny' | 'thumbnail' | 'brief' | 'full';
+
+declare type RefableElement = ReactElement & {
+    ref?: RefObject<HTMLElement> | ((instance: HTMLElement | null) => void);
+};
+
+declare type RefableElement_2 = ReactElement & {
+    ref?: RefObject<HTMLElement> | ((instance: HTMLElement | null) => void);
+};
+
+export declare type ResolvedTheme = 'light' | 'dark';
+
+export declare type Theme = 'light' | 'dark' | 'system';
+
+/**
+ * Custom hook to fetch account information for Algorand address
+ *
+ * @param options.enabled Whether to enable the account lookup (defaults to true)
+ * @returns Account information query result
+ */
+export declare function useAccountInfo(options?: {
+    enabled?: boolean;
+}): UseQueryResult<default_3.modelsv2.Account | null>;
+
+/**
+ * Hook that returns the `onAfterSign` callback for use in wallet uiHooks configuration.
+ *
+ * @example
+ * ```tsx
+ * const { onAfterSign } = useAfterSignDialog()
+ *
+ * // Pass to wallet config:
+ * uiHooks: { onAfterSign }
+ * ```
+ */
+export declare function useAfterSignDialog(): {
+    onAfterSign: (success: boolean, errorMessage?: string) => void;
+};
+
+/**
+ * Hook that returns the `onBeforeSign` callback for use in wallet uiHooks configuration.
+ *
+ * @example
+ * ```tsx
+ * const { onBeforeSign } = useBeforeSignDialog()
+ *
+ * // Pass to wallet config:
+ * uiHooks: { onBeforeSign }
+ * ```
+ */
+export declare function useBeforeSignDialog(): {
+    onBeforeSign: (txnGroup: default_3.Transaction[] | Uint8Array[], indexesToSign?: number[]) => Promise<void>;
+};
+
+/**
+ * Custom hook to fetch NFD data for an Algorand address
+ *
+ * @param options.enabled Whether to enable the NFD lookup (defaults to true)
+ * @param options.view The view type for the NFD lookup ('tiny', 'thumbnail', 'brief', 'full') (defaults to 'thumbnail')
+ * @returns NFD data query result
+ */
+export declare function useNfd(options?: {
+    enabled?: boolean;
+    view?: NfdView;
+}): UseQueryResult<NfdRecord | null>;
+
+/**
+ * Hook to resolve the actual theme value, handling 'system' preference detection.
+ * When theme is 'system', it listens to the user's OS/browser color scheme preference.
+ *
+ * @param theme - The theme setting: 'light', 'dark', or 'system'
+ * @returns The resolved theme: 'light' or 'dark'
+ */
+export declare function useResolvedTheme(theme: Theme): ResolvedTheme;
+
+/**
+ * Hook to access the WalletUI context
+ * @throws Error if used outside of WalletUIProvider
+ */
+export declare function useWalletUI(): WalletUIContextType;
+
+/**
+ * Hook that returns the `showWelcome` callback for displaying a welcome dialog.
+ *
+ * @example
+ * ```tsx
+ * const { showWelcome } = useWelcomeDialog()
+ *
+ * // Show welcome dialog for a new account:
+ * showWelcome({ algorandAddress: '...', evmAddress: '...' })
+ * ```
+ */
+export declare function useWelcomeDialog(): {
+    showWelcome: (account: WelcomeAccount) => void;
+};
+
+export declare function WalletButton({ size, className, style }: WalletButtonProps): JSX.Element;
+
+declare interface WalletButtonProps {
+    /** Size variant for the button */
+    size?: ButtonSize;
+    /** Additional CSS classes to apply to the button */
+    className?: string;
+    /** Inline styles to apply to the button (can include CSS variable overrides) */
+    style?: default_2.CSSProperties;
+}
+
+export declare function WalletList({ wallets, handleWalletClick }: WalletListProps): JSX.Element;
+
+declare interface WalletListProps {
+    wallets: Wallet[];
+    handleWalletClick: (wallet: Wallet) => Promise<void>;
+}
+
+declare interface WalletUIContextType {
+    queryClient: QueryClient;
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
+    requestBeforeSign: (txnGroup: default_3.Transaction[] | Uint8Array[], indexesToSign?: number[]) => Promise<void>;
+    requestAfterSign: (success: boolean, errorMessage?: string) => void;
+    requestWelcome: (account: WelcomeAccount) => void;
+}
+
+/**
+ * Provider that enables wallet UI components to work with TanStack Query.
+ * It can use an existing QueryClient from the parent application or create its own.
+ * Also creates a QueryClientProvider if none exists in the parent tree.
+ *
+ * Automatically prefetches data for all accounts in connected wallets for smoother
+ * account switching experience.
+ *
+ * Supports theme configuration via the `theme` prop:
+ * - 'light': Always use light mode
+ * - 'dark': Always use dark mode
+ * - 'system': Follow the user's OS/browser preference (default)
+ */
+export declare function WalletUIProvider({ children, queryClient: externalQueryClient, enablePrefetching, prefetchNfdView, theme, }: WalletUIProviderProps): JSX.Element;
+
+declare interface WalletUIProviderProps {
+    children: ReactNode;
+    queryClient?: QueryClient;
+    /**
+     * Whether to automatically prefetch data for all accounts in connected wallets (defaults to true)
+     */
+    enablePrefetching?: boolean;
+    /**
+     * NFD view type for prefetching (defaults to 'thumbnail')
+     */
+    prefetchNfdView?: NfdView;
+    /**
+     * Theme setting for wallet UI components.
+     * - 'light': Always use light mode
+     * - 'dark': Always use dark mode
+     * - 'system': Follow the user's OS/browser preference (default)
+     *
+     * The library also respects the `.dark` class on ancestor elements (Tailwind convention),
+     * which will enable dark mode unless explicitly overridden with theme="light".
+     */
+    theme?: Theme;
+}
+
+declare interface WelcomeAccount {
+    algorandAddress: string;
+    evmAddress: string;
+}
+
+export { }

package/dist/types/index.d.ts

@@ -0,0 +1,250 @@
+import { default as default_2 } from 'react';
+import { default as default_3 } from 'algosdk';
+import { JSX } from 'react/jsx-runtime';
+import { QueryClient } from '@tanstack/react-query';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { RefObject } from 'react';
+import { UseQueryResult } from '@tanstack/react-query';
+import { Wallet } from '@txnlab/use-wallet-react';
+
+export declare type ButtonSize = 'sm' | 'md' | 'lg';
+
+export declare const ConnectedWalletButton: default_2.ForwardRefExoticComponent<ConnectedWalletButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+declare interface ConnectedWalletButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Size variant for the button */
+    size?: ButtonSize;
+    style?: default_2.CSSProperties;
+}
+
+export declare function ConnectedWalletMenu(props: ConnectedWalletMenuProps): JSX.Element;
+
+declare interface ConnectedWalletMenuProps {
+    children?: RefableElement_2;
+}
+
+export declare const ConnectWalletButton: default_2.ForwardRefExoticComponent<ConnectWalletButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+declare interface ConnectWalletButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Size variant for the button */
+    size?: ButtonSize;
+    style?: default_2.CSSProperties;
+}
+
+export declare function ConnectWalletMenu({ children }: ConnectWalletMenuProps): JSX.Element;
+
+declare interface ConnectWalletMenuProps {
+    children?: RefableElement;
+}
+
+/**
+ * Component for displaying NFD avatar images with automatic IPFS handling
+ * - Handles IPFS URLs by converting them to HTTPS
+ * - Checks availability on images.nf.domains and falls back to IPFS gateway if needed
+ * - Caches results using TanStack Query
+ */
+export declare function NfdAvatar({ nfd, alt, className, size, fallback, lightOnly, }: NfdAvatarProps): JSX.Element;
+
+declare interface NfdAvatarProps {
+    /** NFD record containing avatar data */
+    nfd: NfdRecord | null | undefined;
+    /** Optional alt text for the image (defaults to NFD name or 'NFD Avatar') */
+    alt?: string;
+    /** Optional className for styling the image */
+    className?: string;
+    /** Optional size in pixels (defaults to 40px) */
+    size?: number;
+    /** Optional fallback element to show when no avatar is available */
+    fallback?: default_2.ReactNode;
+    /** Optional flag to show light only avatar */
+    lightOnly?: boolean;
+}
+
+export declare type NfdLookupResponse = {
+    [address: string]: NfdRecord | null;
+};
+
+export declare type NfdRecord = {
+    name: string;
+    properties: {
+        verified: {
+            [key: string]: string;
+        };
+        userDefined: {
+            [key: string]: string;
+        };
+    };
+    image?: string;
+    avatar?: {
+        url?: string;
+    };
+};
+
+declare type NfdView = 'tiny' | 'thumbnail' | 'brief' | 'full';
+
+declare type RefableElement = ReactElement & {
+    ref?: RefObject<HTMLElement> | ((instance: HTMLElement | null) => void);
+};
+
+declare type RefableElement_2 = ReactElement & {
+    ref?: RefObject<HTMLElement> | ((instance: HTMLElement | null) => void);
+};
+
+export declare type ResolvedTheme = 'light' | 'dark';
+
+export declare type Theme = 'light' | 'dark' | 'system';
+
+/**
+ * Custom hook to fetch account information for Algorand address
+ *
+ * @param options.enabled Whether to enable the account lookup (defaults to true)
+ * @returns Account information query result
+ */
+export declare function useAccountInfo(options?: {
+    enabled?: boolean;
+}): UseQueryResult<default_3.modelsv2.Account | null>;
+
+/**
+ * Hook that returns the `onAfterSign` callback for use in wallet uiHooks configuration.
+ *
+ * @example
+ * ```tsx
+ * const { onAfterSign } = useAfterSignDialog()
+ *
+ * // Pass to wallet config:
+ * uiHooks: { onAfterSign }
+ * ```
+ */
+export declare function useAfterSignDialog(): {
+    onAfterSign: (success: boolean, errorMessage?: string) => void;
+};
+
+/**
+ * Hook that returns the `onBeforeSign` callback for use in wallet uiHooks configuration.
+ *
+ * @example
+ * ```tsx
+ * const { onBeforeSign } = useBeforeSignDialog()
+ *
+ * // Pass to wallet config:
+ * uiHooks: { onBeforeSign }
+ * ```
+ */
+export declare function useBeforeSignDialog(): {
+    onBeforeSign: (txnGroup: default_3.Transaction[] | Uint8Array[], indexesToSign?: number[]) => Promise<void>;
+};
+
+/**
+ * Custom hook to fetch NFD data for an Algorand address
+ *
+ * @param options.enabled Whether to enable the NFD lookup (defaults to true)
+ * @param options.view The view type for the NFD lookup ('tiny', 'thumbnail', 'brief', 'full') (defaults to 'thumbnail')
+ * @returns NFD data query result
+ */
+export declare function useNfd(options?: {
+    enabled?: boolean;
+    view?: NfdView;
+}): UseQueryResult<NfdRecord | null>;
+
+/**
+ * Hook to resolve the actual theme value, handling 'system' preference detection.
+ * When theme is 'system', it listens to the user's OS/browser color scheme preference.
+ *
+ * @param theme - The theme setting: 'light', 'dark', or 'system'
+ * @returns The resolved theme: 'light' or 'dark'
+ */
+export declare function useResolvedTheme(theme: Theme): ResolvedTheme;
+
+/**
+ * Hook to access the WalletUI context
+ * @throws Error if used outside of WalletUIProvider
+ */
+export declare function useWalletUI(): WalletUIContextType;
+
+/**
+ * Hook that returns the `showWelcome` callback for displaying a welcome dialog.
+ *
+ * @example
+ * ```tsx
+ * const { showWelcome } = useWelcomeDialog()
+ *
+ * // Show welcome dialog for a new account:
+ * showWelcome({ algorandAddress: '...', evmAddress: '...' })
+ * ```
+ */
+export declare function useWelcomeDialog(): {
+    showWelcome: (account: WelcomeAccount) => void;
+};
+
+export declare function WalletButton({ size, className, style }: WalletButtonProps): JSX.Element;
+
+declare interface WalletButtonProps {
+    /** Size variant for the button */
+    size?: ButtonSize;
+    /** Additional CSS classes to apply to the button */
+    className?: string;
+    /** Inline styles to apply to the button (can include CSS variable overrides) */
+    style?: default_2.CSSProperties;
+}
+
+export declare function WalletList({ wallets, handleWalletClick }: WalletListProps): JSX.Element;
+
+declare interface WalletListProps {
+    wallets: Wallet[];
+    handleWalletClick: (wallet: Wallet) => Promise<void>;
+}
+
+declare interface WalletUIContextType {
+    queryClient: QueryClient;
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
+    requestBeforeSign: (txnGroup: default_3.Transaction[] | Uint8Array[], indexesToSign?: number[]) => Promise<void>;
+    requestAfterSign: (success: boolean, errorMessage?: string) => void;
+    requestWelcome: (account: WelcomeAccount) => void;
+}
+
+/**
+ * Provider that enables wallet UI components to work with TanStack Query.
+ * It can use an existing QueryClient from the parent application or create its own.
+ * Also creates a QueryClientProvider if none exists in the parent tree.
+ *
+ * Automatically prefetches data for all accounts in connected wallets for smoother
+ * account switching experience.
+ *
+ * Supports theme configuration via the `theme` prop:
+ * - 'light': Always use light mode
+ * - 'dark': Always use dark mode
+ * - 'system': Follow the user's OS/browser preference (default)
+ */
+export declare function WalletUIProvider({ children, queryClient: externalQueryClient, enablePrefetching, prefetchNfdView, theme, }: WalletUIProviderProps): JSX.Element;
+
+declare interface WalletUIProviderProps {
+    children: ReactNode;
+    queryClient?: QueryClient;
+    /**
+     * Whether to automatically prefetch data for all accounts in connected wallets (defaults to true)
+     */
+    enablePrefetching?: boolean;
+    /**
+     * NFD view type for prefetching (defaults to 'thumbnail')
+     */
+    prefetchNfdView?: NfdView;
+    /**
+     * Theme setting for wallet UI components.
+     * - 'light': Always use light mode
+     * - 'dark': Always use dark mode
+     * - 'system': Follow the user's OS/browser preference (default)
+     *
+     * The library also respects the `.dark` class on ancestor elements (Tailwind convention),
+     * which will enable dark mode unless explicitly overridden with theme="light".
+     */
+    theme?: Theme;
+}
+
+declare interface WelcomeAccount {
+    algorandAddress: string;
+    evmAddress: string;
+}
+
+export { }

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@d13co/use-wallet-ui-react",
+  "version": "1.0.0",
+  "description": "React components for use-wallet UI",
+  "type": "module",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/types/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./theme.css": "./src/theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/theme.css",
+    "README.md"
+  ],
+  "keywords": [
+    "algorand",
+    "wallet",
+    "use-wallet",
+    "react",
+    "vue",
+    "solid",
+    "ui"
+  ],
+  "author": "TxnLab Inc.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TxnLab/use-wallet-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TxnLab/use-wallet-ui/issues"
+  },
+  "homepage": "https://github.com/TxnLab/use-wallet-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=22",
+    "pnpm": ">=9"
+  },
+  "peerDependencies": {
+    "@d13co/use-wallet-react": "^4.0.1",
+    "liquid-accounts-evm": ">=0.0.1",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "@d13co/liquid-ui": "0.0.1"
+  },
+  "dependencies": {
+    "@floating-ui/react": "0.27.17",
+    "@headlessui/react": "2.2.9",
+    "@tanstack/react-query": "5.90.21",
+    "@txnlab/utils-ts": "0.1.0",
+    "clsx": "2.1.1",
+    "tailwind-merge": "3.4.1"
+  },
+  "devDependencies": {
+    "liquid-accounts-evm": "link:../../../evm-sdk",
+    "@tailwindcss/cli": "4.1.18",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitest/coverage-v8": "3.2.4",
+    "algosdk": "3.5.2",
+    "publint": "0.3.17",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tailwindcss": "4.1.18",
+    "tsx": "4.21.0",
+    "vite": "6.4.1",
+    "vite-plugin-dts": "4.5.4",
+    "vite-tsconfig-paths": "5.1.4",
+    "vitest": "3.2.4"
+  },
+  "scripts": {
+    "build": "pnpm generate:css && vite build && publint --strict",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "format": "prettier --write .",
+    "typecheck": "tsc --noEmit",
+    "generate:css": "npx @tailwindcss/cli -c ./tailwind.config.js -i ./src/input.css -o ./dist/style.css && node ./scripts/post-process-css.js"
+  }
+}

package/src/theme.css

@@ -0,0 +1,108 @@
+/*
+  Theme CSS custom properties for wallet UI components
+  Import this file in Tailwind projects to enable theming
+
+  Uses @layer wui-theme so consumer CSS can easily override values.
+  Consumer CSS (unlayered) automatically beats layered styles.
+
+  Example override:
+    [data-wallet-theme] {
+      --wui-color-primary: #8b5cf6;
+    }
+*/
+
+@layer wui-theme {
+  /* Light mode (default) */
+  [data-wallet-theme] {
+    --wui-color-primary: #2d2df1;
+    --wui-color-primary-hover: #2929d9;
+    --wui-color-primary-text: #ffffff;
+    --wui-color-bg: #ffffff;
+    --wui-color-bg-secondary: #f9fafb;
+    --wui-color-bg-tertiary: #f3f4f6;
+    --wui-color-bg-hover: #e9e9fd;
+    --wui-color-text: #1f2937;
+    --wui-color-text-secondary: #6b7280;
+    --wui-color-text-tertiary: #9ca3af;
+    --wui-color-border: #e5e7eb;
+    --wui-color-link: rgba(45, 45, 241, 0.8);
+    --wui-color-link-hover: #2d2df1;
+    --wui-color-overlay: rgba(0, 0, 0, 0.3);
+    --wui-color-danger-bg: #fee2e2;
+    --wui-color-danger-bg-hover: #fecaca;
+    --wui-color-danger-text: #b91c1c;
+    --wui-color-avatar-bg: #e5e7eb;
+    --wui-color-avatar-icon: #9ca3af;
+  }
+
+  /* Dark mode via data-theme attribute (explicit) */
+  [data-wallet-theme][data-theme='dark'] {
+    --wui-color-primary: #bfbff9;
+    --wui-color-primary-hover: #d4d4fa;
+    --wui-color-primary-text: #001324;
+    --wui-color-bg: #001324;
+    --wui-color-bg-secondary: #101b29;
+    --wui-color-bg-tertiary: #192a39;
+    --wui-color-bg-hover: #192a39;
+    --wui-color-text: #e9e9fd;
+    --wui-color-text-secondary: #99a1a7;
+    --wui-color-text-tertiary: #6b7280;
+    --wui-color-border: #192a39;
+    --wui-color-link: #6c6cf1;
+    --wui-color-link-hover: #8080f3;
+    --wui-color-overlay: rgba(0, 0, 0, 0.5);
+    --wui-color-danger-bg: rgba(127, 29, 29, 0.4);
+    --wui-color-danger-bg-hover: rgba(127, 29, 29, 0.6);
+    --wui-color-danger-text: #fca5a5;
+    --wui-color-avatar-bg: #192a39;
+    --wui-color-avatar-icon: #6b7280;
+  }
+
+  /* Dark mode via .dark class on ancestor (Tailwind convention) */
+  .dark [data-wallet-theme]:not([data-theme='light']) {
+    --wui-color-primary: #bfbff9;
+    --wui-color-primary-hover: #d4d4fa;
+    --wui-color-primary-text: #001324;
+    --wui-color-bg: #001324;
+    --wui-color-bg-secondary: #101b29;
+    --wui-color-bg-tertiary: #192a39;
+    --wui-color-bg-hover: #192a39;
+    --wui-color-text: #e9e9fd;
+    --wui-color-text-secondary: #99a1a7;
+    --wui-color-text-tertiary: #6b7280;
+    --wui-color-border: #192a39;
+    --wui-color-link: #6c6cf1;
+    --wui-color-link-hover: #8080f3;
+    --wui-color-overlay: rgba(0, 0, 0, 0.5);
+    --wui-color-danger-bg: rgba(127, 29, 29, 0.4);
+    --wui-color-danger-bg-hover: rgba(127, 29, 29, 0.6);
+    --wui-color-danger-text: #fca5a5;
+    --wui-color-avatar-bg: #192a39;
+    --wui-color-avatar-icon: #6b7280;
+  }
+
+  /* Dark mode via system preference (when theme="system" or no explicit theme) */
+  @media (prefers-color-scheme: dark) {
+    [data-wallet-theme]:not([data-theme='light']):not([data-theme='dark']) {
+      --wui-color-primary: #bfbff9;
+      --wui-color-primary-hover: #d4d4fa;
+      --wui-color-primary-text: #001324;
+      --wui-color-bg: #001324;
+      --wui-color-bg-secondary: #101b29;
+      --wui-color-bg-tertiary: #192a39;
+      --wui-color-bg-hover: #192a39;
+      --wui-color-text: #e9e9fd;
+      --wui-color-text-secondary: #99a1a7;
+      --wui-color-text-tertiary: #6b7280;
+      --wui-color-border: #192a39;
+      --wui-color-link: #6c6cf1;
+      --wui-color-link-hover: #8080f3;
+      --wui-color-overlay: rgba(0, 0, 0, 0.5);
+      --wui-color-danger-bg: rgba(127, 29, 29, 0.4);
+      --wui-color-danger-bg-hover: rgba(127, 29, 29, 0.6);
+      --wui-color-danger-text: #fca5a5;
+      --wui-color-avatar-bg: #192a39;
+      --wui-color-avatar-icon: #6b7280;
+    }
+  }
+}