Skip to content

Commit 8e361b3

Browse files
NidhiKJhaNidhiKJha
authored
UX Multichain: Added background color of test networks (#20032)
* added background color to token list item * updated badge color for nft-item * updated nft-item tests
1 parent ce771be commit 8e361b3

File tree

5 files changed

+74
-64
lines changed

5 files changed

+74
-64
lines changed

‎ui/components/multichain/app-header/app-header.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import {
4141
getOriginOfCurrentTab,
4242
getSelectedIdentity,
4343
getShowProductTour,
44+
getTestNetworkBackgroundColor,
4445
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
4546
getSelectedAddress,
4647
///: END:ONLY_INCLUDE_IN
@@ -89,8 +90,8 @@ export const AppHeader = ({ location }) => {
8990

9091
// Used for network icon / dropdown
9192
const currentNetwork = useSelector(getCurrentNetwork);
93+
const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
9294

93-
// Used to get the environment and connection status
9495
const popupStatus = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
9596
const showStatus =
9697
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP &&
@@ -206,6 +207,9 @@ export const AppHeader = ({ location }) => {
206207
<Box className="multichain-app-header__contents__container">
207208
<Tooltip title={currentNetwork?.nickname} position="right">
208209
<PickerNetwork
210+
avatarNetworkProps={{
211+
backgroundColor: testNetworkBackgroundColor,
212+
}}
209213
className="multichain-app-header__contents--avatar-network"
210214
ref={menuRef}
211215
as="button"
@@ -225,6 +229,9 @@ export const AppHeader = ({ location }) => {
225229
) : (
226230
<div>
227231
<PickerNetwork
232+
avatarNetworkProps={{
233+
backgroundColor: testNetworkBackgroundColor,
234+
}}
228235
margin={2}
229236
label={currentNetwork?.nickname}
230237
src={currentNetwork?.rpcPrefs?.imageUrl}
@@ -411,6 +418,9 @@ export const AppHeader = ({ location }) => {
411418
>
412419
<div>
413420
<PickerNetwork
421+
avatarNetworkProps={{
422+
backgroundColor: testNetworkBackgroundColor,
423+
}}
414424
label={currentNetwork?.nickname}
415425
src={currentNetwork?.rpcPrefs?.imageUrl}
416426
onClick={(e) => {

‎ui/components/multichain/nft-item/nft-item.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import classnames from 'classnames';
4+
import { useSelector } from 'react-redux';
45
import NftDefaultImage from '../../app/nft-default-image/nft-default-image';
56
import {
67
AvatarNetwork,
@@ -14,6 +15,7 @@ import {
1415
JustifyContent,
1516
Size,
1617
} from '../../../helpers/constants/design-system';
18+
import { getTestNetworkBackgroundColor } from '../../../selectors';
1719

1820
export const NftItem = ({
1921
alt,
@@ -25,6 +27,7 @@ export const NftItem = ({
2527
onClick,
2628
clickable = false,
2729
}) => {
30+
const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
2831
return (
2932
<Box
3033
className="nft-item__container"
@@ -42,6 +45,7 @@ export const NftItem = ({
4245
badge={
4346
<AvatarNetwork
4447
className="nft-item__network-badge"
48+
backgroundColor={testNetworkBackgroundColor}
4549
data-testid="nft-network-badge"
4650
size={Size.SM}
4751
name={networkName}

‎ui/components/multichain/nft-item/nft-item.test.js‎

Lines changed: 42 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,49 @@
11
import React from 'react';
2-
import { render, fireEvent } from '@testing-library/react';
2+
import configureStore from 'redux-mock-store';
3+
import { fireEvent } from '@testing-library/react';
34
import '@testing-library/jest-dom/extend-expect';
5+
import mockState from '../../../../test/data/mock-state.json';
6+
import { renderWithProvider } from '../../../../test/lib/render-helpers';
47
import { NftItem } from '.';
58

69
describe('NftItem component', () => {
7-
const mockOnClick = jest.fn();
8-
9-
afterEach(() => {
10-
jest.clearAllMocks();
11-
});
12-
13-
it('renders correctly with an image source', () => {
14-
const { getByTestId } = render(
15-
<NftItem
16-
alt="Test Alt"
17-
backgroundColor="red"
18-
name="Test NFT"
19-
src="test-src"
20-
networkName="Test Network"
21-
networkSrc="test-network-src"
22-
tokenId="1"
23-
onClick={mockOnClick}
24-
/>,
25-
);
26-
27-
expect(getByTestId('nft-item')).toBeInTheDocument();
28-
expect(getByTestId('nft-network-badge')).toBeInTheDocument();
29-
expect(getByTestId('nft-image')).toBeInTheDocument();
30-
expect(getByTestId('nft-image')).toHaveAttribute('src', 'test-src');
31-
});
32-
33-
it('renders correctly with default image when no image source is provided', () => {
34-
const { getByTestId, queryByTestId } = render(
35-
<NftItem
36-
alt="Test Alt"
37-
backgroundColor="red"
38-
name="Test NFT"
39-
src=""
40-
networkName="Test Network"
41-
networkSrc="test-network-src"
42-
tokenId="1"
43-
onClick={mockOnClick}
44-
/>,
45-
);
46-
47-
expect(getByTestId('nft-item')).toBeInTheDocument();
48-
expect(getByTestId('nft-network-badge')).toBeInTheDocument();
49-
expect(queryByTestId('nft-image')).not.toBeInTheDocument();
50-
expect(getByTestId('nft-default-image')).toBeInTheDocument();
51-
});
52-
53-
it('calls onClick when the NFT image is clicked', () => {
54-
const { getByTestId } = render(
55-
<NftItem
56-
alt="Test Alt"
57-
backgroundColor="red"
58-
name="Test NFT"
59-
src="test-src"
60-
networkName="Test Network"
61-
networkSrc="test-network-src"
62-
tokenId="1"
63-
onClick={mockOnClick}
64-
/>,
65-
);
66-
67-
fireEvent.click(getByTestId('nft-image'));
68-
expect(mockOnClick).toHaveBeenCalled();
10+
const store = configureStore()(mockState);
11+
describe('render', () => {
12+
const props = {
13+
alt: 'Test Alt',
14+
backgroundColor: 'red',
15+
name: 'Test NFT',
16+
src: 'test-src',
17+
networkName: 'Test Network',
18+
networkSrc: 'test-network-src',
19+
tokenId: '1',
20+
onClick: jest.fn(),
21+
};
22+
23+
it('renders correctly with an image source', () => {
24+
const { getByTestId } = renderWithProvider(<NftItem {...props} />, store);
25+
26+
expect(getByTestId('nft-item')).toBeInTheDocument();
27+
expect(getByTestId('nft-network-badge')).toBeInTheDocument();
28+
expect(getByTestId('nft-image')).toBeInTheDocument();
29+
expect(getByTestId('nft-image')).toHaveAttribute('src', 'test-src');
30+
});
31+
32+
it('renders correctly with default image when no image source is provided', () => {
33+
const { getByTestId, queryByTestId } = renderWithProvider(
34+
<NftItem {...props} src="" />,
35+
store,
36+
);
37+
38+
expect(queryByTestId('nft-image')).not.toBeInTheDocument();
39+
expect(getByTestId('nft-default-image')).toBeInTheDocument();
40+
});
41+
42+
it('calls onClick when the NFT image is clicked', () => {
43+
const { getByTestId } = renderWithProvider(<NftItem {...props} />, store);
44+
45+
fireEvent.click(getByTestId('nft-image'));
46+
expect(props.onClick).toHaveBeenCalled();
47+
});
6948
});
7049
});

‎ui/components/multichain/token-list-item/token-list-item.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
getCurrentChainId,
2626
getCurrentNetwork,
2727
getNativeCurrencyImage,
28+
getTestNetworkBackgroundColor,
2829
} from '../../../selectors';
2930
import Tooltip from '../../ui/tooltip';
3031
import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -50,6 +51,8 @@ export const TokenListItem = ({
5051

5152
// Used for badge icon
5253
const currentNetwork = useSelector(getCurrentNetwork);
54+
const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
55+
5356
return (
5457
<Box
5558
className={classnames('multichain-token-list-item', className)}
@@ -86,6 +89,7 @@ export const TokenListItem = ({
8689
size={Size.XS}
8790
name={currentNetwork?.nickname}
8891
src={currentNetwork?.rpcPrefs?.imageUrl}
92+
backgroundColor={testNetworkBackgroundColor}
8993
borderColor={
9094
primaryTokenImage
9195
? BorderColor.borderMuted

‎ui/selectors/selectors.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ import {
9292
getValueFromWeiHex,
9393
hexToDecimal,
9494
} from '../../shared/modules/conversion.utils';
95+
import { BackgroundColor } from '../helpers/constants/design-system';
9596
///: BEGIN:ONLY_INCLUDE_IN(snaps)
9697
import { SNAPS_VIEW_ROUTE } from '../helpers/constants/routes';
9798
import { getPermissionSubjects } from './permissions';
@@ -603,6 +604,18 @@ export function getShowTestNetworks(state) {
603604
return Boolean(showTestNetworks);
604605
}
605606

607+
export function getTestNetworkBackgroundColor(state) {
608+
const currentNetwork = state.metamask.providerConfig.ticker;
609+
switch (true) {
610+
case currentNetwork?.includes(GOERLI_DISPLAY_NAME):
611+
return BackgroundColor.goerli;
612+
case currentNetwork?.includes(SEPOLIA_DISPLAY_NAME):
613+
return BackgroundColor.sepolia;
614+
default:
615+
return undefined;
616+
}
617+
}
618+
606619
export function getDisabledRpcMethodPreferences(state) {
607620
return state.metamask.disabledRpcMethodPreferences;
608621
}

0 commit comments

Comments
 (0)