From d6d35d9acb2357cb0c0ed505582e279c9bae8514 Mon Sep 17 00:00:00 2001
From: ryanml <ryanlanese@gmail.com>
Date: Thu, 18 Nov 2021 11:30:56 -0700
Subject: [PATCH] Adding new nfts detected notice (#12721)

---
 app/_locales/en/messages.json                 |  9 +++
 .../collectibles-list.component.js            |  5 +-
 .../app/new-collectibles-notice/index.js      |  1 +
 .../new-collectibles-notice.component.js      | 56 +++++++++++++++++++
 4 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 ui/components/app/new-collectibles-notice/index.js
 create mode 100644 ui/components/app/new-collectibles-notice/new-collectibles-notice.component.js

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index f4ad0c777..7e65268e4 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1604,6 +1604,12 @@
   "newContract": {
     "message": "New Contract"
   },
+  "newNFTsDetected": {
+    "message": "New NFTs detected"
+  },
+  "newNFTsDetectedInfo": {
+    "message": "One or more new NFTs were detected in your wallet."
+  },
   "newNetworkAdded": {
     "message": "“$1” was successfully added!"
   },
@@ -2198,6 +2204,9 @@
   "selectHdPath": {
     "message": "Select HD Path"
   },
+  "selectNFTPrivacyPreference": {
+    "message": "Select NFT privacy preference"
+  },
   "selectPathHelp": {
     "message": "If you don't see the accounts you expect, try switching the HD path."
   },
diff --git a/ui/components/app/collectibles-list/collectibles-list.component.js b/ui/components/app/collectibles-list/collectibles-list.component.js
index 4fde98023..9620caa42 100644
--- a/ui/components/app/collectibles-list/collectibles-list.component.js
+++ b/ui/components/app/collectibles-list/collectibles-list.component.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Box from '../../ui/box';
 import Button from '../../ui/button';
 import Typography from '../../ui/typography/typography';
+import NewCollectiblesNotice from '../new-collectibles-notice';
 import {
   COLORS,
   TYPOGRAPHY,
@@ -15,6 +16,7 @@ import { useI18nContext } from '../../../hooks/useI18nContext';
 
 export default function CollectiblesList({ onAddNFT }) {
   const collectibles = [];
+  const newNFTsDetected = true;
   const t = useI18nContext();
 
   return (
@@ -22,7 +24,8 @@ export default function CollectiblesList({ onAddNFT }) {
       {collectibles.length > 0 ? (
         <span>{JSON.stringify(collectibles)}</span>
       ) : (
-        <Box padding={[4, 0, 4, 0]}>
+        <Box padding={[6, 12, 6, 12]}>
+          {newNFTsDetected ? <NewCollectiblesNotice /> : null}
           <Box justifyContent={JUSTIFY_CONTENT.CENTER}>
             <img src="./images/no-nfts.svg" />
           </Box>
diff --git a/ui/components/app/new-collectibles-notice/index.js b/ui/components/app/new-collectibles-notice/index.js
new file mode 100644
index 000000000..2f54229ac
--- /dev/null
+++ b/ui/components/app/new-collectibles-notice/index.js
@@ -0,0 +1 @@
+export { default } from './new-collectibles-notice.component';
diff --git a/ui/components/app/new-collectibles-notice/new-collectibles-notice.component.js b/ui/components/app/new-collectibles-notice/new-collectibles-notice.component.js
new file mode 100644
index 000000000..0d77128ca
--- /dev/null
+++ b/ui/components/app/new-collectibles-notice/new-collectibles-notice.component.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import Box from '../../ui/box';
+import Dialog from '../../ui/dialog';
+import Typography from '../../ui/typography/typography';
+import {
+  COLORS,
+  TYPOGRAPHY,
+  TEXT_ALIGN,
+  FONT_WEIGHT,
+  DISPLAY,
+} from '../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+
+export default function NewCollectiblesNotice() {
+  const t = useI18nContext();
+
+  return (
+    <Box marginBottom={8}>
+      <Dialog type="message">
+        <Box display={DISPLAY.FLEX}>
+          <Box paddingTop={2}>
+            <i style={{ fontSize: '1rem' }} className="fa fa-info-circle" />
+          </Box>
+          <Box paddingLeft={4}>
+            <Typography
+              color={COLORS.BLACK}
+              align={TEXT_ALIGN.LEFT}
+              variant={TYPOGRAPHY.Paragraph}
+              fontWeight={FONT_WEIGHT.BOLD}
+            >
+              {t('newNFTsDetected')}
+            </Typography>
+            <Typography
+              color={COLORS.BLACK}
+              align={TEXT_ALIGN.LEFT}
+              variant={TYPOGRAPHY.Paragraph}
+              boxProps={{ marginBottom: 4 }}
+            >
+              {t('newNFTsDetectedInfo')}
+            </Typography>
+            <a
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                console.log('show preference popover');
+              }}
+              style={{ fontSize: '.9rem' }}
+            >
+              {t('selectNFTPrivacyPreference')}
+            </a>
+          </Box>
+        </Box>
+      </Dialog>
+    </Box>
+  );
+}