From 29030c0c5d8625994247207c2f51ebcf0fe56377 Mon Sep 17 00:00:00 2001
From: NidhiKJha <menidhikjha@gmail.com>
Date: Thu, 22 Aug 2024 13:50:58 +0100
Subject: [PATCH] added review permission page

---
 ui/components/multichain/pages/index.js       |  5 ++-
 .../pages/review-permissions-page/index.js    |  1 +
 .../review-permissions-page.tsx               |  7 ++-
 .../site-cell/site-cell.stories.tsx           | 10 +++++
 .../site-cell/site-cell.tsx                   | 43 +++++++++++--------
 ui/helpers/constants/routes.ts                |  2 +-
 6 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/ui/components/multichain/pages/index.js b/ui/components/multichain/pages/index.js
index ffb51f39d015..5d24b78b6b2e 100644
--- a/ui/components/multichain/pages/index.js
+++ b/ui/components/multichain/pages/index.js
@@ -1,3 +1,6 @@
 export { Connections } from './connections';
 export { PermissionsPage } from './permissions-page/permissions-page';
-export { ReviewPermissions } from './review-permissions-page/review-permissions-page';
+export {
+  ReviewPermissions,
+  SiteCell,
+} 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
index 7af352026e76..e2da178368f1 100644
--- a/ui/components/multichain/pages/review-permissions-page/index.js
+++ b/ui/components/multichain/pages/review-permissions-page/index.js
@@ -1 +1,2 @@
 export { ReviewPermissions } from './review-permissions-page';
+export { SiteCell } from './site-cell/site-cell';
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
index ab7578f01a9a..ba9e8904a7ea 100644
--- a/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx
+++ b/ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx
@@ -13,6 +13,7 @@ import {
   IconName,
 } from '../../../component-library';
 import { Content, Footer, Header, Page } from '../page';
+import { SiteCell } from './index';
 
 export const ReviewPermissions = () => {
   const t = useI18nContext();
@@ -38,8 +39,10 @@ export const ReviewPermissions = () => {
           />
         }
       ></Header>
-      <Content padding={0}>Nidhi</Content>
-      <Footer></Footer>
+      <Content padding={0}>
+        <SiteCell />
+      </Content>
+
     </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
index e69de29bb2d1..21e44327389d 100644
--- 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
@@ -0,0 +1,10 @@
+import React from 'react';
+import { SiteCell } from './site-cell';
+
+export default {
+  title: 'Components/Multichain/SiteCell',
+};
+
+export const DefaultStory = () => <SiteCell />;
+
+DefaultStory.storyName = 'Default';
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
index 23134a596049..5fb08ccb6412 100644
--- 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
@@ -16,6 +16,8 @@ import {
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import {
   AvatarFavicon,
+  AvatarIcon,
+  AvatarIconSize,
   AvatarNetwork,
   AvatarNetworkSize,
   BadgeWrapper,
@@ -28,9 +30,8 @@ import {
 import { getURLHost } from '../../../../../helpers/utils/util';
 import { ConnectionListTooltip } from '../../permissions-page/connection-list-tooltip/connection-list-tooltip';
 
-export const ConnectionListItem = ({ connection, onClick }) => {
+export const SiteCell = ({}) => {
   const t = useI18nContext();
-  const isSnap = connection.subjectType === SubjectType.Snap;
 
   return (
     <>
@@ -42,17 +43,19 @@ export const ConnectionListItem = ({ connection, onClick }) => {
         alignItems={AlignItems.baseline}
         width={BlockSize.Full}
         backgroundColor={BackgroundColor.backgroundDefault}
-        onClick={onClick}
+        // 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}
+        <AvatarIcon
+          iconName={IconName.Wallet}
+          size={AvatarIconSize.Md}
+          iconProps={{
+            size: IconSize.Sm,
+          }}
+          color={IconColor.iconAlternative}
+          backgroundColor={BackgroundColor.backgroundAlternative}
         />
         <Box
           display={Display.Flex}
@@ -82,7 +85,7 @@ export const ConnectionListItem = ({ connection, onClick }) => {
             >
               {t('connectedWith')}
             </Text>
-            <ConnectionListTooltip connection={connection} />
+            {/* <ConnectionListTooltip connection={connection} /> */}
           </Box>
         </Box>
         <Box
@@ -109,17 +112,19 @@ export const ConnectionListItem = ({ connection, onClick }) => {
         alignItems={AlignItems.baseline}
         width={BlockSize.Full}
         backgroundColor={BackgroundColor.backgroundDefault}
-        onClick={onClick}
+        // 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}
+        <AvatarIcon
+          iconName={IconName.Wallet}
+          size={AvatarIconSize.Md}
+          iconProps={{
+            size: IconSize.Sm,
+          }}
+          color={IconColor.iconAlternative}
+          backgroundColor={BackgroundColor.backgroundAlternative}
         />
         <Box
           display={Display.Flex}
@@ -149,7 +154,7 @@ export const ConnectionListItem = ({ connection, onClick }) => {
             >
               {t('connectedWith')}
             </Text>
-            <ConnectionListTooltip connection={connection} />
+            {/* <ConnectionListTooltip connection={connection} /> */}
           </Box>
         </Box>
         <Box
@@ -172,7 +177,7 @@ export const ConnectionListItem = ({ connection, onClick }) => {
   );
 };
 
-ConnectionListItem.propTypes = {
+SiteCell.propTypes = {
   /**
    * The connection data to display
    */
diff --git a/ui/helpers/constants/routes.ts b/ui/helpers/constants/routes.ts
index 88a19ee13e29..d5069396421e 100644
--- a/ui/helpers/constants/routes.ts
+++ b/ui/helpers/constants/routes.ts
@@ -40,7 +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 REVIEW_PERMISSIONS = '/review-permissions';
 const PERMISSIONS = '/permissions';
 const TOKEN_DETAILS = '/token-details';
 const CONNECT_ROUTE = '/connect';