feat: add Account Abstraction metadata to wallet finder (EIP-4337 & EIP-7702)

src/components/FindWalletProductTable/hooks/useWalletFilters.tsx

@@ -7,6 +7,7 @@ import FindWalletLanguageSelectInput from "@/components/FindWalletProductTable/F
 import Layer2SelectInput from "@/components/FindWalletProductTable/Layer2SelectInput"
 import PrivacyIcon from "@/components/icons/privacy.svg"
 import {
+  AccountUpgradesIcon,
   BrowserIcon,
   BuyCryptoIcon,
   ConnectDappsIcon,
@@ -23,6 +24,7 @@ import {
   NonCustodialIcon,
   OpenSourceWalletIcon,
   RPCImportingIcon,
+  SmartAccountsIcon,
   SocialRecoverIcon,
   StakingIcon,
   SwapIcon,
@@ -904,6 +906,60 @@ export const useWalletFilters = (): FilterOption[] => {
           },
           options: [],
         },
+        {
+          filterKey: "eip_4337_support",
+          filterLabel: t("page-find-wallet-smart-accounts"),
+          description: t("page-find-wallet-smart-accounts-desc"),
+          inputState: false,
+          input: (filterIndex, itemIndex, inputState, updateFilterState) => {
+            return (
+              <SwitchFilterInput
+                Icon={SmartAccountsIcon}
+                label={t("page-find-wallet-smart-accounts")}
+                description={t("page-find-wallet-smart-accounts-desc")}
+                filterIndex={filterIndex}
+                itemIndex={itemIndex}
+                inputState={inputState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${locale} - ${t("page-find-wallet-smart-accounts")}`,
+                    eventName: `eip_4337_support ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
+              />
+            )
+          },
+          options: [],
+        },
+        {
+          filterKey: "eip_7702_support",
+          filterLabel: t("page-find-wallet-account-upgrades"),
+          description: t("page-find-wallet-account-upgrades-desc"),
+          inputState: false,
+          input: (filterIndex, itemIndex, inputState, updateFilterState) => {
+            return (
+              <SwitchFilterInput
+                Icon={AccountUpgradesIcon}
+                label={t("page-find-wallet-account-upgrades")}
+                description={t("page-find-wallet-account-upgrades-desc")}
+                filterIndex={filterIndex}
+                itemIndex={itemIndex}
+                inputState={inputState}
+                updateFilterState={(filterIndex, itemIndex, newInputState) => {
+                  trackCustomEvent({
+                    eventCategory: "WalletFilterSidebar",
+                    eventAction: `${locale} - ${t("page-find-wallet-account-upgrades")}`,
+                    eventName: `eip_7702_support ${newInputState}`,
+                  })
+                  updateFilterState(filterIndex, itemIndex, newInputState)
+                }}
+              />
+            )
+          },
+          options: [],
+        },
       ],
     },
     {

src/components/icons/wallets/index.ts

@@ -1,3 +1,4 @@
+import AccountUpgradesIcon from "./account-upgrades.svg"
 import BrowserIcon from "./browser.svg"
 import BuyCryptoIcon from "./buy-crypto.svg"
 import ConnectDappsIcon from "./connect-dapps.svg"
@@ -16,12 +17,14 @@ import NFTSupportIcon from "./nft-support.svg"
 import NonCustodialIcon from "./non-custodial.svg"
 import OpenSourceWalletIcon from "./open-source-wallet.svg"
 import RPCImportingIcon from "./rpc-importing.svg"
+import SmartAccountsIcon from "./smart-accounts.svg"
 import SocialRecoverIcon from "./social-recover.svg"
 import StakingIcon from "./staking.svg"
 import SwapIcon from "./swap.svg"
 import WithdrawCryptoIcon from "./withdraw-crypto.svg"
 
 export {
+  AccountUpgradesIcon,
   BrowserIcon,
   BuyCryptoIcon,
   ConnectDappsIcon,
@@ -40,6 +43,7 @@ export {
   NonCustodialIcon,
   OpenSourceWalletIcon,
   RPCImportingIcon,
+  SmartAccountsIcon,
   SocialRecoverIcon,
   StakingIcon,
   SwapIcon,

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

@@ -86,6 +86,10 @@
   "page-find-wallet-empty-results-desc": "There are no wallets matching your criteria, try removing some filters.",
   "page-find-wallet-privacy": "Privacy",
   "page-find-wallet-privacy-desc": "Wallets that support built-in private transactions",
+  "page-find-wallet-smart-accounts": "Smart accounts",
+  "page-find-wallet-smart-accounts-desc": "Use a smart contract as your wallet account. Pay gas fees with tokens other than ETH, recover your wallet if you lose your keys, and bundle multiple actions into one transaction.",
+  "page-find-wallet-account-upgrades": "Account upgrades",
+  "page-find-wallet-account-upgrades-desc": "Add smart features to your existing account. Keep your existing address while gaining abilities like batched transactions and sponsored gas fees.",
   "page-find-wallet-see-wallets": "See wallets",
   "page-find-wallet-search-languages": "Search languages..."
 }

src/lib/constants.ts

@@ -104,6 +104,8 @@ export const WALLETS_FILTERS_DEFAULT = {
   withdraw_crypto: false,
   multisig: false,
   social_recovery: false,
+  eip_4337_support: false,
+  eip_7702_support: false,
   new_to_crypto: false,
 }
 

src/lib/types.ts

@@ -784,6 +784,8 @@ export type WalletData = {
   withdraw_crypto: boolean
   multisig: boolean
   social_recovery: boolean
+  eip_4337_support?: boolean
+  eip_7702_support?: boolean
   onboard_documentation: string
   documentation: string
   mpc?: boolean