Merge pull request #11249 from ethereum/sim-updates

Connect to Web3 sim updates

Author: corwintines

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

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from "react"
+import { Box, type FlexProps, Text, Icon, Flex } from "@chakra-ui/react"
+import { BsTriangle } from "react-icons/bs"
+import { PiMagnifyingGlass } from "react-icons/pi"
+import { TbWorldWww } from "react-icons/tb"
+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
+}
+export const Browser: React.FC<IProps> = ({ progressStepper, ...props }) => {
+  const [typing, setTyping] = useState(false)
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setTyping(true)
+    }, BASE_ANIMATION_DELAY_SEC * 1000)
+    return () => clearTimeout(timeout)
+  }, [])
+
+  const sentence = {
+    hidden: { opacity: 1 },
+    visible: {
+      opacity: 1,
+      transition: { staggerChildren: 0.12 },
+    },
+  }
+  const letter = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: 0 } },
+  }
+
+  return (
+    <Flex direction="column" h="full" bg="body.light" {...props}>
+      <Box bg="background.highlight" w="full" px={3} pt={9} pb={3}>
+        <NotificationPopover
+          title="Example walkthrough"
+          content="Try logging into a real app with your wallet when finished here"
+        >
+          <Flex
+            bg="background.base"
+            borderRadius="base"
+            px={3}
+            py={2}
+            align="center"
+            color="disabled"
+            cursor="default"
+          >
+            <Box
+              borderInlineEnd="1px"
+              borderColor="background.highlight"
+              flex={1}
+            >
+              {typing ? (
+                <Text
+                  as={motion.p}
+                  variants={sentence}
+                  initial="hidden"
+                  animate="visible"
+                  color="body.medium"
+                >
+                  {EXAMPLE_APP_URL.split("").map((char, index) => (
+                    <motion.span key={char + "-" + index} variants={letter}>
+                      {char}
+                    </motion.span>
+                  ))}
+                </Text>
+              ) : (
+                <Text>Search or enter website</Text>
+              )}
+            </Box>
+            <Icon as={TbWorldWww} ms={3} />
+          </Flex>
+        </NotificationPopover>
+      </Box>
+
+      <Flex flex={1} justify="center" pt={{ base: 20, md: 24 }}>
+        <Icon as={TbWorldWww} fontSize="8xl" strokeWidth="1" color="disabled" />
+      </Flex>
+
+      <Flex
+        bg="background.highlight"
+        w="full"
+        px={3}
+        pb={9}
+        pt={4}
+        justify="space-around"
+        fontSize="xl"
+        color="disabled"
+      >
+        <Icon as={BsTriangle} transform="rotate(-90deg)" />
+        <Icon as={BsTriangle} transform="rotate(90deg)" />
+        <Icon as={PiMagnifyingGlass} />
+        <Icon as={IoEllipsisHorizontalSharp} />
+      </Flex>
+    </Flex>
+  )
+}

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

@@ -1,13 +1,18 @@
-import { Box, Flex, Grid, Icon, Text } from "@chakra-ui/react"
+import { Box, Flex, Grid, Icon, Text, TextProps } from "@chakra-ui/react"
 import React from "react"
 import { motion } from "framer-motion"
 import { EthGlyphIcon } from "../../icons"
 import { PiCheckThin } from "react-icons/pi"
 
-interface IProps {
+interface IProps extends Pick<TextProps, "children"> {
   isConnected: boolean
+  displayUrl: string
 }
-export const Slider: React.FC<IProps> = ({ isConnected }) => {
+export const Slider: React.FC<IProps> = ({
+  isConnected,
+  displayUrl,
+  children,
+}) => {
   const ICON_SIZE = "4.5rem" as const
   return (
     <>
@@ -68,7 +73,7 @@ export const Slider: React.FC<IProps> = ({ isConnected }) => {
             </Flex>
           ) : (
             <>
-              <Text textAlign="center" fontWeight="bold" fontSize="lg">
+              <Text textAlign="center" fontWeight="bold" fontSize="lg" mb={4}>
                 Connect account?
               </Text>
               {/* URL Pill */}
@@ -96,14 +101,11 @@ export const Slider: React.FC<IProps> = ({ isConnected }) => {
                   />
                 </Grid>
                 <Text mb={0} me={0.5}>
-                  app.example.com
+                  {displayUrl}
                 </Text>
               </Flex>
               {/* Information */}
-              <Text>
-                Connecting to the website will not share any personal
-                information with the site owners.
-              </Text>
+              <Text>{children}</Text>
             </>
           )}
         </Flex>

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

@@ -8,30 +8,49 @@ import {
 } from "@chakra-ui/react"
 import React from "react"
 import { GrMenu } from "react-icons/gr"
+import { FAKE_DEMO_ADDRESS } from "../../constants"
 import { EthGlyphIcon } from "../../icons"
 import { NotificationPopover } from "../../NotificationPopover"
 
-interface IProps extends BoxProps {}
-export const Web3App: React.FC<IProps> = ({ children, ...boxProps }) => {
+interface IProps extends BoxProps {
+  displayUrl: string
+  appName?: string
+}
+export const Web3App: React.FC<IProps> = ({
+  displayUrl,
+  appName,
+  children,
+  ...boxProps
+}) => {
   const bg = useColorModeValue("#e8e8e8", "#171717")
 
   return (
     <Box h="full" w="full" bg="background.highlight" {...boxProps}>
       <Box p={1} bg={bg}>
         <Text textAlign="center" fontSize="xs" m={0}>
-          app.example.com
+          {displayUrl}
         </Text>
       </Box>
       <NotificationPopover
         title="Example walkthrough"
         content="Try out a real Ethereum application when finished here"
       >
-        <Flex p={6} fontSize="4xl" justify="space-between">
+        <Flex p={6} fontSize="4xl" gap={3} alignItems="center">
           <Icon as={EthGlyphIcon} />
+          <Box flex={1} cursor="default">
+            {appName && (
+              <>
+                <Text fontSize="md" fontWeight="bold">
+                  {appName}
+                </Text>
+                <Text fontSize="sm">{FAKE_DEMO_ADDRESS}</Text>
+              </>
+            )}
+          </Box>
           <Icon as={GrMenu} sx={{ path: { stroke: "body.base" } }} />
         </Flex>
       </NotificationPopover>
-      <>{children}</>
+      {children}
     </Box>
   )
 }

src/components/Simulator/screens/ConnectWeb3/constants.ts

@@ -0,0 +1 @@
+export const EXAMPLE_APP_URL = "app.example.com"