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
Psychedelic · Sep 30, 2021 · f3b5b74 · f3b5b74
1 parent 7075750
commit f3b5b74
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 17 deletions.
diff --git 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,18 +48,23 @@ 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}>
         <NFTDisplayer url={nft?.url} className={classes.image} interactive />
         <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',
+  },
+}));