-
-
-
+
+ {[323, 240, 190, 145, 60, 30, 0, 350].map((hue) => (
+
+ ))}
),
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
}
-export const Responsive: Story = {
+export const Interactive: Story = {
args: {
- wallet: mockWallet,
- onCopyAddress: () => alert('地址已复制'),
- onTransfer: () => alert('转账'),
- onReceive: () => alert('收款'),
+ wallet: createMockWallet({ name: '触摸/移动鼠标查看效果' }),
+ chain: 'ethereum',
+ chainName: 'Ethereum',
+ address: '0x1234567890abcdef1234567890abcdef12345678',
+ themeHue: 323,
},
parameters: {
docs: {
description: {
- story: '拖拽容器边缘调整宽度，观察卡片响应式变化：\n- 窄容器：紧凑布局，地址缩写\n- 宽容器：宽松布局，显示完整地址',
+ story: '将鼠标悬停在卡片上并移动，观察3D倾斜和炫光效果。在移动设备上，触摸并拖动卡片。',
},
},
},
diff --git a/src/components/wallet/wallet-card.test.tsx b/src/components/wallet/wallet-card.test.tsx
index 8ea691c7..3b53fcba 100644
--- a/src/components/wallet/wallet-card.test.tsx
+++ b/src/components/wallet/wallet-card.test.tsx
@@ -1,99 +1,173 @@
import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
-import { WalletCard, type WalletInfo } from './wallet-card'
-import { TestI18nProvider } from '@/test/i18n-mock'
-
-// Mock clipboard service
-vi.mock('@/services/clipboard', () => ({
- clipboardService: {
- write: vi.fn().mockResolvedValue(undefined),
- read: vi.fn().mockResolvedValue(''),
- },
-}))
+import { WalletCard } from './wallet-card'
+import type { Wallet } from '@/stores'
-const renderWithI18n = (ui: React.ReactElement) => render(
{ui})
+// Mock useCardInteraction hook
+vi.mock('@/hooks/useCardInteraction', () => ({
+ useCardInteraction: () => ({
+ pointerX: 0,
+ pointerY: 0,
+ isActive: false,
+ bindElement: vi.fn(),
+ style: {},
+ }),
+}))
-const mockWallet: WalletInfo = {
- id: '1',
+const createMockWallet = (overrides: Partial
= {}): Wallet => ({
+ id: 'test-wallet-1',
name: '我的钱包',
address: '0x1234567890abcdef1234567890abcdef12345678',
- balance: '1,234.56 USDT',
- fiatValue: '1,234.56',
- chainName: 'Ethereum',
- isBackedUp: true,
-}
+ chain: 'ethereum',
+ chainAddresses: [
+ {
+ chain: 'ethereum',
+ address: '0x1234567890abcdef1234567890abcdef12345678',
+ tokens: [],
+ },
+ ],
+ createdAt: Date.now(),
+ themeHue: 323,
+ tokens: [],
+ ...overrides,
+})
+
+describe('WalletCard (3D)', () => {
+ const defaultProps = {
+ wallet: createMockWallet(),
+ chain: 'ethereum' as const,
+ chainName: 'Ethereum',
+ address: '0x1234567890abcdef1234567890abcdef12345678',
+ }
-describe('WalletCard', () => {
it('renders wallet name', () => {
- renderWithI18n()
+ render()
expect(screen.getByRole('heading', { name: '我的钱包' })).toBeInTheDocument()
})
- it('renders wallet balance', () => {
- renderWithI18n()
- expect(screen.getByText('1,234.56 USDT')).toBeInTheDocument()
+ it('renders chain name', () => {
+ render()
+ expect(screen.getByText('Ethereum')).toBeInTheDocument()
})
- it('renders fiat value when provided', () => {
- renderWithI18n()
- expect(screen.getByText('≈ $1,234.56')).toBeInTheDocument()
+ it('renders address in AddressDisplay', () => {
+ const { container } = render()
+ // AddressDisplay component handles dynamic truncation based on container width
+ // In tests, we verify the address is passed correctly via title attribute
+ const addressElement = container.querySelector('[title*="0x1234"]')
+ expect(addressElement).toBeInTheDocument()
})
- it('renders chain name when provided', () => {
- renderWithI18n()
- expect(screen.getByText('Ethereum')).toBeInTheDocument()
+ it('renders empty address when not provided', () => {
+ const { container } = render()
+ // AddressDisplay with empty string
+ const addressElement = container.querySelector('[title=""]')
+ expect(addressElement).toBeInTheDocument()
})
- it('shows backup warning when isBackedUp is false', () => {
- renderWithI18n()
- expect(screen.getByText('未备份')).toBeInTheDocument()
- })
+ it('calls onCopyAddress when copy button clicked', async () => {
+ const handleCopy = vi.fn()
+ render()
- it('does not show backup warning when isBackedUp is true', () => {
- renderWithI18n()
- expect(screen.queryByText('未备份')).not.toBeInTheDocument()
+ // Get all buttons: [chain selector, settings, copy]
+ const buttons = screen.getAllByRole('button')
+ // The copy button is the last one (in the bottom row after address)
+ const copyButton = buttons.at(-1)!
+
+ await userEvent.click(copyButton)
+
+ expect(handleCopy).toHaveBeenCalledTimes(1)
})
- it('calls onCopyAddress when address is clicked', async () => {
+ it('shows check icon after copy', async () => {
const handleCopy = vi.fn()
- renderWithI18n()
-
- // AddressDisplay uses aria-label with full address
- const addressButton = screen.getByRole('button', { name: /复制.*0x1234/i })
- await userEvent.click(addressButton)
- expect(handleCopy).toHaveBeenCalledTimes(1)
+ render()
+
+ const buttons = screen.getAllByRole('button')
+ await userEvent.click(buttons.at(-1)!)
+
+ // Check icon should appear
+ await waitFor(() => {
+ expect(screen.getByText((_, el) => el?.classList.contains('text-green-300') ?? false)).toBeInTheDocument()
+ })
+ })
+
+ it('calls onOpenChainSelector when chain button clicked', async () => {
+ const handleOpenChainSelector = vi.fn()
+ render()
+
+ // Chain selector button contains chain name
+ const chainButton = screen.getByRole('button', { name: /Ethereum/i })
+ await userEvent.click(chainButton)
+
+ expect(handleOpenChainSelector).toHaveBeenCalledTimes(1)
+ })
+
+ it('calls onOpenSettings when settings button clicked', async () => {
+ const handleOpenSettings = vi.fn()
+ render()
+
+ // Settings button is in the top-right
+ const buttons = screen.getAllByRole('button')
+ // Second button (after chain selector) should be settings
+ await userEvent.click(buttons.at(1)!)
+
+ expect(handleOpenSettings).toHaveBeenCalledTimes(1)
+ })
+
+ it('applies custom theme hue', () => {
+ const { container } = render()
+ // Theme hue is used in the gradient background, check the style contains the hue
+ const card = container.querySelector('.wallet-card')
+ expect(card).toBeInTheDocument()
})
- it('renders transfer button when onTransfer is provided', () => {
- renderWithI18n( {}} />)
- expect(screen.getByRole('button', { name: '转账' })).toBeInTheDocument()
+ it('applies default theme hue when not specified', () => {
+ const { container } = render()
+ // Default theme hue from wallet is 323
+ const card = container.querySelector('.wallet-card')
+ expect(card).toBeInTheDocument()
})
- it('renders receive button when onReceive is provided', () => {
- renderWithI18n( {}} />)
- expect(screen.getByRole('button', { name: '收款' })).toBeInTheDocument()
+ it('renders with 3D transform styles', () => {
+ const { container } = render()
+
+ const card = container.querySelector('.wallet-card')
+ expect(card).toHaveStyle({ transformStyle: 'preserve-3d' })
+ })
+
+ it('has perspective container', () => {
+ const { container } = render()
+ // Container uses inline style for perspective
+ const perspectiveContainer = container.querySelector('.wallet-card-container')
+ expect(perspectiveContainer).toBeInTheDocument()
+ expect(perspectiveContainer).toHaveStyle({ perspective: '1000px' })
+ })
+
+ it('renders different chain names', () => {
+ render()
+ expect(screen.getByText('Tron')).toBeInTheDocument()
})
- it('calls onTransfer when transfer button is clicked', async () => {
- const handleTransfer = vi.fn()
- renderWithI18n()
-
- await userEvent.click(screen.getByRole('button', { name: '转账' }))
- expect(handleTransfer).toHaveBeenCalledTimes(1)
+ it('handles long wallet names', () => {
+ const longNameWallet = createMockWallet({ name: '这是一个非常长的钱包名称用于测试' })
+ render()
+
+ expect(screen.getByRole('heading', { name: '这是一个非常长的钱包名称用于测试' })).toBeInTheDocument()
})
- it('calls onReceive when receive button is clicked', async () => {
- const handleReceive = vi.fn()
- renderWithI18n()
-
- await userEvent.click(screen.getByRole('button', { name: '收款' }))
- expect(handleReceive).toHaveBeenCalledTimes(1)
+ it('accepts custom className', () => {
+ const { container } = render()
+
+ const perspectiveContainer = container.querySelector('.custom-class')
+ expect(perspectiveContainer).toBeInTheDocument()
})
- it('does not render action buttons when handlers are not provided', () => {
- renderWithI18n()
- expect(screen.queryByRole('button', { name: '转账' })).not.toBeInTheDocument()
- expect(screen.queryByRole('button', { name: '收款' })).not.toBeInTheDocument()
+ it('forwards ref correctly', () => {
+ const ref = vi.fn()
+ render()
+
+ expect(ref).toHaveBeenCalled()
})
})
diff --git a/src/components/wallet/wallet-card.tsx b/src/components/wallet/wallet-card.tsx
index 4fb5f3dc..b1d2dad6 100644
--- a/src/components/wallet/wallet-card.tsx
+++ b/src/components/wallet/wallet-card.tsx
@@ -1,105 +1,379 @@
-import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
-import { AddressDisplay } from './address-display'
-
-export interface WalletInfo {
- id: string
- name: string
- address: string
- balance: string
- fiatValue?: string | undefined
- chainName?: string | undefined
- isBackedUp?: boolean | undefined
+import { forwardRef, useCallback, useEffect, useRef, useState, useMemo } from 'react';
+
+// 注册 CSS 自定义属性，使其可动画
+// 只需注册一次，放在模块顶层
+if (typeof window !== 'undefined' && 'registerProperty' in CSS) {
+ const propsToRegister = [
+ { name: '--tilt-x', syntax: '', initialValue: '0' },
+ { name: '--tilt-y', syntax: '', initialValue: '0' },
+ { name: '--tilt-nx', syntax: '', initialValue: '0' },
+ { name: '--tilt-ny', syntax: '', initialValue: '0' },
+ { name: '--tilt-intensity', syntax: '', initialValue: '0' },
+ { name: '--tilt-direction', syntax: '', initialValue: '0' },
+ ];
+
+ for (const prop of propsToRegister) {
+ try {
+ CSS.registerProperty({ ...prop, inherits: true });
+ } catch {
+ // 已注册则忽略
+ }
+ }
}
+import { cn } from '@/lib/utils';
+import { useCardInteraction } from '@/hooks/useCardInteraction';
+import { useMonochromeMask } from '@/hooks/useMonochromeMask';
+import { ChainIcon } from './chain-icon';
+import { AddressDisplay } from './address-display';
+import type { Wallet, ChainType } from '@/stores';
+import {
+ IconCopy as Copy,
+ IconCheck as Check,
+ IconSettings as Settings,
+ IconChevronDown as ChevronDown,
+} from '@tabler/icons-react';
export interface WalletCardProps {
- wallet: WalletInfo
- onCopyAddress?: (() => void) | undefined
- onTransfer?: (() => void) | undefined
- onReceive?: (() => void) | undefined
- className?: string | undefined
+ wallet: Wallet;
+ chain: ChainType;
+ chainName: string;
+ address?: string | undefined;
+ /** 链图标 URL，用于防伪水印 */
+ chainIconUrl?: string | undefined;
+ /** 防伪水印 logo 平铺尺寸（含间距），默认 40px */
+ watermarkLogoSize?: number | undefined;
+ /** 防伪水印 logo 实际尺寸，默认 24px（与 watermarkLogoSize 差值为间距） */
+ watermarkLogoActualSize?: number | undefined;
+ onCopyAddress?: (() => void) | undefined;
+ onOpenChainSelector?: (() => void) | undefined;
+ onOpenSettings?: (() => void) | undefined;
+ className?: string | undefined;
+ themeHue?: number | undefined;
}
-export function WalletCard({
- wallet,
- onCopyAddress,
- onTransfer,
- onReceive,
- className,
-}: WalletCardProps) {
- const { t } = useTranslation(['wallet', 'common'])
+// 静态样式常量 - 避免每次渲染创建新对象
+const TRIANGLE_MASK_SVG = `url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 L10 10 L10 0 Z' fill='black'/%3E%3C/svg%3E")`;
+
+export const WalletCard = forwardRef(function WalletCard(
+ {
+ wallet,
+ chain,
+ chainName,
+ address,
+ chainIconUrl,
+ watermarkLogoSize = 40,
+ watermarkLogoActualSize = 24,
+ onCopyAddress,
+ onOpenChainSelector,
+ onOpenSettings,
+ className,
+ themeHue = 323,
+ },
+ ref,
+) {
+ const [copied, setCopied] = useState(false);
+ const cardRef = useRef(null);
+
+ // 将链图标转为单色遮罩（黑白 -> 透明）
+ const monoMaskUrl = useMonochromeMask(chainIconUrl, {
+ size: watermarkLogoActualSize * 2, // 2x for retina
+ invert: false, // 白色区域不透明
+ contrast: 1.8,
+ });
+
+ const { pointerX, pointerY, isActive, bindElement } = useCardInteraction({
+ gyroStrength: 0.15,
+ touchStrength: 0.8,
+ });
+
+ useEffect(() => {
+ bindElement(cardRef.current);
+ }, [bindElement]);
+
+ const handleCopy = useCallback(() => {
+ onCopyAddress?.();
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ }, [onCopyAddress]);
+
+ // ============ 基于角度的光影算法 (GPU动画同步) ============
+
+ // 1. 卡片倾斜角度 (度) - 作为 CSS 变量传递，让 GPU 处理过渡
+ const maxTilt = 15;
+ const tiltX = isActive ? pointerY * -maxTilt : 0;
+ const tiltY = isActive ? pointerX * maxTilt : 0;
+
+ // 2. 归一化倾斜值 (-1 到 1) - 用于 CSS calc()
+ const normalizedTiltX = tiltX / maxTilt; // -1 to 1
+ const normalizedTiltY = tiltY / maxTilt; // -1 to 1
+
+ // 3. 倾斜强度 (0 到 1) - 用于透明度等
+ const tiltIntensity = isActive
+ ? Math.min(1, Math.sqrt(normalizedTiltX * normalizedTiltX + normalizedTiltY * normalizedTiltY))
+ : 0;
+
+ // 4. 倾斜方向角 (度) - 用于彩虹旋转
+ const tiltDirection = Math.atan2(-normalizedTiltX, normalizedTiltY) * (180 / Math.PI);
+
+ // CSS 变量 - 所有光影效果都通过这些变量驱动
+ // 过渡动画在 CSS 层面统一处理
+ const cssVars = {
+ '--tilt-x': tiltX, // 倾斜角度 X (度)
+ '--tilt-y': tiltY, // 倾斜角度 Y (度)
+ '--tilt-nx': normalizedTiltX, // 归一化 X (-1~1)
+ '--tilt-ny': normalizedTiltY, // 归一化 Y (-1~1)
+ '--tilt-intensity': tiltIntensity, // 强度 (0~1)
+ '--tilt-direction': tiltDirection, // 方向角 (度)
+ } as React.CSSProperties;
+
+ // 动画配置 - 统一用于 transform 和光影
+ const transitionConfig = 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)'; // ease-out-back 回弹效果
+
+ // 缓存背景渐变样式（只依赖 themeHue）
+ const bgGradient = useMemo(
+ () => `linear-gradient(135deg,
+ oklch(0.50 0.20 ${themeHue}) 0%,
+ oklch(0.40 0.22 ${themeHue + 20}) 50%,
+ oklch(0.30 0.18 ${themeHue + 40}) 100%)`,
+ [themeHue],
+ );
+
+ // 缓存 Logo mask 样式（只依赖 monoMaskUrl 和 watermarkLogoSize）
+ const logoMaskStyle = useMemo(
+ () =>
+ monoMaskUrl
+ ? {
+ WebkitMaskImage: `url(${monoMaskUrl})`,
+ WebkitMaskSize: `${watermarkLogoSize}px ${watermarkLogoSize}px`,
+ WebkitMaskRepeat: 'repeat' as const,
+ WebkitMaskPosition: 'center',
+ maskImage: `url(${monoMaskUrl})`,
+ maskSize: `${watermarkLogoSize}px ${watermarkLogoSize}px`,
+ maskRepeat: 'repeat' as const,
+ maskPosition: 'center',
+ }
+ : null,
+ [monoMaskUrl, watermarkLogoSize],
+ );
+
return (
-
+
+ {/* 卡片主体 - CSS 变量驱动所有动画 */}
- {/* Header */}
-
-
-
-
- {wallet.name.charAt(0).toUpperCase()}
-
-
-
-
{wallet.name}
- {wallet.chainName && (
-
{wallet.chainName}
- )}
-
-
-
- {wallet.isBackedUp === false && (
-
- {t('notBackedUp')}
-
- )}
-
+ {/* 1. 主背景渐变 */}
+
- {/* Balance */}
-
-
{wallet.balance}
- {wallet.fiatValue && (
-
≈ ${wallet.fiatValue}
- )}
-
-
- {/* Address */}
-
-
+ {/* Refraction 1: 左下角 */}
+
+ {/* Refraction 2: 右上角 */}
+
- {/* Actions */}
- {(onTransfer || onReceive) && (
-
- {onTransfer && (
-
- )}
- {onReceive && (
-
- )}
+ {/* 3. 防伪层2：Logo水印 (Watermark) + 双层折射 */}
+ {logoMaskStyle && (
+
+ {/* Refraction 1: 左下角 */}
+
+ {/* Refraction 2: 右上角 */}
+
)}
+
+ {/* 4. 表面高光 (Glare) - 基于物理反射 */}
+
+
+ {/* 5. 边框装饰 */}
+
+
+ {/* 卡片内容 */}
+
+ {/* 顶部：链选择器 + 设置 */}
+
+
+
+
+
+
+ {/* 中部：钱包名称 */}
+
+
{wallet.name}
+
+
+ {/* 底部：地址 */}
+
+
+
+ {/* 外层阴影 */}
+
- )
-}
+ );
+});
diff --git a/src/components/wallet/wallet-config.stories.tsx b/src/components/wallet/wallet-config.stories.tsx
new file mode 100644
index 00000000..00349804
--- /dev/null
+++ b/src/components/wallet/wallet-config.stories.tsx
@@ -0,0 +1,159 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { useEffect } from 'react'
+import { WalletConfig } from './wallet-config'
+import { walletStore, type Wallet } from '@/stores'
+
+const createMockWallet = (id: string, name: string, themeHue: number): Wallet => ({
+ id,
+ name,
+ address: `0x${id.padEnd(40, '0')}`,
+ chain: 'ethereum',
+ chainAddresses: [
+ { chain: 'ethereum', address: `0x${id.padEnd(40, '0')}`, tokens: [] },
+ { chain: 'tron', address: `T${id.padEnd(33, 'A')}`, tokens: [] },
+ ],
+ createdAt: Date.now(),
+ themeHue,
+ tokens: [],
+})
+
+const mockWallets = [
+ createMockWallet('mock-wallet-1', '我的钱包', 323),
+ createMockWallet('mock-wallet-2', '工作钱包', 200),
+ createMockWallet('mock-wallet-3', '储蓄钱包', 120),
+]
+
+function StoreMockDecorator({ children }: { children: React.ReactNode }) {
+ useEffect(() => {
+ walletStore.setState((prev) => ({
+ ...prev,
+ wallets: mockWallets,
+ currentWalletId: 'mock-wallet-1',
+ chainPreferences: {},
+ }))
+ }, [])
+ return <>{children}
+}
+
+const meta: Meta
= {
+ title: 'Wallet/WalletConfig',
+ component: WalletConfig,
+ tags: ['autodocs'],
+ parameters: {
+ layout: 'centered',
+ backgrounds: {
+ default: 'light',
+ },
+ },
+ argTypes: {
+ mode: {
+ control: 'select',
+ options: ['edit-only', 'default', 'edit'],
+ description: '组件模式',
+ },
+ walletId: {
+ control: 'text',
+ description: '钱包 ID',
+ },
+ },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+}
+
+export default meta
+type Story = StoryObj
+
+export const EditOnly: Story = {
+ name: 'edit-only 模式（创建流程）',
+ args: {
+ mode: 'edit-only',
+ walletId: 'mock-wallet-1',
+ onEditOnlyComplete: fn(),
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: '用于创建/恢复钱包的最后一步，只有确认按钮',
+ },
+ },
+ },
+}
+
+export const Default: Story = {
+ name: 'default 模式（钱包详情）',
+ args: {
+ mode: 'default',
+ walletId: 'mock-wallet-1',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: '钱包详情页，显示功能按钮列表',
+ },
+ },
+ },
+}
+
+export const Edit: Story = {
+ name: 'edit 模式（编辑中）',
+ args: {
+ mode: 'edit',
+ walletId: 'mock-wallet-1',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: '从 default 切换到编辑模式，有保存/取消按钮',
+ },
+ },
+ },
+}
+
+export const WalletNotFound: Story = {
+ name: '钱包未找到',
+ args: {
+ mode: 'default',
+ walletId: 'non-existent-wallet',
+ },
+ parameters: {
+ docs: {
+ description: {
+ story: '当钱包 ID 无效时显示未找到提示',
+ },
+ },
+ },
+}
+
+export const MobileView: Story = {
+ name: '移动端视图',
+ args: {
+ mode: 'edit-only',
+ walletId: 'mock-wallet-1',
+ onEditOnlyComplete: fn(),
+ },
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+ parameters: {
+ viewport: {
+ defaultViewport: 'mobile1',
+ },
+ docs: {
+ description: {
+ story: '移动端宽度下的显示效果',
+ },
+ },
+ },
+}
diff --git a/src/components/wallet/wallet-config.test.tsx b/src/components/wallet/wallet-config.test.tsx
new file mode 100644
index 00000000..f3d25516
--- /dev/null
+++ b/src/components/wallet/wallet-config.test.tsx
@@ -0,0 +1,290 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { WalletConfig } from './wallet-config'
+import type { Wallet } from '@/stores'
+
+// Mock stores
+const mockWallets: Wallet[] = [
+ {
+ id: 'wallet-1',
+ name: '我的钱包',
+ address: '0x1234567890abcdef',
+ chain: 'ethereum',
+ chainAddresses: [
+ { chain: 'ethereum', address: '0x1234567890abcdef', tokens: [] },
+ { chain: 'tron', address: 'TRX123456', tokens: [] },
+ ],
+ createdAt: Date.now(),
+ themeHue: 323,
+ tokens: [],
+ },
+ {
+ id: 'wallet-2',
+ name: '备用钱包',
+ address: '0xabcdef1234567890',
+ chain: 'ethereum',
+ chainAddresses: [{ chain: 'ethereum', address: '0xabcdef1234567890', tokens: [] }],
+ createdAt: Date.now(),
+ themeHue: 200,
+ tokens: [],
+ },
+]
+
+const mockPush = vi.fn()
+const mockUpdateWalletName = vi.fn()
+const mockUpdateWalletThemeHue = vi.fn()
+const mockSetCurrentWallet = vi.fn()
+
+vi.mock('@/stores', () => ({
+ useWallets: () => mockWallets,
+ useSelectedChain: () => 'ethereum',
+ walletActions: {
+ updateWalletName: (...args: unknown[]) => mockUpdateWalletName(...args),
+ updateWalletThemeHue: (...args: unknown[]) => mockUpdateWalletThemeHue(...args),
+ setCurrentWallet: (...args: unknown[]) => mockSetCurrentWallet(...args),
+ },
+ useChainConfigs: () => [
+ { id: 'ethereum', name: 'Ethereum', icon: '/icons/eth.svg' },
+ { id: 'tron', name: 'Tron', icon: '/icons/tron.svg' },
+ ],
+}))
+
+vi.mock('@/stackflow', () => ({
+ useFlow: () => ({ push: mockPush }),
+}))
+
+vi.mock('@/hooks/useWalletTheme', () => ({
+ WALLET_THEME_COLORS: [
+ { hue: 0, color: 'oklch(0.6 0.25 0)', name: '红色' },
+ { hue: 120, color: 'oklch(0.6 0.25 120)', name: '绿色' },
+ { hue: 240, color: 'oklch(0.6 0.25 240)', name: '蓝色' },
+ ],
+}))
+
+vi.mock('@/components/wallet/wallet-card', () => ({
+ WalletCard: ({ wallet, themeHue }: { wallet: Wallet; themeHue: number }) => (
+
+ {wallet.name}
+
+ ),
+}))
+
+describe('WalletConfig', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ })
+
+ describe('mode: default', () => {
+ it('renders wallet card with wallet info', () => {
+ render()
+
+ expect(screen.getByTestId('wallet-card')).toBeInTheDocument()
+ expect(screen.getByTestId('wallet-card')).toHaveTextContent('我的钱包')
+ })
+
+ it('shows action buttons in default mode', () => {
+ render()
+
+ expect(screen.getByRole('button', { name: /editName|编辑/i })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: /exportMnemonic|助记词/i })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: /deleteWallet|删除/i })).toBeInTheDocument()
+ })
+
+ it('navigates to mnemonic export on button click', async () => {
+ render()
+
+ const exportButton = screen.getByRole('button', { name: /exportMnemonic|助记词/i })
+ await userEvent.click(exportButton)
+
+ expect(mockSetCurrentWallet).toHaveBeenCalledWith('wallet-1')
+ expect(mockPush).toHaveBeenCalledWith('SettingsMnemonicActivity', {})
+ })
+
+ it('navigates to delete confirmation on delete click', async () => {
+ render()
+
+ const deleteButton = screen.getByRole('button', { name: /deleteWallet|删除/i })
+ await userEvent.click(deleteButton)
+
+ expect(mockPush).toHaveBeenCalledWith('WalletDeleteJob', { walletId: 'wallet-1' })
+ })
+
+ it('switches to edit mode on edit button click', async () => {
+ render()
+
+ const editButton = screen.getByRole('button', { name: /editName|编辑/i })
+ await userEvent.click(editButton)
+
+ // Should show input and save/cancel buttons
+ expect(screen.getByRole('textbox')).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: /save|保存/i })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: /cancel|取消/i })).toBeInTheDocument()
+ })
+ })
+
+ describe('mode: edit', () => {
+ it('shows name input with current wallet name', () => {
+ render()
+
+ const input = screen.getByRole('textbox')
+ expect(input).toHaveValue('我的钱包')
+ })
+
+ it('shows theme color slider', () => {
+ const { container } = render()
+
+ // Should have rainbow gradient slider
+ const slider = container.querySelector('[style*="linear-gradient"]')
+ expect(slider).toBeInTheDocument()
+ })
+
+ it('shows preset color buttons', () => {
+ render()
+
+ // Should have preset color buttons (from mock: red, green, blue)
+ const colorButtons = screen.getAllByRole('button').filter((btn) =>
+ btn.style.backgroundColor?.includes('oklch')
+ )
+ expect(colorButtons.length).toBeGreaterThan(0)
+ })
+
+ it('updates name on input change', async () => {
+ render()
+
+ const input = screen.getByRole('textbox')
+ await userEvent.clear(input)
+ await userEvent.type(input, '新钱包名')
+
+ expect(input).toHaveValue('新钱包名')
+ })
+
+ it('saves changes on save button click', async () => {
+ render()
+
+ const input = screen.getByRole('textbox')
+ await userEvent.clear(input)
+ await userEvent.type(input, '新钱包名')
+
+ const saveButton = screen.getByRole('button', { name: /save|保存/i })
+ await userEvent.click(saveButton)
+
+ expect(mockUpdateWalletName).toHaveBeenCalledWith('wallet-1', '新钱包名')
+ })
+
+ it('cancels edit and reverts changes', async () => {
+ render()
+
+ const input = screen.getByRole('textbox')
+ await userEvent.clear(input)
+ await userEvent.type(input, '新钱包名')
+
+ const cancelButton = screen.getByRole('button', { name: /cancel|取消/i })
+ await userEvent.click(cancelButton)
+
+ // Should show action buttons again (default mode)
+ expect(screen.getByRole('button', { name: /editName|编辑/i })).toBeInTheDocument()
+ })
+
+ it('disables save button when name is empty', async () => {
+ render()
+
+ const input = screen.getByRole('textbox')
+ await userEvent.clear(input)
+
+ const saveButton = screen.getByRole('button', { name: /save|保存/i })
+ expect(saveButton).toBeDisabled()
+ })
+ })
+
+ describe('mode: edit-only', () => {
+ it('shows confirm button instead of save/cancel', () => {
+ render()
+
+ expect(screen.getByRole('button', { name: /confirm|确认/i })).toBeInTheDocument()
+ expect(screen.queryByRole('button', { name: /save|保存/i })).not.toBeInTheDocument()
+ expect(screen.queryByRole('button', { name: /cancel|取消/i })).not.toBeInTheDocument()
+ })
+
+ it('calls onEditOnlyComplete on confirm', async () => {
+ const onComplete = vi.fn()
+ render()
+
+ const confirmButton = screen.getByRole('button', { name: /confirm|确认/i })
+ await userEvent.click(confirmButton)
+
+ expect(onComplete).toHaveBeenCalled()
+ })
+
+ it('saves name and theme before calling onEditOnlyComplete', async () => {
+ const onComplete = vi.fn()
+ render()
+
+ const input = screen.getByRole('textbox')
+ await userEvent.clear(input)
+ await userEvent.type(input, '新创建钱包')
+
+ const confirmButton = screen.getByRole('button', { name: /confirm|确认/i })
+ await userEvent.click(confirmButton)
+
+ expect(mockUpdateWalletName).toHaveBeenCalledWith('wallet-1', '新创建钱包')
+ expect(onComplete).toHaveBeenCalled()
+ })
+
+ it('disables confirm button when name is empty', async () => {
+ render()
+
+ const input = screen.getByRole('textbox')
+ await userEvent.clear(input)
+
+ const confirmButton = screen.getByRole('button', { name: /confirm|确认/i })
+ expect(confirmButton).toBeDisabled()
+ })
+ })
+
+ describe('wallet not found', () => {
+ it('shows not found message for invalid wallet id', () => {
+ render()
+
+ expect(screen.getByText(/notFound|未找到/i)).toBeInTheDocument()
+ })
+ })
+
+ describe('theme hue editing', () => {
+ it('updates card preview when theme hue changes', async () => {
+ render()
+
+ // Find a preset color button and click it
+ const colorButtons = screen.getAllByRole('button').filter((btn) =>
+ btn.style.backgroundColor?.includes('oklch')
+ )
+
+ if (colorButtons[0]) {
+ await userEvent.click(colorButtons[0])
+ }
+
+ // Card should reflect the new theme hue
+ const card = screen.getByTestId('wallet-card')
+ expect(card).toBeInTheDocument()
+ })
+
+ it('shows markers for existing wallet hues on slider', () => {
+ const { container } = render()
+
+ // Should have markers for wallet-2's hue (200)
+ const markers = container.querySelectorAll('[class*="bg-black"]')
+ expect(markers.length).toBeGreaterThan(0)
+ })
+ })
+
+ describe('chain selector', () => {
+ it('opens chain selector on chain button click in card', async () => {
+ // This is tested via the WalletCard's onOpenChainSelector callback
+ // The actual navigation happens when WalletCard calls the callback
+ render()
+
+ // Verify the card is rendered (chain selector is inside card)
+ expect(screen.getByTestId('wallet-card')).toBeInTheDocument()
+ })
+ })
+})
diff --git a/src/components/wallet/wallet-config.tsx b/src/components/wallet/wallet-config.tsx
new file mode 100644
index 00000000..ae323d86
--- /dev/null
+++ b/src/components/wallet/wallet-config.tsx
@@ -0,0 +1,387 @@
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import { WALLET_THEME_COLORS } from '@/hooks/useWalletTheme'
+import { useChainIconUrls } from '@/hooks/useChainIconUrls'
+import { WalletCard } from '@/components/wallet/wallet-card'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { useWallets, useSelectedChain, walletActions, type ChainType } from '@/stores'
+import { useFlow } from '@/stackflow'
+import {
+ IconCheck,
+ IconCircleKey as KeyRound,
+ IconTrash as Trash2,
+ IconPencilMinus as Edit3,
+} from '@tabler/icons-react'
+
+/**
+ * 计算两个色相之间的距离（0-180）
+ */
+function hueDistance(h1: number, h2: number): number {
+ const diff = Math.abs(h1 - h2)
+ return Math.min(diff, 360 - diff)
+}
+
+/**
+ * 计算趋避权重
+ */
+function calculateAvoidanceWeight(hue: number, existingHues: number[], minDistance = 30): number {
+ if (existingHues.length === 0) return 1
+ let minDist = 180
+ for (const existingHue of existingHues) {
+ const dist = hueDistance(hue, existingHue)
+ if (dist < minDist) minDist = dist
+ }
+ if (minDist < minDistance) {
+ return minDist / minDistance
+ }
+ return 1
+}
+
+/**
+ * 生成带趋避权重的预设颜色
+ */
+function getWeightedPresetColors(existingHues: number[]) {
+ return WALLET_THEME_COLORS.map((color) => ({
+ ...color,
+ weight: calculateAvoidanceWeight(color.hue, existingHues),
+ }))
+}
+
+type WalletConfigMode = 'edit-only' | 'default' | 'edit'
+
+interface WalletConfigProps {
+ mode: WalletConfigMode
+ walletId: string
+ onEditOnlyComplete?: () => void
+ className?: string
+}
+
+/**
+ * 统一的钱包配置组件
+ * - default: 钱包详情页，显示卡片+功能按钮，可切换到 edit
+ * - edit: 从 default 切换来，编辑完成后切回 default
+ * - edit-only: 创建/导入最后一步，编辑完成后触发 onEditOnlyComplete
+ */
+export function WalletConfig({ mode, walletId, onEditOnlyComplete, className }: WalletConfigProps) {
+ const { t } = useTranslation(['wallet', 'onboarding', 'common'])
+ const { push } = useFlow()
+ const wallets = useWallets()
+ const wallet = wallets.find((w) => w.id === walletId)
+ const selectedChain = useSelectedChain()
+ const chainIconUrls = useChainIconUrls()
+
+ // 内部模式状态（default 和 edit 可以互相切换）
+ const [internalMode, setInternalMode] = useState<'default' | 'edit'>(
+ mode === 'edit-only' ? 'edit' : mode
+ )
+
+ // 编辑状态
+ const [editName, setEditName] = useState('')
+ const [editThemeHue, setEditThemeHue] = useState(0)
+
+ // 色条拖拽
+ const sliderRef = useRef(null)
+ const [isDragging, setIsDragging] = useState(false)
+
+ // 排除当前钱包的色相
+ const existingHues = useMemo(
+ () => wallets.filter((w) => w.id !== walletId).map((w) => w.themeHue),
+ [wallets, walletId]
+ )
+ const weightedColors = useMemo(() => getWeightedPresetColors(existingHues), [existingHues])
+
+ // 初始化编辑值
+ useEffect(() => {
+ if (wallet) {
+ setEditName(wallet.name)
+ setEditThemeHue(wallet.themeHue)
+ }
+ }, [wallet])
+
+ // 当前显示的链（使用全局选中的链）
+ const currentChainAddr = useMemo(
+ () => wallet?.chainAddresses.find((ca) => ca.chain === selectedChain) ?? wallet?.chainAddresses[0],
+ [wallet, selectedChain]
+ )
+
+ // 色条拖拽处理
+ const updateHueFromPosition = useCallback((clientX: number) => {
+ if (!sliderRef.current) return
+ const rect = sliderRef.current.getBoundingClientRect()
+ const x = Math.max(0, Math.min(clientX - rect.left, rect.width))
+ const ratio = x / rect.width
+ const newHue = Math.round(ratio * 3600) / 10
+ setEditThemeHue(newHue)
+ }, [])
+
+ const handleSliderMouseDown = (e: React.MouseEvent) => {
+ e.stopPropagation()
+ setIsDragging(true)
+ updateHueFromPosition(e.clientX)
+ }
+
+ const handleSliderTouchStart = (e: React.TouchEvent) => {
+ e.stopPropagation()
+ setIsDragging(true)
+ if (e.touches[0]) {
+ updateHueFromPosition(e.touches[0].clientX)
+ }
+ }
+
+ useEffect(() => {
+ if (!isDragging) return
+
+ const handleMouseMove = (e: MouseEvent) => updateHueFromPosition(e.clientX)
+ const handleTouchMove = (e: TouchEvent) => {
+ if (e.touches[0]) updateHueFromPosition(e.touches[0].clientX)
+ }
+ const handleEnd = () => setIsDragging(false)
+
+ document.addEventListener('mousemove', handleMouseMove)
+ document.addEventListener('mouseup', handleEnd)
+ document.addEventListener('touchmove', handleTouchMove)
+ document.addEventListener('touchend', handleEnd)
+
+ return () => {
+ document.removeEventListener('mousemove', handleMouseMove)
+ document.removeEventListener('mouseup', handleEnd)
+ document.removeEventListener('touchmove', handleTouchMove)
+ document.removeEventListener('touchend', handleEnd)
+ }
+ }, [isDragging, updateHueFromPosition])
+
+ // 打开链选择器
+ const handleOpenChainSelector = useCallback(() => {
+ push('ChainSelectorJob', {})
+ }, [push])
+
+ // 切换到编辑模式
+ const handleStartEdit = useCallback(() => {
+ if (wallet) {
+ setEditName(wallet.name)
+ setEditThemeHue(wallet.themeHue)
+ }
+ setInternalMode('edit')
+ }, [wallet])
+
+ // 保存编辑（edit 模式）
+ const handleSave = useCallback(async () => {
+ if (!wallet) return
+ const trimmedName = editName.trim()
+ if (trimmedName && trimmedName !== wallet.name) {
+ await walletActions.updateWalletName(wallet.id, trimmedName)
+ }
+ if (editThemeHue !== wallet.themeHue) {
+ await walletActions.updateWalletThemeHue(wallet.id, editThemeHue)
+ }
+ setInternalMode('default')
+ }, [wallet, editName, editThemeHue])
+
+ // 取消编辑（edit 模式）
+ const handleCancel = useCallback(() => {
+ if (wallet) {
+ setEditName(wallet.name)
+ setEditThemeHue(wallet.themeHue)
+ }
+ setInternalMode('default')
+ }, [wallet])
+
+ // 确认（edit-only 模式）
+ const handleConfirm = useCallback(async () => {
+ if (!wallet) return
+ const trimmedName = editName.trim()
+ if (trimmedName && trimmedName !== wallet.name) {
+ await walletActions.updateWalletName(wallet.id, trimmedName)
+ }
+ if (editThemeHue !== wallet.themeHue) {
+ await walletActions.updateWalletThemeHue(wallet.id, editThemeHue)
+ }
+ onEditOnlyComplete?.()
+ }, [wallet, editName, editThemeHue, onEditOnlyComplete])
+
+ // 查看助记词
+ const handleExportMnemonic = useCallback(async () => {
+ if (!wallet) return
+ await walletActions.setCurrentWallet(wallet.id)
+ push('SettingsMnemonicActivity', {})
+ }, [wallet, push])
+
+ // 删除钱包
+ const handleDelete = useCallback(() => {
+ if (!wallet) return
+ push('WalletDeleteJob', { walletId: wallet.id })
+ }, [wallet, push])
+
+ if (!wallet) {
+ return (
+
+ {t('wallet:detail.notFound')}
+
+ )
+ }
+
+ // 当前显示的主题色
+ const displayThemeHue = (internalMode === 'edit' || mode === 'edit-only') ? editThemeHue : wallet.themeHue
+ const isEditMode = internalMode === 'edit' || mode === 'edit-only'
+
+ return (
+
+ {/* 卡片预览 */}
+
+
+ {isEditMode ? (
+ <>
+ {/* 名称输入 */}
+
+
+ setEditName(e.target.value)}
+ placeholder={t('wallet:defaultName')}
+ maxLength={20}
+ className="text-center"
+ />
+
+
+ {/* 主题色选择 */}
+
+
+
+ {t('onboarding:theme.customColor')}
+ {editThemeHue.toFixed(1)}°
+
+
+ {existingHues.map((hue, idx) => (
+
+ ))}
+
+
+
+
+ {/* 预设颜色 */}
+
+ {weightedColors.map((color) => {
+ const isSelected = Math.abs(editThemeHue - color.hue) < 0.5
+ const isLowWeight = color.weight < 0.5
+ return (
+
+ )
+ })}
+
+
+
+ {/* 操作按钮 */}
+ {mode === 'edit-only' ? (
+
+ ) : (
+
+
+
+
+ )}
+
+ ) : (
+ /* default 模式：功能按钮 */
+
+
+
+
+
+
+
+ )}
+
-
+
{/* 链选择器 */}
-
+
+ {t('history.filter.chainLabel')}
+
+
{/* 时间段选择器 */}
-
+
+ {t('history.filter.periodLabel')}
+
+
{/* 结果统计 */}
@@ -157,6 +173,7 @@ export function TransactionHistoryPage() {
onTransactionClick={handleTransactionClick}
emptyTitle={t('transaction:history.emptyTitle')}
emptyDescription={t('transaction:history.emptyDesc')}
+ showChainIcon
/>
-
-
- );
- }
-
- if (!hasWallet || !currentWallet) {
- return ;
- }
-
- return (
-
- {/* 钱包卡片 - mpay 风格 */}
-
- {/* 链选择器 */}
-
-
- {/* 钱包名和地址 */}
-
-
{currentWallet.name}
-
-
- {chainAddress?.address ? truncateAddress(chainAddress.address) : '---'}
-
-
-
-
-
- {/* 操作按钮 - mpay 三按钮布局 */}
-
-
- navigate({ to: '/send' })}>
-
- {t('wallet.send')}
-
-
-
- navigate({ to: '/receive' })}>
-
- {t('wallet.receive')}
-
-
-
-
-
- {/* 资产列表 */}
-
-
{t('wallet.assets')}
- ({
- symbol: token.symbol,
- name: token.name,
- chain: selectedChain,
- balance: token.balance,
- fiatValue: token.fiatValue ? String(token.fiatValue) : undefined,
- change24h: token.change24h,
- icon: token.icon,
- }))}
- onTokenClick={(token) => {
- // TODO: Implement token detail page route once available
- console.log('Token clicked:', token.symbol);
- }}
- emptyTitle={t('wallet.noAssets')}
- emptyDescription={t('wallet.noAssetsOnChain', { chain: selectedChainName })}
- />
-
-
- {/* Scanner FAB */}
-
-
-
-
-
{t('welcome.title')}
-
{t('welcome.subtitle')}
-
-
- navigate({ to: '/wallet/create' })}>
- {t('welcome.createWallet')}
-
-
-
-
+
@@ -293,6 +385,9 @@ export function OnboardingRecoverPage() {
{step === 'arbitrary' && (
<>
+
+
+
)}
+ {step === 'chains' && (
+ <>
+
+
+
+
+
+
+
{t('onboarding:chainSelector.title')}
+
{t('onboarding:chainSelector.subtitle')}
+
+
+ {chainConfigs.length === 0 ? (
+
+
+
+ ) : (
+
+ )}
+
+
+ {t('common:next')}
+
+
+
+
+ )}
+
+ {step === 'theme' && createdWalletId && (
+ <>
+
+
+
+
+
+
+ )}
+
{step === 'success' && (
)}
diff --git a/src/pages/settings/index.tsx b/src/pages/settings/index.tsx
index ae0afa84..385f32c5 100644
--- a/src/pages/settings/index.tsx
+++ b/src/pages/settings/index.tsx
@@ -15,6 +15,7 @@ import {
IconNetwork as Network,
IconLink as Link,
IconInfoCircle as Info,
+ IconDatabase as Database,
} from '@tabler/icons-react';
import { PageHeader } from '@/components/layout/page-header';
import { useCurrentWallet, useLanguage, useCurrency, useTheme, chainConfigStore, chainConfigSelectors } from '@/stores';
@@ -275,6 +276,13 @@ export function SettingsPage() {
// TODO: 关于页面
}}
/>
+
+
}
+ label={t('settings:items.storage')}
+ onClick={() => navigate({ to: '/settings/storage' })}
+ testId="storage-button"
+ />
diff --git a/src/pages/settings/storage.tsx b/src/pages/settings/storage.tsx
new file mode 100644
index 00000000..4f899053
--- /dev/null
+++ b/src/pages/settings/storage.tsx
@@ -0,0 +1,133 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PageHeader } from '@/components/layout/page-header';
+import { Button } from '@/components/ui/button';
+import { useNavigation, useFlow } from '@/stackflow';
+import { IconDatabase, IconTrash, IconLoader2 } from '@tabler/icons-react';
+
+interface StorageEstimate {
+ usage: number;
+ quota: number;
+}
+
+function formatBytes(bytes: number): string {
+ if (bytes === 0) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+
+export function SettingsStoragePage() {
+ const { t } = useTranslation(['settings', 'common']);
+ const { goBack } = useNavigation();
+ const { push } = useFlow();
+ const [estimate, setEstimate] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ const fetchEstimate = useCallback(async () => {
+ setLoading(true);
+ try {
+ if (navigator.storage && navigator.storage.estimate) {
+ const est = await navigator.storage.estimate();
+ setEstimate({
+ usage: est.usage ?? 0,
+ quota: est.quota ?? 0,
+ });
+ }
+ } catch (error) {
+ console.error('Failed to get storage estimate:', error);
+ } finally {
+ setLoading(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchEstimate();
+ }, [fetchEstimate]);
+
+ const usagePercent = estimate ? (estimate.usage / estimate.quota) * 100 : 0;
+
+ return (
+
+
+
+
+ {/* 存储使用情况 */}
+
+
+
+
+
+
+
{t('settings:storage.usage')}
+
+ {t('settings:storage.basedOn')}
+
+
+
+
+ {loading ? (
+
+
+
+ ) : estimate ? (
+
+ {/* 进度条 */}
+
+
+
+
+ {t('settings:storage.used')}: {formatBytes(estimate.usage)}
+
+
+ {t('settings:storage.total')}: {formatBytes(estimate.quota)}
+
+
+
+
+ {/* 详细信息 */}
+
+
+ {t('settings:storage.usagePercent')}
+ {usagePercent.toFixed(2)}%
+
+
+ {t('settings:storage.available')}
+
+ {formatBytes(estimate.quota - estimate.usage)}
+
+
+
+
+ ) : (
+
+ {t('settings:storage.unavailable')}
+
+ )}
+
+
+ {/* 清理数据 */}
+
+
{t('settings:storage.clearTitle')}
+
+ {t('settings:storage.clearDesc')}
+
+
+
+
+
{/* 进度指示器 */}
@@ -214,12 +229,22 @@ export function WalletCreatePage() {
selectedChains={selectedChainIds}
selectionCount={selectedChainIds.length}
onSelectionChange={setSelectedChainIds}
- onComplete={handleComplete}
- completeLabel={t('create.complete')}
+ onComplete={handleChainsContinue}
+ completeLabel={t('create.nextStep')}
isSubmitting={isCreating}
/>
)}
+
+ {step === 'theme' && createdWalletId && (
+
+
+
+ )}
);
@@ -394,3 +419,5 @@ function ChainSelectionStep({
);
}
+
+
diff --git a/src/pages/wallet/detail.tsx b/src/pages/wallet/detail.tsx
deleted file mode 100644
index cabcd662..00000000
--- a/src/pages/wallet/detail.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigation, useActivityParams, useFlow } from '@/stackflow';
-import { PageHeader } from '@/components/layout/page-header';
-import { AddressDisplay } from '@/components/wallet/address-display';
-import { ChainIcon } from '@/components/wallet/chain-icon';
-import { Button } from '@/components/ui/button';
-import { Alert } from '@/components/common/alert';
-import { useHaptics } from '@/services';
-import {
- IconCircleKey as KeyRound,
- IconTrash as Trash2,
- IconPencilMinus as Edit3,
- IconShield as Shield,
-} from '@tabler/icons-react';
-import { useWallets, walletActions, type ChainType } from '@/stores';
-
-const CHAIN_NAMES: Record = {
- ethereum: 'Ethereum',
- bitcoin: 'Bitcoin',
- tron: 'Tron',
- binance: 'BSC',
- bfmeta: 'BFMeta',
- ccchain: 'CCChain',
- pmchain: 'PMChain',
- bfchainv2: 'BFChain V2',
- btgmeta: 'BTGMeta',
- biwmeta: 'BIWMeta',
- ethmeta: 'ETHMeta',
- malibu: 'Malibu',
-};
-
-export function WalletDetailPage() {
- const { t } = useTranslation('wallet');
- const { walletId } = useActivityParams<{ walletId: string }>();
- const { goBack, navigate } = useNavigation();
- const { push } = useFlow();
- const haptics = useHaptics();
-
- const wallets = useWallets();
- const wallet = wallets.find((w) => w.id === walletId);
-
- const handleExportMnemonic = useCallback(async () => {
- if (!wallet) return;
-
- await haptics.impact('success');
- await walletActions.setCurrentWallet(wallet.id);
- navigate({ to: '/settings/mnemonic' });
- }, [haptics, navigate, wallet]);
-
- const handleOpenEdit = useCallback(() => {
- if (!wallet) return;
- push("WalletRenameJob", { walletId: wallet.id });
- }, [push, wallet]);
-
- const handleOpenDelete = useCallback(() => {
- if (!wallet) return;
- push("WalletDeleteJob", { walletId: wallet.id });
- }, [push, wallet]);
-
- if (!wallet) {
- return (
-
-
-
-
{t('detail.notFound')}
-
-
-
-
-
- {/* Wallet info */}
-
-
-
-
-
-
-
{wallet.name}
-
{t('detail.createdAt', { date: new Date(wallet.createdAt).toLocaleDateString() })}
-
-
-
-
- {/* Chain addresses */}
-
-
{t('detail.chainAddresses')}
- {wallet.chainAddresses.map((chainAddr) => (
-
-
-
-
{CHAIN_NAMES[chainAddr.chain] ?? chainAddr.chain}
-
-
-
- ))}
-
-
- {/* Action buttons */}
-
-
-
-
-
-
-
-
- {/* Security warning */}
-
{t('detail.securityWarning')}
-
-
-
-
- )
-}
-
-// 包装懒加载组件
-function withSuspense(Component: React.LazyExoticComponent) {
- return function SuspenseWrapper() {
- return (
- }>
-
-
- )
- }
-}
-
-// Root Route with AppLayout (main routes)
-const rootRoute = createRootRoute({
- component: () => (
-
-
-
- ),
-})
-
-// 首页
-const indexRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/',
- component: withSuspense(HomePage),
-})
-
-// 钱包路由
-const walletRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/wallet',
-})
-
-const walletCreateRoute = createRoute({
- getParentRoute: () => walletRoute,
- path: '/create',
- component: withSuspense(WalletCreatePage),
-})
-
-const walletDetailRoute = createRoute({
- getParentRoute: () => walletRoute,
- path: '/$walletId',
- component: withSuspense(WalletDetailPage),
-})
-
-const walletListRoute = createRoute({
- getParentRoute: () => walletRoute,
- path: '/list',
- component: withSuspense(WalletListPage),
-})
-
-// 代币路由
-const tokenRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/token/$tokenId',
- component: withSuspense(TokenDetailPage),
-})
-
-// 转账路由 - 支持从扫码器预填地址
-const sendRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/send',
- component: withSuspense(SendPage),
- validateSearch: (search: Record) => ({
- address: typeof search.address === 'string' ? search.address : undefined,
- chain: typeof search.chain === 'string' ? search.chain : undefined,
- amount: typeof search.amount === 'string' ? search.amount : undefined,
- }),
-})
-
-// 收款路由
-const receiveRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/receive',
- component: withSuspense(ReceivePage),
-})
-
-// 设置路由
-const settingsRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/settings',
- component: withSuspense(SettingsPage),
-})
-
-const settingsLanguageRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/settings/language',
- component: withSuspense(LanguagePage),
-})
-
-const settingsMnemonicRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/settings/mnemonic',
- component: withSuspense(ViewMnemonicPage),
-})
-
-const settingsWalletLockRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/settings/wallet-lock',
- component: withSuspense(ChangeWalletLockPage),
-})
-
-const settingsWalletChainsRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/settings/wallet-chains',
- component: withSuspense(WalletChainsPage),
-})
-
-const settingsCurrencyRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/settings/currency',
- component: withSuspense(CurrencyPage),
-})
-
-const settingsChainsRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/settings/chains',
- component: withSuspense(ChainConfigPage),
-})
-
-// History 路由
-const historyRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/history',
- component: withSuspense(TransactionHistoryPage),
-})
-
-const transactionDetailRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/transaction/$txId',
- component: withSuspense(TransactionDetailPage),
-})
-
-// Onboarding 路由
-const onboardingRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/onboarding',
-})
-
-const onboardingRecoverRoute = createRoute({
- getParentRoute: () => onboardingRoute,
- path: '/recover',
- component: withSuspense(OnboardingRecoverPage),
-})
-
-const onboardingMigrateRoute = createRoute({
- getParentRoute: () => onboardingRoute,
- path: '/migrate',
- component: withSuspense(MigrationPage),
-})
-
-// Address Book 路由
-const addressBookRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/address-book',
- component: withSuspense(AddressBookPage),
-})
-
-// Notifications 路由
-const notificationsRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/notifications',
- component: withSuspense(NotificationCenterPage),
-})
-
-// Staking 路由
-const stakingRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/staking',
- component: withSuspense(StakingPage),
-})
-
-// Scanner 路由
-const scannerRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/scanner',
- component: withSuspense(ScannerPage),
-})
-
-// Guide 路由
-const welcomeRoute = createRoute({
- getParentRoute: () => rootRoute,
- path: '/welcome',
- component: withSuspense(WelcomeScreen),
-})
-
-// Authorize routes (DWEB/Plaoc)
-const { authorizeRoute } = createAuthorizeRoutes({ rootRoute, withSuspense })
-
-// 路由树
-const routeTree = rootRoute.addChildren([
- indexRoute,
- walletRoute.addChildren([
- walletCreateRoute,
- walletDetailRoute,
- walletListRoute,
- ]),
- onboardingRoute.addChildren([
- onboardingRecoverRoute,
- onboardingMigrateRoute,
- ]),
- tokenRoute,
- sendRoute,
- receiveRoute,
- settingsRoute,
- settingsLanguageRoute,
- settingsMnemonicRoute,
- settingsWalletLockRoute,
- settingsWalletChainsRoute,
- settingsCurrencyRoute,
- settingsChainsRoute,
- historyRoute,
- transactionDetailRoute,
- addressBookRoute,
- notificationsRoute,
- stakingRoute,
- scannerRoute,
- welcomeRoute,
- authorizeRoute,
-])
-
-// 使用 hash history，支持部署在任意子路径下
-const hashHistory = createHashHistory()
-
-// 创建路由器
-export const router = createRouter({
- routeTree,
- history: hashHistory,
- defaultPreload: 'intent',
-})
-
-// 类型声明
-declare module '@tanstack/react-router' {
- interface Register {
- router: typeof router
- }
-}
diff --git a/src/services/authorize/__tests__/address-auth.test.ts b/src/services/authorize/__tests__/address-auth.test.ts
index cec79317..0971b34d 100644
--- a/src/services/authorize/__tests__/address-auth.test.ts
+++ b/src/services/authorize/__tests__/address-auth.test.ts
@@ -26,6 +26,7 @@ function createWallet(partial?: Partial): Wallet {
{ chain: 'bfmeta', address: 'c123', tokens: [] },
],
createdAt: Date.now(),
+ themeHue: 323,
tokens: [],
...partial,
}
diff --git a/src/services/authorize/__tests__/integration.test.tsx b/src/services/authorize/__tests__/integration.test.tsx
index 289423f3..e5f13e78 100644
--- a/src/services/authorize/__tests__/integration.test.tsx
+++ b/src/services/authorize/__tests__/integration.test.tsx
@@ -112,6 +112,7 @@ describe('authorize integration (mock-first)', () => {
name: 'Wallet 1',
address: '0x1234567890abcdef1234567890abcdef12345678',
chain: 'ethereum',
+ themeHue: 323,
chainAddresses: [{ chain: 'ethereum', address: '0x1234567890abcdef1234567890abcdef12345678', tokens: [] }],
})
})
@@ -143,6 +144,7 @@ describe('authorize integration (mock-first)', () => {
name: 'Wallet 1',
address: '0x1234567890abcdef1234567890abcdef12345678',
chain: 'ethereum',
+ themeHue: 323,
encryptedMnemonic,
chainAddresses: [{ chain: 'ethereum', address: '0x1234567890abcdef1234567890abcdef12345678', tokens: [] }],
})
@@ -192,6 +194,7 @@ describe('authorize integration (mock-first)', () => {
name: 'Wallet 1',
address: '0x1234567890abcdef1234567890abcdef12345678',
chain: 'ethereum',
+ themeHue: 323,
chainAddresses: [{ chain: 'ethereum', address: '0x1234567890abcdef1234567890abcdef12345678', tokens: [] }],
})
})
@@ -218,6 +221,7 @@ describe('authorize integration (mock-first)', () => {
name: 'Wallet 1',
address: '0x1234567890abcdef1234567890abcdef12345678',
chain: 'ethereum',
+ themeHue: 323,
chainAddresses: [{ chain: 'ethereum', address: '0x1234567890abcdef1234567890abcdef12345678', tokens: [] }],
})
})
diff --git a/src/services/migration/migration-service.test.ts b/src/services/migration/migration-service.test.ts
index 86f21600..93be9882 100644
--- a/src/services/migration/migration-service.test.ts
+++ b/src/services/migration/migration-service.test.ts
@@ -100,6 +100,7 @@ describe('migration-service', () => {
tokens: [],
},
],
+ themeHue: 200,
encryptedMnemonic: {
ciphertext: 'encrypted',
iv: 'iv',
diff --git a/src/services/migration/mpay-transformer.ts b/src/services/migration/mpay-transformer.ts
index 8e9d86ae..f69c6f5b 100644
--- a/src/services/migration/mpay-transformer.ts
+++ b/src/services/migration/mpay-transformer.ts
@@ -16,6 +16,16 @@ import type {
import type { Contact } from '@/stores/address-book'
import { decryptMpayData } from './mpay-crypto'
+function deriveThemeHue(secret: string): number {
+ let hash = 0
+ for (let i = 0; i < secret.length; i++) {
+ const char = secret.charCodeAt(i)
+ hash = ((hash << 5) - hash) + char
+ hash = hash & hash
+ }
+ return Math.abs(hash) % 360
+}
+
/**
* mpay 链名到 KeyApp ChainType 的映射
*/
@@ -224,6 +234,7 @@ export async function transformMpayData(
chainAddresses,
encryptedMnemonic,
createdAt: mpayWallet.createTimestamp,
+ themeHue: deriveThemeHue(mpayWallet.mainWalletId),
tokens: [], // deprecated, use chainAddresses[].tokens
}
diff --git a/src/services/wallet-storage/types.ts b/src/services/wallet-storage/types.ts
index fa3d402f..156c0f02 100644
--- a/src/services/wallet-storage/types.ts
+++ b/src/services/wallet-storage/types.ts
@@ -43,6 +43,8 @@ export interface WalletInfo {
encryptedWalletLock?: EncryptedData | undefined
/** 是否已备份 */
isBackedUp: boolean
+ /** 主题色 hue (0-360) */
+ themeHue?: number | undefined
/** 创建时间 */
createdAt: number
/** 更新时间 */
diff --git a/src/stackflow/activities/HistoryActivity.tsx b/src/stackflow/activities/HistoryActivity.tsx
index 31eee778..500f54cc 100644
--- a/src/stackflow/activities/HistoryActivity.tsx
+++ b/src/stackflow/activities/HistoryActivity.tsx
@@ -1,11 +1,19 @@
import type { ActivityComponentType } from "@stackflow/react";
+import { useActivityParams } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { TransactionHistoryPage } from "@/pages/history";
+import type { ChainType } from "@/stores";
+
+interface HistoryActivityParams {
+ chain?: ChainType | "all";
+}
export const HistoryActivity: ActivityComponentType = () => {
+ const params = useActivityParams();
+
return (
-
-
+
+
);
};
diff --git a/src/stackflow/activities/MainTabsActivity.tsx b/src/stackflow/activities/MainTabsActivity.tsx
index 08274dbf..111f134a 100644
--- a/src/stackflow/activities/MainTabsActivity.tsx
+++ b/src/stackflow/activities/MainTabsActivity.tsx
@@ -2,9 +2,7 @@ import { useState } from "react";
import type { ActivityComponentType } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { TabBar, type TabId } from "../components/TabBar";
-import { HomeTab } from "./tabs/HomeTab";
import { WalletTab } from "./tabs/WalletTab";
-import { TransferTab } from "./tabs/TransferTab";
import { SettingsTab } from "./tabs/SettingsTab";
type MainTabsParams = {
@@ -12,16 +10,15 @@ type MainTabsParams = {
};
export const MainTabsActivity: ActivityComponentType = ({ params }) => {
- const [activeTab, setActiveTab] = useState(params.tab || "home");
+ // 默认显示钱包页（合并了原来的首页）
+ const [activeTab, setActiveTab] = useState(params.tab || "wallet");
return (
{/* Content area */}
- {activeTab === "home" && }
{activeTab === "wallet" && }
- {activeTab === "transfer" && }
{activeTab === "settings" && }
diff --git a/src/stackflow/activities/SettingsStorageActivity.tsx b/src/stackflow/activities/SettingsStorageActivity.tsx
new file mode 100644
index 00000000..5b63b204
--- /dev/null
+++ b/src/stackflow/activities/SettingsStorageActivity.tsx
@@ -0,0 +1,11 @@
+import type { ActivityComponentType } from "@stackflow/react";
+import { AppScreen } from "@stackflow/plugin-basic-ui";
+import { SettingsStoragePage } from "@/pages/settings/storage";
+
+export const SettingsStorageActivity: ActivityComponentType = () => {
+ return (
+
+
+
+ );
+};
diff --git a/src/stackflow/activities/WalletConfigActivity.tsx b/src/stackflow/activities/WalletConfigActivity.tsx
new file mode 100644
index 00000000..d657935d
--- /dev/null
+++ b/src/stackflow/activities/WalletConfigActivity.tsx
@@ -0,0 +1,73 @@
+import type { ActivityComponentType } from "@stackflow/react";
+import { AppScreen } from "@stackflow/plugin-basic-ui";
+import { useTranslation } from 'react-i18next';
+import { ActivityParamsProvider, useActivityParams, useNavigation } from "../hooks";
+import { PageHeader } from '@/components/layout/page-header';
+import { WalletConfig } from '@/components/wallet/wallet-config';
+import { Alert } from '@/components/common/alert';
+import { useWallets } from '@/stores';
+
+type WalletConfigParams = {
+ walletId: string;
+ walletName?: string;
+ mode?: 'default' | 'edit-only';
+};
+
+function WalletConfigContent() {
+ const { t } = useTranslation('wallet');
+ const { walletId, mode = 'default' } = useActivityParams
();
+ const { goBack, navigate } = useNavigation();
+
+ const wallets = useWallets();
+ const wallet = wallets.find((w) => w.id === walletId);
+
+ const handleEditOnlyComplete = () => {
+ navigate({ to: '/', replace: true });
+ };
+
+ if (!wallet) {
+ return (
+
+
+
+
{t('detail.notFound')}
+
+
+
+
+
+
+
+ {mode === 'default' && (
+
+
{t('detail.securityWarning')}
+
+ )}
+
+
+ {/* Handle */}
+
+
+ {/* Content */}
+
+ {/* Warning Icon */}
+
+
+ {/* Title */}
+
+
{t("settings:clearData.title")}
+
+ {t("settings:clearData.warning")}
+
+
+
+ {/* Warning List */}
+
+
+ - • {t("settings:clearData.item1")}
+ - • {t("settings:clearData.item2")}
+ - • {t("settings:clearData.item3")}
+
+
+
+ {/* Buttons */}
+
+
+
+
+
+
+ {/* Safe area */}
+
+
+ {/* Handle */}
+
+
+ {/* Title */}
+
+
{t("common:a11y.tabWallet")}
+
+
+ {/* Wallet List */}
+
+ {wallets.map((wallet) => {
+ const isActive = wallet.id === currentWalletId;
+ const address = wallet.chainAddresses[0]?.address;
+ const displayAddress = address
+ ? `${address.slice(0, 6)}...${address.slice(-4)}`
+ : "---";
+ const themeHue = getWalletTheme(wallet.id);
+ const themeColor = WALLET_THEME_COLORS.find(c => c.hue === themeHue) ?? WALLET_THEME_COLORS[0];
+
+ return (
+
+ );
+ })}
+
+
+ {/* Add wallet button */}
+
+
+
+
+ {/* Safe area */}
+
+
-
-
- );
- }
-
- if (!hasWallet || !currentWallet) {
- return ;
- }
-
- return (
-
- {/* Wallet Card */}
-
- {/* Chain Selector */}
-
-
- {/* Wallet Name and Address */}
-
-
{currentWallet.name}
-
-
- {chainAddress?.address ? truncateAddress(chainAddress.address) : "---"}
-
-
-
-
-
- {/* Action Buttons */}
-
- push("SendActivity", {})}
- >
-
- {t('home:wallet.send')}
-
- push("ReceiveActivity", {})}
- >
-
- {t('home:wallet.receive')}
-
-
-
-
- {/* Asset List */}
-
-
{t('home:wallet.assets')}
- ({
- symbol: tk.symbol,
- name: tk.name,
- chain: selectedChain,
- balance: tk.balance,
- decimals: tk.decimals,
- fiatValue: tk.fiatValue ? String(tk.fiatValue) : undefined,
- change24h: tk.change24h,
- icon: tk.icon,
- }))}
- refreshing={isRefreshing}
- onTokenClick={(token) => {
- console.log("Token clicked:", token.symbol);
- }}
- emptyTitle={t('home:wallet.noAssets')}
- emptyDescription={t('home:wallet.noAssetsOnChain', { chain: selectedChainName })}
- />
-
-
- {/* Scanner FAB */}
-
-
-
-
-
-
-
{t('welcome.title')}
-
{t('welcome.subtitle')}
-
-
- push("WalletCreateActivity", {})}
- >
- {t('welcome.createWallet')}
-
-
-
-
-
-
-
-
-
- {t('transaction:transfer.quickTransfer')}
- {t('transaction:transfer.quickTransferDesc')}
-
-
- {/* Recent contacts */}
-
-
{t('transaction:transfer.recentContacts')}
-
- {recentContacts.length > 0 ? (
- recentContacts.map((contact) => (
-
- ))
- ) : (
-
{t('common:addressBook.noContacts')}
- )}
-
-
-
- {/* Transfer history */}
-
-
- {t('transaction:transfer.transferHistory')}
-
-
- {!currentWallet && (
- {t('transaction:history.noWallet')}
- )}
- {currentWallet && isLoading && (
- {t('common:loading')}
- )}
- {currentWallet && !isLoading && recentTransactions.length === 0 && (
- {t('transaction:history.emptyTitle')}
- )}
- {recentTransactions.map((tx) => (
- push("TransactionDetailActivity", { txId: tx.id })}
- />
- ))}
- {currentWallet && recentTransactions.length > 0 && (
-
- )}
-
-
-
-
+
+
+ );
+ }
+
+ if (!hasWallet || !currentWallet) {
+ return ;
+ }
+
return (
-
-
-
-
- {/* Wallet List */}
-
- {wallets.map((wallet) => {
- const isActive = wallet.id === currentWalletId;
- const address = wallet.chainAddresses[0]?.address;
- const displayAddress = address
- ? `${address.slice(0, 6)}...${address.slice(-4)}`
- : "---";
-
- return (
-
handleSelectWallet(wallet.id)}
- onKeyDown={(e) => e.key === 'Enter' && handleSelectWallet(wallet.id)}
- className={cn(
- "w-full flex items-center gap-3 rounded-xl p-4 text-left transition-all cursor-pointer",
- "active:scale-[0.98]",
- isActive
- ? "bg-primary/10 ring-2 ring-primary"
- : "bg-card hover:bg-muted/80"
- )}
- >
- {/* Icon */}
-
-
-
-
- {/* Info */}
-
-
- {wallet.name}
- {isActive && (
-
- )}
-
-
- {displayAddress}
-
-
-
- {/* Settings button */}
+
+ {/* 钱包卡片轮播 */}
+
+
+
+ {/* 快捷操作按钮 - 颜色跟随主题 */}
+
+
+
+
+
+
+
+ {/* 内容区 Tab 切换 */}
+
+
+ {(tab) =>
+ tab === "assets" ? (
+
+ ({
+ symbol: token.symbol,
+ name: token.name,
+ chain: selectedChain,
+ balance: token.balance,
+ decimals: token.decimals,
+ fiatValue: token.fiatValue
+ ? String(token.fiatValue)
+ : undefined,
+ change24h: token.change24h,
+ icon: token.icon,
+ }))}
+ refreshing={isRefreshing}
+ onTokenClick={(token) => {
+ console.log("Token clicked:", token.symbol);
+ }}
+ emptyTitle={t("home:wallet.noAssets")}
+ emptyDescription={t("home:wallet.noAssetsOnChain", {
+ chain: selectedChainName,
+ })}
+ />
+
+ ) : (
+
+
- );
- })}
-
+ )
+ }
+
+
- {/* Empty state */}
- {wallets.length === 0 && (
-
-
-
-
-
{t('empty')}
-
{t('emptyHint')}
-
- )}
-
- {/* Add wallet button - fixed at bottom */}
-
-
-
+
+ );
+}
+
+function NoWalletView() {
+ const { push } = useFlow();
+ const { t } = useTranslation("home");
+
+ return (
+
+
+
+
+
+
{t("welcome.title")}
+
{t("welcome.subtitle")}
+
+
+ push("WalletCreateActivity", {})}
+ >
+ {t("welcome.createWallet")}
+
+
);
diff --git a/src/stackflow/activities/tabs/index.ts b/src/stackflow/activities/tabs/index.ts
index f9edf67b..3138e95a 100644
--- a/src/stackflow/activities/tabs/index.ts
+++ b/src/stackflow/activities/tabs/index.ts
@@ -1,4 +1,2 @@
-export { HomeTab } from "./HomeTab";
export { WalletTab } from "./WalletTab";
-export { TransferTab } from "./TransferTab";
export { SettingsTab } from "./SettingsTab";
diff --git a/src/stackflow/components/TabBar.tsx b/src/stackflow/components/TabBar.tsx
index 250bd8d2..32165236 100644
--- a/src/stackflow/components/TabBar.tsx
+++ b/src/stackflow/components/TabBar.tsx
@@ -1,15 +1,14 @@
import { cn } from "@/lib/utils";
import { useMemo } from "react";
import {
- IconHome,
IconWallet,
- IconArrowsExchange,
IconSettings,
type Icon,
} from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
-export type TabId = "home" | "wallet" | "transfer" | "settings";
+// 简化为2个tab：钱包（首页）和设置
+export type TabId = "wallet" | "settings";
interface Tab {
id: TabId;
@@ -26,9 +25,7 @@ export function TabBar({ activeTab, onTabChange }: TabBarProps) {
const { t } = useTranslation('common');
const tabConfigs: Tab[] = useMemo(() => [
- { id: "home", label: t('a11y.tabHome'), icon: IconHome },
{ id: "wallet", label: t('a11y.tabWallet'), icon: IconWallet },
- { id: "transfer", label: t('a11y.tabTransfer'), icon: IconArrowsExchange },
{ id: "settings", label: t('a11y.tabSettings'), icon: IconSettings },
], [t]);
@@ -63,4 +60,4 @@ export function TabBar({ activeTab, onTabChange }: TabBarProps) {
);
}
-export const tabIds: TabId[] = ["home", "wallet", "transfer", "settings"];
+export const tabIds: TabId[] = ["wallet", "settings"];
diff --git a/src/stackflow/hooks/use-navigation.ts b/src/stackflow/hooks/use-navigation.ts
index f1bdd347..fb99fca6 100644
--- a/src/stackflow/hooks/use-navigation.ts
+++ b/src/stackflow/hooks/use-navigation.ts
@@ -15,6 +15,7 @@ const routeToActivityMap: Record
= {
"/settings/mnemonic": "SettingsMnemonicActivity",
"/settings/wallet-lock": "SettingsWalletLockActivity",
"/settings/wallet-chains": "SettingsWalletChainsActivity",
+ "/settings/storage": "SettingsStorageActivity",
"/history": "HistoryActivity",
"/scanner": "ScannerActivity",
"/onboarding/recover": "OnboardingRecoverActivity",
@@ -32,7 +33,7 @@ const dynamicRoutePatterns: Array<{
}> = [
{
pattern: /^\/wallet\/([^/]+)$/,
- activity: "WalletDetailActivity",
+ activity: "WalletConfigActivity",
paramExtractor: (match) => ({ walletId: match[1] ?? "" }),
},
{
diff --git a/src/stackflow/stackflow.ts b/src/stackflow/stackflow.ts
index 503ed688..e6d50763 100644
--- a/src/stackflow/stackflow.ts
+++ b/src/stackflow/stackflow.ts
@@ -5,7 +5,7 @@ import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { MainTabsActivity } from "./activities/MainTabsActivity";
import { WalletListActivity } from "./activities/WalletListActivity";
-import { WalletDetailActivity } from "./activities/WalletDetailActivity";
+import { WalletConfigActivity } from "./activities/WalletConfigActivity";
import { WalletCreateActivity } from "./activities/WalletCreateActivity";
import { SendActivity } from "./activities/SendActivity";
@@ -28,7 +28,8 @@ import { NotificationsActivity } from "./activities/NotificationsActivity";
import { StakingActivity } from "./activities/StakingActivity";
import { WelcomeActivity } from "./activities/WelcomeActivity";
import { SettingsWalletChainsActivity } from "./activities/SettingsWalletChainsActivity";
-import { ChainSelectorJob, WalletRenameJob, WalletDeleteJob, WalletLockConfirmJob, TwoStepSecretConfirmJob, SetTwoStepSecretJob, MnemonicOptionsJob, ContactEditJob, ContactPickerJob, WalletAddJob, SecurityWarningJob, TransferConfirmJob, TransferWalletLockJob, FeeEditJob, ScannerJob, ContactAddConfirmJob, ContactShareJob } from "./activities/sheets";
+import { SettingsStorageActivity } from "./activities/SettingsStorageActivity";
+import { ChainSelectorJob, WalletRenameJob, WalletDeleteJob, WalletLockConfirmJob, TwoStepSecretConfirmJob, SetTwoStepSecretJob, MnemonicOptionsJob, ContactEditJob, ContactPickerJob, WalletAddJob, WalletListJob, SecurityWarningJob, TransferConfirmJob, TransferWalletLockJob, FeeEditJob, ScannerJob, ContactAddConfirmJob, ContactShareJob, ClearDataConfirmJob } from "./activities/sheets";
export const { Stack, useFlow, useStepFlow, activities } = stackflow({
transitionDuration: 350,
@@ -41,7 +42,7 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
routes: {
MainTabsActivity: "/",
WalletListActivity: "/wallet/list",
- WalletDetailActivity: "/wallet/:walletId",
+ WalletConfigActivity: "/wallet/:walletId",
WalletCreateActivity: "/wallet/create",
SendActivity: "/send",
ReceiveActivity: "/receive",
@@ -52,6 +53,7 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
SettingsMnemonicActivity: "/settings/mnemonic",
SettingsWalletLockActivity: "/settings/wallet-lock",
SettingsWalletChainsActivity: "/settings/wallet-chains",
+ SettingsStorageActivity: "/settings/storage",
HistoryActivity: "/history",
TransactionDetailActivity: "/transaction/:txId",
ScannerActivity: "/scanner",
@@ -73,6 +75,7 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
ContactEditJob: "/job/contact-edit",
ContactPickerJob: "/job/contact-picker",
WalletAddJob: "/job/wallet-add",
+ WalletListJob: "/job/wallet-list",
SecurityWarningJob: "/job/security-warning",
TransferConfirmJob: "/job/transfer-confirm",
TransferWalletLockJob: "/job/transfer-wallet-lock",
@@ -80,6 +83,7 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
ScannerJob: "/job/scanner",
ContactAddConfirmJob: "/job/contact-add-confirm",
ContactShareJob: "/job/contact-share",
+ ClearDataConfirmJob: "/job/clear-data-confirm",
},
fallbackActivity: () => "MainTabsActivity",
useHash: true,
@@ -88,7 +92,7 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
activities: {
MainTabsActivity,
WalletListActivity,
- WalletDetailActivity,
+ WalletConfigActivity,
WalletCreateActivity,
SendActivity,
ReceiveActivity,
@@ -99,6 +103,7 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
SettingsMnemonicActivity,
SettingsWalletLockActivity,
SettingsWalletChainsActivity,
+ SettingsStorageActivity,
HistoryActivity,
TransactionDetailActivity,
ScannerActivity,
@@ -120,6 +125,7 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
ContactEditJob,
ContactPickerJob,
WalletAddJob,
+ WalletListJob,
SecurityWarningJob,
TransferConfirmJob,
TransferWalletLockJob,
@@ -127,6 +133,7 @@ export const { Stack, useFlow, useStepFlow, activities } = stackflow({
ScannerJob,
ContactAddConfirmJob,
ContactShareJob,
+ ClearDataConfirmJob,
},
// Note: Don't set initialActivity when using historySyncPlugin
// The plugin will determine the initial activity based on the URL
diff --git a/src/stores/hooks.ts b/src/stores/hooks.ts
index b0f33590..092fd271 100644
--- a/src/stores/hooks.ts
+++ b/src/stores/hooks.ts
@@ -21,6 +21,11 @@ export function useSelectedChain() {
return useStore(walletStore, (state) => state.selectedChain)
}
+/** 获取各钱包的链偏好设置 */
+export function useChainPreferences() {
+ return useStore(walletStore, (state) => state.chainPreferences)
+}
+
/** 获取当前链的地址信息 */
export function useCurrentChainAddress() {
return useStore(walletStore, (state) => walletSelectors.getCurrentChainAddress(state))
diff --git a/src/stores/index.ts b/src/stores/index.ts
index a46eb676..86e5e1bd 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -41,6 +41,7 @@ export {
useWallets,
useCurrentWallet,
useSelectedChain,
+ useChainPreferences,
useCurrentChainAddress,
useCurrentChainTokens,
useAvailableChains,
diff --git a/src/stores/wallet.ts b/src/stores/wallet.ts
index a0c3748d..d25ecc09 100644
--- a/src/stores/wallet.ts
+++ b/src/stores/wallet.ts
@@ -7,6 +7,19 @@ import {
type ChainAddressInfo,
} from '@/services/wallet-storage'
+/**
+ * 基于助记词/密钥稳定派生主题色 hue
+ */
+function deriveThemeHue(secret: string): number {
+ let hash = 0
+ for (let i = 0; i < secret.length; i++) {
+ const char = secret.charCodeAt(i)
+ hash = ((hash << 5) - hash) + char
+ hash = hash & hash
+ }
+ return Math.abs(hash) % 360
+}
+
// 类型定义
// 外部链 (BIP44)
export type ExternalChainType = 'ethereum' | 'tron' | 'bitcoin' | 'binance'
@@ -59,6 +72,8 @@ export interface Wallet {
/** 加密后的钱包锁（使用助记词派生密钥加密） */
encryptedWalletLock?: EncryptedData
createdAt: number
+ /** 主题色 hue (0-360) */
+ themeHue: number
/** @deprecated 使用 chainAddresses[].tokens */
tokens: Token[]
}
@@ -148,6 +163,7 @@ function walletInfoToWallet(info: WalletInfo, chainAddresses: ChainAddressInfo[]
return token
}),
})),
+ themeHue: info.themeHue ?? 0,
tokens: [], // deprecated
}
@@ -224,7 +240,8 @@ export const walletActions = {
createWallet: async (
wallet: Omit & { chainAddresses?: ChainAddress[] },
mnemonic: string,
- password: string
+ password: string,
+ themeHue?: number
): Promise => {
const walletId = crypto.randomUUID()
const now = Date.now()
@@ -237,6 +254,7 @@ export const walletActions = {
primaryChain: wallet.chain,
primaryAddress: wallet.address,
isBackedUp: false,
+ themeHue: themeHue ?? deriveThemeHue(mnemonic),
createdAt: now,
updatedAt: now,
}
@@ -280,6 +298,7 @@ export const walletActions = {
chain: wallet.chain,
createdAt: now,
chainAddresses,
+ themeHue: themeHue ?? deriveThemeHue(mnemonic),
tokens: [],
...(savedWalletInfo.encryptedMnemonic ? { encryptedMnemonic: savedWalletInfo.encryptedMnemonic } : {}),
}
@@ -392,6 +411,18 @@ export const walletActions = {
}))
},
+ /** 更新钱包主题色 */
+ updateWalletThemeHue: async (walletId: string, themeHue: number): Promise => {
+ await walletStorageService.updateWallet(walletId, { themeHue })
+
+ walletStore.setState((state) => ({
+ ...state,
+ wallets: state.wallets.map((w) =>
+ w.id === walletId ? { ...w, themeHue } : w
+ ),
+ }))
+ },
+
/** 更新链地址资产（用于余额更新） */
updateChainAssets: async (
walletId: string,
@@ -664,6 +695,7 @@ export const walletActions = {
chainAddresses: wallet.chainAddresses ?? [
{ chain: wallet.chain, address: wallet.address, tokens: [] }
],
+ themeHue: wallet.themeHue,
tokens: [],
...(wallet.encryptedMnemonic ? { encryptedMnemonic: wallet.encryptedMnemonic } : {}),
}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 1c045b50..642fd6f0 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -40,14 +40,51 @@
/* shadcnui */
@custom-variant dark (&:is(.dark *));
+/* 注册 CSS 自定义属性类型 - 支持动画和继承 */
+@property --primary-hue {
+ syntax: '';
+ inherits: true;
+ initial-value: 323;
+}
+
+@property --primary-saturation {
+ syntax: '';
+ inherits: true;
+ initial-value: 0.26;
+}
+
+@property --primary-lightness {
+ syntax: '';
+ inherits: true;
+ initial-value: 0.59;
+}
+
+@property --primary {
+ syntax: '';
+ inherits: true;
+ initial-value: oklch(0.59 0.26 323);
+}
+
+@property --primary-foreground {
+ syntax: '';
+ inherits: true;
+ initial-value: oklch(1 0 0);
+}
+
:root {
+ /* 动态主题色 - 可被钱包主题覆盖 */
+ --primary-hue: 323;
+ --primary-saturation: 0.26;
+ --primary-lightness: 0.59;
+
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.141 0.005 285.823);
- --primary: oklch(0.59 0.26 323);
+ /* primary 使用动态 hue */
+ --primary: oklch(var(--primary-lightness) var(--primary-saturation) var(--primary-hue));
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
@@ -59,16 +96,18 @@
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.705 0.015 286.067);
- --chart-1: oklch(0.83 0.13 321);
- --chart-2: oklch(0.75 0.21 322);
- --chart-3: oklch(0.67 0.26 322);
- --chart-4: oklch(0.59 0.26 323);
- --chart-5: oklch(0.52 0.23 324);
+ /* chart 颜色使用动态 hue，通过偏移产生和谐色 */
+ --chart-1: oklch(0.83 0.13 calc(var(--primary-hue) - 2));
+ --chart-2: oklch(0.75 0.21 calc(var(--primary-hue) - 1));
+ --chart-3: oklch(0.67 0.26 calc(var(--primary-hue) - 1));
+ --chart-4: oklch(0.59 0.26 var(--primary-hue));
+ --chart-5: oklch(0.52 0.23 calc(var(--primary-hue) + 1));
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.141 0.005 285.823);
- --sidebar-primary: oklch(0.59 0.26 323);
- --sidebar-primary-foreground: oklch(0.98 0.02 320);
+ /* sidebar-primary 使用动态 hue */
+ --sidebar-primary: oklch(var(--primary-lightness) var(--primary-saturation) var(--primary-hue));
+ --sidebar-primary-foreground: oklch(0.98 0.02 calc(var(--primary-hue) - 3));
--sidebar-accent: oklch(0.967 0.001 286.375);
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32);
@@ -76,13 +115,17 @@
}
.dark {
+ /* dark 模式下调整亮度 */
+ --primary-lightness: 0.67;
+
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.21 0.006 285.885);
--popover-foreground: oklch(0.985 0 0);
- --primary: oklch(0.67 0.26 322);
+ /* primary 继承动态 hue */
+ --primary: oklch(var(--primary-lightness) var(--primary-saturation) var(--primary-hue));
--primary-foreground: oklch(0.141 0.005 285.823);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
@@ -94,15 +137,17 @@
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.552 0.016 285.938);
- --chart-1: oklch(0.83 0.13 321);
- --chart-2: oklch(0.75 0.21 322);
- --chart-3: oklch(0.67 0.26 322);
- --chart-4: oklch(0.59 0.26 323);
- --chart-5: oklch(0.52 0.23 324);
+ /* chart 颜色继承动态 hue */
+ --chart-1: oklch(0.83 0.13 calc(var(--primary-hue) - 2));
+ --chart-2: oklch(0.75 0.21 calc(var(--primary-hue) - 1));
+ --chart-3: oklch(0.67 0.26 calc(var(--primary-hue) - 1));
+ --chart-4: oklch(0.59 0.26 var(--primary-hue));
+ --chart-5: oklch(0.52 0.23 calc(var(--primary-hue) + 1));
--sidebar: oklch(0.21 0.006 285.885);
--sidebar-foreground: oklch(0.985 0 0);
- --sidebar-primary: oklch(0.75 0.21 322);
- --sidebar-primary-foreground: oklch(0.98 0.02 320);
+ /* sidebar-primary 继承动态 hue */
+ --sidebar-primary: oklch(0.75 0.21 var(--primary-hue));
+ --sidebar-primary-foreground: oklch(0.98 0.02 calc(var(--primary-hue) - 3));
--sidebar-accent: oklch(0.274 0.006 286.033);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
@@ -212,6 +257,7 @@
/* 动画 */
--animate-slide-in-bottom: slide-in-bottom 0.3s ease-out;
--animate-fade-in: fade-in 0.2s ease-out;
+ --animate-rainbow-flow: rainbow-flow 3s linear infinite;
}
/* 自定义动画 */
@@ -233,6 +279,15 @@
}
}
+@keyframes rainbow-flow {
+ 0% {
+ background-position: 0% 50%;
+ }
+ 100% {
+ background-position: 200% 50%;
+ }
+}
+
@keyframes marquee {
0% {
transform: translateX(0);
@@ -333,3 +388,17 @@
@utility animate-scan {
animation: scan 2s ease-in-out infinite;
}
+
+/* 禁用长按和右键菜单（移动端 App 体验） */
+html, body {
+ -webkit-touch-callout: none; /* iOS 禁用长按弹出菜单 */
+ -webkit-user-select: none; /* 禁用文本选择 */
+ user-select: none;
+ -webkit-tap-highlight-color: transparent; /* 禁用点击高亮 */
+}
+
+/* 允许输入框选择文本 */
+input, textarea, [contenteditable="true"] {
+ -webkit-user-select: text;
+ user-select: text;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 69109c09..65c2b1d5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -78,6 +78,10 @@ export default defineConfig({
// 确保资源路径使用相对路径
assetsDir: 'assets',
rollupOptions: {
+ input: {
+ main: resolve(__dirname, 'index.html'),
+ clear: resolve(__dirname, 'clear.html'),
+ },
output: {
// 使用 hash 命名避免缓存问题
entryFileNames: 'assets/[name]-[hash].js',