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

Remove MULTICHAIN flag for NFT badges (#19416)

Browse Source
This commit is contained in:
vthomas13 2023-06-04 12:28:48 -04:00 committed by GitHub
parent a5c370cdfa
commit 1726fb3fd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 94 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/e2e/nft/import-erc1155.spec.js
View File

@ -56,7 +56,7 @@ describe('Import ERC1155 NFT', function () {
assert.equal(await importedERC1155.isDisplayed(), true);
const importedERC1155Image = await driver.findVisibleElement(
'.nfts-items__item img',
'.nft-item__item',
);
assert.equal(await importedERC1155Image.isDisplayed(), true);
},

2
test/e2e/nft/import-nft.spec.js
View File

@ -54,7 +54,7 @@ describe('Import NFT', function () {
text: 'TestDappCollectibles',
});
const importedNftImage = await driver.findElement(
'.nfts-items__item-image',
'.nft-item__item-image',
);
assert.equal(await importedNft.isDisplayed(), true);
assert.equal(await importedNftImage.isDisplayed(), true);

2
test/e2e/nft/remove-erc1155.spec.js
View File

@ -32,7 +32,7 @@ describe('Remove ERC1155 NFT', function () {
// Open the details page and click remove nft button
await driver.clickElement('[data-testid="home__nfts-tab"]');
const importedNftImage = await driver.findVisibleElement(
'.nfts-items__item img',
'.nft-item__item',
);
await importedNftImage.click();
await driver.clickElement('[data-testid="nft-options__button"]');

2
test/e2e/nft/remove-nft.spec.js
View File

@ -31,7 +31,7 @@ describe('Remove NFT', function () {
// Open the details and click remove nft button
await driver.clickElement('[data-testid="home__nfts-tab"]');
await driver.clickElement('.nfts-items__item-image');
await driver.clickElement('.nft-item__item-image');
await driver.clickElement('[data-testid="nft-options__button"]');
await driver.clickElement('[data-testid="nft-item-remove"]');

2
test/e2e/nft/send-nft.spec.js
View File

@ -31,7 +31,7 @@ describe('Send NFT', function () {
// Fill the send NFT form and confirm the transaction
await driver.clickElement('[data-testid="home__nfts-tab"]');
await driver.clickElement('.nfts-items__item-image');
await driver.clickElement('.nft-item__item-image');
await driver.clickElement({ text: 'Send', tag: 'button' });
await driver.fill(
'input[placeholder="Search, public address (0x), or ENS"]',

4
test/e2e/nft/view-erc1155-details.spec.js
View File

@ -34,7 +34,7 @@ describe('View ERC1155 NFT details', function () {
// Click to open the NFT details page and check displayed account
await driver.clickElement('[data-testid="home__nfts-tab"]');
const importedNftImage = await driver.findVisibleElement(
'.nfts-items__item img',
'.nft-item__item',
);
await importedNftImage.click();
const detailsPageAccount = await driver.findElement(
@ -54,7 +54,7 @@ describe('View ERC1155 NFT details', function () {
'This is a collection of Rock NFTs.',
);
const nftImage = await driver.findElement('.nft-details__image');
const nftImage = await driver.findElement('.nft-item__item-image');
assert.equal(await nftImage.isDisplayed(), true);
const nftImageSource = await driver.findElement(

4
test/e2e/nft/view-nft-details.spec.js
View File

@ -33,7 +33,7 @@ describe('View NFT details', function () {
// Click to open the NFT details page and check title
await driver.clickElement('[data-testid="home__nfts-tab"]');
await driver.clickElement('.nfts-items__item-image');
await driver.clickElement('.nft-item__item-image');
const detailsPageTitle = await driver.findElement('.asset-breadcrumb');
assert.equal(
@ -53,7 +53,7 @@ describe('View NFT details', function () {
'Test Dapp Collectibles for testing.',
);
const nftImage = await driver.findElement('.nft-details__image');
const nftImage = await driver.findElement('.nft-item__item-image');
assert.equal(await nftImage.isDisplayed(), true);
const nftImageSource = await driver.findElement(

35
ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
View File

@ -40,16 +40,37 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
class="box nft-details box--flex-direction-row"
>
<div
class="box nft-details__top-section box--gap-6 box--flex-direction-row"
class="box nft-details__top-section box--gap-6 box--flex-direction-column"
>
<div
class="box nft-details__card box--flex-direction-row box--justify-content-center box--background-color-background-default box--rounded-md box--border-style-solid box--border-color-border-muted box--border-width-1 box--display-flex"
class="box nft-details__nft-item box--flex-direction-row"
>
<img
alt="MUNK #1 1"
class="nft-details__image"
src="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
/>
<button
class="box nft-item__container box--flex-direction-row"
data-testid="nft-item"
>
<div
class="box mm-badge-wrapper nft-item__badge-wrapper box--flex-direction-row"
>
<img
alt="MUNK #1 1"
class="box nft-item__item nft-item__item-image box--display-block box--flex-direction-row box--justify-content-center"
data-testid="nft-image"
src="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
/>
<div
class="box mm-badge-wrapper__badge-container box--flex-direction-row"
style="top: -4px; right: -4px;"
>
<div
class="box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network nft-item__network-badge mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-background-default box--border-width-2 box--border-style-solid"
data-testid="nft-network-badge"
>
G
</div>
</div>
</div>
</button>
</div>
<div
class="box nft-details__info box--flex-direction-column box--justify-content-space-between box--display-flex"

80
ui/components/app/nft-details/nft-details.js
View File

@ -4,17 +4,16 @@ import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { isEqual } from 'lodash';
import Box from '../../ui/box';
import Card from '../../ui/card';
import {
TextColor,
IconColor,
TextVariant,
FontWeight,
JustifyContent,
FLEX_DIRECTION,
OverflowWrap,
DISPLAY,
BLOCK_SIZES,
FlexDirection,
Display,
BlockSize,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import {
@ -52,7 +51,6 @@ import {
AssetType,
TokenStandard,
} from '../../../../shared/constants/transaction';
import NftDefaultImage from '../nft-default-image';
import { ButtonIcon, IconName, Text } from '../../component-library';
import Tooltip from '../../ui/tooltip';
import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils';
@ -144,8 +142,8 @@ export default function NftDetails({ nft }) {
}
return (
<Box
display={DISPLAY.FLEX}
width={inPopUp ? BLOCK_SIZES.FULL : BLOCK_SIZES.HALF}
display={Display.Flex}
width={inPopUp ? BlockSize.Full : BlockSize.Half}
margin={inPopUp ? [4, 0] : null}
>
<Button
@ -182,37 +180,23 @@ export default function NftDetails({ nft }) {
}
/>
<Box className="nft-details">
<Box className="nft-details__top-section" gap={6}>
{process.env.MULTICHAIN ? (
<Box className="nft-details__nft-item">
<NftItem
src={image ? nftImageURL : ''}
alt={image ? nftImageAlt : ''}
name={name}
tokenId={tokenId}
networkName={currentChain.nickname}
networkSrc={currentChain.rpcPrefs?.imageUrl}
/>
</Box>
) : (
<Card
padding={0}
justifyContent={JustifyContent.center}
className="nft-details__card"
>
{image ? (
<img
className="nft-details__image"
src={nftImageURL}
alt={nftImageAlt}
/>
) : (
<NftDefaultImage name={name} tokenId={tokenId} />
)}
</Card>
)}
<Box
className="nft-details__top-section"
gap={6}
flexDirection={FlexDirection.Column}
>
<Box className="nft-details__nft-item">
<NftItem
src={image ? nftImageURL : ''}
alt={image ? nftImageAlt : ''}
name={name}
tokenId={tokenId}
networkName={currentChain.nickname}
networkSrc={currentChain.rpcPrefs?.imageUrl}
/>
</Box>
<Box
flexDirection={FLEX_DIRECTION.COLUMN}
flexDirection={FlexDirection.Column}
className="nft-details__info"
justifyContent={JustifyContent.spaceBetween}
>
@ -264,7 +248,7 @@ export default function NftDetails({ nft }) {
<Box marginBottom={2}>
{lastSale ? (
<>
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Box display={Display.Flex} flexDirection={FlexDirection.Row}>
<Text
color={TextColor.textDefault}
variant={TextVariant.bodySmBold}
@ -276,8 +260,8 @@ export default function NftDetails({ nft }) {
{t('lastSold')}
</Text>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
display={Display.Flex}
flexDirection={FlexDirection.Row}
className="nft-details__contract-wrapper"
>
<Text
@ -291,7 +275,7 @@ export default function NftDetails({ nft }) {
</Text>
</Box>
</Box>
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Box display={Display.Flex} flexDirection={FlexDirection.Row}>
<Text
color={TextColor.textDefault}
variant={TextVariant.bodySmBold}
@ -303,8 +287,8 @@ export default function NftDetails({ nft }) {
{t('lastPriceSold')}
</Text>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
display={Display.Flex}
flexDirection={FlexDirection.Row}
className="nft-details__contract-wrapper"
>
<Text
@ -322,7 +306,7 @@ export default function NftDetails({ nft }) {
</Box>
</>
) : null}
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Box display={Display.Flex} flexDirection={FlexDirection.Row}>
<Text
color={TextColor.textDefault}
variant={TextVariant.bodySmBold}
@ -357,7 +341,7 @@ export default function NftDetails({ nft }) {
</Text>
</Box>
{imageThumbnail ? (
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Box display={Display.Flex} flexDirection={FlexDirection.Row}>
<Text
color={TextColor.textDefault}
variant={TextVariant.bodySmBold}
@ -388,7 +372,7 @@ export default function NftDetails({ nft }) {
</Text>
</Box>
) : null}
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
<Box display={Display.Flex} flexDirection={FlexDirection.Row}>
<Text
color={TextColor.textDefault}
variant={TextVariant.bodySmBold}
@ -400,8 +384,8 @@ export default function NftDetails({ nft }) {
{t('contractAddress')}
</Text>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
display={Display.Flex}
flexDirection={FlexDirection.Row}
className="nft-details__contract-wrapper"
>
<Text

14
ui/components/app/nft-details/nft-details.test.js
View File

@ -203,6 +203,13 @@ describe('NFT Details', () => {
providerConfig: {
chainId: '0x89',
},
networkConfigurations: {
testNetworkConfigurationId: {
rpcUrl: 'https://testrpc.com',
chainId: '0x89',
nickname: 'Custom Mainnet RPC',
},
},
},
};
const polygonMockStore = configureMockStore([thunk])(polygonState);
@ -263,6 +270,13 @@ describe('NFT Details', () => {
providerConfig: {
chainId: '0x99',
},
networkConfigurations: {
testNetworkConfigurationId: {
rpcUrl: 'https://testrpc.com',
chainId: '0x99',
nickname: 'Custom Mainnet RPC',
},
},
},
};
const randomNetworkMockStore = configureMockStore([thunk])(

57
ui/components/app/nfts-items/nfts-items.js
View File

@ -31,8 +31,6 @@ import { usePrevious } from '../../../hooks/usePrevious';
import { getNftsDropdownState } from '../../../ducks/metamask/metamask';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { Icon, IconName } from '../../component-library';
import NftDefaultImage from '../nft-default-image';
import Card from '../../ui/card/card';
import { NftItem } from '../../multichain/nft-item';
const width =
@ -171,7 +169,7 @@ export default function NftsItems({
{isExpanded ? (
<Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP} gap={4}>
{nfts.map((nft, i) => {
const { image, address, tokenId, backgroundColor, name } = nft;
const { image, address, tokenId, name } = nft;
const nftImage = getAssetImageURL(image, ipfsGateway);
const nftImageAlt = getNftImageAlt(nft);
const handleImageClick = () =>
@ -183,49 +181,16 @@ export default function NftsItems({
key={`nft-${i}`}
className="nfts-items__item-wrapper"
>
{process.env.MULTICHAIN ? (
<NftItem
src={nftImage}
alt={nftImageAlt}
name={name}
tokenId={tokenId}
networkName={currentChain.nickname}
networkSrc={currentChain.rpcPrefs?.imageUrl}
onClick={handleImageClick}
clickable
/>
) : (
<Card
className="nfts-items__item-wrapper__card"
padding={0}
justifyContent={JustifyContent.center}
>
{nftImage ? (
<button
className="nfts-items__item"
style={{
backgroundColor,
borderRadius: 4,
}}
onClick={handleImageClick}
>
<img
className="nfts-items__item-image"
data-testid="nft-image"
src={nftImage}
alt={nftImageAlt}
/>
</button>
) : (
<NftDefaultImage
name={name}
tokenId={tokenId}
handleImageClick={handleImageClick}
clickable
/>
)}
</Card>
)}
<NftItem
src={nftImage}
alt={nftImageAlt}
name={name}
tokenId={tokenId}
networkName={currentChain.nickname}
networkSrc={currentChain.rpcPrefs?.imageUrl}
onClick={handleImageClick}
clickable
/>
</Box>
);
})}