From e439cc8a79a9a565267478043728fa9f5a666e41 Mon Sep 17 00:00:00 2001
From: NidhiKJha <menidhikjha@gmail.com>
Date: Thu, 14 Sep 2023 16:08:31 +0530
Subject: [PATCH] added menu item to connection site

---
 .../connected-sites-list.component.js         | 134 ++++++++++--------
 .../connected-accounts.component.js           |  21 ++-
 2 files changed, 90 insertions(+), 65 deletions(-)

diff --git a/ui/components/app/connected-sites-list/connected-sites-list.component.js b/ui/components/app/connected-sites-list/connected-sites-list.component.js
index 83355bf8801f..d2c867c91410 100644
--- a/ui/components/app/connected-sites-list/connected-sites-list.component.js
+++ b/ui/components/app/connected-sites-list/connected-sites-list.component.js
@@ -1,70 +1,86 @@
-import React, { Component } from 'react';
+import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import Button from '../../ui/button';
-import { AvatarFavicon } from '../../component-library';
+import { AvatarFavicon, ButtonIcon, IconName } from '../../component-library';
 import { stripHttpsSchemeWithoutPort } from '../../../helpers/utils/util';
 import SiteOrigin from '../../ui/site-origin';
-import { Size } from '../../../helpers/constants/design-system';
+import { BorderColor, Size } from '../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { Menu, MenuItem } from '../../ui/menu';
 
-export default class ConnectedSitesList extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
-  static propTypes = {
-    connectedSubjects: PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string,
-        iconUrl: PropTypes.string,
-        origin: PropTypes.string,
-      }),
-    ).isRequired,
-    onDisconnect: PropTypes.func.isRequired,
-  };
-
-  render() {
-    const { connectedSubjects, onDisconnect } = this.props;
-    const { t } = this.context;
-
-    return (
-      <main className="connected-sites-list__content-rows">
-        {connectedSubjects.map((subject) => (
-          <div
-            key={subject.origin}
-            className="connected-sites-list__content-row"
-          >
-            <div className="connected-sites-list__subject-info">
-              <AvatarFavicon
-                className="connected-sites-list__subject-icon"
-                name={subject.name}
-                size={Size.MD}
-                src={subject.iconUrl}
-              />
-              <SiteOrigin
-                className="connected-sites-list__subject-name"
-                title={subject.extensionId || subject.origin}
-                siteOrigin={this.getSubjectDisplayName(subject)}
-              />
-            </div>
-            <Button
-              className="connected-sites-list__content-row-link-button"
-              onClick={() => onDisconnect(subject.origin)}
-              type="link"
-            >
-              {t('disconnect')}
-            </Button>
-          </div>
-        ))}
-      </main>
-    );
-  }
+export default function ConnectedSitesList({
+  connectedSubjects,
+  onDisconnect,
+}) {
+  const [showOptions, setShowOptions] = useState(false);
+  const ref = useRef(false);
+  const t = useI18nContext();
 
-  getSubjectDisplayName(subject) {
+  const getSubjectDisplayName = (subject) => {
     if (subject.extensionId) {
-      return this.context.t('externalExtension');
+      return t('externalExtension');
     }
 
     // We strip https schemes only, and only if the URL has no port.
     return stripHttpsSchemeWithoutPort(subject.origin);
-  }
+  };
+
+  return (
+    <main className="connected-sites-list__content-rows">
+      {connectedSubjects.map((subject) => (
+        <div key={subject.origin} className="connected-sites-list__content-row">
+          <div className="connected-sites-list__subject-info">
+            <AvatarFavicon
+              borderColor={BorderColor.borderMuted}
+              className="connected-sites-list__subject-icon"
+              name={subject.name}
+              size={Size.MD}
+              src={subject.iconUrl}
+            />
+            <SiteOrigin
+              className="connected-sites-list__subject-name"
+              title={subject.extensionId || subject.origin}
+              siteOrigin={getSubjectDisplayName(subject)}
+            />
+          </div>
+          <div ref={ref}>
+            <ButtonIcon
+              iconName={IconName.MoreVertical}
+              className="connected-accounts-options__button"
+              onClick={() => setShowOptions(true)}
+              ariaLabel={t('options')}
+            />
+            {showOptions ? (
+              <Menu
+                anchorElement={ref.current}
+                onHide={() => setShowOptions(false)}
+                popperOptions={{
+                  modifiers: [
+                    { name: 'preventOverflow', options: { altBoundary: true } },
+                  ],
+                }}
+              >
+                <MenuItem
+                  iconName={IconName.Logout}
+                  onClick={() => onDisconnect(subject.origin)}
+                >
+                  {t('disconnect')}
+                </MenuItem>
+              </Menu>
+            ) : null}
+          </div>
+        </div>
+      ))}
+    </main>
+  );
 }
+
+ConnectedSitesList.propTypes = {
+  connectedSubjects: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      iconUrl: PropTypes.string,
+      origin: PropTypes.string,
+    }),
+  ).isRequired,
+  onDisconnect: PropTypes.func.isRequired,
+};
diff --git a/ui/pages/connected-accounts/connected-accounts.component.js b/ui/pages/connected-accounts/connected-accounts.component.js
index ea049eca823b..8cd95a71bb63 100644
--- a/ui/pages/connected-accounts/connected-accounts.component.js
+++ b/ui/pages/connected-accounts/connected-accounts.component.js
@@ -32,12 +32,21 @@ export default function ConnectedAccounts({
   const connectedSubjectsMetadata = subjectMetadata[originOfActiveTab];
   const isPermissionSubject =
     permissionSubjects[originOfActiveTab]?.origin ===
-    connectedSubjectsMetadata?.origin;
+      connectedSubjectsMetadata?.origin &&
+    permissionSubjects[originOfActiveTab]?.permissions[
+      WALLET_SNAP_PERMISSION_KEY
+    ];
+
+  // To get the metaData of the snap connected
   const connectedSubjects = [connectedSubjectsMetadata];
-  const permissionSubjectsLength = Object.keys(
-    permissionSubjects[originOfActiveTab]?.permissions?.wallet_snap.caveats[0]
-      .value,
-  ).length;
+
+  // To evaluate the length of connected snaps
+  const connectedPermissionSubjectsLength =
+    isPermissionSubject &&
+    Object.keys(
+      permissionSubjects[originOfActiveTab]?.permissions?.wallet_snap
+        ?.caveats[0]?.value,
+    )?.length;
 
   const connectedAccountsDescription =
     connectedAccounts.length > 0
@@ -52,7 +61,7 @@ export default function ConnectedAccounts({
   } else if (connectedAccounts.length && isPermissionSubject) {
     subtitle = t('connectedAccountsAndSnapDescription', [
       connectedAccounts.length,
-      permissionSubjectsLength,
+      connectedPermissionSubjectsLength,
     ]);
   } else {
     subtitle = t('connectedAccountsEmptyDescription');