Find wallets optimizations

app/[locale]/apps/[application]/page.tsx

@@ -8,7 +8,7 @@ import {
 
 import { ChainName } from "@/lib/types"
 
-import { ChainImages } from "@/components/ChainImages"
+import ChainImages from "@/components/ChainImages"
 import { ChevronNext } from "@/components/Chevron"
 import I18nProvider from "@/components/I18nProvider"
 import Discord from "@/components/icons/discord.svg"

app/[locale]/wallets/find-wallet/page.tsx

@@ -35,6 +35,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
 
   const wallets = walletsData.map((wallet) => ({
     ...wallet,
+    id: wallet.name,
     supportedLanguages: getSupportedLanguages(
       wallet.languages_supported,
       locale!

package.json

@@ -59,6 +59,7 @@
     "@socialgouv/matomo-next": "^1.8.0",
     "@tanstack/react-query": "^5.66.7",
     "@tanstack/react-table": "^8.19.3",
+    "@tanstack/react-virtual": "^3.13.12",
     "@types/canvas-confetti": "^1.9.0",
     "@types/three": "^0.177.0",
     "@wagmi/core": "^2.17.3",

src/components/ChainImages/index.tsx

@@ -1,3 +1,5 @@
+import { memo } from "react"
+
 import { ChainName } from "@/lib/types"
 
 import { Image } from "@/components/Image"
@@ -11,7 +13,7 @@ interface ChainImagesProps {
   className?: string
 }
 
-export const ChainImages = ({
+const ChainImages = ({
   chains,
   size = 24,
   className = "",
@@ -29,12 +31,18 @@ export const ChainImages = ({
           (network) => network.chainName === chain
         )
         return (
-          <div key={chain} className="overflow-hidden rounded-full">
+          <div
+            key={chain}
+            className="inline-flex items-center justify-center overflow-hidden rounded-full leading-none"
+            style={{
+              height: `${size}px`,
+            }}
+          >
             <Tooltip content={chainData?.name || ""}>
               <Image
                 src={chainData?.logo || ""}
                 alt={`${chain} blockchain network`}
-                className="rounded-full"
+                className="block rounded-full"
                 style={{
                   objectFit: "contain",
                   width: `${size}px`,
@@ -48,3 +56,5 @@ export const ChainImages = ({
     </div>
   )
 }
+
+export default memo(ChainImages)

src/components/FindWalletProductTable/FindWalletProductTable.stories.tsx

@@ -134,6 +134,7 @@ export const WalletProductTableStory: Story = {
     wallets: walletsData.map((wallet) => {
       return {
         ...wallet,
+        id: wallet.name,
         languages_supported: wallet.languages_supported as Lang[],
         supportedLanguages: wallet.languages_supported as Lang[],
         supported_chains: [],

src/components/FindWalletProductTable/PersonaTags.tsx

@@ -0,0 +1,27 @@
+import { memo } from "react"
+
+import { Tag } from "../ui/tag"
+
+import { useTranslation } from "@/hooks/useTranslation"
+
+type PersonaTagsProps = {
+  walletPersonas: string[]
+}
+
+const PersonaTags = ({ walletPersonas }: PersonaTagsProps) => {
+  const { t } = useTranslation("page-wallets-find-wallet")
+
+  if (walletPersonas.length === 0) return null
+
+  return (
+    <div className="flex flex-row flex-wrap gap-1">
+      {walletPersonas.map((persona) => (
+        <Tag key={persona} variant="high-contrast" size="small">
+          {t(persona)}
+        </Tag>
+      ))}
+    </div>
+  )
+}
+
+export default memo(PersonaTags)

src/components/FindWalletProductTable/WalletInfo.tsx

@@ -1,96 +1,124 @@
+import { memo, useMemo } from "react"
 import { ChevronDown, ChevronUp } from "lucide-react"
 
-import { ChainName, Wallet } from "@/lib/types"
+import type { ChainName, Wallet } from "@/lib/types"
 
-import { ChainImages } from "@/components/ChainImages"
+import ChainImages from "@/components/ChainImages"
 import { DevicesIcon, LanguagesIcon } from "@/components/icons/wallets"
 import { Image } from "@/components/Image"
 import { SupportedLanguagesTooltip } from "@/components/SupportedLanguagesTooltip"
-import { Tag } from "@/components/ui/tag"
 
+import { breakpointAsNumber } from "@/lib/utils/screen"
 import { formatStringList, getWalletPersonas } from "@/lib/utils/wallets"
 
+import { NUMBER_OF_SUPPORTED_LANGUAGES_SHOWN } from "@/lib/constants"
+
+import MediaQuery from "../MediaQuery"
 import { ButtonLink } from "../ui/buttons/Button"
 
+import PersonaTags from "./PersonaTags"
+
 import { useTranslation } from "@/hooks/useTranslation"
 
 interface WalletInfoProps {
   wallet: Wallet
-  isExpanded: boolean
 }
 
-const WalletInfo = ({ wallet, isExpanded }: WalletInfoProps) => {
+const WalletInfo = ({ wallet }: WalletInfoProps) => {
   const { t } = useTranslation("page-wallets-find-wallet")
-  const walletPersonas = getWalletPersonas(wallet)
-  const deviceLabels: Array<string> = []
-
-  wallet.ios && deviceLabels.push(t("page-find-wallet-iOS"))
-  wallet.android && deviceLabels.push(t("page-find-wallet-android"))
-  wallet.linux && deviceLabels.push(t("page-find-wallet-linux"))
-  wallet.windows && deviceLabels.push(t("page-find-wallet-windows"))
-  wallet.macOS && deviceLabels.push(t("page-find-wallet-macOS"))
-  wallet.chromium && deviceLabels.push(t("page-find-wallet-chromium"))
-  wallet.firefox && deviceLabels.push(t("page-find-wallet-firefox"))
-  wallet.hardware && deviceLabels.push(t("page-find-wallet-hardware"))
+
+  const walletPersonas = useMemo(() => {
+    return getWalletPersonas(wallet)
+  }, [wallet])
+
+  const deviceLabels = useMemo(() => {
+    const labels: Array<string> = []
+    if (wallet.ios) labels.push(t("page-find-wallet-iOS"))
+    if (wallet.android) labels.push(t("page-find-wallet-android"))
+    if (wallet.linux) labels.push(t("page-find-wallet-linux"))
+    if (wallet.windows) labels.push(t("page-find-wallet-windows"))
+    if (wallet.macOS) labels.push(t("page-find-wallet-macOS"))
+    if (wallet.chromium) labels.push(t("page-find-wallet-chromium"))
+    if (wallet.firefox) labels.push(t("page-find-wallet-firefox"))
+    if (wallet.hardware) labels.push(t("page-find-wallet-hardware"))
+    return labels
+  }, [wallet, t])
+
+  const deviceLabelsText = useMemo(() => {
+    return deviceLabels.join(" · ")
+  }, [deviceLabels])
+
+  const formattedLanguages = useMemo(() => {
+    return formatStringList(
+      wallet.supportedLanguages,
+      NUMBER_OF_SUPPORTED_LANGUAGES_SHOWN
+    )
+  }, [wallet.supportedLanguages])
+
+  const hasExtraLanguages = useMemo(() => {
+    return (
+      wallet.supportedLanguages.length > NUMBER_OF_SUPPORTED_LANGUAGES_SHOWN
+    )
+  }, [wallet.supportedLanguages])
 
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-row items-center justify-between gap-4">
         <div className="flex flex-col gap-4">
-          <div className="hidden flex-row gap-4 lg:flex">
-            <Image
-              src={wallet.image}
-              alt=""
-              style={{ objectFit: "contain", width: "56px", height: "56px" }}
-            />
-            <div className="flex flex-col gap-2">
-              <p className="text-xl font-bold">{wallet.name}</p>
-              {walletPersonas.length > 0 && (
-                <div className="flex flex-row flex-wrap gap-1">
-                  {walletPersonas.map((persona) => (
-                    <Tag key={persona} variant="high-contrast" size="small">
-                      {t(persona)}
-                    </Tag>
-                  ))}
-                </div>
-              )}
-              <ChainImages
-                chains={wallet.supported_chains as ChainName[]}
-                className={`ml-2 mt-1 ${
-                  walletPersonas.length === 0 ? "mb-4" : ""
-                }`}
-              />
-            </div>
-          </div>
-          <div className="flex flex-col gap-4 lg:hidden">
-            <div className="flex flex-row items-center gap-4">
+          {/* Desktop layout */}
+          <MediaQuery queries={[`(min-width: ${breakpointAsNumber.lg}px)`]}>
+            <div className="hidden flex-row gap-4 lg:flex">
               <Image
                 src={wallet.image}
                 alt=""
-                style={{ objectFit: "contain", width: "24px", height: "24px" }}
+                style={{ objectFit: "contain", width: "56px", height: "56px" }}
               />
-              <p className="text-xl font-bold">{wallet.name}</p>
-            </div>
-            <div>
-              {walletPersonas.length > 0 && (
-                <div className="flex flex-row flex-wrap gap-1">
-                  {walletPersonas.map((persona) => (
-                    <Tag key={persona} variant="high-contrast" size="small">
-                      {t(persona)}
-                    </Tag>
-                  ))}
+              <div className="flex flex-col gap-2">
+                <p className="text-xl font-bold">{wallet.name}</p>
+
+                <PersonaTags walletPersonas={walletPersonas} />
+
+                <div
+                  className={`ms-2 ${walletPersonas.length === 0 ? "mb-4" : ""} mt-1`}
+                >
+                  <ChainImages
+                    chains={wallet.supported_chains as ChainName[]}
+                    className={`ms-2 ${walletPersonas.length === 0 ? "mb-4" : ""}`}
+                  />
                 </div>
-              )}
+              </div>
             </div>
-            <ChainImages
-              chains={wallet.supported_chains as ChainName[]}
-              className={`ml-2 ${walletPersonas.length === 0 ? "mb-4" : ""}`}
-            />
-          </div>
+          </MediaQuery>
+
+          {/* Mobile layout */}
+          <MediaQuery queries={[`(max-width: ${breakpointAsNumber.lg - 1}px)`]}>
+            <div className="flex flex-col gap-4 lg:hidden">
+              <div className="flex flex-row items-center gap-4">
+                <Image
+                  src={wallet.image}
+                  alt=""
+                  style={{
+                    objectFit: "contain",
+                    width: "24px",
+                    height: "24px",
+                  }}
+                />
+                <p className="text-xl font-bold">{wallet.name}</p>
+              </div>
+              <div>
+                <PersonaTags walletPersonas={walletPersonas} />
+              </div>
+              <ChainImages
+                chains={wallet.supported_chains as ChainName[]}
+                className={`ms-2 ${walletPersonas.length === 0 ? "mb-4" : ""}`}
+              />
+            </div>
+          </MediaQuery>
+
           <div className="flex flex-row gap-4">
             <div className="relative hidden w-14 lg:block">
               <div
-                className={`${isExpanded ? "block" : "hidden"} absolute -bottom-9 -top-0 left-1/2 w-1 -translate-x-1/2 transform ${wallet.twBackgroundColor}`}
+                className={`absolute -bottom-9 -top-0 left-1/2 hidden w-1 -translate-x-1/2 transform group-data-[state=open]/collapsible:block ${wallet.twBackgroundColor}`}
               />
             </div>
             <div
@@ -99,35 +127,34 @@ const WalletInfo = ({ wallet, isExpanded }: WalletInfoProps) => {
               {deviceLabels.length > 0 && (
                 <div className="flex flex-row gap-2">
                   <DevicesIcon className="size-6" />
-                  <p className="text-md">{deviceLabels.join(" · ")}</p>
+                  <p className="text-md">{deviceLabelsText}</p>
                 </div>
               )}
               <div className="flex flex-row gap-2">
                 <LanguagesIcon className="size-6" />
                 <p className="text-md">
-                  {formatStringList(wallet.supportedLanguages, 5)}{" "}
-                  <SupportedLanguagesTooltip
-                    supportedLanguages={wallet.supportedLanguages}
-                  />
+                  {formattedLanguages}{" "}
+                  {hasExtraLanguages && (
+                    <SupportedLanguagesTooltip
+                      supportedLanguages={wallet.supportedLanguages}
+                    />
+                  )}
                 </p>
               </div>
             </div>
           </div>
         </div>
         <div>
           <button className="text-primary">
-            {isExpanded ? (
-              <ChevronUp className="text-2xl" />
-            ) : (
-              <ChevronDown className="text-2xl" />
-            )}
+            <ChevronUp className="text-2xl group-data-[state=closed]/collapsible:hidden" />
+            <ChevronDown className="text-2xl group-data-[state=open]/collapsible:hidden" />
           </button>
         </div>
       </div>
       <div className="flex flex-row gap-4">
         <div className="relative hidden w-14 lg:block">
           <div
-            className={`${isExpanded ? "block" : "hidden"} absolute -bottom-9 -top-0 left-1/2 w-1 -translate-x-1/2 transform ${wallet.twBackgroundColor}`}
+            className={`absolute -bottom-9 -top-0 left-1/2 hidden w-1 -translate-x-1/2 transform group-data-[state=open]/collapsible:block ${wallet.twBackgroundColor}`}
           />
         </div>
         <div className="flex flex-1">
@@ -141,6 +168,10 @@ const WalletInfo = ({ wallet, isExpanded }: WalletInfoProps) => {
               eventAction: "Tap main button",
               eventName: `${wallet.name}`,
             }}
+            onClick={(e) => {
+              // Prevent expanding the wallet more info section when clicking on the "Visit website" button
+              e.stopPropagation()
+            }}
           >
             {t("page-find-wallet-visit-website")}
           </ButtonLink>
@@ -150,4 +181,4 @@ const WalletInfo = ({ wallet, isExpanded }: WalletInfoProps) => {
   )
 }
 
-export default WalletInfo
+export default memo(WalletInfo)