apply suggestions from code reviews/feedback

src/components/Simulator/Explanation.tsx

@@ -12,6 +12,7 @@ import type { PathId } from "./types"
 import { MoreInfoPopover } from "./MoreInfoPopover"
 import { PathButton } from "./PathButton"
 import ButtonLink from "../ButtonLink"
+import Link from "../Link"
 import { motion } from "framer-motion"
 import { shareOnTwitter } from "./utils"
 import { FaTwitter } from "react-icons/fa"
@@ -54,7 +55,7 @@ export const Explanation: React.FC<ExplanationProps> = ({
         leftIcon={<MdArrowBack size="18px" />}
         sx={{ paddingInlineStart: 0 }}
         mt={{ base: -6, md: 0 }}
-        mb={{ base: 6, md: 8 }}
+        mb={{ base: 2, md: 8 }}
         onClick={regressStepper}
         pointerEvents={step === 0 ? "none" : "all"}
         variants={backButtonVariants}
@@ -117,20 +118,24 @@ export const Explanation: React.FC<ExplanationProps> = ({
               handleClick={() => openPath(nextPathId)}
             />
           )}
-          <ButtonLink
+          {/* TODO: Decide on button/link approach and remove unused */}
+          {/* <ButtonLink
             variant={finalCtaLink.isPrimary ? "solid" : "outline"}
             href={finalCtaLink.href}
             onClick={logFinalCta}
           >
             {finalCtaLink.label}
-          </ButtonLink>
+          </ButtonLink> */}
           <Flex alignItems="center" gap={6}>
             <Divider borderColor="body.medium" />
             <Text textTransform="uppercase" m={0} color="body.medium">
               or
             </Text>
             <Divider borderColor="body.medium" />
           </Flex>
+          <Link href={finalCtaLink.href} isExternal onClick={logFinalCta}>
+            {finalCtaLink.label}
+          </Link>
           <Button
             variant="outline-color"
             leftIcon={<FaTwitter />}

src/components/Simulator/Template.tsx

@@ -8,7 +8,7 @@ export const Template: React.FC<FlexProps> = (props) => (
     w="full"
     justify="center"
     direction={{ base: "column", md: "row" }}
-    gap={8}
+    gap={{ base: 6, md: 8 }}
     {...props}
   />
 )

src/components/Simulator/WalletHome/TokenBalanceItem.tsx

@@ -7,11 +7,13 @@ interface IProps extends FlexProps {
 }
 export const TokenBalanceItem: React.FC<IProps> = ({ item, ...flexProps }) => {
   const { name, ticker, amount, usdConversion, Icon } = item
+  const usdAmount = amount * usdConversion
   const usdValue = Intl.NumberFormat("en-US", {
     style: "currency",
     currency: "USD",
     notation: "compact",
-  }).format(amount * usdConversion)
+    maximumFractionDigits: usdAmount % 1 === 0 ? 0 : 2,
+  }).format(usdAmount)
   const tokenAmount = Intl.NumberFormat("en", {
     maximumFractionDigits: 5,
   }).format(amount)

src/components/Simulator/WalletHome/WalletBalance.tsx

@@ -23,6 +23,7 @@ export const WalletBalance: React.FC<IProps> = ({
         style: "currency",
         currency: "USD",
         notation: "compact",
+        maximumFractionDigits: usdAmount % 1 === 0 ? 0 : 2,
       }).format(usdAmount)}
     </Text>
     <Flex justify="center" mb={4}>

src/components/Simulator/index.tsx

