Implement 'Add NFT' screen (#12544)

* Implement 'Add NFT' screen

* Guarding added route with feature flag

app/_locales/en/messages.json

@@ -43,6 +43,9 @@
   "activityLog": {
     "message": "activity log"
   },
+  "add": {
+    "message": "Add"
+  },
   "addANetwork": {
     "message": "Add a network"
   },
@@ -100,6 +103,9 @@
   "addToken": {
     "message": "Add Token"
   },
+  "address": {
+    "message": "Address"
+  },
   "addressBookIcon": {
     "message": "Address book icon"
   },
@@ -1132,6 +1138,9 @@
   "history": {
     "message": "History"
   },
+  "id": {
+    "message": "ID"
+  },
   "import": {
     "message": "Import",
     "description": "Button to import an account from a selected file"
@@ -1601,6 +1610,9 @@
     "message": "Nonce is higher than suggested nonce of $1",
     "description": "The next nonce according to MetaMask's internal logic"
   },
+  "nftTokenIdPlaceholder": {
+    "message": "Enter the collectible ID"
+  },
   "nfts": {
     "message": "NFTs"
   },

ui/helpers/constants/routes.js

@@ -38,6 +38,7 @@ const AWAITING_SIGNATURES_ROUTE = '/swaps/awaiting-signatures';
 const AWAITING_SWAP_ROUTE = '/swaps/awaiting-swap';
 const SWAPS_ERROR_ROUTE = '/swaps/swaps-error';
 const SWAPS_MAINTENANCE_ROUTE = '/swaps/maintenance';
+const ADD_COLLECTIBLE_ROUTE = '/add-collectible';
 
 const INITIALIZE_ROUTE = '/initialize';
 const INITIALIZE_WELCOME_ROUTE = '/initialize/welcome';
@@ -218,6 +219,7 @@ export {
   AWAITING_SIGNATURES_ROUTE,
   SWAPS_ERROR_ROUTE,
   SWAPS_MAINTENANCE_ROUTE,
+  ADD_COLLECTIBLE_ROUTE,
   ONBOARDING_ROUTE,
   ONBOARDING_HELP_US_IMPROVE_ROUTE,
   ONBOARDING_CREATE_PASSWORD_ROUTE,

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

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+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';
+
+export default function AddCollectible() {
+  const t = useI18nContext();
+  const history = useHistory();
+
+  const [address, setAddress] = useState('');
+  const [tokenId, setTokenId] = useState('');
+
+  return (
+    <PageContainer
+      title={t('addNFT')}
+      onSubmit={() => {
+        console.log(
+          `Adding collectible with ID: ${tokenId} and address ${address}`,
+        );
+        history.push(DEFAULT_ROUTE);
+      }}
+      submitText={t('add')}
+      onCancel={() => {
+        history.push(DEFAULT_ROUTE);
+      }}
+      onClose={() => {
+        history.push(DEFAULT_ROUTE);
+      }}
+      disabled={false}
+      contentComponent={
+        <Box padding={4}>
+          <Box>
+            <TextField
+              id="address"
+              label={t('address')}
+              placeholder="0x..."
+              type="text"
+              value={address}
+              onChange={(e) => setAddress(e.target.value)}
+              fullWidth
+              autoFocus
+              margin="normal"
+            />
+          </Box>
+          <Box>
+            <TextField
+              id="token-id"
+              label={t('id')}
+              placeholder={t('nftTokenIdPlaceholder')}
+              type="number"
+              value={tokenId}
+              onChange={(e) => setTokenId(e.target.value)}
+              fullWidth
+              margin="normal"
+            />
+          </Box>
+        </Box>
+      }
+    />
+  );
+}

ui/pages/add-collectible/index.js

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

ui/pages/home/home.component.js

@@ -35,6 +35,7 @@ import {
   BUILD_QUOTE_ROUTE,
   VIEW_QUOTE_ROUTE,
   CONFIRMATION_V_NEXT_ROUTE,
+  ADD_COLLECTIBLE_ROUTE,
 } from '../../helpers/constants/routes';
 import BetaHomeFooter from './beta-home-footer.component';
 
@@ -438,7 +439,7 @@ export default class Home extends PureComponent {
                 >
                   <CollectiblesList
                     onAddNFT={() => {
-                      console.log('Added NFT');
+                      history.push(ADD_COLLECTIBLE_ROUTE);
                     }}
                   />
                 </Tab>

ui/pages/routes/routes.component.js

@@ -18,6 +18,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 ConfirmImportTokenPage from '../confirm-import-token';
 import ConfirmAddSuggestedTokenPage from '../confirm-add-suggested-token';
 import CreateAccountPage from '../create-account';
@@ -55,6 +56,7 @@ import {
   CONFIRM_IMPORT_TOKEN_ROUTE,
   INITIALIZE_ROUTE,
   ONBOARDING_ROUTE,
+  ADD_COLLECTIBLE_ROUTE,
 } from '../../helpers/constants/routes';
 
 import {
@@ -155,6 +157,13 @@ export default class Routes extends Component {
           component={ImportTokenPage}
           exact
         />
+        {process.env.COLLECTIBLES_V1 ? (
+          <Authenticated
+            path={ADD_COLLECTIBLE_ROUTE}
+            component={AddCollectiblePage}
+            exact
+          />
+        ) : null}
         <Authenticated
           path={CONFIRM_IMPORT_TOKEN_ROUTE}
           component={ConfirmImportTokenPage}