Skip to content

Commit 0d9e1e2

Browse files
corwintinescorwintines
authored
Merge pull request #15054 from JoeChenJ/Revamp_find_wallet_header
feat: revamp find-wallet header
2 parents 7e19c56 + 7dae95b commit 0d9e1e2

File tree

12 files changed

+166
-116
lines changed

12 files changed

+166
-116
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: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import { useEffect, useMemo, useState } from "react"
22

3-
import { ChainName, FilterOption, Lang, Wallet } from "@/lib/types"
3+
import {
4+
ChainName,
5+
FilterOption,
6+
Lang,
7+
Wallet,
8+
WalletFilter,
9+
} from "@/lib/types"
410

511
import { useWalletColumns } from "@/components/FindWalletProductTable/hooks/useWalletColumns"
612
import { useWalletFilters } from "@/components/FindWalletProductTable/hooks/useWalletFilters"
713
import { useWalletPersonaPresets } from "@/components/FindWalletProductTable/hooks/useWalletPersonaPresets"
814
import ProductTable from "@/components/ProductTable"
915

1016
import { trackCustomEvent } from "@/lib/utils/matomo"
17+
import { getFilteredWalletsCount } from "@/lib/utils/wallets"
1118

1219
import FindWalletsNoResults from "./FindWalletsNoResults"
1320
import WalletSubComponent from "./WalletSubComponent"
@@ -75,6 +82,15 @@ const FindWalletProductTable = ({ wallets }: { wallets: Wallet[] }) => {
7582
})
7683
}, [wallets, filters, activeFilterKeys])
7784

85+
const personasWalletCounts = useMemo(() => {
86+
return walletPersonas.map((persona) =>
87+
getFilteredWalletsCount(
88+
filteredData,
89+
persona.presetFilters as WalletFilter
90+
)
91+
)
92+
}, [filteredData, 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: 64 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ interface MobileFiltersProps {
2525
filters: FilterOption[]
2626
setFilters: React.Dispatch<React.SetStateAction<FilterOption[]>>
2727
presets: TPresetFilters
28+
presetFiltersCounts?: number[]
2829
activePresets: number[]
2930
handleSelectPreset: (index: number) => void
3031
dataCount: number
@@ -39,6 +40,7 @@ const MobileFilters = ({
3940
filters,
4041
setFilters,
4142
presets,
43+
presetFiltersCounts,
4244
activePresets,
4345
handleSelectPreset,
4446
dataCount,
@@ -51,64 +53,71 @@ const MobileFilters = ({
5153
const { t } = useTranslation("table")
5254

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

‎src/components/ProductTable/PresetFilters.tsx

Lines changed: 53 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,80 @@ 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+
presetFiltersCounts?: number[]
1211
}
1312

1413
const PresetFilters = ({
1514
presets,
1615
activePresets,
1716
handleSelectPreset,
1817
showMobileSidebar = false,
18+
presetFiltersCounts,
1919
}: PresetFiltersProps) => {
20-
const { t } = useTranslation("table")
20+
const colors = {
21+
text: [
22+
"text-primary",
23+
"text-accent-b",
24+
"text-accent-c",
25+
"text-accent-a",
26+
"text-[#BEBF3B]",
27+
],
28+
border: [
29+
"border-primary",
30+
"border-accent-b",
31+
"border-accent-c",
32+
"border-accent-a",
33+
"border-[#BEBF3B]",
34+
],
35+
bg: [
36+
"bg-primary",
37+
"bg-accent-b",
38+
"bg-accent-c",
39+
"bg-accent-a",
40+
"bg-[#BEBF3B]",
41+
],
42+
}
2143

2244
return (
2345
<div>
24-
<h3 className={cn("mb-3 text-xl font-bold", "px-4")}>
25-
{t("table-what-are-you-looking-for")}
26-
</h3>
2746
<div
28-
className={`mb-2 ${
47+
className={`lg:pb-11 ${
2948
showMobileSidebar
30-
? "grid grid-cols-2 gap-2"
49+
? "grid grid-cols-2 gap-2 pb-5"
3150
: "grid auto-cols-[200px] grid-flow-col gap-4 overflow-x-auto px-4 lg:auto-cols-fr"
3251
}`}
3352
>
3453
{presets.map((preset, idx) => {
54+
const colorIdx = colors.text[idx] ? idx : idx % colors.text.length
3555
return (
3656
<div
3757
key={idx}
38-
className={showMobileSidebar ? "w-full" : "grid-rows-1"}
58+
className={showMobileSidebar ? "w-full" : "grid-rows-1 pb-5"}
3959
>
4060
<button
4161
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",
62+
"duration-50 group flex h-[164px] w-full cursor-pointer flex-col items-start rounded-2xl border p-3 shadow-svg-button-link transition-all hover:bg-background-highlight lg:h-full lg:p-6",
4363
"focus-visible:outline focus-visible:outline-4 focus-visible:-outline-offset-4 focus-visible:outline-primary-hover",
4464
activePresets.includes(idx)
4565
? "border-primary"
46-
: "border-transparent"
66+
: "border-primary-low-contrast",
67+
showMobileSidebar && "h-full"
4768
)}
4869
onClick={() => handleSelectPreset(idx)}
4970
>
5071
<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">
72+
<div
73+
className={cn(
74+
"relative mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded border-2",
75+
colors.border[colorIdx],
76+
activePresets.includes(idx) && colors.bg[colorIdx]
77+
)}
78+
>
5279
{activePresets.includes(idx) && (
5380
<svg
5481
xmlns="http://www.w3.org/2000/svg"
@@ -58,25 +85,28 @@ const PresetFilters = ({
5885
strokeWidth="3"
5986
strokeLinecap="round"
6087
strokeLinejoin="round"
61-
className="h-4 w-4 text-primary"
88+
className="h-4 w-4 text-background"
6289
>
6390
<polyline points="20 6 9 17 4 12"></polyline>
6491
</svg>
6592
)}
6693
</div>
67-
<h3 className="duration-50 hyphens-auto text-left text-xl text-primary transition-all group-hover:text-primary-hover">
68-
{preset.title}
69-
</h3>
70-
</div>
71-
{!showMobileSidebar && (
72-
<p
94+
<h3
7395
className={cn(
74-
"p-2 text-left text-sm transition-colors duration-500",
75-
activePresets.includes(idx)
76-
? "text-body"
77-
: "text-body-medium"
96+
"duration-50 hyphens-auto text-left text-xl transition-all",
97+
colors.text[colorIdx]
7898
)}
7999
>
100+
{preset.title}{" "}
101+
{presetFiltersCounts?.[idx] && (
102+
<span className="font-normal">
103+
({presetFiltersCounts[idx]})
104+
</span>
105+
)}
106+
</h3>
107+
</div>
108+
{!showMobileSidebar && (
109+
<p className="p-2 text-left text-sm text-body transition-colors duration-500">
80110
{preset.description}
81111
</p>
82112
)}

0 commit comments

Comments
 (0)