Skip to content

Commit 242ec6d

Browse files
RigidityRigidity
authored
Merge pull request #710 from dkackman/wallet-changer
switch wallet directly from logout menu
2 parents 55ebd59 + a787b63 commit 242ec6d

File tree

10 files changed

+685
-287
lines changed

10 files changed

+685
-287
lines changed

‎src/components/Header.tsx‎

Lines changed: 7 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import { useInsets } from '@/contexts/SafeAreaContext';
22
import { useWallet } from '@/contexts/WalletContext';
3-
import iconDark from '@/icon-dark.png';
4-
import iconLight from '@/icon-light.png';
53
import { t } from '@lingui/core/macro';
64
import { Trans } from '@lingui/react/macro';
75
import { platform } from '@tauri-apps/plugin-os';
86
import { AnimatePresence, motion } from 'framer-motion';
97
import { ChevronLeft, Menu } from 'lucide-react';
108
import { PropsWithChildren, ReactNode } from 'react';
11-
import { Link, useLocation, useNavigate } from 'react-router-dom';
9+
import { useLocation, useNavigate } from 'react-router-dom';
1210
import { useTheme } from 'theme-o-rama';
1311
import { BottomNav, TopNav } from './Nav';
1412
import { Button } from './ui/button';
1513
import { Sheet, SheetContent, SheetTrigger } from './ui/sheet';
14+
import { TooltipProvider } from './ui/tooltip';
15+
import { WalletSwitcher } from './WalletSwitcher';
1616

