add notification popovers, fix text margin

Author: wackerow

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

@@ -12,6 +12,7 @@ import { BsTriangle } from "react-icons/bs"
 import { PiMagnifyingGlass } from "react-icons/pi"
 import { IoEllipsisHorizontalSharp } from "react-icons/io5"
 import { NFTSupportIcon } from "../../../icons/wallets/NFTSupportIcon"
+import { NotificationPopover } from "../../NotificationPopover"
 
 interface IProps extends FlexProps {
   progressStepper: () => void
@@ -20,9 +21,16 @@ export const Browser: React.FC<IProps> = ({ progressStepper, ...props }) => {
   return (
     <Flex direction="column" h="full" bg="body.light" {...props}>
       <Box bg="background.highlight" w="full" px={3} pt={9} pb={3}>
-        <Box bg="background.base" w="full" borderRadius="base" px={3} py={2}>
-          <Text color="disabled">Search or enter address</Text>
-        </Box>
+        <NotificationPopover
+          title="Example walkthrough"
+          content="Try logging into a real app with your wallet when finished here"
+        >
+          <Box bg="background.base" w="full" borderRadius="base" px={3} py={2}>
+            <Text color="disabled" cursor="default">
+              Search or enter address
+            </Text>
+          </Box>
+        </NotificationPopover>
       </Box>
       <Box p={8} flex={1}>
         <Button

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

@@ -73,7 +73,7 @@ export const Slider: React.FC<IProps> = ({
             </Flex>
           ) : (
             <>
-              <Text textAlign="center" fontWeight="bold" fontSize="lg">
+              <Text textAlign="center" fontWeight="bold" fontSize="lg" mb={4}>
                 Connect account?
               </Text>
               {/* URL Pill */}

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

@@ -19,6 +19,7 @@ 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"
 
 export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
   const { progressStepper, step } = nav
@@ -108,45 +109,59 @@ export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
               </Text>
               <Flex gap={2} mb={6}>
                 <GatsbyImage image={NFTs[0].image} alt="NFT Image" />
-                <Flex
-                  direction="column"
-                  fontSize={{ base: "xs", sm: "sm" }}
-                  textAlign="start"
-                  alignItems="start"
-                  gap={1}
+                <NotificationPopover
+                  title="Example walkthrough"
+                  content="These are some things you could do as the owner of your NFTs"
+                  placement="top"
                 >
-                  <Text fontWeight="bold" fontSize="md" mb="auto" ms={2}>
-                    Cool art
-                  </Text>
-                  <Button
-                    variant="link"
-                    isDisabled
-                    leftIcon={<Icon as={RiAuctionLine} fontSize="xs" />}
+                  <Flex
+                    direction="column"
+                    fontSize={{ base: "xs", sm: "sm" }}
+                    textAlign="start"
+                    alignItems="start"
+                    gap={1}
                   >
-                    Set a price
+                    <Text fontWeight="bold" fontSize="md" mb="auto" ms={2}>
+                      Cool art
+                    </Text>
+                    <Button
+                      variant="link"
+                      isDisabled
+                      leftIcon={<Icon as={RiAuctionLine} fontSize="xs" />}
+                    >
+                      Set a price
+                    </Button>
+                    <Button
+                      variant="link"
+                      isDisabled
+                      leftIcon={<Icon as={RiPriceTag2Line} fontSize="xs" />}
+                    >
+                      Auction item
+                    </Button>
+                    <Button
+                      variant="link"
+                      isDisabled
+                      leftIcon={<Icon as={RiFileTransferLine} fontSize="xs" />}
+                    >
+                      Transfer item
+                    </Button>
+                  </Flex>
+                </NotificationPopover>
+              </Flex>
+              <NotificationPopover
+                title="Example walkthrough"
+                content="Try out a real Ethereum application when finished here"
+                placement="top"
+              >
+                <Box fontSize={{ base: "sm", md: "md" }}>
+                  <Button variant="link" isDisabled display="block">
+                    Browse other artwork
                   </Button>
-                  <Button
-                    variant="link"
-                    isDisabled
-                    leftIcon={<Icon as={RiPriceTag2Line} fontSize="xs" />}
-                  >
-                    Auction item
+                  <Button variant="link" isDisabled>
+                    Mint new NFT
                   </Button>
-                  <Button
-                    variant="link"
-                    isDisabled
-                    leftIcon={<Icon as={RiFileTransferLine} fontSize="xs" />}
-                  >
-                    Transfer item
-                  </Button>
-                </Flex>
-              </Flex>
-              <Button variant="link" isDisabled>
-                Browse other artwork
-              </Button>
-              <Button variant="link" isDisabled>
-                Mint new NFT
-              </Button>
+                </Box>
+              </NotificationPopover>
             </Box>
           </Web3App>
         </motion.div>