Skip to content

Commit 69cdf4e

Browse files
corwintinescorwintines
authored
Merge pull request #12753 from bhargavkakadiya/multi-select-user-persona
multiple personas clickable [Fixes #12645]
2 parents 929aaf5 + b84b6fc commit 69cdf4e

File tree

7 files changed

+119
-25
lines changed

7 files changed

+119
-25
lines changed

‎src/components/FindWallet/MobileFiltersMenu.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ import WalletFilterSidebar, {
2626
type MobileFiltersMenuProps = WalletFilterSidebarProps & {
2727
showMobileSidebar: boolean
2828
setFilters: React.Dispatch<React.SetStateAction<WalletFilter>>
29-
selectedPersona: number
30-
setSelectedPersona: React.Dispatch<React.SetStateAction<number>>
29+
selectedPersona: number[]
30+
setSelectedPersona: React.Dispatch<React.SetStateAction<number[]>>
3131
onOpen: () => void
3232
onClose: () => void
3333
totalWallets: number
@@ -89,6 +89,7 @@ export const MobileFiltersMenu = ({
8989
selectedPersona={selectedPersona}
9090
setSelectedPersona={setSelectedPersona}
9191
showMobileSidebar={showMobileSidebar}
92+
resetWalletFilter={resetWalletFilter}
9293
/>
9394
</Box>
9495

‎src/components/FindWallet/WalletFilterPersona.tsx

Lines changed: 66 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { MdCircle } from "react-icons/md"
1+
import { MdCheckBox } from "react-icons/md"
22
import {
33
Box,
44
Flex,
@@ -19,9 +19,32 @@ import { useWalletPersonas } from "../../hooks/useWalletPersonas"
1919
type WalletFilterPersonaProps = {
2020
resetFilters: () => void
2121
setFilters: React.Dispatch<React.SetStateAction<WalletFilter>>
22-
selectedPersona: number
23-
setSelectedPersona: React.Dispatch<React.SetStateAction<number>>
22+
selectedPersona: number[]
23+
setSelectedPersona: React.Dispatch<React.SetStateAction<number[]>>
2424
showMobileSidebar: boolean
25+
resetWalletFilter: React.MutableRefObject<() => void>
26+
}
27+
28+
const computeFilters = (
29+
selectedPersonas: number[],
30+
personas: WalletPersonas[]
31+
) => {
32+
if (selectedPersonas.length === 0) return {}
33+
34+
const firstPersona = personas[selectedPersonas[0]]
35+
const initialFilters = firstPersona.presetFilters
36+
return selectedPersonas
37+
.slice(1)
38+
.reduce((filters: { [key: string]: boolean }, personaId) => {
39+
const persona = personas[personaId]
40+
if (!persona) return filters
41+
42+
return Object.fromEntries(
43+
Object.entries(filters).map(([key, value]) => {
44+
return [key, value || persona.presetFilters[key]]
45+
})
46+
)
47+
}, initialFilters)
2548
}
2649

2750
const WalletFilterPersona = ({
@@ -30,26 +53,50 @@ const WalletFilterPersona = ({
3053
selectedPersona,
3154
setSelectedPersona,
3255
showMobileSidebar,
56+
resetWalletFilter,
3357
}: WalletFilterPersonaProps) => {
3458
const personas = useWalletPersonas()
3559
const handleSelectPersona = (idx: number, persona: WalletPersonas) => {
36-
if (idx === selectedPersona) {
37-
resetFilters()
38-
60+
let newSelectedPersonas
61+
if (selectedPersona.includes(idx)) {
62+
newSelectedPersonas = selectedPersona.filter((persona) => persona !== idx)
3963
trackCustomEvent({
4064
eventCategory: "UserPersona",
4165
eventAction: `${persona.title}`,
4266
eventName: `${persona.title} false`,
4367
})
68+
setSelectedPersona(newSelectedPersonas)
69+
if (newSelectedPersonas.length < 1) {
70+
resetFilters()
71+
resetWalletFilter.current()
72+
} else {
73+
const newFilters = computeFilters(newSelectedPersonas, personas)
74+
setFilters((prevFilters) => {
75+
const combinedFilters = Object.fromEntries(
76+
Object.entries(prevFilters).map(([key]) => {
77+
return [key, newFilters[key]]
78+
})
79+
)
80+
return combinedFilters as WalletFilter
81+
})
82+
}
4483
} else {
45-
setSelectedPersona(idx)
46-
setFilters(persona.presetFilters)
47-
84+
newSelectedPersonas = [...selectedPersona, idx]
4885
trackCustomEvent({
4986
eventCategory: "UserPersona",
5087
eventAction: `${persona.title}`,
5188
eventName: `${persona.title} true`,
5289
})
90+
setSelectedPersona(newSelectedPersonas)
91+
const newFilters = computeFilters(newSelectedPersonas, personas)
92+
setFilters((prevFilters) => {
93+
const combinedFilters = Object.fromEntries(
94+
Object.entries(prevFilters).map(([key, value]) => {
95+
return [key, value || newFilters[key]]
96+
})
97+
)
98+
return combinedFilters as WalletFilter
99+
})
53100
}
54101
}
55102

@@ -95,16 +142,19 @@ const WalletFilterPersona = ({
95142
<Flex gap={2} mb={showMobileSidebar ? 0 : 1} px={1.5}>
96143
<Box role="radio" aria-label={`${persona.title} filter`}>
97144
<Icon
98-
as={MdCircle}
99-
borderRadius="full"
145+
as={MdCheckBox}
100146
boxSize={2.5}
101147
my={0}
102148
mx={1}
103149
fill={
104-
selectedPersona === idx ? "primary.base" : "transparent"
150+
selectedPersona.includes(idx)
151+
? "primary.base"
152+
: "transparent"
105153
}
106154
background={
107-
selectedPersona === idx ? "primary.base" : "transparent"
155+
selectedPersona.includes(idx)
156+
? "primary.base"
157+
: "transparent"
108158
}
109159
outline="1.5px solid"
110160
outlineColor="primary.base"
@@ -135,7 +185,9 @@ const WalletFilterPersona = ({
135185
{!showMobileSidebar && (
136186
<Text
137187
p="0.4rem"
138-
color={selectedPersona === idx ? "body.base" : "body.medium"}
188+
color={
189+
selectedPersona.includes(idx) ? "body.base" : "body.medium"
190+
}
139191
fontSize="sm"
140192
fontWeight="normal"
141193
transition="0.5s all"

‎src/components/FindWallet/WalletFilterSidebar.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ export type WalletFilterSidebarProps = Omit<BoxProps, "children"> & {
1818
filters: WalletFilter
1919
resetWalletFilter: React.MutableRefObject<() => void>
2020
resetFilters: () => void
21+
setFilters: React.Dispatch<React.SetStateAction<WalletFilter>>
22+
selectedPersona: number[]
23+
setSelectedPersona: React.Dispatch<React.SetStateAction<number[]>>
2124
updateFilterOption: (key: unknown) => void
2225
updateFilterOptions: (keys: unknown, value: unknown) => void
2326
showMobileSidebar?: boolean

‎src/hooks/useWalletPersonas.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ export const useWalletPersonas = () => {
2222
hardware_support: false,
2323
rpc_importing: false,
2424
nft_support: false,
25-
connect_to_dapps: true,
25+
connect_to_dapps: false,
2626
staking: false,
2727
swaps: false,
28-
layer_2: true,
28+
layer_2: false,
2929
gas_fee_customization: false,
3030
ens_support: false,
31-
erc_20_support: true,
32-
buy_crypto: true,
31+
erc_20_support: false,
32+
buy_crypto: false,
3333
withdraw_crypto: false,
3434
multisig: false,
3535
social_recovery: false,
@@ -64,6 +64,7 @@ export const useWalletPersonas = () => {
6464
withdraw_crypto: false,
6565
multisig: false,
6666
social_recovery: false,
67+
new_to_crypto: false,
6768
},
6869
},
6970
{
@@ -94,6 +95,7 @@ export const useWalletPersonas = () => {
9495
withdraw_crypto: false,
9596
multisig: false,
9697
social_recovery: false,
98+
new_to_crypto: false,
9799
},
98100
},
99101
{
@@ -124,6 +126,7 @@ export const useWalletPersonas = () => {
124126
withdraw_crypto: false,
125127
multisig: false,
126128
social_recovery: false,
129+
new_to_crypto: false,
127130
},
128131
},
129132
{
@@ -154,6 +157,7 @@ export const useWalletPersonas = () => {
154157
withdraw_crypto: false,
155158
multisig: false,
156159
social_recovery: false,
160+
new_to_crypto: false,
157161
},
158162
},
159163
]

‎src/lib/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export const WALLETS_FILTERS_DEFAULT = {
105105
withdraw_crypto: false,
106106
multisig: false,
107107
social_recovery: false,
108+
new_to_crypto: false,
108109
}
109110

110111
export const NEW_TO_CRYPTO_FEATURES = ["new_to_crypto"]

‎src/lib/utils/wallets.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,11 @@ export const formatStringList = (strings: string[], sliceSize?: number) => {
9595
}
9696

9797
// Get border custom color for Persona filter
98-
export const getPersonaBorderColor = (selectedPersona: number, idx: number) => {
99-
return selectedPersona === idx ? "primary.base" : "transparent"
98+
export const getPersonaBorderColor = (
99+
selectedPersona: number[],
100+
idx: number
101+
) => {
102+
return selectedPersona.includes(idx) ? "primary.base" : "transparent"
100103
}
101104

102105
// Get total count of wallets that support a language

‎src/pages/wallets/find-wallet.tsx

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ import {
4444
WALLETS_FILTERS_DEFAULT,
4545
} from "@/lib/constants"
4646

47+
import { useWalletPersonas } from "../../hooks/useWalletPersonas"
48+
4749
import { WalletSupportedLanguageContext } from "@/contexts/WalletSupportedLanguageContext"
4850
import { useWalletTable } from "@/hooks/useWalletTable"
4951
import HeroImage from "@/public/images/wallets/wallet-hero.png"
@@ -106,11 +108,11 @@ const FindWalletPage = ({
106108
}: InferGetStaticPropsType<typeof getStaticProps>) => {
107109
const { pathname } = useRouter()
108110
const { t } = useTranslation("page-wallets-find-wallet")
109-
111+
const personas = useWalletPersonas()
110112
const resetWalletFilter = useRef(() => {})
111113

112114
const [filters, setFilters] = useState(WALLETS_FILTERS_DEFAULT)
113-
const [selectedPersona, setSelectedPersona] = useState(NaN)
115+
const [selectedPersona, setSelectedPersona] = useState<number[]>([])
114116
const [supportedLanguage, setSupportedLanguage] = useState(DEFAULT_LOCALE)
115117

116118
const { isOpen: showMobileSidebar, onOpen, onClose } = useDisclosure()
@@ -122,10 +124,36 @@ const FindWalletPage = ({
122124
walletCardData,
123125
} = useWalletTable({ filters, supportedLanguage, t, walletData: wallets })
124126

127+
const updatePersonaUponFilterChange = (filters) => {
128+
const newSelectedPersona: number[] = []
129+
const trueFilters = Object.fromEntries(
130+
Object.entries(filters).filter(([_, value]) => value)
131+
)
132+
if (Object.keys(trueFilters).length === 0) {
133+
setSelectedPersona([])
134+
return
135+
}
136+
137+
for (let i = 0; i < personas.length; i++) {
138+
const truePresetFilters = Object.fromEntries(
139+
Object.entries(personas[i].presetFilters).filter(([_, value]) => value)
140+
)
141+
const isPersonaSelected = Object.entries(truePresetFilters).every(
142+
([key, value]) => trueFilters[key] === value
143+
)
144+
if (isPersonaSelected) {
145+
newSelectedPersona.push(i)
146+
}
147+
}
148+
149+
setSelectedPersona(newSelectedPersona)
150+
}
151+
125152
const updateFilterOption = (key) => {
126153
const updatedFilters = { ...filters }
127154
updatedFilters[key] = !updatedFilters[key]
128155
setFilters(updatedFilters)
156+
updatePersonaUponFilterChange(updatedFilters)
129157
}
130158

131159
const updateFilterOptions = (keys, value) => {
@@ -134,10 +162,11 @@ const FindWalletPage = ({
134162
updatedFilters[key] = value
135163
}
136164
setFilters(updatedFilters)
165+
updatePersonaUponFilterChange(updatedFilters)
137166
}
138167

139168
const resetFilters = () => {
140-
setSelectedPersona(NaN)
169+
setSelectedPersona([])
141170
setFilters(WALLETS_FILTERS_DEFAULT)
142171
setSupportedLanguage(DEFAULT_LOCALE)
143172
}
@@ -212,6 +241,7 @@ const FindWalletPage = ({
212241
selectedPersona={selectedPersona}
213242
setSelectedPersona={setSelectedPersona}
214243
showMobileSidebar={showMobileSidebar}
244+
resetWalletFilter={resetWalletFilter}
215245
/>
216246
</Box>
217247

0 commit comments

Comments
 (0)