diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 533f31809..1c454164f 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -2109,7 +2109,7 @@ "message": "Το “$1” προστέθηκε με επιτυχία!" }, "newNftAddedMessage": { - "message": "Το Collectible προστέθηκε με επιτυχία!" + "message": "Το Nft προστέθηκε με επιτυχία!" }, "newPassword": { "message": "Νέος Κωδικός Πρόσβασης (ελάχιστο 8 χαρακτήρες)" diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index dcb89dc42..33bea36d2 100644 --- a/app/_locales/fr/messages.json +++ b/app/_locales/fr/messages.json @@ -1570,7 +1570,7 @@ "message": "page Importer des NFT" }, "importNFTTokenIdToolTip": { - "message": "L’ID d’un collectible est un identifiant unique puisqu’il n’y a pas deux NFT identiques. Encore une fois, sur OpenSea, ce numéro se trouve dans la section « Détails ». Prenez-en note ou copiez-le dans votre presse-papiers." + "message": "L’ID d’un NFT est un identifiant unique puisqu’il n’y a pas deux NFT identiques. Encore une fois, sur OpenSea, ce numéro se trouve dans la section « Détails ». Prenez-en note ou copiez-le dans votre presse-papiers." }, "importNFTs": { "message": "Importer des NFT" @@ -2109,7 +2109,7 @@ "message": "« $1 » a été ajouté avec succès !" }, "newNftAddedMessage": { - "message": "Le collectible a été ajouté avec succès !" + "message": "Le NFT a été ajouté avec succès !" }, "newPassword": { "message": "Nouveau mot de passe (min 8 caractères)" @@ -4157,7 +4157,7 @@ "description": "Shown when the protocol is unknown by the extension. $1 is the protocol code." }, "unsendableAsset": { - "message": "L’envoi de jetons collectibles (ERC-721) n’est pas pris en charge actuellement", + "message": "L’envoi de jetons NFTs (ERC-721) n’est pas pris en charge actuellement", "description": "This is an error message we show the user if they attempt to send an NFT asset type, for which currently don't support sending" }, "unverifiedContractAddressMessage": { diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index 022dc6f1d..898e6c27d 100644 --- a/app/_locales/tl/messages.json +++ b/app/_locales/tl/messages.json @@ -1570,7 +1570,7 @@ "message": "I-import ang pahina ng NFT" }, "importNFTTokenIdToolTip": { - "message": "Ang ID ng collectible ay isang natatanging pagkakakilanlan dahil walang dalawang NFT ang magkatulad. Muli, sa OpenSea ang numerong ito ay nasa ilalim ng 'Mga Detalye'. Itala ito, o kopyahin ito sa iyong clipboard." + "message": "Ang ID ng NFT ay isang natatanging pagkakakilanlan dahil walang dalawang NFT ang magkatulad. Muli, sa OpenSea ang numerong ito ay nasa ilalim ng 'Mga Detalye'. Itala ito, o kopyahin ito sa iyong clipboard." }, "importNFTs": { "message": "I-import ang mga NFT" @@ -2109,7 +2109,7 @@ "message": "Ang “$1” matagumpay na naidagdag!" }, "newNftAddedMessage": { - "message": "Ang collectible ay tagumpay na naidagdag!" + "message": "Ang NFT ay tagumpay na naidagdag!" }, "newPassword": { "message": "Bagong password (min na 8 char)" @@ -4157,7 +4157,7 @@ "description": "Shown when the protocol is unknown by the extension. $1 is the protocol code." }, "unsendableAsset": { - "message": "Ang pagpapadala ng collectible (ERC-721) token ay kasalukuyang hindi magagamit", + "message": "Ang pagpapadala ng NFT (ERC-721) token ay kasalukuyang hindi magagamit", "description": "This is an error message we show the user if they attempt to send an NFT asset type, for which currently don't support sending" }, "unverifiedContractAddressMessage": { diff --git a/app/_locales/zh_TW/messages.json b/app/_locales/zh_TW/messages.json index f1bc0be8a..86438bf02 100644 --- a/app/_locales/zh_TW/messages.json +++ b/app/_locales/zh_TW/messages.json @@ -984,7 +984,7 @@ "description": "The next nonce according to MetaMask's internal logic" }, "nftTokenIdPlaceholder": { - "message": "Enter the collectible ID" + "message": "Enter the NFT ID" }, "noAccountsFound": { "message": "指定的搜尋條件找不到帳戶" diff --git a/app/scripts/controllers/app-state.js b/app/scripts/controllers/app-state.js index a6c3b62f1..04034200a 100644 --- a/app/scripts/controllers/app-state.js +++ b/app/scripts/controllers/app-state.js @@ -38,14 +38,14 @@ export default class AppStateController extends EventEmitter { recoveryPhraseReminderHasBeenShown: false, recoveryPhraseReminderLastShown: new Date().getTime(), outdatedBrowserWarningLastShown: new Date().getTime(), - collectiblesDetectionNoticeDismissed: false, + nftsDetectionNoticeDismissed: false, showTestnetMessageInDropdown: true, showPortfolioTooltip: true, showBetaHeader: isBeta(), trezorModel: null, ...initState, qrHardware: {}, - collectiblesDropdownState: {}, + nftsDropdownState: {}, usedNetworks: { '0x1': true, '0x5': true, @@ -330,13 +330,13 @@ export default class AppStateController extends EventEmitter { } /** - * A setter for the `collectiblesDropdownState` property + * A setter for the `nftsDropdownState` property * - * @param collectiblesDropdownState + * @param nftsDropdownState */ - updateCollectibleDropDownState(collectiblesDropdownState) { + updateNftDropDownState(nftsDropdownState) { this.store.updateState({ - collectiblesDropdownState, + nftsDropdownState, }); } diff --git a/app/scripts/controllers/backup.test.js b/app/scripts/controllers/backup.test.js index b4e740bcf..37c91f87e 100644 --- a/app/scripts/controllers/backup.test.js +++ b/app/scripts/controllers/backup.test.js @@ -31,7 +31,7 @@ function getMockController() { return mcState; } -const jsonData = `{"preferences":{"frequentRpcListDetail":[{"chainId":"0x539","nickname":"Localhost 8545","rpcPrefs":{},"rpcUrl":"http://localhost:8545","ticker":"ETH"},{"chainId":"0x38","nickname":"Binance Smart Chain Mainnet","rpcPrefs":{"blockExplorerUrl":"https://bscscan.com"},"rpcUrl":"https://bsc-dataseed1.binance.org","ticker":"BNB"},{"chainId":"0x61","nickname":"Binance Smart Chain Testnet","rpcPrefs":{"blockExplorerUrl":"https://testnet.bscscan.com"},"rpcUrl":"https://data-seed-prebsc-1-s1.binance.org:8545","ticker":"tBNB"},{"chainId":"0x89","nickname":"Polygon Mainnet","rpcPrefs":{"blockExplorerUrl":"https://polygonscan.com"},"rpcUrl":"https://polygon-rpc.com","ticker":"MATIC"}],"useBlockie":false,"useNonceField":false,"usePhishDetect":true,"dismissSeedBackUpReminder":false,"useTokenDetection":false,"useCollectibleDetection":false,"openSeaEnabled":false,"advancedGasFee":null,"featureFlags":{"sendHexData":true,"showIncomingTransactions":true},"knownMethodData":{},"currentLocale":"en","forgottenPassword":false,"preferences":{"hideZeroBalanceTokens":false,"showFiatInTestnets":false,"showTestNetworks":true,"useNativeCurrencyAsPrimaryCurrency":true},"ipfsGateway":"dweb.link","infuraBlocked":false,"ledgerTransportType":"webhid","theme":"light","customNetworkListEnabled":false,"textDirection":"auto"},"addressBook":{"addressBook":{"0x61":{"0x42EB768f2244C8811C63729A21A3569731535f06":{"address":"0x42EB768f2244C8811C63729A21A3569731535f06","chainId":"0x61","isEns":false,"memo":"","name":""}}}}}`; +const jsonData = `{"preferences":{"frequentRpcListDetail":[{"chainId":"0x539","nickname":"Localhost 8545","rpcPrefs":{},"rpcUrl":"http://localhost:8545","ticker":"ETH"},{"chainId":"0x38","nickname":"Binance Smart Chain Mainnet","rpcPrefs":{"blockExplorerUrl":"https://bscscan.com"},"rpcUrl":"https://bsc-dataseed1.binance.org","ticker":"BNB"},{"chainId":"0x61","nickname":"Binance Smart Chain Testnet","rpcPrefs":{"blockExplorerUrl":"https://testnet.bscscan.com"},"rpcUrl":"https://data-seed-prebsc-1-s1.binance.org:8545","ticker":"tBNB"},{"chainId":"0x89","nickname":"Polygon Mainnet","rpcPrefs":{"blockExplorerUrl":"https://polygonscan.com"},"rpcUrl":"https://polygon-rpc.com","ticker":"MATIC"}],"useBlockie":false,"useNonceField":false,"usePhishDetect":true,"dismissSeedBackUpReminder":false,"useTokenDetection":false,"useNftDetection":false,"openSeaEnabled":false,"advancedGasFee":null,"featureFlags":{"sendHexData":true,"showIncomingTransactions":true},"knownMethodData":{},"currentLocale":"en","forgottenPassword":false,"preferences":{"hideZeroBalanceTokens":false,"showFiatInTestnets":false,"showTestNetworks":true,"useNativeCurrencyAsPrimaryCurrency":true},"ipfsGateway":"dweb.link","infuraBlocked":false,"ledgerTransportType":"webhid","theme":"light","customNetworkListEnabled":false,"textDirection":"auto"},"addressBook":{"addressBook":{"0x61":{"0x42EB768f2244C8811C63729A21A3569731535f06":{"address":"0x42EB768f2244C8811C63729A21A3569731535f06","chainId":"0x61","isEns":false,"memo":"","name":""}}}}}`; describe('BackupController', function () { const getBackupController = () => { diff --git a/app/scripts/controllers/metametrics.js b/app/scripts/controllers/metametrics.js index 3edffbec1..ad237ffbe 100644 --- a/app/scripts/controllers/metametrics.js +++ b/app/scripts/controllers/metametrics.js @@ -758,7 +758,7 @@ export default class MetaMetricsController { } /** - * Returns an array of all of the collectibles/NFTs the user + * Returns an array of all of the NFTs the user * possesses across all networks and accounts. * * @param {object} allNfts @@ -771,7 +771,7 @@ export default class MetaMetricsController { }); /** - * Returns the number of unique collectible/NFT addresses the user + * Returns the number of unique NFT addresses the user * possesses across all networks and accounts. * * @param {object} allNfts diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js index 456f01263..ab51bb0c5 100644 --- a/app/scripts/controllers/preferences.js +++ b/app/scripts/controllers/preferences.js @@ -151,7 +151,7 @@ export default class PreferencesController { /** * Setter for the `useNftDetection` property * - * @param {boolean} useNftDetection - Whether or not the user prefers to autodetect collectibles. + * @param {boolean} useNftDetection - Whether or not the user prefers to autodetect NFTs. */ setUseNftDetection(useNftDetection) { this.store.updateState({ useNftDetection }); @@ -169,7 +169,7 @@ export default class PreferencesController { /** * Setter for the `openSeaEnabled` property * - * @param {boolean} openSeaEnabled - Whether or not the user prefers to use the OpenSea API for collectibles data. + * @param {boolean} openSeaEnabled - Whether or not the user prefers to use the OpenSea API for NFTs data. */ setOpenSeaEnabled(openSeaEnabled) { this.store.updateState({ diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 570b7d60d..f5ec93dff 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -960,8 +960,8 @@ export default class MetamaskController extends EventEmitter { const { txReceipt } = txMeta; - // if this is a transferFrom method generated from within the app it may be a collectible transfer transaction - // in which case we will want to check and update ownership status of the transferred collectible. + // if this is a transferFrom method generated from within the app it may be an NFT transfer transaction + // in which case we will want to check and update ownership status of the transferred NFT. if ( txMeta.type === TransactionType.tokenMethodTransferFrom && txMeta.txParams !== undefined @@ -982,19 +982,17 @@ export default class MetamaskController extends EventEmitter { const { allNfts } = this.nftController.state; const chainIdAsDecimal = hexToDecimal(chainId); - // check if its a known collectible - const knownCollectible = allNfts?.[userAddress]?.[ - chainIdAsDecimal - ]?.find( + // check if its a known NFT + const knownNft = allNfts?.[userAddress]?.[chainIdAsDecimal]?.find( ({ address, tokenId }) => isEqualCaseInsensitive(address, contractAddress) && tokenId === transactionDataTokenId, ); // if it is we check and update ownership status. - if (knownCollectible) { + if (knownNft) { this.nftController.checkAndUpdateSingleNftOwnershipStatus( - knownCollectible, + knownNft, false, { userAddress, chainId: chainIdAsDecimal }, ); @@ -1904,10 +1902,8 @@ export default class MetamaskController extends EventEmitter { appStateController.setShowPortfolioTooltip.bind(appStateController), setShowBetaHeader: appStateController.setShowBetaHeader.bind(appStateController), - updateCollectibleDropDownState: - appStateController.updateCollectibleDropDownState.bind( - appStateController, - ), + updateNftDropDownState: + appStateController.updateNftDropDownState.bind(appStateController), setFirstTimeUsedNetwork: appStateController.setFirstTimeUsedNetwork.bind(appStateController), // EnsController @@ -2144,7 +2140,7 @@ export default class MetamaskController extends EventEmitter { detectTokensController, ), - // DetectCollectibleController + // DetectNftController detectNfts: process.env.NFTS_V1 ? nftDetectionController.detectNfts.bind(nftDetectionController) : null, diff --git a/app/scripts/migrations/078.js b/app/scripts/migrations/078.js new file mode 100644 index 000000000..b6f451701 --- /dev/null +++ b/app/scripts/migrations/078.js @@ -0,0 +1,31 @@ +import { cloneDeep } from 'lodash'; + +const version = 78; + +/** + * Remove collectiblesDropdownState and collectiblesDetectionNoticeDismissed:. + */ +export default { + version, + async migrate(originalVersionedData) { + const versionedData = cloneDeep(originalVersionedData); + versionedData.meta.version = version; + const state = versionedData.data; + const newState = transformState(state); + versionedData.data = newState; + return versionedData; + }, +}; + +function transformState(state) { + if ( + state?.AppStateController?.collectiblesDetectionNoticeDismissed !== + undefined + ) { + delete state.AppStateController.collectiblesDetectionNoticeDismissed; + } + if (state?.metamask?.collectiblesDropdownState !== undefined) { + delete state.metamask.collectiblesDropdownState; + } + return state; +} diff --git a/app/scripts/migrations/078.test.js b/app/scripts/migrations/078.test.js new file mode 100644 index 000000000..4ae405f5a --- /dev/null +++ b/app/scripts/migrations/078.test.js @@ -0,0 +1,173 @@ +import migration78 from './078'; + +describe('migration #78', () => { + it('should update the version metadata', async () => { + const oldStorage = { + meta: { + version: 77, + }, + }; + + const newStorage = await migration78.migrate(oldStorage); + expect(newStorage.meta).toStrictEqual({ + version: 78, + }); + }); + + it('should remove the "collectiblesDetectionNoticeDismissed"', async () => { + const oldStorage = { + meta: { + version: 77, + }, + data: { + AppStateController: { + collectiblesDetectionNoticeDismissed: false, + bar: 'baz', + }, + }, + }; + + const newStorage = await migration78.migrate(oldStorage); + expect(newStorage).toStrictEqual({ + meta: { + version: 78, + }, + data: { + AppStateController: { + bar: 'baz', + }, + }, + }); + }); + + it('should remove the "collectiblesDropdownState"', async () => { + const oldStorage = { + meta: { + version: 77, + }, + data: { + metamask: { + isInitialized: true, + isUnlocked: true, + isAccountMenuOpen: false, + identities: { + '0x00000': { + address: '0x00000', + lastSelected: 1675966229118, + name: 'Account 1', + }, + '0x00001': { + address: '0x00001', + name: 'Account 2', + }, + }, + collectiblesDropdownState: {}, + qrHardware: {}, + }, + }, + }; + + const newStorage = await migration78.migrate(oldStorage); + expect(newStorage).toStrictEqual({ + meta: { + version: 78, + }, + data: { + metamask: { + isInitialized: true, + isUnlocked: true, + isAccountMenuOpen: false, + identities: { + '0x00000': { + address: '0x00000', + lastSelected: 1675966229118, + name: 'Account 1', + }, + '0x00001': { + address: '0x00001', + name: 'Account 2', + }, + }, + qrHardware: {}, + }, + }, + }); + }); + + it('should make no changes if "collectiblesDetectionNoticeDismissed" never existed', async () => { + const oldStorage = { + meta: { + version: 77, + }, + data: { + AppStateController: { + bar: 'baz', + }, + }, + }; + + const newStorage = await migration78.migrate(oldStorage); + expect(newStorage).toStrictEqual({ + meta: { + version: 78, + }, + data: { + AppStateController: { + bar: 'baz', + }, + }, + }); + }); + it('should make no changes if "collectiblesDropdownState" never existed', async () => { + const oldStorage = { + meta: { + version: 77, + }, + data: { + metamask: { + isInitialized: true, + isUnlocked: true, + isAccountMenuOpen: false, + identities: { + '0x00000': { + address: '0x00000', + lastSelected: 1675966229118, + name: 'Account 1', + }, + '0x00001': { + address: '0x00001', + name: 'Account 2', + }, + }, + qrHardware: {}, + }, + }, + }; + + const newStorage = await migration78.migrate(oldStorage); + expect(newStorage).toStrictEqual({ + meta: { + version: 78, + }, + data: { + metamask: { + isInitialized: true, + isUnlocked: true, + isAccountMenuOpen: false, + identities: { + '0x00000': { + address: '0x00000', + lastSelected: 1675966229118, + name: 'Account 1', + }, + '0x00001': { + address: '0x00001', + name: 'Account 2', + }, + }, + qrHardware: {}, + }, + }, + }); + }); +}); diff --git a/app/scripts/migrations/index.js b/app/scripts/migrations/index.js index d39595847..d4928f75e 100644 --- a/app/scripts/migrations/index.js +++ b/app/scripts/migrations/index.js @@ -81,6 +81,7 @@ import m074 from './074'; import m075 from './075'; import m076 from './076'; import m077 from './077'; +import m078 from './078'; const migrations = [ m002, @@ -159,6 +160,7 @@ const migrations = [ m075, m076, m077, + m078, ]; export default migrations; diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json index babed9348..76555e54f 100644 --- a/development/ts-migration-dashboard/files-to-convert.json +++ b/development/ts-migration-dashboard/files-to-convert.json @@ -1149,7 +1149,7 @@ "ui/hooks/useApproveTransaction.js", "ui/hooks/useAssetDetails.js", "ui/hooks/useAssetDetails.test.js", - "ui/hooks/useCollectiblesCollections.js", + "ui/hooks/useNftsCollections.js", "ui/hooks/useCopyToClipboard.js", "ui/hooks/useCurrencyDisplay.js", "ui/hooks/useCurrencyDisplay.test.js", diff --git a/test/data/mock-state.json b/test/data/mock-state.json index e2eb7d9fd..183ba6ba2 100644 --- a/test/data/mock-state.json +++ b/test/data/mock-state.json @@ -261,7 +261,7 @@ "maxBaseFee": "75", "priorityFee": "2" }, - "collectiblesDropdownState": { + "nftsDropdownState": { "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": { "0x5": { "0x495f947276749Ce646f68AC8c248420045cb7b5e": false diff --git a/test/e2e/fixture-builder.js b/test/e2e/fixture-builder.js index 7f546a12f..76b8a854a 100644 --- a/test/e2e/fixture-builder.js +++ b/test/e2e/fixture-builder.js @@ -115,7 +115,7 @@ function defaultFixture() { }, AppStateController: { browserEnvironment: {}, - collectiblesDropdownState: {}, + nftsDropdownState: {}, connectedStatusPopoverHasBeenShown: true, defaultHomeActiveTabName: null, fullScreenGasPollTokens: [], @@ -281,7 +281,7 @@ function onboardingFixture() { data: { AppStateController: { browserEnvironment: {}, - collectiblesDropdownState: {}, + nftsDropdownState: {}, connectedStatusPopoverHasBeenShown: true, defaultHomeActiveTabName: null, fullScreenGasPollTokens: [], @@ -411,7 +411,7 @@ class FixtureBuilder { return this; } - withCollectiblesController(data) { + withNftsController(data) { merge( this.fixture.data.NftController ? this.fixture.data.NftController diff --git a/test/e2e/nft/import-nft.spec.js b/test/e2e/nft/import-nft.spec.js index 7bafe1d1b..b0985e7dd 100644 --- a/test/e2e/nft/import-nft.spec.js +++ b/test/e2e/nft/import-nft.spec.js @@ -4,7 +4,7 @@ const { SMART_CONTRACTS } = require('../seeder/smart-contracts'); const FixtureBuilder = require('../fixture-builder'); describe('Import NFT', function () { - const smartContract = SMART_CONTRACTS.COLLECTIBLES; + const smartContract = SMART_CONTRACTS.NFTS; const ganacheOptions = { accounts: [ { @@ -54,7 +54,7 @@ describe('Import NFT', function () { text: 'TestDappCollectibles', }); const importedNftImage = await driver.findElement( - '.collectibles-items__item-image', + '.nfts-items__item-image', ); assert.equal(await importedNft.isDisplayed(), true); assert.equal(await importedNftImage.isDisplayed(), true); diff --git a/test/e2e/nft/send-nft.spec.js b/test/e2e/nft/send-nft.spec.js index 66e562675..4b2b0ff66 100644 --- a/test/e2e/nft/send-nft.spec.js +++ b/test/e2e/nft/send-nft.spec.js @@ -4,7 +4,7 @@ const { SMART_CONTRACTS } = require('../seeder/smart-contracts'); const FixtureBuilder = require('../fixture-builder'); describe('Send NFT', function () { - const smartContract = SMART_CONTRACTS.COLLECTIBLES; + const smartContract = SMART_CONTRACTS.NFTS; const ganacheOptions = { accounts: [ { @@ -40,7 +40,7 @@ describe('Send NFT', function () { await driver.clickElement({ text: 'Add', tag: 'button' }); // Fill the send NFT form and confirm the transaction - await driver.clickElement('.collectibles-items__item-image'); + await driver.clickElement('.nfts-items__item-image'); await driver.clickElement({ text: 'Send', tag: 'button' }); await driver.fill( 'input[placeholder="Search, public address (0x), or ENS"]', @@ -49,7 +49,7 @@ describe('Send NFT', function () { await driver.clickElement({ text: 'Next', tag: 'button' }); await driver.clickElement({ text: 'Confirm', tag: 'button' }); - // When transaction complete, check the send nft item is displayed in activity tab + // When transaction complete, check the send NFT is displayed in activity tab await driver.wait(async () => { const confirmedTxes = await driver.findElements( '.transaction-list__completed-transactions .transaction-list-item', diff --git a/test/e2e/seeder/ganache-seeder.js b/test/e2e/seeder/ganache-seeder.js index 8f963640f..62cc1534d 100644 --- a/test/e2e/seeder/ganache-seeder.js +++ b/test/e2e/seeder/ganache-seeder.js @@ -44,7 +44,7 @@ class GanacheSeeder { await contract.deployTransaction.wait(); - if (contractName === SMART_CONTRACTS.COLLECTIBLES) { + if (contractName === SMART_CONTRACTS.NFTS) { const transaction = await contract.mintCollectibles(1, { from: fromAddress, }); diff --git a/test/e2e/seeder/smart-contracts.js b/test/e2e/seeder/smart-contracts.js index 70c60b1c1..247c00350 100644 --- a/test/e2e/seeder/smart-contracts.js +++ b/test/e2e/seeder/smart-contracts.js @@ -20,7 +20,7 @@ const hstFactory = { abi: hstAbi, }; -const collectiblesFactory = { +const nftsFactory = { bytecode: collectiblesBytecode, abi: collectiblesAbi, }; @@ -42,7 +42,7 @@ const multisigFactory = { const SMART_CONTRACTS = { HST: 'hst', - COLLECTIBLES: 'collectibles', + NFTS: 'nfts', PIGGYBANK: 'piggybank', FAILING: 'failing', MULTISIG: 'multisig', @@ -50,7 +50,7 @@ const SMART_CONTRACTS = { const contractConfiguration = { [SMART_CONTRACTS.HST]: hstFactory, - [SMART_CONTRACTS.COLLECTIBLES]: collectiblesFactory, + [SMART_CONTRACTS.NFTS]: nftsFactory, [SMART_CONTRACTS.PIGGYBANK]: piggybankFactory, [SMART_CONTRACTS.FAILING]: failingContract, [SMART_CONTRACTS.MULTISIG]: multisigFactory, diff --git a/test/e2e/tests/nfts.spec.js b/test/e2e/tests/nfts.spec.js index 71fbfa19a..16623644d 100644 --- a/test/e2e/tests/nfts.spec.js +++ b/test/e2e/tests/nfts.spec.js @@ -3,8 +3,8 @@ const { convertToHexValue, withFixtures } = require('../helpers'); const { SMART_CONTRACTS } = require('../seeder/smart-contracts'); const FixtureBuilder = require('../fixture-builder'); -describe('Collectibles', function () { - const smartContract = SMART_CONTRACTS.COLLECTIBLES; +describe('NFTs', function () { + const smartContract = SMART_CONTRACTS.NFTS; const ganacheOptions = { accounts: [ { diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js index 71fd19e16..94c110e66 100644 --- a/ui/components/app/modals/contract-details-modal/contract-details-modal.js +++ b/ui/components/app/modals/contract-details-modal/contract-details-modal.js @@ -350,7 +350,7 @@ ContractDetailsModal.propTypes = { */ siteImage: PropTypes.string, /** - * The token id of the collectible + * The token id of the NFT */ tokenId: PropTypes.string, /** diff --git a/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js b/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js index f9eea46d2..c818c80f1 100644 --- a/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js +++ b/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js @@ -8,10 +8,10 @@ import { TypographyVariant } from '../../../../helpers/constants/design-system'; import withModalProps from '../../../../helpers/higher-order-components/with-modal-props'; import { useI18nContext } from '../../../../hooks/useI18nContext'; import { - ADD_COLLECTIBLE_ROUTE, + ADD_NFT_ROUTE, ASSET_ROUTE, } from '../../../../helpers/constants/routes'; -import { getCollectibles } from '../../../../ducks/metamask/metamask'; +import { getNfts } from '../../../../ducks/metamask/metamask'; import { ignoreTokens } from '../../../../store/actions'; import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-utils'; @@ -19,7 +19,7 @@ const ConvertTokenToNFTModal = ({ hideModal, tokenAddress }) => { const history = useHistory(); const t = useI18nContext(); const dispatch = useDispatch(); - const allNfts = useSelector(getCollectibles); + const allNfts = useSelector(getNfts); const tokenAddedAsNFT = allNfts.find(({ address }) => isEqualCaseInsensitive(address, tokenAddress), ); @@ -40,7 +40,7 @@ const ConvertTokenToNFTModal = ({ hideModal, tokenAddress }) => { }); } else { history.push({ - pathname: ADD_COLLECTIBLE_ROUTE, + pathname: ADD_NFT_ROUTE, state: { tokenAddress }, }); } diff --git a/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap b/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap index e126c04b7..22120e4a4 100644 --- a/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap +++ b/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap @@ -1,16 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Collectible Default Image should match snapshot with all provided props 1`] = ` +exports[`NFT Default Image should match snapshot with all provided props 1`] = `
`; -exports[`Collectible Default Image should match snapshot with missing image click handler 1`] = ` +exports[`NFT Default Image should match snapshot with missing image click handler 1`] = `
- Collectible Name + NFT Name
# @@ -40,15 +40,15 @@ exports[`Collectible Default Image should match snapshot with missing image clic
`; -exports[`Collectible Default Image should render with no props 1`] = ` +exports[`NFT Default Image should render with no props 1`] = `
[unknownCollection] diff --git a/ui/components/app/nft-default-image/index.scss b/ui/components/app/nft-default-image/index.scss index ff2ba60e1..2db0da289 100644 --- a/ui/components/app/nft-default-image/index.scss +++ b/ui/components/app/nft-default-image/index.scss @@ -1,4 +1,4 @@ -.collectible-default { +.nft-default { background-color: var(--color-background-alternative); padding-top: 100%; // retains 1:1 aspect ratio position: relative; diff --git a/ui/components/app/nft-default-image/nft-default-image.js b/ui/components/app/nft-default-image/nft-default-image.js index f0105acd9..42c4ac37f 100644 --- a/ui/components/app/nft-default-image/nft-default-image.js +++ b/ui/components/app/nft-default-image/nft-default-image.js @@ -5,43 +5,36 @@ import Typography from '../../ui/typography'; import { TypographyVariant } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; -export default function CollectibleDefaultImage({ - name, - tokenId, - handleImageClick, -}) { +export default function NftDefaultImage({ name, tokenId, handleImageClick }) { const t = useI18nContext(); const Tag = handleImageClick ? 'button' : 'div'; return ( - + {name ?? t('unknownCollection')}
#{tokenId}
); } -CollectibleDefaultImage.propTypes = { +NftDefaultImage.propTypes = { /** - * The name of the collectible collection if not supplied will default to "Unnamed collection" + * The name of the NFT collection if not supplied will default to "Unnamed collection" */ name: PropTypes.string, /** - * The token id of the collectible + * The token id of the nft */ tokenId: PropTypes.string, /** - * The click handler for the collectible default image + * The click handler for the NFT default image */ handleImageClick: PropTypes.func, }; diff --git a/ui/components/app/nft-default-image/nft-default-image.stories.js b/ui/components/app/nft-default-image/nft-default-image.stories.js index 6e840a9d5..0d1ba2f12 100644 --- a/ui/components/app/nft-default-image/nft-default-image.stories.js +++ b/ui/components/app/nft-default-image/nft-default-image.stories.js @@ -1,8 +1,8 @@ import React from 'react'; -import CollectibleDefaultImage from '.'; +import NftDefaultImage from '.'; export default { - title: 'Components/App/CollectibleDefaultImage', + title: 'Components/App/NftDefaultImage', argTypes: { name: { @@ -24,7 +24,7 @@ export default { export const DefaultStory = (args) => (
- +
); @@ -32,11 +32,11 @@ DefaultStory.storyName = 'Default'; export const HandleImageClick = (args) => (
- +
); HandleImageClick.args = { // eslint-disable-next-line no-alert - handleImageClick: () => window.alert('CollectibleDefaultImage clicked!'), + handleImageClick: () => window.alert('NftDefaultImage clicked!'), }; diff --git a/ui/components/app/nft-default-image/nft-default-image.test.js b/ui/components/app/nft-default-image/nft-default-image.test.js index 3f4973e88..a02e8cf76 100644 --- a/ui/components/app/nft-default-image/nft-default-image.test.js +++ b/ui/components/app/nft-default-image/nft-default-image.test.js @@ -1,69 +1,61 @@ import React from 'react'; import { fireEvent } from '@testing-library/react'; import { renderWithProvider } from '../../../../test/lib/render-helpers'; -import CollectibleDefaultImage from '.'; +import NftDefaultImage from '.'; -describe('Collectible Default Image', () => { +describe('NFT Default Image', () => { it('should render with no props', () => { - const { container } = renderWithProvider(); + const { container } = renderWithProvider(); expect(container).toMatchSnapshot(); }); it('should match snapshot with all provided props', () => { const props = { - name: 'Collectible Name', + name: 'NFT Name', tokenId: '123', handleImageClick: jest.fn(), }; - const { container } = renderWithProvider( - , - ); + const { container } = renderWithProvider(); expect(container).toMatchSnapshot(); }); it('should match snapshot with missing image click handler', () => { const props = { - name: 'Collectible Name', + name: 'NFT Name', tokenId: '123', }; - const { container } = renderWithProvider( - , - ); + const { container } = renderWithProvider(); expect(container).toMatchSnapshot(); }); - it('should render collectible name', () => { + it('should render NFT name', () => { const props = { - name: 'Collectible Name', + name: 'NFT Name', }; - const { queryByText } = renderWithProvider( - , - ); + const { queryByText } = renderWithProvider(); - const collectibleElement = queryByText(`${props.name} #`); + const nftElement = queryByText(`${props.name} #`); - expect(collectibleElement).toBeInTheDocument(); + expect(nftElement).toBeInTheDocument(); }); - it('should render collectible name and tokenId', () => { + it('should render NFT name and tokenId', () => { const props = { - name: 'Collectible Name', + name: 'NFT Name', tokenId: '123', }; - const { queryByText } = renderWithProvider( - , - ); + const { queryByText } = renderWithProvider(); - const collectibleElement = queryByText(`${props.name} #${props.tokenId}`); + const nftElement = queryByText(`${props.name} #${props.tokenId}`); - expect(collectibleElement).toBeInTheDocument(); + expect(nftElement).toBeInTheDocument(); }); it('should handle image click', () => { @@ -72,11 +64,11 @@ describe('Collectible Default Image', () => { }; const { queryByTestId } = renderWithProvider( - , + , ); - const collectibleImageElement = queryByTestId('collectible-default-image'); - fireEvent.click(collectibleImageElement); + const nftImageElement = queryByTestId('nft-default-image'); + fireEvent.click(nftImageElement); expect(props.handleImageClick).toHaveBeenCalled(); }); diff --git a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap index 1216f4425..86f8b372c 100644 --- a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap +++ b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Collectible Details should match minimal props and state snapshot 1`] = ` +exports[`NFT Details should match minimal props and state snapshot 1`] = `
@@ -165,10 +161,10 @@ export default function CollectibleDetails({ collectible }) { <> history.push(DEFAULT_ROUTE)} optionsButton={ - global.platform.openTab({ url: openSeaLink }) @@ -178,26 +174,26 @@ export default function CollectibleDetails({ collectible }) { /> } /> - -
+ +
{image ? ( {collectibleImageAlt} ) : ( - + )}
@@ -224,7 +220,7 @@ export default function CollectibleDetails({ collectible }) { color={TextColor.textDefault} variant={TypographyVariant.H6} fontWeight={FONT_WEIGHT.BOLD} - className="collectible-details__description" + className="nft-details__description" boxProps={{ margin: 0, marginBottom: 2 }} > {t('description')} @@ -255,14 +251,14 @@ export default function CollectibleDetails({ collectible }) { marginBottom: 4, marginRight: 2, }} - className="collectible-details__link-title" + className="nft-details__link-title" > {t('lastSold')} {t('lastPriceSold')} {t('source')} @@ -325,21 +321,21 @@ export default function CollectibleDetails({ collectible }) { margin: 0, marginBottom: 4, }} - className="collectible-details__image-source" + className="nft-details__image-source" color={ isDataURI ? TextColor.textDefault : TextColor.primaryDefault } > {isDataURI ? ( - <>{collectibleImageURL} + <>{nftImageURL} ) : ( - {collectibleImageURL} + {nftImageURL} )} @@ -355,7 +351,7 @@ export default function CollectibleDetails({ collectible }) { marginBottom: 4, marginRight: 2, }} - className="collectible-details__link-title" + className="nft-details__link-title" > {t('link')} @@ -365,7 +361,7 @@ export default function CollectibleDetails({ collectible }) { margin: 0, marginBottom: 4, }} - className="collectible-details__image-source" + className="nft-details__image-source" color={ isDataURI ? TextColor.textDefault : TextColor.primaryDefault } @@ -373,8 +369,8 @@ export default function CollectibleDetails({ collectible }) { {imageThumbnail} @@ -391,14 +387,14 @@ export default function CollectibleDetails({ collectible }) { marginBottom: 4, marginRight: 2, }} - className="collectible-details__link-title" + className="nft-details__link-title" > {t('contractAddress')} { handleAddressCopy(address); }} @@ -443,8 +439,8 @@ export default function CollectibleDetails({ collectible }) { ); } -CollectibleDetails.propTypes = { - collectible: PropTypes.shape({ +NftDetails.propTypes = { + nft: PropTypes.shape({ address: PropTypes.string.isRequired, tokenId: PropTypes.string.isRequired, isCurrentlyOwned: PropTypes.bool, diff --git a/ui/components/app/nft-details/nft-details.stories.js b/ui/components/app/nft-details/nft-details.stories.js index aecfbce7a..f1de0f684 100644 --- a/ui/components/app/nft-details/nft-details.stories.js +++ b/ui/components/app/nft-details/nft-details.stories.js @@ -1,7 +1,7 @@ import React from 'react'; -import CollectibleDetails from './nft-details'; +import NftDetails from './nft-details'; -const collectible = { +const nft = { name: 'Catnip Spicywright', tokenId: '1124157', address: '0x06012c8cf97bead5deae237070f9587f8e7a266d', @@ -16,31 +16,31 @@ const collectible = { }; export default { - title: 'Components/App/CollectiblesDetail', + title: 'Components/App/NftsDetail', argTypes: { - collectible: { + nft: { control: 'object', }, }, args: { - collectible, + nft, }, }; export const DefaultStory = (args) => { - return ; + return ; }; DefaultStory.storyName = 'Default'; export const NoImage = (args) => { - return ; + return ; }; NoImage.args = { - collectible: { - ...collectible, + nft: { + ...nft, image: undefined, }, }; diff --git a/ui/components/app/nft-details/nft-details.test.js b/ui/components/app/nft-details/nft-details.test.js index ab22f981c..07c192207 100644 --- a/ui/components/app/nft-details/nft-details.test.js +++ b/ui/components/app/nft-details/nft-details.test.js @@ -10,9 +10,9 @@ import { DEFAULT_ROUTE, SEND_ROUTE } from '../../../helpers/constants/routes'; import { AssetType } from '../../../../shared/constants/transaction'; import { removeAndIgnoreNft, - setRemoveCollectibleMessage, + setRemoveNftMessage, } from '../../../store/actions'; -import CollectibleDetails from './nft-details'; +import NftDetails from './nft-details'; jest.mock('copy-to-clipboard'); @@ -36,17 +36,17 @@ jest.mock('../../../store/actions.ts', () => ({ ...jest.requireActual('../../../store/actions.ts'), checkAndUpdateSingleNftOwnershipStatus: jest.fn().mockReturnValue(jest.fn()), removeAndIgnoreNft: jest.fn().mockReturnValue(jest.fn()), - setRemoveCollectibleMessage: jest.fn().mockReturnValue(jest.fn()), + setRemoveNftMessage: jest.fn().mockReturnValue(jest.fn()), })); -describe('Collectible Details', () => { +describe('NFT Details', () => { const mockStore = configureMockStore([thunk])(mockState); - const collectibles = + const nfts = mockState.metamask.allNftContracts[mockState.metamask.selectedAddress][5]; const props = { - collectible: collectibles[5], + nft: nfts[5], }; beforeEach(() => { @@ -55,7 +55,7 @@ describe('Collectible Details', () => { it('should match minimal props and state snapshot', () => { const { container } = renderWithProvider( - , + , mockStore, ); @@ -64,7 +64,7 @@ describe('Collectible Details', () => { it(`should route to '/' route when the back button is clicked`, () => { const { queryByTestId } = renderWithProvider( - , + , mockStore, ); @@ -75,51 +75,51 @@ describe('Collectible Details', () => { expect(mockHistoryPush).toHaveBeenCalledWith(DEFAULT_ROUTE); }); - it(`should call removeAndIgnoreNft with proper collectible details and route to '/' when removing collectible`, () => { + it(`should call removeAndIgnoreNFT with proper nft details and route to '/' when removing nft`, () => { const { queryByTestId } = renderWithProvider( - , + , mockStore, ); - const openOptionMenuButton = queryByTestId('collectible-options__button'); + const openOptionMenuButton = queryByTestId('nft-options__button'); fireEvent.click(openOptionMenuButton); - const removeCollectibleButton = queryByTestId('collectible-item-remove'); - fireEvent.click(removeCollectibleButton); + const removeNftButton = queryByTestId('nft-item-remove'); + fireEvent.click(removeNftButton); expect(removeAndIgnoreNft).toHaveBeenCalledWith( - collectibles[5].address, - collectibles[5].tokenId, + nfts[5].address, + nfts[5].tokenId, ); - expect(setRemoveCollectibleMessage).toHaveBeenCalledWith('success'); + expect(setRemoveNftMessage).toHaveBeenCalledWith('success'); expect(mockHistoryPush).toHaveBeenCalledWith(DEFAULT_ROUTE); }); - it('should copy collectible address', async () => { + it('should copy nft address', async () => { const { queryByTestId } = renderWithProvider( - , + , mockStore, ); - const copyAddressButton = queryByTestId('collectible-address-copy'); + const copyAddressButton = queryByTestId('nft-address-copy'); fireEvent.click(copyAddressButton); - expect(copyToClipboard).toHaveBeenCalledWith(collectibles[5].address); + expect(copyToClipboard).toHaveBeenCalledWith(nfts[5].address); }); it('should navigate to draft transaction send route with ERC721 data', async () => { const { queryByTestId } = renderWithProvider( - , + , mockStore, ); - const collectibleSendButton = queryByTestId('collectible-send-button'); - fireEvent.click(collectibleSendButton); + const nftSendButton = queryByTestId('nft-send-button'); + fireEvent.click(nftSendButton); await waitFor(() => { expect(startNewDraftTransaction).toHaveBeenCalledWith({ type: AssetType.NFT, - details: collectibles[5], + details: nfts[5], }); expect(mockHistoryPush).toHaveBeenCalledWith(SEND_ROUTE); @@ -127,18 +127,18 @@ describe('Collectible Details', () => { }); it('should not render send button if isCurrentlyOwned is false', () => { - const sixthCollectibleProps = { - collectible: collectibles[6], + const sixthNftProps = { + nft: nfts[6], }; - collectibles[6].isCurrentlyOwned = false; + nfts[6].isCurrentlyOwned = false; const { queryByTestId } = renderWithProvider( - , + , mockStore, ); - const collectibleSendButton = queryByTestId('collectible-send-button'); - expect(collectibleSendButton).not.toBeInTheDocument(); + const nftSendButton = queryByTestId('nft-send-button'); + expect(nftSendButton).not.toBeInTheDocument(); }); describe(`Alternative Networks' OpenSea Links`, () => { @@ -146,24 +146,24 @@ describe('Collectible Details', () => { global.platform = { openTab: jest.fn() }; const { queryByTestId } = renderWithProvider( - , + , mockStore, ); - const openOptionMenuButton = queryByTestId('collectible-options__button'); + const openOptionMenuButton = queryByTestId('nft-options__button'); fireEvent.click(openOptionMenuButton); - const openOpenSea = queryByTestId('collectible-options__view-on-opensea'); + const openOpenSea = queryByTestId('nft-options__view-on-opensea'); fireEvent.click(openOpenSea); await waitFor(() => { expect(global.platform.openTab).toHaveBeenCalledWith({ - url: `https://testnets.opensea.io/assets/${collectibles[5].address}/${collectibles[5].tokenId}`, + url: `https://testnets.opensea.io/assets/${nfts[5].address}/${nfts[5].tokenId}`, }); }); }); - it('should open tab to mainnet opensea url with collectible info', async () => { + it('should open tab to mainnet opensea url with nft info', async () => { global.platform = { openTab: jest.fn() }; const mainnetState = { @@ -178,24 +178,24 @@ describe('Collectible Details', () => { const mainnetMockStore = configureMockStore([thunk])(mainnetState); const { queryByTestId } = renderWithProvider( - , + , mainnetMockStore, ); - const openOptionMenuButton = queryByTestId('collectible-options__button'); + const openOptionMenuButton = queryByTestId('nft-options__button'); fireEvent.click(openOptionMenuButton); - const openOpenSea = queryByTestId('collectible-options__view-on-opensea'); + const openOpenSea = queryByTestId('nft-options__view-on-opensea'); fireEvent.click(openOpenSea); await waitFor(() => { expect(global.platform.openTab).toHaveBeenCalledWith({ - url: `https://opensea.io/assets/${collectibles[5].address}/${collectibles[5].tokenId}`, + url: `https://opensea.io/assets/${nfts[5].address}/${nfts[5].tokenId}`, }); }); }); - it('should open tab to polygon opensea url with collectible info', async () => { + it('should open tab to polygon opensea url with nft info', async () => { const polygonState = { ...mockState, metamask: { @@ -208,24 +208,24 @@ describe('Collectible Details', () => { const polygonMockStore = configureMockStore([thunk])(polygonState); const { queryByTestId } = renderWithProvider( - , + , polygonMockStore, ); - const openOptionMenuButton = queryByTestId('collectible-options__button'); + const openOptionMenuButton = queryByTestId('nft-options__button'); fireEvent.click(openOptionMenuButton); - const openOpenSea = queryByTestId('collectible-options__view-on-opensea'); + const openOpenSea = queryByTestId('nft-options__view-on-opensea'); fireEvent.click(openOpenSea); await waitFor(() => { expect(global.platform.openTab).toHaveBeenCalledWith({ - url: `https://opensea.io/assets/matic/${collectibles[5].address}/${collectibles[5].tokenId}`, + url: `https://opensea.io/assets/matic/${nfts[5].address}/${nfts[5].tokenId}`, }); }); }); - it('should open tab to sepolia opensea url with collectible info', async () => { + it('should open tab to sepolia opensea url with nft info', async () => { const sepoliaState = { ...mockState, metamask: { @@ -238,19 +238,19 @@ describe('Collectible Details', () => { const sepoliaMockStore = configureMockStore([thunk])(sepoliaState); const { queryByTestId } = renderWithProvider( - , + , sepoliaMockStore, ); - const openOptionMenuButton = queryByTestId('collectible-options__button'); + const openOptionMenuButton = queryByTestId('nft-options__button'); fireEvent.click(openOptionMenuButton); - const openOpenSea = queryByTestId('collectible-options__view-on-opensea'); + const openOpenSea = queryByTestId('nft-options__view-on-opensea'); fireEvent.click(openOpenSea); await waitFor(() => { expect(global.platform.openTab).toHaveBeenCalledWith({ - url: `https://testnets.opensea.io/assets/${collectibles[5].address}/${collectibles[5].tokenId}`, + url: `https://testnets.opensea.io/assets/${nfts[5].address}/${nfts[5].tokenId}`, }); }); }); @@ -270,14 +270,14 @@ describe('Collectible Details', () => { ); const { queryByTestId } = renderWithProvider( - , + , randomNetworkMockStore, ); - const openOptionMenuButton = queryByTestId('collectible-options__button'); + const openOptionMenuButton = queryByTestId('nft-options__button'); fireEvent.click(openOptionMenuButton); - const openOpenSea = queryByTestId('collectible-options__view-on-opensea'); + const openOpenSea = queryByTestId('nft-options__view-on-opensea'); await waitFor(() => { expect(openOpenSea).not.toBeInTheDocument(); }); diff --git a/ui/components/app/nft-options/index.scss b/ui/components/app/nft-options/index.scss index 479f4d5f7..8c2fbc3c0 100644 --- a/ui/components/app/nft-options/index.scss +++ b/ui/components/app/nft-options/index.scss @@ -1,4 +1,4 @@ -.collectible-options { +.nft-options { &__button { padding: 2px 0 2px 8px; } diff --git a/ui/components/app/nft-options/nft-options.js b/ui/components/app/nft-options/nft-options.js index cc48a7110..a73ec1fd6 100644 --- a/ui/components/app/nft-options/nft-options.js +++ b/ui/components/app/nft-options/nft-options.js @@ -6,34 +6,34 @@ import { Menu, MenuItem } from '../../ui/menu'; import { ButtonIcon, ICON_NAMES } from '../../component-library'; import { Color } from '../../../helpers/constants/design-system'; -const CollectibleOptions = ({ onRemove, onViewOnOpensea }) => { +const NftOptions = ({ onRemove, onViewOnOpensea }) => { const t = useContext(I18nContext); - const [collectibleOptionsOpen, setCollectibleOptionsOpen] = useState(false); + const [nftOptionsOpen, setNftOptionsOpen] = useState(false); const ref = useRef(false); return (
setCollectibleOptionsOpen(true)} + className="nft-options__button" + data-testid="nft-options__button" + onClick={() => setNftOptionsOpen(true)} color={Color.textDefault} ariaLabel={t('nftOptions')} /> - {collectibleOptionsOpen ? ( + {nftOptionsOpen ? ( setCollectibleOptionsOpen(false)} + onHide={() => setNftOptionsOpen(false)} > {onViewOnOpensea ? ( { - setCollectibleOptionsOpen(false); + setNftOptionsOpen(false); onViewOnOpensea(); }} > @@ -42,9 +42,9 @@ const CollectibleOptions = ({ onRemove, onViewOnOpensea }) => { ) : null} { - setCollectibleOptionsOpen(false); + setNftOptionsOpen(false); onRemove(); }} > @@ -56,9 +56,9 @@ const CollectibleOptions = ({ onRemove, onViewOnOpensea }) => { ); }; -CollectibleOptions.propTypes = { +NftOptions.propTypes = { onRemove: PropTypes.func.isRequired, onViewOnOpensea: PropTypes.func, }; -export default CollectibleOptions; +export default NftOptions; diff --git a/ui/components/app/nft-options/nft-options.test.js b/ui/components/app/nft-options/nft-options.test.js index e01488443..e0797eedf 100644 --- a/ui/components/app/nft-options/nft-options.test.js +++ b/ui/components/app/nft-options/nft-options.test.js @@ -1,42 +1,36 @@ import { fireEvent, waitFor } from '@testing-library/react'; import React from 'react'; import { renderWithProvider } from '../../../../test/lib/render-helpers'; -import CollectibleOptions from './nft-options'; +import NftOptions from './nft-options'; -describe('Collectible Options Component', () => { +describe('NFT Options Component', () => { const props = { onRemove: jest.fn(), onViewOnOpensea: jest.fn(), }; - it('should expand collectible options menu`', async () => { - const { queryByTestId } = renderWithProvider( - , - ); + it('should expand NFT options menu`', async () => { + const { queryByTestId } = renderWithProvider(); - const openOptionMenuButton = queryByTestId('collectible-options__button'); + const openOptionMenuButton = queryByTestId('nft-options__button'); - expect(queryByTestId('collectible-item-remove')).not.toBeInTheDocument(); + expect(queryByTestId('nft-item-remove')).not.toBeInTheDocument(); fireEvent.click(openOptionMenuButton); await waitFor(() => { - expect(queryByTestId('collectible-item-remove')).toBeInTheDocument(); + expect(queryByTestId('nft-item-remove')).toBeInTheDocument(); }); }); it('should expand and close menu options when clicked`', async () => { - const { queryByTestId } = renderWithProvider( - , - ); + const { queryByTestId } = renderWithProvider(); - const openOptionMenuButton = queryByTestId('collectible-options__button'); + const openOptionMenuButton = queryByTestId('nft-options__button'); fireEvent.click(openOptionMenuButton); - const closeOptionMenuButton = queryByTestId( - 'close-collectible-options-menu', - ); + const closeOptionMenuButton = queryByTestId('close-nft-options-menu'); fireEvent.click(closeOptionMenuButton); @@ -44,37 +38,33 @@ describe('Collectible Options Component', () => { }); it('should click onRemove handler and close option menu', () => { - const { queryByTestId } = renderWithProvider( - , - ); + const { queryByTestId } = renderWithProvider(); - const openOptionMenuButton = queryByTestId('collectible-options__button'); + const openOptionMenuButton = queryByTestId('nft-options__button'); fireEvent.click(openOptionMenuButton); - const removeCollectibleButton = queryByTestId('collectible-item-remove'); + const removeNftButton = queryByTestId('nft-item-remove'); - fireEvent.click(removeCollectibleButton); + fireEvent.click(removeNftButton); expect(props.onRemove).toHaveBeenCalled(); - expect(removeCollectibleButton).not.toBeInTheDocument(); + expect(removeNftButton).not.toBeInTheDocument(); }); it('should click onViewOnOpensea handler and close option menu', () => { - const { queryByTestId } = renderWithProvider( - , - ); + const { queryByTestId } = renderWithProvider(); - const openOptionMenuButton = queryByTestId('collectible-options__button'); - const removeCollectibleButton = queryByTestId('collectible-item-remove'); + const openOptionMenuButton = queryByTestId('nft-options__button'); + const removeNftButton = queryByTestId('nft-item-remove'); fireEvent.click(openOptionMenuButton); - const openOpenSea = queryByTestId('collectible-options__view-on-opensea'); + const openOpenSea = queryByTestId('nft-options__view-on-opensea'); fireEvent.click(openOpenSea); expect(props.onViewOnOpensea).toHaveBeenCalled(); - expect(removeCollectibleButton).not.toBeInTheDocument(); + expect(removeNftButton).not.toBeInTheDocument(); }); }); diff --git a/ui/components/app/nfts-detection-notice/index.scss b/ui/components/app/nfts-detection-notice/index.scss index 9884c38a9..95d13a24c 100644 --- a/ui/components/app/nfts-detection-notice/index.scss +++ b/ui/components/app/nfts-detection-notice/index.scss @@ -1,4 +1,4 @@ -.collectibles-detection-notice { +.nfts-detection-notice { margin: 16px 16px 0 16px; &__message { @@ -13,7 +13,7 @@ right: 8px; } - a.collectibles-detection-notice__message__link { + a.nfts-detection-notice__message__link { @include H7; width: 100%; diff --git a/ui/components/app/nfts-detection-notice/nfts-detection-notice.js b/ui/components/app/nfts-detection-notice/nfts-detection-notice.js index f51cbe029..ab7b6365a 100644 --- a/ui/components/app/nfts-detection-notice/nfts-detection-notice.js +++ b/ui/components/app/nfts-detection-notice/nfts-detection-notice.js @@ -14,13 +14,13 @@ import { useI18nContext } from '../../../hooks/useI18nContext'; import Button from '../../ui/button'; import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes'; -export default function CollectiblesDetectionNotice() { +export default function NftsDetectionNotice() { const t = useI18nContext(); const history = useHistory(); return ( - - + + {t('selectNFTPrivacyPreference')} diff --git a/ui/components/app/nfts-items/index.scss b/ui/components/app/nfts-items/index.scss index fdf1a7f83..312ebe7d4 100644 --- a/ui/components/app/nfts-items/index.scss +++ b/ui/components/app/nfts-items/index.scss @@ -1,4 +1,4 @@ -.collectibles-items { +.nfts-items { &__collection { margin-bottom: 24px; diff --git a/ui/components/app/nfts-items/nfts-items.js b/ui/components/app/nfts-items/nfts-items.js index 28cf58628..d84616820 100644 --- a/ui/components/app/nfts-items/nfts-items.js +++ b/ui/components/app/nfts-items/nfts-items.js @@ -25,13 +25,13 @@ import { } from '../../../selectors'; import { ASSET_ROUTE } from '../../../helpers/constants/routes'; import { getAssetImageURL } from '../../../helpers/utils/util'; -import { getCollectibleImageAlt } from '../../../helpers/utils/nfts'; -import { updateCollectibleDropDownState } from '../../../store/actions'; +import { getNftImageAlt } from '../../../helpers/utils/nfts'; +import { updateNftDropDownState } from '../../../store/actions'; import { usePrevious } from '../../../hooks/usePrevious'; -import { getCollectiblesDropdownState } from '../../../ducks/metamask/metamask'; +import { getNftsDropdownState } from '../../../ducks/metamask/metamask'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import CollectibleDefaultImage from '../nft-default-image'; import { Icon, ICON_NAMES } from '../../component-library'; +import NftDefaultImage from '../nft-default-image'; const width = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP @@ -40,13 +40,13 @@ const width = const PREVIOUSLY_OWNED_KEY = 'previouslyOwned'; -export default function CollectiblesItems({ +export default function NftsItems({ collections = {}, previouslyOwnedCollection = {}, }) { const dispatch = useDispatch(); const collectionsKeys = Object.keys(collections); - const collectiblesDropdownState = useSelector(getCollectiblesDropdownState); + const nftsDropdownState = useSelector(getNftsDropdownState); const previousCollectionKeys = usePrevious(collectionsKeys); const selectedAddress = useSelector(getSelectedAddress); const chainId = useSelector(getCurrentChainId); @@ -57,29 +57,29 @@ export default function CollectiblesItems({ chainId !== undefined && selectedAddress !== undefined && !isEqual(previousCollectionKeys, collectionsKeys) && - (collectiblesDropdownState?.[selectedAddress]?.[chainId] === undefined || - Object.keys(collectiblesDropdownState?.[selectedAddress]?.[chainId]) - .length === 0) + (nftsDropdownState?.[selectedAddress]?.[chainId] === undefined || + Object.keys(nftsDropdownState?.[selectedAddress]?.[chainId]).length === + 0) ) { const initState = {}; collectionsKeys.forEach((key) => { initState[key] = true; }); - const newCollectibleDropdownState = { - ...collectiblesDropdownState, + const newNftDropdownState = { + ...nftsDropdownState, [selectedAddress]: { - ...collectiblesDropdownState?.[selectedAddress], + ...nftsDropdownState?.[selectedAddress], [chainId]: initState, }, }; - dispatch(updateCollectibleDropDownState(newCollectibleDropdownState)); + dispatch(updateNftDropDownState(newNftDropdownState)); } }, [ collectionsKeys, previousCollectionKeys, - collectiblesDropdownState, + nftsDropdownState, selectedAddress, chainId, dispatch, @@ -94,51 +94,44 @@ export default function CollectiblesItems({ {collectionName} ); } return ( -
+
{collectionName?.[0]?.toUpperCase() ?? null}
); }; - const updateCollectibleDropDownStateKey = (key, isExpanded) => { - const currentAccountCollectibleDropdownState = - collectiblesDropdownState[selectedAddress][chainId]; + const updateNftDropDownStateKey = (key, isExpanded) => { + const currentAccountNftDropdownState = + nftsDropdownState[selectedAddress][chainId]; const newCurrentAccountState = { - ...currentAccountCollectibleDropdownState, + ...currentAccountNftDropdownState, [key]: !isExpanded, }; - collectiblesDropdownState[selectedAddress][chainId] = - newCurrentAccountState; + nftsDropdownState[selectedAddress][chainId] = newCurrentAccountState; - dispatch(updateCollectibleDropDownState(collectiblesDropdownState)); + dispatch(updateNftDropDownState(nftsDropdownState)); }; - const renderCollection = ({ - collectibles, - collectionName, - collectionImage, - key, - }) => { - if (!collectibles.length) { + const renderCollection = ({ nfts, collectionName, collectionImage, key }) => { + if (!nfts.length) { return null; } - const isExpanded = - collectiblesDropdownState[selectedAddress]?.[chainId]?.[key]; + const isExpanded = nftsDropdownState[selectedAddress]?.[chainId]?.[key]; return ( -
+
) : ( - +
<> {collectionsKeys.map((key) => { - const { collectibles, collectionName, collectionImage } = - collections[key]; + const { nfts, collectionName, collectionImage } = collections[key]; return renderCollection({ - collectibles, + nfts, collectionName, collectionImage, key, @@ -251,9 +240,9 @@ export default function CollectiblesItems({ }); })} {renderCollection({ - collectibles: previouslyOwnedCollection.collectibles, + nfts: previouslyOwnedCollection.nfts, collectionName: previouslyOwnedCollection.collectionName, - collectionImage: previouslyOwnedCollection.collectibles[0]?.image, + collectionImage: previouslyOwnedCollection.nfts[0]?.image, isPreviouslyOwnedCollection: true, key: PREVIOUSLY_OWNED_KEY, })} @@ -263,9 +252,9 @@ export default function CollectiblesItems({ ); } -CollectiblesItems.propTypes = { +NftsItems.propTypes = { previouslyOwnedCollection: PropTypes.shape({ - collectibles: PropTypes.arrayOf( + nfts: PropTypes.arrayOf( PropTypes.shape({ address: PropTypes.string.isRequired, tokenId: PropTypes.string.isRequired, @@ -286,7 +275,7 @@ CollectiblesItems.propTypes = { collectionImage: PropTypes.string, }), collections: PropTypes.shape({ - collectibles: PropTypes.arrayOf( + nfts: PropTypes.arrayOf( PropTypes.shape({ address: PropTypes.string.isRequired, tokenId: PropTypes.string.isRequired, diff --git a/ui/components/app/nfts-items/nfts-items.test.js b/ui/components/app/nfts-items/nfts-items.test.js index 8758f602a..a36dfccca 100644 --- a/ui/components/app/nfts-items/nfts-items.test.js +++ b/ui/components/app/nfts-items/nfts-items.test.js @@ -4,8 +4,8 @@ import configureMockStore from 'redux-mock-store'; import thunk from 'redux-thunk'; import mockState from '../../../../test/data/mock-state.json'; import { renderWithProvider } from '../../../../test/lib/render-helpers'; -import { updateCollectibleDropDownState } from '../../../store/actions'; -import CollectiblesItems from '.'; +import { updateNftDropDownState } from '../../../store/actions'; +import NftsItems from '.'; const mockHistoryPush = jest.fn(); @@ -19,30 +19,30 @@ jest.mock('react-router-dom', () => ({ jest.mock('../../../store/actions.ts', () => ({ ...jest.requireActual('../../../store/actions.ts'), - updateCollectibleDropDownState: jest.fn().mockReturnValue(jest.fn()), + updateNftDropDownState: jest.fn().mockReturnValue(jest.fn()), })); -describe('Collectibles Item Component', () => { - const collectibles = +describe('NFTs Item Component', () => { + const nfts = mockState.metamask.allNftContracts[mockState.metamask.selectedAddress][5]; const props = { collections: { '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': { - collectibles, + nfts, collectionImage: '', - collectionName: 'Collectible Collection', + collectionName: 'NFT Collection', }, }, previouslyOwnedCollection: { - collectibles: [], + nfts: [], }, }; const mockStore = configureMockStore([thunk])(mockState); - it('should expand collectible collection showing individual collectibles', async () => { + it('should expand NFT collection showing individual NFTs', async () => { const { queryByTestId, queryAllByTestId, rerender } = renderWithProvider( - , + , mockStore, ); @@ -50,11 +50,11 @@ describe('Collectibles Item Component', () => { 'collection-expander-button', ); - expect(queryAllByTestId('collectible-wrapper')).toHaveLength(0); + expect(queryAllByTestId('nft-wrapper')).toHaveLength(0); fireEvent.click(collectionExpanderButton); - expect(updateCollectibleDropDownState).toHaveBeenCalledWith({ + expect(updateNftDropDownState).toHaveBeenCalledWith({ '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': { '0x5': { '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': true, @@ -63,24 +63,24 @@ describe('Collectibles Item Component', () => { }, }); - rerender(, mockStore); + rerender(, mockStore); - expect(queryAllByTestId('collectible-wrapper')).toHaveLength(8); + expect(queryAllByTestId('nft-wrapper')).toHaveLength(8); }); - it('should collectible click image', () => { + it('should NFT click image', () => { const { queryAllByTestId } = renderWithProvider( - , + , mockStore, ); - const collectibleImages = queryAllByTestId('collectible-image'); + const nftImages = queryAllByTestId('nft-image'); - fireEvent.click(collectibleImages[0]); + fireEvent.click(nftImages[0]); - const firstCollectible = collectibles[0]; - const collectibleRoute = `/asset/${firstCollectible.address}/${firstCollectible.tokenId}`; + const firstNft = nfts[0]; + const nftRoute = `/asset/${firstNft.address}/${firstNft.tokenId}`; - expect(mockHistoryPush).toHaveBeenCalledWith(collectibleRoute); + expect(mockHistoryPush).toHaveBeenCalledWith(nftRoute); }); }); diff --git a/ui/components/app/nfts-tab/index.scss b/ui/components/app/nfts-tab/index.scss index 1e52ecb27..d6104ea12 100644 --- a/ui/components/app/nfts-tab/index.scss +++ b/ui/components/app/nfts-tab/index.scss @@ -1,4 +1,4 @@ -.collectibles-tab { +.nfts-tab { &__link { a { padding: 4px; diff --git a/ui/components/app/nfts-tab/nfts-tab.js b/ui/components/app/nfts-tab/nfts-tab.js index 79b303d09..15a42814b 100644 --- a/ui/components/app/nfts-tab/nfts-tab.js +++ b/ui/components/app/nfts-tab/nfts-tab.js @@ -5,8 +5,8 @@ import { useHistory } from 'react-router-dom'; import Box from '../../ui/box'; import Button from '../../ui/button'; import Typography from '../../ui/typography/typography'; -import CollectiblesDetectionNotice from '../nfts-detection-notice'; -import CollectiblesItems from '../nfts-items'; +import NftsDetectionNotice from '../nfts-detection-notice'; +import NftsItems from '../nfts-items'; import { TypographyVariant, TEXT_ALIGN, @@ -23,18 +23,18 @@ import { checkAndUpdateAllNftsOwnershipStatus, detectNfts, } from '../../../store/actions'; -import { useCollectiblesCollections } from '../../../hooks/useNftsCollections'; +import { useNftsCollections } from '../../../hooks/useNftsCollections'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; -export default function CollectiblesTab({ onAddNFT }) { +export default function NftsTab({ onAddNFT }) { const useNftDetection = useSelector(getUseNftDetection); const isMainnet = useSelector(getIsMainnet); const history = useHistory(); const t = useI18nContext(); const dispatch = useDispatch(); - const { collectiblesLoading, collections, previouslyOwnedCollection } = - useCollectiblesCollections(); + const { nftsLoading, collections, previouslyOwnedCollection } = + useNftsCollections(); const onEnableAutoDetect = () => { history.push(EXPERIMENTAL_ROUTE); @@ -47,23 +47,21 @@ export default function CollectiblesTab({ onAddNFT }) { checkAndUpdateAllNftsOwnershipStatus(); }; - if (collectiblesLoading) { - return
{t('loadingNFTs')}
; + if (nftsLoading) { + return
{t('loadingNFTs')}
; } return ( - + {Object.keys(collections).length > 0 || - previouslyOwnedCollection.collectibles.length > 0 ? ( - 0 ? ( + ) : ( <> - {isMainnet && !useNftDetection ? ( - - ) : null} + {isMainnet && !useNftDetection ? : null} @@ -73,7 +71,7 @@ export default function CollectiblesTab({ onAddNFT }) { marginBottom={12} justifyContent={JustifyContent.center} flexDirection={FLEX_DIRECTION.COLUMN} - className="collectibles-tab__link" + className="nfts-tab__link" > {isMainnet && !useNftDetection ? ( @@ -138,7 +136,7 @@ export default function CollectiblesTab({ onAddNFT }) { )}
) @@ -191,13 +186,13 @@ export default class SendAssetRow extends Component { const { accounts, selectedAddress, nativeCurrency, nativeCurrencyImage } = this.props; - const { sendableTokens, sendableCollectibles } = this.state; + const { sendableTokens, sendableNfts } = this.state; const balanceValue = accounts[selectedAddress] ? accounts[selectedAddress].balance : ''; - const sendableAssets = [...sendableTokens, ...sendableCollectibles]; + const sendableAssets = [...sendableTokens, ...sendableNfts]; return (
collection.address === address, ); return (
this.selectToken(AssetType.NFT, collectible)} + onClick={() => this.selectToken(AssetType.NFT, nft)} >
- {collectibleCollection.name || name} + {nftCollection.name || name}
diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js index 8bc7563e3..63c579c57 100644 --- a/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js +++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.container.js @@ -1,7 +1,7 @@ import { connect } from 'react-redux'; import { - getCollectibleContracts, - getCollectibles, + getNftContracts, + getNfts, getNativeCurrency, } from '../../../../ducks/metamask/metamask'; import { @@ -15,8 +15,8 @@ function mapStateToProps(state) { return { tokens: state.metamask.tokens, selectedAddress: state.metamask.selectedAddress, - collectibles: getCollectibles(state), - collections: getCollectibleContracts(state), + nfts: getNfts(state), + collections: getNftContracts(state), sendAsset: getSendAsset(state), accounts: getMetaMaskAccounts(state), nativeCurrency: getNativeCurrency(state), diff --git a/ui/pages/send/send.constants.js b/ui/pages/send/send.constants.js index a93828ddd..ed1fc34b5 100644 --- a/ui/pages/send/send.constants.js +++ b/ui/pages/send/send.constants.js @@ -22,7 +22,7 @@ const MIN_GAS_TOTAL = new Numeric(MIN_GAS_LIMIT_HEX, 16) .toPrefixedHexString(); const TOKEN_TRANSFER_FUNCTION_SIGNATURE = '0xa9059cbb'; -const COLLECTIBLE_TRANSFER_FROM_FUNCTION_SIGNATURE = '0x23b872dd'; +const NFT_TRANSFER_FROM_FUNCTION_SIGNATURE = '0x23b872dd'; const INSUFFICIENT_FUNDS_ERROR = 'insufficientFunds'; const INSUFFICIENT_FUNDS_FOR_GAS_ERROR = 'insufficientFundsForGas'; @@ -72,6 +72,6 @@ export { REQUIRED_ERROR, CONFUSING_ENS_ERROR, TOKEN_TRANSFER_FUNCTION_SIGNATURE, - COLLECTIBLE_TRANSFER_FROM_FUNCTION_SIGNATURE, + NFT_TRANSFER_FROM_FUNCTION_SIGNATURE, RECIPIENT_TYPES, }; diff --git a/ui/pages/send/send.utils.js b/ui/pages/send/send.utils.js index 4463fd9b3..a6cf3057d 100644 --- a/ui/pages/send/send.utils.js +++ b/ui/pages/send/send.utils.js @@ -5,7 +5,7 @@ import { TokenStandard } from '../../../shared/constants/transaction'; import { Numeric } from '../../../shared/modules/Numeric'; import { TOKEN_TRANSFER_FUNCTION_SIGNATURE, - COLLECTIBLE_TRANSFER_FROM_FUNCTION_SIGNATURE, + NFT_TRANSFER_FROM_FUNCTION_SIGNATURE, } from './send.constants'; export { @@ -100,7 +100,7 @@ function generateERC721TransferData({ return undefined; } return ( - COLLECTIBLE_TRANSFER_FROM_FUNCTION_SIGNATURE + + NFT_TRANSFER_FROM_FUNCTION_SIGNATURE + Array.prototype.map .call( abi.rawEncode( diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index b7b08ffe9..706195f22 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -1152,11 +1152,11 @@ export function doesAddressRequireLedgerHidConnection(state, address) { ); } -export function getNewCollectibleAddedMessage(state) { +export function getNewNftAddedMessage(state) { return state.appState.newNftAddedMessage; } -export function getRemoveCollectibleMessage(state) { +export function getRemoveNftMessage(state) { return state.appState.removeNftMessage; } diff --git a/ui/store/actionConstants.ts b/ui/store/actionConstants.ts index d88825ba2..38425341b 100644 --- a/ui/store/actionConstants.ts +++ b/ui/store/actionConstants.ts @@ -78,9 +78,8 @@ export const SET_FIRST_TIME_FLOW_TYPE = 'SET_FIRST_TIME_FLOW_TYPE'; export const SET_SELECTED_SETTINGS_RPC_URL = 'SET_SELECTED_SETTINGS_RPC_URL'; export const SET_NEW_NETWORK_ADDED = 'SET_NEW_NETWORK_ADDED'; -export const SET_NEW_COLLECTIBLE_ADDED_MESSAGE = - 'SET_NEW_COLLECTIBLE_ADDED_MESSAGE'; -export const SET_REMOVE_COLLECTIBLE_MESSAGE = 'SET_REMOVE_COLLECTIBLE_MESSAGE'; +export const SET_NEW_NFT_ADDED_MESSAGE = 'SET_NEW_NFT_ADDED_MESSAGE'; +export const SET_REMOVE_NFT_MESSAGE = 'SET_REMOVE_NFT_MESSAGE'; export const SET_NEW_CUSTOM_NETWORK_ADDED = 'SET_NEW_CUSTOM_NETWORK_ADDED'; export const LOADING_METHOD_DATA_STARTED = 'LOADING_METHOD_DATA_STARTED'; diff --git a/ui/store/actions.ts b/ui/store/actions.ts index ea54485c2..7e1056171 100644 --- a/ui/store/actions.ts +++ b/ui/store/actions.ts @@ -2103,10 +2103,10 @@ export function addNft( ): ThunkAction { return async (dispatch) => { if (!address) { - throw new Error('MetaMask - Cannot add collectible without address'); + throw new Error('MetaMask - Cannot add NFT without address'); } if (!tokenID) { - throw new Error('MetaMask - Cannot add collectible without tokenID'); + throw new Error('MetaMask - Cannot add NFT without tokenID'); } if (!dontShowLoadingIndicator) { dispatch(showLoadingIndication()); @@ -2130,10 +2130,10 @@ export function addNftVerifyOwnership( ): ThunkAction { return async (dispatch) => { if (!address) { - throw new Error('MetaMask - Cannot add collectible without address'); + throw new Error('MetaMask - Cannot add NFT without address'); } if (!tokenID) { - throw new Error('MetaMask - Cannot add collectible without tokenID'); + throw new Error('MetaMask - Cannot add NFT without tokenID'); } if (!dontShowLoadingIndicator) { dispatch(showLoadingIndication()); @@ -2168,10 +2168,10 @@ export function removeAndIgnoreNft( ): ThunkAction { return async (dispatch) => { if (!address) { - throw new Error('MetaMask - Cannot ignore collectible without address'); + throw new Error('MetaMask - Cannot ignore NFT without address'); } if (!tokenID) { - throw new Error('MetaMask - Cannot ignore collectible without tokenID'); + throw new Error('MetaMask - Cannot ignore NFT without tokenID'); } if (!dontShowLoadingIndicator) { dispatch(showLoadingIndication()); @@ -2195,10 +2195,10 @@ export function removeNft( ): ThunkAction { return async (dispatch) => { if (!address) { - throw new Error('MetaMask - Cannot remove collectible without address'); + throw new Error('MetaMask - Cannot remove NFT without address'); } if (!tokenID) { - throw new Error('MetaMask - Cannot remove collectible without tokenID'); + throw new Error('MetaMask - Cannot remove NFT without tokenID'); } if (!dontShowLoadingIndicator) { dispatch(showLoadingIndication()); @@ -2221,13 +2221,13 @@ export async function checkAndUpdateAllNftsOwnershipStatus() { export async function isNftOwner( ownerAddress: string, - collectibleAddress: string, - collectibleId: string, + nftAddress: string, + nftId: string, ): Promise { return await submitRequestToBackground('isNftOwner', [ ownerAddress, - collectibleAddress, - collectibleId, + nftAddress, + nftId, ]); } @@ -2672,19 +2672,19 @@ export function hideAlert(): Action { /** * TODO: this should be moved somewhere else when it makese sense to do so */ -interface CollectibleDropDownState { +interface NftDropDownState { [address: string]: { [chainId: string]: { - [collectibleAddress: string]: boolean; + [nftAddress: string]: boolean; }; }; } -export function updateCollectibleDropDownState( - value: CollectibleDropDownState, +export function updateNftDropDownState( + value: NftDropDownState, ): ThunkAction { return async (dispatch) => { - await submitRequestToBackground('updateCollectibleDropDownState', [value]); + await submitRequestToBackground('updateNftDropDownState', [value]); await forceUpdateMetamaskState(dispatch); }; } @@ -3775,20 +3775,20 @@ export function setNewNetworkAdded( }; } -export function setNewCollectibleAddedMessage( +export function setNewNftAddedMessage( newNftAddedMessage: string, ): PayloadAction { return { - type: actionConstants.SET_NEW_COLLECTIBLE_ADDED_MESSAGE, + type: actionConstants.SET_NEW_NFT_ADDED_MESSAGE, payload: newNftAddedMessage, }; } -export function setRemoveCollectibleMessage( +export function setRemoveNftMessage( removeNftMessage: string, ): PayloadAction { return { - type: actionConstants.SET_REMOVE_COLLECTIBLE_MESSAGE, + type: actionConstants.SET_REMOVE_NFT_MESSAGE, payload: removeNftMessage, }; }