fix deselcting filters

Author: bhargavkakadiya

src/components/FindWallet/MobileFiltersMenu.tsx

@@ -26,8 +26,8 @@ import WalletFilterSidebar, {
 type MobileFiltersMenuProps = WalletFilterSidebarProps & {
   showMobileSidebar: boolean
   setFilters: React.Dispatch<React.SetStateAction<WalletFilter>>
-  selectedPersona: number
-  setSelectedPersona: React.Dispatch<React.SetStateAction<number>>
+  selectedPersona: number[]
+  setSelectedPersona: React.Dispatch<React.SetStateAction<number[]>>
   onOpen: () => void
   onClose: () => void
   totalWallets: number

src/components/FindWallet/WalletFilterPersona.tsx

@@ -73,7 +73,7 @@ const WalletFilterPersona = ({
         const newFilters = computeFilters(newSelectedPersonas, personas)
         setFilters((prevFilters) => {
           const combinedFilters = Object.fromEntries(
-            Object.entries(prevFilters).map(([key, value]) => {
+            Object.entries(prevFilters).map(([key]) => {
               return [key, newFilters[key]]
             })
           )

src/hooks/useWalletPersonas.tsx

@@ -22,14 +22,14 @@ export const useWalletPersonas = () => {
         hardware_support: false,
         rpc_importing: false,
         nft_support: false,
-        connect_to_dapps: true,
+        connect_to_dapps: false,
         staking: false,
         swaps: false,
-        layer_2: true,
+        layer_2: false,
         gas_fee_customization: false,
         ens_support: false,
-        erc_20_support: true,
-        buy_crypto: true,
+        erc_20_support: false,
+        buy_crypto: false,
         withdraw_crypto: false,
         multisig: false,
         social_recovery: false,

src/pages/wallets/find-wallet.tsx

@@ -44,6 +44,8 @@ import {
   WALLETS_FILTERS_DEFAULT,
 } from "@/lib/constants"
 
+import { useWalletPersonas } from "../../hooks/useWalletPersonas"
+
 import { WalletSupportedLanguageContext } from "@/contexts/WalletSupportedLanguageContext"
 import { useWalletTable } from "@/hooks/useWalletTable"
 import HeroImage from "@/public/images/wallets/wallet-hero.png"
@@ -106,7 +108,7 @@ const FindWalletPage = ({
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const { pathname } = useRouter()
   const { t } = useTranslation("page-wallets-find-wallet")
-
+  const personas = useWalletPersonas()
   const resetWalletFilter = useRef(() => {})
 
   const [filters, setFilters] = useState(WALLETS_FILTERS_DEFAULT)
@@ -122,10 +124,36 @@ const FindWalletPage = ({
     walletCardData,
   } = useWalletTable({ filters, supportedLanguage, t, walletData: wallets })
 
+  const updatePersonaUponFilterChange = (filters) => {
+    const newSelectedPersona: number[] = []
+    const trueFilters = Object.fromEntries(
+      Object.entries(filters).filter(([_, value]) => value)
+    )
+    if (Object.keys(trueFilters).length === 0) {
+      setSelectedPersona([])
+      return
+    }
+
+    for (let i = 0; i < personas.length; i++) {
+      const truePresetFilters = Object.fromEntries(
+        Object.entries(personas[i].presetFilters).filter(([_, value]) => value)
+      )
+      const isPersonaSelected = Object.entries(truePresetFilters).every(
+        ([key, value]) => trueFilters[key] === value
+      )
+      if (isPersonaSelected) {
+        newSelectedPersona.push(i)
+      }
+    }
+
+    setSelectedPersona(newSelectedPersona)
+  }
+
   const updateFilterOption = (key) => {
     const updatedFilters = { ...filters }
     updatedFilters[key] = !updatedFilters[key]
     setFilters(updatedFilters)
+    updatePersonaUponFilterChange(updatedFilters)
   }
 
   const updateFilterOptions = (keys, value) => {
@@ -134,6 +162,7 @@ const FindWalletPage = ({
       updatedFilters[key] = value
     }
     setFilters(updatedFilters)
+    updatePersonaUponFilterChange(updatedFilters)
   }
 
   const resetFilters = () => {