added review permission page

MetaMask · Aug 22, 2024 · 29030c0 · 29030c0
1 parent 8881106
commit 29030c0
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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';