Feat/collectibles the return (#12970)

* Wire collectibles frontend UI with controller data

app/_locales/en/messages.json

@@ -139,9 +139,6 @@
   "addNFT": {
     "message": "Add NFT"
   },
-  "addNFTLowerCase": {
-    "message": "add NFT"
-  },
   "addNetwork": {
     "message": "Add Network"
   },
@@ -568,6 +565,9 @@
   "contract": {
     "message": "Contract"
   },
+  "contractAddress": {
+    "message": "Contract address"
+  },
   "contractAddressError": {
     "message": "You are sending tokens to the token's contract address. This may result in the loss of these tokens."
   },
@@ -717,6 +717,9 @@
   "depositEther": {
     "message": "Deposit Ether"
   },
+  "description": {
+    "message": "Description"
+  },
   "details": {
     "message": "Details"
   },
@@ -908,6 +911,9 @@
   "editPermission": {
     "message": "Edit Permission"
   },
+  "enableAutoDetect": {
+    "message": " Enable Autodetect"
+  },
   "enableFromSettings": {
     "message": " Enable it from Settings."
   },
@@ -1350,6 +1356,9 @@
   "importMyWallet": {
     "message": "Import My Wallet"
   },
+  "importNFTs": {
+    "message": "Import NFTs"
+  },
   "importTokenQuestion": {
     "message": "Import token?"
   },
@@ -1485,6 +1494,9 @@
   "learnMore": {
     "message": "learn more"
   },
+  "learnMoreUpperCase": {
+    "message": "Learn more"
+  },
   "learnScamRisk": {
     "message": "scams and security risks."
   },
@@ -1542,6 +1554,9 @@
   "likeToImportTokens": {
     "message": "Would you like to import these tokens?"
   },
+  "link": {
+    "message": "Link"
+  },
   "links": {
     "message": "Links"
   },
@@ -1812,10 +1827,10 @@
     "message": "New Contract"
   },
   "newNFTsDetected": {
-    "message": "New NFTs detected"
+    "message": "New! NFT detection"
   },
   "newNFTsDetectedInfo": {
-    "message": "One or more new NFTs were detected in your wallet."
+    "message": "Allow MetaMask to automatically detect NFTs from Opensea and display in your MetaMask wallet."
   },
   "newNetworkAdded": {
     "message": "“$1” was successfully added!"
@@ -2255,6 +2270,9 @@
   "removeAccountDescription": {
     "message": "This account will be removed from your wallet. Please make sure you have the original Secret Recovery Phrase or private key for this imported account before continuing. You can import or create accounts again from the account drop-down. "
   },
+  "removeNFT": {
+    "message": "Remove NFT"
+  },
   "requestsAwaitingAcknowledgement": {
     "message": "requests waiting to be acknowledged"
   },
@@ -2443,7 +2461,7 @@
     "message": "Select HD Path"
   },
   "selectNFTPrivacyPreference": {
-    "message": "Select NFT privacy preference"
+    "message": "Turn on NFT detection in Settings"
   },
   "selectPathHelp": {
     "message": "If you don't see the accounts you expect, try switching the HD path."
@@ -2573,6 +2591,9 @@
   "somethingWentWrong": {
     "message": "Oops! Something went wrong."
   },
+  "source": {
+    "message": "Source"
+  },
   "speedUp": {
     "message": "Speed Up"
   },
@@ -3359,6 +3380,9 @@
     "message": "View $1 on Etherscan",
     "description": "$1 is the action type. e.g (Account, Transaction, Swap)"
   },
