Showing new message while converting token to NFT (#13838)

* adding new message while converting token to nft if the nft is already added via nft flow.

* updating the copy

Co-authored-by: Alex Donesky <adonesky@gmail.com>

Co-authored-by: Alex Donesky <adonesky@gmail.com>

app/_locales/en/messages.json

@@ -634,6 +634,9 @@
   "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?"
   },
+  "convertTokenToNFTExistDescription": {
+    "message": "We’ve detected that this asset has been added as an NFT. Would you like to remove it from your token list?"
+  },
   "copiedExclamation": {
     "message": "Copied!"
   },

ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js

@@ -1,23 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 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';
+import {
+  ADD_COLLECTIBLE_ROUTE,
+  ASSET_ROUTE,
+} from '../../../../helpers/constants/routes';
+import { getCollectibles } from '../../../../ducks/metamask/metamask';
+import { isEqualCaseInsensitive } from '../../../../helpers/utils/util';
+import { removeToken } from '../../../../store/actions';
 
 const ConvertTokenToNFTModal = ({ hideModal, tokenAddress }) => {
   const history = useHistory();
   const t = useI18nContext();
+  const dispatch = useDispatch();
+  const allCollectibles = useSelector(getCollectibles);
+  const tokenAddedAsNFT = allCollectibles.find(({ address }) =>
+    isEqualCaseInsensitive(address, tokenAddress),
+  );
+
   return (
     <Modal
-      onSubmit={() => {
-        history.push({
-          pathname: ADD_COLLECTIBLE_ROUTE,
-          state: { tokenAddress },
-        });
+      onSubmit={async () => {
+        if (tokenAddedAsNFT) {
+          await dispatch(removeToken(tokenAddress));
+          const { tokenId } = tokenAddedAsNFT;
+          history.push({
+            pathname: `${ASSET_ROUTE}/${tokenAddress}/${tokenId}`,
+          });
+        } else {
+          history.push({
+            pathname: ADD_COLLECTIBLE_ROUTE,
+            state: { tokenAddress },
+          });
+        }
         hideModal();
       }}
       submitText={t('yes')}
@@ -31,7 +52,9 @@ const ConvertTokenToNFTModal = ({ hideModal, tokenAddress }) => {
             marginTop: 2,
           }}
         >
-          {t('convertTokenToNFTDescription')}
+          {tokenAddedAsNFT
+            ? t('convertTokenToNFTExistDescription')
+            : t('convertTokenToNFTDescription')}
         </Typography>
       </div>
     </Modal>

ui/pages/add-collectible/add-collectible.js

@@ -102,7 +102,7 @@ export default function AddCollectible() {
           {collectibleAddFailed && (
             <ActionableMessage
               type="danger"
-              useIcon="true"
+              useIcon
               iconFillColor="#d73a49"
               message={
                 <Box display={DISPLAY.INLINE_FLEX}>