NFT UX cleanup grab-bag (#13352)

* NFT UX cleanup

app/scripts/metamask-controller.js

@@ -243,6 +243,8 @@ export default class MetamaskController extends EventEmitter {
       initState.CollectiblesController,
     );
 
+    this.collectiblesController.setApiKey(process.env.OPENSEA_KEY);
+
     process.env.COLLECTIBLES_V1 &&
       (this.collectibleDetectionController = new CollectibleDetectionController(
         {
@@ -648,8 +650,7 @@ export default class MetamaskController extends EventEmitter {
             this.collectiblesController.checkAndUpdateSingleCollectibleOwnershipStatus(
               knownCollectible,
               false,
-              // TODO add this when checkAndUpdateSingleCollectibleOwnershipStatus is updated
+              { userAddress, chainId },
-              // { userAddress, chainId },
             );
           }
         }

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

@@ -130,6 +130,7 @@ export default function CollectibleDetails({ collectible }) {
       <Box
         display={DISPLAY.FLEX}
         width={inPopUp ? BLOCK_SIZES.FULL : BLOCK_SIZES.HALF}
+        margin={inPopUp ? [4, 0] : null}
       >
         <Button
           type="primary"
@@ -185,37 +186,39 @@ export default function CollectibleDetails({ collectible }) {
                 color={COLORS.BLACK}
                 variant={TYPOGRAPHY.H4}
                 fontWeight={FONT_WEIGHT.BOLD}
-                boxProps={{ margin: 0, marginBottom: 4 }}
+                boxProps={{ margin: 0, marginBottom: 2 }}
               >
                 {name}
               </Typography>
               <Typography
                 color={COLORS.UI3}
                 variant={TYPOGRAPHY.H5}
-                boxProps={{ margin: 0 }}
+                boxProps={{ margin: 0, marginBottom: 4 }}
                 overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
               >
                 #{tokenId}
               </Typography>
             </div>
-            <div>
+            {description ? (
-              <Typography
+              <div>
-                color={COLORS.BLACK}
+                <Typography
-                variant={TYPOGRAPHY.H6}
+                  color={COLORS.BLACK}
-                fontWeight={FONT_WEIGHT.BOLD}
+                  variant={TYPOGRAPHY.H6}
-                className="collectible-details__description"
+                  fontWeight={FONT_WEIGHT.BOLD}
-                boxProps={{ margin: 0, marginBottom: 2 }}
+                  className="collectible-details__description"
-              >
+                  boxProps={{ margin: 0, marginBottom: 2 }}
-                {t('description')}
+                >
-              </Typography>
+                  {t('description')}
-              <Typography
+                </Typography>
-                color={COLORS.UI4}
+                <Typography
-                variant={TYPOGRAPHY.H6}
+                  color={COLORS.UI4}
-                boxProps={{ margin: 0, marginBottom: 4 }}
+                  variant={TYPOGRAPHY.H6}
-              >
+                  boxProps={{ margin: 0, marginBottom: 4 }}
-                {description}
+                >
-              </Typography>
+                  {description}
-            </div>
+                </Typography>
+              </div>
+            ) : null}
             {inPopUp ? null : renderSendButton()}
           </Box>
         </div>
@@ -241,13 +244,13 @@ export default function CollectibleDetails({ collectible }) {
                 margin: 0,
                 marginBottom: 4,
               }}
-              overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
+              className="collectible-details__image-link"
             >
               <a
                 target="_blank"
-                href={collectibleImageURL}
                 rel="noopener noreferrer"
-                className="collectible-details__image-link"
+                href={collectibleImageURL}
+                title={collectibleImageURL}
               >
                 {image}
               </a>
@@ -268,17 +271,18 @@ export default function CollectibleDetails({ collectible }) {
               {t('contractAddress')}
             </Typography>
             <Typography
-              color={COLORS.UI3}
+              color={COLORS.PRIMARY1}
               variant={TYPOGRAPHY.H6}
               overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
               boxProps={{
                 margin: 0,
                 marginBottom: 4,
               }}
+              className="collectible-details__contract-link"
             >
               <a
                 target="_blank"
-                className="collectible-details__contract-link"
+                rel="noopener noreferrer"
                 href={getTokenTrackerLink(
                   address,
                   currentNetwork,
@@ -286,11 +290,9 @@ export default function CollectibleDetails({ collectible }) {
                   null,
                   rpcPrefs,
                 )}
-                rel="noopener noreferrer"
+                title={address}
               >
-                {getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+                {inPopUp ? shortenAddress(address) : address}
-                  ? shortenAddress(address)
-                  : address}
               </a>
             </Typography>
           </Box>

ui/components/app/collectible-details/index.scss

@@ -55,13 +55,13 @@ $spacer-break-small: 16px;
 
   &__contract-link,
   &__image-link {
-    color: var(--primary-1);
-    overflow: hidden;
-    text-overflow: ellipsis;
     word-break: break-all;
 
-    &:hover {
+    @media screen and (max-width: $break-small) {
-      color: var(--primary-3);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 90%;
     }
   }
 

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

@@ -117,6 +117,7 @@ export default function CollectiblesTab({ onAddNFT }) {
             marginBottom={12}
             justifyContent={JUSTIFY_CONTENT.CENTER}
             flexDirection={FLEX_DIRECTION.COLUMN}
+            className="collectibles-tab__link"
           >
             <Typography
               color={COLORS.UI3}
@@ -131,7 +132,6 @@ export default function CollectiblesTab({ onAddNFT }) {
               target="_blank"
               rel="noopener noreferrer"
               href="https://metamask.zendesk.com/hc/en-us/articles/360058238591-NFT-tokens-in-MetaMask-wallet"
-              style={{ padding: 0, fontSize: '1rem' }}
             >
               {t('learnMoreUpperCase')}
             </Button>
@@ -154,27 +154,31 @@ export default function CollectiblesTab({ onAddNFT }) {
           alignItems={ALIGN_ITEMS.CENTER}
           justifyContent={JUSTIFY_CONTENT.CENTER}
         >
-          <Box
+          {!isMainnet && Object.keys(collections).length < 1 ? null : (
-            className="collectibles-tab__link"
+            <>
-            justifyContent={JUSTIFY_CONTENT.FLEX_END}
+              <Box
-          >
+                className="collectibles-tab__link"
-            {isMainnet && !useCollectibleDetection ? (
+                justifyContent={JUSTIFY_CONTENT.FLEX_END}
-              <Button type="link" onClick={onEnableAutoDetect}>
+              >
-                {t('enableAutoDetect')}
+                {isMainnet && !useCollectibleDetection ? (
-              </Button>
+                  <Button type="link" onClick={onEnableAutoDetect}>
-            ) : (
+                    {t('enableAutoDetect')}
-              <Button type="link" onClick={onRefresh}>
+                  </Button>
-                {t('refreshList')}
+                ) : (
-              </Button>
+                  <Button type="link" onClick={onRefresh}>
-            )}
+                    {t('refreshList')}
-          </Box>
+                  </Button>
-          <Typography
+                )}
-            color={COLORS.UI3}
+              </Box>
-            variant={TYPOGRAPHY.H4}
+              <Typography
-            align={TEXT_ALIGN.CENTER}
+                color={COLORS.UI3}
-          >
+                variant={TYPOGRAPHY.H6}
-            {t('or')}
+                align={TEXT_ALIGN.CENTER}
-          </Typography>
+              >
+                {t('or')}
+              </Typography>
+            </>
+          )}
           <Box
             justifyContent={JUSTIFY_CONTENT.FLEX_START}
             className="collectibles-tab__link"

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

@@ -2,7 +2,7 @@
   &__link {
     a {
       padding: 4px;
-      font-size: 1rem;
+      font-size: 0.875rem;
     }
   }
 }

ui/components/app/wallet-overview/token-overview.js

@@ -62,7 +62,7 @@ const TokenOverview = ({ className, token }) => {
   });
 
   useEffect(() => {
-    if (token.isERC721) {
+    if (token.isERC721 && process.env.COLLECTIBLES_V1) {
       dispatch(
         showModal({
           name: 'CONVERT_TOKEN_TO_NFT',

ui/components/app/wallet-overview/token-overview.test.js

@@ -54,6 +54,7 @@ describe('TokenOverview', () => {
     });
 
     it('should show ConvertTokenToNFT modal when token passed in props is an ERC721', () => {
+      process.env.COLLECTIBLES_V1 = true;
       const token = {
         name: 'test',
         isERC721: true,
@@ -69,6 +70,7 @@ describe('TokenOverview', () => {
         name: 'CONVERT_TOKEN_TO_NFT',
         tokenAddress: '0x01',
       });
+      process.env.COLLECTIBLES_V1 = false;
     });
   });
 });

ui/css/itcss/components/send.scss

@@ -203,12 +203,12 @@
   box-shadow: 2px 2px 2px var(--alto);
 }
 
-.customize-gas-tooltip-container input[type="number"]::-webkit-inner-spin-button {
+.customize-gas-tooltip-container input[type='number']::-webkit-inner-spin-button {
   -webkit-appearance: none;
   display: none;
 }
 
-.customize-gas-tooltip-container input[type="number"]:hover::-webkit-inner-spin-button {
+.customize-gas-tooltip-container input[type='number']:hover::-webkit-inner-spin-button {
   -webkit-appearance: none;
   display: none;
 }
@@ -684,10 +684,19 @@
       flex-grow: 1;
     }
 
+    @media screen and (max-width: $break-small) {
+      &__asset-data {
+        width: 60%;
+      }
+    }
+
     &__symbol {
       @include Paragraph;
 
       margin-bottom: 2px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     &__name {
@@ -1061,12 +1070,12 @@
       justify-content: center;
     }
 
-    input[type="number"]::-webkit-inner-spin-button {
+    input[type='number']::-webkit-inner-spin-button {
       -webkit-appearance: none;
       display: none;
     }
 
-    input[type="number"]:hover::-webkit-inner-spin-button {
+    input[type='number']:hover::-webkit-inner-spin-button {
       -webkit-appearance: none;
       display: none;
     }

ui/ducks/send/send.js

@@ -1438,7 +1438,10 @@ export function updateSendAsset({ type, details }) {
             details.address,
             userAddress,
           );
-          if (standard === ERC721 || standard === ERC1155) {
+          if (
+            process.env.COLLECTIBLES_V1 &&
+            (standard === ERC721 || standard === ERC1155)
+          ) {
             await dispatch(hideLoadingIndication());
             dispatch(
               showModal({

ui/ducks/send/send.test.js

@@ -1524,6 +1524,7 @@ describe('Send Slice', () => {
       });
 
       it('should show ConvertTokenToNFT modal and throw "invalidAssetType" error when token passed in props is an ERC721 or ERC1155', async () => {
+        process.env.COLLECTIBLES_V1 = true;
         getTokenStandardAndDetailsStub.mockImplementation(() =>
           Promise.resolve({ standard: 'ERC1155' }),
         );
@@ -1552,6 +1553,7 @@ describe('Send Slice', () => {
           },
           type: 'UI_MODAL_OPEN',
         });
+        process.env.COLLECTIBLES_V1 = false;
       });
     });
 

ui/store/actions.js

@@ -2767,13 +2767,26 @@ export function loadingTokenParamsFinished() {
   };
 }
 
-export function getTokenParams(tokenAddress) {
+export function getTokenParams(address) {
   return (dispatch, getState) => {
     const tokenList = getTokenList(getState());
     const existingTokens = getState().metamask.tokens;
-    const existingToken = existingTokens.find(({ address }) =>
+    const { selectedAddress } = getState().metamask;
-      isEqualCaseInsensitive(tokenAddress, address),
+    const { chainId } = getState().metamask.provider;
+    const existingCollectibles = getState().metamask?.allCollectibles?.[
+      selectedAddress
+    ]?.[chainId];
+    const existingToken = existingTokens.find(({ address: tokenAddress }) =>
+      isEqualCaseInsensitive(address, tokenAddress),
     );
+    const existingCollectible = existingCollectibles?.find(
+      ({ address: collectibleAddress }) =>
+        isEqualCaseInsensitive(address, collectibleAddress),
+    );
+
+    if (existingCollectible) {
+      return null;
+    }
 
     if (existingToken) {
       return Promise.resolve({
@@ -2785,9 +2798,9 @@ export function getTokenParams(tokenAddress) {
     dispatch(loadingTokenParamsStarted());
     log.debug(`loadingTokenParams`);
 
-    return getSymbolAndDecimals(tokenAddress, tokenList).then(
+    return getSymbolAndDecimals(address, tokenList).then(
       ({ symbol, decimals }) => {
-        dispatch(addToken(tokenAddress, symbol, Number(decimals)));
+        dispatch(addToken(address, symbol, Number(decimals)));
         dispatch(loadingTokenParamsFinished());
       },
     );