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

UX: Multichain: Convert Networks Menu to Modal (#19803)

Browse Source 
* UX: Multichain: Convert Networks Menu to Modal

* Fix padding

* Remove dead CSS

* moved show network to bottom

* updated snapshot

---------

Co-authored-by: NidhiKJha <menidhikjha@gmail.com>
Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
This commit is contained in:
David Walsh 2023-07-07 09:08:24 -05:00 committed by GitHub
parent 64813fb660
commit 4b38a2f054
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`NetworkListItem renders properly 1`] = `
<div>
<div
class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"

2
ui/components/multichain/network-list-item/network-list-item.js
View File

@ -11,6 +11,7 @@ import {
TextColor,
BackgroundColor,
BlockSize,
Display,
} from '../../../helpers/constants/design-system';
import {
AvatarNetwork,
@ -67,6 +68,7 @@ export const NetworkListItem = ({
className={classnames('multichain-network-list-item', {
'multichain-network-list-item--selected': selected,
})}
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.spaceBetween}
width={BlockSize.Full}

5
ui/components/multichain/network-list-menu/index.scss
View File

@ -1,9 +1,4 @@
.multichain-network-list-menu {
max-height: 200px;
overflow: auto;
/* Overrides the popover's default behavior */
&-content-wrapper {
border-radius: 0;
}
}

130
ui/components/multichain/network-list-menu/network-list-menu.js
View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Popover from '../../ui/popover/popover.component';
import { NetworkListItem } from '../network-list-item';
import {
setActiveNetwork,
@ -27,6 +26,10 @@ import {
import {
BUTTON_SECONDARY_SIZES,
ButtonSecondary,
Modal,
ModalContent,
ModalHeader,
ModalOverlay,
Text,
Box,
} from '../../component-library';
@ -121,69 +124,78 @@ export const NetworkListMenu = ({ onClose }) => {
};
return (
<Popover
contentClassName="multichain-network-list-menu-content-wrapper"
onClose={onClose}
centerTitle
title={t('networkMenuHeading')}
>
<>
<Box className="multichain-network-list-menu">
{generateMenuItems(nonTestNetworks)}
</Box>
<Box
padding={4}
display={Display.Flex}
justifyContent={JustifyContent.spaceBetween}
<Modal isOpen onClose={onClose}>
<ModalOverlay />
<ModalContent
className="multichain-network-list-menu-content-wrapper"
modalDialogProps={{ padding: 0 }}
>
<ModalHeader
paddingTop={4}
paddingRight={4}
paddingBottom={6}
onClose={onClose}
>
<Text>{t('showTestnetNetworks')}</Text>
<ToggleButton
value={showTestNetworks}
onToggle={(value) => {
const shouldShowTestNetworks = !value;
dispatch(setShowTestNetworks(shouldShowTestNetworks));
if (shouldShowTestNetworks) {
{t('networkMenuHeading')}
</ModalHeader>
<>
<Box className="multichain-network-list-menu">
{generateMenuItems(nonTestNetworks)}
</Box>
<Box
padding={4}
display={Display.Flex}
justifyContent={JustifyContent.spaceBetween}
>
<Text>{t('showTestnetNetworks')}</Text>
<ToggleButton
value={showTestNetworks}
onToggle={(value) => {
const shouldShowTestNetworks = !value;
dispatch(setShowTestNetworks(shouldShowTestNetworks));
if (shouldShowTestNetworks) {
trackEvent({
event: MetaMetricsEventName.TestNetworksDisplayed,
category: MetaMetricsEventCategory.Network,
});
}
}}
/>
</Box>
{showTestNetworks ? (
<Box className="multichain-network-list-menu">
{generateMenuItems(testNetworks)}
</Box>
) : null}
<Box padding={4}>
<ButtonSecondary
size={BUTTON_SECONDARY_SIZES.LG}
block
onClick={() => {
if (isFullScreen) {
if (completedOnboarding) {
history.push(ADD_POPULAR_CUSTOM_NETWORK);
} else {
dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
}
} else {
global.platform.openExtensionInBrowser(
ADD_POPULAR_CUSTOM_NETWORK,
);
}
dispatch(toggleNetworkMenu());
trackEvent({
event: MetaMetricsEventName.TestNetworksDisplayed,
event: MetaMetricsEventName.AddNetworkButtonClick,
category: MetaMetricsEventCategory.Network,
});
}
}}
/>
</Box>
{showTestNetworks ? (
<Box className="multichain-network-list-menu">
{generateMenuItems(testNetworks)}
}}
>
{t('addNetwork')}
</ButtonSecondary>
</Box>
) : null}
<Box padding={4}>
<ButtonSecondary
size={BUTTON_SECONDARY_SIZES.LG}
block
onClick={() => {
if (isFullScreen) {
if (completedOnboarding) {
history.push(ADD_POPULAR_CUSTOM_NETWORK);
} else {
dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
}
} else {
global.platform.openExtensionInBrowser(
ADD_POPULAR_CUSTOM_NETWORK,
);
}
dispatch(toggleNetworkMenu());
trackEvent({
event: MetaMetricsEventName.AddNetworkButtonClick,
category: MetaMetricsEventCategory.Network,
});
}}
>
{t('addNetwork')}
</ButtonSecondary>
</Box>
</>
</Popover>
</>
</ModalContent>
</Modal>
);
};