updated final screen for editing flow

MetaMask · Sep 4, 2024 · acaddf8 · acaddf8
1 parent 5ce582a
commit acaddf8
Show file tree

Hide file tree

Showing 17 changed files with 192 additions and 217 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/test/data/mock-send-state.json b/test/data/mock-send-state.json
@@ -12,8 +12,6 @@
   "appState": {
     "networkDropdownOpen": false,
     "importNftsModal": { "open": false },
-    "showEditAccountsModalOpen": false,
-    "showEditNetworksModalOpen": false,
     "showPermittedNetworkToastOpen": false,
     "gasIsLoading": false,
     "isLoading": false,

diff --git a/test/data/mock-state.json b/test/data/mock-state.json
@@ -14,8 +14,6 @@
     "importNftsModal": {
       "open": false
     },
-    "showEditAccountsModalOpen": false,
-    "showEditNetworksModalOpen": false,
     "showPermittedNetworkToastOpen": false,
     "gasIsLoading": false,
     "isLoading": false,

diff --git a/ui/components/multichain/app-header/app-header-unlocked-content.tsx b/ui/components/multichain/app-header/app-header-unlocked-content.tsx
@@ -51,7 +51,7 @@ import { MetaMetricsContext } from '../../../contexts/metametrics';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { MINUTE } from '../../../../shared/constants/time';
 import { NotificationsTagCounter } from '../notifications-tag-counter';
-import { CONNECTIONS } from '../../../helpers/constants/routes';
+import { CONNECTIONS, REVIEW_PERMISSIONS } from '../../../helpers/constants/routes';
 import { MultichainNetwork } from '../../../selectors/multichain';
 
 type AppHeaderUnlockedContentProps = {
@@ -115,6 +115,9 @@ export const AppHeaderUnlockedContent = ({
   };
 
   const handleConnectionsRoute = () => {
+    if (process.env.CHAIN_PERMISSIONS) {
+      history.push(`${REVIEW_PERMISSIONS}/${encodeURIComponent(origin)}`);
+    }
     history.push(`${CONNECTIONS}/${encodeURIComponent(origin)}`);
   };
 

diff --git a/ui/components/multichain/global-menu/global-menu.js b/ui/components/multichain/global-menu/global-menu.js
@@ -252,25 +252,6 @@ 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}
-      >
-        "global menu"
-      </MenuItem>
-
       {
         ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
         mmiPortfolioEnabled && (

diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -176,7 +176,7 @@ export const NetworkListMenu = ({ onClose }) => {
     return sortedNonTestNetworks;
   };
 
-  //check if not granted chain is clicked, then show the toast and grant permission
+  // check if not granted chain is clicked, then show the toast and grant permission
   const networksList = newOrderNetworks();
 
   const [items, setItems] = useState([...networksList]);
@@ -310,9 +310,11 @@ export const NetworkListMenu = ({ onClose }) => {
         onClick={() => {
           dispatch(toggleNetworkMenu());
           dispatch(setActiveNetwork(network.providerType || network.id));
-          grantPermittedChain(selectedTabOrigin, network.chainId);
-          if (!flattenedPermittedChains.includes(network.chainId)) {
-            dispatch(showPermittedNetworkToast());
+          if (process.env.CHAIN_PERMISSIONS) {
+            grantPermittedChain(selectedTabOrigin, network.chainId);
+            if (!flattenedPermittedChains.includes(network.chainId)) {
+              dispatch(showPermittedNetworkToast());
+            }
           }
           if (
             useRequestQueue &&

diff --git a/ui/components/multichain/pages/permissions-page/permissions-page.js b/ui/components/multichain/pages/permissions-page/permissions-page.js
@@ -25,6 +25,7 @@ import {
 import {
   CONNECTIONS,
   DEFAULT_ROUTE,
+  REVIEW_PERMISSIONS,
 } from '../../../../helpers/constants/routes';
 import {
   getOnboardedInThisUISession,
@@ -53,6 +54,9 @@ export const PermissionsPage = () => {
   const handleConnectionClick = (connection) => {
     const hostName = connection.origin;
     const safeEncodedHost = encodeURIComponent(hostName);
+    if (process.env.CHAIN_PERMISSIONS) {
+      history.push(`${REVIEW_PERMISSIONS}/${safeEncodedHost}`);
+    }
     history.push(`${CONNECTIONS}/${safeEncodedHost}`);
   };
 

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
@@ -4,7 +4,9 @@ import { useHistory, useParams } from 'react-router-dom';
 import {
   AlignItems,
   BackgroundColor,
+  BlockSize,
   Display,
+  FlexDirection,
   IconColor,
   JustifyContent,
   TextAlign,
@@ -21,7 +23,7 @@ import {
   getPermissionSubjects,
   getPermittedChainsByOrigin,
   getPermittedChainsForSelectedTab,
-} from '../../../../selectors/index';
+} from '../../../../selectors';
 import { removePermissionsFor } from '../../../../store/actions';
 import {
   AvatarFavicon,
@@ -37,17 +39,19 @@ import {
   IconSize,
   Text,
 } from '../../../component-library';
+import { ToastContainer, Toast } from '../..';
 import { NoConnectionContent } from '../connections/components/no-connection';
 import { Content, Footer, Header, Page } from '../page';
-import { SiteCell } from './index';
+import { SiteCell } from '.';
 
 export const ReviewPermissions = () => {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const history = useHistory();
   const urlParams: { origin: string } = useParams();
   const securedOrigin = decodeURIComponent(urlParams.origin);
-
+  const [showAccountToast, setShowAccountToast] = useState(false);
+  const [showNetworkToast, setShowNetworkToast] = useState(false);
   const activeTabOrigin: string = securedOrigin;
   const subjectMetadata = useSelector(getConnectedSitesList);
   const connectedSubjectsMetadata = subjectMetadata[activeTabOrigin];
@@ -62,6 +66,7 @@ export const ReviewPermissions = () => {
   const grantedNetworks = networksList.filter(
     (net: { chainId: any }) => connectedNetworks.indexOf(net.chainId) !== -1,
   );
+  const hostName = getURLHost(securedOrigin);
   const disconnectAllAccounts = () => {
     const subject = (subjects as SubjectsType)[activeTabOrigin];
 
@@ -81,74 +86,118 @@ export const ReviewPermissions = () => {
           ),
         );
       }
-
-      console.log('all disconnected');
     }
   };
   return (
     <Page
       data-testid="connections-page"
       className="main-container connections-page"
     >
-      {connectedAccounts.length > 0 ? <>
-      <Header
-        backgroundColor={BackgroundColor.backgroundDefault}
-        startAccessory={
-          <ButtonIcon
-            ariaLabel={t('back')}
-            iconName={IconName.ArrowLeft}
-            className="connections-header__start-accessory"
-            size={ButtonIconSize.Sm}
-            onClick={() => (history as any).goBack()}
-          />
-        }
-      >
-        <Box
-          display={Display.Flex}
-          alignItems={AlignItems.center}
-          gap={2}
-          justifyContent={JustifyContent.center}
-          className="connections-header__title"
-        >
-          {connectedSubjectsMetadata?.iconUrl ? (
-            <AvatarFavicon
-              name={connectedSubjectsMetadata.name}
-              size={AvatarFaviconSize.Sm}
-              src={connectedSubjectsMetadata.iconUrl}
-            />
-          ) : (
-            <Icon
-              name={IconName.Global}
-              size={IconSize.Sm}
-              color={IconColor.iconDefault}
-            />
-          )}
-          <Text
-            as="span"
-            variant={TextVariant.headingMd}
-            textAlign={TextAlign.Center}
-            ellipsis
+      {connectedAccounts.length > 0 ? (
+        <>
+          <Header
+            backgroundColor={BackgroundColor.backgroundDefault}
+            startAccessory={
+              <ButtonIcon
+                ariaLabel={t('back')}
+                iconName={IconName.ArrowLeft}
+                className="connections-header__start-accessory"
+                size={ButtonIconSize.Sm}
+                onClick={() => (history as any).goBack()}
+              />
+            }
           >
-            {getURLHost(securedOrigin)}
-          </Text>
-        </Box>
-      </Header>
-      <Content padding={0}>
-        <SiteCell networks={grantedNetworks} accounts={connectedAccounts} />
-      </Content>
-      <Footer>
-        <Button
-          size={ButtonSize.Lg}
-          block
-          variant={ButtonVariant.Secondary}
-          startIconName={IconName.Logout}
-          danger
-          onClick={() => disconnectAllAccounts()}
-        >
-          {t('disconnectAllAccounts')}
-        </Button>
-      </Footer> </> : <NoConnectionContent />
-}
+            <Box
+              display={Display.Flex}
+              alignItems={AlignItems.center}
+              gap={2}
+              justifyContent={JustifyContent.center}
+              className="connections-header__title"
+            >
+              {connectedSubjectsMetadata?.iconUrl ? (
+                <AvatarFavicon
+                  name={connectedSubjectsMetadata.name}
+                  size={AvatarFaviconSize.Sm}
+                  src={connectedSubjectsMetadata.iconUrl}
+                />
+              ) : (
+                <Icon
+                  name={IconName.Global}
+                  size={IconSize.Sm}
+                  color={IconColor.iconDefault}
+                />
+              )}
+              <Text
+                as="span"
+                variant={TextVariant.headingMd}
+                textAlign={TextAlign.Center}
+                ellipsis
+              >
+                {hostName}
+              </Text>
+            </Box>
+          </Header>
+          <Content padding={0}>
+            <SiteCell
+              networks={grantedNetworks}
+              accounts={connectedAccounts}
+              onAccountsClick={() => setShowAccountToast(true)}
+              onNetworksClick={() => setShowNetworkToast(true)}
+            />
+          </Content>
+          <Footer>
+            <Box
+              display={Display.Flex}
+              flexDirection={FlexDirection.Column}
+              width={BlockSize.Full}
+              gap={2}
+            >
+              {showAccountToast ? (
+                <ToastContainer>
+                  <Toast
+                    text={t('accountPermissionToast', [hostName])}
+                    onClose={() => setShowAccountToast(false)}
+                    startAdornment={
+                      <AvatarFavicon
+                        name={connectedSubjectsMetadata?.name}
+                        size={AvatarFaviconSize.Sm}
+                        src={connectedSubjectsMetadata?.iconUrl}
+                      />
+                    }
+                  />
+                </ToastContainer>
+              ) : null}
+              {showNetworkToast ? (
+                <ToastContainer>
+                  <Toast
+                    text={t('networkPermissionToast', [hostName])}
+                    onClose={() => setShowNetworkToast(false)}
+                    startAdornment={
+                      <AvatarFavicon
+                        name={connectedSubjectsMetadata?.name}
+                        size={AvatarFaviconSize.Sm}
+                        src={connectedSubjectsMetadata?.iconUrl}
+                      />
+                    }
+                  />
+                </ToastContainer>
+              ) : null}
+              <Button
+                size={ButtonSize.Lg}
+                block
+                variant={ButtonVariant.Secondary}
+                startIconName={IconName.Logout}
+                danger
+                onClick={() => disconnectAllAccounts()}
+              >
+                {t('disconnectAllAccounts')}
+              </Button>
+            </Box>
+          </Footer>{' '}
+        </>
+      ) : (
+        <NoConnectionContent />
+      )}
     </Page>
   );
 };