Skip to content

Commit

Permalink
feat: add custom network modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@salimtb
salimtb committed Jun 18, 2024
1 parent 45c9466 commit 8c5fcdb
Show file tree
Hide file tree
Showing 6 changed files with 297 additions and 175 deletions.
2 changes: 1 addition & 1 deletion ui/components/app/modals/modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const custodyConfirmModalStyle = {

const MODALS = {
ONBOARDING_ADD_NETWORK: {
contents: <AddNetworkModal />,
contents: <AddNetworkModal newNetworkMenuDesignActive={false} />,
testId: 'add-network-modal',
...accountModalStyle,
},
Expand Down
298 changes: 166 additions & 132 deletions ui/components/multichain/network-list-menu/network-list-menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,23 @@ import {
getIsUnlocked,
} from '../../../ducks/metamask/metamask';
import { getLocalNetworkMenuRedesignFeatureFlag } from '../../../helpers/utils/feature-flags';
import AddNetworkModal from '../../../pages/onboarding-flow/add-network-modal';
import PopularNetworkList from './popular-network-list/popular-network-list';
import NetworkListSearch from './network-list-search/network-list-search';

const ACTION_MODES = {
// Displays the search box and network list
LIST: 'list',
// Displays the Add form
ADD: 'add',
// Displays the Edit form
EDIT: 'edit',
};

export const NetworkListMenu = ({ onClose }) => {
const t = useI18nContext();

const [actionMode, setActionMode] = useState(ACTION_MODES.LIST);
const nonTestNetworks = useSelector(getNonTestNetworks);
const testNetworks = useSelector(getTestNetworks);
const showTestNetworks = useSelector(getShowTestNetworks);
Expand All @@ -99,6 +110,13 @@ export const NetworkListMenu = ({ onClose }) => {

const isUnlocked = useSelector(getIsUnlocked);

let title = t('networkMenuHeading');
if (actionMode === ACTION_MODES.ADD) {
title = t('addCustomNetwork');
} else if (actionMode === ACTION_MODES.EDIT) {
title = currentNetwork.nickname;
}

const orderedNetworksList = useSelector(getOrderedNetworksList);

const networkConfigurationChainIds = Object.values(networkConfigurations).map(
Expand Down Expand Up @@ -315,6 +333,11 @@ export const NetworkListMenu = ({ onClose }) => {
}
};

const headerAdditionalProps =
actionMode === ACTION_MODES.LIST
? {}
: { onBack: () => setActionMode(ACTION_MODES.LIST) };

return (
<Modal isOpen onClose={onClose}>
<ModalOverlay />
Expand All @@ -332,145 +355,156 @@ export const NetworkListMenu = ({ onClose }) => {
paddingRight={4}
paddingBottom={6}
onClose={onClose}
{...headerAdditionalProps}
>
{t('networkMenuHeading')}
{title}
</ModalHeader>
<>
<NetworkListSearch
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
setFocusSearch={setFocusSearch}
/>
{showBanner ? (
<BannerBase
className="network-list-menu__banner"
marginLeft={4}
marginRight={4}
marginBottom={4}
backgroundColor={BackgroundColor.backgroundAlternative}
startAccessory={
<Box
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
<img
src="./images/dragging-animation.svg"
alt="drag-and-drop"
/>
</Box>
}
onClose={() => hideNetworkBanner()}
description={t('dragAndDropBanner')}
{actionMode === ACTION_MODES.LIST ? (
<>
<NetworkListSearch
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
setFocusSearch={setFocusSearch}
/>
) : null}
<Box className="multichain-network-list-menu">
{searchResults.length === 0 && focusSearch ? (
<Text
paddingLeft={4}
paddingRight={4}
color={TextColor.textMuted}
data-testid="multichain-network-menu-popover-no-results"
>
{t('noNetworksFound')}
</Text>
) : (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="characters">
{(provided) => (
<Box
className="characters"
{...provided.droppableProps}
ref={provided.innerRef}
>
{searchResults.map((network, index) => {
const isCurrentNetwork =
currentNetwork.id === network.id;

const canDeleteNetwork =
isUnlocked && !isCurrentNetwork && network.removable;

const networkListItem = generateNetworkListItem({
network,
isCurrentNetwork,
canDeleteNetwork,
});

return (
<Draggable
key={network.id}
draggableId={network.id}
index={index}
>
{(providedDrag) => (
<Box
ref={providedDrag.innerRef}
{...providedDrag.draggableProps}
{...providedDrag.dragHandleProps}
>
{networkListItem}
</Box>
)}
</Draggable>
);
})}
{provided.placeholder}
</Box>
)}
</Droppable>
</DragDropContext>
)}
{networkMenuRedesign ? (
<PopularNetworkList
searchAddNetworkResults={searchAddNetworkResults}
{showBanner ? (
<BannerBase
className="network-list-menu__banner"
marginLeft={4}
marginRight={4}
marginBottom={4}
backgroundColor={BackgroundColor.backgroundAlternative}
startAccessory={
<Box
display={Display.Flex}
alignItems={AlignItems.center}
justifyContent={JustifyContent.center}
>
<img
src="./images/dragging-animation.svg"
alt="drag-and-drop"
/>
</Box>
}
onClose={() => hideNetworkBanner()}
description={t('dragAndDropBanner')}
/>
) : null}
<Box
padding={4}
display={Display.Flex}
justifyContent={JustifyContent.spaceBetween}
>
<Text>{t('showTestnetNetworks')}</Text>
<ToggleButton
value={showTestNetworks}
disabled={currentlyOnTestNetwork}
onToggle={handleToggle}
/>
</Box>
{showTestNetworks || currentlyOnTestNetwork ? (
<Box className="multichain-network-list-menu">
{generateMenuItems(searchTestNetworkResults)}
<Box className="multichain-network-list-menu">
{searchResults.length === 0 && focusSearch ? (
<Text
paddingLeft={4}
paddingRight={4}
color={TextColor.textMuted}
data-testid="multichain-network-menu-popover-no-results"
>
{t('noNetworksFound')}
</Text>
) : (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="characters">
{(provided) => (
<Box
className="characters"
{...provided.droppableProps}
ref={provided.innerRef}
>
{searchResults.map((network, index) => {
const isCurrentNetwork =
currentNetwork.id === network.id;

const canDeleteNetwork =
isUnlocked &&
!isCurrentNetwork &&
network.removable;

const networkListItem = generateNetworkListItem({
network,
isCurrentNetwork,
canDeleteNetwork,
});

return (
<Draggable
key={network.id}
draggableId={network.id}
index={index}
>
{(providedDrag) => (
<Box
ref={providedDrag.innerRef}
{...providedDrag.draggableProps}
{...providedDrag.dragHandleProps}
>
{networkListItem}
</Box>
)}
</Draggable>
);
})}
{provided.placeholder}
</Box>
)}
</Droppable>
</DragDropContext>
)}
{networkMenuRedesign ? (
<PopularNetworkList
searchAddNetworkResults={searchAddNetworkResults}
/>
) : null}
<Box
padding={4}
display={Display.Flex}
justifyContent={JustifyContent.spaceBetween}
>
<Text>{t('showTestnetNetworks')}</Text>
<ToggleButton
value={showTestNetworks}
disabled={currentlyOnTestNetwork}
onToggle={handleToggle}
/>
</Box>
) : null}
</Box>
<Box paddingLeft={4} paddingRight={4} paddingTop={4}>
<ButtonSecondary
size={ButtonSecondarySize.Lg}
startIconName={IconName.Add}
block
onClick={() => {
if (isFullScreen) {
if (completedOnboarding) {
history.push(ADD_POPULAR_CUSTOM_NETWORK);
} else {
dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
{showTestNetworks || currentlyOnTestNetwork ? (
<Box className="multichain-network-list-menu">
{generateMenuItems(searchTestNetworkResults)}
</Box>
) : null}
</Box>
<Box paddingLeft={4} paddingRight={4} paddingTop={4}>
<ButtonSecondary
size={ButtonSecondarySize.Lg}
startIconName={IconName.Add}
block
onClick={() => {
if (!networkMenuRedesign) {
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());
return;
}
} else {
global.platform.openExtensionInBrowser(
ADD_POPULAR_CUSTOM_NETWORK,
);
}
dispatch(toggleNetworkMenu());
trackEvent({
event: MetaMetricsEventName.AddNetworkButtonClick,
category: MetaMetricsEventCategory.Network,
});
}}
>
{t('addNetwork')}
</ButtonSecondary>
</Box>
</>
trackEvent({
event: MetaMetricsEventName.AddNetworkButtonClick,
category: MetaMetricsEventCategory.Network,
});
setActionMode(ACTION_MODES.ADD);
}}
>
{t('addNetwork')}
</ButtonSecondary>
</Box>
</>
) : (
<AddNetworkModal newNetworkMenuDesignActive />
)}
</ModalContent>
</Modal>
);
Expand Down
Loading

0 comments on commit 8c5fcdb

Please sign in to comment.