Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX Multichain: Added Footer to the home screen #20751

Merged
merged 10 commits into from
Oct 11, 2023
Merged

UX Multichain: Added Footer to the home screen #20751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3655909
aligned footer to the bottom
NidhiKJha Sep 6, 2023
836eb9b
updated snapshot
NidhiKJha Sep 6, 2023
d21df70
updated button
NidhiKJha Sep 6, 2023
9637582
updated tests and controlled rendering of footer based on routes
NidhiKJha Sep 6, 2023
921507c
show on wallet and connections view
NidhiKJha Sep 7, 2023
eec61e4
updated snapshot
NidhiKJha Sep 18, 2023
94016d2
test to verify
NidhiKJha Sep 22, 2023
b3ce400
lint fix
NidhiKJha Sep 22, 2023
b7379af
Show footer on the assets screen
darkwing Oct 10, 2023
d1d5e41
Restore the shouldShowSeedPhraseReminder prop
darkwing Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions ui/components/app/multiple-notifications/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
3 changes: 3 additions & 0 deletions ui/components/app/multiple-notifications/multiple-notifications.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
60 changes: 60 additions & 0 deletions ui/components/multichain/app-footer/__snapshots__/app-footer.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
`;
273 changes: 149 additions & 124 deletions ui/components/multichain/app-footer/app-footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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);

Expand All @@ -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}
</>
);
};
Loading
Loading