mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 09:23:21 +01:00
Updating watch NFT page header (#20569)
This commit is contained in:
Jyoti Puri
GitHub
parent
96210b9783
commit
77c7f34062
3
app/_locales/en/messages.json
generated
3
app/_locales/en/messages.json
generated
@ -5343,8 +5343,7 @@
|
||||
"message": "Want to add this network?"
|
||||
},
|
||||
"wantsToAddThisAsset": {
|
||||
"message": "$1 wants to add this asset to your wallet",
|
||||
"description": "$1 is the name of the website that wants to add an asset to your wallet"
|
||||
"message": "This allows the following asset to be added to your wallet."
|
||||
},
|
||||
"warning": {
|
||||
"message": "Warning"
|
||||
|
||||
@ -0,0 +1,489 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ConfirmAddSuggestedNFT Component should match snapshot 1`] = `
|
||||
{
|
||||
"asFragment": [Function],
|
||||
"baseElement": <body>
|
||||
<div
|
||||
id="popover-content"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
|
||||
>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__header mm-box--padding-bottom-2"
|
||||
>
|
||||
<div
|
||||
class="box network-account-balance-header box--padding-4 box--display-flex box--flex-direction-row box--justify-content-space-between box--align-items-center"
|
||||
>
|
||||
<div
|
||||
class="box box--display-flex box--gap-2 box--flex-direction-row box--align-items-center"
|
||||
>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-row box--align-items-center"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="identicon"
|
||||
style="height: 32px; width: 32px; border-radius: 16px;"
|
||||
>
|
||||
<div
|
||||
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
|
||||
>
|
||||
<svg
|
||||
height="32"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<rect
|
||||
fill="#18CDF2"
|
||||
height="32"
|
||||
transform="translate(-1.04839350379394 -3.3042840694604987) rotate(328.9 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#035E56"
|
||||
height="32"
|
||||
transform="translate(-18.298461708832043 10.5924618717486) rotate(176.2 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#F26602"
|
||||
height="32"
|
||||
transform="translate(16.667842018223922 -14.205139722997082) rotate(468.9 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="network-account-balance-header__network-account__ident-icon-ethereum"
|
||||
>
|
||||
<img
|
||||
alt="Ethereum Mainnet"
|
||||
src="./images/eth_logo.png"
|
||||
style="height: 16px; width: 16px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
|
||||
>
|
||||
<h6
|
||||
class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
|
||||
>
|
||||
Ethereum Mainnet
|
||||
</h6>
|
||||
<h6
|
||||
class="mm-box mm-text mm-text--body-sm mm-text--font-weight-bold mm-box--color-text-default"
|
||||
>
|
||||
Test Account
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
|
||||
>
|
||||
<h6
|
||||
class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
|
||||
>
|
||||
Balance
|
||||
</h6>
|
||||
<h6
|
||||
align="end"
|
||||
class="mm-box mm-text mm-text--body-sm mm-text--font-weight-bold mm-box--color-text-default"
|
||||
>
|
||||
0 ETH
|
||||
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mm-box mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center"
|
||||
>
|
||||
<div
|
||||
class="site-origin"
|
||||
title="https://www.opensea.io"
|
||||
>
|
||||
<div
|
||||
class="chip chip--with-left-icon chip--border-color-border-muted chip--background-color-undefined"
|
||||
>
|
||||
<div
|
||||
class="chip__left-icon"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="icon-with-fallback__fallback"
|
||||
>
|
||||
W
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography chip__label typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
|
||||
>
|
||||
https://www.opensea.io
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2
|
||||
class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--margin-2 mm-box--color-text-default"
|
||||
>
|
||||
Add suggested NFTs
|
||||
</h2>
|
||||
<p
|
||||
class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--color-text-default"
|
||||
>
|
||||
<span>
|
||||
|
||||
This allows the following asset to be added to your wallet.
|
||||
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__content"
|
||||
>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__card mm-box--padding-2 mm-box--rounded-md"
|
||||
>
|
||||
<div
|
||||
class="mm-box"
|
||||
>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__nft-single mm-box--margin-0 mm-box--padding-0 mm-box--rounded-md"
|
||||
>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__nft-single-image-default nft-default mm-box--display-flex mm-box--rounded-lg"
|
||||
data-testid="nft-default-image"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="mm-box mm-box--padding-1 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__nft-single-sub-details mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-nowrap mm-box--justify-content-space-evenly mm-box--width-full"
|
||||
>
|
||||
<p
|
||||
class="mm-box mm-text confirm-add-suggested-nft__nft-name mm-text--body-md mm-box--color-text-default"
|
||||
title="0x8b175474e89094c44da98b954eedeac495271d0a"
|
||||
>
|
||||
CryptoKitty
|
||||
</p>
|
||||
<p
|
||||
class="mm-box mm-text confirm-add-suggested-nft__nft-tokenId mm-text--body-md mm-box--color-text-default"
|
||||
>
|
||||
#
|
||||
15
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="page-container__footer"
|
||||
>
|
||||
<footer>
|
||||
<button
|
||||
class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
|
||||
data-testid="page-container-footer-cancel"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="button btn--rounded btn-primary page-container__footer-button"
|
||||
data-testid="page-container-footer-next"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Add NFT
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>,
|
||||
"container": <div>
|
||||
<div
|
||||
class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--height-full"
|
||||
>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__header mm-box--padding-bottom-2"
|
||||
>
|
||||
<div
|
||||
class="box network-account-balance-header box--padding-4 box--display-flex box--flex-direction-row box--justify-content-space-between box--align-items-center"
|
||||
>
|
||||
<div
|
||||
class="box box--display-flex box--gap-2 box--flex-direction-row box--align-items-center"
|
||||
>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-row box--align-items-center"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="identicon"
|
||||
style="height: 32px; width: 32px; border-radius: 16px;"
|
||||
>
|
||||
<div
|
||||
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
|
||||
>
|
||||
<svg
|
||||
height="32"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<rect
|
||||
fill="#18CDF2"
|
||||
height="32"
|
||||
transform="translate(-1.04839350379394 -3.3042840694604987) rotate(328.9 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#035E56"
|
||||
height="32"
|
||||
transform="translate(-18.298461708832043 10.5924618717486) rotate(176.2 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#F26602"
|
||||
height="32"
|
||||
transform="translate(16.667842018223922 -14.205139722997082) rotate(468.9 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="network-account-balance-header__network-account__ident-icon-ethereum"
|
||||
>
|
||||
<img
|
||||
alt="Ethereum Mainnet"
|
||||
src="./images/eth_logo.png"
|
||||
style="height: 16px; width: 16px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
|
||||
>
|
||||
<h6
|
||||
class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
|
||||
>
|
||||
Ethereum Mainnet
|
||||
</h6>
|
||||
<h6
|
||||
class="mm-box mm-text mm-text--body-sm mm-text--font-weight-bold mm-box--color-text-default"
|
||||
>
|
||||
Test Account
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
|
||||
>
|
||||
<h6
|
||||
class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
|
||||
>
|
||||
Balance
|
||||
</h6>
|
||||
<h6
|
||||
align="end"
|
||||
class="mm-box mm-text mm-text--body-sm mm-text--font-weight-bold mm-box--color-text-default"
|
||||
>
|
||||
0 ETH
|
||||
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mm-box mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center"
|
||||
>
|
||||
<div
|
||||
class="site-origin"
|
||||
title="https://www.opensea.io"
|
||||
>
|
||||
<div
|
||||
class="chip chip--with-left-icon chip--border-color-border-muted chip--background-color-undefined"
|
||||
>
|
||||
<div
|
||||
class="chip__left-icon"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="icon-with-fallback__fallback"
|
||||
>
|
||||
W
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography chip__label typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
|
||||
>
|
||||
https://www.opensea.io
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2
|
||||
class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--margin-2 mm-box--color-text-default"
|
||||
>
|
||||
Add suggested NFTs
|
||||
</h2>
|
||||
<p
|
||||
class="mm-box mm-text mm-text--body-md mm-text--text-align-center mm-box--color-text-default"
|
||||
>
|
||||
<span>
|
||||
|
||||
This allows the following asset to be added to your wallet.
|
||||
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__content"
|
||||
>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__card mm-box--padding-2 mm-box--rounded-md"
|
||||
>
|
||||
<div
|
||||
class="mm-box"
|
||||
>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__nft-single mm-box--margin-0 mm-box--padding-0 mm-box--rounded-md"
|
||||
>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__nft-single-image-default nft-default mm-box--display-flex mm-box--rounded-lg"
|
||||
data-testid="nft-default-image"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="mm-box mm-box--padding-1 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="mm-box confirm-add-suggested-nft__nft-single-sub-details mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-nowrap mm-box--justify-content-space-evenly mm-box--width-full"
|
||||
>
|
||||
<p
|
||||
class="mm-box mm-text confirm-add-suggested-nft__nft-name mm-text--body-md mm-box--color-text-default"
|
||||
title="0x8b175474e89094c44da98b954eedeac495271d0a"
|
||||
>
|
||||
CryptoKitty
|
||||
</p>
|
||||
<p
|
||||
class="mm-box mm-text confirm-add-suggested-nft__nft-tokenId mm-text--body-md mm-box--color-text-default"
|
||||
>
|
||||
#
|
||||
15
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="page-container__footer"
|
||||
>
|
||||
<footer>
|
||||
<button
|
||||
class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
|
||||
data-testid="page-container-footer-cancel"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="button btn--rounded btn-primary page-container__footer-button"
|
||||
data-testid="page-container-footer-next"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Add NFT
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
"debug": [Function],
|
||||
"findAllByAltText": [Function],
|
||||
"findAllByDisplayValue": [Function],
|
||||
"findAllByLabelText": [Function],
|
||||
"findAllByPlaceholderText": [Function],
|
||||
"findAllByRole": [Function],
|
||||
"findAllByTestId": [Function],
|
||||
"findAllByText": [Function],
|
||||
"findAllByTitle": [Function],
|
||||
"findByAltText": [Function],
|
||||
"findByDisplayValue": [Function],
|
||||
"findByLabelText": [Function],
|
||||
"findByPlaceholderText": [Function],
|
||||
"findByRole": [Function],
|
||||
"findByTestId": [Function],
|
||||
"findByText": [Function],
|
||||
"findByTitle": [Function],
|
||||
"getAllByAltText": [Function],
|
||||
"getAllByDisplayValue": [Function],
|
||||
"getAllByLabelText": [Function],
|
||||
"getAllByPlaceholderText": [Function],
|
||||
"getAllByRole": [Function],
|
||||
"getAllByTestId": [Function],
|
||||
"getAllByText": [Function],
|
||||
"getAllByTitle": [Function],
|
||||
"getByAltText": [Function],
|
||||
"getByDisplayValue": [Function],
|
||||
"getByLabelText": [Function],
|
||||
"getByPlaceholderText": [Function],
|
||||
"getByRole": [Function],
|
||||
"getByTestId": [Function],
|
||||
"getByText": [Function],
|
||||
"getByTitle": [Function],
|
||||
"queryAllByAltText": [Function],
|
||||
"queryAllByDisplayValue": [Function],
|
||||
"queryAllByLabelText": [Function],
|
||||
"queryAllByPlaceholderText": [Function],
|
||||
"queryAllByRole": [Function],
|
||||
"queryAllByTestId": [Function],
|
||||
"queryAllByText": [Function],
|
||||
"queryAllByTitle": [Function],
|
||||
"queryByAltText": [Function],
|
||||
"queryByDisplayValue": [Function],
|
||||
"queryByLabelText": [Function],
|
||||
"queryByPlaceholderText": [Function],
|
||||
"queryByRole": [Function],
|
||||
"queryByTestId": [Function],
|
||||
"queryByText": [Function],
|
||||
"queryByTitle": [Function],
|
||||
"rerender": [Function],
|
||||
"unmount": [Function],
|
||||
}
|
||||
`;
|
||||
@ -32,6 +32,10 @@ import {
|
||||
getRpcPrefsForCurrentProvider,
|
||||
getSuggestedNfts,
|
||||
getIpfsGateway,
|
||||
getNetworkIdentifier,
|
||||
getSelectedAddress,
|
||||
getSelectedAccountCachedBalance,
|
||||
getAddressBookEntryOrAccountName,
|
||||
} from '../../selectors';
|
||||
import NftDefaultImage from '../../components/app/nft-default-image/nft-default-image';
|
||||
import { getAssetImageURL, shortenAddress } from '../../helpers/utils/util';
|
||||
@ -47,6 +51,13 @@ import {
|
||||
TextVariant,
|
||||
BlockSize,
|
||||
} from '../../helpers/constants/design-system';
|
||||
import NetworkAccountBalanceHeader from '../../components/app/network-account-balance-header/network-account-balance-header';
|
||||
import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
|
||||
import SiteOrigin from '../../components/ui/site-origin/site-origin';
|
||||
import { PRIMARY } from '../../helpers/constants/common';
|
||||
import { useUserPreferencedCurrency } from '../../hooks/useUserPreferencedCurrency';
|
||||
import { useCurrencyDisplay } from '../../hooks/useCurrencyDisplay';
|
||||
import { useOriginMetadata } from '../../hooks/useOriginMetadata';
|
||||
|
||||
const ConfirmAddSuggestedNFT = () => {
|
||||
const t = useContext(I18nContext);
|
||||
@ -59,6 +70,26 @@ const ConfirmAddSuggestedNFT = () => {
|
||||
const chainId = useSelector(getCurrentChainId);
|
||||
const ipfsGateway = useSelector(getIpfsGateway);
|
||||
const trackEvent = useContext(MetaMetricsContext);
|
||||
const networkIdentifier = useSelector(getNetworkIdentifier);
|
||||
const selectedAddress = useSelector(getSelectedAddress);
|
||||
const selectedAccountBalance = useSelector(getSelectedAccountCachedBalance);
|
||||
const accountName = useSelector((state) =>
|
||||
getAddressBookEntryOrAccountName(state, selectedAddress),
|
||||
);
|
||||
|
||||
const networkName = NETWORK_TO_NAME_MAP[chainId] || networkIdentifier;
|
||||
|
||||
const {
|
||||
currency: primaryCurrency,
|
||||
numberOfDecimals: primaryNumberOfDecimals,
|
||||
} = useUserPreferencedCurrency(PRIMARY, { ethNumberOfDecimals: 4 });
|
||||
|
||||
const [primaryCurrencyValue] = useCurrencyDisplay(selectedAccountBalance, {
|
||||
numberOfDecimals: primaryNumberOfDecimals,
|
||||
currency: primaryCurrency,
|
||||
});
|
||||
|
||||
const originMetadata = useOriginMetadata(suggestedNfts[0]?.origin) || {};
|
||||
|
||||
const handleAddNftsClick = useCallback(async () => {
|
||||
await Promise.all(
|
||||
@ -116,6 +147,7 @@ const ConfirmAddSuggestedNFT = () => {
|
||||
origin = 'dapp';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
height={BlockSize.Full}
|
||||
@ -124,6 +156,28 @@ const ConfirmAddSuggestedNFT = () => {
|
||||
flexDirection={FlexDirection.Column}
|
||||
>
|
||||
<Box paddingBottom={2} className="confirm-add-suggested-nft__header">
|
||||
<NetworkAccountBalanceHeader
|
||||
accountName={accountName}
|
||||
accountBalance={primaryCurrencyValue}
|
||||
accountAddress={selectedAddress}
|
||||
networkName={networkName}
|
||||
chainId={chainId}
|
||||
/>
|
||||
<Box
|
||||
paddingTop={4}
|
||||
paddingRight={4}
|
||||
paddingLeft={4}
|
||||
display={Display.Flex}
|
||||
justifyContent={JustifyContent.center}
|
||||
>
|
||||
<SiteOrigin
|
||||
chip
|
||||
siteOrigin={originMetadata.origin}
|
||||
title={originMetadata.origin}
|
||||
iconSrc={originMetadata.iconUrl}
|
||||
iconName={originMetadata.hostname}
|
||||
/>
|
||||
</Box>
|
||||
<Text
|
||||
variant={TextVariant.headingLg}
|
||||
textAlign={TextAlign.Center}
|
||||
|
||||
@ -7,6 +7,7 @@ import {
|
||||
rejectPendingApproval,
|
||||
} from '../../store/actions';
|
||||
import configureStore from '../../store/store';
|
||||
import mockState from '../../../test/data/mock-state.json';
|
||||
import { renderWithProvider } from '../../../test/jest/rendering';
|
||||
import ConfirmAddSuggestedNFT from '.';
|
||||
|
||||
@ -68,6 +69,7 @@ jest.mock('../../store/actions', () => ({
|
||||
const renderComponent = (pendingNfts = {}) => {
|
||||
const store = configureStore({
|
||||
metamask: {
|
||||
...mockState.metamask,
|
||||
pendingApprovals: pendingNfts,
|
||||
providerConfig: { chainId: '0x1' },
|
||||
},
|
||||
@ -102,9 +104,11 @@ describe('ConfirmAddSuggestedNFT Component', () => {
|
||||
});
|
||||
|
||||
expect(screen.getByText('Add suggested NFTs')).toBeInTheDocument();
|
||||
expect(screen.getByText('www.opensea.io')).toBeInTheDocument();
|
||||
expect(screen.getByText('https://www.opensea.io')).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText('wants to add this asset to your wallet'),
|
||||
screen.getByText(
|
||||
'This allows the following asset to be added to your wallet.',
|
||||
),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByText('CryptoKitty')).toBeInTheDocument();
|
||||
expect(screen.getByText('#15')).toBeInTheDocument();
|
||||
@ -112,6 +116,27 @@ describe('ConfirmAddSuggestedNFT Component', () => {
|
||||
expect(screen.getByRole('button', { name: 'Add NFT' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should match snapshot', () => {
|
||||
const container = renderComponent({
|
||||
1: {
|
||||
id: '1',
|
||||
origin: 'https://www.opensea.io',
|
||||
time: 1,
|
||||
type: ApprovalType.WatchAsset,
|
||||
requestData: {
|
||||
asset: {
|
||||
address: '0x8b175474e89094c44da98b954eedeac495271d0a',
|
||||
name: 'CryptoKitty',
|
||||
tokenId: '15',
|
||||
standard: 'ERC721',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render a list of suggested NFTs', () => {
|
||||
renderComponent({ ...PENDING_NFT_APPROVALS, ...PENDING_TOKEN_APPROVALS });
|
||||
|
||||
@ -122,7 +147,7 @@ describe('ConfirmAddSuggestedNFT Component', () => {
|
||||
expect(screen.getByText(`#${asset.tokenId}`)).toBeInTheDocument();
|
||||
}
|
||||
expect(screen.getAllByRole('img')).toHaveLength(
|
||||
Object.values(PENDING_NFT_APPROVALS).length,
|
||||
Object.values(PENDING_NFT_APPROVALS).length + 1,
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user