1717
const headerPaginationVariants = {
1818
enter: { opacity: 1, x: 0 },
@@ -115,33 +115,10 @@ export default function Header(
115115
: {}
116116
}
117117
>
118-
<div className='mt-4'>
119-
<Link
120-
to='/wallet'
121-
className='flex items-center gap-2 font-semibold font-heading'
122-
aria-label={t`Go to wallet`}
123-
>
124-
{wallet?.emoji ? (
125-
<span
126-
className='text-xl'
127-
role='img'
128-
aria-label='Wallet emoji'
129-
aria-hidden='true'
130-
>
131-
{wallet.emoji}
132-
</span>
133-
) : (
134-
<img
135-
src={
136-
currentTheme?.mostLike === 'light' ? iconDark : iconLight
137-
}
138-
className='h-6 w-6'
139-
alt={t`Wallet icon`}
140-
aria-hidden='true'
141-
/>
142-
)}
143-
<span className='text-lg'>{wallet?.name}</span>
144-
</Link>
118+
<div className='mt-4 mb-2'>
119+
<TooltipProvider>
120+
<WalletSwitcher wallet={wallet ?? undefined} />
121+
</TooltipProvider>
145122
</div>
146123
<TopNav />
147124
<div

‎src/components/Layout.tsx‎

Lines changed: 62 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,46 @@ import {
77
} from '@/components/ui/tooltip';
88
import { useInsets } from '@/contexts/SafeAreaContext';
99
import { useWallet } from '@/contexts/WalletContext';
10-
import iconDark from '@/icon-dark.png';
11-
import iconLight from '@/icon-light.png';
1210
import { t } from '@lingui/core/macro';
1311
import { PanelLeft, PanelLeftClose } from 'lucide-react';
1412
import { PropsWithChildren } from 'react';
15-
import { Link, useLocation } from 'react-router-dom';
13+
import { useLocation } from 'react-router-dom';
14+
import { Insets } from 'tauri-plugin-safe-area-insets';
1615
import { useTheme } from 'theme-o-rama';
1716
import { useLocalStorage } from 'usehooks-ts';
1817
import { BottomNav, TopNav } from './Nav';
18+
import { WalletSwitcher } from './WalletSwitcher';
19+
20+
function WalletTransitionWrapper({
21+
children,
22+
props,
23+
insets,
24+
}: PropsWithChildren<{ props: LayoutProps; insets: Insets }>) {
25+
const { isSwitching, wallet } = useWallet();
26+
27+
// Only show content if we have a wallet or we're not switching
28+
// This prevents old wallet data from showing during transition
29+
const shouldShow = wallet !== null || !isSwitching;
30+
31+
return (
32+
<div
33+
className={`transition-all duration-300 ${
34+
!shouldShow
35+
? 'opacity-0 blur-sm pointer-events-none'
36+
: 'opacity-100 blur-0'
37+
} flex flex-col h-screen overflow-hidden ${
38+
props.transparentBackground ? 'bg-transparent' : 'bg-background'
39+
}`}
40+
style={{
41+
paddingBottom: insets.bottom
42+
? `${insets.bottom}px`
43+
: 'env(safe-area-inset-bottom)',
44+
}}
45+
>
46+
{shouldShow ? children : null}
47+
</div>
48+
);
49+
}
1950

2051
const SIDEBAR_COLLAPSED_STORAGE_KEY = 'sage-wallet-sidebar-collapsed';
2152

@@ -34,58 +65,6 @@ export function FullLayout(props: LayoutProps) {
3465
false,
3566
);
3667

37-
const walletIcon = (
38-
<Link
39-
to='/wallet'
40-
className={`flex items-center gap-2 font-semibold font-heading ${!wallet ? 'opacity-50 pointer-events-none' : ''}`}
41-
>
42-
{wallet?.emoji ? (
43-
<span className='text-xl' role='img' aria-label='Wallet emoji'>
44-
{wallet.emoji}
45-
</span>
46-
) : (
47-
<img
48-
src={currentTheme?.mostLike === 'light' ? iconDark : iconLight}
49-
className='h-6 w-6'
50-
alt={t`Wallet icon`}
51-
/>
52-
)}
53-
<span
54-
className={`text-lg transition-opacity duration-300 ${
55-
isCollapsed ? 'opacity-0 hidden' : 'opacity-100'
56-
}`}
57-
>
58-
{wallet?.name ?? t`Wallet`}
59-
</span>
60-
</Link>
61-
);
62-
63-
const walletIconWithTooltip = isCollapsed ? (
64-
<Tooltip>
65-
<TooltipTrigger asChild>
66-
<Link
67-
to='/wallet'
68-
className={`flex items-center gap-2 font-semibold font-heading ${!wallet ? 'opacity-50 pointer-events-none' : ''}`}
69-
>
70-
{wallet?.emoji ? (
71-
<span className='text-xl' role='img' aria-label='Wallet emoji'>
72-
{wallet.emoji}
73-
</span>
74-
) : (
75-
<img
76-
src={currentTheme?.mostLike === 'light' ? iconDark : iconLight}
77-
className='h-6 w-6'
78-
alt={t`Wallet icon`}
79-
/>
80-
)}
81-
</Link>
82-
</TooltipTrigger>
83-
<TooltipContent side='right'>{wallet?.name ?? t`Wallet`}</TooltipContent>
84-
</Tooltip>
85-
) : (
86-
walletIcon
87-
);
88-
8968
return (
9069
<TooltipProvider>
9170
<div className='grid h-screen w-screen md:grid-cols-[auto_1fr]'>
@@ -107,61 +86,32 @@ export function FullLayout(props: LayoutProps) {
10786
aria-label={t`Sidebar navigation`}
10887
>
10988
<div className='bg-background flex h-full max-h-screen flex-col gap-2'>
110-
<div className='flex h-14 items-center pt-2 px-5 justify-between'>
111-
{isCollapsed && wallet?.emoji ? (
112-
// When collapsed and emoji exists, show only the emoji as a clickable button
113-
<Tooltip>
114-
<TooltipTrigger asChild>
115-
<button
116-
type='button'
117-
onClick={() => setIsCollapsed(!isCollapsed)}
118-
className='text-2xl hover:scale-110 transition-transform cursor-pointer'
119-
aria-label={t`Expand sidebar - ${wallet.name}`}
120-
aria-expanded={!isCollapsed}
121-
>
122-
<span role='img' aria-label={t`Wallet emoji`}>
123-
{wallet.emoji}
124-
</span>
125-
</button>
126-
</TooltipTrigger>
127-
<TooltipContent side='right' role='tooltip'>
128-
{t`Expand sidebar - ${wallet.name}`}
129-
</TooltipContent>
130-
</Tooltip>
131-
) : (
132-
<>
133-
{!isCollapsed && walletIconWithTooltip}
134-
<Tooltip>
135-
<TooltipTrigger asChild>
136-
<button
137-
type='button'
138-
onClick={() => setIsCollapsed(!isCollapsed)}
139-
className='text-muted-foreground hover:text-primary transition-colors'
140-
aria-label={
141-
isCollapsed ? t`Expand sidebar` : t`Collapse sidebar`
142-
}
143-
aria-expanded={!isCollapsed}
144-
>
145-
{isCollapsed ? (
146-
<PanelLeft className='h-5 w-5' aria-hidden='true' />
147-
) : (
148-
<PanelLeftClose
149-
className='h-5 w-5'
150-
aria-hidden='true'
151-
/>
152-
)}
153-
</button>
154-
</TooltipTrigger>
155-
<TooltipContent side='right' role='tooltip'>
156-
{isCollapsed
157-
? wallet?.name
158-
? t`Expand sidebar - ${wallet.name}`
159-
: t`Expand sidebar`
160-
: t`Collapse sidebar`}
161-
</TooltipContent>
162-
</Tooltip>
163-
</>
164-
)}
89+
<div
90+
className={`flex h-14 items-center pt-2 px-5 ${isCollapsed ? 'flex-col gap-2 justify-center' : 'justify-between'}`}
91+
>
92+
<WalletSwitcher isCollapsed={isCollapsed} wallet={wallet} />
93+
<Tooltip>
94+
<TooltipTrigger asChild>
95+
<button
96+
type='button'
97+
onClick={() => setIsCollapsed(!isCollapsed)}
98+
className='text-muted-foreground hover:text-primary transition-colors'
99+
aria-label={
100+
isCollapsed ? t`Expand sidebar` : t`Collapse sidebar`
101+
}
102+
aria-expanded={!isCollapsed}
103+
>
104+
{isCollapsed ? (
105+
<PanelLeft className='h-5 w-5' aria-hidden='true' />
106+
) : (
107+
<PanelLeftClose className='h-5 w-5' aria-hidden='true' />
108+
)}
109+
</button>
110+
</TooltipTrigger>
111+
<TooltipContent side='right' role='tooltip'>
112+
{isCollapsed ? t`Expand sidebar` : t`Collapse sidebar`}
113+
</TooltipContent>
114+
</Tooltip>
165115
</div>
166116

167117
<div className='flex-1 flex flex-col justify-between pb-4'>
@@ -183,16 +133,7 @@ export function FullLayout(props: LayoutProps) {
183133
</div>
184134
</div>
185135
</div>
186-
<div
187-
className={`flex flex-col h-screen overflow-hidden ${
188-
props.transparentBackground ? 'bg-transparent' : 'bg-background'
189-
}`}
190-
style={{
191-
paddingBottom: insets.bottom
192-
? `${insets.bottom}px`
193-
: 'env(safe-area-inset-bottom)',
194-
}}
195-
>
136+
<WalletTransitionWrapper props={props} insets={insets}>
196137
<div
197138
className='bg-background'
198139
style={{
@@ -203,7 +144,7 @@ export function FullLayout(props: LayoutProps) {
203144
}}
204145
/>
205146
{props.children}
206-
</div>
147+
</WalletTransitionWrapper>
207148
</div>
208149
</TooltipProvider>
209150
);

0 commit comments

Comments
 (0)