diff --git a/src/components/FindWalletProductTable/hooks/useWalletFilters.tsx b/src/components/FindWalletProductTable/hooks/useWalletFilters.tsx index 5bbf4b52cfe..1f5f2641356 100644 --- a/src/components/FindWalletProductTable/hooks/useWalletFilters.tsx +++ b/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 ( + { + 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 ( + { + trackCustomEvent({ + eventCategory: "WalletFilterSidebar", + eventAction: `${locale} - ${t("page-find-wallet-account-upgrades")}`, + eventName: `eip_7702_support ${newInputState}`, + }) + updateFilterState(filterIndex, itemIndex, newInputState) + }} + /> + ) + }, + options: [], + }, ], }, { diff --git a/src/components/icons/wallets/account-upgrades.svg b/src/components/icons/wallets/account-upgrades.svg new file mode 100644 index 00000000000..ecd175f710f --- /dev/null +++ b/src/components/icons/wallets/account-upgrades.svg @@ -0,0 +1,7 @@ + diff --git a/src/components/icons/wallets/index.ts b/src/components/icons/wallets/index.ts index b991e029d5a..dfdc7565174 100644 --- a/src/components/icons/wallets/index.ts +++ b/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, diff --git a/src/components/icons/wallets/smart-accounts.svg b/src/components/icons/wallets/smart-accounts.svg new file mode 100644 index 00000000000..979825e89ad --- /dev/null +++ b/src/components/icons/wallets/smart-accounts.svg @@ -0,0 +1,6 @@ + diff --git a/src/intl/en/page-wallets-find-wallet.json b/src/intl/en/page-wallets-find-wallet.json index dd6fe59ca3a..d03c415d93a 100644 --- a/src/intl/en/page-wallets-find-wallet.json +++ b/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..." } diff --git a/src/lib/constants.ts b/src/lib/constants.ts index d3ef0b5429a..fb5f331ce6a 100644 --- a/src/lib/constants.ts +++ b/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, } diff --git a/src/lib/types.ts b/src/lib/types.ts index a17da107ada..7b6b910095f 100644 --- a/src/lib/types.ts +++ b/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