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

@@ -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"
   },

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>
+  );
+};

ui/components/multichain/app-footer/app-footer.scss

@@ -0,0 +1,8 @@
+.app-footer {
+  bottom: 0;
+  position: sticky;
+
+  &__button {
+    cursor: pointer;
+  }
+}

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';

ui/components/multichain/app-footer/index.js

@@ -0,0 +1 @@
+export { AppFooter } from './app-footer';

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';

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';
+