Merge pull request #13066 from ethereum/performance/find-wallets

Performance: fix hydration issues on find wallets page

Author: wackerow

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 {
@@ -13,15 +12,11 @@ import {
   SimpleGrid,
   SimpleGridProps,
   Stack,
-  Table,
   TableProps,
-  Td,
   Text,
-  Th,
-  Tr,
 } 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"
@@ -31,8 +26,7 @@ import Tag from "@/components/Tag"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import {
-  formatSupportedLanguages,
-  getSupportedLanguages,
+  formatStringList,
   getWalletPersonas,
   walletsListingCount,
 } from "@/lib/utils/wallets"
@@ -50,7 +44,7 @@ import { WalletSupportedLanguageContext } from "@/contexts/WalletSupportedLangua
 import { useWalletTable } from "@/hooks/useWalletTable"
 
 const Container = (props: TableProps) => (
-  <Table
+  <Box
     w="full"
     sx={{
       th: {
@@ -75,7 +69,6 @@ const WalletContainer = (props: ChildOnlyProp & ContainerProps) => (
 
 const Grid = forwardRef<SimpleGridProps, "tr">((props, ref) => (
   <SimpleGrid
-    as={Tr}
     ref={ref}
     templateColumns={{
       base: "60% auto 0% 0% 5%",
@@ -123,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}
@@ -207,7 +200,7 @@ export type WalletTableProps = {
   filters: WalletFilter
   resetFilters: () => void
   resetWalletFilter: React.MutableRefObject<() => void>
-  walletData: WalletData[]
+  walletData: Wallet[]
   onOpen: () => void
 }
 
@@ -219,7 +212,6 @@ const WalletTable = ({
   onOpen,
 }: WalletTableProps) => {
   const { t } = useTranslation("page-wallets-find-wallet")
-  const { locale } = useRouter()
   const {
     featureDropdownItems,
     filteredWallets,
@@ -243,7 +235,7 @@ const WalletTable = ({
   return (
     <Container>
       <WalletContentHeader>
-        <Th sx={{ textAlign: "start !important" }}>
+        <Box sx={{ textAlign: "start !important" }}>
           <Flex justifyContent="space-between" px={{ base: 2.5, md: 0 }}>
             {/* Displayed on mobile only */}
             <Text
@@ -277,7 +269,7 @@ const WalletTable = ({
               </Text>
             )}
           </Flex>
-        </Th>
+        </Box>
       </WalletContentHeader>
       {filteredWallets.length === 0 && (
         <WalletEmptyState
@@ -304,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
@@ -335,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)
@@ -346,7 +323,7 @@ const WalletTable = ({
                   showMoreInfo(wallet)
                 }}
               >
-                <Td lineHeight="revert">
+                <Box lineHeight="revert">
                   <Flex
                     justifyContent="space-between"
                     alignItems="center"
@@ -419,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>
@@ -478,8 +455,8 @@ const WalletTable = ({
                       {t("page-find-wallet-visit-website")}
                     </ButtonLink>
                   </Box>
-                </Td>
-              </Wallet>
+                </Box>
+              </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

@@ -622,6 +622,10 @@ export interface WalletData {
   new_to_crypto?: boolean
 }
 
+export type Wallet = 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