Skip to content

feat: add discover button to portfolio discover network page #30777

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

Merged
merged 22 commits into from
Mar 26, 2025
Merged

feat: add discover button to portfolio discover network page #30777

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
5a0e5ea
feat: add discover button to portfolio discover network page
Julink-eth Mar 5, 2025
be50272
fix: extra slash
Julink-eth Mar 6, 2025
0cf4c62
chore: refine network discover button
stanleyyconsensys Mar 7, 2025
d7b16b4
chore: remove un used method
stanleyyconsensys Mar 7, 2025
70eff65
chore: add network list menu item hook deps
stanleyyconsensys Mar 10, 2025
e7de77a
chore: fix network list menu test
stanleyyconsensys Mar 10, 2025
b664f12
chore: update test not using it.each
stanleyyconsensys Mar 10, 2025
05cee54
chore: update test title
stanleyyconsensys Mar 10, 2025
a00beb7
chore: remove unnecessary casting
stanleyyconsensys Mar 10, 2025
42cd199
chore: remove feature flag
stanleyyconsensys Mar 11, 2025
d2c2e15
chore: fix unit test
stanleyyconsensys Mar 11, 2025
b07a229
Merge branch 'main' into add-discover-network-button
Julink-eth Mar 11, 2025
edc3b35
fix: remove unused selector
Julink-eth Mar 11, 2025
4980350
chore: add discover translation to en_GB
Julink-eth Mar 11, 2025
fa39f42
Merge branch 'main' into add-discover-network-button
Julink-eth Mar 13, 2025
4ce842f
Merge branch 'main' into add-discover-network-button
Julink-eth Mar 18, 2025
2e83629
feat: add feature flag nePortfolioDiscoverButton
Julink-eth Mar 25, 2025
b4ad95d
Merge branch 'main' into add-discover-network-button
Julink-eth Mar 25, 2025
751972f
Merge branch 'main' into add-discover-network-button
Julink-eth Mar 26, 2025
f349f5a
Merge branch 'main' into add-discover-network-button
Julink-eth Mar 26, 2025
5b50bec
Merge branch 'main' into add-discover-network-button
Julink-eth Mar 26, 2025
ff4eeba
chore: convert renderButton function into useCallback
Julink-eth Mar 26, 2025
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
3 changes: 3 additions & 0 deletions app/_locales/en/messages.json
View file
Open in desktop

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

3 changes: 3 additions & 0 deletions app/_locales/en_GB/messages.json
View file
Open in desktop

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

8 changes: 8 additions & 0 deletions shared/constants/network.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -960,6 +960,14 @@ export const CHAIN_ID_TOKEN_IMAGE_MAP = {
[CHAINLIST_CHAIN_IDS_MAP.UNICHAIN_SEPOLIA]: ETH_TOKEN_IMAGE_URL,
} as const;

/**
* A mapping for networks with enabled profolio landing page to their URLs.
*/
export const CHAIN_ID_PROFOLIO_LANDING_PAGE_URL_MAP: Record<Hex, string> = {
[CHAIN_IDS.LINEA_MAINNET]:
'https://portfolio.metamask.io/explore/networks/linea',
} as const;

export const INFURA_BLOCKED_KEY = 'countryBlocked';

