From 2557efbbe3fa8acc68b9cd8fe377d7255c9869af Mon Sep 17 00:00:00 2001
From: Alex Keating <keating.dev@protonmail.com>
Date: Sat, 20 Mar 2021 16:57:40 -0400
Subject: [PATCH] Update NFTForm

---
 package.json              |   4 +-
 src/components/NftForm.js | 220 +++++++++++++++++++++++++++-----------
 2 files changed, 159 insertions(+), 65 deletions(-)

diff --git a/package.json b/package.json
index 0f7a49d..b1ccfe6 100755
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "axios": "^0.21.1",
     "bootstrap": "^4.6.0",
     "ethers": "^5.0.32",
+    "formik": "^2.2.6",
     "nft.storage": "^0.3.8",
     "react": "^16.13.1",
     "react-bootstrap": "^1.5.2",
@@ -18,7 +19,8 @@
     "react-scripts": "3.4.1",
     "styled-components": "^5.2.1",
     "web3": "^1.3.4",
-    "web3modal": "^1.9.3"
+    "web3modal": "^1.9.3",
+    "yup": "^0.32.9"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/NftForm.js b/src/components/NftForm.js
index 5d06155..0821671 100644
--- a/src/components/NftForm.js
+++ b/src/components/NftForm.js
@@ -1,92 +1,184 @@
-import React, {useState} from 'react';
-import { Form, Button } from 'react-bootstrap';
+import React, { useState } from "react";
+// import { Form, Button } from "react-bootstrap";
 import { NFTStorage } from "nft.storage";
 import { abis } from "@project/contracts";
+import { Formik, Field, Form, ErrorMessage, useField } from "formik";
+import * as Yup from "yup";
 
 const Web3 = require("web3");
 
+const Input: FunctionalComponent<any> = ({ label, ...props }) => {
+  // useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
+  // which we can spread on <input>. We can use field meta to show an error
+  // message if the field is invalid and it has been touched (i.e. visited)
+  const [field, meta] = useField(props);
+
+  return (
+    <div className="input--container">
+      <label htmlFor={props.id || props.name}>{label}</label>
+      <input className="input--input" {...field} {...props} />
+      {meta.touched && meta.error ? (
+        <div className="input--error">* {meta.error}</div>
+      ) : null}
+    </div>
+  );
+};
+
 const NftForm = () => {
-    
-const getNFTStorageClient = () => {
+  const getNFTStorageClient = () => {
     console.log(process.env.NFT_STORAGE_API_KEY);
     return new NFTStorage({
-          // If this token can be turned into an environment var
-          // that would be great
-        token:
-            "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJnaXRodWJ8MTI3MDUxNDYiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTYxNjExNTkxNjA1MSwibmFtZSI6ImRlZmF1bHQifQ.kn0H8kEawwLyS0uo_8Nwr-loUu_a-27DxQjdlD41_Hc",
-        });
-      };
+      // If this token can be turned into an environment var
+      // that would be great
+      token:
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJnaXRodWJ8MTI3MDUxNDYiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTYxNjExNTkxNjA1MSwibmFtZSI6ImRlZmF1bHQifQ.kn0H8kEawwLyS0uo_8Nwr-loUu_a-27DxQjdlD41_Hc",
+    });
+  };
 
-const web3 = new Web3(window.ethereum);
+  const web3 = new Web3(window.ethereum);
   const config = {
     erc721: "0x76E195437534620106a2Ef736F8C8491159dC640",
   };
-      
 
-const [nftMetadata, setNftMetadata] = useState({name: "first nft", description: "this is our first nft"})
+  const [nftMetadata, setNftMetadata] = useState({
+    name: null,
+    description: "this is our first nft",
+  });
 
-const handleIdChange = (e) => {
-    setNftMetadata({...nftMetadata, name: e.target.id})
-}  
-const handleNameChange = (e) => {
-    setNftMetadata({...nftMetadata, description: e.target.text})
-}
+  const handleIdChange = (e) => {
+    console.log(e);
+    e.preventDefault();
+    setNftMetadata({ ...nftMetadata, name: e.target.id });
+  };
+  const handleNameChange = (e) => {
+    setNftMetadata({ ...nftMetadata, description: e.target.text });
+  };
 