+  "viewOnOpensea": {
+    "message": "View on Opensea"
+  },
   "viewinExplorer": {
     "message": "View $1 in Explorer",
     "description": "$1 is the action type. e.g (Account, Transaction, Swap)"

app/scripts/controllers/app-state.js

@@ -31,6 +31,7 @@ export default class AppStateController extends EventEmitter {
       fullScreenGasPollTokens: [],
       recoveryPhraseReminderHasBeenShown: false,
       recoveryPhraseReminderLastShown: new Date().getTime(),
+      collectiblesDetectionNoticeDismissed: false,
       showTestnetMessageInDropdown: true,
       trezorModel: null,
       ...initState,
@@ -252,4 +253,15 @@ export default class AppStateController extends EventEmitter {
   setTrezorModel(trezorModel) {
     this.store.updateState({ trezorModel });
   }
+
+  /**
+   * A setter for the `collectiblesDetectionNoticeDismissed` property
+   */
+  setCollectiblesDetectionNoticeDismissed(
+    collectiblesDetectionNoticeDismissed,
+  ) {
+    this.store.updateState({
+      collectiblesDetectionNoticeDismissed,
+    });
+  }
 }

app/scripts/controllers/preferences.js

@@ -3,7 +3,10 @@ import { ObservableStore } from '@metamask/obs-store';
 import { normalize as normalizeAddress } from 'eth-sig-util';
 import { ethers } from 'ethers';
 import log from 'loglevel';
-import { NETWORK_TYPE_TO_ID_MAP } from '../../../shared/constants/network';
+import {
+  IPFS_DEFAULT_GATEWAY_URL,
+  NETWORK_TYPE_TO_ID_MAP,
+} from '../../../shared/constants/network';
 import { isPrefixedFormattedHexString } from '../../../shared/modules/network.utils';
 import { LEDGER_TRANSPORT_TYPES } from '../../../shared/constants/hardware-wallets';
 import { NETWORK_EVENTS } from './network';
@@ -61,7 +64,7 @@ export default class PreferencesController {
         hideZeroBalanceTokens: false,
       },
       // ENS decentralized website resolution
-      ipfsGateway: 'dweb.link',
+      ipfsGateway: IPFS_DEFAULT_GATEWAY_URL,
       infuraBlocked: null,
       ledgerTransportType: window.navigator.hid
         ? LEDGER_TRANSPORT_TYPES.WEBHID

app/scripts/lib/ens-ipfs/setup.js

@@ -50,6 +50,7 @@ export default function setupEnsIpfsResolver({
 
   async function attemptResolve({ tabId, name, pathname, search, fragment }) {
     const ipfsGateway = getIpfsGateway();
+
     extension.tabs.update(tabId, { url: `loading.html` });
     let url = `https://app.ens.domains/name/${name}`;
     try {

app/scripts/metamask-controller.js

@@ -206,32 +206,36 @@ export default class MetamaskController extends EventEmitter {
       provider: this.provider,
     });
 
-    this.collectiblesController = new CollectiblesController({
-      onPreferencesStateChange: this.preferencesController.store.subscribe.bind(
-        this.preferencesController.store,
-      ),
-      onNetworkStateChange: this.networkController.store.subscribe.bind(
-        this.networkController.store,
-      ),
-      getAssetName: this.assetsContractController.getAssetName.bind(
-        this.assetsContractController,
-      ),
-      getAssetSymbol: this.assetsContractController.getAssetSymbol.bind(
-        this.assetsContractController,
-      ),
-      getCollectibleTokenURI: this.assetsContractController.getCollectibleTokenURI.bind(
-        this.assetsContractController,
-      ),
-      getOwnerOf: this.assetsContractController.getOwnerOf.bind(
-        this.assetsContractController,
-      ),
-      balanceOfERC1155Collectible: this.assetsContractController.balanceOfERC1155Collectible.bind(
-        this.assetsContractController,
-      ),
-      uriERC1155Collectible: this.assetsContractController.uriERC1155Collectible.bind(
-        this.assetsContractController,
-      ),
-    });
+    this.collectiblesController = new CollectiblesController(
+      {
+        onPreferencesStateChange: this.preferencesController.store.subscribe.bind(
+          this.preferencesController.store,
+        ),
+        onNetworkStateChange: this.networkController.store.subscribe.bind(
+          this.networkController.store,
+        ),
+        getAssetName: this.assetsContractController.getAssetName.bind(
+          this.assetsContractController,
+        ),
+        getAssetSymbol: this.assetsContractController.getAssetSymbol.bind(
+          this.assetsContractController,
+        ),
+        getCollectibleTokenURI: this.assetsContractController.getCollectibleTokenURI.bind(
+          this.assetsContractController,
+        ),
+        getOwnerOf: this.assetsContractController.getOwnerOf.bind(
+          this.assetsContractController,
+        ),
+        balanceOfERC1155Collectible: this.assetsContractController.balanceOfERC1155Collectible.bind(
+          this.assetsContractController,
+        ),
+        uriERC1155Collectible: this.assetsContractController.uriERC1155Collectible.bind(
+          this.assetsContractController,
+        ),
+      },
+      {},
+      initState.CollectiblesController,
+    );
 
     process.env.COLLECTIBLES_V1 &&
       (this.collectibleDetectionController = new CollectibleDetectionController(
@@ -1182,7 +1186,9 @@ export default class MetamaskController extends EventEmitter {
       setShowTestnetMessageInDropdown: appStateController.setShowTestnetMessageInDropdown.bind(
         appStateController,
       ),
-
+      setCollectiblesDetectionNoticeDismissed: appStateController.setCollectiblesDetectionNoticeDismissed.bind(
+        appStateController,
+      ),
       // EnsController
       tryReverseResolveAddress: ensController.reverseResolveAddress.bind(
         ensController,

lavamoat/browserify/beta/policy.json

@@ -534,6 +534,7 @@
     "@metamask/controllers": {
       "globals": {
         "Headers": true,
+        "URL": true,
         "clearInterval": true,
         "clearTimeout": true,
         "console.error": true,
@@ -569,6 +570,7 @@
         "immer": true,
         "isomorphic-fetch": true,
         "jsonschema": true,
+        "multiformats": true,
         "nanoid": true,
         "punycode": true,
         "single-call-balance-checker-abi": true,
@@ -3548,6 +3550,13 @@
         "varint": true
       }
     },
+    "multiformats": {
+      "globals": {
+        "TextDecoder": true,
+        "TextEncoder": true,
+        "console.warn": true
+      }
+    },
     "multihashes": {
       "packages": {
         "bs58": true,

lavamoat/browserify/flask/policy.json

@@ -534,6 +534,7 @@
     "@metamask/controllers": {
       "globals": {
         "Headers": true,
+        "URL": true,
         "clearInterval": true,
         "clearTimeout": true,
         "console.error": true,
@@ -569,6 +570,7 @@
         "immer": true,
         "isomorphic-fetch": true,
         "jsonschema": true,
+        "multiformats": true,
         "nanoid": true,
         "punycode": true,
         "single-call-balance-checker-abi": true,
@@ -3548,6 +3550,13 @@
         "varint": true
       }
     },
+    "multiformats": {
+      "globals": {
+        "TextDecoder": true,
+        "TextEncoder": true,
+        "console.warn": true
+      }
+    },
     "multihashes": {
       "packages": {
         "bs58": true,

lavamoat/browserify/main/policy.json

@@ -534,6 +534,7 @@
     "@metamask/controllers": {
       "globals": {
         "Headers": true,
+        "URL": true,
         "clearInterval": true,
         "clearTimeout": true,
         "console.error": true,
@@ -569,6 +570,7 @@
         "immer": true,
         "isomorphic-fetch": true,
         "jsonschema": true,
+        "multiformats": true,
         "nanoid": true,
         "punycode": true,
         "single-call-balance-checker-abi": true,
@@ -3548,6 +3550,13 @@
         "varint": true
       }
     },
+    "multiformats": {
+      "globals": {
+        "TextDecoder": true,
+        "TextEncoder": true,
+        "console.warn": true
+      }
+    },
     "multihashes": {
       "packages": {
         "bs58": true,

package.json

@@ -107,7 +107,7 @@
     "@keystonehq/metamask-airgapped-keyring": "0.2.1",
     "@material-ui/core": "^4.11.0",
     "@metamask/contract-metadata": "^1.31.0",
-    "@metamask/controllers": "^20.1.0",
+    "@metamask/controllers": "^22.0.0",
     "@metamask/eth-ledger-bridge-keyring": "^0.10.0",
     "@metamask/eth-token-tracker": "^3.0.1",
     "@metamask/etherscan-link": "^2.1.0",

shared/constants/network.js

@@ -171,3 +171,5 @@ export const UNSUPPORTED_RPC_METHODS = new Set([
   // eth-json-rpc-middleware – but our UI does not support it.
   'eth_signTransaction',
 ]);
+
+export const IPFS_DEFAULT_GATEWAY_URL = 'dweb.link';

ui/components/app/app-components.scss

@@ -7,6 +7,11 @@
 @import 'app-header/index';
 @import 'asset-list-item/asset-list-item';
 @import 'confirm-page-container/index';
+@import 'collectibles-items/index';
+@import 'collectibles-tab/index';
+@import 'collectible-details/index';
+@import 'collectible-options/index';
+@import 'collectibles-detection-notice/index';
 @import 'connected-accounts-list/index';
 @import 'connected-accounts-permissions/index';
 @import 'connected-sites-list/index';