From f087e501a15c90f72fa51a5a331071cc9f8fb840 Mon Sep 17 00:00:00 2001
From: Alex Donesky <adonesky@gmail.com>
Date: Wed, 19 Jan 2022 12:42:41 -0600
Subject: [PATCH] Add modal with directions to re-add token as NFT (#13291)

* Add modal pop for NFTs previously added as tokens - with directions to re-add as NFTs
---
 app/_locales/el/messages.json                 |  3 -
 app/_locales/en/messages.json                 | 20 ++++-
 app/_locales/fr/messages.json                 |  3 -
 app/_locales/hi/messages.json                 |  3 -
 app/_locales/id/messages.json                 |  3 -
 app/_locales/ja/messages.json                 |  3 -
 app/_locales/ko/messages.json                 |  3 -
 app/_locales/ru/messages.json                 |  3 -
 app/_locales/tl/messages.json                 |  3 -
 app/_locales/tr/messages.json                 |  3 -
 app/_locales/vi/messages.json                 |  3 -
 app/_locales/zh_CN/messages.json              |  3 -
 .../app/asset-list-item/asset-list-item.js    | 30 ++++---
 .../collectibles-detection-notice.js          |  2 +-
 .../collectibles-detection-notice/index.scss  |  2 +-
 .../convert-token-to-nft-modal.js             | 46 ++++++++++
 .../convert-token-to-nft-modal/index.scss     |  4 +
 ui/components/app/modals/index.scss           |  1 +
 ui/components/app/modals/modal.js             | 14 +++
 .../app/wallet-overview/token-overview.js     | 36 ++++++--
 .../wallet-overview/token-overview.test.js    | 74 +++++++++++++++
 ui/components/ui/form-field/form-field.js     |  7 ++
 .../ui/form-field/form-field.stories.js       |  1 +
 .../numeric-input/numeric-input.component.js  |  3 +
 ui/ducks/send/send.js                         | 90 ++++++++++++-------
 ui/ducks/send/send.test.js                    | 67 +++++++++++---
 ui/helpers/constants/common.js                |  1 +
 ui/helpers/constants/error-keys.js            |  1 +
 ui/hooks/gasFeeInput/test-utils.js            |  8 ++
 ui/pages/add-collectible/add-collectible.js   | 57 ++++++++----
 ui/pages/asset/asset.js                       |  2 +-
 .../import-token/import-token.component.js    |  2 +-
 .../send-content/send-content.component.js    |  3 +
 .../send-content/send-content.container.js    |  2 +
 34 files changed, 383 insertions(+), 123 deletions(-)
 create mode 100644 ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js
 create mode 100644 ui/components/app/modals/convert-token-to-nft-modal/index.scss
 create mode 100644 ui/components/app/wallet-overview/token-overview.test.js

diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json
index bc842087e..4c308c91b 100644
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@@ -1306,9 +1306,6 @@
   "history": {
     "message": "Ιστορικό"
   },
-  "id": {
-    "message": "Αναγνωριστικό"
-  },
   "import": {
     "message": "Εισαγωγή",
     "description": "Button to import an account from a selected file"
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index b70a85694..44fa92710 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -596,6 +596,9 @@
   "contractInteraction": {
     "message": "Contract Interaction"
   },
+  "convertTokenToNFTDescription": {
+    "message": "We've detected that this asset is an NFT. Metamask now has full native support for NFTs. Would you like to remove it from your token list and add it as an NFT?"
+  },
   "copiedExclamation": {
     "message": "Copied!"
   },
@@ -1367,9 +1370,6 @@
   "history": {
     "message": "History"
   },
-  "id": {
-    "message": "ID"
-  },
   "import": {
     "message": "Import",
     "description": "Button to import an account from a selected file"
@@ -1406,9 +1406,15 @@
   "importNFT": {
     "message": "Import NFT"
   },
+  "importNFTAddressToolTip": {
+    "message": "On OpenSea, for example, on the NFT's page under Details, there is a blue hyperlinked value labeled 'Contract Address'. If you click on this, it will take you to the contract's address on Etherscan; at the top-left of that page, there should be an icon labeled 'Contract', and to the right, a long string of letters and numbers. This is the address of the contract that created your NFT. Click on the 'copy' icon to the right of the address, and you'll have it on your clipboard."
+  },
   "importNFTPage": {
     "message": "Import NFT page"
   },
+  "importNFTTokenIdToolTip": {
+    "message": "A collectible's ID is a unique identifier since no two NFTs are alike. Again, on OpenSea this number is under 'Details'. Make a note of it, or copy it onto your clipboard."
+  },
   "importNFTs": {
     "message": "Import NFTs"
   },
@@ -1462,6 +1468,9 @@
   "invalidAddressRecipientNotEthNetwork": {
     "message": "Not ETH network, set to lowercase"
   },
+  "invalidAssetType": {
+    "message": "This asset is an NFT and needs to be re-added on the Import NFTs page found under the NFTs tab"
+  },
   "invalidBlockExplorerURL": {
     "message": "Invalid Block Explorer URL"
   },
@@ -1914,7 +1923,7 @@
     "description": "The next nonce according to MetaMask's internal logic"
   },
   "nftTokenIdPlaceholder": {
-    "message": "Enter the collectible ID"
+    "message": "Enter the Token ID"
   },
   "nfts": {
     "message": "NFTs"
@@ -3531,6 +3540,9 @@
     "message": "$1 of $2 pending",
     "description": "$1 and $2 are intended to be two numbers, where $2 is a total number of pending confirmations, and $1 is a count towards that total"
   },
+  "yes": {
+    "message": "Yes"
+  },
   "yesLetsTry": {
     "message": "Yes, let's try"
   },
diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json
index 30a055b87..7250f14c3 100644
--- a/app/_locales/fr/messages.json
+++ b/app/_locales/fr/messages.json
@@ -1306,9 +1306,6 @@
   "history": {
     "message": "Historique"
   },
-  "id": {
-    "message": "ID"
-  },
   "import": {
     "message": "Importer",
     "description": "Button to import an account from a selected file"
diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json
index b6cf3ed1a..25f9f5c7e 100644
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@@ -1306,9 +1306,6 @@
   "history": {
     "message": "इतिहास"
   },
-  "id": {
-    "message": "ID"
-  },
   "import": {
     "message": "आयात करें",
     "description": "Button to import an account from a selected file"
diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json
index 32a1485df..b951b3887 100644
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@@ -1306,9 +1306,6 @@
   "history": {
     "message": "Riwayat"
   },
-  "id": {
-    "message": "ID"
-  },
   "import": {
     "message": "Impor",
     "description": "Button to import an account from a selected file"
diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json
index c6d4be056..3361819c2 100644
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@@ -1306,9 +1306,6 @@
   "history": {
     "message": "履歴"
   },
-  "id": {
-    "message": "ID"
-  },
   "import": {
     "message": "インポート",
     "description": "Button to import an account from a selected file"
diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json
index 1645eff00..4f1477f7a 100644
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@@ -1306,9 +1306,6 @@
   "history": {
     "message": "기록"
   },
-  "id": {
-    "message": "ID"
-  },
   "import": {
     "message": "가져오기",
     "description": "Button to import an account from a selected file"
diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json
index 2623ae63d..99085c5f5 100644
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@@ -1306,9 +1306,6 @@
   "history": {
     "message": "История"
   },
-  "id": {
-    "message": "Ид."
-  },
   "import": {
     "message": "Импорт",
     "description": "Button to import an account from a selected file"
diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json
index f90ef7fe6..efef53600 100644
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@@ -1306,9 +1306,6 @@
   "history": {
     "message": "History"
   },
-  "id": {
-    "message": "ID"
-  },
   "import": {
     "message": "Mag-import",
     "description": "Button to import an account from a selected file"
diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json
index bab183e51..99f68d427 100644
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@@ -1306,9 +1306,6 @@
   "history": {
     "message": "Geçmiş"
   },
-  "id": {
-    "message": "Kimlik"
-  },
   "import": {
     "message": "Al",
     "description": "Button to import an account from a selected file"
diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json
index 7f2ad991a..13edabecb 100644
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@@ -1306,9 +1306,6 @@
   "history": {
     "message": "Lịch sử"
   },
-  "id": {
-    "message": "ID"
-  },
   "import": {
     "message": "Nhập",
     "description": "Button to import an account from a selected file"
diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json
index b90d3be9c..53f8da176 100644
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@@ -1306,9 +1306,6 @@
   "history": {
     "message": "历史记录"
   },
-  "id": {
-    "message": "ID"
-  },
   "import": {
     "message": "导入",
     "description": "Button to import an account from a selected file"
diff --git a/ui/components/app/asset-list-item/asset-list-item.js b/ui/components/app/asset-list-item/asset-list-item.js
index 56667db55..a571ee42b 100644
--- a/ui/components/app/asset-list-item/asset-list-item.js
+++ b/ui/components/app/asset-list-item/asset-list-item.js
@@ -13,6 +13,7 @@ import { useMetricEvent } from '../../../hooks/useMetricEvent';
 import { ASSET_TYPES, updateSendAsset } from '../../../ducks/send';
 import { SEND_ROUTE } from '../../../helpers/constants/routes';
 import { SEVERITIES } from '../../../helpers/constants/design-system';
+import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
 
 const AssetListItem = ({
   className,
@@ -65,21 +66,26 @@ const AssetListItem = ({
       <Button
         type="link"
         className="asset-list-item__send-token-button"
-        onClick={(e) => {
+        onClick={async (e) => {
           e.stopPropagation();
           sendTokenEvent();
-          dispatch(
-            updateSendAsset({
-              type: ASSET_TYPES.TOKEN,
-              details: {
-                address: tokenAddress,
-                decimals: tokenDecimals,
-                symbol: tokenSymbol,
-              },
-            }),
-          ).then(() => {
+          try {
+            await dispatch(
+              updateSendAsset({
+                type: ASSET_TYPES.TOKEN,
+                details: {
+                  address: tokenAddress,
+                  decimals: tokenDecimals,
+                  symbol: tokenSymbol,
+                },
+              }),
+            );
             history.push(SEND_ROUTE);
-          });
+          } catch (err) {
+            if (!err.message.includes(INVALID_ASSET_TYPE)) {
+              throw err;
+            }
+          }
         }}
       >
         {t('sendSpecifiedTokens', [tokenSymbol])}
diff --git a/ui/components/app/collectibles-detection-notice/collectibles-detection-notice.js b/ui/components/app/collectibles-detection-notice/collectibles-detection-notice.js
index 5ac150d8a..db7095409 100644
--- a/ui/components/app/collectibles-detection-notice/collectibles-detection-notice.js
+++ b/ui/components/app/collectibles-detection-notice/collectibles-detection-notice.js
@@ -20,7 +20,7 @@ export default function CollectiblesDetectionNotice() {
   const history = useHistory();
 
   return (
-    <Box marginBottom={8} className="collectibles-detection-notice">
+    <Box marginBottom={4} className="collectibles-detection-notice">
       <Dialog type="message" className="collectibles-detection-notice__message">
         <button
           onClick={() => setCollectiblesDetectionNoticeDismissed()}
diff --git a/ui/components/app/collectibles-detection-notice/index.scss b/ui/components/app/collectibles-detection-notice/index.scss
index cecbce951..c972cb393 100644
--- a/ui/components/app/collectibles-detection-notice/index.scss
+++ b/ui/components/app/collectibles-detection-notice/index.scss
@@ -22,7 +22,7 @@
     a.collectibles-detection-notice__message__link {
       @include H6;
 
-      width: 60%;
+      width: 100%;
       padding: 0;
       justify-content: flex-start;
       font-weight: bold;
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
new file mode 100644
index 000000000..9e82ce98a
--- /dev/null
+++ b/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import Modal from '../../modal';
+import Typography from '../../../ui/typography';
+import { TYPOGRAPHY } from '../../../../helpers/constants/design-system';
+import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { ADD_COLLECTIBLE_ROUTE } from '../../../../helpers/constants/routes';
+
+const ConvertTokenToNFTModal = ({ hideModal, tokenAddress }) => {
+  const history = useHistory();
+  const t = useI18nContext();
+  return (
+    <Modal
+      onSubmit={() => {
+        history.push({
+          pathname: ADD_COLLECTIBLE_ROUTE,
+          state: { tokenAddress },
+        });
+        hideModal();
+      }}
+      submitText={t('yes')}
+      onCancel={() => hideModal()}
+      cancelText={t('cancel')}
+    >
+      <div className="convert-token-to-nft-modal">
+        <Typography
+          variant={TYPOGRAPHY.H6}
+          boxProps={{
+            marginTop: 2,
+          }}
+        >
+          {t('convertTokenToNFTDescription')}
+        </Typography>
+      </div>
+    </Modal>
+  );
+};
+
+ConvertTokenToNFTModal.propTypes = {
+  hideModal: PropTypes.func.isRequired,
+  tokenAddress: PropTypes.string,
+};
+
+export default withModalProps(ConvertTokenToNFTModal);
diff --git a/ui/components/app/modals/convert-token-to-nft-modal/index.scss b/ui/components/app/modals/convert-token-to-nft-modal/index.scss
new file mode 100644
index 000000000..be4c8d178
--- /dev/null
+++ b/ui/components/app/modals/convert-token-to-nft-modal/index.scss
@@ -0,0 +1,4 @@
+.convert-token-to-nft-modal {
+  display: flex;
+  flex-flow: column nowrap;
+}
diff --git a/ui/components/app/modals/index.scss b/ui/components/app/modals/index.scss
index 742190ab9..29d0822bf 100644
--- a/ui/components/app/modals/index.scss
+++ b/ui/components/app/modals/index.scss
@@ -12,6 +12,7 @@
 @import 'qr-scanner/index';
 @import 'transaction-confirmed/index';
 @import 'customize-nonce/index';
+@import 'convert-token-to-nft-modal/index';
 
 .modal {
   z-index: 1050;
diff --git a/ui/components/app/modals/modal.js b/ui/components/app/modals/modal.js
index c31cba238..b81abbac3 100644
--- a/ui/components/app/modals/modal.js
+++ b/ui/components/app/modals/modal.js
@@ -30,6 +30,7 @@ import AddToAddressBookModal from './add-to-addressbook-modal';
 import EditApprovalPermission from './edit-approval-permission';
 import NewAccountModal from './new-account-modal';
 import CustomizeNonceModal from './customize-nonce';
+import ConvertTokenToNftModal from './convert-token-to-nft-modal/convert-token-to-nft-modal';
 
 const modalContainerBaseStyle = {
   transform: 'translate3d(-50%, 0, 0px)',
@@ -237,6 +238,19 @@ const MODALS = {
     },
   },
 
+  CONVERT_TOKEN_TO_NFT: {
+    contents: <ConvertTokenToNftModal />,
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
+
   CONFIRM_DELETE_NETWORK: {
     contents: <ConfirmDeleteNetwork />,
     mobileModalStyle: {
diff --git a/ui/components/app/wallet-overview/token-overview.js b/ui/components/app/wallet-overview/token-overview.js
index 1db872854..e62b00b60 100644
--- a/ui/components/app/wallet-overview/token-overview.js
+++ b/ui/components/app/wallet-overview/token-overview.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -29,6 +29,8 @@ import SwapIcon from '../../ui/icon/swap-icon.component';
 import SendIcon from '../../ui/icon/overview-send-icon.component';
 
 import IconButton from '../../ui/icon-button';
+import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
+import { showModal } from '../../../store/actions';
 import WalletOverview from './wallet-overview';
 
 const TokenOverview = ({ className, token }) => {
@@ -59,6 +61,17 @@ const TokenOverview = ({ className, token }) => {
     category: 'swaps',
   });
 
+  useEffect(() => {
+    if (token.isERC721) {
+      dispatch(
+        showModal({
+          name: 'CONVERT_TOKEN_TO_NFT',
+          tokenAddress: token.address,
+        }),
+      );
+    }
+  }, [token.isERC721, token.address, dispatch]);
+
   return (
     <WalletOverview
       balance={
@@ -81,16 +94,21 @@ const TokenOverview = ({ className, token }) => {
         <>
           <IconButton
             className="token-overview__button"
-            onClick={() => {
+            onClick={async () => {
               sendTokenEvent();
-              dispatch(
-                updateSendAsset({
-                  type: ASSET_TYPES.TOKEN,
-                  details: token,
-                }),
-              ).then(() => {
+              try {
+                await dispatch(
+                  updateSendAsset({
+                    type: ASSET_TYPES.TOKEN,
+                    details: token,
+                  }),
+                );
                 history.push(SEND_ROUTE);
-              });
+              } catch (err) {
+                if (!err.message.includes(INVALID_ASSET_TYPE)) {
+                  throw err;
+                }
+              }
             }}
             Icon={SendIcon}
             label={t('send')}
diff --git a/ui/components/app/wallet-overview/token-overview.test.js b/ui/components/app/wallet-overview/token-overview.test.js
new file mode 100644
index 000000000..8cd15c1bb
--- /dev/null
+++ b/ui/components/app/wallet-overview/token-overview.test.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { renderWithProvider } from '../../../../test/jest/rendering';
+import TokenOverview from './token-overview';
+
+describe('TokenOverview', () => {
+  const mockStore = {
+    metamask: {
+      provider: {
+        type: 'test',
+      },
+      preferences: {
+        useNativeCurrencyAsPrimaryCurrency: true,
+      },
+      identities: {
+        '0x1': {
+          address: '0x1',
+        },
+      },
+      selectedAddress: '0x1',
+      keyrings: [
+        {
+          type: 'HD Key Tree',
+          accounts: ['0x1', '0x2'],
+        },
+        {
+          type: 'Ledger Hardware',
+          accounts: [],
+        },
+      ],
+      contractExchangeRates: {},
+    },
+  };
+
+  const store = configureMockStore([thunk])(mockStore);
+
+  afterEach(() => {
+    store.clearActions();
+  });
+
+  describe('TokenOverview', () => {
+    it('should not show a modal when token passed in props is not an ERC721', () => {
+      const token = {
+        name: 'test',
+        isERC721: false,
+        address: '0x01',
+        symbol: 'test',
+      };
+      renderWithProvider(<TokenOverview token={token} />, store);
+
+      const actions = store.getActions();
+      expect(actions).toHaveLength(0);
+    });
+
+    it('should show ConvertTokenToNFT modal when token passed in props is an ERC721', () => {
+      const token = {
+        name: 'test',
+        isERC721: true,
+        address: '0x01',
+        symbol: 'test',
+      };
+      renderWithProvider(<TokenOverview token={token} />, store);
+
+      const actions = store.getActions();
+      expect(actions).toHaveLength(1);
+      expect(actions[0].type).toBe('UI_MODAL_OPEN');
+      expect(actions[0].payload).toStrictEqual({
+        name: 'CONVERT_TOKEN_TO_NFT',
+        tokenAddress: '0x01',
+      });
+    });
+  });
+});
diff --git a/ui/components/ui/form-field/form-field.js b/ui/components/ui/form-field/form-field.js
index fcad3d8a9..2a845a1c0 100644
--- a/ui/components/ui/form-field/form-field.js
+++ b/ui/components/ui/form-field/form-field.js
@@ -30,6 +30,7 @@ export default function FormField({
   password,
   allowDecimals,
   disabled,
+  placeholder,
 }) {
   return (
     <div
@@ -85,6 +86,7 @@ export default function FormField({
             allowDecimals={allowDecimals}
             disabled={disabled}
             dataTestId={dataTestId}
+            placeholder={placeholder}
           />
         ) : (
           <input
@@ -97,6 +99,7 @@ export default function FormField({
             autoFocus={autoFocus}
             disabled={disabled}
             data-testid={dataTestId}
+            placeholder={placeholder}
           />
         )}
         {error && (
@@ -170,6 +173,10 @@ FormField.propTypes = {
    * Check if the form disabled
    */
   disabled: PropTypes.bool,
+  /**
+   * Set the placeholder text for the input field
+   */
+  placeholder: PropTypes.string,
 };
 
 FormField.defaultProps = {
diff --git a/ui/components/ui/form-field/form-field.stories.js b/ui/components/ui/form-field/form-field.stories.js
index 745c845a0..3d5ee3b7f 100644
--- a/ui/components/ui/form-field/form-field.stories.js
+++ b/ui/components/ui/form-field/form-field.stories.js
@@ -30,6 +30,7 @@ export default {
     password: { control: 'boolean' },
     allowDecimals: { control: 'boolean' },
     disabled: { control: 'boolean' },
+    placeholder: { control: 'text' },
   },
 };
 
diff --git a/ui/components/ui/numeric-input/numeric-input.component.js b/ui/components/ui/numeric-input/numeric-input.component.js
index 6804e8b3f..33b82da32 100644
--- a/ui/components/ui/numeric-input/numeric-input.component.js
+++ b/ui/components/ui/numeric-input/numeric-input.component.js
@@ -15,6 +15,7 @@ export default function NumericInput({
   allowDecimals = true,
   disabled = false,
   dataTestId,
+  placeholder,
 }) {
   return (
     <div
@@ -40,6 +41,7 @@ export default function NumericInput({
         autoFocus={autoFocus}
         disabled={disabled}
         data-testid={dataTestId}
+        placeholder={placeholder}
       />
       {detailText && (
         <Typography color={COLORS.UI4} variant={TYPOGRAPHY.H7} tag="span">
@@ -59,4 +61,5 @@ NumericInput.propTypes = {
   allowDecimals: PropTypes.bool,
   disabled: PropTypes.bool,
   dataTestId: PropTypes.string,
+  placeholder: PropTypes.string,
 };
diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
index 355e81e49..aac325d54 100644
--- a/ui/ducks/send/send.js
+++ b/ui/ducks/send/send.js
@@ -53,11 +53,12 @@ import {
   hideLoadingIndication,
   showConfTxPage,
   showLoadingIndication,
-  updateTokenType,
   updateTransaction,
   addPollingTokenToAppState,
   removePollingTokenFromAppState,
   isCollectibleOwner,
+  getTokenStandardAndDetails,
+  showModal,
 } from '../../store/actions';
 import { setCustomGasLimit } from '../gas/gas.duck';
 import {
@@ -91,9 +92,16 @@ import {
   isValidHexAddress,
 } from '../../../shared/modules/hexstring-utils';
 import { CHAIN_ID_TO_GAS_LIMIT_BUFFER_MAP } from '../../../shared/constants/network';
-import { ERC20, ETH, GWEI } from '../../helpers/constants/common';
+import {
+  ERC20,
+  ERC721,
+  ERC1155,
+  ETH,
+  GWEI,
+} from '../../helpers/constants/common';
 import { TRANSACTION_ENVELOPE_TYPES } from '../../../shared/constants/transaction';
 import { readAddressAsContract } from '../../../shared/modules/contract-utils';
+import { INVALID_ASSET_TYPE } from '../../helpers/constants/error-keys';
 // typedefs
 /**
  * @typedef {import('@reduxjs/toolkit').PayloadAction} PayloadAction
@@ -607,6 +615,8 @@ export const initialState = {
     // In the case of tokens, the address, decimals and symbol of the token
     // will be included in details
     details: null,
+    // error to display when there is an issue with the asset
+    error: null,
   },
   draftTransaction: {
     // The metamask internal id of the transaction. Only populated in the EDIT
@@ -736,6 +746,7 @@ const slice = createSlice({
       state.amount.value = action.payload.amount;
       state.gas.error = null;
       state.amount.error = null;
+      state.asset.error = null;
       state.recipient.address = action.payload.address;
       state.recipient.nickname = action.payload.nickname;
       state.draftTransaction.id = action.payload.id;
@@ -887,6 +898,7 @@ const slice = createSlice({
     updateAsset: (state, action) => {
       state.asset.type = action.payload.type;
       state.asset.balance = action.payload.balance;
+      state.asset.error = action.payload.error;
       if (
         state.asset.type === ASSET_TYPES.TOKEN ||
         state.asset.type === ASSET_TYPES.COLLECTIBLE
@@ -1146,7 +1158,7 @@ const slice = createSlice({
     },
     validateSendState: (state) => {
       switch (true) {
-        // 1 + 2. State is invalid when either gas or amount fields have errors
+        // 1 + 2. State is invalid when either gas or amount or asset fields have errors
         // 3. State is invalid if asset type is a token and the token details
         //  are unknown.
         // 4. State is invalid if no recipient has been added
@@ -1156,6 +1168,7 @@ const slice = createSlice({
         // 8. State is invalid if the selected asset is a ERC721
         case Boolean(state.amount.error):
         case Boolean(state.gas.error):
+        case Boolean(state.asset.error):
         case state.asset.type === ASSET_TYPES.TOKEN &&
           state.asset.details === null:
         case state.stage === SEND_STAGES.ADD_RECIPIENT:
@@ -1166,10 +1179,6 @@ const slice = createSlice({
         ):
           state.status = SEND_STATUSES.INVALID;
           break;
-        case state.asset.type === ASSET_TYPES.TOKEN &&
-          state.asset.details.isERC721 === true:
-          state.status = SEND_STATUSES.INVALID;
-          break;
         default:
           state.status = SEND_STATUSES.VALID;
           // Recompute the draftTransaction object
@@ -1419,31 +1428,43 @@ export function updateSendAmount(amount) {
 export function updateSendAsset({ type, details }) {
   return async (dispatch, getState) => {
     const state = getState();
-    let { balance } = state.send.asset;
+    let { balance, error } = state.send.asset;
+    const userAddress = state.send.account.address ?? getSelectedAddress(state);
     if (type === ASSET_TYPES.TOKEN) {
-      // if changing to a token, get the balance from the network. The asset
-      // overview page and asset list on the wallet overview page contain
-      // send buttons that call this method before initialization occurs.
-      // When this happens we don't yet have an account.address so default to
-      // the currently active account. In addition its possible for the balance
-      // check to take a decent amount of time, so we display a loading
-      // indication so that that immediate feedback is displayed to the user.
-      await dispatch(showLoadingIndication());
-      balance = await getERC20Balance(
-        details,
-        state.send.account.address ?? getSelectedAddress(state),
-      );
-      // TODO remove along with migration of isERC721 tokens and stripping away this designation
       if (details) {
-        if (details.isERC721 === undefined) {
-          const updatedAssetDetails = await updateTokenType(details.address);
-          details.isERC721 = updatedAssetDetails.isERC721;
-        }
         if (details.standard === undefined) {
-          details.standard = ERC20;
+          await dispatch(showLoadingIndication());
+          const { standard } = await getTokenStandardAndDetails(
+            details.address,
+            userAddress,
+          );
+          if (standard === ERC721 || standard === ERC1155) {
+            await dispatch(hideLoadingIndication());
+            dispatch(
+              showModal({
+                name: 'CONVERT_TOKEN_TO_NFT',
+                tokenAddress: details.address,
+              }),
+            );
+            error = INVALID_ASSET_TYPE;
+            throw new Error(error);
+          }
+          details.standard = standard;
         }
+
+        // if changing to a token, get the balance from the network. The asset
+        // overview page and asset list on the wallet overview page contain
+        // send buttons that call this method before initialization occurs.
+        // When this happens we don't yet have an account.address so default to
+        // the currently active account. In addition its possible for the balance
+        // check to take a decent amount of time, so we display a loading
+        // indication so that that immediate feedback is displayed to the user.
+        if (details.standard === ERC20) {
+          error = null;
+          balance = await getERC20Balance(details, userAddress);
+        }
+        await dispatch(hideLoadingIndication());
       }
-      await dispatch(hideLoadingIndication());
     } else if (type === ASSET_TYPES.COLLECTIBLE) {
       let isCurrentOwner = true;
       try {
@@ -1452,16 +1473,17 @@ export function updateSendAsset({ type, details }) {
           details.address,
           details.tokenId,
         );
-      } catch (error) {
-        if (error.message.includes('Unable to verify ownership.')) {
+      } catch (err) {
+        if (err.message.includes('Unable to verify ownership.')) {
           // this would indicate that either our attempts to verify ownership failed because of network issues,
           // or, somehow a token has been added to collectibles state with an incorrect chainId.
         } else {
           // Any other error is unexpected and should be surfaced.
-          dispatch(displayWarning(error.message));
+          dispatch(displayWarning(err.message));
         }
       }
       if (isCurrentOwner) {
+        error = null;
         balance = '0x1';
       } else {
         throw new Error(
@@ -1469,12 +1491,13 @@ export function updateSendAsset({ type, details }) {
         );
       }
     } else {
+      error = null;
       // if changing to native currency, get it from the account key in send
       // state which is kept in sync when accounts change.
       balance = state.send.account.balance;
     }
     // update the asset in state which will re-run amount and gas validation
-    await dispatch(actions.updateAsset({ type, details, balance }));
+    await dispatch(actions.updateAsset({ type, details, balance, error }));
     await dispatch(computeEstimatedGasLimit());
   };
 }
@@ -1870,7 +1893,6 @@ export function getGasInputMode(state) {
 }
 
 // Asset Selectors
-
 export function getSendAsset(state) {
   return state[name].asset;
 }
@@ -1886,6 +1908,10 @@ export function getIsAssetSendable(state) {
   return state[name].asset.details.isERC721 === false;
 }
 
+export function getAssetError(state) {
+  return state[name].asset.error;
+}
+
 // Amount Selectors
 export function getSendAmount(state) {
   return state[name].amount.value;
diff --git a/ui/ducks/send/send.test.js b/ui/ducks/send/send.test.js
index 1284ec11f..9359c4253 100644
--- a/ui/ducks/send/send.test.js
+++ b/ui/ducks/send/send.test.js
@@ -19,6 +19,7 @@ import {
   TRANSACTION_ENVELOPE_TYPES,
   TRANSACTION_TYPES,
 } from '../../../shared/constants/transaction';
+import * as Actions from '../../store/actions';
 import sendReducer, {
   initialState,
   initializeSendState,
@@ -67,17 +68,6 @@ import sendReducer, {
 
 const mockStore = createMockStore([thunk]);
 
-jest.mock('../../store/actions', () => {
-  const actual = jest.requireActual('../../store/actions');
-  return {
-    ...actual,
-    estimateGas: jest.fn(() => Promise.resolve('0x0')),
-    getGasFeeEstimatesAndStartPolling: jest.fn(() => Promise.resolve()),
-    updateTokenType: jest.fn(() => Promise.resolve({ isERC721: false })),
-    isCollectibleOwner: jest.fn(() => Promise.resolve(true)),
-  };
-});
-
 jest.mock('./send', () => {
   const actual = jest.requireActual('./send');
   return {
@@ -88,6 +78,25 @@ jest.mock('./send', () => {
 });
 
 describe('Send Slice', () => {
+  let getTokenStandardAndDetailsStub;
+  beforeEach(() => {
+    getTokenStandardAndDetailsStub = jest
+      .spyOn(Actions, 'getTokenStandardAndDetails')
+      .mockImplementation(() => Promise.resolve({ standard: 'ERC20' }));
+    jest
+      .spyOn(Actions, 'estimateGas')
+      .mockImplementation(() => Promise.resolve('0x0'));
+    jest
+      .spyOn(Actions, 'getGasFeeEstimatesAndStartPolling')
+      .mockImplementation(() => Promise.resolve());
+    jest
+      .spyOn(Actions, 'updateTokenType')
+      .mockImplementation(() => Promise.resolve({ isERC721: false }));
+    jest
+      .spyOn(Actions, 'isCollectibleOwner')
+      .mockImplementation(() => Promise.resolve(true));
+  });
+
   describe('Reducers', () => {
     describe('updateSendAmount', () => {
       it('should', async () => {
@@ -1457,6 +1466,7 @@ describe('Send Slice', () => {
         expect(actionResult[0].payload).toStrictEqual({
           ...newSendAsset,
           balance: '',
+          error: null,
         });
 
         expect(actionResult[1].type).toStrictEqual(
@@ -1499,6 +1509,7 @@ describe('Send Slice', () => {
         expect(actionResult[2].payload).toStrictEqual({
           ...newSendAsset,
           balance: '0x0',
+          error: null,
         });
 
         expect(actionResult[3].type).toStrictEqual(
@@ -1511,6 +1522,37 @@ describe('Send Slice', () => {
           'send/computeEstimatedGasLimit/fulfilled',
         );
       });
+
+      it('should show ConvertTokenToNFT modal and throw "invalidAssetType" error when token passed in props is an ERC721 or ERC1155', async () => {
+        getTokenStandardAndDetailsStub.mockImplementation(() =>
+          Promise.resolve({ standard: 'ERC1155' }),
+        );
+        const store = mockStore(defaultSendAssetState);
+
+        const newSendAsset = {
+          type: ASSET_TYPES.TOKEN,
+          details: {
+            address: 'tokenAddress',
+            symbol: 'tokenSymbol',
+            decimals: 'tokenDecimals',
+          },
+        };
+
+        await expect(() =>
+          store.dispatch(updateSendAsset(newSendAsset)),
+        ).rejects.toThrow('invalidAssetType');
+        const actionResult = store.getActions();
+        expect(actionResult).toHaveLength(3);
+        expect(actionResult[0].type).toStrictEqual('SHOW_LOADING_INDICATION');
+        expect(actionResult[1].type).toStrictEqual('HIDE_LOADING_INDICATION');
+        expect(actionResult[2]).toStrictEqual({
+          payload: {
+            name: 'CONVERT_TOKEN_TO_NFT',
+            tokenAddress: 'tokenAddress',
+          },
+          type: 'UI_MODAL_OPEN',
+        });
+      });
     });
 
     describe('updateRecipientUserInput', () => {
@@ -2231,6 +2273,7 @@ describe('Send Slice', () => {
         expect(actionResult[0].payload).toStrictEqual({
           balance: '0x1',
           type: ASSET_TYPES.COLLECTIBLE,
+          error: null,
           details: {
             address: '0xTokenAddress',
             description: 'A test NFT dispensed from faucet.paradigm.xyz.',
@@ -2361,11 +2404,11 @@ describe('Send Slice', () => {
       expect(actionResult[2].payload).toStrictEqual({
         balance: '0x0',
         type: ASSET_TYPES.TOKEN,
+        error: null,
         details: {
           address: '0xTokenAddress',
           decimals: 18,
           symbol: 'SYMB',
-          isERC721: false,
           standard: 'ERC20',
         },
       });
diff --git a/ui/helpers/constants/common.js b/ui/helpers/constants/common.js
index 96620f45b..b62e053f1 100644
--- a/ui/helpers/constants/common.js
+++ b/ui/helpers/constants/common.js
@@ -7,6 +7,7 @@ export const SECONDARY = 'SECONDARY';
 
 export const ERC20 = 'ERC20';
 export const ERC721 = 'ERC721';
+export const ERC1155 = 'ERC1155';
 
 export const GAS_ESTIMATE_TYPES = {
   SLOW: 'SLOW',
diff --git a/ui/helpers/constants/error-keys.js b/ui/helpers/constants/error-keys.js
index 8372a3f1e..de43f9ffc 100644
--- a/ui/helpers/constants/error-keys.js
+++ b/ui/helpers/constants/error-keys.js
@@ -7,3 +7,4 @@ export const GAS_PRICE_FETCH_FAILURE_ERROR_KEY = 'gasPriceFetchFailed';
 export const GAS_PRICE_EXCESSIVE_ERROR_KEY = 'gasPriceExcessive';
 export const UNSENDABLE_ASSET_ERROR_KEY = 'unsendableAsset';
 export const INSUFFICIENT_FUNDS_FOR_GAS_ERROR_KEY = 'insufficientFundsForGas';
+export const INVALID_ASSET_TYPE = 'invalidAssetType';
diff --git a/ui/hooks/gasFeeInput/test-utils.js b/ui/hooks/gasFeeInput/test-utils.js
index 926cb757f..73693c2a4 100644
--- a/ui/hooks/gasFeeInput/test-utils.js
+++ b/ui/hooks/gasFeeInput/test-utils.js
@@ -17,6 +17,8 @@ import {
   getShouldShowFiat,
   getPreferences,
   txDataSelector,
+  getCurrentKeyring,
+  getTokenExchangeRates,
 } from '../../selectors';
 import { ETH } from '../../helpers/constants/common';
 
@@ -140,6 +142,12 @@ export const generateUseSelectorRouter = ({
   if (selector === getEIP1559V2Enabled) {
     return eip1559V2Enabled;
   }
+  if (selector === getCurrentKeyring) {
+    return { type: '' };
+  }
+  if (selector === getTokenExchangeRates) {
+    return { '0x1': '1' };
+  }
   return undefined;
 };
 
diff --git a/ui/pages/add-collectible/add-collectible.js b/ui/pages/add-collectible/add-collectible.js
index 2587d1073..188756aa1 100644
--- a/ui/pages/add-collectible/add-collectible.js
+++ b/ui/pages/add-collectible/add-collectible.js
@@ -1,41 +1,60 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { util } from '@metamask/controllers';
 import { useI18nContext } from '../../hooks/useI18nContext';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 
 import Box from '../../components/ui/box';
-import TextField from '../../components/ui/text-field';
 import PageContainer from '../../components/ui/page-container';
 import {
   addCollectibleVerifyOwnership,
+  removeToken,
   setNewCollectibleAddedMessage,
 } from '../../store/actions';
+import FormField from '../../components/ui/form-field';
+import { getIsMainnet, getUseCollectibleDetection } from '../../selectors';
+import { getCollectiblesDetectionNoticeDismissed } from '../../ducks/metamask/metamask';
+import CollectiblesDetectionNotice from '../../components/app/collectibles-detection-notice';
 
 export default function AddCollectible() {
   const t = useI18nContext();
   const history = useHistory();
   const dispatch = useDispatch();
+  const useCollectibleDetection = useSelector(getUseCollectibleDetection);
+  const isMainnet = useSelector(getIsMainnet);
+  const collectibleDetectionNoticeDismissed = useSelector(
+    getCollectiblesDetectionNoticeDismissed,
+  );
   const addressEnteredOnImportTokensPage =
     history?.location?.state?.addressEnteredOnImportTokensPage;
+  const contractAddressToConvertFromTokenToCollectible =
+    history?.location?.state?.tokenAddress;
 
   const [address, setAddress] = useState(
-    addressEnteredOnImportTokensPage ?? '',
+    addressEnteredOnImportTokensPage ??
+      contractAddressToConvertFromTokenToCollectible ??
+      '',
   );
-
   const [tokenId, setTokenId] = useState('');
   const [disabled, setDisabled] = useState(true);
 
   const handleAddCollectible = async () => {
     try {
-      await dispatch(addCollectibleVerifyOwnership(address, tokenId));
+      await dispatch(
+        addCollectibleVerifyOwnership(address, tokenId.toString()),
+      );
     } catch (error) {
       const { message } = error;
       dispatch(setNewCollectibleAddedMessage(message));
       history.push(DEFAULT_ROUTE);
       return;
     }
+    if (contractAddressToConvertFromTokenToCollectible) {
+      await dispatch(
+        removeToken(contractAddressToConvertFromTokenToCollectible),
+      );
+    }
     dispatch(setNewCollectibleAddedMessage('success'));
     history.push(DEFAULT_ROUTE);
   };
@@ -66,29 +85,33 @@ export default function AddCollectible() {
       disabled={disabled}
       contentComponent={
         <Box padding={4}>
+          {isMainnet &&
+          !useCollectibleDetection &&
+          !collectibleDetectionNoticeDismissed ? (
+            <CollectiblesDetectionNotice />
+          ) : null}
           <Box>
-            <TextField
+            <FormField
               id="address"
-              label={t('address')}
+              titleText={t('address')}
               placeholder="0x..."
-              type="text"
               value={address}
-              onChange={(e) => validateAndSetAddress(e.target.value)}
-              fullWidth
+              onChange={(val) => validateAndSetAddress(val)}
+              tooltipText={t('importNFTAddressToolTip')}
               autoFocus
-              margin="normal"
             />
           </Box>
           <Box>
-            <TextField
+            <FormField
               id="token-id"
-              label={t('id')}
+              titleText={t('tokenId')}
               placeholder={t('nftTokenIdPlaceholder')}
-              type="number"
               value={tokenId}
-              onChange={(e) => validateAndSetTokenId(e.target.value)}
-              fullWidth
-              margin="normal"
+              onChange={(val) => {
+                validateAndSetTokenId(val);
+              }}
+              tooltipText={t('importNFTTokenIdToolTip')}
+              numeric
             />
           </Box>
         </Box>
diff --git a/ui/pages/asset/asset.js b/ui/pages/asset/asset.js
index f48fd9bc4..42c710fd7 100644
--- a/ui/pages/asset/asset.js
+++ b/ui/pages/asset/asset.js
@@ -21,7 +21,7 @@ const Asset = () => {
 
   const collectible = collectibles.find(
     ({ address, tokenId }) =>
-      isEqualCaseInsensitive(address, asset) && id === tokenId,
+      isEqualCaseInsensitive(address, asset) && id === tokenId.toString(),
   );
 
   useEffect(() => {
diff --git a/ui/pages/import-token/import-token.component.js b/ui/pages/import-token/import-token.component.js
index 8faa500a0..ec52f6c44 100644
--- a/ui/pages/import-token/import-token.component.js
+++ b/ui/pages/import-token/import-token.component.js
@@ -216,7 +216,7 @@ class ImportToken extends Component {
     const isMainnetNetwork = this.props.chainId === '0x1';
 
     let standard;
-    if (addressIsValid) {
+    if (addressIsValid && process.env.COLLECTIBLES_V1) {
       try {
         ({ standard } = await this.props.getTokenStandardAndDetails(
           standardAddress,
diff --git a/ui/pages/send/send-content/send-content.component.js b/ui/pages/send/send-content/send-content.component.js
index 7e8a7dfe4..dca6d4a91 100644
--- a/ui/pages/send/send-content/send-content.component.js
+++ b/ui/pages/send/send-content/send-content.component.js
@@ -37,6 +37,7 @@ export default class SendContent extends Component {
     getIsBalanceInsufficient: PropTypes.bool,
     asset: PropTypes.object,
     to: PropTypes.string,
+    assetError: PropTypes.string,
   };
 
   render() {
@@ -49,6 +50,7 @@ export default class SendContent extends Component {
       networkOrAccountNotSupports1559,
       getIsBalanceInsufficient,
       asset,
+      assetError,
     } = this.props;
 
     let gasError;
@@ -67,6 +69,7 @@ export default class SendContent extends Component {
     return (
       <PageContainerContent>
         <div className="send-v2__form">
+          {assetError ? this.renderError(assetError) : null}
           {gasError ? this.renderError(gasError) : null}
           {isEthGasPrice
             ? this.renderWarning(ETH_GAS_PRICE_FETCH_WARNING_KEY)
diff --git a/ui/pages/send/send-content/send-content.container.js b/ui/pages/send/send-content/send-content.container.js
index ba57a29e9..d3e508e9f 100644
--- a/ui/pages/send/send-content/send-content.container.js
+++ b/ui/pages/send/send-content/send-content.container.js
@@ -10,6 +10,7 @@ import {
   getIsBalanceInsufficient,
   getSendTo,
   getSendAsset,
+  getAssetError,
 } from '../../../ducks/send';
 
 import SendContent from './send-content.component';
@@ -32,6 +33,7 @@ function mapStateToProps(state) {
     ),
     getIsBalanceInsufficient: getIsBalanceInsufficient(state),
     asset: getSendAsset(state),
+    assetError: getAssetError(state),
   };
 }