-const mint = async () => {
-  const metadata = {
-      name: nftMetadata.name,
-      description: nftMetadata.description,
-      image: `https://ipfs.io/ipfs/QmdJmFhB84vpP8tVb3ybTtHToX2VAkXJRoaQZr2c8h64GH`,
+  const mint = async (id, name, description, file) => {
+    const nftCid = await getNFTStorageClient().storeBlob(file);
+    console.log(nftCid);
+    const metadata = {
+      name: name,
+      description: description,
+      image: `https://ipfs.io/ipfs/${nftCid}`,
     };
+
     const metadataCid = await getNFTStorageClient().storeBlob(
-       new Blob([JSON.stringify(metadata)])
+      new Blob([JSON.stringify(metadata)])
     );
     // console.log(metadataCid);
+    console.log(abis.erc721.abi);
+    console.log(nftMetadata);
     const c = new web3.eth.Contract(abis.erc721.abi, config.erc721);
 
+    console.log(c.methods);
     const tx = await c.methods
-      .mint(nftMetadata.id, metadataCid)
-       .send({ from: window.ethereum.selectedAddress });
+      .mint(id, metadataCid)
+      .send({ from: window.ethereum.selectedAddress });
     console.log(tx);
   };
 
- return (
-                <div id="form-content">
-                    <Form>
-                        <Form.Group controlId="exampleForm.ControlInput1">
-                            <Form.Label>NFT Id :</Form.Label>
-                            <Form.Control onChange={handleIdChange} size="sm" type="id" placeholder="Number Id" />                            
-                            </Form.Group>
-                                    <br />
-                                    <Form.Group onChange={handleNameChange} controlId="exampleForm.ControlInput2">
-                            <Form.Label>NFT Name :</Form.Label>
-                            <Form.Control size="sm" type="text" placeholder="Small text" />                            
-                            </Form.Group>
-                                    <br />
-                                    <Form.Group controlId="exampleForm.ControlTextarea1">
-                                <Form.Label>Discribe Your NFT </Form.Label>
-                                <br />
-                            <Form.Control as="textarea" rows={4} />
-                        </Form.Group>
-                    </Form>
-                    <Button variant="info" type="submit" onClick={mint}>Mint</Button>
-                    <br />
-                    <Button variant="secondary"> List For Sale </Button>
-                    <br />
-                    <Button variant="success">Renting</Button>
-                    <br />
-                    <Button variant="warning">Getting Back</Button>
-                    <br />
-
-                </div>
-            );
-        
-        
-}
-export default NftForm;
-
-
-
+  return (
+    <Formik
+      initialValues={{ nftId: 0, description: "", nftImage: "" }}
+      validationSchema={Yup.object({
+        nftId: Yup.number()
+          .positive()
+          .typeError("Must be a number")
+          .required("Required"),
+        name: Yup.string()
+          .max(20, "Must be 20 characters or less")
+          .typeError("Must be a string")
+          .required("Required"),
+        description: Yup.string()
+          .max(200, "Must be 200 characters or less")
+          .typeError("Must be a string")
+          .required("Required"),
+      })}
+      // 1. Build contracts based on code
+      //   - Going to use mustache
+      // 2. Deploy contracts
+      // 3. Confirm contracts are deployed
+      // 4. There should probably be a loader graphic to help
+      onSubmit={async (values, { setSubmitting }) => {
+        // I need stacks to deploy the contract
+        // makeTemplate(values);
 
+        console.log(values);
+        await mint(
+          values.nftId,
+          values.name,
+          values.description,
+          values.nftImage
+        );
+      }}
+    >
+      {(formProps) => (
+        <Form className="createSubscriptionPage--formContainer">
+          <Input label="NFT Id" name="nftId" type="text" />
+          <Input label="NFT Name" name="name" type="text" />
+          <Input label="Description" name="description" type="text" />
+          <Input
+            type="file"
+            name="file"
+            onChange={(event) => {
+              console.log(formProps);
+              console.log(event.target.files[0]);
+              formProps.setFieldValue("nftImage", event.target.files[0]);
+            }}
+          />
+          <div className="createSubscriptionPage--submitContainer">
+            <button
+              className="createSubscriptionPage--submitButton"
+              type="submit"
+            >
+              Submit
+            </button>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  );
+};
 
+// return (
+//   <div id="form-content">
+//     <Form>
+//       <Form.Group>
+//         <Form.Label>NFT Id :</Form.Label>
+//         <Form.Control
+//           onChange={handleIdChange}
+//           size="sm"
+//           placeholder="Number Id"
+//           value={nftMetadata.name}
+//         />
+//       </Form.Group>
+//       <br />
+//       <Form.Group
+//         onChange={handleNameChange}
+//         controlId="exampleForm.ControlInput2"
+//       >
+//         <Form.Label>NFT Name :</Form.Label>
+//         <Form.Control size="sm" type="text" placeholder="Small text" />
+//       </Form.Group>
+//       <br />
+//       <Form.Group controlId="exampleForm.ControlTextarea1">
+//         <Form.Label>Discribe Your NFT </Form.Label>
+//         <br />
+//         <Form.Control as="textarea" rows={4} />
+//       </Form.Group>
+//     </Form>
+//     <Button variant="info" type="submit" onClick={mint}>
+//       Mint
+//     </Button>
+//     <br />
+//     <Button variant="secondary"> List For Sale </Button>
+//     <br />
+//     <Button variant="success">Renting</Button>
+//     <br />
+//     <Button variant="warning">Getting Back</Button>
+//     <br />
+//   </div>
+// );
 
+export default NftForm;