format the language support for each wallet at build time

Author: pettinarip

src/components/FindWallet/MobileFiltersMenu.tsx

@@ -10,9 +10,9 @@ import {
   Flex,
 } from "@chakra-ui/react"
 
-import { Button } from "@/components/Buttons"
+import type { Wallet } from "@/lib/types"
 
-import walletData from "@/data/wallets/wallet-data"
+import { Button } from "@/components/Buttons"
 
 import OldHeading from "../OldHeading"
 
@@ -26,12 +26,14 @@ import WalletFilterSidebar, {
 import { useWalletTable } from "@/hooks/useWalletTable"
 
 type MobileFiltersMenuProps = WalletFilterSidebarProps & {
+  walletData: Wallet[]
   showMobileSidebar: boolean
   onOpen: () => void
   onClose: () => void
 }
 
 export const MobileFiltersMenu = ({
+  walletData,
   filters,
   resetWalletFilter,
   resetFilters,

src/components/FindWallet/WalletTable/SupportedLanguagesTooltip.tsx

@@ -1,22 +1,27 @@
-import { Box, Text } from "@chakra-ui/react"
+import { Text } from "@chakra-ui/react"
 
 import Tooltip from "@/components/Tooltip"
 
-import { formatSupportedLanguages } from "@/lib/utils/wallets"
+import { formatStringList } from "@/lib/utils/wallets"
 
 import { NUMBER_OF_SUPPORTED_LANGUAGES_SHOWN } from "@/lib/constants"
 
 type SupportedLanguagesTooltipProps = {
   supportedLanguages: string[]
-  restText: string
 }
 
 // Tooltip to show other supported languages on a wallet
 export const SupportedLanguagesTooltip = ({
   supportedLanguages,
-  restText,
 }: SupportedLanguagesTooltipProps) => {
-  const tooltipContent = formatSupportedLanguages(
+  const numberOfSupportedLanguages = supportedLanguages.length
+  const rest = numberOfSupportedLanguages - NUMBER_OF_SUPPORTED_LANGUAGES_SHOWN
+
+  if (rest <= 0) {
+    return null
+  }
+
+  const tooltipContent = formatStringList(
     supportedLanguages.slice(NUMBER_OF_SUPPORTED_LANGUAGES_SHOWN)
   )
 
@@ -28,7 +33,7 @@ export const SupportedLanguagesTooltip = ({
         fontSize="md !important"
         fontWeight="normal !important"
       >
-        {restText}
+        + {rest}
       </Text>
     </Tooltip>
   )

src/components/FindWallet/WalletTable/index.tsx

@@ -1,5 +1,4 @@
 import { ReactNode, useContext } from "react"
-import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { MdExpandLess, MdExpandMore } from "react-icons/md"
 import {
@@ -17,7 +16,7 @@ import {
   Text,
 } from "@chakra-ui/react"
 
-import { ChildOnlyProp, WalletData, WalletFilter } from "@/lib/types"
+import type { ChildOnlyProp, Wallet, WalletFilter } from "@/lib/types"
 
 import { ButtonLink } from "@/components/Buttons"
 import { WalletMoreInfo } from "@/components/FindWallet/WalletTable/WalletMoreInfo"
@@ -27,8 +26,7 @@ import Tag from "@/components/Tag"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import {
-  formatSupportedLanguages,
-  getSupportedLanguages,
+  formatStringList,
   getWalletPersonas,
   walletsListingCount,
 } from "@/lib/utils/wallets"
@@ -118,7 +116,7 @@ const WalletContentHeader = (props: ChildOnlyProp) => (
   />
 )
 
-const Wallet = forwardRef<ChildOnlyProp, "tr">((props, ref) => (
+const WalletRow = forwardRef<ChildOnlyProp, "tr">((props, ref) => (
   <Grid
     tabIndex={0}
     ref={ref}
@@ -202,7 +200,7 @@ export type WalletTableProps = {
   filters: WalletFilter
   resetFilters: () => void
   resetWalletFilter: React.MutableRefObject<() => void>
-  walletData: WalletData[]
+  walletData: Wallet[]
   onOpen: () => void
 }
 
@@ -214,7 +212,6 @@ const WalletTable = ({
   onOpen,
 }: WalletTableProps) => {
   const { t } = useTranslation("page-wallets-find-wallet")
-  const { locale } = useRouter()
   const {
     featureDropdownItems,
     filteredWallets,
@@ -299,21 +296,6 @@ const WalletTable = ({
           const hasDeviceLabels = deviceLabels.length > 0
           const hasAllLabels = hasPersonasLabels && hasDeviceLabels
 
-          // Supported languages
-          const supportedLanguages = getSupportedLanguages(
-            wallet.languages_supported,
-            locale!
-          )
-          const numberOfSupportedLanguages = supportedLanguages.length
-          const sliceSize = NUMBER_OF_SUPPORTED_LANGUAGES_SHOWN
-          const rest = numberOfSupportedLanguages - sliceSize
-          const restText = `${rest > 0 ? "+" : ""} ${rest > 0 ? rest : ""}`
-
-          const formattedSupportedLanguages = formatSupportedLanguages(
-            supportedLanguages,
-            sliceSize
-          )
-
           const showMoreInfo = (wallet) => {
             updateMoreInfo(wallet.key)
             // Log "more info" event only on expanding
@@ -330,7 +312,7 @@ const WalletTable = ({
               key={wallet.key}
               bg={wallet.moreInfo ? "background.highlight" : "transparent"}
             >
-              <Wallet
+              <WalletRow
                 // Make wallets more info section open on 'Enter'
                 onKeyUp={(e) => {
                   if (e.key === "Enter") showMoreInfo(wallet)
@@ -414,13 +396,13 @@ const WalletTable = ({
                                 fontWeight="normal !important"
                               >
                                 {/* Show up to 5 supported languages and use a tooltip for the rest */}
-                                {`${formattedSupportedLanguages}`}{" "}
-                                {rest > 0 && (
-                                  <SupportedLanguagesTooltip
-                                    supportedLanguages={supportedLanguages}
-                                    restText={restText}
-                                  />
-                                )}
+                                {`${formatStringList(
+                                  wallet.supportedLanguages,
+                                  NUMBER_OF_SUPPORTED_LANGUAGES_SHOWN
+                                )}`}{" "}
+                                <SupportedLanguagesTooltip
+                                  supportedLanguages={wallet.supportedLanguages}
+                                />
                               </Text>
                             </Flex>
                           </Stack>
@@ -474,7 +456,7 @@ const WalletTable = ({
                     </ButtonLink>
                   </Box>
                 </Box>
-              </Wallet>
+              </WalletRow>
 
               {wallet.moreInfo && (
                 <WalletMoreInfo

src/hooks/useWalletTable.tsx

@@ -1,12 +1,12 @@
 import { useContext, useEffect, useState } from "react"
 
-import { DropdownOption } from "@/lib/types"
-
-import { WalletTableProps } from "@/components/FindWallet/WalletTable"
+import type { DropdownOption, Wallet, WalletFilter } from "@/lib/types"
 
 import { WalletSupportedLanguageContext } from "@/contexts/WalletSupportedLanguageContext"
 
-type UseWalletTableProps = Pick<WalletTableProps, "filters" | "walletData"> & {
+type UseWalletTableProps = {
+  walletData: Wallet[]
+  filters: WalletFilter
   t: (x: string) => string
 }
 

src/lib/types.ts

@@ -581,6 +581,10 @@ export interface WalletData {
   new_to_crypto?: boolean
 }
 
+export interface Wallet extends WalletData {
+  supportedLanguages: string[]
+}
+
 export type WalletFilter = typeof WALLETS_FILTERS_DEFAULT
 
 export interface WalletFilterData {

src/lib/utils/wallets.ts

@@ -12,7 +12,7 @@ import {
   NEW_TO_CRYPTO_FEATURES,
   NFTS_FEATURES,
 } from "../constants"
-import { WalletData, WalletFilter } from "../types"
+import type { WalletData, WalletFilter } from "../types"
 
 export const getSupportedLocaleWallets = (locale: string) =>
   shuffle(
@@ -65,21 +65,21 @@ export const getWalletPersonas = (wallet: WalletData) => {
 
 // Get a list of wallet supported languages with native title
 export const getSupportedLanguages = (
-  walletSupportedLanguages: string[],
+  supportedLanguageCodes: string[],
   locale: string
 ) => {
   const supportedLanguages = [] as string[]
 
   // current locale should appear first on the list, this manipulates the array to move it to the top if needed
   const supportsCurrentLocale = (current) => current === locale
-  const localeIndex = walletSupportedLanguages.findIndex(supportsCurrentLocale)
+  const localeIndex = supportedLanguageCodes.findIndex(supportsCurrentLocale)
 
   if (localeIndex >= 0) {
-    walletSupportedLanguages.splice(localeIndex, 1)
-    walletSupportedLanguages.unshift(locale)
+    supportedLanguageCodes.splice(localeIndex, 1)
+    supportedLanguageCodes.unshift(locale)
   }
 
-  walletSupportedLanguages.forEach((supportedLanguage) => {
+  supportedLanguageCodes.forEach((supportedLanguage) => {
     // Get supported language name
     const supportedLanguageName = getLanguageCodeName(supportedLanguage, locale)
     // Capitalize supported language name
@@ -90,13 +90,8 @@ export const getSupportedLanguages = (
 }
 
 // Format languages list to be displayed on UI label
-export const formatSupportedLanguages = (
-  supportedLanguages: string[],
-  sliceSize?: number
-) => {
-  return sliceSize
-    ? supportedLanguages.slice(0, sliceSize).join(", ")
-    : supportedLanguages.join(", ")
+export const formatStringList = (strings: string[], sliceSize?: number) => {
+  return sliceSize ? strings.slice(0, sliceSize).join(", ") : strings.join(", ")
 }
 
 // Get border custom color for Persona filter

src/pages/wallets/find-wallet.tsx

@@ -1,19 +1,11 @@
-import { useEffect, useRef, useState } from "react"
+import { useRef, useState } from "react"
 import { GetStaticProps, InferGetStaticPropsType } from "next"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-import {
-  Box,
-  calc,
-  Center,
-  Flex,
-  Text,
-  useDisclosure,
-  useTheme,
-} from "@chakra-ui/react"
+import { Box, calc, Center, Flex, Text, useDisclosure } from "@chakra-ui/react"
 
-import { BasePageProps, ChildOnlyProp, WalletData } from "@/lib/types"
+import type { BasePageProps, ChildOnlyProp, Wallet } from "@/lib/types"
 
 import BannerNotification from "@/components/BannerNotification"
 import Breadcrumbs from "@/components/Breadcrumbs"
@@ -32,6 +24,7 @@ import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 import {
   getNonSupportedLocaleWallets,
+  getSupportedLanguages,
   getSupportedLocaleWallets,
 } from "@/lib/utils/wallets"
 
@@ -57,7 +50,7 @@ const Subtitle = ({ children }: ChildOnlyProp) => (
 )
 
 type Props = BasePageProps & {
-  wallets: WalletData[]
+  wallets: Wallet[]
 }
 
 export const getStaticProps = (async ({ locale }) => {
@@ -71,7 +64,15 @@ export const getStaticProps = (async ({ locale }) => {
 
   const supportedLocaleWallets = getSupportedLocaleWallets(locale!)
   const noSupportedLocaleWallets = getNonSupportedLocaleWallets(locale!)
-  const wallets = supportedLocaleWallets.concat(noSupportedLocaleWallets)
+  const walletsData = supportedLocaleWallets.concat(noSupportedLocaleWallets)
+
+  const wallets = walletsData.map((wallet) => ({
+    ...wallet,
+    supportedLanguages: getSupportedLanguages(
+      wallet.languages_supported,
+      locale!
+    ),
+  }))
 
   return {
     props: {
@@ -196,6 +197,7 @@ const FindWalletPage = ({
         {/* Mobile filters menu */}
         <Box hideFrom="lg">
           <MobileFiltersMenu
+            walletData={wallets}
             filters={filters}
             resetWalletFilter={resetWalletFilter}
             updateFilterOption={updateFilterOption}