const defaultEtherscanDomain = 'etherscan.io';
Expand Down
17 changes: 17 additions & 0 deletions ui/components/multichain/network-list-item-menu/network-list-item-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const NetworkListItemMenu = ({
onClose,
onEditClick,
onDeleteClick,
onDiscoverClick,
isOpen,
}) => {
const t = useI18nContext();
Expand All @@ -38,6 +39,18 @@ export const NetworkListItemMenu = ({
>
<ModalFocus restoreFocus initialFocusRef={anchorElement}>
<Box>
{onDiscoverClick ? (
<MenuItem
iconName={IconName.Eye}
onClick={(e) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this be a useCallback as well?

Copy link
Contributor Author

@Julink-eth Julink-eth Mar 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey David!
I can add it but in that case should we add useCallBack for onEditClick and onDeleteClick as well ?

Copy link
Contributor

@stanleyyconsensys stanleyyconsensys Mar 25, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think the onDiscoverClick is already having useCallback at getItemCallbacks in network-list-menu.tsx

then the function pass to network-list-item and finally landed in this component, which should have the same behaviour as other functions; e.g: onEditClick, onDeleteClick, no?

e.stopPropagation();
onDiscoverClick();
}}
data-testid="network-list-item-options-discover"
>
<Text>{t('discover')}</Text>
</MenuItem>
) : null}
{onEditClick ? (
<MenuItem
iconName={IconName.Edit}
Expand Down Expand Up @@ -86,6 +99,10 @@ NetworkListItemMenu.propTypes = {
* Function that executes when the Delete menu item is closed
*/
onDeleteClick: PropTypes.func,
/**
* Function that executes when the Discover menu item is clicked
*/
onDiscoverClick: PropTypes.func,
/**
* Represents if the menu is open or not
*
Expand Down
5 changes: 4 additions & 1 deletion ui/components/multichain/network-list-item/network-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export const NetworkListItem = ({
onClick,
onDeleteClick,
onEditClick,
onDiscoverClick,
onRpcEndpointClick,
startAccessory,
endAccessory,
Expand All @@ -62,6 +63,7 @@ export const NetworkListItem = ({
onRpcEndpointClick?: () => void;
onDeleteClick?: () => void;
onEditClick?: () => void;
onDiscoverClick?: () => void;
focus?: boolean;
startAccessory?: ReactNode;
endAccessory?: ReactNode;
Expand All @@ -83,7 +85,7 @@ export const NetworkListItem = ({
const [networkOptionsMenuOpen, setNetworkOptionsMenuOpen] = useState(false);

const renderButton = () => {
return onDeleteClick || onEditClick ? (
return onDeleteClick || onEditClick || onDiscoverClick ? (
<ButtonIcon
iconName={IconName.MoreVertical}
ref={setNetworkListItemMenuRef}
Expand Down Expand Up @@ -217,6 +219,7 @@ export const NetworkListItem = ({
isOpen={networkOptionsMenuOpen}
onDeleteClick={onDeleteClick}
onEditClick={onEditClick}
onDiscoverClick={onDiscoverClick}
onClose={() => setNetworkOptionsMenuOpen(false)}
/>
)
Expand Down
40 changes: 39 additions & 1 deletion ui/components/multichain/network-list-menu/network-list-menu.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
BNB_DISPLAY_NAME,
LINEA_SEPOLIA_DISPLAY_NAME,
} from '../../../../shared/constants/network';
import { hexToDecimal } from '../../../../shared/modules/conversion.utils';
import { NetworkListMenu } from '.';

const mockSetShowTestNetworks = jest.fn();
Expand Down Expand Up @@ -80,6 +81,8 @@ const render = ({
networkClientId: 'linea-mainnet',
},
],
portfolioDiscoverUrl:
'https://portfolio.metamask.io/explore/networks/linea',
},
'0x38': {
nativeCurrency: 'BNB',
Expand Down Expand Up @@ -261,7 +264,7 @@ describe('NetworkListMenu', () => {
expect(queryByText('Add a custom network')).toBeEnabled();
});

it('enables the "AAdd a custom network" button when MetaMask is true', () => {
it('enables the "Add a custom network" button when MetaMask is true', () => {
const { queryByText } = render({ isUnlocked: true });
expect(queryByText('Add a custom network')).toBeEnabled();
});
Expand All @@ -273,6 +276,41 @@ describe('NetworkListMenu', () => {
).toHaveLength(0);
});

// For now, we only have Linea Mainnet enabled for the discover button.
it('enables the "Discover" button when the network is in the list of `CHAIN_ID_PROFOLIO_LANDING_PAGE_URL_MAP`', () => {
const { queryByTestId } = render({
enablePortfolioLandingPage: true,
});

const menuButton = queryByTestId(
`network-list-item-options-button-eip155:${hexToDecimal(
CHAIN_IDS.LINEA_MAINNET,
)}`,
);
fireEvent.click(menuButton);

expect(
queryByTestId('network-list-item-options-discover'),
).toBeInTheDocument();
});

it('disables the "Discover" button when the network is not in the list of `CHAIN_ID_PROFOLIO_LANDING_PAGE_URL_MAP`', () => {
const { queryByTestId } = render({
enablePortfolioLandingPage: false,
});

const menuButton = queryByTestId(
`network-list-item-options-button-eip155:${hexToDecimal(
CHAIN_IDS.MAINNET,
)}`,
);
fireEvent.click(menuButton);

expect(
queryByTestId('network-list-item-options-discover'),
).not.toBeInTheDocument();
});

describe('selectedTabOrigin is connected to wallet', () => {
it('fires setNetworkClientIdForDomain when network item is clicked', () => {
const { getByText } = render();
Expand Down
29 changes: 27 additions & 2 deletions ui/components/multichain/network-list-menu/network-list-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
import { type MultichainNetworkConfiguration } from '@metamask/multichain-network-controller';
import {
type CaipChainId,
type Hex,
parseCaipChainId,
KnownCaipNamespace,
} from '@metamask/utils';
Expand All @@ -47,6 +48,7 @@ import {
import {
FEATURED_RPCS,
TEST_CHAINS,
CHAIN_ID_PROFOLIO_LANDING_PAGE_URL_MAP,
} from '../../../../shared/constants/network';
import { MULTICHAIN_NETWORK_TO_NICKNAME } from '../../../../shared/constants/multichain/networks';
import {
Expand Down Expand Up @@ -108,6 +110,7 @@ import {
} from '../../../ducks/metamask/metamask';
import NetworksForm from '../../../pages/settings/networks-tab/networks-form';
import { useNetworkFormState } from '../../../pages/settings/networks-tab/networks-form/networks-form-state';
import { openWindow } from '../../../helpers/utils/window';
import PopularNetworkList from './popular-network-list/popular-network-list';
import NetworkListSearch from './network-list-search/network-list-search';
import AddRpcUrlModal from './add-rpc-url-modal/add-rpc-url-modal';
Expand Down Expand Up @@ -379,6 +382,12 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
});
};

const isDiscoverBtnEnabled = useCallback((hexChainId: Hex): boolean => {
// For now, the "Discover" button should be enabled only for Linea network base on
// the constants `CHAIN_ID_PROFOLIO_LANDING_PAGE_URL_MAP`.
return CHAIN_ID_PROFOLIO_LANDING_PAGE_URL_MAP[hexChainId] !== undefined;
}, []);

const hasMultiRpcOptions = useCallback(
(network: MultichainNetworkConfiguration): boolean =>
network.isEvm &&
Expand Down Expand Up @@ -432,6 +441,14 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
);
setActionMode(ACTION_MODE.ADD_EDIT);
},
onDiscoverClick: isDiscoverBtnEnabled(hexChainId)
? () => {
openWindow(
CHAIN_ID_PROFOLIO_LANDING_PAGE_URL_MAP[hexChainId],
'_blank',
);
}
: undefined,
onRpcConfigEdit: hasMultiRpcOptions(network)
? () => {
setActionMode(ACTION_MODE.SELECT_RPC);
Expand All @@ -444,7 +461,13 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
: undefined,
};
},
[currentChainId, dispatch, hasMultiRpcOptions, isUnlocked],
[
currentChainId,
dispatch,
hasMultiRpcOptions,
isUnlocked,
isDiscoverBtnEnabled,
],
);

// Renders a network in the network list
Expand All @@ -453,7 +476,8 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
) => {
const { chainId } = network;
const isCurrentNetwork = chainId === currentChainId;
const { onDelete, onEdit, onRpcConfigEdit } = getItemCallbacks(network);
const { onDelete, onEdit, onDiscoverClick, onRpcConfigEdit } =
getItemCallbacks(network);
const iconSrc = getNetworkIcon(network);

return (
Expand All @@ -475,6 +499,7 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
}}
onDeleteClick={onDelete}
onEditClick={onEdit}
onDiscoverClick={onDiscoverClick}
onRpcEndpointClick={onRpcConfigEdit}
disabled={!isNetworkEnabled(network)}
/>
Expand Down
Loading