Skip to content

Commit

Permalink
feat: add custom network modal form (#25213)
Browse files Browse the repository at this point in the history 
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
 the custom add network form flow is now available on the modal
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25213?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Run `yarn && ENABLE_NETWORK_UI_REDESIGN=1 yarn start`
2. Go to Settings -> Developer Options
3. Tun on the network new toggle
4. Go to the wallet page
5. Click on the network button ( see the video below )
6. you should see the list of popular network
7.click on add network ( you should see the network form )

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**



https://github.com/MetaMask/metamask-extension/assets/26223211/02ab2204-8160-4b11-9d85-20c194e201b7


### **After**



https://github.com/MetaMask/metamask-extension/assets/26223211/93c8a0f3-2939-4f0f-84de-2adc9afbec42




## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Brian Bergeron <brian.e.bergeron@gmail.com>
  • Loading branch information
@salimtb @bergeron
salimtb and bergeron authored Jun 18, 2024
1 parent c306f20 commit 85783b1
Show file tree
Hide file tree
Showing 10 changed files with 359 additions and 188 deletions.
7 changes: 7 additions & 0 deletions app/_locales/en/messages.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

307 changes: 175 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,165 @@ 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">
<Box
paddingRight={4}
paddingLeft={4}
paddingBottom={4}
display={Display.Flex}
justifyContent={JustifyContent.spaceBetween}
>
<Text> {t('enabledNetworks')}</Text>
</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' }));
{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>
{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 showHeader={false} />
)}
</ModalContent>
</Modal>
);
Expand Down
Loading

0 comments on commit 85783b1

Please sign in to comment.