converted collectibles files to nfts (#17658)

* converted collectibles files to nfts

* updated relative import for scss

* updated scss for pages

development/ts-migration-dashboard/files-to-convert.json

@@ -397,19 +397,19 @@
   "ui/components/app/cancel-speedup-popover/cancel-speedup-popover.js",
   "ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js",
   "ui/components/app/cancel-speedup-popover/index.js",
-  "ui/components/app/collectible-default-image/collectible-default-image.js",
+  "ui/components/app/nft-default-image/nft-default-image.js",
-  "ui/components/app/collectible-default-image/collectible-default-image.stories.js",
+  "ui/components/app/nft-default-image/nft-default-image.stories.js",
-  "ui/components/app/collectible-default-image/index.js",
+  "ui/components/app/nft-default-image/index.js",
-  "ui/components/app/collectible-details/collectible-details.js",
+  "ui/components/app/nft-details/nft-details.js",
-  "ui/components/app/collectible-details/collectible-details.stories.js",
+  "ui/components/app/nft-details/nft-details.stories.js",
-  "ui/components/app/collectible-options/collectible-options.js",
+  "ui/components/app/nft-options/nft-options.js",
-  "ui/components/app/collectibles-detection-notice/collectibles-detection-notice.js",
+  "ui/components/app/nfts-detection-notice/nfts-detection-notice.js",
-  "ui/components/app/collectibles-detection-notice/index.js",
+  "ui/components/app/nfts-detection-notice/index.js",
-  "ui/components/app/collectibles-items/collectibles-items.js",
+  "ui/components/app/nfts-items/nfts-items.js",
-  "ui/components/app/collectibles-items/index.js",
+  "ui/components/app/nfts-items/index.js",
-  "ui/components/app/collectibles-tab/collectibles-tab.js",
+  "ui/components/app/nfts-tab/nfts-tab.js",
-  "ui/components/app/collectibles-tab/collectibles-tab.test.js",
+  "ui/components/app/nfts-tab/nfts-tab.test.js",
-  "ui/components/app/collectibles-tab/index.js",
+  "ui/components/app/nfts-tab/index.js",
   "ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.js",
   "ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.test.js",
   "ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.stories.js",
@@ -1192,9 +1192,9 @@
   "ui/hooks/useUserPreferencedCurrency.test.js",
   "ui/index.js",
   "ui/index.test.js",
-  "ui/pages/add-collectible/add-collectible.js",
+  "ui/pages/add-nft/add-nft.js",
-  "ui/pages/add-collectible/add-collectible.test.js",
+  "ui/pages/add-nft/add-nft.test.js",
-  "ui/pages/add-collectible/index.js",
+  "ui/pages/add-nft/index.js",
   "ui/pages/asset/asset.js",
   "ui/pages/asset/components/asset-breadcrumb.js",
   "ui/pages/asset/components/asset-navigation.js",

ui/components/app/app-components.scss

@@ -13,12 +13,12 @@
 @import 'cancel-speedup-popover/index';
 @import 'confirm-page-container/index';
 @import 'confirmation-warning-modal/index';
-@import 'collectibles-items/index';
+@import 'nfts-items/index';
-@import 'collectibles-tab/index';
+@import 'nfts-tab/index';
-@import 'collectible-details/index';
+@import 'nft-details/index';
-@import 'collectible-default-image/index';
+@import 'nft-default-image/index';
-@import 'collectible-options/index';
+@import 'nft-options/index';
-@import 'collectibles-detection-notice/index';
+@import 'nfts-detection-notice/index';
 @import 'connected-accounts-list/index';
 @import 'connected-accounts-permissions/index';
 @import 'connected-sites-list/index';

ui/components/app/collectible-default-image/index.js

@@ -1 +0,0 @@
-export { default } from './collectible-default-image';

ui/components/app/collectibles-detection-notice/index.js

@@ -1 +0,0 @@
-export { default } from './collectibles-detection-notice';

ui/components/app/collectibles-items/index.js

@@ -1 +0,0 @@
-export { default } from './collectibles-items';

ui/components/app/collectibles-tab/index.js

@@ -1 +0,0 @@
-export { default } from './collectibles-tab';

ui/components/app/nft-default-image/index.js

@@ -0,0 +1 @@
+export { default } from './nft-default-image';

ui/components/app/nft-details/nft-details.js

@@ -23,7 +23,7 @@ import {
   getAssetImageURL,
   shortenAddress,
 } from '../../../helpers/utils/util';
-import { getCollectibleImageAlt } from '../../../helpers/utils/collectibles';
+import { getCollectibleImageAlt } from '../../../helpers/utils/nfts';
 import {
   getCurrentChainId,
   getIpfsGateway,
@@ -40,7 +40,7 @@ import {
 import { CHAIN_IDS } from '../../../../shared/constants/network';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
-import CollectibleOptions from '../collectible-options/collectible-options';
+import CollectibleOptions from '../nft-options/nft-options';
 import Button from '../../ui/button';
 import { startNewDraftTransaction } from '../../../ducks/send';
 import InfoTooltip from '../../ui/info-tooltip';
@@ -51,7 +51,7 @@ import {
   AssetType,
   TokenStandard,
 } from '../../../../shared/constants/transaction';
-import CollectibleDefaultImage from '../collectible-default-image';
+import CollectibleDefaultImage from '../nft-default-image';
 import { ButtonIcon, ICON_NAMES } from '../../component-library';
 import Tooltip from '../../ui/tooltip';
 

ui/components/app/nft-details/nft-details.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CollectibleDetails from './collectible-details';
+import CollectibleDetails from './nft-details';
 
 const collectible = {
   name: 'Catnip Spicywright',

ui/components/app/nft-details/nft-details.test.js

@@ -12,7 +12,7 @@ import {
   removeAndIgnoreNft,
   setRemoveCollectibleMessage,
 } from '../../../store/actions';
-import CollectibleDetails from './collectible-details';
+import CollectibleDetails from './nft-details';
 
 jest.mock('copy-to-clipboard');
 

ui/components/app/nft-options/nft-options.test.js

@@ -1,7 +1,7 @@
 import { fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
-import CollectibleOptions from './collectible-options';
+import CollectibleOptions from './nft-options';
 
 describe('Collectible Options Component', () => {
   const props = {

ui/components/app/nfts-detection-notice/index.js

@@ -0,0 +1 @@
+export { default } from './nfts-detection-notice';

ui/components/app/nfts-items/index.js

@@ -0,0 +1 @@
+export { default } from './nfts-items';

ui/components/app/nfts-items/nfts-items.js

@@ -25,12 +25,12 @@ import {
 } from '../../../selectors';
 import { ASSET_ROUTE } from '../../../helpers/constants/routes';
 import { getAssetImageURL } from '../../../helpers/utils/util';
-import { getCollectibleImageAlt } from '../../../helpers/utils/collectibles';
+import { getCollectibleImageAlt } from '../../../helpers/utils/nfts';
 import { updateCollectibleDropDownState } from '../../../store/actions';
 import { usePrevious } from '../../../hooks/usePrevious';
 import { getCollectiblesDropdownState } from '../../../ducks/metamask/metamask';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import CollectibleDefaultImage from '../collectible-default-image';
+import CollectibleDefaultImage from '../nft-default-image';
 
 const width =
   getEnvironmentType() === ENVIRONMENT_TYPE_POPUP

ui/components/app/nfts-tab/index.js

@@ -0,0 +1 @@
+export { default } from './nfts-tab';

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 '../collectibles-detection-notice';
+import CollectiblesDetectionNotice from '../nfts-detection-notice';
-import CollectiblesItems from '../collectibles-items';
+import CollectiblesItems from '../nfts-items';
 import {
   TypographyVariant,
   TEXT_ALIGN,
@@ -23,7 +23,7 @@ import {
   checkAndUpdateAllNftsOwnershipStatus,
   detectNfts,
 } from '../../../store/actions';
-import { useCollectiblesCollections } from '../../../hooks/useCollectiblesCollections';
+import { useCollectiblesCollections } from '../../../hooks/useNftsCollections';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 
 export default function CollectiblesTab({ onAddNFT }) {

ui/components/ui/nft-collection-image/nft-collection-image.js

@@ -5,7 +5,7 @@ import Box from '../box';
 import { Color, TEXT_ALIGN } from '../../../helpers/constants/design-system';
 import Identicon from '../identicon';
 import { getTokenList } from '../../../selectors';
-import { useCollectiblesCollections } from '../../../hooks/useCollectiblesCollections';
+import { useCollectiblesCollections } from '../../../hooks/useNftsCollections';
 
 export default function NftCollectionImage({ assetName, tokenAddress }) {
   const { collections } = useCollectiblesCollections();

ui/helpers/utils/nfts.test.js

@@ -1,4 +1,4 @@
-import { getCollectibleImageAlt } from './collectibles';
+import { getCollectibleImageAlt } from './nfts';
 
 describe('Collectibles Utils', () => {
   describe('getCollectibleImageAlt', () => {

ui/pages/add-collectible/index.js

@@ -1 +0,0 @@
-export { default } from './add-collectible';

ui/pages/add-nft/add-nft.js

@@ -29,7 +29,7 @@ import {
   getUseNftDetection,
 } from '../../selectors';
 import { getCollectiblesDropdownState } from '../../ducks/metamask/metamask';
-import CollectiblesDetectionNotice from '../../components/app/collectibles-detection-notice';
+import CollectiblesDetectionNotice from '../../components/app/nfts-detection-notice';
 import { MetaMetricsContext } from '../../contexts/metametrics';
 import { AssetType } from '../../../shared/constants/transaction';
 import { EVENT, EVENT_NAMES } from '../../../shared/constants/metametrics';

ui/pages/add-nft/index.js

@@ -0,0 +1 @@
+export { default } from './add-nft';

ui/pages/asset/asset.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { Redirect, useParams } from 'react-router-dom';
 import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
-import CollectibleDetails from '../../components/app/collectible-details/collectible-details';
+import CollectibleDetails from '../../components/app/nft-details/nft-details';
 import { getCollectibles, getTokens } from '../../ducks/metamask/metamask';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 

ui/pages/home/home.component.js

@@ -7,7 +7,7 @@ import {
   CONTEXT_PROPS,
 } from '../../../shared/constants/metametrics';
 import AssetList from '../../components/app/asset-list';
-import CollectiblesTab from '../../components/app/collectibles-tab';
+import CollectiblesTab from '../../components/app/nfts-tab';
 import HomeNotification from '../../components/app/home-notification';
 import MultipleNotifications from '../../components/app/multiple-notifications';
 import TransactionList from '../../components/app/transaction-list';

ui/pages/pages.scss

@@ -1,5 +1,5 @@
 /** Please import your files in alphabetical order **/
-@import 'add-collectible/index';
+@import 'add-nft/index';
 @import 'import-token/index';
 @import 'asset/asset';
 @import 'confirm-import-token/index';

ui/pages/routes/routes.component.js

@@ -17,7 +17,7 @@ import RestoreVaultPage from '../keychains/restore-vault';
 import RevealSeedConfirmation from '../keychains/reveal-seed';
 import MobileSyncPage from '../mobile-sync';
 import ImportTokenPage from '../import-token';
-import AddCollectiblePage from '../add-collectible';
+import AddCollectiblePage from '../add-nft';
 import ConfirmImportTokenPage from '../confirm-import-token';
 import ConfirmAddSuggestedTokenPage from '../confirm-add-suggested-token';
 import CreateAccountPage from '../create-account';