added dapp connection menu

MetaMask · Feb 19, 2025 · 12f595d · 12f595d
1 parent f9e35ce
commit 12f595d
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 19 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/ui/components/multichain/connected-site-menu/connected-site-menu.js b/ui/components/multichain/connected-site-menu/connected-site-menu.js
@@ -44,7 +44,7 @@ export const ConnectedSiteMenu = ({
   disabled,
 }) => {
   const t = useI18nContext();
-    const [showPopover, setShowPopover] = useState(false);
+  const [showPopover, setShowPopover] = useState(false);
   const handleMouseEnter = () => {
     setShowPopover(true);
   };
@@ -55,12 +55,10 @@ export const ConnectedSiteMenu = ({
 
   const [referenceElement, setReferenceElement] = useState();
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const setBoxRef = (ref: any) => {
+  const setBoxRef = (ref) => {
     setReferenceElement(ref);
   };
 
-
   const selectedAccount = useSelector(getSelectedInternalAccount);
   const subjectMetadata = useSelector(getSubjectMetadata);
   const connectedOrigin = useSelector(getOriginOfCurrentTab);
@@ -145,7 +143,10 @@ export const ConnectedSiteMenu = ({
         )}
       </Box>
       {showPopover && (
-        <ConnectedSitePopover referenceElement={referenceElement} isOpen={showPopover} />
+        <ConnectedSitePopover
+          referenceElement={referenceElement}
+          isOpen={showPopover}
+        />
       )}
     </>
   );

diff --git a/ui/components/multichain/connected-site-popover/connected-site-popover.stories.tsx b/ui/components/multichain/connected-site-popover/connected-site-popover.stories.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
-import {ConnectedSitePopover} from './connected-site-popover';
+import { ConnectedSitePopover } from './connected-site-popover';
 
 export default {
   title: 'Components/Multichain/ConnectedSitePopover',
   component: ConnectedSitePopover,
   argTypes: {
-    onRemove: {
-      action: 'onRemove',
-    },
-    onViewOnOpensea: {
-      action: 'onViewOnOpensea',
+    isOpen: {
+      control: 'boolean',
     },
   },
+  args: {
+    isOpen: true,
+    networkImageUrl: './images/eth_logo.svg',
+    networkName: 'Avalanche Network C-Chain',
+    isConnected: true,
+  },
 };
 
 export const DefaultStory = (args) => <ConnectedSitePopover {...args} />;

diff --git a/ui/components/multichain/connected-site-popover/connected-site-popover.tsx b/ui/components/multichain/connected-site-popover/connected-site-popover.tsx
@@ -1,20 +1,33 @@
-import React, { useState } from 'react';
-import { Box, Popover, PopoverPosition, Text } from '../../component-library';
+import React, { useContext, useState } from 'react';
+import {
+  AvatarNetwork,
+  AvatarNetworkSize,
+  Box,
+  Button,
+  ButtonLink,
+  ButtonSecondary,
+  IconName,
+  Popover,
+  PopoverPosition,
+  Text,
+} from '../../component-library';
 import {
   BackgroundColor,
   Display,
+  FlexDirection,
   JustifyContent,
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
+import { I18nContext } from '../../../contexts/i18n';
 
 type ConnectedSitePopoverProp = {
   title: string;
   valueColor?: TextColor;
   value?: string | null;
   icon?: React.ReactNode;
   buttonAddressValue?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;
-  withPopover?: boolean;
+  isConnected?: boolean;
   fullValue?: string;
 };
 
@@ -28,7 +41,11 @@ export const ConnectedSitePopover: React.FC<ConnectedSitePopoverProp> = ({
   fullValue,
   referenceElement,
   isOpen,
+  networkImageUrl,
+  networkName,
+  isConnected,
 }) => {
+  const t = useContext(I18nContext);
   return (
     <Box
       display={Display.Flex}
@@ -40,14 +57,55 @@ export const ConnectedSitePopover: React.FC<ConnectedSitePopoverProp> = ({
         referenceElement={referenceElement}
         isOpen={isOpen}
         position={PopoverPosition.BottomStart}
-        hasArrow
         flip
         backgroundColor={BackgroundColor.overlayAlternative}
-        className="tokenId-popover"
-        paddingLeft={4}
-        paddingRight={4}
+        paddingLeft={0}
+        paddingRight={0}
+        style={{
+          width: '256px',
+        }}
       >
-        <Box>Nidhi K Jha</Box>
+        <Box display={Display.Flex} flexDirection={FlexDirection.Column}>
+          <Box
+            style={{
+              borderBottomWidth: '1px',
+              borderBottomStyle: 'solid',
+              borderBottomColor: '#858B9A33',
+            }}
+            paddingLeft={4}
+            paddingRight={4}
+            paddingBottom={2}
+          >
+            <Text variant={TextVariant.bodyMd}>sitename.domain.url</Text>
+            {isConnected ? (
+              <Box display={Display.Flex} flexDirection={FlexDirection.Row}>
+                <ButtonLink>{networkName}</ButtonLink>{' '}
+                <AvatarNetwork
+                  size={AvatarNetworkSize.Xs}
+                  name={networkImageUrl}
+                  src={networkImageUrl ?? undefined}
+                />
+              </Box>
+            ) : (
+              <Text variant={TextVariant.bodySm}>Not connected</Text>
+            )}
+          </Box>
+          <Box paddingLeft={4} paddingRight={4} paddingTop={2}>
+            <Box>
+              <Text variant={TextVariant.bodyMd}>
+                To connect to a site, select the "connect" button. MetaMask can
+                only connect to web3 sites.
+              </Text>
+              <ButtonLink>Learn more</ButtonLink>
+            </Box>
+          </Box>
+          <Box paddingTop={2} paddingLeft={4} paddingRight={4}>
+
+            <ButtonSecondary endIconName={IconName.Export} block>
+              {isConnected ? t('managePermissions'): t('exploreweb3')}
+            </ButtonSecondary>
+          </Box>
+        </Box>
       </Popover>
     </Box>
   );