implement delay to progress cta button

extract common delay duration to a shared constant

Author: wackerow

src/components/Simulator/PulseAnimation.tsx

@@ -1,7 +1,12 @@
 import React from "react"
 import { Box } from "@chakra-ui/react"
 import { motion } from "framer-motion"
-import { CIRCLE, FULL_BUTTON, NARROW_BUTTON } from "./constants"
+import {
+  BASE_ANIMATION_DELAY_SEC,
+  CIRCLE,
+  FULL_BUTTON,
+  NARROW_BUTTON,
+} from "./constants"
 import type { PulseOption } from "./types"
 
 const MotionBox = motion(Box)
@@ -14,8 +19,7 @@ export const PulseAnimation: React.FC<IProps> = ({ type = CIRCLE }) => {
   const scaleY = type === FULL_BUTTON ? 1.7 : type === NARROW_BUTTON ? 1.5 : 1.5
   const inset = type === NARROW_BUTTON ? -1 : 0
   const borderRadius = type === FULL_BUTTON ? "base" : "full"
-  const BASE_DURATION = 2.5
-  const delay = type === NARROW_BUTTON ? 0 : BASE_DURATION
+  const delay = type === NARROW_BUTTON ? 0 : BASE_ANIMATION_DELAY_SEC
   return (
     <MotionBox
       position="absolute"
@@ -26,7 +30,7 @@ export const PulseAnimation: React.FC<IProps> = ({ type = CIRCLE }) => {
       initial={{ scale: 1 }}
       animate={{ scaleX, scaleY, opacity: [0, 1, 0] }}
       transition={{
-        duration: 2.5,
+        duration: BASE_ANIMATION_DELAY_SEC,
         repeat: Infinity,
         ease: "easeOut",
         delay,

src/components/Simulator/constants.ts

@@ -43,3 +43,5 @@ export const defaultTokenBalances: Array<TokenBalance> = [
 export const FALLBACK_ETH_PRICE = 1000
 export const USD_RECEIVE_AMOUNT = 50
 export const ETH_TRANSFER_FEE = 0.00042 // 21_000gas * 20gwei
+
+export const BASE_ANIMATION_DELAY_SEC = 2.5

src/components/Simulator/screens/ConnectWeb3/Browser.tsx

@@ -7,6 +7,7 @@ import { IoEllipsisHorizontalSharp } from "react-icons/io5"
 import { motion } from "framer-motion"
 import { NotificationPopover } from "../../NotificationPopover"
 import { EXAMPLE_APP_URL } from "./constants"
+import { BASE_ANIMATION_DELAY_SEC } from "../../constants"
 
 interface IProps extends FlexProps {
   progressStepper: () => void
@@ -16,7 +17,7 @@ export const Browser: React.FC<IProps> = ({ progressStepper, ...props }) => {
   useEffect(() => {
     const timeout = setTimeout(() => {
       setTyping(true)
-    }, 3000)
+    }, BASE_ANIMATION_DELAY_SEC * 1000)
     return () => clearTimeout(timeout)
   }, [])
 

src/components/Simulator/screens/ConnectWeb3/index.tsx

@@ -1,25 +1,29 @@
 import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react"
-import React, { useMemo, useState } from "react"
+import React, { useEffect, useMemo, useState } from "react"
 import {
   RiPriceTag2Line,
   RiAuctionLine,
   RiFileTransferLine,
 } from "react-icons/ri"
 import { AnimatePresence, motion } from "framer-motion"
-import { Slider } from "./Slider"
-import { Web3App } from "./Web3App"
+import GatsbyImage from "../../../GatsbyImage"
+import { NotificationPopover } from "../../NotificationPopover"
 import { ProgressCta } from "../../ProgressCta"
 import { WalletHome } from "../../WalletHome"
-import type { PhoneScreenProps } from "../../interfaces"
 import type { TokenBalance } from "../../WalletHome/interfaces"
-import { defaultTokenBalances } from "../../constants"
-import { useEthPrice } from "../../../../hooks/useEthPrice"
 import { useNFT } from "../../WalletHome/hooks/useNFT"
-import GatsbyImage from "../../../GatsbyImage"
-import { FALLBACK_ETH_PRICE, USD_RECEIVE_AMOUNT } from "../../constants"
-import { EXAMPLE_APP_URL } from "./constants"
 import { Browser } from "./Browser"
-import { NotificationPopover } from "../../NotificationPopover"
+import { Slider } from "./Slider"
+import { Web3App } from "./Web3App"
+import {
+  defaultTokenBalances,
+  FALLBACK_ETH_PRICE,
+  USD_RECEIVE_AMOUNT,
+  BASE_ANIMATION_DELAY_SEC,
+} from "../../constants"
+import { EXAMPLE_APP_URL } from "./constants"
+import type { PhoneScreenProps } from "../../interfaces"
+import { useEthPrice } from "../../../../hooks/useEthPrice"
 
 export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
   const { progressStepper, step } = nav
@@ -45,6 +49,17 @@ export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
     initial: { opacity: 0 },
     animate: { opacity: 1 },
   }
+
+  // Enable ProgressCta button after short delay for first step
+  const [ctaDisabled, setCtaDisabled] = useState(step === 0)
+  useEffect(() => {
+    if (step !== 0) return
+    const timeout = setTimeout(() => {
+      setCtaDisabled(false)
+    }, BASE_ANIMATION_DELAY_SEC * 1000)
+    return () => clearTimeout(timeout)
+  }, [])
+
   return (
     <>
       {[0].includes(step) && <Browser progressStepper={progressStepper} />}
@@ -173,6 +188,7 @@ export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
       {[0, 1, 2, 3, 4].includes(step) && (
         <ProgressCta
           isAnimated={step === 0}
+          isDisabled={ctaDisabled}
           progressStepper={progressStepper}
           mb={step === 0 ? 16 : 0}
         >