refactor new to crypto wallets to come from start page getStaticProps

Author: corwintines

src/components/StartWithEthereumFlow/DownloadAWallet/index.tsx

@@ -1,24 +1,26 @@
 import { useState } from "react"
 
+import { Wallet } from "@/lib/types"
+
 import { Image } from "@/components/Image"
 import { Button, ButtonLink } from "@/components/ui/buttons/Button"
 import Checkbox from "@/components/ui/checkbox"
 import { Tag } from "@/components/ui/tag"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
-import { getNewToCryptoWallets } from "@/lib/utils/wallets"
 
 const DownloadAWallet = ({
   handleNext,
   stepIndex,
   totalSteps,
+  newToCryptoWallets,
 }: {
   handleNext: () => void
   stepIndex: number
   totalSteps: number
+  newToCryptoWallets: Wallet[]
 }) => {
   const [hasWallet, setHasWallet] = useState(false)
-  const newToCryptoWallets = getNewToCryptoWallets()
 
   return (
     <div className="flex flex-col items-center gap-8 lg:flex-row lg:gap-24">

src/components/StartWithEthereumFlow/index.tsx

@@ -1,14 +1,20 @@
 import { useRef, useState } from "react"
 import type { SwiperRef } from "swiper/react"
 
+import { Wallet } from "@/lib/types"
+
 import ConnectYourWallet from "@/components/StartWithEthereumFlow/ConnectYourWallet"
 import DownloadAWallet from "@/components/StartWithEthereumFlow/DownloadAWallet"
 import LetUseSomeApps from "@/components/StartWithEthereumFlow/LetUseSomeApps"
 import { Swiper, SwiperContainer, SwiperSlide } from "@/components/ui/swiper"
 
 import { cn } from "@/lib/utils/cn"
 
-const StartWithEthereumFlow = () => {
+const StartWithEthereumFlow = ({
+  newToCryptoWallets,
+}: {
+  newToCryptoWallets: Wallet[]
+}) => {
   const swiperRef = useRef<SwiperRef>(null)
   const [activeIndex, setActiveIndex] = useState(1)
   const [totalSlides, setTotalSlides] = useState(0)
@@ -97,6 +103,7 @@ const StartWithEthereumFlow = () => {
               handleNext={handleNext}
               stepIndex={activeIndex}
               totalSteps={totalSlides}
+              newToCryptoWallets={newToCryptoWallets}
             />
           </div>
         </SwiperSlide>

src/pages/[locale]/start/index.tsx

@@ -3,7 +3,7 @@ import dynamic from "next/dynamic"
 import { useRouter } from "next/router"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
-import { BasePageProps, Lang } from "@/lib/types"
+import { BasePageProps, Lang, Wallet } from "@/lib/types"
 
 import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
@@ -15,6 +15,7 @@ import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
+import { getNewToCryptoWallets } from "@/lib/utils/wallets"
 
 import { DEFAULT_LOCALE, LOCALES_CODES } from "@/lib/constants"
 
@@ -54,16 +55,23 @@ export const getStaticProps = (async ({ params }) => {
 
   const messages = await loadNamespaces(locale as string, requiredNamespaces)
 
+  const newToCryptoWallets = getNewToCryptoWallets()
+
   return {
     props: {
       messages,
       contentNotTranslated,
       lastDeployLocaleTimestamp,
+      newToCryptoWallets,
     },
   }
 }) satisfies GetStaticProps<BasePageProps>
 
-const StartWithCryptoPage = () => {
+const StartWithCryptoPage = ({
+  newToCryptoWallets,
+}: {
+  newToCryptoWallets: Wallet[]
+}) => {
   const router = useRouter()
 
   return (
@@ -97,7 +105,7 @@ const StartWithCryptoPage = () => {
             </div>
 
             <div id="start-with-ethereum-flow" className="flex flex-col gap-12">
-              <StartWithEthereumFlow />
+              <StartWithEthereumFlow newToCryptoWallets={newToCryptoWallets} />
             </div>
 
             <div className="flex w-full flex-col gap-12 rounded-2xl border border-accent-c/10 bg-gradient-to-t from-accent-c/10 from-20% to-accent-c/5 to-60% px-12 py-16 md:flex-row dark:from-accent-c/20 dark:to-accent-c/10">