@@ -47,8 +47,6 @@ export const Simulator: React.FC<IProps> = ({ children, data, location }) => {
 
   // Remove URL search param if invalid pathId
   useEffect(() => {
-    // Reset step counter on pathId change
-    setStep(0)
     if (!pathId) clearUrlParams(location)
   }, [pathId])
 
@@ -81,6 +79,8 @@ export const Simulator: React.FC<IProps> = ({ children, data, location }) => {
     params.set(PATH_ID_QUERY_PARAM, pathId)
     const url = `?${params.toString()}#${SIMULATOR_ID}`
     navigate(url, { replace: true })
+    // Reset step counter on pathId change
+    setStep(0)
   }
 
   // Navigation object passed to child components

src/components/Simulator/screens/SendReceive/ReceivedEther.tsx

@@ -10,12 +10,14 @@ interface IProps extends SimulatorNavProps {
   defaultTokenBalances: Array<TokenBalance>
   ethReceiveAmount: number
   ethPrice: number
+  sender?: string
 }
 export const ReceivedEther: React.FC<IProps> = ({
   nav,
   defaultTokenBalances,
   ethReceiveAmount,
   ethPrice,
+  sender,
 }) => {
   const [received, setReceived] = useState(false)
   const [hideToast, setHideToast] = useState(false)
@@ -95,7 +97,7 @@ export const ReceivedEther: React.FC<IProps> = ({
           >
             <Icon as={MdInfo} fontSize="xl" />
             <Text m={0} fontWeight="bold">
-              You received {displayEth} ETH!
+              You received {displayEth} ETH{sender ? ` from ${sender}` : ""}!
             </Text>
           </Flex>
         )}

src/components/Simulator/screens/SendReceive/SendEther.tsx

@@ -1,6 +1,5 @@
 import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react"
 import React from "react"
-import { MdChevronRight } from "react-icons/md"
 import { EthTokenIcon } from "../../icons"
 
 interface IProps {
@@ -90,8 +89,7 @@ export const SendEther: React.FC<IProps> = ({
         <Flex direction="column" alignItems="end">
           {/* Token selector pill */}
           <Flex
-            ps={2}
-            pe={1}
+            px={2}
             py={1}
             mb={4}
             borderRadius="full"
@@ -102,12 +100,6 @@ export const SendEther: React.FC<IProps> = ({
             <Text fontWeight="bold" m={0} color="body.base">
               ETH
             </Text>
-            <Icon
-              as={MdChevronRight}
-              fontSize="xl"
-              transform="scale(1.125)"
-              ms={0.5}
-            />
           </Flex>
           {/* Balances */}
           <Text fontWeight="bold" m={0} lineHeight={1}>

src/components/Simulator/screens/SendReceive/SendFromContacts.tsx

@@ -5,71 +5,86 @@ import { CategoryTabs } from "../../WalletHome/CategoryTabs"
 import { EthTokenIconGrayscale, QrCodeIcon } from "../../icons"
 import type { SimulatorNavProps } from "../../interfaces"
 import { CONTACTS } from "./constants"
+import { Contact } from "../../WalletHome/interfaces"
 
-export const SendFromContacts: React.FC<SimulatorNavProps> = ({ nav }) => (
-  <>
-    <Box py={8} px={6}>
-      <Text fontSize={{ base: "xl", md: "2xl" }} fontWeight="bold" mb={8}>
-        Choose recipient
-      </Text>
-      <Button
-        variant="outline"
-        isDisabled
-        leftIcon={<Icon as={PiMagnifyingGlass} />}
-        rightIcon={<Icon as={QrCodeIcon} />}
-        _disabled={{ color: "body.medium" }}
-        py={4}
-        pointerEvents="none"
-        fontSize="sm"
-        w="full"
-      >
-        <Text as="span" me="auto">
-          Address or contacts
+interface IProps extends SimulatorNavProps {
+  setRecipient: (name: string) => void
+}
+export const SendFromContacts: React.FC<IProps> = ({ nav, setRecipient }) => {
+  const handleSelection = (name: string) => {
+    setRecipient(name)
+    nav.progressStepper()
+  }
+  return (
+    <>
+      <Box py={8} px={6}>
+        <Text fontSize={{ base: "xl", md: "2xl" }} fontWeight="bold" mb={8}>
+          Choose recipient
         </Text>
-      </Button>
-    </Box>
-    <Box py={8} px={6} bg="background.highlight" h="full">
-      <CategoryTabs categories={["My contacts", "Recent"]} />
-      <Flex direction="column" gap={4}>
-        {CONTACTS.map(({ name, lastAction }, i) => (
-          <Button
-            key={name + i}
-            leftIcon={
-              <Icon as={EthTokenIconGrayscale} fill="black" w="30px" h="30px" />
-            }
-            isDisabled={i > 0}
-            gap={2}
-            _disabled={{
-              color: "body.base",
-              bg: "background.base",
-              pointerEvents: "none",
-            }}
-            data-group
-            onClick={nav.progressStepper}
-          >
-            <Box as="span" flex={1}>
-              <Text
-                as="span"
-                display="block"
-                fontWeight="bold"
-                textAlign="start"
-              >
-                {name}
-              </Text>
-              <Text
-                as="span"
-                display="block"
-                color="body.light"
-                textAlign="start"
-                _groupDisabled={{ color: "body.medium" }}
-                fontSize="sm"
-              >
-                {lastAction}
-              </Text>
-            </Box>
-          </Button>
-        ))}
-      </Flex>
-    </Box>
-  </>
-)
+        <Button
+          variant="outline"
+          isDisabled
+          leftIcon={<Icon as={PiMagnifyingGlass} />}
+          rightIcon={<Icon as={QrCodeIcon} />}
+          _disabled={{ color: "body.medium" }}
+          py={4}
+          pointerEvents="none"
+          fontSize="sm"
+          w="full"
+        >
+          <Text as="span" me="auto">
+            Address or contacts
+          </Text>
+        </Button>
+      </Box>
+      <Box py={8} px={6} bg="background.highlight" h="full">
+        <CategoryTabs categories={["My contacts", "Recent"]} activeIndex={1} />
+        <Flex direction="column" gap={4}>
+          {CONTACTS.map(({ name, lastAction }, i) => (
+            <Button
+              key={name + i}
+              leftIcon={
+                <Icon
+                  as={EthTokenIconGrayscale}
+                  fill="black"
+                  w="30px"
+                  h="30px"
+                />
+              }
+              isDisabled={i > 0}
+              gap={2}
+              _disabled={{
+                color: "body.base",
+                bg: "background.base",
+                pointerEvents: "none",
+              }}
+              data-group
+              onClick={() => handleSelection(name)}
+            >
+              <Box as="span" flex={1}>
+                <Text
+                  as="span"
+                  display="block"
+                  fontWeight="bold"
+                  textAlign="start"
+                >
+                  {name}
+                </Text>
+                <Text
+                  as="span"
+                  display="block"
+                  color="body.light"
+                  textAlign="start"
+                  _groupDisabled={{ color: "body.medium" }}
+                  fontSize="sm"
+                >
+                  {lastAction}
+                </Text>
+              </Box>
+            </Button>
+          ))}
+        </Flex>
+      </Box>
+    </>
+  )
+}

src/components/Simulator/screens/SendReceive/SendSummary.tsx

@@ -1,22 +1,29 @@
 import { Box, Flex, Text } from "@chakra-ui/react"
 import React from "react"
+import { ETH_TRANSFER_FEE } from "./constants"
 
 interface IProps {
   chosenAmount: number
   ethPrice: number
+  recipient: string
+  ethAvailable: number
 }
-export const SendSummary: React.FC<IProps> = ({ chosenAmount, ethPrice }) => {
+export const SendSummary: React.FC<IProps> = ({
+  chosenAmount,
+  ethPrice,
+  recipient,
+}) => {
   const formatEth = (amount: number): string =>
     new Intl.NumberFormat("en", { maximumFractionDigits: 5 }).format(amount)
 
   const formatChosenAmount = new Intl.NumberFormat("en", {
     style: "currency",
     currency: "USD",
     notation: "compact",
-    maximumFractionDigits: 0,
+    maximumFractionDigits: chosenAmount % 1 === 0 ? 0 : 2,
   }).format(chosenAmount)
 
-  const USD_FEE = 0.69 as const
+  const usdFee = ETH_TRANSFER_FEE * ethPrice
   return (
     <>
       {/* Top section */}
@@ -61,7 +68,7 @@ export const SendSummary: React.FC<IProps> = ({ chosenAmount, ethPrice }) => {
       >
         <Box>
           <Text>To</Text>
-          <Text fontWeight="bold">Jacob</Text>
+          <Text fontWeight="bold">{recipient}</Text>
         </Box>
         <Box>
           <Text>Arrival time</Text>
@@ -71,11 +78,11 @@ export const SendSummary: React.FC<IProps> = ({ chosenAmount, ethPrice }) => {
           <Text>Nework fees</Text>
           <Text m={0} fontWeight="bold">
             {Intl.NumberFormat("en", {
-              maximumFractionDigits: 2,
+              maximumFractionDigits: usdFee % 1 === 0 ? 0 : 2,
               style: "currency",
               currency: "USD",
               notation: "compact",
-            }).format(USD_FEE)}
+            }).format(usdFee)}
             <Text
               as="span"
               color="body.medium"
@@ -86,7 +93,7 @@ export const SendSummary: React.FC<IProps> = ({ chosenAmount, ethPrice }) => {
               (
               {Intl.NumberFormat("en", {
                 maximumFractionDigits: 6,
-              }).format(USD_FEE / ethPrice)}{" "}
+              }).format(ETH_TRANSFER_FEE)}{" "}
               ETH)
             </Text>
           </Text>