Skip to content

Commit eac5ce4

Browse files
TymmmyTymmmy
authored
fix: Fix cards menu toggle (#2162)
* Revert "chore(deps): update actions/labeler action to v6 (#2135)" This reverts commit 8903b44. * fix Cards menu toggle
1 parent f650355 commit eac5ce4

File tree

20 files changed

+186
-76
lines changed

20 files changed

+186
-76
lines changed

‎packages/wallet/frontend/src/components/Menu.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -157,10 +157,11 @@ const LogoutButton = () => {
157157
)
158158
}
159159

160-
export const Menu = () => {
160+
type MenuProps = { isCardsVisible: boolean }
161+
export const Menu = (args: MenuProps) => {
161162
const router = useRouter()
162163
const pathname = `/${router.pathname.split('/')?.slice(1)[0] ?? ''}`
163-
const { sidebarIsOpen, setSidebarIsOpen, isCardsVisible } = useMenuContext()
164+
const { sidebarIsOpen, setSidebarIsOpen } = useMenuContext()
164165
const { isUserFirstTime, stepIndex, setRunOnboarding } =
165166
useOnboardingContext()
166167

@@ -211,7 +212,7 @@ export const Menu = () => {
211212
</button>
212213
<nav className="space-y-4">
213214
{menuItems.map(({ name, href, id, Icon }) =>
214-
name === 'Cards' && !isCardsVisible ? null : (
215+
name === 'Cards' && !args.isCardsVisible ? null : (
215216
<NavLink
216217
currentPath={pathname}
217218
key={name}
@@ -264,7 +265,7 @@ export const Menu = () => {
264265
</Link>
265266
<div className="w-full space-y-4">
266267
{menuItems.map(({ name, href, id, Icon }) =>
267-
name === 'Cards' && !isCardsVisible ? null : (
268+
name === 'Cards' && !args.isCardsVisible ? null : (
268269
<NavLink
269270
currentPath={pathname}
270271
key={name}

‎packages/wallet/frontend/src/components/layouts/AppLayout.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,26 @@ import { Bubbles } from '@/ui/Bubbles'
44
import dynamic from 'next/dynamic'
55
import { useOnboardingContext } from '@/lib/context/onboarding'
66
import { Toaster } from '@/components/toast/Toaster'
7+
import { FEATURES_ENABLED } from '@/utils/constants'
78
const Onboarding = dynamic(() => import('@/components/onboarding/Onboarding'), {
89
ssr: false
910
})
1011

1112
type AppLayoutProps = {
1213
children: ReactNode
14+
isCardsVisible?: boolean
1315
}
1416

15-
export const AppLayout = ({ children }: AppLayoutProps) => {
17+
export const AppLayout = ({ children, isCardsVisible }: AppLayoutProps) => {
1618
const { isUserFirstTime, setIsUserFirstTime, isDevKeysOnboarding } =
1719
useOnboardingContext()
1820

21+
const showCardsMenu =
22+
isCardsVisible === undefined
23+
? false
24+
: FEATURES_ENABLED
25+
? true
26+
: isCardsVisible
1927
useEffect(() => {
2028
setIsUserFirstTime(
2129
false
@@ -27,7 +35,7 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
2735

2836
return (
2937
<>
30-
<Menu />
38+
<Menu isCardsVisible={showCardsMenu} />
3139
{(isUserFirstTime || isDevKeysOnboarding) && <Onboarding />}
3240

3341
<main className="mt-[84px] min-w-0 px-8 py-7 md:mt-0 md:px-16 md:py-12 md:[grid-column:2/3] h-full">

‎packages/wallet/frontend/src/components/providers/MenuProvider.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,12 @@ type MenuProviderProps = {
77

88
export const MenuProvider = ({ children }: MenuProviderProps) => {
99
const [sidebarIsOpen, setSidebarIsOpen] = useState(false)
10-
const [isCardsVisible, setIsCardsVisible] = useState(true)
1110

1211
return (
1312
<MenuContext.Provider
1413
value={{
1514
sidebarIsOpen,
16-
setSidebarIsOpen,
17-
isCardsVisible,
18-
setIsCardsVisible
15+
setSidebarIsOpen
1916
}}
2017
>
2118
{children}

‎packages/wallet/frontend/src/components/settings/PersonalSettingsForm.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,12 @@ export const PersonalSettingsForm = ({
7979
</Button>
8080
)}
8181
</div>
82-
{walletAccountsOpen && <WalletAccounts accounts={accounts} />}
82+
{walletAccountsOpen && (
83+
<WalletAccounts
84+
accounts={accounts}
85+
isCardsVisible={user.isCardsVisible}
86+
/>
87+
)}
8388
</>
8489
)
8590
}

‎packages/wallet/frontend/src/components/settings/ToggleVisibility.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Account, accountService } from '@/lib/api/account'
22
import { userService } from '@/lib/api/user'
3-
import { useMenuContext } from '@/lib/context/menu'
43
import { Switch } from '@headlessui/react'
54
import { useState } from 'react'
65

@@ -35,24 +34,30 @@ export const ToggleWalletVisibility = ({
3534
)
3635
}
3736

38-
export const ToggleCardsVisibility = () => {
39-
const { isCardsVisible, setIsCardsVisible } = useMenuContext()
37+
type ToggleCardsVisibilityProps = {
38+
isCardsVisible: boolean
39+
}
40+
export const ToggleCardsVisibility = ({
41+
isCardsVisible
42+
}: ToggleCardsVisibilityProps) => {
43+
const [isCardsEnabled, setIsCardsEnabled] = useState(isCardsVisible)
4044
return (
4145
<Switch
42-
checked={isCardsVisible}
46+
checked={isCardsEnabled}
4347
onChange={async () => {
4448
await userService.updateCardsVisibility({
45-
isCardsVisible: !isCardsVisible
49+
isCardsVisible: !isCardsEnabled
4650
})
4751

48-
setIsCardsVisible(!isCardsVisible)
52+
setIsCardsEnabled(!isCardsEnabled)
53+
window.location.reload()
4954
}}
50-
className={`${isCardsVisible ? 'bg-green-modal' : 'bg-orange-dark'}
55+
className={`${isCardsEnabled ? 'bg-green-modal' : 'bg-orange-dark'}
5156
relative inline-flex h-6 w-12 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`}
5257
>
5358
<span
5459
aria-hidden="true"
55-
className={`${isCardsVisible ? 'translate-x-5' : 'translate-x-0'}
60+
className={`${isCardsEnabled ? 'translate-x-5' : 'translate-x-0'}
5661
pointer-events-none inline-block h-5 w-6 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
5762
/>
5863
</Switch>

‎packages/wallet/frontend/src/components/settings/WalletAccounts.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,13 @@ import { FEATURES_ENABLED } from '@/utils/constants'
99

1010
type WalletAccountsProps = {
1111
accounts: Account[]
12+
isCardsVisible: boolean
1213
}
1314

14-
export const WalletAccounts = ({ accounts }: WalletAccountsProps) => {
15+
export const WalletAccounts = ({
16+
accounts,
17+
isCardsVisible
18+
}: WalletAccountsProps) => {
1519
return (
1620
<div className="pt-5">
1721
{accounts.length > 0 ? (
@@ -44,7 +48,7 @@ export const WalletAccounts = ({ accounts }: WalletAccountsProps) => {
4448
<div className="text-green dark:text-teal-neon pr-4">
4549
Show Cards Management
4650
</div>
47-
<ToggleCardsVisibility />
51+
<ToggleCardsVisibility isCardsVisible={isCardsVisible} />
4852
</div>
4953
)}
5054
</div>

‎packages/wallet/frontend/src/lib/context/menu.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { createContext, useContext } from 'react'
33
type MenuContextProps = {
44
sidebarIsOpen: boolean
55
setSidebarIsOpen: (sidebarIsOpen: boolean) => void
6-
isCardsVisible: boolean
7-
setIsCardsVisible: (isCardsVisible: boolean) => void
86
}
97

108
export const MenuContext = createContext<MenuContextProps | null>(null)

‎packages/wallet/frontend/src/pages/account/[accountId].tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { WalletAddressesTable } from '@/components/WalletAddressesTable'
2828
import { Link } from '@/ui/Link'
2929
import { DepositDialog } from '@/components/dialogs/DepositDialog'
3030
import { FEATURES_ENABLED } from '@/utils/constants'
31+
import { userService } from '@/lib/api/user'
3132

3233
type AccountPageProps = InferGetServerSidePropsType<typeof getServerSideProps>
3334

@@ -152,6 +153,7 @@ const querySchema = z.object({
152153
export const getServerSideProps: GetServerSideProps<{
153154
account: Account
154155
walletAddresses: WalletAddressResponse[]
156+
user: { isCardsVisible: boolean }
155157
}> = async (ctx) => {
156158
const result = querySchema.safeParse(ctx.query)
157159
if (!result.success) {
@@ -164,12 +166,14 @@ export const getServerSideProps: GetServerSideProps<{
164166
accountService.get(result.data.accountId, ctx.req.headers.cookie),
165167
walletAddressService.list(result.data.accountId, ctx.req.headers.cookie)
166168
])
169+
const user = await userService.me(ctx.req.headers.cookie)
167170

168171
if (
169172
!accountResponse.success ||
170173
!walletAddressesResponse.success ||
171174
!accountResponse.result ||
172-
!walletAddressesResponse.result
175+
!walletAddressesResponse.result ||
176+
!user.success
173177
) {
174178
return {
175179
notFound: true
@@ -185,13 +189,18 @@ export const getServerSideProps: GetServerSideProps<{
185189
return {
186190
props: {
187191
account: accountResponse.result,
188-
walletAddresses: walletAddressesResponse.result
192+
walletAddresses: walletAddressesResponse.result,
193+
user: { isCardsVisible: user.result?.isCardsVisible ?? false }
189194
}
190195
}
191196
}
192197

193198
AccountPage.getLayout = function (page) {
194-
return <AppLayout>{page}</AppLayout>
199+
return (
200+
<AppLayout isCardsVisible={page.props.user.isCardsVisible}>
201+
{page}
202+
</AppLayout>
203+
)
195204
}
196205

197206
export default AccountPage

‎packages/wallet/frontend/src/pages/account/create.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { useOnboardingContext } from '@/lib/context/onboarding'
2020
import { useEffect } from 'react'
2121
import { createAccountSchema } from '@wallet/shared'
2222
import { BASE_ASSET_SCALE } from '@/utils/constants'
23+
import { userService } from '@/lib/api/user'
2324

2425
type CreateAccountProps = InferGetServerSidePropsType<typeof getServerSideProps>
2526
const CreateAccountPage: NextPageWithLayout<CreateAccountProps> = ({
@@ -125,11 +126,13 @@ const CreateAccountPage: NextPageWithLayout<CreateAccountProps> = ({
125126

126127
export const getServerSideProps: GetServerSideProps<{
127128
assets: SelectOption[]
129+
user: { isCardsVisible: boolean }
128130
}> = async (ctx) => {
129131
const response = await assetService.list(ctx.req.headers.cookie)
132+
const user = await userService.me(ctx.req.headers.cookie)
130133

131134
// TODO: https://nextjs.org/docs/advanced-features/custom-error-page#more-advanced-error-page-customizing
132-
if (!response.success) {
135+
if (!response.success || !user.success) {
133136
return {
134137
notFound: true
135138
}
@@ -144,13 +147,18 @@ export const getServerSideProps: GetServerSideProps<{
144147

145148
return {
146149
props: {
147-
assets: assets ?? []
150+
assets: assets ?? [],
151+
user: { isCardsVisible: user.result?.isCardsVisible ?? false }
148152
}
149153
}
150154
}
151155

152156
CreateAccountPage.getLayout = function (page) {
153-
return <AppLayout>{page}</AppLayout>
157+
return (
158+
<AppLayout isCardsVisible={page.props.user.isCardsVisible}>
159+
{page}
160+
</AppLayout>
161+
)
154162
}
155163

156164
export default CreateAccountPage

‎packages/wallet/frontend/src/pages/card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ export const getServerSideProps: GetServerSideProps<{
274274
}
275275

276276
UserCardPage.getLayout = function (page) {
277-
return <AppLayout>{page}</AppLayout>
277+
return <AppLayout isCardsVisible={true}>{page}</AppLayout>
278278
}
279279

280280
export default UserCardPage

0 commit comments

Comments
 (0)