Skip to content

Commit 80ece19

Browse files
TymmmyTymmmy
authored
feat: remove old card UI (#2156)
* remove old card UI * Update [accountId].tsx
1 parent 1c6f764 commit 80ece19

5 files changed

Lines changed: 29 additions & 59 deletions

File tree

‎packages/wallet/frontend/src/components/cards/AccountCard.tsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,13 @@ import { useMemo } from 'react'
55
import { useOnboardingContext } from '@/lib/context/onboarding'
66
import { balanceState } from '@/lib/balance'
77
import { useSnapshot } from 'valtio'
8-
import { Card } from '../icons/CardButtons'
98

109
type AccountCardProps = {
1110
account: Account
1211
idOnboarding?: string
13-
isCard?: boolean
1412
}
1513

16-
export const AccountCard = ({
17-
account,
18-
idOnboarding,
19-
isCard
20-
}: AccountCardProps) => {
14+
export const AccountCard = ({ account, idOnboarding }: AccountCardProps) => {
2115
const { isUserFirstTime, setRunOnboarding } = useOnboardingContext()
2216
const { accountsSnapshot } = useSnapshot(balanceState)
2317

@@ -60,11 +54,6 @@ export const AccountCard = ({
6054
<span className="flex h-9 w-9 items-center justify-center rounded-md bg-[--accent] text-xl text-white dark:text-purple">
6155
{formattedAmount.symbol}
6256
</span>
63-
{isCard ? (
64-
<span className="flex h-9 w-9 items-center justify-center rounded-md bg-[--accent] text-xl text-white dark:text-purple">
65-
<Card />
66-
</span>
67-
) : null}
6857
</div>
6958
<span className="mt-auto hidden overflow-hidden text-ellipsis whitespace-nowrap leading-4 text-[--accent] sm:block">
7059
{account.name}

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
ToggleWalletVisibility
66
} from './ToggleVisibility'
77
import { Divider } from '@/ui/Divider'
8+
import { FEATURES_ENABLED } from '@/utils/constants'
89

910
type WalletAccountsProps = {
1011
accounts: Account[]
@@ -38,12 +39,14 @@ export const WalletAccounts = ({ accounts }: WalletAccountsProps) => {
3839
<Divider />
3940
</>
4041
) : null}
41-
<div className="flex flex-row">
42-
<div className="text-green dark:text-teal-neon pr-4">
43-
Show Cards Management
42+
{FEATURES_ENABLED ? null : (
43+
<div className="flex flex-row">
44+
<div className="text-green dark:text-teal-neon pr-4">
45+
Show Cards Management
46+
</div>
47+
<ToggleCardsVisibility />
4448
</div>
45-
<ToggleCardsVisibility />
46-
</div>
49+
)}
4750
</div>
4851
)
4952
}

‎packages/wallet/frontend/src/components/userCards/UserCard.tsx‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,9 @@
11
import { type ComponentProps } from 'react'
22
import { Chip, InterledgerLogo } from '../icons/UserCardIcons'
33
import { cn } from '@/utils/helpers'
4-
import {
5-
isLockedCard,
6-
KeysProvider,
7-
// useCardContext,
8-
UserCardContext
9-
} from './UserCardContext'
4+
import { isLockedCard, KeysProvider, UserCardContext } from './UserCardContext'
105
import { UserCardActions } from './UserCardActions'
11-
import { UserCardSettings } from './UserCardSettings'
126
import { ICardResponse } from '@wallet/shared'
13-
// import { Button } from '@/ui/Button'
14-
// import { cardService } from '@/lib/api/card'
15-
// import { toast } from '@/lib/hooks/useToast'
16-
// import { useRouter } from 'next/router'
177

188
export type UserCardContainerProps = ComponentProps<'div'>
199

@@ -101,13 +91,15 @@ export const UserCard = ({ card }: UserCardProps) => {
10191

10292
<UserCardActions />
10393
</div>
104-
<UserCardSettings />
94+
{/* old cards PIN settings - new cards still in discussion */}
95+
{/* <UserCardSettings /> */}
10596
</div>
10697
</KeysProvider>
10798
</UserCardContext.Provider>
10899
)
109100
}
110101

102+
// old cards activated when you set PIN - new cards still in discussion
111103
// const SetPinForm = () => {
112104
// const router = useRouter()
113105
// const { card } = useCardContext()

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

Lines changed: 14 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ 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 { Card } from '@/components/icons/CardButtons'
3231

3332
type AccountPageProps = InferGetServerSidePropsType<typeof getServerSideProps>
3433

@@ -69,8 +68,8 @@ const AccountPage: NextPageWithLayout<AccountPageProps> = ({
6968
<h2 className="mb-2 text-xl">Balance</h2>
7069
<div className="text-3xl font-bold">{formattedAmount.amount}</div>
7170
</div>
72-
<div className="my-12 flex md:max-w-lg md:items-center gap-4 flex-col sm:flex-row">
73-
<div className="flex gap-4">
71+
<div className="my-12 flex md:max-w-lg md:items-center gap-2 flex-col sm:flex-row">
72+
<div className="flex">
7473
<button
7574
id="walletAddress"
7675
onClick={() => {
@@ -91,6 +90,8 @@ const AccountPage: NextPageWithLayout<AccountPageProps> = ({
9190
Add wallet address
9291
</span>
9392
</button>
93+
</div>
94+
<div className="flex gap-4">
9495
<Link
9596
id="fund"
9697
href={FEATURES_ENABLED ? '/deposit' : undefined}
@@ -114,31 +115,17 @@ const AccountPage: NextPageWithLayout<AccountPageProps> = ({
114115
Deposit
115116
</span>
116117
</Link>
118+
<Link
119+
id="withdraw"
120+
href="/withdraw"
121+
className="group flex aspect-square min-w-28 flex-shrink-0 flex-grow-0 basis-1/4 flex-col items-center justify-center rounded-lg border-2 text-center transition-[box-shadow] duration-200 dark:hover:shadow-glow-button dark:focus:shadow-glow-button"
122+
>
123+
<Withdraw className="mb-1 h-8 w-8 transition-[filter] duration-200 group-hover:dark:drop-shadow-glow-svg group-focus:dark:drop-shadow-glow-svg" />
124+
<span className="text-center text-[smaller] leading-4 underline-offset-2 transition-transform group-hover:scale-110 group-hover:underline group-focus:scale-110 group-focus:underline group-focus:underline-offset-2 dark:group-hover:decoration-transparent">
125+
Withdraw
126+
</span>
127+
</Link>
117128
</div>
118-
{FEATURES_ENABLED ? (
119-
<div className="flex gap-4">
120-
<Link
121-
id="withdraw"
122-
href="/withdraw"
123-
className="group flex aspect-square min-w-28 flex-shrink-0 flex-grow-0 basis-1/4 flex-col items-center justify-center rounded-lg border-2 text-center transition-[box-shadow] duration-200 dark:hover:shadow-glow-button dark:focus:shadow-glow-button"
124-
>
125-
<Withdraw className="mb-1 h-8 w-8 transition-[filter] duration-200 group-hover:dark:drop-shadow-glow-svg group-focus:dark:drop-shadow-glow-svg" />
126-
<span className="text-center text-[smaller] leading-4 underline-offset-2 transition-transform group-hover:scale-110 group-hover:underline group-focus:scale-110 group-focus:underline group-focus:underline-offset-2 dark:group-hover:decoration-transparent">
127-
Withdraw
128-
</span>
129-
</Link>
130-
<Link
131-
id="cards"
132-
href="/card"
133-
className="group flex aspect-square min-w-28 flex-shrink-0 flex-grow-0 basis-1/4 flex-col items-center justify-center rounded-lg border-2 text-center transition-[box-shadow] duration-200 dark:hover:shadow-glow-button dark:focus:shadow-glow-button"
134-
>
135-
<Card className="mb-1 h-8 w-8 transition-[filter] duration-200 group-hover:dark:drop-shadow-glow-svg group-focus:dark:drop-shadow-glow-svg" />
136-
<span className="text-center text-[smaller] leading-4 underline-offset-2 transition-transform group-hover:scale-110 group-hover:underline group-focus:scale-110 group-focus:underline group-focus:underline-offset-2 dark:group-hover:decoration-transparent">
137-
Card
138-
</span>
139-
</Link>
140-
</div>
141-
) : null}
142129
</div>
143130
<h2 className="mb-2 text-xl sm:text-2xl font-bold">
144131
Wallet Address list <div className="text-sm">(Payment Pointers)</div>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import { userService } from '@/lib/api/user'
1313
import type { NextPageWithLayout } from '@/lib/types/app'
1414
import { useOnboardingContext } from '@/lib/context/onboarding'
1515
import { useEffect } from 'react'
16-
import { FEATURES_ENABLED } from '@/utils/constants'
1716
import { useMenuContext } from '@/lib/context/menu'
17+
import { FEATURES_ENABLED } from '@/utils/constants'
1818

1919
type HomeProps = InferGetServerSidePropsType<typeof getServerSideProps>
2020

@@ -28,7 +28,7 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ accounts, user }) => {
2828
setStepIndex(stepIndex + 1)
2929
setRunOnboarding(true)
3030
}
31-
setIsCardsVisible(user.isCardsVisible)
31+
setIsCardsVisible(user.isCardsVisible || FEATURES_ENABLED)
3232

3333
// eslint-disable-next-line react-hooks/exhaustive-deps
3434
}, [])
@@ -62,7 +62,6 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ accounts, user }) => {
6262
key={account.id}
6363
account={account}
6464
idOnboarding={account.assetCode === 'EUR' ? 'eurAccount' : ''}
65-
isCard={FEATURES_ENABLED && account.assetCode === 'EUR'}
6665
/>
6766
) : null
6867
)

0 commit comments

Comments
 (0)