From 8881106e99ce5223eaa3ffdb98b91df311bd15d0 Mon Sep 17 00:00:00 2001
From: NidhiKJha <menidhikjha@gmail.com>
Date: Wed, 21 Aug 2024 19:07:02 +0100
Subject: [PATCH] added review perm page

---
 app/_locales/en/messages.json                 |   3 +
 .../multichain/global-menu/global-menu.js     |  19 ++
 ui/components/multichain/pages/index.js       |   1 +
 .../pages/review-permissions-page/index.js    |   1 +
 .../review-permissions-page.stories.tsx       |  10 +
 .../review-permissions-page.test.tsx          |   0
 .../review-permissions-page.tsx               |  45 +++++
 .../site-cell/site-cell.stories.tsx           |   0
 .../site-cell/site-cell.tsx                   | 184 ++++++++++++++++++
 ui/helpers/constants/routes.ts                |   2 +
 ui/pages/routes/routes.component.js           |   7 +
 11 files changed, 272 insertions(+)
 create mode 100644 ui/components/multichain/pages/review-permissions-page/index.js
 create mode 100644 ui/components/multichain/pages/review-permissions-page/review-permissions-page.stories.tsx
 create mode 100644 ui/components/multichain/pages/review-permissions-page/review-permissions-page.test.tsx
 create mode 100644 ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx
 create mode 100644 ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.stories.tsx
 create mode 100644 ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 163a68225027..9804c1ecdce3 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1810,6 +1810,9 @@
   "encryptionPublicKeyRequest": {
     "message": "Request encryption public key"
   },
