Interactive simulator patches

src/components/Simulator/NotificationPopover.tsx

@@ -0,0 +1,52 @@
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  PopoverContentProps,
+  PopoverProps,
+  PopoverHeader,
+  PopoverCloseButton,
+  Flex,
+  Portal,
+} from "@chakra-ui/react"
+import React, { type ReactNode } from "react"
+
+interface IProps
+  extends Omit<PopoverContentProps, "children">,
+    Pick<PopoverProps, "placement"> {
+  children: ReactNode
+}
+export const NotificationPopover: React.FC<IProps> = ({
+  placement,
+  children,
+  content,
+  title,
+  ...restProps
+}) => {
+  return (
+    <Popover placement={placement}>
+      <PopoverTrigger>{children}</PopoverTrigger>
+      <Portal>
+        <PopoverContent
+          bg="background.highlight"
+          px={4}
+          py={2}
+          maxW="15rem"
+          borderRadius="base"
+          boxShadow="tooltip"
+          fontSize="xs"
+          {...restProps}
+        >
+          <Flex gap={2}>
+            <PopoverHeader fontWeight="bold" mb={2} flex={1} mt={0.5}>
+              {title || ""}
+            </PopoverHeader>
+            <PopoverCloseButton ms="auto" />
+          </Flex>
+          <PopoverBody>{content}</PopoverBody>
+        </PopoverContent>
+      </Portal>
+    </Popover>
+  )
+}

src/components/Simulator/WalletHome/AddressPill.tsx

@@ -1,29 +1,33 @@
-import { Button, Icon, type ButtonProps } from "@chakra-ui/react"
+import { Flex, type FlexProps, Icon, Text } from "@chakra-ui/react"
 import React from "react"
 import { MdContentCopy } from "react-icons/md"
 import { FAKE_DEMO_ADDRESS } from "../constants"
+import { NotificationPopover } from "../NotificationPopover"
 
