add app name

Author: wackerow

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

@@ -14,11 +14,11 @@ import { NotificationPopover } from "../../NotificationPopover"
 
 interface IProps extends BoxProps {
   displayUrl: string
-  connected?: boolean
+  appName?: string
 }
 export const Web3App: React.FC<IProps> = ({
   displayUrl,
-  connected,
+  appName,
   children,
   ...boxProps
 }) => {
@@ -35,9 +35,18 @@ export const Web3App: React.FC<IProps> = ({
         title="Example walkthrough"
         content="Try out a real Ethereum application when finished here"
       >
-        <Flex p={6} fontSize="4xl" justify="space-between" alignItems="center">
+        <Flex p={6} fontSize="4xl" gap={3} alignItems="center">
           <Icon as={EthGlyphIcon} />
-          {connected && <Text fontSize="sm">{FAKE_DEMO_ADDRESS}</Text>}
+          <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>

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

@@ -97,7 +97,11 @@ export const ConnectWeb3: React.FC<PhoneScreenProps> = ({ nav, ctaLabel }) => {
           exit={{ opacity: 0 }}
           style={{ height: "100%" }}
         >
-          <Web3App bg="background.base" connected displayUrl="app.example.com">
+          <Web3App
+            bg="background.base"
+            appName="NFT Marketplace"
+            displayUrl="app.example.com"
+          >
             <Box
               px={6}
               py={{ base: 2, md: 6 }}