Merge pull request #176 from ethereum/walletsPage

pettinarip · web-flow · commit 55be6a8865c6 · 2023-12-13T13:23:14.000+01:00
migrate /wallets page
diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "next-i18next"
-import { Flex, type FlexProps } from "@chakra-ui/react"
+import { Center, Flex, type FlexProps } from "@chakra-ui/react"
 
 import type { TranslationKey } from "@/lib/types"
 
@@ -49,16 +49,9 @@ const Callout: React.FC<IProps> = ({
       {...rest}
     >
       {image && (
-        <Image
-          src={image}
-          alt={alt || ""}
-          mt={-40}
-          alignSelf="center"
-          w={263}
-          h={200}
-          maxW="263px"
-          minH="200px"
-        />
+        <Center maxW="263px" minH="200px" mt={-40} alignSelf="center">
+          <Image src={image} alt={alt || ""} height={200} />
+        </Center>
       )}
       <Flex direction="column" justify="space-between" mt={10} h="full">
         <div>
diff --git a/src/components/Simulator/NotificationPopover.tsx b/src/components/Simulator/NotificationPopover.tsx
@@ -27,7 +27,6 @@ export const NotificationPopover: React.FC<IProps> = ({
   return (
     <Popover placement={placement}>
       <PopoverTrigger>{children}</PopoverTrigger>
-      <Portal>
         <PopoverContent
           bg="background.highlight"
           px={4}
@@ -46,7 +45,6 @@ export const NotificationPopover: React.FC<IProps> = ({
           </Flex>
           <PopoverBody>{content}</PopoverBody>
         </PopoverContent>
-      </Portal>
     </Popover>
   )
 }
diff --git a/src/components/Simulator/WalletHome/AddressPill.tsx b/src/components/Simulator/WalletHome/AddressPill.tsx
@@ -6,9 +6,8 @@ import { FAKE_DEMO_ADDRESS } from "../constants"
 import { NotificationPopover } from "../NotificationPopover"
 
 interface IProps extends Omit<FlexProps, "children"> {
-  children?: Pick<FlexProps, "children">
 }
-export const AddressPill: React.FC<IProps> = ({ children, ...btnProps }) => (
+export const AddressPill: React.FC<IProps> = ({ ...btnProps }) => (
   <NotificationPopover
     title="Example walkthrough"
     content="Share your address (public identifier) from your own wallet when finished here"
@@ -27,7 +26,7 @@ export const AddressPill: React.FC<IProps> = ({ children, ...btnProps }) => (
       fontSize="xs"
       {...btnProps}
     >
-      <Text m={0}>{children ?? FAKE_DEMO_ADDRESS}</Text>
+      <Text m={0}>{FAKE_DEMO_ADDRESS}</Text>
       <Icon as={MdContentCopy} w={4} fontSize="lg" />
     </Flex>
   </NotificationPopover>
diff --git a/src/components/Simulator/WalletHome/NFTList.tsx b/src/components/Simulator/WalletHome/NFTList.tsx
@@ -7,7 +7,7 @@ import {
   useBreakpointValue,
 } from "@chakra-ui/react"
 
-import GatsbyImage from "../../GatsbyImage"
+import { Image } from "@/components/Image"
 
 import type { NFT } from "./interfaces"
 
@@ -21,8 +21,8 @@ export const NFTList: React.FC<IProps> = ({ nfts, ...flexProps }) => {
       {nfts.length ? (
         nfts.map(({ title, image }) => (
           <Box key={title} w="fit-content">
-            <GatsbyImage
-              image={image}
+            <Image
+              src={image}
               alt=""
               objectFit="contain"
               maxW={size}
diff --git a/src/components/Simulator/WalletHome/hooks/useNFT.tsx b/src/components/Simulator/WalletHome/hooks/useNFT.tsx
diff --git a/src/components/Simulator/WalletHome/interfaces.ts b/src/components/Simulator/WalletHome/interfaces.ts
@@ -1,4 +1,4 @@
-import { IGatsbyImageData } from "gatsby-plugin-image"
+import { StaticImageData } from "next/image"
 import type { IconProps } from "@chakra-ui/react"
 
 export interface TokenBalance {
@@ -16,5 +16,5 @@ export interface Contact {
 
 export interface NFT {
   title: string
-  image: IGatsbyImageData
+  image: StaticImageData
 }
diff --git a/src/components/Simulator/index.tsx b/src/components/Simulator/index.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo, useState } from "react"
-import { navigate } from "gatsby"
+import { useRouter } from "next/router"
 import { Flex, type FlexProps, Grid } from "@chakra-ui/react"
 
-import { trackCustomEvent } from "../../utils/matomo"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import { PATH_ID_QUERY_PARAM, SIMULATOR_ID } from "./constants"
 import { Explanation } from "./Explanation"
@@ -16,26 +16,30 @@ import { Phone } from "./Phone"
 import { SimulatorModal } from "./SimulatorModal"
 import { Template } from "./Template"
 import type { PathId, SimulatorData } from "./types"
-import { clearUrlParams, getValidPathId } from "./utils"
+import { getValidPathId } from "./utils"
 
 interface IProps extends Pick<FlexProps, "children"> {
   data: SimulatorData
-  location: Location
 }
-export const Simulator: React.FC<IProps> = ({ children, data, location }) => {
+export const Simulator: React.FC<IProps> = ({ children, data }) => {
+  const router = useRouter()
+
   // Track step
   const [step, setStep] = useState(0) // 0-indexed to use as array index
 
   // Track pathID
-  const params = new URLSearchParams(location.search)
-  const pathIdString = params.get(PATH_ID_QUERY_PARAM)
-  const pathId = getValidPathId(pathIdString)
+  const pathId = getValidPathId(router.query.sim as string)
   const simulator: SimulatorDetails | null = pathId ? data[pathId] : null
   const totalSteps: number = simulator ? simulator.explanations.length : 0
 
   // If pathId present, modal is open, else closed
   const isOpen = !!pathId
 
+  const clearUrlParams = () => {
+    const pathWithoutParams = router.asPath.replace(/\?[^\#]*/, "")
+    router.replace(pathWithoutParams)
+  }
+
   // When simulator closed: log event, clear URL params and close modal
   const onClose = (): void => {
     trackCustomEvent({
@@ -44,14 +48,15 @@ export const Simulator: React.FC<IProps> = ({ children, data, location }) => {
       eventName: `close-from-step-${step + 1}`,
     })
     // Clearing URL Params will reset pathId, and close modal
-    clearUrlParams(location)
+    clearUrlParams()
   }
 
   // Remove URL search param if invalid pathId
   useEffect(() => {
     setStep(0)
-    if (!pathId) clearUrlParams(location)
-  }, [location, pathId])
+    if (!pathId) clearUrlParams()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathId])
 
   // Navigation helpers
   const progressStepper = (): void => {
@@ -70,7 +75,7 @@ export const Simulator: React.FC<IProps> = ({ children, data, location }) => {
       eventName: `back-from-step-${step + 1}`,
     })
     if (step === 0) {
-      clearUrlParams(location)
+      clearUrlParams()
       return
     }
     setStep((step) => Math.max(step - 1, 0))
@@ -81,7 +86,7 @@ export const Simulator: React.FC<IProps> = ({ children, data, location }) => {
     const params = new URLSearchParams()
     params.set(PATH_ID_QUERY_PARAM, id)
     const url = `?${params.toString()}#${SIMULATOR_ID}`
-    navigate(url, { replace: true })
+    router.replace(url)
   }
 
   // Navigation object passed to child components
diff --git a/src/components/Simulator/screens/ConnectWeb3/index.tsx b/src/components/Simulator/screens/ConnectWeb3/index.tsx
@@ -7,8 +7,9 @@ import {
 } from "react-icons/ri"
 import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react"
 
+import { Image } from "@/components/Image"
+
 import { useEthPrice } from "../../../../hooks/useEthPrice"
-import GatsbyImage from "../../../GatsbyImage"
 import {
   BASE_ANIMATION_DELAY_SEC,
   defaultTokenBalances,
@@ -19,17 +20,23 @@ import type { PhoneScreenProps } from "../../interfaces"
 import { NotificationPopover } from "../../NotificationPopover"
 import { ProgressCta } from "../../ProgressCta"
 import { WalletHome } from "../../WalletHome"
-import { useNFT } from "../../WalletHome/hooks/useNFT"
 import type { TokenBalance } from "../../WalletHome/interfaces"
 
 import { Browser } from "./Browser"
 import { EXAMPLE_APP_URL } from "./constants"
 import { Slider } from "./Slider"
 import { Web3App } from "./Web3App"
 
+import NFTImage from "@/public/deep-panic.png"
+
 export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
   const { progressStepper, step } = nav
-  const NFTs = useNFT()
+  const NFTs = [
+    {
+      title: "Cool art",
+      image: NFTImage,
+    },
+  ]
   const fetchedPrice = useEthPrice()
   const ethPrice = fetchedPrice > 1 ? fetchedPrice : FALLBACK_ETH_PRICE
   const tokensWithEthBalance = useMemo<Array<TokenBalance>>(
@@ -46,7 +53,12 @@ export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
     [ethPrice]
   )
   const [activeTabIndex, setActiveTabIndex] = useState(1)
-  const nfts = useNFT()
+  const nfts = [
+    {
+      title: "Cool art",
+      image: NFTImage,
+    },
+  ]
   const fadeInProps = {
     initial: { opacity: 0 },
     animate: { opacity: 1 },
@@ -129,7 +141,7 @@ export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
                 Your collection (1)
               </Text>
               <Flex gap={2} mb={6}>
-                <GatsbyImage image={NFTs[0].image} alt="NFT Image" />
+                <Image src={NFTs[0].image} width={120} height={120} alt="NFT Image" />
                 <NotificationPopover
                   title="Example walkthrough"
                   content="These are some things you could do as the owner of your NFTs"
diff --git a/src/components/Simulator/screens/CreateAccount/WordSelectorButtons.tsx b/src/components/Simulator/screens/CreateAccount/WordSelectorButtons.tsx
@@ -36,7 +36,8 @@ export const WordSelectorButtons: React.FC<IProps> = ({
       return [...acc.slice(0, randIndex), item, ...acc.slice(randIndex)]
     }, restRandom)
     return pseudoRandom
-  }, [wordIndices])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   const incrementWordsSelected = useCallback(() => {
     setWordsSelected((prev) => prev + 1)
diff --git a/src/components/Simulator/screens/CreateAccount/index.tsx b/src/components/Simulator/screens/CreateAccount/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 
-import { generateInvalidSafeSeed } from "../../../../utils/generateSeed"
+import { generateInvalidSafeSeed } from "@/lib/utils/generateSeed"
+
 import type { PhoneScreenProps } from "../../interfaces"
 import { ProgressCta } from "../../ProgressCta"
 import { WalletHome } from "../../WalletHome"
diff --git a/src/components/Simulator/screens/SendReceive/ReceiveEther.tsx b/src/components/Simulator/screens/SendReceive/ReceiveEther.tsx
@@ -1,47 +1,22 @@
 import React from "react"
 import { motion } from "framer-motion"
-import { graphql, useStaticQuery } from "gatsby"
-import { getImage } from "gatsby-plugin-image"
-import { Button, Image, useColorModeValue } from "@chakra-ui/react"
+import { Button, useColorModeValue } from "@chakra-ui/react"
 import { Box, Flex, Text } from "@chakra-ui/react"
 
-import GatsbyImage from "../../../GatsbyImage"
+import { Image } from "@/components/Image"
+
 import { FAKE_DEMO_ADDRESS } from "../../constants"
 import { NotificationPopover } from "../../NotificationPopover"
 
+import QRDark from "@/public/qr-code-ethereum-org-dark.png"
+import QRLight from "@/public/qr-code-ethereum-org-light.png"
+
 const MotionBox = motion(Box)
 
 export const ReceiveEther = () => {
-  const images = useStaticQuery(graphql`
-    {
-      qrLight: file(relativePath: { eq: "qr-code-ethereum-org-light.png" }) {
-        childImageSharp {
-          gatsbyImageData(
-            width: 128
-            height: 128
-            layout: FIXED
-            placeholder: BLURRED
-            quality: 100
-          )
-        }
-      }
-      qrDark: file(relativePath: { eq: "qr-code-ethereum-org-dark.png" }) {
-        childImageSharp {
-          gatsbyImageData(
-            width: 128
-            height: 128
-            layout: FIXED
-            placeholder: BLURRED
-            quality: 100
-          )
-        }
-      }
-    }
-  `)
-
   const qrImage = useColorModeValue(
-    getImage(images.qrLight),
-    getImage(images.qrDark)
+    QRLight,
+    QRDark,
   )
 
   const SPACING = { base: 3, md: 5 }
@@ -76,9 +51,8 @@ export const ReceiveEther = () => {
       >
         <Box w="fit-content" mx="auto" mb={SPACING} p={3} bg="background.base">
           <Image
-            as={GatsbyImage}
             alt=""
-            image={qrImage}
+            src={qrImage}
             maxW={QR_SIZE}
             maxH={QR_SIZE}
             p={3}
diff --git a/src/components/Simulator/utils.ts b/src/components/Simulator/utils.ts
@@ -1,12 +1,6 @@
-import { navigate } from "gatsby"
-
 import { PATH_IDS } from "./constants"
 import type { PathId } from "./types"
 
-export const clearUrlParams = (location: Location): void => {
-  navigate(location.pathname + location.hash, { replace: true })
-}
-
 export const getValidPathId = (pathIdString: string | null): PathId | null => {
   if (!isValidPathId(pathIdString)) return null
   return pathIdString
diff --git a/src/data/WalletSimulatorData.tsx b/src/data/WalletSimulatorData.tsx
@@ -222,7 +222,7 @@ export const walletOnboardingSimData: SimulatorData = {
             </Text>
             <Text>
               Let&apos;s first look at how to receive ether (ETH),
-              Ethereum&amp;apos;s native currency.
+              Ethereum&apos;s native currency.
             </Text>
             <Text>
               Click the &quot;Receive&quot; button to see how to receive funds.
diff --git a/src/hooks/useEthPrice.tsx b/src/hooks/useEthPrice.tsx
@@ -1,15 +1,13 @@
 import { useEffect, useState } from "react"
 
-import { getData } from "../utils/cache"
-
 export const useEthPrice = (): number => {
   const [ethPrice, setEthPrice] = useState<number>(0)
   useEffect(() => {
     ;(async () => {
       try {
-        const data = await getData<{ ethereum: { usd: number } }>(
+        const data: { ethereum: { usd: number } } = await fetch(
           "https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd"
-        )
+        ).then((res) => res.json())
         const {
           ethereum: { usd },
         } = data
diff --git a/src/lib/utils/translations.ts b/src/lib/utils/translations.ts
diff --git a/src/pages/wallets/index.tsx b/src/pages/wallets/index.tsx
