m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 09:23:21 +01:00
Code

Multichain v1 App Footer component (#20550)

Browse Source 
* 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
This commit is contained in:
Victor Thomas 2023-08-25 12:28:15 -04:00 committed by GitHub
parent 77c7f34062
commit cf651c4d63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 163 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/_locales/en/messages.json generated
View File

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

135
ui/components/multichain/app-footer/app-footer.js Normal file
View File

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

8
ui/components/multichain/app-footer/app-footer.scss Normal file
View File

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

9
ui/components/multichain/app-footer/app-footer.stories.js Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import { AppFooter } from '.';
export default {
title: 'Components/Multichain/AppFooter',
};
export const DefaultStory = () => <AppFooter />;
DefaultStory.storyName = 'Default';

1
ui/components/multichain/app-footer/index.js Normal file
View File

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

1
ui/components/multichain/index.js
View File

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

4
ui/components/multichain/multichain-components.scss
View File

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