m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

UX Multichain: Added background color of test networks (#20032)

Browse Source 
* added background color to token list item

* updated badge color for nft-item

* updated nft-item tests
This commit is contained in:
Nidhi Kumari 2023-07-17 22:13:26 +05:30 committed by GitHub
parent ce771bee66
commit 8e361b391a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 68 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/components/multichain/app-header/app-header.js
View File

@ -41,6 +41,7 @@ import {
getOriginOfCurrentTab,
getSelectedIdentity,
getShowProductTour,
getTestNetworkBackgroundColor,
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
getSelectedAddress,
///: END:ONLY_INCLUDE_IN
@ -89,8 +90,8 @@ export const AppHeader = ({ location }) => {
// Used for network icon / dropdown
const currentNetwork = useSelector(getCurrentNetwork);
const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
// Used to get the environment and connection status
const popupStatus = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
const showStatus =
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP &&
@ -206,6 +207,9 @@ export const AppHeader = ({ location }) => {
<Box className="multichain-app-header__contents__container">
<Tooltip title={currentNetwork?.nickname} position="right">
<PickerNetwork
avatarNetworkProps={{
backgroundColor: testNetworkBackgroundColor,
}}
className="multichain-app-header__contents--avatar-network"
ref={menuRef}
as="button"
@ -225,6 +229,9 @@ export const AppHeader = ({ location }) => {
) : (
<div>
<PickerNetwork
avatarNetworkProps={{
backgroundColor: testNetworkBackgroundColor,
}}
margin={2}
label={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
@ -411,6 +418,9 @@ export const AppHeader = ({ location }) => {
>
<div>
<PickerNetwork
avatarNetworkProps={{
backgroundColor: testNetworkBackgroundColor,
}}
label={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
onClick={(e) => {

4
ui/components/multichain/nft-item/nft-item.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useSelector } from 'react-redux';
import NftDefaultImage from '../../app/nft-default-image/nft-default-image';
import {
AvatarNetwork,
@ -14,6 +15,7 @@ import {
JustifyContent,
Size,
} from '../../../helpers/constants/design-system';
import { getTestNetworkBackgroundColor } from '../../../selectors';
export const NftItem = ({
alt,
@ -25,6 +27,7 @@ export const NftItem = ({
onClick,
clickable = false,
}) => {
const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
return (
<Box
className="nft-item__container"
@ -42,6 +45,7 @@ export const NftItem = ({
badge={
<AvatarNetwork
className="nft-item__network-badge"
backgroundColor={testNetworkBackgroundColor}
data-testid="nft-network-badge"
size={Size.SM}
name={networkName}

93
ui/components/multichain/nft-item/nft-item.test.js
View File

@ -1,70 +1,49 @@
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import configureStore from 'redux-mock-store';
import { fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import mockState from '../../../../test/data/mock-state.json';
import { renderWithProvider } from '../../../../test/lib/render-helpers';
import { NftItem } from '.';
describe('NftItem component', () => {
const mockOnClick = jest.fn();
const store = configureStore()(mockState);
describe('render', () => {
const props = {
alt: 'Test Alt',
backgroundColor: 'red',
name: 'Test NFT',
src: 'test-src',
networkName: 'Test Network',
networkSrc: 'test-network-src',
tokenId: '1',
onClick: jest.fn(),
};
afterEach(() => {
jest.clearAllMocks();
});
it('renders correctly with an image source', () => {
const { getByTestId } = renderWithProvider(<NftItem {...props} />, store);
it('renders correctly with an image source', () => {
const { getByTestId } = render(
<NftItem
alt="Test Alt"
backgroundColor="red"
name="Test NFT"
src="test-src"
networkName="Test Network"
networkSrc="test-network-src"
tokenId="1"
onClick={mockOnClick}
/>,
);
expect(getByTestId('nft-item')).toBeInTheDocument();
expect(getByTestId('nft-network-badge')).toBeInTheDocument();
expect(getByTestId('nft-image')).toBeInTheDocument();
expect(getByTestId('nft-image')).toHaveAttribute('src', 'test-src');
});
expect(getByTestId('nft-item')).toBeInTheDocument();
expect(getByTestId('nft-network-badge')).toBeInTheDocument();
expect(getByTestId('nft-image')).toBeInTheDocument();
expect(getByTestId('nft-image')).toHaveAttribute('src', 'test-src');
});
it('renders correctly with default image when no image source is provided', () => {
const { getByTestId, queryByTestId } = renderWithProvider(
<NftItem {...props} src="" />,
store,
);
it('renders correctly with default image when no image source is provided', () => {
const { getByTestId, queryByTestId } = render(
<NftItem
alt="Test Alt"
backgroundColor="red"
name="Test NFT"
src=""
networkName="Test Network"
networkSrc="test-network-src"
tokenId="1"
onClick={mockOnClick}
/>,
);
expect(queryByTestId('nft-image')).not.toBeInTheDocument();
expect(getByTestId('nft-default-image')).toBeInTheDocument();
});
expect(getByTestId('nft-item')).toBeInTheDocument();
expect(getByTestId('nft-network-badge')).toBeInTheDocument();
expect(queryByTestId('nft-image')).not.toBeInTheDocument();
expect(getByTestId('nft-default-image')).toBeInTheDocument();
});
it('calls onClick when the NFT image is clicked', () => {
const { getByTestId } = renderWithProvider(<NftItem {...props} />, store);
it('calls onClick when the NFT image is clicked', () => {
const { getByTestId } = render(
<NftItem
alt="Test Alt"
backgroundColor="red"
name="Test NFT"
src="test-src"
networkName="Test Network"
networkSrc="test-network-src"
tokenId="1"
onClick={mockOnClick}
/>,
);
fireEvent.click(getByTestId('nft-image'));
expect(mockOnClick).toHaveBeenCalled();
fireEvent.click(getByTestId('nft-image'));
expect(props.onClick).toHaveBeenCalled();
});
});
});

4
ui/components/multichain/token-list-item/token-list-item.js
View File

@ -25,6 +25,7 @@ import {
getCurrentChainId,
getCurrentNetwork,
getNativeCurrencyImage,
getTestNetworkBackgroundColor,
} from '../../../selectors';
import Tooltip from '../../ui/tooltip';
import { useI18nContext } from '../../../hooks/useI18nContext';
@ -50,6 +51,8 @@ export const TokenListItem = ({
// Used for badge icon
const currentNetwork = useSelector(getCurrentNetwork);
const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
return (
<Box
className={classnames('multichain-token-list-item', className)}
@ -86,6 +89,7 @@ export const TokenListItem = ({
size={Size.XS}
name={currentNetwork?.nickname}
src={currentNetwork?.rpcPrefs?.imageUrl}
backgroundColor={testNetworkBackgroundColor}
borderColor={
primaryTokenImage
? BorderColor.borderMuted

13
ui/selectors/selectors.js
View File

@ -92,6 +92,7 @@ import {
getValueFromWeiHex,
hexToDecimal,
} from '../../shared/modules/conversion.utils';
import { BackgroundColor } from '../helpers/constants/design-system';
///: BEGIN:ONLY_INCLUDE_IN(snaps)
import { SNAPS_VIEW_ROUTE } from '../helpers/constants/routes';
import { getPermissionSubjects } from './permissions';
@ -603,6 +604,18 @@ export function getShowTestNetworks(state) {
return Boolean(showTestNetworks);
}
export function getTestNetworkBackgroundColor(state) {
const currentNetwork = state.metamask.providerConfig.ticker;
switch (true) {
case currentNetwork?.includes(GOERLI_DISPLAY_NAME):
return BackgroundColor.goerli;
case currentNetwork?.includes(SEPOLIA_DISPLAY_NAME):
return BackgroundColor.sepolia;
default:
return undefined;
}
}
export function getDisabledRpcMethodPreferences(state) {
return state.metamask.disabledRpcMethodPreferences;
}