+  "accountsPermissionsTitle": {
+    "message": "See your accounts and suggest transactions"
+  },
   "endpointReturnedDifferentChainId": {
     "message": "The RPC URL you have entered returned a different chain ID ($1). Please update the Chain ID to match the RPC URL of the network you are trying to add.",
     "description": "$1 is the return value of eth_chainId from an RPC endpoint"
diff --git a/ui/components/multichain/global-menu/global-menu.js b/ui/components/multichain/global-menu/global-menu.js
index 59bf0891943d..332d22cd84a4 100644
--- a/ui/components/multichain/global-menu/global-menu.js
+++ b/ui/components/multichain/global-menu/global-menu.js
@@ -11,6 +11,7 @@ import {
   NOTIFICATIONS_ROUTE,
   SNAPS_ROUTE,
   PERMISSIONS,
+  REVIEW_PERMISSIONS,
 } from '../../../helpers/constants/routes';
 import {
   lockMetamask,
@@ -247,6 +248,24 @@ export const GlobalMenu = ({ closeMenu, anchorElement, isOpen }) => {
       >
         {t('allPermissions')}
       </MenuItem>
+      <MenuItem
+        iconName={IconName.SecurityTick}
+        onClick={() => {
+          history.push(REVIEW_PERMISSIONS);
+          trackEvent({
+            event: MetaMetricsEventName.NavPermissionsOpened,
+            category: MetaMetricsEventCategory.Navigation,
+            properties: {
+              location: METRICS_LOCATION,
+            },
+          });
+          closeMenu();
+        }}
+        data-testid="global-menu-connected-sites"
+        disabled={hasUnapprovedTransactions}
+      >
+        "nid"
+      </MenuItem>
 
       {
         ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
diff --git a/ui/components/multichain/pages/index.js b/ui/components/multichain/pages/index.js
index a8e64d1fcf9b..ffb51f39d015 100644
--- a/ui/components/multichain/pages/index.js
+++ b/ui/components/multichain/pages/index.js
@@ -1,2 +1,3 @@
 export { Connections } from './connections';
 export { PermissionsPage } from './permissions-page/permissions-page';
+export { ReviewPermissions } from './review-permissions-page/review-permissions-page';
diff --git a/ui/components/multichain/pages/review-permissions-page/index.js b/ui/components/multichain/pages/review-permissions-page/index.js
new file mode 100644
index 000000000000..7af352026e76
--- /dev/null
+++ b/ui/components/multichain/pages/review-permissions-page/index.js
@@ -0,0 +1 @@
+export { ReviewPermissions } from './review-permissions-page';
diff --git a/ui/components/multichain/pages/review-permissions-page/review-permissions-page.stories.tsx b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.stories.tsx
new file mode 100644
index 000000000000..b2da4553ce50
--- /dev/null
+++ b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.stories.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { ReviewPermissions } from '.';
+
+export default {
+  title: 'Components/Multichain/ReviewPermissions',
+};
+
+export const DefaultStory = () => <ReviewPermissions />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/multichain/pages/review-permissions-page/review-permissions-page.test.tsx b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.test.tsx
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx
new file mode 100644
index 000000000000..ab7578f01a9a
--- /dev/null
+++ b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import {
+  BackgroundColor,
+  IconColor,
+} from '../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { getConnectedSitesListWithNetworkInfo } from '../../../../selectors/index';
+import {
+  ButtonIcon,
+  ButtonIconSize,
+  IconName,
+} from '../../../component-library';
+import { Content, Footer, Header, Page } from '../page';
+
+export const ReviewPermissions = () => {
+  const t = useI18nContext();
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const sitesConnectionsList = useSelector(
+    getConnectedSitesListWithNetworkInfo,
+  );
+  console.log(sitesConnectionsList, 'sitesConnectionsList');
+  return (
+    <Page
+      data-testid="connections-page"
+      className="main-container connections-page"
+    >
+      <Header
+        backgroundColor={BackgroundColor.backgroundDefault}
+        startAccessory={
+          <ButtonIcon
+            ariaLabel={t('back')}
+            iconName={IconName.ArrowLeft}
+            className="connections-header__start-accessory"
+            size={ButtonIconSize.Sm}
+          />
+        }
+      ></Header>
+      <Content padding={0}>Nidhi</Content>
+      <Footer></Footer>
+    </Page>
+  );
+};
diff --git a/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.stories.tsx b/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.stories.tsx
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx b/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx
new file mode 100644
index 000000000000..23134a596049
--- /dev/null
+++ b/ui/components/multichain/pages/review-permissions-page/site-cell/site-cell.tsx
@@ -0,0 +1,184 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { SubjectType } from '@metamask/permission-controller';
+import {
+  AlignItems,
+  BackgroundColor,
+  BlockSize,
+  Display,
+  FlexDirection,
+  IconColor,
+  JustifyContent,
+  TextAlign,
+  TextColor,
+  TextVariant,
+} from '../../../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import {
+  AvatarFavicon,
+  AvatarNetwork,
+  AvatarNetworkSize,
+  BadgeWrapper,
+  Box,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+} from '../../../../component-library';
+import { getURLHost } from '../../../../../helpers/utils/util';
+import { ConnectionListTooltip } from '../../permissions-page/connection-list-tooltip/connection-list-tooltip';
+
+export const ConnectionListItem = ({ connection, onClick }) => {
+  const t = useI18nContext();
+  const isSnap = connection.subjectType === SubjectType.Snap;
+
+  return (
+    <>
+      <Box
+        data-testid="connection-list-item"
+        as="button"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        alignItems={AlignItems.baseline}
+        width={BlockSize.Full}
+        backgroundColor={BackgroundColor.backgroundDefault}
+        onClick={onClick}
+        padding={4}
+        gap={4}
+        className="multichain-connection-list-item"
+      >
+        <Icon
+          display={Display.Flex}
+          name={IconName.ArrowRight}
+          color={IconColor.iconDefault}
+          size={IconSize.Sm}
+          backgroundColor={BackgroundColor.backgroundDefault}
+        />
+        <Box
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+          width={BlockSize.FiveTwelfths}
+          style={{ alignSelf: 'center', flexGrow: '1' }}
+        >
+          <Text
+            variant={TextVariant.bodyMd}
+            textAlign={TextAlign.Left}
+            ellipsis
+          >
+            {t('accountsPermissionsTitle')}
+          </Text>
+
+          <Box
+            display={Display.Flex}
+            flexDirection={FlexDirection.Row}
+            alignItems={AlignItems.center}
+            gap={1}
+          >
+            <Text
+              as="span"
+              width={BlockSize.Max}
+              color={TextColor.textAlternative}
+              variant={TextVariant.bodyMd}
+            >
+              {t('connectedWith')}
+            </Text>
+            <ConnectionListTooltip connection={connection} />
+          </Box>
+        </Box>
+        <Box
+          display={Display.Flex}
+          justifyContent={JustifyContent.flexEnd}
+          alignItems={AlignItems.center}
+          style={{ flex: '1', alignSelf: 'center' }}
+          gap={2}
+        >
+          <Icon
+            display={Display.Flex}
+            name={IconName.MoreVertical}
+            color={IconColor.iconDefault}
+            size={IconSize.Sm}
+            backgroundColor={BackgroundColor.backgroundDefault}
+          />
+        </Box>
+      </Box>
+      <Box
+        data-testid="connection-list-item"
+        as="button"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        alignItems={AlignItems.baseline}
+        width={BlockSize.Full}
+        backgroundColor={BackgroundColor.backgroundDefault}
+        onClick={onClick}
+        padding={4}
+        gap={4}
+        className="multichain-connection-list-item"
+      >
+        <Icon
+          display={Display.Flex}
+          name={IconName.ArrowRight}
+          color={IconColor.iconDefault}
+          size={IconSize.Sm}
+          backgroundColor={BackgroundColor.backgroundDefault}
+        />
+        <Box
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+          width={BlockSize.FiveTwelfths}
+          style={{ alignSelf: 'center', flexGrow: '1' }}
+        >
+          <Text
+            variant={TextVariant.bodyMd}
+            textAlign={TextAlign.Left}
+            ellipsis
+          >
+            {t('accountsPermissionsTitle')}
+          </Text>
+
+          <Box
+            display={Display.Flex}
+            flexDirection={FlexDirection.Row}
+            alignItems={AlignItems.center}
+            gap={1}
+          >
+            <Text
+              as="span"
+              width={BlockSize.Max}
+              color={TextColor.textAlternative}
+              variant={TextVariant.bodyMd}
+            >
+              {t('connectedWith')}
+            </Text>
+            <ConnectionListTooltip connection={connection} />
+          </Box>
+        </Box>
+        <Box
+          display={Display.Flex}
+          justifyContent={JustifyContent.flexEnd}
+          alignItems={AlignItems.center}
+          style={{ flex: '1', alignSelf: 'center' }}
+          gap={2}
+        >
+          <Icon
+            display={Display.Flex}
+            name={IconName.MoreVertical}
+            color={IconColor.iconDefault}
+            size={IconSize.Sm}
+            backgroundColor={BackgroundColor.backgroundDefault}
+          />
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+ConnectionListItem.propTypes = {
+  /**
+   * The connection data to display
+   */
+  connection: PropTypes.object.isRequired,
+  /**
+   * The function to call when the connection is clicked
+   */
+  onClick: PropTypes.func.isRequired,
+};
diff --git a/ui/helpers/constants/routes.ts b/ui/helpers/constants/routes.ts
index e6445fc6df5f..88a19ee13e29 100644
--- a/ui/helpers/constants/routes.ts
+++ b/ui/helpers/constants/routes.ts
@@ -40,6 +40,7 @@ const SRP_REMINDER = '/onboarding/remind-srp';
 ///: END:ONLY_INCLUDE_IF
 const SEND_ROUTE = '/send';
 const CONNECTIONS = '/connections';
+const REVIEW_PERMISSIONS = './review-permissions';
 const PERMISSIONS = '/permissions';
 const TOKEN_DETAILS = '/token-details';
 const CONNECT_ROUTE = '/connect';
@@ -222,6 +223,7 @@ export {
   SEND_ROUTE,
   CONNECTIONS,
   PERMISSIONS,
+  REVIEW_PERMISSIONS,
   TOKEN_DETAILS,
   CONFIRM_TRANSACTION_ROUTE,
   CONFIRM_SEND_ETHER_PATH,
diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js
index 862a618ee04e..c2e9aff9c77e 100644
--- a/ui/pages/routes/routes.component.js
+++ b/ui/pages/routes/routes.component.js
@@ -11,6 +11,7 @@ import Home from '../home';
 import {
   PermissionsPage,
   Connections,
+  ReviewPermissions,
 } from '../../components/multichain/pages';
 import Settings from '../settings';
 import Authenticated from '../../helpers/higher-order-components/authenticated';
@@ -77,6 +78,7 @@ import {
   TOKEN_DETAILS,
   CONNECTIONS,
   PERMISSIONS,
+  REVIEW_PERMISSIONS,
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   INSTITUTIONAL_FEATURES_DONE_ROUTE,
   CUSTODY_ACCOUNT_DONE_ROUTE,
@@ -438,6 +440,11 @@ export default class Routes extends Component {
           component={Connections}
         />
         <Authenticated path={PERMISSIONS} component={PermissionsPage} exact />
+        <Authenticated
+          path={REVIEW_PERMISSIONS}
+          component={ReviewPermissions}
+          exact
+        />
         <Authenticated path={DEFAULT_ROUTE} component={Home} />
       </Switch>
     );