From cf651c4d633901adaff84058b7e848ed1256efe6 Mon Sep 17 00:00:00 2001
From: Victor Thomas <10986371+vthomas13@users.noreply.github.com>
Date: Fri, 25 Aug 2023 12:28:15 -0400
Subject: [PATCH] Multichain v1 App Footer component (#20550)

* wip bottom navbar

* creating app-footer component

* moving appfooter inline styles to scss

* lint:fix

* refactor app-footer

* reverting home component, icon-button changes

* adding hrefs and tabindex
---
 app/_locales/en/messages.json                 |   6 +
 .../multichain/app-footer/app-footer.js       | 135 ++++++++++++++++++
 .../multichain/app-footer/app-footer.scss     |   8 ++
 .../app-footer/app-footer.stories.js          |   9 ++
 ui/components/multichain/app-footer/index.js  |   1 +
 ui/components/multichain/index.js             |   1 +
 .../multichain/multichain-components.scss     |   4 +-
 7 files changed, 163 insertions(+), 1 deletion(-)
 create mode 100644 ui/components/multichain/app-footer/app-footer.js
 create mode 100644 ui/components/multichain/app-footer/app-footer.scss
 create mode 100644 ui/components/multichain/app-footer/app-footer.stories.js
 create mode 100644 ui/components/multichain/app-footer/index.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index f1dc5be2f..88f3f1ccb 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -837,6 +837,9 @@
   "connectionRequest": {
     "message": "Connection request"
   },
+  "connections": {
+    "message": "Connections"
+  },
   "contactUs": {
     "message": "Contact us"
   },
@@ -5316,6 +5319,9 @@
   "visitWebSite": {
     "message": "Visit our website"
   },
+  "wallet": {
+    "message": "Wallet"
+  },
   "walletConnectionGuide": {
     "message": "our hardware wallet connection guide"
   },
diff --git a/ui/components/multichain/app-footer/app-footer.js b/ui/components/multichain/app-footer/app-footer.js
new file mode 100644
index 000000000..b0defc078
--- /dev/null
+++ b/ui/components/multichain/app-footer/app-footer.js
@@ -0,0 +1,135 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import {
+  CONNECTED_ROUTE,
+  DEFAULT_ROUTE,
+} from '../../../helpers/constants/routes';
+import {
+  Box,
+  ButtonIcon,
+  ButtonIconSize,
+  Icon,
+  IconName,
+  IconSize,
+  Text,
+} from '../../component-library';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import {
+  AlignItems,
+  BackgroundColor,
+  BlockSize,
+  BorderRadius,
+  Display,
+  FlexDirection,
+  IconColor,
+  JustifyContent,
+  TextColor,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+
+export const AppFooter = () => {
+  const t = useI18nContext();
+  const location = useLocation();
+
+  const walletRoute = `#${DEFAULT_ROUTE}`;
+  const connectedRoute = `#${CONNECTED_ROUTE}`;
+  const activeWallet = location.pathname === DEFAULT_ROUTE;
+  const activeConnections = location.pathname === CONNECTED_ROUTE;
+
+  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="a"
+        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}
+        />
+      </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}
+      >
+        <Icon
+          data-testid="app-footer-connections-button"
+          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>
+  );
+};
diff --git a/ui/components/multichain/app-footer/app-footer.scss b/ui/components/multichain/app-footer/app-footer.scss
new file mode 100644
index 000000000..c36d1a046
--- /dev/null
+++ b/ui/components/multichain/app-footer/app-footer.scss
@@ -0,0 +1,8 @@
+.app-footer {
+  bottom: 0;
+  position: sticky;
+
+  &__button {
+    cursor: pointer;
+  }
+}
diff --git a/ui/components/multichain/app-footer/app-footer.stories.js b/ui/components/multichain/app-footer/app-footer.stories.js
new file mode 100644
index 000000000..44648ee79
--- /dev/null
+++ b/ui/components/multichain/app-footer/app-footer.stories.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { AppFooter } from '.';
+
+export default {
+  title: 'Components/Multichain/AppFooter',
+};
+export const DefaultStory = () => <AppFooter />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/multichain/app-footer/index.js b/ui/components/multichain/app-footer/index.js
new file mode 100644
index 000000000..3475241e8
--- /dev/null
+++ b/ui/components/multichain/app-footer/index.js
@@ -0,0 +1 @@
+export { AppFooter } from './app-footer';
diff --git a/ui/components/multichain/index.js b/ui/components/multichain/index.js
index e1e3359fc..47c28e310 100644
--- a/ui/components/multichain/index.js
+++ b/ui/components/multichain/index.js
@@ -4,6 +4,7 @@ export { AccountListMenu } from './account-list-menu';
 export { AccountPicker } from './account-picker';
 export { ActivityListItem } from './activity-list-item';
 export { AppHeader } from './app-header';
+export { AppFooter } from './app-footer';
 export { DetectedTokensBanner } from './detected-token-banner';
 export { GlobalMenu } from './global-menu';
 export { ImportTokenLink } from './import-token-link';
diff --git a/ui/components/multichain/multichain-components.scss b/ui/components/multichain/multichain-components.scss
index 7f6282a35..aa0379405 100644
--- a/ui/components/multichain/multichain-components.scss
+++ b/ui/components/multichain/multichain-components.scss
@@ -11,6 +11,7 @@
 @import 'account-list-menu/index';
 @import 'account-picker/index';
 @import 'activity-list-item/index';
+@import 'app-footer/app-footer';
 @import 'app-header/app-header';
 @import 'connected-site-menu/index';
 @import 'account-list-menu/';
@@ -19,4 +20,5 @@
 @import 'network-list-menu/';
 @import 'product-tour-popover/product-tour-popover';
 @import 'nft-item/nft-item';
-@import 'import-tokens-modal/import-tokens-modal'
+@import 'import-tokens-modal/import-tokens-modal';
+