Skip to content

Commit 207a750

Browse files
JoeChenJJoeChenJ
committed
feat: revamp find-wallet header
1 parent 95b1067 commit 207a750

File tree

11 files changed

+120
-150
lines changed

11 files changed

+120
-150
lines changed

‎src/components/DataTable/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ const DataTable = <TData, TValue>({
115115

116116
return (
117117
<div className="relative">
118-
<div className="sticky top-[76px] z-10 w-full border-b border-primary bg-background">
118+
<div className="sticky top-[76px] z-10 w-full border-b-background-highlight bg-background lg:border-b">
119119
<Table {...props}>
120120
<TableHeader>
121121
{table.getHeaderGroups().map((headerGroup) => (

‎src/components/FindWalletProductTable/FindWalletsNoResults.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const FindWalletsNoResults = ({ resetFilters }) => {
2424
}
2525

2626
return (
27-
<div className="m-24 border-2 border-dashed border-body-light">
27+
<div className="border-2 border-dashed border-body-light lg:m-24">
2828
<div className="p-12">
2929
<h3 className="mb-6 text-3xl font-normal">
3030
{t("page-find-wallet-empty-results-title")}

‎src/components/FindWalletProductTable/hooks/useWalletColumns.tsx

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,8 @@ import { Wallet } from "@/lib/types"
66

77
import type { TableMeta } from "@/components/DataTable"
88
import WalletInfo from "@/components/FindWalletProductTable/WalletInfo"
9-
import { Button } from "@/components/ui/buttons/Button"
109
import { TableCell } from "@/components/ui/table"
1110

12-
import { trackCustomEvent } from "@/lib/utils/matomo"
13-
1411
export const useWalletColumns: ColumnDef<Wallet>[] = [
1512
{
1613
id: "walletInfo",
@@ -19,33 +16,10 @@ export const useWalletColumns: ColumnDef<Wallet>[] = [
1916

2017
return (
2118
<div className="flex w-full flex-row items-center justify-between border-none px-4 py-2">
22-
<Button
23-
variant="ghost"
24-
className="block p-0 lg:hidden"
25-
onClick={() => {
26-
trackCustomEvent({
27-
eventCategory: "MobileFilterToggle",
28-
eventAction: "Tap MobileFilterToggle - sticky",
29-
eventName: "show mobile filters true",
30-
})
31-
meta.setMobileFiltersOpen(true)
32-
}}
33-
>
34-
<p className="text-md">{`Filters (${meta.activeFiltersCount})`}</p>
35-
</Button>
36-
{meta.dataLength === meta.allDataLength ? (
37-
<p>
38-
Showing all wallets <b>({meta.dataLength})</b>
39-
</p>
40-
) : (
41-
<p>
42-
Showing{" "}
43-
<b>
44-
{meta.dataLength}/{meta.allDataLength}
45-
</b>{" "}
46-
wallets
47-
</p>
48-
)}
19+
<p className="text-body-medium">
20+
Showing all wallets{" "}
21+
<span className="text-body">({meta.dataLength})</span>
22+
</p>
4923
</div>
5024
)
5125
},

‎src/components/FindWalletProductTable/index.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,22 @@ const FindWalletProductTable = ({ wallets }: { wallets: Wallet[] }) => {
7575
})
7676
}, [wallets, filters, activeFilterKeys])
7777

78+
const personasWalletCounts = useMemo(() => {
79+
if (!Array.isArray(wallets)) return []
80+
81+
return walletPersonas.map((persona) => {
82+
const trueKeys = Object.keys(persona.presetFilters).filter(
83+
(key) => persona.presetFilters[key] === true
84+
)
85+
86+
return wallets.reduce(
87+
(count, wallet) =>
88+
count + (trueKeys.every((key) => wallet[key]) ? 1 : 0),
89+
0
90+
)
91+
})
92+
}, [wallets, walletPersonas])
93+
7894
// Reset filters
7995
const resetFilters = () => {
8096
setFilters(walletFilterOptions)
@@ -101,6 +117,7 @@ const FindWalletProductTable = ({ wallets }: { wallets: Wallet[] }) => {
101117
matomoEventCategory="find-wallet"
102118
filters={filters}
103119
presetFilters={walletPersonas}
120+
presetFiltersCounts={personasWalletCounts}
104121
resetFilters={resetFilters}
105122
setFilters={setFilters}
106123
subComponent={(wallet, listIdx) => (

‎src/components/ProductTable/Filters.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const Filters = ({
7676

7777
return (
7878
<div className={`w-full lg:w-80`}>
79-
<div className="width-full sticky top-0 z-10 flex flex-row items-center justify-between border-b border-b-primary bg-background px-2 py-1.5 lg:top-[76px] lg:px-6">
79+
<div className="width-full sticky top-0 z-10 mb-2 flex flex-row items-center justify-between border-b border-b-background-highlight bg-background px-2 py-1.5 lg:top-[76px] lg:px-6">
8080
<p className="text-md font-bold">
8181
{t("table-filters")} ({activeFiltersCount})
8282
</p>

‎src/components/ProductTable/MobileFilters.tsx

Lines changed: 61 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -51,64 +51,70 @@ const MobileFilters = ({
5151
const { t } = useTranslation("table")
5252

5353
return (
54-
<Drawer
55-
direction="left"
56-
open={mobileFiltersOpen}
57-
onOpenChange={(open) => {
58-
setMobileFiltersOpen(open)
59-
trackCustomEvent({
60-
eventCategory: "MobileFilterToggle",
61-
eventAction: "Tap MobileFilterToggle",
62-
eventName: `show mobile filters ${open}`,
63-
})
64-
}}
65-
>
66-
<DrawerTrigger className="px-4" asChild>
67-
<Button variant="outline" className="gap-4 border-0 ps-0">
68-
<div className="flex flex-col text-left">
69-
<p>{t("table-filters")}</p>
70-
<p className="text-body-medium">{` ${activeFiltersCount} ${t("table-active")}`}</p>
71-
</div>
72-
<FilterBurgerIcon className="h-8 w-8 stroke-primary" />
73-
</Button>
74-
</DrawerTrigger>
75-
<DrawerContent className="flex h-full flex-col p-2">
76-
<div className="sticky top-0 flex items-center justify-end p-2">
77-
<DrawerClose asChild>
78-
<Button variant="ghost">
79-
<IoClose className="text-2xl" />
80-
</Button>
81-
</DrawerClose>
82-
</div>
83-
<div className="flex-1 overflow-y-auto">
84-
<PresetFilters
85-
presets={presets}
86-
activePresets={activePresets}
87-
handleSelectPreset={handleSelectPreset}
88-
showMobileSidebar={true}
89-
/>
90-
<Filters
91-
filters={filters}
92-
setFilters={setFilters}
93-
resetFilters={resetFilters}
94-
activeFiltersCount={activeFiltersCount}
95-
/>
96-
</div>
97-
<DrawerFooter>
98-
<div className="grid grid-cols-2 items-center">
99-
<div>
100-
<Button variant="ghost" className="gap-1" onClick={resetFilters}>
101-
<BsArrowCounterclockwise />
102-
{t("table-reset-filters")}
103-
</Button>
54+
<div className="border-b border-b-background-highlight">
55+
<Drawer
56+
direction="left"
57+
open={mobileFiltersOpen}
58+
onOpenChange={(open) => {
59+
setMobileFiltersOpen(open)
60+
trackCustomEvent({
61+
eventCategory: "MobileFilterToggle",
62+
eventAction: "Tap MobileFilterToggle",
63+
eventName: `show mobile filters ${open}`,
64+
})
65+
}}
66+
>
67+
<DrawerTrigger className="px-4" asChild>
68+
<Button variant="outline" className="gap-4 border-0 ps-4">
69+
<div className="flex flex-col text-left">
70+
<p>{t("table-filters")}</p>
71+
<p className="text-body-medium">{` ${activeFiltersCount} ${t("table-active")}`}</p>
10472
</div>
105-
<DrawerClose className="text-center" asChild>
106-
<Button className="w-full">{`${mobileFiltersLabel} (${dataCount})`}</Button>
73+
<FilterBurgerIcon className="h-8 w-8 stroke-primary" />
74+
</Button>
75+
</DrawerTrigger>
76+
<DrawerContent className="flex h-full flex-col p-2">
77+
<div className="sticky top-0 flex items-center justify-end p-2">
78+
<DrawerClose asChild>
79+
<Button variant="ghost">
80+
<IoClose className="text-2xl" />
81+
</Button>
10782
</DrawerClose>
10883
</div>
109-
</DrawerFooter>
110-
</DrawerContent>
111-
</Drawer>
84+
<div className="flex-1 overflow-y-auto">
85+
<PresetFilters
86+
presets={presets}
87+
activePresets={activePresets}
88+
handleSelectPreset={handleSelectPreset}
89+
showMobileSidebar={true}
90+
/>
91+
<Filters
92+
filters={filters}
93+
setFilters={setFilters}
94+
resetFilters={resetFilters}
95+
activeFiltersCount={activeFiltersCount}
96+
/>
97+
</div>
98+
<DrawerFooter>
99+
<div className="grid grid-cols-2 items-center">
100+
<div>
101+
<Button
102+
variant="ghost"
103+
className="gap-1"
104+
onClick={resetFilters}
105+
>
106+
<BsArrowCounterclockwise />
107+
{t("table-reset-filters")}
108+
</Button>
109+
</div>
110+
<DrawerClose className="text-center" asChild>
111+
<Button className="w-full">{`${mobileFiltersLabel} (${dataCount})`}</Button>
112+
</DrawerClose>
113+
</div>
114+
</DrawerFooter>
115+
</DrawerContent>
116+
</Drawer>
117+
</div>
112118
)
113119
}
114120

‎src/components/ProductTable/PresetFilters.tsx

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,56 @@ import type { TPresetFilters } from "@/lib/types"
22

33
import { cn } from "@/lib/utils/cn"
44

5-
import { useTranslation } from "@/hooks/useTranslation"
6-
75
export interface PresetFiltersProps {
86
presets: TPresetFilters
97
activePresets: number[]
108
handleSelectPreset: (index: number) => void
119
showMobileSidebar?: boolean
10+
presetFilterCounts?: number[]
1211
}
1312

1413
const PresetFilters = ({
1514
presets,
1615
activePresets,
1716
handleSelectPreset,
1817
showMobileSidebar = false,
18+
presetFilterCounts,
1919
}: PresetFiltersProps) => {
20-
const { t } = useTranslation("table")
20+
const colors = ["primary", "accent-b", "accent-c", "accent-a", "[#BEBF3B]"]
2121

2222
return (
2323
<div>
24-
<h3 className={cn("mb-3 text-xl font-bold", "px-4")}>
25-
{t("table-what-are-you-looking-for")}
26-
</h3>
2724
<div
28-
className={`mb-2 ${
25+
className={`mb-5 lg:pb-11 ${
2926
showMobileSidebar
3027
? "grid grid-cols-2 gap-2"
3128
: "grid auto-cols-[200px] grid-flow-col gap-4 overflow-x-auto px-4 lg:auto-cols-fr"
3229
}`}
3330
>
3431
{presets.map((preset, idx) => {
32+
const color = colors[idx]
3533
return (
3634
<div
3735
key={idx}
3836
className={showMobileSidebar ? "w-full" : "grid-rows-1"}
3937
>
4038
<button
4139
className={cn(
42-
"duration-50 group flex h-full w-full cursor-pointer flex-col items-start rounded border-2 bg-background-highlight p-2 transition-all hover:border-primary-hover",
40+
"duration-50 group flex h-full w-full cursor-pointer flex-col items-start rounded-2xl border p-6 shadow-[3px_2px_8px_0px_rgba(0,0,0,0.08)] transition-all hover:bg-background-highlight",
4341
"focus-visible:outline focus-visible:outline-4 focus-visible:-outline-offset-4 focus-visible:outline-primary-hover",
4442
activePresets.includes(idx)
4543
? "border-primary"
46-
: "border-transparent"
44+
: "border-primary-low-contrast"
4745
)}
4846
onClick={() => handleSelectPreset(idx)}
4947
>
5048
<div className="items-top flex gap-2 px-1.5">
51-
<div className="relative mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 border-primary">
49+
<div
50+
className={cn(
51+
`relative mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 border-${color}`,
52+
activePresets.includes(idx) && `bg-${color}`
53+
)}
54+
>
5255
{activePresets.includes(idx) && (
5356
<svg
5457
xmlns="http://www.w3.org/2000/svg"
@@ -58,25 +61,23 @@ const PresetFilters = ({
5861
strokeWidth="3"
5962
strokeLinecap="round"
6063
strokeLinejoin="round"
61-
className="h-4 w-4 text-primary"
64+
className={`h-4 w-4 text-background`}
6265
>
6366
<polyline points="20 6 9 17 4 12"></polyline>
6467
</svg>
6568
)}
6669
</div>
67-
<h3 className="duration-50 hyphens-auto text-left text-xl text-primary transition-all group-hover:text-primary-hover">
68-
{preset.title}
70+
<h3
71+
className={`duration-50 hyphens-auto text-left text-xl text-${color} transition-all`}
72+
>
73+
{preset.title}{" "}
74+
<span className="font-normal">
75+
({presetFilterCounts?.[idx]})
76+
</span>
6977
</h3>
7078
</div>
7179
{!showMobileSidebar && (
72-
<p
73-
className={cn(
74-
"p-2 text-left text-sm transition-colors duration-500",
75-
activePresets.includes(idx)
76-
? "text-body"
77-
: "text-body-medium"
78-
)}
79-
>
80+
<p className="p-2 text-left text-sm text-body transition-colors duration-500">
8081
{preset.description}
8182
</p>
8283
)}

‎src/components/ProductTable/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ interface ProductTableProps<T> {
2424
allDataLength: number
2525
filters: FilterOption[]
2626
presetFilters: TPresetFilters
27+
presetFiltersCounts?: number[]
2728
resetFilters: () => void
2829
setFilters: Dispatch<SetStateAction<FilterOption[]>>
2930
subComponent?: FC<T>
@@ -39,6 +40,7 @@ const ProductTable = <T,>({
3940
allDataLength,
4041
filters,
4142
presetFilters,
43+
presetFiltersCounts,
4244
resetFilters,
4345
setFilters,
4446
subComponent,
@@ -267,6 +269,7 @@ const ProductTable = <T,>({
267269
presets={presetFilters}
268270
activePresets={activePresets}
269271
handleSelectPreset={handleSelectPreset}
272+
presetFilterCounts={presetFiltersCounts}
270273
/>
271274
) : (
272275
<></>

‎src/components/ui/table.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const tableVariants = tv({
5151
table: "caption-bottom text-sm",
5252
thead: "[&-tr:last-child]:border-0",
5353
tbody: "&_tr:last-child]:border-0",
54-
tr: "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
54+
tr: "hover:bg-muted/50 data-[state=selected]:bg-muted border-t transition-colors first-of-type:border-t-0",
5555
th: "text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
5656
td: "align-middle p-4 [&:has([role=checkbox])]:pr-0",
5757
},

‎src/intl/en/page-wallets-find-wallet.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@
6565
"page-find-wallet-new-to-crypto-desc": "First time user looking for beginner wallet.",
6666
"page-find-wallet-nfts-title": "NFTs",
6767
"page-find-wallet-nfts-desc": "Wallets with focus on NFT support.",
68-
"page-find-wallet-hodler-title": "Long term",
68+
"page-find-wallet-hodler-title": "Hardware",
6969
"page-find-wallet-hodler-desc": "Passive token holding with hardware wallets.",
70-
"page-find-wallet-finance-title": "Finance",
70+
"page-find-wallet-finance-title": "Degen",
7171
"page-find-wallet-finance-desc": "Wallets focusing on frequent usage of DeFi apps.",
7272
"page-find-wallet-developer-title": "Developer",
7373
"page-find-wallet-developer-desc": "Wallets that help develop and test dapps.",

0 commit comments

Comments
 (0)