Feat/check update collectible ownership (#13110)

* Use method to check and update collectible ownership

app/scripts/background.js

@@ -11,6 +11,7 @@ import { storeAsStream, storeTransformStream } from '@metamask/obs-store';
 import PortStream from 'extension-port-stream';
 import { captureException } from '@sentry/browser';
 
+import { ethErrors } from 'eth-rpc-errors';
 import {
   ENVIRONMENT_TYPE_POPUP,
   ENVIRONMENT_TYPE_NOTIFICATION,
@@ -534,7 +535,9 @@ function setupController(initState, initLangCode) {
       );
 
     // Finally, reject all approvals managed by the ApprovalController
-    controller.approvalController.clear();
+    controller.approvalController.clear(
+      ethErrors.provider.userRejectedRequest(),
+    );
 
     updateBadge();
   }

app/scripts/metamask-controller.js

@@ -1161,6 +1161,10 @@ export default class MetamaskController extends EventEmitter {
         collectiblesController,
       ),
 
+      checkAndUpdateCollectiblesOwnershipStatus: collectiblesController.checkAndUpdateCollectiblesOwnershipStatus.bind(
+        collectiblesController,
+      ),
+
       // AddressController
       setAddressBook: addressBookController.set.bind(addressBookController),
       removeFromAddressBook: addressBookController.delete.bind(

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": "^22.0.0",
+    "@metamask/controllers": "^23.0.0",
     "@metamask/eth-ledger-bridge-keyring": "^0.10.0",
     "@metamask/eth-token-tracker": "^3.0.1",
     "@metamask/etherscan-link": "^2.1.0",

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

@@ -24,8 +24,15 @@ const width =
   getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
     ? BLOCK_SIZES.ONE_THIRD
     : BLOCK_SIZES.ONE_SIXTH;
-export default function CollectiblesItems({ collections = {} }) {
+
-  const defaultDropdownState = {};
+const PREVIOUSLY_OWNED_KEY = 'previouslyOwned';
+
+export default function CollectiblesItems({
+  collections = {},
+  previouslyOwnedCollection = {},
+}) {
+  const defaultDropdownState = { [PREVIOUSLY_OWNED_KEY]: false };
+  const [dropdownState, setDropdownState] = useState(defaultDropdownState);
   const ipfsGateway = useSelector(getIpfsGateway);
 
   Object.keys(collections).forEach((key) => {
@@ -33,23 +40,45 @@ export default function CollectiblesItems({ collections = {} }) {
   });
   const history = useHistory();
 
-  const [dropdownState, setDropdownState] = useState(defaultDropdownState);
+  const renderCollectionImage = (
+    isPreviouslyOwnedCollection,
+    collectionImage,
+    collectionName,
+  ) => {
+    if (isPreviouslyOwnedCollection) {
+      return null;
+    }
+    if (collectionImage) {
       return (
-    <div className="collectibles-items">
+        <img
-      <Box padding={[6, 4]} flexDirection={FLEX_DIRECTION.COLUMN}>
+          src={collectionImage}
-        <>
+          className="collectibles-items__collection-image"
-          {Object.keys(collections).map((key, index) => {
+        />
-            const {
+      );
+    }
+    return (
+      <div className="collectibles-items__collection-image-alt">
+        {collectionName[0]}
+      </div>
+    );
+  };
+
+  const renderCollection = ({
     collectibles,
     collectionName,
     collectionImage,
-            } = collections[key];
+    key,
+    isPreviouslyOwnedCollection,
+  }) => {
+    if (!collectibles.length) {
+      return null;
+    }
 
     const isExpanded = dropdownState[key];
     return (
       <div
         className="collectibles-items__collection"
-                key={`collection-${index}`}
+        key={`collection-${key}`}
         onClick={() => {
           setDropdownState((_dropdownState) => ({
             ..._dropdownState,
@@ -68,15 +97,10 @@ export default function CollectiblesItems({ collections = {} }) {
             alignItems={ALIGN_ITEMS.CENTER}
             className="collectibles-items__collection-header"
           >
-                    {collectionImage ? (
+            {renderCollectionImage(
-                      <img
+              isPreviouslyOwnedCollection,
-                        src={collectionImage}
+              collectionImage,
-                        className="collectibles-items__collection-image"
+              collectionName,
-                      />
-                    ) : (
-                      <div className="collectibles-items__collection-image-alt">
-                        {collectionName[0]}
-                      </div>
             )}
             <Typography
               color={COLORS.BLACK}
@@ -87,26 +111,14 @@ export default function CollectiblesItems({ collections = {} }) {
             </Typography>
           </Box>
           <Box alignItems={ALIGN_ITEMS.FLEX_END}>
-                    <i
+            <i className={`fa fa-chevron-${isExpanded ? 'down' : 'right'}`} />
-                      className={`fa fa-chevron-${
-                        isExpanded ? 'down' : 'right'
-                      }`}
-                    />
           </Box>
         </Box>
         {isExpanded ? (
           <Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP} gap={4}>
             {collectibles.map((collectible, i) => {
-                      const {
+              const { image, address, tokenId, backgroundColor } = collectible;
-                        image,
+              const collectibleImage = getAssetImageURL(image, ipfsGateway);
-                        address,
-                        tokenId,
-                        backgroundColor,
-                      } = collectible;
-                      const collectibleImage = getAssetImageURL(
-                        image,
-                        ipfsGateway,
-                      );
               return (
                 <Box
                   width={width}
@@ -121,9 +133,7 @@ export default function CollectiblesItems({ collections = {} }) {
                   >
                     <img
                       onClick={() =>
-                                history.push(
+                        history.push(`${ASSET_ROUTE}/${address}/${tokenId}`)
-                                  `${ASSET_ROUTE}/${address}/${tokenId}`,
-                                )
                       }
                       className="collectibles-items__collection-item-image"
                       src={collectibleImage}
@@ -136,6 +146,32 @@ export default function CollectiblesItems({ collections = {} }) {
         ) : null}
       </div>
     );
+  };
+
+  return (
+    <div className="collectibles-items">
+      <Box padding={[6, 4]} flexDirection={FLEX_DIRECTION.COLUMN}>
+        <>
+          {Object.keys(collections).map((key) => {
+            const {
+              collectibles,
+              collectionName,
+              collectionImage,
+            } = collections[key];
+
+            return renderCollection({
+              collectibles,
+              collectionName,
+              collectionImage,
+              key,
+              isPreviouslyOwnedCollection: false,
+            });
+          })}
+          {renderCollection({
+            collectibles: previouslyOwnedCollection.collectibles,
+            collectionName: previouslyOwnedCollection.collectionName,
+            isPreviouslyOwnedCollection: true,
+            key: PREVIOUSLY_OWNED_KEY,
           })}
         </>
       </Box>
@@ -144,6 +180,26 @@ export default function CollectiblesItems({ collections = {} }) {
 }
 
 CollectiblesItems.propTypes = {
+  previouslyOwnedCollection: PropTypes.shape({
+    collectibles: PropTypes.arrayOf(
+      PropTypes.shape({
+        address: PropTypes.string.isRequired,
+        tokenId: PropTypes.string.isRequired,
+        name: PropTypes.string,
+        description: PropTypes.string,
+        image: PropTypes.string,
+        standard: PropTypes.string,
+        imageThumbnail: PropTypes.string,
+        imagePreview: PropTypes.string,
+        creator: PropTypes.shape({
+          address: PropTypes.string,
+          config: PropTypes.string,
+          profile_img_url: PropTypes.string,
+        }),
+      }),
+    ),
+    collectionName: PropTypes.string,
+  }),
   collections: PropTypes.shape({
     collectibles: PropTypes.arrayOf(
       PropTypes.shape({

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

@@ -24,7 +24,10 @@ import {
 } from '../../../ducks/metamask/metamask';
 import { getIsMainnet, getUseCollectibleDetection } from '../../../selectors';
 import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes';
-import { detectCollectibles } from '../../../store/actions';
+import {
+  checkAndUpdateCollectiblesOwnershipStatus,
+  detectCollectibles,
+} from '../../../store/actions';
 
 export default function CollectiblesTab({ onAddNFT }) {
   const collectibles = useSelector(getCollectibles);
@@ -38,9 +41,16 @@ export default function CollectiblesTab({ onAddNFT }) {
   const t = useI18nContext();
   const dispatch = useDispatch();
 
+  const getCollections = () => {
     const collections = {};
+    const previouslyOwnedCollection = {
+      collectionName: 'Previously Owned',
+      collectibles: [],
+    };
     collectibles.forEach((collectible) => {
-    if (collections[collectible.address]) {
+      if (collectible?.isCurrentlyOwned === false) {
+        previouslyOwnedCollection.collectibles.push(collectible);
+      } else if (collections[collectible.address]) {
         collections[collectible.address].collectibles.push(collectible);
       } else {
         const collectionContract = collectibleContracts.find(
@@ -54,15 +64,29 @@ export default function CollectiblesTab({ onAddNFT }) {
         };
       }
     });
+    return [collections, previouslyOwnedCollection];
+  };
+
+  const [collections, previouslyOwnedCollection] = getCollections();
 
   const onEnableAutoDetect = () => {
     history.push(EXPERIMENTAL_ROUTE);
   };
 
+  const onRefresh = () => {
+    if (isMainnet) {
+      dispatch(detectCollectibles());
+    }
+    checkAndUpdateCollectiblesOwnershipStatus();
+  };
+
   return (
     <div className="collectibles-tab">
       {collectibles.length > 0 ? (
-        <CollectiblesItems collections={collections} />
+        <CollectiblesItems
+          collections={collections}
+          previouslyOwnedCollection={previouslyOwnedCollection}
+        />
       ) : (
         <Box padding={[6, 12, 6, 12]}>
           {isMainnet &&
@@ -115,23 +139,18 @@ export default function CollectiblesTab({ onAddNFT }) {
           alignItems={ALIGN_ITEMS.CENTER}
           justifyContent={JUSTIFY_CONTENT.CENTER}
         >
-          {isMainnet ? (
-            <>
           <Box
             className="collectibles-tab__link"
             justifyContent={JUSTIFY_CONTENT.FLEX_END}
           >
-                {useCollectibleDetection ? (
+            {isMainnet && !useCollectibleDetection ? (
-                  <Button
-                    type="link"
-                    onClick={() => dispatch(detectCollectibles())}
-                  >
-                    {t('refreshList')}
-                  </Button>
-                ) : (
               <Button type="link" onClick={onEnableAutoDetect}>
                 {t('enableAutoDetect')}
               </Button>
+            ) : (
+              <Button type="link" onClick={onRefresh}>
+                {t('refreshList')}
+              </Button>
             )}
           </Box>
           <Typography
@@ -141,8 +160,6 @@ export default function CollectiblesTab({ onAddNFT }) {
           >
             {t('or')}
           </Typography>
-            </>
-          ) : null}
           <Box
             justifyContent={JUSTIFY_CONTENT.FLEX_START}
             className="collectibles-tab__link"

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

@@ -172,9 +172,13 @@ const render = ({
 describe('Collectible Items', () => {
   const detectCollectiblesStub = jest.fn();
   const setCollectiblesDetectionNoticeDismissedStub = jest.fn();
+  const getStateStub = jest.fn();
+  const checkAndUpdateCollectiblesOwnershipStatusStub = jest.fn();
   setBackgroundConnection({
     setCollectiblesDetectionNoticeDismissed: setCollectiblesDetectionNoticeDismissedStub,
     detectCollectibles: detectCollectiblesStub,
+    getState: getStateStub,
+    checkAndUpdateCollectiblesOwnershipStatus: checkAndUpdateCollectiblesOwnershipStatusStub,
   });
   const historyPushMock = jest.fn();
 
@@ -264,15 +268,33 @@ describe('Collectible Items', () => {
     });
   });
   describe('Collectibles options', () => {
-    it('should render a link "Refresh list" when some collectibles are present and collectible auto-detection preference is set to true, which, when clicked calls a method DetectCollectibles', () => {
+    it('should render a link "Refresh list" when some collectibles are present on mainnet and collectible auto-detection preference is set to true, which, when clicked calls methods DetectCollectibles and checkAndUpdateCollectiblesOwnershipStatus', () => {
       render({
         selectedAddress: ACCOUNT_1,
         collectibles: COLLECTIBLES,
         useCollectibleDetection: true,
       });
       expect(detectCollectiblesStub).not.toHaveBeenCalled();
+      expect(
+        checkAndUpdateCollectiblesOwnershipStatusStub,
+      ).not.toHaveBeenCalled();
       fireEvent.click(screen.queryByText('Refresh list'));
       expect(detectCollectiblesStub).toHaveBeenCalled();
+      expect(checkAndUpdateCollectiblesOwnershipStatusStub).toHaveBeenCalled();
+    });
+
+    it('should render a link "Refresh list" when some collectibles are present on a non-mainnet chain, which, when clicked calls a method checkAndUpdateCollectiblesOwnershipStatus', () => {
+      render({
+        chainId: '0x4',
+        selectedAddress: ACCOUNT_1,
+        collectibles: COLLECTIBLES,
+        useCollectibleDetection: true,
+      });
+      expect(
+        checkAndUpdateCollectiblesOwnershipStatusStub,
+      ).not.toHaveBeenCalled();
+      fireEvent.click(screen.queryByText('Refresh list'));
+      expect(checkAndUpdateCollectiblesOwnershipStatusStub).toHaveBeenCalled();
     });
 
     it('should render a link "Enable Autodetect" when some collectibles are present and collectible auto-detection preference is set to false, which, when clicked sends user to the experimental tab of settings', () => {

ui/store/actions.js

@@ -1391,6 +1391,10 @@ export function removeCollectible(address, tokenID, dontShowLoadingIndicator) {
   };
 }
 
+export async function checkAndUpdateCollectiblesOwnershipStatus() {
+  await promisifiedBackground.checkAndUpdateCollectiblesOwnershipStatus();
+}
+
 export function removeToken(address) {
   return async (dispatch) => {
     dispatch(showLoadingIndication());

yarn.lock

@@ -2643,10 +2643,10 @@
     web3 "^0.20.7"
     web3-provider-engine "^16.0.3"
 
-"@metamask/controllers@^22.0.0":
+"@metamask/controllers@^23.0.0":
-  version "22.0.0"
+  version "23.0.0"
-  resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-22.0.0.tgz#54f172be2ae7e32ce47536a1ff06e35cc6ee3c80"
+  resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-23.0.0.tgz#81ea9fa37924a14b08668f37e7e31f46091aa610"
-  integrity sha512-5m4aT+B87IOAvvlbfgqI5n7Pd6VSQUjHBfm34qMBBL5jjUFUSfK6BL0h6ef2jxTE2VCuyBibQ8A7sETQ1+Hd+Q==
+  integrity sha512-6hKh5H0HM1YLTOdfuD8gRXGCG3brEhTagup204SrlmwabTReaIIb/zXTat7jCs6ZvN362a44GO5mboZ6W9MhIA==
   dependencies:
     "@ethereumjs/common" "^2.3.1"
     "@ethereumjs/tx" "^3.2.1"
@@ -2667,7 +2667,6 @@
     ethereumjs-wallet "^1.0.1"
     ethers "^5.4.1"
     ethjs-unit "^0.1.6"
-    ethjs-util "^0.1.6"
     human-standard-collectible-abi "^1.0.2"
     human-standard-multi-collectible-abi "^1.0.4"
     human-standard-token-abi "^2.0.0"