Merge pull request #12522 from ethereum/find-wallet-revamp

feat: /wallets/find-wallet revamp ✨

Author: pettinarip

package.json

@@ -36,6 +36,7 @@
     "i18next": "^23.6.0",
     "lodash.merge": "^4.6.2",
     "lodash.shuffle": "^4.2.0",
+    "lodash.union": "^4.6.0",
     "next": "13.4.8",
     "next-i18next": "^14.0.3",
     "next-mdx-remote": "^3.0.8",

public/content/translations/es/developers/tutorials/how-to-mint-an-nft/index.md

@@ -3,7 +3,7 @@ title: Como acuñar un NFT (parte 2/3 de la serie de tutoriales de NFT)
 description: Este tutorial describe como acuñar un NFT en la cadena de bloques de Ethereum usando nuestro contrato inteligente y Web3.
 author: "Sumi Mudgil"
 tags:
-  - "NTF"
+  - "NFT"
   - "ERC-721"
   - "alchemy"
   - "solidity"

public/content/translations/es/developers/tutorials/how-to-view-nft-in-metamask/index.md

@@ -3,7 +3,7 @@ title: Cómo visualizar su NFT en su cartera (parte 3/3 de la serie de tutoriale
 description: Este tutorial explica cómo visualizar un NFT en MetaMask
 author: "Sumi Mudgil"
 tags:
-  - "NTF"
+  - "NFT"
   - "ERC-721"
   - "Alchemy"
   - "tókenes no fungibles"

public/content/translations/es/developers/tutorials/how-to-write-and-deploy-an-nft/index.md

@@ -3,7 +3,7 @@ title: Cómo escribir & y desplegar un NFT (parte 1/3 de la serie de tutoriales
 description: Este tutorial es la parte 1 de una serie sobre NFT que le indicará cómo escribir y desplegar un contrato inteligente de un token no fungible o NFT (ERC-721 token) paso a paso usando Ethereum y el sistema de archivos interplanetario (IPFS).
 author: "Sumi Mudgil"
 tags:
-  - "NTF"
+  - "NFT"
   - "ERC-721"
   - "Alchemy"
   - "Solidity"

public/wallets/find-wallet-hero.png

@@ -129,7 +129,7 @@ const DataProductCard = ({
                       objectFit="cover"
                       alt=""
                       minWidth="24px"
-                      me="0.5rem"
+                      me={2}
                     />
                   )}
                   {coin}

public/wallets/okx.jpeg

@@ -0,0 +1,150 @@
+import { ReactNode, useContext } from "react"
+import { useRouter } from "next/router"
+import { useTranslation } from "next-i18next"
+import {
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Heading,
+  List,
+  Text,
+} from "@chakra-ui/react"
+
+import Select from "@/components/Select"
+
+import { getLanguageCodeName } from "@/lib/utils/intl"
+import { trackCustomEvent } from "@/lib/utils/matomo"
+import {
+  getAllWalletsLanguages,
+  getWalletsTopLanguages,
+} from "@/lib/utils/wallets"
+
+import { WalletSupportedLanguageContext } from "@/contexts/WalletSupportedLanguageContext"
+
+export const LanguageSupportFilter = () => {
+  const { t } = useTranslation("page-wallets-find-wallet")
+  const { locale } = useRouter()
+
+  // Context API
+  const { supportedLanguage, setSupportedLanguage } = useContext(
+    WalletSupportedLanguageContext
+  )
+
+  const allWalletsLanguages = getAllWalletsLanguages(locale!)
+  const allWalletsLanguagesOptions = allWalletsLanguages!.map(
+    ({ langCode, langName }) => {
+      return {
+        label: langName,
+        value: langCode,
+      }
+    }
+  )
+
+  const handleLanguageFilterSelectChange = (selectedLanguage) => {
+    if (!selectedLanguage) return
+
+    setSupportedLanguage(selectedLanguage.value)
+
+    trackCustomEvent({
+      eventCategory: "WalletFilterSidebar",
+      eventAction: `Language search`,
+      eventName: getLanguageCodeName(selectedLanguage.value, locale!),
+    })
+  }
+
+  const handleTopLanguageClick = (languageCode: string) => {
+    setSupportedLanguage(languageCode)
+
+    trackCustomEvent({
+      eventCategory: "WalletFilterSidebar",
+      eventAction: `Language search`,
+      eventName: getLanguageCodeName(languageCode, locale!),
+    })
+  }
+
+  return (
+    <AccordionItem
+      background="background.highlight"
+      borderRadius="base"
+      borderColor="transparent"
+      p={6}
+      zIndex={1}
+    >
+      {({ isExpanded }) => (
+        <>
+          <Heading
+            as="h3"
+            borderBottom={isExpanded ? "1px" : "none"}
+            borderColor="body.light"
+            fontSize="lg"
+            fontWeight={600}
+            lineHeight={1.4}
+            py={1}
+            ps={4}
+            pe={2.5}
+            borderRadius={1}
+            _hover={{ color: "primary.hover" }}
+          >
+            <AccordionButton
+              color="inherit"
+              fontWeight="inherit"
+              fontSize="inherit"
+              p={0}
+              textAlign="initial"
+              _hover={{ background: "transparent" }}
+            >
+              <Text as="span" flex={1}>
+                {t("page-find-wallet-languages-supported")}
+              </Text>
+
+              <AccordionIcon
+                color="primary.base"
+                boxSize={9}
+                _hover={{ color: "primary.hover" }}
+              />
+            </AccordionButton>
+          </Heading>
+
+          <AccordionPanel as={List} p={0} m={0}>
+            <Select
+              instanceId="language-support-filter"
+              aria-label={t("page-find-wallet-languages-supported")}
+              aria-placeholder={t("page-find-wallet-languages-search-language")}
+              options={allWalletsLanguagesOptions}
+              onChange={handleLanguageFilterSelectChange}
+              placeholder={getLanguageCodeName(supportedLanguage, locale!)}
+              isSearchable
+              variant="outline"
+            />
+
+            <Box mt={2}>
+              <Text color="body.medium" size="sm">
+                {t("page-find-wallet-popular-languages")}
+              </Text>
+
+              {getWalletsTopLanguages(5, locale!)
+                .map<ReactNode>((language) => {
+                  return (
+                    <Text
+                      key={language.code}
+                      as="span"
+                      color="primary.base"
+                      size="sm"
+                      cursor="pointer"
+                      onClick={() => handleTopLanguageClick(language.code)}
+                    >
+                      {language.langName}
+                    </Text>
+                  )
+                })
+                // `.reduce()` used to generate the comma separator between languages
+                .reduce((prev, curr) => [prev, ", ", curr])}
+            </Box>
+          </AccordionPanel>
+        </>
+      )}
+    </AccordionItem>
+  )
+}

src/components/DataProductCard.tsx

@@ -0,0 +1,87 @@
+import { useContext } from "react"
+import { useTranslation } from "next-i18next"
+import { Box, Text } from "@chakra-ui/react"
+
+import { WalletFilter } from "@/lib/types"
+
+import { Button } from "@/components/Buttons"
+
+import { trackCustomEvent } from "@/lib/utils/matomo"
+import { walletsListingCount } from "@/lib/utils/wallets"
+
+import { DEFAULT_LOCALE, NAV_BAR_PX_HEIGHT } from "@/lib/constants"
+
+import { FilterBurgerIcon } from "../icons/wallets"
+
+import { WalletSupportedLanguageContext } from "@/contexts/WalletSupportedLanguageContext"
+
+interface MobileFiltersButtonProps {
+  filters: WalletFilter
+  showMobileSidebar: boolean
+  onOpen: () => void
+  onClose: () => void
+}
+
+export const MobileFiltersButton = ({
+  filters,
+  showMobileSidebar,
+  onOpen,
+  onClose,
+}: MobileFiltersButtonProps) => {
+  const { t } = useTranslation("page-wallets-find-wallet")
+
+  // Context API
+  const { supportedLanguage } = useContext(WalletSupportedLanguageContext)
+
+  const handleClick = () => {
+    showMobileSidebar ? onClose() : onOpen()
+
+    trackCustomEvent({
+      eventCategory: "MobileFilterToggle",
+      eventAction: `Tap MobileFilterToggle`,
+      eventName: `show mobile filters ${!showMobileSidebar}`,
+    })
+  }
+
+  return (
+    <Box
+      position="sticky"
+      top={NAV_BAR_PX_HEIGHT}
+      bg="background.base"
+      w="full"
+      zIndex="docked"
+      py="5px"
+    >
+      <Button
+        rightIcon={<FilterBurgerIcon />}
+        variant="outline"
+        border="none"
+        ps={0}
+        ms={4}
+        gap={4}
+        sx={{
+          svg: {
+            boxSize: 8,
+            line: { stroke: "primary.base" },
+            circle: { stroke: "primary.base" },
+          },
+        }}
+        onClick={handleClick}
+      >
+        <Box>
+          <Text align="start">{t("page-find-wallet-filters")}</Text>
+          <Text
+            align="start"
+            fontSize="sm"
+            lineHeight="14px"
+            color="body.medium"
+          >
+            {walletsListingCount(filters) +
+              (supportedLanguage === DEFAULT_LOCALE ? 0 : 1)}{" "}
+            {t("page-find-wallet-active")}
+          </Text>
+        </Box>
+      </Button>
+    </Box>
+  )
+}