Adding collectibles items overview (#12506)

* Adding collectibles items overview

* addressing feedback

Co-authored-by: Alex <adonesky@gmail.com>

app/_locales/en/messages.json

@@ -139,6 +139,9 @@
   "addNFT": {
     "message": "Add NFT"
   },
+  "addNFTLowerCase": {
+    "message": "add NFT"
+  },
   "addNetwork": {
     "message": "Add Network"
   },

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

@@ -0,0 +1,148 @@
+import React, { useState } 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,
+  JUSTIFY_CONTENT,
+  FLEX_DIRECTION,
+  ALIGN_ITEMS,
+  DISPLAY,
+  BLOCK_SIZES,
+  SIZES,
+  FLEX_WRAP,
+} from '../../../helpers/constants/design-system';
+import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { getEnvironmentType } from '../../../../app/scripts/lib/util';
+
+export default function CollectiblesItems({ onAddNFT, onRefreshList }) {
+  const t = useI18nContext();
+  const collections = {};
+  const defaultDropdownState = {};
+
+  Object.keys(collections).forEach((key) => {
+    defaultDropdownState[key] = true;
+  });
+
+  const [dropdownState, setDropdownState] = useState(defaultDropdownState);
+  const width =
+    getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+      ? BLOCK_SIZES.ONE_THIRD
+      : BLOCK_SIZES.ONE_SIXTH;
+  return (
+    <div className="collectibles-items">
+      <Box padding={[4, 6, 4, 6]} flexDirection={FLEX_DIRECTION.COLUMN}>
+        <>
+          {Object.keys(collections).map((key, index) => {
+            const { icon, collectibles } = collections[key];
+            const isExpanded = dropdownState[key];
+
+            return (
+              <div key={`collection-${index}`}>
+                <Box
+                  marginTop={4}
+                  marginBottom={4}
+                  display={DISPLAY.FLEX}
+                  alignItems={ALIGN_ITEMS.CENTER}
+                  justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
+                >
+                  <Box alignItems={ALIGN_ITEMS.CENTER}>
+                    <img width="28" src={icon} />
+                    <Typography
+                      color={COLORS.BLACK}
+                      variant={TYPOGRAPHY.H4}
+                      margin={[0, 0, 0, 2]}
+                    >
+                      {`${key} (${collectibles.length})`}
+                    </Typography>
+                  </Box>
+                  <Box alignItems={ALIGN_ITEMS.FLEX_END}>
+                    <i
+                      className={`fa fa-lg fa-chevron-${
+                        isExpanded ? 'down' : 'right'
+                      }`}
+                      onClick={() => {
+                        setDropdownState((_dropdownState) => ({
+                          ..._dropdownState,
+                          [key]: !isExpanded,
+                        }));
+                      }}
+                    />
+                  </Box>
+                </Box>
+                {isExpanded ? (
+                  <Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP}>
+                    {collectibles.map((collectible, i) => {
+                      return (
+                        <Box width={width} padding={2} key={`collectible-${i}`}>
+                          <Box
+                            borderRadius={SIZES.MD}
+                            backgroundColor={collectible.backgroundColor}
+                          >
+                            <img src={collectible.icon} />
+                          </Box>
+                        </Box>
+                      );
+                    })}
+                  </Box>
+                ) : null}
+              </div>
+            );
+          })}
+          <Box
+            marginTop={6}
+            flexDirection={FLEX_DIRECTION.COLUMN}
+            justifyContent={JUSTIFY_CONTENT.CENTER}
+          >
+            <Typography
+              color={COLORS.UI3}
+              variant={TYPOGRAPHY.H5}
+              align={TEXT_ALIGN.CENTER}
+            >
+              {t('missingNFT')}
+            </Typography>
+            <Box
+              alignItems={ALIGN_ITEMS.CENTER}
+              justifyContent={JUSTIFY_CONTENT.CENTER}
+            >
+              <Box justifyContent={JUSTIFY_CONTENT.FLEX_END}>
+                <Button
+                  type="link"
+                  onClick={onRefreshList}
+                  style={{ padding: '4px' }}
+                >
+                  {t('refreshList')}
+                </Button>
+              </Box>
+              <Typography
+                color={COLORS.UI3}
+                variant={TYPOGRAPHY.H4}
+                align={TEXT_ALIGN.CENTER}
+              >
+                {t('or')}
+              </Typography>
+              <Box justifyContent={JUSTIFY_CONTENT.FLEX_START}>
+                <Button
+                  type="link"
+                  onClick={onAddNFT}
+                  style={{ padding: '4px' }}
+                >
+                  {t('addNFTLowerCase')}
+                </Button>
+              </Box>
+            </Box>
+          </Box>
+        </>
+      </Box>
+    </div>
+  );
+}
+
+CollectiblesItems.propTypes = {
+  onAddNFT: PropTypes.func.isRequired,
+  onRefreshList: PropTypes.func.isRequired,
+};

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

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

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

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

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

@@ -4,6 +4,7 @@ import Box from '../../ui/box';
 import Button from '../../ui/button';
 import Typography from '../../ui/typography/typography';
 import NewCollectiblesNotice from '../new-collectibles-notice';
+import CollectiblesItems from '../collectibles-items';
 import {
   COLORS,
   TYPOGRAPHY,
@@ -14,15 +15,20 @@ import {
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
-export default function CollectiblesList({ onAddNFT }) {
+export default function CollectiblesTab({ onAddNFT }) {
   const collectibles = [];
-  const newNFTsDetected = true;
+  const newNFTsDetected = false;
   const t = useI18nContext();
 
   return (
-    <div className="collectibles-list">
+    <div className="collectibles-tab">
       {collectibles.length > 0 ? (
-        <span>{JSON.stringify(collectibles)}</span>
+        <CollectiblesItems
+          onAddNFT={onAddNFT}
+          onRefreshList={() => {
+            console.log('refreshing collectibles');
+          }}
+        />
       ) : (
         <Box padding={[6, 12, 6, 12]}>
           {newNFTsDetected ? <NewCollectiblesNotice /> : null}
@@ -79,6 +85,6 @@ export default function CollectiblesList({ onAddNFT }) {
   );
 }
 
-CollectiblesList.propTypes = {
+CollectiblesTab.propTypes = {
   onAddNFT: PropTypes.func.isRequired,
 };

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

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

ui/pages/home/home.component.js

@@ -3,7 +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 CollectiblesTab from '../../components/app/collectibles-tab';
 import HomeNotification from '../../components/app/home-notification';
 import MultipleNotifications from '../../components/app/multiple-notifications';
 import TransactionList from '../../components/app/transaction-list';
@@ -454,7 +454,7 @@ export default class Home extends PureComponent {
                   data-testid="home__nfts-tab"
                   name={t('nfts')}
                 >
-                  <CollectiblesList
+                  <CollectiblesTab
                     onAddNFT={() => {
                       history.push(ADD_COLLECTIBLE_ROUTE);
                     }}