add: nft image display modal

hack3r-0m · May 25, 2021 · c1dcd10 · c1dcd10
1 parent e901c8d
commit c1dcd10
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 17 deletions.
diff --git a/client/components/UI/NFTCard.jsx b/client/components/UI/NFTCard.jsx
@@ -1,15 +1,45 @@
+import { useRef, useEffect, useState } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 
-const NFTCard = ({ image, name, type, quantity }) => {
+const NFTCard = ({
+  image,
+  name,
+  type,
+  quantity,
+  setModalState,
+  setModalImgProps,
+}) => {
   const classes = useStyles();
+  const imgElement = useRef(null);
+  const [portrait, setportrait] = useState(false);
+
+  useEffect(() => {
+    // Checking the image orientation
+    const nWidth = imgElement.current.naturalWidth;
+    const nHeight = imgElement.current.naturalHeight;
+
+    if (nWidth/nHeight > 1) {
+      setportrait(false);
+    } else {
+      setportrait(true);
+    }
+  }, [image]);
+
   return (
-    <div className={classes.nftCard}>
+    <div
+      className={classes.nftCard}
+      onClick={() => {
+        setModalState(true);
+        setModalImgProps({ img: image, portrait: portrait });
+      }}
+    >
       <div className={classes.imageContainer}>
         <div className={classes.imgPlaceholder}></div>
         <img
           src={image || "images/placeholder.png"}
           className={classes.nftImg}
           alt="image"
+          ref={imgElement}
         />
       </div>
       <div className={classes.nftDetails}>
@@ -35,6 +65,12 @@ const useStyles = makeStyles((theme) => ({
     border: "0.5px solid #E8E8E8",
     height: "100%",
     boxShadow: "0px 2px 10px rgb(0 0 0 / 10%)",
+    cursor: "pointer",
+
+    "&:hover img":{
+      transform: 'scale(1.1)',
+      transition:'all 0.3s ease',
+    }
   },
   imageContainer: {
     position: "relative",
@@ -56,6 +92,8 @@ const useStyles = makeStyles((theme) => ({
     top: 0,
     left: 0,
     zIndex: 1,
+    transform: 'scale(1)',
+    transition:'all 0.3s ease',
   },
   nftDetails: {
     padding: "0 2px",

diff --git a/client/pages/account.js b/client/pages/account.js
@@ -1,10 +1,7 @@
 import React, { useState, useEffect } from "react";
 
-import {
-  CircularProgress,
-  Container,
-  Grid,
-} from "@material-ui/core/";
+import { CircularProgress, Container, Grid, Modal } from "@material-ui/core/";
+import { Close } from "@material-ui/icons";
 import { makeStyles } from "@material-ui/core/styles";
 
 import NFTCard from "../components/UI/NFTCard";
@@ -13,13 +10,20 @@ const Account = ({ signerAddress }) => {
   const classes = useStyles();
   const [isLoading, setIsLoading] = useState(false);
   const [nftData, setNftData] = useState([]);
+  const [modalState, setModalState] = useState(false);
+  const [modalImgProps, setModalImgProps] = useState({});
+
+  const closeModal = () => {
+    setModalState(false);
+  };
 
   useEffect(() => {
     const fetchData = async () => {
       setIsLoading(true);
       setNftData([]);
-      let res = await fetch(`https://api.covalenthq.com/v1/137/address/${signerAddress}/balances_v2/?nft=true`,
-        { 'stale-while-revalidate': 'max-age=604800' }
+      let res = await fetch(
+        `https://api.covalenthq.com/v1/137/address/${signerAddress}/balances_v2/?nft=true`,
+        { "stale-while-revalidate": "max-age=604800" }
       );
       res = await res.json();
       const items = res.data.items;
@@ -49,9 +53,9 @@ const Account = ({ signerAddress }) => {
       // console.log(nft);
       setNftData(nft);
       setIsLoading(false);
-    }
+    };
     if (signerAddress) fetchData();
-  }, [signerAddress])
+  }, [signerAddress]);
 
   return (
     <main className={classes.main}>
@@ -67,10 +71,31 @@ const Account = ({ signerAddress }) => {
                 name={nft.name}
                 type={nft.nftType}
                 quantity={nft.quantity}
+                setModalState={setModalState}
+                setModalImgProps={setModalImgProps}
               />
             </Grid>
           ))}
         </Grid>
+        {/* to view the image */}
+        <Modal
+          open={modalState}
+          className={`${classes.modalContainer} ${
+            modalImgProps.portrait? classes.portrait:''
+          }`}
+          onClose={closeModal}
+        >
+          <div className={`${classes.modal} modal`}>
+            <div className={classes.closeModal} onClick={closeModal}>
+              <Close style={{ fontSize: "16px" }} />
+            </div>
+            <img
+              src={modalImgProps.img}
+              alt="nft display"
+              className={classes.img}
+            />
+          </div>
+        </Modal>
         {isLoading && <CircularProgress color="secondary" />}
       </Container>
     </main>
@@ -79,16 +104,31 @@ const Account = ({ signerAddress }) => {
 
 const useStyles = makeStyles((theme) => ({
   ...theme.overrides.mui,
+  ...theme.overrides.modalStyle,
   main: {
-    backgroundColor: 'white',
-    marginTop: '12px',
-    paddingBottom: '70px',
-    minHeight: '430px',
+    backgroundColor: "white",
+    marginTop: "12px",
+    paddingBottom: "70px",
+    minHeight: "430px",
   },
   title: {
     fontWeight: "bold",
-    margin: '30px 0 10px',
+    margin: "30px 0 10px",
+  },
+  img: {
+    borderRadius: "5px",
   },
+  portrait: {
+    "& .modal": {
+      width:'auto', 
+      height: '90%',
+
+      "& img":{
+        width:'auto',
+        height: '100%',
+      }
+    }
+  }
 }));
 
-export default Account;
+export default Account;
diff --git a/client/utils/theme.js b/client/utils/theme.js
@@ -240,6 +240,11 @@ const theme = createMuiTheme({
         display: "flex",
         flexDirection: "column",
         position: "relative",
+        overflow:'hidden',
+
+        "@media (max-width:599px)": {
+          width: "100%",
+        },
       },
       graphicSection: {
         position: "relative",