UX Multichain: Added Footer to the home screen (#20751)

This PR is to add the footer * Fixes [#1244](MetaMask/MetaMask-planning#1244) ## Screenshots/Screencaps ![Screenshot 2023-09-06 at 2 49 23 PM](https://github.com/MetaMask/metamask-extension/assets/39872794/08ddbcd4-4973-4885-879b-be10899616d6) https://github.com/MetaMask/metamask-extension/assets/39872794/00e8de3d-7e24-4e03-b96c-41ea56e4a7fe ## Manual Testing Steps  ## Pre-merge author checklist - [x] I've clearly explained: - [x] What problem this PR is solving - [x] How this problem was solved - [x] How reviewers can test my changes - [x] Sufficient automated test coverage has been added ## Pre-merge reviewer checklist - [ ] Manual testing (e.g. pull and build branch, run in browser, test code being changed) - [ ] PR is linked to the appropriate GitHub issue - [ ] **IF** this PR fixes a bug in the release milestone, add this PR to the release milestone If further QA is required (e.g. new feature, complex testing steps, large refactor), add the `Extension QA Board` label. In this case, a QA Engineer approval will be be required. --------- Co-authored-by: David Walsh <[email protected]>
MetaMask · Oct 11, 2023 · 5562f67 · 5562f67
1 parent af09977
commit 5562f67
Show file tree

Hide file tree

Showing 8 changed files with 298 additions and 127 deletions.
diff --git a/ui/components/app/multiple-notifications/index.scss b/ui/components/app/multiple-notifications/index.scss
@@ -59,6 +59,11 @@
     visibility: hidden;
   }
 
+  /* accommodates for the home "Wallet" / "Connections" footer */
+  &.home-notification-wrapper--multichain > div {
+    bottom: 88px;
+  }
+
   > div:first-of-type {
     visibility: visible;
   }

diff --git a/ui/components/app/multiple-notifications/multiple-notifications.component.js b/ui/components/app/multiple-notifications/multiple-notifications.component.js
@@ -31,6 +31,9 @@ export default class MultipleNotifications extends PureComponent {
         className={classnames(...classNames, {
           'home-notification-wrapper--show-all': showAll,
           'home-notification-wrapper--show-first': !showAll,
+          'home-notification-wrapper--multichain': Boolean(
+            process.env.MULTICHAIN,
+          ),
         })}
       >
         {childrenToRender}

diff --git a/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap b/ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap
@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App Footer should match snapshot 1`] = `
+<div>
+  <div
+    class="mm-box app-footer mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
+    data-test-id="app-footer"
+  >
+    <div
+      class="mm-box app-footer__contents mm-box--padding-2 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
+    >
+      <a
+        class="mm-box app-footer__button mm-box--padding-2 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-1/3"
+        href="#"
+        tabindex="0"
+      >
+        <span
+          class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-icon-alternative"
+          data-testid="app-footer-wallet-button"
+          style="mask-image: url('./images/icons/wallet.svg');"
+        />
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+        >
+          Wallet
+        </p>
+      </a>
+      <div
+        class="mm-box mm-box--padding-2 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/3 mm-box--background-color-background-default"
+        tabindex="0"
+      >
+        <button
+          class="mm-box mm-button-icon mm-button-icon--size-lg app-footer__actions-button mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-full"
+          data-testid="app-footer-actions-button"
+        >
+          <span
+            class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-inherit"
+            style="mask-image: url('./images/icons/swap-vertical.svg');"
+          />
+        </button>
+      </div>
+      <a
+        class="mm-box app-footer__button mm-box--padding-2 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-1/3"
+        href="#"
+        tabindex="0"
+      >
+        <span
+          class="mm-box mm-icon mm-icon--size-lg mm-box--display-inline-block mm-box--color-icon-alternative"
+          style="mask-image: url('./images/icons/global.svg');"
+        />
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+        >
+          Connections
+        </p>
+      </a>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/components/multichain/app-footer/app-footer.js b/ui/components/multichain/app-footer/app-footer.js
@@ -1,10 +1,7 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import {
-  CONNECTED_ROUTE,
-  DEFAULT_ROUTE,
-} from '../../../helpers/constants/routes';
+import { CONNECTIONS, DEFAULT_ROUTE } from '../../../helpers/constants/routes';
 import {
   AvatarFavicon,
   AvatarNetwork,
@@ -46,11 +43,11 @@ export const AppFooter = () => {
   const t = useI18nContext();
   const location = useLocation();
   const dispatch = useDispatch();
+  const history = useHistory();
 
-  const walletRoute = `#${DEFAULT_ROUTE}`;
-  const connectedRoute = `#${CONNECTED_ROUTE}`;
   const activeWallet = location.pathname === DEFAULT_ROUTE;
-  const activeConnections = location.pathname === CONNECTED_ROUTE;
+  const activeConnections = location.pathname === CONNECTIONS;
+  const isUnlocked = useSelector((state) => state.metamask.isUnlocked);
 
   const selectedAddress = useSelector(getSelectedAddress);
 
@@ -67,124 +64,152 @@ export const AppFooter = () => {
   const currentChain = useSelector(getCurrentNetwork);
 
   return (
-    <Box
-      className="app-footer"
-      width={BlockSize.Full}
-      height={BlockSize.Min}
-      backgroundColor={BackgroundColor.backgroundDefault}
-      display={Display.Flex}
-      flexDirection={FlexDirection.Row}
-      paddingLeft={4}
-      paddingRight={4}
-      paddingTop={2}
-      paddingBottom={2}
-    >
-      <Box
-        as="a"
-        href={walletRoute}
-        className="app-footer__button"
-        width={BlockSize.OneThird}
-        padding={2}
-        display={Display.Flex}
-        flexDirection={FlexDirection.Column}
-        alignItems={AlignItems.center}
-        tabIndex={0}
-      >
-        <Icon
-          data-testid="app-footer-wallet-button"
-          color={
-            activeWallet ? IconColor.primaryDefault : IconColor.iconAlternative
-          }
-          name={IconName.Wallet}
-          size={IconSize.Lg}
-        />
-        <Text
-          color={
-            activeWallet ? TextColor.primaryDefault : TextColor.textAlternative
-          }
-          variant={TextVariant.bodyMd}
-        >
-          {t('wallet')}
-        </Text>
-      </Box>
-      <Box
-        as="button"
-        width={BlockSize.OneThird}
-        padding={2}
-        display={Display.Flex}
-        flexDirection={FlexDirection.Column}
-        alignItems={AlignItems.center}
-        justifyContent={JustifyContent.center}
-        backgroundColor={BackgroundColor.backgroundDefault}
-        tabIndex={0}
-      >
-        <ButtonIcon
-          className="app-footer__button"
-          data-testid="app-footer-actions-button"
-          iconName={IconName.SwapVertical}
-          color={IconColor.primaryInverse}
-          backgroundColor={BackgroundColor.primaryDefault}
-          size={ButtonIconSize.Lg}
-          borderRadius={BorderRadius.full}
-          onClick={() => dispatch(showSelectActionModal())}
-        />
-      </Box>
-      <Box
-        as="a"
-        href={connectedRoute}
-        className="app-footer__button"
-        width={BlockSize.OneThird}
-        padding={2}
-        display={Display.Flex}
-        flexDirection={FlexDirection.Column}
-        alignItems={AlignItems.center}
-        tabIndex={0}
-      >
-        {connectedSite ? (
-          <Box alignItems={AlignItems.center}>
-            <BadgeWrapper
+    <>
+      {isUnlocked ? (
+        <>
+          <Box
+            className="app-footer"
+            data-test-id="app-footer"
+            width={BlockSize.Full}
+            backgroundColor={BackgroundColor.backgroundAlternative}
+            display={Display.Flex}
+            flexDirection={FlexDirection.Row}
+            alignItems={AlignItems.center}
+          >
+            <Box
+              className="app-footer__contents"
+              width={BlockSize.Full}
               display={Display.Flex}
-              className="app-footer__connected-badge"
-              badge={
-                <AvatarNetwork
-                  backgroundColor={testNetworkBackgroundColor}
-                  size={AvatarNetworkSize.Xs}
-                  name={currentChain.nickname}
-                  src={currentChain.rpcPrefs?.imageUrl}
-                  borderWidth={2}
-                  borderColor={BorderColor.borderDefault}
-                />
-              }
+              alignItems={AlignItems.center}
+              justifyContent={JustifyContent.spaceBetween}
+              backgroundColor={BackgroundColor.backgroundDefault}
+              flexDirection={FlexDirection.Row}
+              padding={2}
+              paddingLeft={4}
+              paddingRight={4}
+              gap={2}
             >
-              <AvatarFavicon
-                size={Size.SM}
-                src={connectedAvatar}
-                name={connectedAvatarName}
-              />
-            </BadgeWrapper>
+              <Box
+                as="a"
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  history.push(DEFAULT_ROUTE);
+                }}
+                className="app-footer__button"
+                width={BlockSize.OneThird}
+                padding={2}
+                display={Display.Flex}
+                flexDirection={FlexDirection.Column}
+                alignItems={AlignItems.center}
+                tabIndex={0}
+              >
+                <Icon
+                  data-testid="app-footer-wallet-button"
+                  color={
+                    activeWallet
+                      ? IconColor.primaryDefault
+                      : IconColor.iconAlternative
+                  }
+                  name={IconName.Wallet}
+                  size={IconSize.Lg}
+                />
+                <Text
+                  color={
+                    activeWallet
+                      ? TextColor.primaryDefault
+                      : TextColor.textAlternative
+                  }
+                  variant={TextVariant.bodyMd}
+                >
+                  {t('wallet')}
+                </Text>
+              </Box>
+              <Box
+                width={BlockSize.OneThird}
+                padding={2}
+                display={Display.Flex}
+                flexDirection={FlexDirection.Column}
+                alignItems={AlignItems.center}
+                justifyContent={JustifyContent.center}
+                backgroundColor={BackgroundColor.backgroundDefault}
+                tabIndex={0}
+              >
+                <ButtonIcon
+                  className="app-footer__actions-button"
+                  data-testid="app-footer-actions-button"
+                  iconName={IconName.SwapVertical}
+                  color={IconColor.primaryInverse}
+                  backgroundColor={BackgroundColor.primaryDefault}
+                  borderRadius={BorderRadius.full}
+                  size={ButtonIconSize.Lg}
+                  onClick={() => dispatch(showSelectActionModal())}
+                />
+              </Box>
+              <Box
+                as="a"
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  history.push(CONNECTIONS);
+                }}
+                className="app-footer__button"
+                width={BlockSize.OneThird}
+                padding={2}
+                display={Display.Flex}
+                flexDirection={FlexDirection.Column}
+                alignItems={AlignItems.center}
+                tabIndex={0}
+              >
+                {connectedSite ? (
+                  <Box alignItems={AlignItems.center}>
+                    <BadgeWrapper
+                      display={Display.Flex}
+                      className="app-footer__connected-badge"
+                      badge={
+                        <AvatarNetwork
+                          backgroundColor={testNetworkBackgroundColor}
+                          size={AvatarNetworkSize.Xs}
+                          name={currentChain.nickname}
+                          src={currentChain.rpcPrefs?.imageUrl}
+                          borderWidth={2}
+                          borderColor={BorderColor.borderDefault}
+                        />
+                      }
+                    >
+                      <AvatarFavicon
+                        size={Size.SM}
+                        src={connectedAvatar}
+                        name={connectedAvatarName}
+                      />
+                    </BadgeWrapper>
+                  </Box>
+                ) : (
+                  <Icon
+                    color={
+                      activeConnections
+                        ? IconColor.primaryDefault
+                        : IconColor.iconAlternative
+                    }
+                    name={IconName.Global}
+                    size={IconSize.Lg}
+                  />
+                )}
+                <Text
+                  color={
+                    activeConnections
+                      ? TextColor.primaryDefault
+                      : TextColor.textAlternative
+                  }
+                  variant={TextVariant.bodyMd}
+                >
+                  {t('connections')}
+                </Text>
+              </Box>
+            </Box>
           </Box>
-        ) : (
-          <Icon
-            color={
-              activeConnections
-                ? IconColor.primaryDefault
-                : IconColor.iconAlternative
-            }
-            name={IconName.Global}
-            size={IconSize.Lg}
-          />
-        )}
-        <Text
-          color={
-            activeConnections
-              ? TextColor.primaryDefault
-              : TextColor.textAlternative
-          }
-          variant={TextVariant.bodyMd}
-        >
-          {t('connections')}
-        </Text>
-      </Box>
-    </Box>
+        </>
+      ) : null}
+    </>
   );
 };