1- import type { ActivityComponentType } from "@stackflow/react" ;
2- import { BottomSheet } from "@/components/layout/bottom-sheet" ;
3- import { useTranslation } from "react-i18next" ;
4- import { IconPlus , IconCircleCheckFilled } from "@tabler/icons-react" ;
5- import { cn } from "@/lib/utils" ;
6- import { useFlow } from "../../stackflow" ;
7- import { useWallets , useCurrentWallet , walletActions } from "@/stores" ;
8- import { useWalletTheme } from "@/hooks/useWalletTheme" ;
9- import { useChainIconUrls } from "@/hooks/useChainIconUrls" ;
10- import { WalletMiniCard } from "@/components/wallet/wallet-mini-card" ;
1+ import { useMemo } from 'react' ;
2+ import type { ActivityComponentType } from '@stackflow/react' ;
3+ import { BottomSheet } from '@/components/layout/bottom-sheet' ;
4+ import { useTranslation } from 'react-i18next' ;
5+ import { IconPlus , IconCircleCheckFilled } from '@tabler/icons-react' ;
6+ import { cn } from '@/lib/utils' ;
7+ import { useFlow } from '../../stackflow' ;
8+ import { useWallets , useCurrentWallet , useChainPreferences , useChainConfigs , walletActions } from '@/stores' ;
9+ import { useWalletTheme } from '@/hooks/useWalletTheme' ;
10+ import { useChainIconUrls } from '@/hooks/useChainIconUrls' ;
11+ import { WalletMiniCard } from '@/components/wallet/wallet-mini-card' ;
1112
1213export const WalletListJob : ActivityComponentType = ( ) => {
13- const { t } = useTranslation ( [ " wallet" , " common" ] ) ;
14+ const { t } = useTranslation ( [ ' wallet' , ' common' ] ) ;
1415 const { pop, push } = useFlow ( ) ;
1516 const wallets = useWallets ( ) ;
1617 const currentWallet = useCurrentWallet ( ) ;
18+ const chainPreferences = useChainPreferences ( ) ;
19+ const chainConfigs = useChainConfigs ( ) ;
1720 const currentWalletId = currentWallet ?. id ;
1821 const { getWalletTheme } = useWalletTheme ( ) ;
1922 const chainIconUrls = useChainIconUrls ( ) ;
23+ const chainNameMap = useMemo ( ( ) => {
24+ return Object . fromEntries ( chainConfigs . map ( ( config ) => [ config . id , config . name ] ) ) ;
25+ } , [ chainConfigs ] ) ;
2026
2127 const handleSelectWallet = ( walletId : string ) => {
2228 walletActions . setCurrentWallet ( walletId ) ;
@@ -25,7 +31,7 @@ export const WalletListJob: ActivityComponentType = () => {
2531
2632 const handleAddWallet = ( ) => {
2733 pop ( ) ;
28- push ( " WalletAddJob" , { } ) ;
34+ push ( ' WalletAddJob' , { } ) ;
2935 } ;
3036 const handleCancel = ( ) => {
3137 pop ( ) ;
@@ -36,71 +42,68 @@ export const WalletListJob: ActivityComponentType = () => {
3642 < div className = "bg-background rounded-t-2xl" >
3743 { /* Handle */ }
3844 < div className = "flex justify-center py-3" >
39- < div className = "h-1 w-10 rounded-full bg-muted " />
45+ < div className = "bg-muted h-1 w-10 rounded-full" />
4046 </ div >
4147
4248 { /* Title */ }
43- < div className = "border-b border-border px-4 pb-4" >
44- < h2 className = "text-center text-lg font-semibold" > { t ( " common:a11y.tabWallet" ) } </ h2 >
49+ < div className = "border-border border-b px-4 pb-4" >
50+ < h2 className = "text-center text-lg font-semibold" > { t ( ' common:a11y.tabWallet' ) } </ h2 >
4551 </ div >
4652
4753 { /* Wallet List */ }
4854 < div className = "max-h-[50vh] space-y-2 overflow-y-auto p-4" >
4955 { wallets . map ( ( wallet ) => {
5056 const isActive = wallet . id === currentWalletId ;
51- const address = wallet . chainAddresses [ 0 ] ?. address ;
57+ const preferredChain = chainPreferences [ wallet . id ] ?? wallet . chain ;
58+ const resolvedChain = wallet . chainAddresses . some ( ( ca ) => ca . chain === preferredChain )
59+ ? preferredChain
60+ : ( wallet . chainAddresses [ 0 ] ?. chain ?? wallet . chain ) ;
61+ const chainAddress = wallet . chainAddresses . find ( ( ca ) => ca . chain === resolvedChain ) ;
62+ const address = chainAddress ?. address ?? wallet . address ;
63+ const chainName =
64+ chainNameMap [ resolvedChain ] ?? t ( `common:chains.${ resolvedChain } ` , { defaultValue : resolvedChain } ) ;
5265 const displayAddress = address
53- ? `${ address . slice ( 0 , 6 ) } ...${ address . slice ( - 4 ) } `
54- : " ---" ;
66+ ? `${ chainName } · ${ address . slice ( 0 , 6 ) } ...${ address . slice ( - 4 ) } `
67+ : ` ${ chainName } · ---` ;
5568 const themeHue = getWalletTheme ( wallet . id ) ;
5669
5770 return (
5871 < button
5972 key = { wallet . id }
6073 onClick = { ( ) => handleSelectWallet ( wallet . id ) }
6174 className = { cn (
62- "flex w-full items-center gap-3 rounded-xl p-4 transition-all" ,
63- "active:scale-[0.98]" ,
64- isActive
65- ? "bg-primary/10 ring-2 ring-primary"
66- : "bg-muted/50 hover:bg-muted"
75+ 'flex w-full items-center gap-3 rounded-xl p-4 transition-all' ,
76+ 'active:scale-[0.98]' ,
77+ isActive ? 'bg-primary/10 ring-primary ring-2' : 'bg-muted/50 hover:bg-muted' ,
6778 ) }
6879 >
6980 { /* 钱包小卡片图标 */ }
70- < WalletMiniCard
71- themeHue = { themeHue }
72- size = "md"
73- watermarkIconUrl = { chainIconUrls [ wallet . chain ] }
74- />
81+ < WalletMiniCard themeHue = { themeHue } size = "md" watermarkIconUrl = { chainIconUrls [ resolvedChain ] } />
7582
7683 { /* 钱包信息 */ }
7784 < div className = "min-w-0 flex-1 text-left" >
7885 < div className = "flex items-center gap-2" >
7986 < span className = "truncate font-medium" > { wallet . name } </ span >
80- { isActive && (
81- < IconCircleCheckFilled className = "size-4 shrink-0 text-primary" />
82- ) }
87+ { isActive && < IconCircleCheckFilled className = "text-primary size-4 shrink-0" /> }
8388 </ div >
84- < p className = "truncate font-mono text-xs text-muted-foreground" >
85- { displayAddress }
86- </ p >
89+ < p className = "text-muted-foreground truncate font-mono text-xs" > { displayAddress } </ p >
8790 </ div >
8891 </ button >
8992 ) ;
9093 } ) }
9194 </ div >
9295
9396 { /* Add wallet button */ }
94- < div className = "border-t border-border p-4" >
97+ < div className = "border-border border-t p-4" >
9598 < button
9699 onClick = { handleAddWallet }
97100 className = { cn (
98- " flex w-full items-center justify-center gap-2 rounded-xl p-4" ,
99- " bg-muted/50 hover:bg-muted active:bg-muted/80 transition-colors"
101+ ' flex w-full items-center justify-center gap-2 rounded-xl p-4' ,
102+ ' bg-muted/50 hover:bg-muted active:bg-muted/80 transition-colors' ,
100103 ) }
101104 >
102105 < IconPlus className = "size-5" />
103- < span className = "font-medium" > { t ( " wallet:add" ) } </ span >
106+ < span className = "font-medium" > { t ( ' wallet:add' ) } </ span >
104107 </ button >
105108 </ div >
106109
0 commit comments