Adding collectibles feature flag, default NFT tab (#12463)

* Adding COLLECTIBLES_V1 feature flag

* Adding NFT's tab to home screen, default CollectiblesList view

* Handling null children in Tabs component

app/_locales/en/messages.json

@@ -82,6 +82,9 @@
   "addFriendsAndAddresses": {
     "message": "Add friends and addresses you trust"
   },
+  "addNFT": {
+    "message": "Add NFT"
+  },
   "addNetwork": {
     "message": "Add Network"
   },
@@ -1542,6 +1545,9 @@
     "message": "Nonce is higher than suggested nonce of $1",
     "description": "The next nonce according to MetaMask's internal logic"
   },
+  "nfts": {
+    "message": "NFTs"
+  },
   "noAccountsFound": {
     "message": "No accounts found for the given search query"
   },
@@ -1554,6 +1560,12 @@
   "noConversionRateAvailable": {
     "message": "No Conversion Rate Available"
   },
+  "noNFTs": {
+    "message": "No NFTs to show"
+  },
+  "noNFTsDetails": {
+    "message": "Your NFTs will show up here. If you don't see your NFT, try importing manually."
+  },
   "noThanks": {
     "message": "No Thanks"
   },

development/build/scripts.js

@@ -33,6 +33,7 @@ const metamaskrc = require('rc')('metamask', {
   INFURA_FLASK_PROJECT_ID: process.env.INFURA_FLASK_PROJECT_ID,
   INFURA_PROD_PROJECT_ID: process.env.INFURA_PROD_PROJECT_ID,
   ONBOARDING_V2: process.env.ONBOARDING_V2,
+  COLLECTIBLES_V1: process.env.COLLECTIBLES_V1,
   SEGMENT_HOST: process.env.SEGMENT_HOST,
   SEGMENT_WRITE_KEY: process.env.SEGMENT_WRITE_KEY,
   SEGMENT_BETA_WRITE_KEY: process.env.SEGMENT_BETA_WRITE_KEY,
@@ -726,6 +727,7 @@ function getEnvironmentVariables({ buildType, devMode, testing }) {
     SEGMENT_WRITE_KEY: getSegmentWriteKey({ buildType, environment }),
     SWAPS_USE_DEV_APIS: process.env.SWAPS_USE_DEV_APIS === '1',
     ONBOARDING_V2: metamaskrc.ONBOARDING_V2 === '1',
+    COLLECTIBLES_V1: metamaskrc.COLLECTIBLES_V1 === '1',
   };
 }
 

ui/components/app/collectibles-list/collectibles-list.component.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Box from '../../ui/box';
+import Button from '../../ui/button';
+import Typography from '../../ui/typography/typography';
+import {
+  COLORS,
+  TYPOGRAPHY,
+  TEXT_ALIGN,
+  BLOCK_SIZES,
+  JUSTIFY_CONTENT,
+  FLEX_DIRECTION,
+} from '../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { getEnvironmentType } from '../../../../app/scripts/lib/util';
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
+
+export default function CollectiblesList({ onAddNFT }) {
+  const collectibles = [];
+  const t = useI18nContext();
+  const blockSizes = {
+    copy:
+      getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+        ? BLOCK_SIZES.TWO_THIRDS
+        : BLOCK_SIZES.ONE_THIRD,
+    button:
+      getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+        ? BLOCK_SIZES.HALF
+        : BLOCK_SIZES.ONE_FIFTH,
+  };
+
+  return (
+    <div className="collectibles-list">
+      {collectibles.length > 0 ? (
+        <span>{JSON.stringify(collectibles)}</span>
+      ) : (
+        <Box padding={[4, 0, 4, 0]} flexDirection={FLEX_DIRECTION.COLUMN}>
+          <Box justifyContent={JUSTIFY_CONTENT.CENTER}>
+            <img src="./images/diamond.png" />
+          </Box>
+          <Typography
+            color={COLORS.UI3}
+            variant={TYPOGRAPHY.H3}
+            align={TEXT_ALIGN.CENTER}
+          >
+            {t('noNFTs')}
+          </Typography>
+          <Box justifyContent={JUSTIFY_CONTENT.CENTER}>
+            <Box width={blockSizes.copy}>
+              <Typography
+                color={COLORS.UI3}
+                variant={TYPOGRAPHY.H5}
+                align={TEXT_ALIGN.CENTER}
+              >
+                {t('noNFTsDetails')}
+              </Typography>
+            </Box>
+          </Box>
+          <Box marginTop={6} justifyContent={JUSTIFY_CONTENT.CENTER}>
+            <Box width={blockSizes.button}>
+              <Button type="primary" onClick={onAddNFT}>
+                {t('addNFT')}
+              </Button>
+            </Box>
+          </Box>
+          <Box marginTop={2}>
+            <Button
+              href="https://community.metamask.io/"
+              target="_blank"
+              type="link"
+              rel="noopener noreferrer"
+            >
+              {t('learnMore')}
+            </Button>
+          </Box>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+CollectiblesList.propTypes = {
+  onAddNFT: PropTypes.func.isRequired,
+};

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

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

ui/components/ui/tabs/tabs.component.js

@@ -42,9 +42,9 @@ export default class Tabs extends Component {
   }
 
   renderTabs() {
-    const numberOfTabs = React.Children.count(this.props.children);
+    const numberOfTabs = React.Children.count(this._getValidChildren());
 
-    return React.Children.map(this.props.children, (child, index) => {
+    return React.Children.map(this._getValidChildren(), (child, index) => {
       const tabName = child?.props.name;
       return (
         child &&
@@ -58,7 +58,7 @@ export default class Tabs extends Component {
   }
 
   renderActiveTabContent() {
-    const { children } = this.props;
+    const children = this._getValidChildren();
     const { activeTabIndex } = this.state;
 
     if (
@@ -92,8 +92,12 @@ export default class Tabs extends Component {
    * @private
    */
   _findChildByName(name) {
-    return React.Children.toArray(this.props.children).findIndex(
-      (c) => c?.props.name === name,
-    );
+    return this._getValidChildren().findIndex((c) => c?.props.name === name);
+  }
+
+  // This ignores any 'null' child elements that are a result of a conditional
+  // based on a feature flag setting.
+  _getValidChildren() {
+    return React.Children.toArray(this.props.children).filter(Boolean);
   }
 }

ui/pages/home/home.component.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Redirect, Route } from 'react-router-dom';
 import { formatDate } from '../../helpers/utils/util';
 import AssetList from '../../components/app/asset-list';
+import CollectiblesList from '../../components/app/collectibles-list';
 import HomeNotification from '../../components/app/home-notification';
 import MultipleNotifications from '../../components/app/multiple-notifications';
 import TransactionList from '../../components/app/transaction-list';
@@ -428,6 +429,20 @@ export default class Home extends PureComponent {
                   }
                 />
               </Tab>
+              {process.env.COLLECTIBLES_V1 ? (
+                <Tab
+                  activeClassName="home__tab--active"
+                  className="home__tab"
+                  data-testid="home__nfts-tab"
+                  name={t('nfts')}
+                >
+                  <CollectiblesList
+                    onAddNFT={() => {
+                      console.log('Added NFT');
+                    }}
+                  />
+                </Tab>
+              ) : null}
               <Tab
                 activeClassName="home__tab--active"
                 className="home__tab"