IPFS upload on click

Co-authored-by: qedk <[email protected]> Co-authored-by: Aman <[email protected]> Co-authored-by: hack3r-0m <[email protected]> Co-authored-by: hack3r-0m <[email protected]>
hack3r-0m · Apr 21, 2021 · 9c1fc3b · 9c1fc3b
1 parent 5555612
commit 9c1fc3b
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 61 deletions.
diff --git a/components/Form.jsx b/components/Form.jsx
@@ -30,6 +30,7 @@ const Form = ({
   const [surl, setSurl] = useState('');
   const [file, setFile] = useState(null);
   const [imgSrc, setImgSrc] = useState("");
+  const [imgHash, setImgHash] = useState('');
   const [nftType, setNftType] = useState('ERC721');
   const [ercTwoNum, setErcTwoNum] = useState(1);
   const [errors, setErrors] = useState({
@@ -54,10 +55,14 @@ const Form = ({
     }
   }
   // handle file upload
-  const handleFile = (e) => {
+  const handleFile = async (e) => {
     // console.log("object")
     if (e.target.files[0]?.size < 1e7) {
       setFile(e.target.files[0]);
+      const cid = await pinFileToIPFS(e.target.files[0]);
+      toast("File uploaded to IPFS", { type: "success" });
+      console.log("IPFS imgHash", cid);
+      setImgHash(cid);
       setErrors(pS => ({ ...pS, file: '' }))
       // console.log(e.target.files[0]?.size < 1e7)
       if (e.target.files.length !== 0) {
@@ -72,22 +77,18 @@ const Form = ({
     }
   }
 
-
-
   const onSubmit = async (e) => {
     e.preventDefault();
     // if all req fields are avaialable
-    if (name && desc && file && signerAddress) {
+    if (name && desc && file && signerAddress && imgHash) {
+      console.log("Submitting...")
       setIsLoading(true);
       setErr('');
       setTrsHash('');
 
       // Upload files on IPFS
       let ipfsHash = '';
       try {
-        const imgHash = await pinFileToIPFS(file);
-        toast("File uploaded to IPFS", { type: "success" });
-
         ipfsHash = await pinJSONToIPFS({
           name: name,
           description: desc,
@@ -156,7 +157,7 @@ const Form = ({
           }
         )
       } else if (nftType === 'ERC1155') {
-        
+
         contract_1155.handleRevert = true // https://web3js.readthedocs.io/en/v1.3.4/web3-eth.html#handlerevert
 
         let nonce = await contract_1155.methods.getNonce(signerAddress).call();
@@ -213,14 +214,15 @@ const Form = ({
       } else {
         validateName();
         validateDesc();
+        setIsLoading(false);
         if (!signerAddress) {
           setOpen(true);
           setErr("Connect to wallet first");
-          
-        // } else if (networkId !== 80001 && networkId !== 137) {
-        //   setOpen(true);
-        //   setErr("");
-          
+
+          // } else if (networkId !== 80001 && networkId !== 137) {
+          //   setOpen(true);
+          //   setErr("");
+
         } else {
           setOpen(true);
           setErr("Enter all mandatory fields");
@@ -248,12 +250,12 @@ const Form = ({
                 Upload your file here
               </Typography>
               <Typography variant="h6" className={classes.uploadTitle2}>
-                JPG, PNG, or MP4 videos accepted.
+                JPG, PNG, MP4, PDF or HTML  videos accepted.
                 10MB limit.
               </Typography>
             </React.Fragment>
           }
-          <input accept="audio/*,video/*,image/*" id="upload-file" onChange={handleFile} type='file' hidden />
+          <input accept="audio/*, video/*, image/*, .html, .pdf" id="upload-file" onChange={handleFile} type='file' hidden />
           <label htmlFor="upload-file">
             <Button component="span" className={classes.uploadBtn}>
               {file ? file.name : 'Click to upload'}
@@ -321,12 +323,12 @@ const Form = ({
                   setNftType('ERC721')
                 }}>
                 ERC721
-            </Button>
+              </Button>
               <Button className={classes.formTypeButton}
                 disabled={nftType === 'ERC1155' ? true : false}
                 onClick={() => setNftType('ERC1155')}>
                 ERC1155
-            </Button>
+              </Button>
             </div>
           </div>
           <div className={classes.formTitle}>
@@ -358,7 +360,7 @@ const Form = ({
             Once your NFT is minted on the Polygon blockchain, you will not
             be able to edit or update any of its information.
           </div>
-          <Button type="submit" className={classes.submit}>Submit</Button>
+          <Button type="submit" disabled={imgHash ? false : true} className={classes.submit}>Submit</Button>
         </div>
       </div>
 
@@ -543,6 +545,9 @@ const useStyles = makeStyles((theme) => ({
     marginTop: 10,
     '&:hover': {
       background: '#8247E5',
+    },
+    '&:disabled': {
+      background: '#9c67f5',
     }
   },
   error: {

diff --git a/components/Success.jsx b/components/Success.jsx
@@ -1,14 +1,24 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
 
+import { getRelativeTime } from '../utils/getRelativeTime';
+
 const Success = ({ trsHash, setTrsHash, arkaneUrl }) => {
   const classes = useStyles();
-
   const url = 'https://explorer-mainnet.maticvigil.com/tx/';
 
+  const [timeLeft, setTimeLeft] = useState(90);
+  useEffect(() => {
+    if (!timeLeft) return;
+    const intervalId = setInterval(() => {
+      setTimeLeft(timeLeft - 1);
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, [timeLeft]);
+
   return (
     <div className={classes.root}>
       <img src="img/congratulation.svg" alt="success" />
@@ -27,23 +37,27 @@ const Success = ({ trsHash, setTrsHash, arkaneUrl }) => {
         </a>
       </Typography>
       <div className={classes.btnGrp}>
-
-        <Button
+        {/* <Button
           className={classes.view}
           href={`https://matic.opensea.io/category/${arkaneUrl}?chainId=137`}
           target="_blank"
         >View on OpenSea
-        </Button>
+       </Button> */}
+        {timeLeft !== 0 &&
+          <Typography variant="h6" className={classes.title1}>
+            Wait {getRelativeTime(timeLeft)} listing on Arkane
+          </Typography>
+        }
 
-        {
-          arkaneUrl &&
+        {arkaneUrl && timeLeft === 0 &&
           <Button
             href={`https://arkane.market/inventory/MATIC/${arkaneUrl}`}
             target="_blank"
             className={classes.view}
           >View on Arkane</Button>
         }
       </div>
+
       <Button
         className={classes.more}
         onClick={() => setTrsHash('')}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start -p 80",
+    "start": "next start",
     "export": "next export"
   },
   "license": "MIT",

diff --git a/utils/getRelativeTime.js b/utils/getRelativeTime.js
@@ -0,0 +1,8 @@
+export const getRelativeTime = (time) => {
+
+  if (time < 60) {
+    return `0:${Math.round(time)}`;
+  } else {
+    return `${Math.floor(time / 60)}:${Math.floor(time % 60)}`;
+  }
+}