diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 9f05ce88d..f1dc5be2f 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -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" diff --git a/ui/pages/confirm-add-suggested-nft/__snapshots__/confirm-add-suggested-nft.test.js.snap b/ui/pages/confirm-add-suggested-nft/__snapshots__/confirm-add-suggested-nft.test.js.snap new file mode 100644 index 000000000..02d00db76 --- /dev/null +++ b/ui/pages/confirm-add-suggested-nft/__snapshots__/confirm-add-suggested-nft.test.js.snap @@ -0,0 +1,489 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ConfirmAddSuggestedNFT Component should match snapshot 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+
+
+ +
+
+
+
+
+ + W + +
+
+ + https://www.opensea.io + +
+
+
+

+ Add suggested NFTs +

+

+ + + This allows the following asset to be added to your wallet. + + +

+
+
+
+
+
+
+
+
+

+ CryptoKitty +

+

+ # + 15 +

+
+
+
+
+
+
+
+
+ + +
+
+
+
+ , + "container":
+
+
+ +
+
+
+
+
+ + W + +
+
+ + https://www.opensea.io + +
+
+
+

+ Add suggested NFTs +

+

+ + + This allows the following asset to be added to your wallet. + + +

+
+
+
+
+
+
+
+
+

+ CryptoKitty +

+

+ # + 15 +

+
+
+
+
+
+
+
+
+ + +
+
+
+
, + "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], +} +`; diff --git a/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js b/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js index f0e2511be..34b0d8b11 100644 --- a/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js +++ b/ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js @@ -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 ( { flexDirection={FlexDirection.Column} > + + + + ({ 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, ); });