From f3b5b749f8c127f07e620bd573d52e3d2663cbb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Rocchi?=
 <84542297+rocky-fleek@users.noreply.github.com>
Date: Thu, 30 Sep 2021 18:03:24 -0300
Subject: [PATCH] Feat/departure labs nfts (#239)

* Added proper package versions and restored public key encoding

* Added dab integration

* It works ,missing fullwdth image on iframes

* Fixed iframes styles
---
 source/Popup/Views/NFTDetails/index.jsx | 16 +++++++++++-----
 source/components/Apps/index.jsx        |  1 -
 source/components/Apps/styles.js        |  4 ----
 source/locales/en/translation.json      |  3 +--
 source/redux/wallet.js                  |  2 +-
 source/ui/NFTDisplayer/index.jsx        |  4 ++--
 source/ui/NFTDisplayer/styles.js        | 15 +++++++++++++--
 7 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/source/Popup/Views/NFTDetails/index.jsx b/source/Popup/Views/NFTDetails/index.jsx
index 2d6ae6f1..684b08c2 100644
--- a/source/Popup/Views/NFTDetails/index.jsx
+++ b/source/Popup/Views/NFTDetails/index.jsx
@@ -13,7 +13,7 @@ import AttributesImg from '@assets/icons/nfts/attributes.png';
 import AboutImg from '@assets/icons/nfts/about.png';
 import { Typography } from '@material-ui/core';
 import { setSelectedNft } from '@redux/nfts';
-import { entrepotUrl } from '@shared/constants/urls';
+import { Maximize2 } from 'react-feather';
 import extension from 'extensionizer';
 
 import Section from './components/section';
@@ -36,7 +36,8 @@ const NFTDetails = () => {
     navigator.navigate('home', TABS.NFTS);
   };
 
-  const openMarketplace = (url) => () => extension.tabs.create({ url: url || entrepotUrl });
+  const openNFT = (url) => () => extension.tabs.create({ url });
+
   const collection = useMemo(() => collections?.find(
     (col) => col.name === nft?.collection,
   ),
@@ -47,7 +48,7 @@ const NFTDetails = () => {
     <Layout>
       <Header
         left={<LinkButton value={t('common.back')} onClick={handleBack} startIcon={BackIcon} />}
-        center={nft?.name || `${collection?.name ?? ''} #${nft.index}`}
+        center={`#${nft.index}`}
         right={null}
       />
       <div className={classes.container}>
@@ -55,10 +56,15 @@ const NFTDetails = () => {
         <div className={classes.buttonContainer}>
           <Button
             variant="default"
-            value={t('nfts.goToMarketplace')}
+            value={t('nfts.expandNFT')}
             style={{ width: '96%' }}
             fullWidth
-            onClick={openMarketplace(nft?.marketplaceUrl)}
+            onClick={openNFT(nft?.url)}
+            startIcon={(
+              <Maximize2
+                size="20"
+              />
+            )}
           />
           <Button
             variant="rainbow"
diff --git a/source/components/Apps/index.jsx b/source/components/Apps/index.jsx
index 00bbe0e7..1877718a 100644
--- a/source/components/Apps/index.jsx
+++ b/source/components/Apps/index.jsx
@@ -54,7 +54,6 @@ const Apps = () => {
               <>
                 <div className={classes.textContainer}>
                   <Typography variant="h5">{t('apps.title')}</Typography>
-                  <Typography variant="subtitle2">{t('apps.subtitle')}</Typography>
                 </div>
                 {apps.map((app, index) => (
                   <AppItem
diff --git a/source/components/Apps/styles.js b/source/components/Apps/styles.js
index fa7b4534..467449da 100644
--- a/source/components/Apps/styles.js
+++ b/source/components/Apps/styles.js
@@ -8,11 +8,7 @@ export default makeStyles((theme) => ({
     height: 320 + 118,
   },
   textContainer: {
-    display: 'flex',
-    flexDirection: 'column',
     padding: `0 ${theme.spacing(2)}px ${theme.spacing(0.5)}px`,
-    justifyContent: 'space-between',
-    height: 44,
   },
   centerTextContainer: {
     display: 'flex',
diff --git a/source/locales/en/translation.json b/source/locales/en/translation.json
index 12e4b80d..784d6dad 100644
--- a/source/locales/en/translation.json
+++ b/source/locales/en/translation.json
@@ -80,7 +80,6 @@
   },
   "apps": {
     "title": "Connected Apps",
-    "subtitle": "Main IC Wallet is connected to these sites.",
     "disconnectTitle": "Disconnect from Site",
     "disconnectText": "Are you sure you want to disconnect from",
     "emptyTitle": "You have no apps connected",
@@ -308,7 +307,7 @@
   },
   "nfts": {
     "allNfts": "All NFTs",
-    "goToMarketplace": "Go to Marketplace",
+    "expandNFT": "View",
     "collection": "Collection",
     "description": "Description",
     "attributes": "Attributes",
diff --git a/source/redux/wallet.js b/source/redux/wallet.js
index c41c8e8b..48d08be3 100644
--- a/source/redux/wallet.js
+++ b/source/redux/wallet.js
@@ -8,7 +8,7 @@ import {
 export const walletSlice = createSlice({
   name: 'wallet',
   initialState: {
-    name: 'Main IC Wallet',
+    name: 'Account 1',
     principalId: '',
     accountId: '',
     emoji: '👽',
diff --git a/source/ui/NFTDisplayer/index.jsx b/source/ui/NFTDisplayer/index.jsx
index 3f8f387f..59d4888e 100644
--- a/source/ui/NFTDisplayer/index.jsx
+++ b/source/ui/NFTDisplayer/index.jsx
@@ -40,12 +40,12 @@ const NFTDisplayer = ({
   if (Tag === 'iframe') {
     return (
       <div
-        className={`${classes.iframeWrapper} ${className}`}
+        className={`${classes.iframeWrapper} ${interactive ? classes.interactive : className}`}
         onClick={onClick}
       >
         {!interactive && <span className={classes.iframeClick} />}
         <Tag
-          className={className}
+          className={classes.innerFrame}
           {...customProps}
           src={url}
         />
diff --git a/source/ui/NFTDisplayer/styles.js b/source/ui/NFTDisplayer/styles.js
index 60be6c09..40f4ec06 100644
--- a/source/ui/NFTDisplayer/styles.js
+++ b/source/ui/NFTDisplayer/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles';
 
-export default makeStyles({
+export default makeStyles((theme) => ({
   iframeWrapper: {
     display: 'flex',
     flexDirection: 'column',
@@ -16,4 +16,15 @@ export default makeStyles({
     width: '100%',
     zIndex: 10000,
   },
-});
+  innerFrame: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 10,
+  },
+  interactive: {
+    borderRadius: 15,
+    width: `calc(100% - ${theme.spacing(4)}px)`,
+    height: 280,
+    margin: 'auto',
+  },
+}));