-interface IProps extends Omit<ButtonProps, "children"> {
-  children?: Pick<ButtonProps, "children">
+interface IProps extends Omit<FlexProps, "children"> {
+  children?: Pick<FlexProps, "children">
 }
 export const AddressPill: React.FC<IProps> = ({ children, ...btnProps }) => (
-  <Button
-    rightIcon={<Icon as={MdContentCopy} w={4} />}
-    borderRadius="full"
-    isDisabled
-    _disabled={{
-      bg: "background.highlight",
-      color: "disabled",
-      border: "1px",
-      borderColor: "border",
-    }}
-    py={0}
-    px={2}
-    alignSelf="center"
-    pointerEvents="none"
-    fontSize="xs"
-    {...btnProps}
+  <NotificationPopover
+    title="Example walkthrough"
+    content="Share your address (public identifier) from your own wallet when finished here"
   >
-    {children ?? FAKE_DEMO_ADDRESS}
-  </Button>
+    <Flex
+      gap={2}
+      align="center"
+      borderRadius="full"
+      bg="background.highlight"
+      color="disabled"
+      border="1px"
+      borderColor="border"
+      py={1}
+      px={2}
+      alignSelf="center"
+      fontSize="xs"
+      {...btnProps}
+    >
+      <Text m={0}>{children ?? FAKE_DEMO_ADDRESS}</Text>
+      <Icon as={MdContentCopy} w={4} fontSize="lg" />
+    </Flex>
+  </NotificationPopover>
 )

src/components/Simulator/WalletHome/WalletBalance.tsx

@@ -11,7 +11,7 @@ export const WalletBalance: React.FC<IProps> = ({
   usdAmount = 0,
   ...boxProps
 }) => (
-  <Box {...boxProps}>
+  <Box zIndex={1} {...boxProps}>
     <Text textAlign="center" color="body.medium" mb={{ base: 2, md: 4 }}>
       Your total
     </Text>

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

@@ -9,6 +9,7 @@ import {
 import React from "react"
 import { GrMenu } from "react-icons/gr"
 import { EthGlyphIcon } from "../../icons"
+import { NotificationPopover } from "../../NotificationPopover"
 
 interface IProps extends BoxProps {}
 export const Web3App: React.FC<IProps> = ({ children, ...boxProps }) => {
@@ -21,10 +22,15 @@ export const Web3App: React.FC<IProps> = ({ children, ...boxProps }) => {
           app.example.com
         </Text>
       </Box>
-      <Flex justify="space-between" p={6} fontSize="4xl">
-        <Icon as={EthGlyphIcon} />
-        <Icon as={GrMenu} sx={{ path: { stroke: "body.base" } }} />
-      </Flex>
+      <NotificationPopover
+        title="Example walkthrough"
+        content="Try out a real Ethereum application when finished here"
+      >
+        <Flex p={6} fontSize="4xl" justify="space-between">
+          <Icon as={EthGlyphIcon} />
+          <Icon as={GrMenu} sx={{ path: { stroke: "body.base" } }} />
+        </Flex>
+      </NotificationPopover>
       <>{children}</>
     </Box>
   )

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

@@ -15,6 +15,7 @@ import { motion } from "framer-motion"
 import { graphql, useStaticQuery } from "gatsby"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { FAKE_DEMO_ADDRESS } from "../../constants"
+import { NotificationPopover } from "../../NotificationPopover"
 
 const MotionBox = motion(Box)
 
@@ -76,16 +77,22 @@ export const ReceiveEther = () => {
         Show this QR code containing your account address to the sender
       </Text>
       {/* QR Code */}
-      <Box w="fit-content" mx="auto" mb={SPACING} p={3} bg="background.base">
-        <Image
-          as={GatsbyImage}
-          image={qrImage}
-          maxW={QR_SIZE}
-          maxH={QR_SIZE}
-          p={3}
-          borderRadius="base"
-        />
-      </Box>
+      <NotificationPopover
+        title="Example walkthrough"
+        content="Share QR containing your address (public identifier) from your own wallet when finished here"
+        placement="top"
+      >
+        <Box w="fit-content" mx="auto" mb={SPACING} p={3} bg="background.base">
+          <Image
+            as={GatsbyImage}
+            image={qrImage}
+            maxW={QR_SIZE}
+            maxH={QR_SIZE}
+            p={3}
+            borderRadius="base"
+          />
+        </Box>
+      </NotificationPopover>
       <Flex
         borderRadius="base"
         border="1px"
@@ -107,37 +114,24 @@ export const ReceiveEther = () => {
             {FAKE_DEMO_ADDRESS}
           </Text>
         </Box>
-        <Popover placement="top-start">
-          <PopoverTrigger>
-            <Button
-              fontSize="xs"
-              fontWeight="bold"
-              color="body.base"
-              bg="body.light"
-              borderRadius="10px"
-              h="fit-content"
-              py={1.5}
-              px={2}
-            >
-              Copy
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent
-            bg="background.highlight"
-            p={4}
-            w="20ch"
-            borderRadius="base"
-            boxShadow="tooltip"
+        <NotificationPopover
+          title="Example walkthrough"
+          content="Share your address (public identifier) from your own wallet when finished here"
+          placement="top-start"
+        >
+          <Button
+            fontSize="xs"
+            fontWeight="bold"
+            color="body.base"
+            bg="body.light"
+            borderRadius="10px"
+            h="fit-content"
+            py={1.5}
+            px={2}
           >
-            <PopoverArrow bg="background.highlight" />
-            <PopoverBody>
-              <Text m={0}>
-                This is just a demo account! Try this with your own wallet when
-                your finished here.
-              </Text>
-            </PopoverBody>
-          </PopoverContent>
-        </Popover>
+            Copy
+          </Button>
+        </NotificationPopover>
       </Flex>
       <Text m={0} fontSize="xs" lineHeight={1.7}>
         Use this address for receiving tokens and NFTs on the Ethereum network.

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

@@ -1,6 +1,6 @@
 import { Box, Button, Flex, Icon, Text } from "@chakra-ui/react"
 import React from "react"
-import { DemoOnlyPopover } from "../../DemoOnlyPopover"
+import { NotificationPopover } from "../../NotificationPopover"
 import { EthTokenIcon } from "../../icons"
 
 interface IProps {
@@ -73,7 +73,11 @@ export const SendEther: React.FC<IProps> = ({
         fontSize="xs"
       >
         {/* Left side: Displayed send amount */}
-        <DemoOnlyPopover placement="top">
+        <NotificationPopover
+          title="Example walkthrough"
+          content="Choose a value below"
+          placement="top"
+        >
           <Flex
             alignItems="top"
             flex={1}
@@ -84,10 +88,14 @@ export const SendEther: React.FC<IProps> = ({
               {formatChosenAmount}
             </Text>
           </Flex>
-        </DemoOnlyPopover>
+        </NotificationPopover>
         {/* Right side */}
         <Flex direction="column" alignItems="end">
-          <DemoOnlyPopover placement="top">
+          <NotificationPopover
+            placement="top"
+            title="Example walkthrough"
+            content="In this walkthrough you can only send ETH, but in real wallet you can send different tokens as well"
+          >
             {/* Token selector pill */}
             <Flex
               px={2}
@@ -102,7 +110,7 @@ export const SendEther: React.FC<IProps> = ({
                 ETH
               </Text>
             </Flex>
-          </DemoOnlyPopover>
+          </NotificationPopover>
           {/* Balances */}
           <Text fontWeight="bold" m={0} lineHeight={1}>
             Balance: {usdAmount}

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

@@ -15,7 +15,7 @@ import { CategoryTabs } from "../../WalletHome/CategoryTabs"
 import { EthTokenIconGrayscale, QrCodeIcon } from "../../icons"
 import type { SimulatorNavProps } from "../../interfaces"
 import { CONTACTS } from "./constants"
-import { DemoOnlyPopover } from "../../DemoOnlyPopover"
+import { NotificationPopover } from "../../NotificationPopover"
 
 interface IProps extends SimulatorNavProps {
   setRecipient: (name: string) => void
@@ -31,7 +31,10 @@ export const SendFromContacts: React.FC<IProps> = ({ nav, setRecipient }) => {
         <Text fontSize={{ base: "xl", md: "2xl" }} fontWeight="bold" mb={8}>
           Choose recipient
         </Text>
-        <DemoOnlyPopover fontSize="sm">
+        <NotificationPopover
+          title="Example walkthrough"
+          content={`Choose ${CONTACTS[0].name} from recent contacts`}
+        >
           <Button
             variant="outline"
             leftIcon={<Icon as={PiMagnifyingGlass} />}
@@ -49,7 +52,7 @@ export const SendFromContacts: React.FC<IProps> = ({ nav, setRecipient }) => {
               Address or contacts
             </Text>
           </Button>
-        </DemoOnlyPopover>
+        </NotificationPopover>
       </Box>
       <Box py={8} px={6} bg="background.highlight" h="full">
         <CategoryTabs

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

@@ -48,7 +48,7 @@ export const Success: React.FC<IProps> = ({
     }
   }, [])
 
-  const WALLET_FADE_IN_DELAY = 2000
+  const WALLET_FADE_IN_DELAY = 3000
   useEffect(() => {
     if (txPending) return
     const timeout = setTimeout(() => {