Updated UI cards for NFT catalog

eguajardo · May 28, 2021 · c3c319a · c3c319a
1 parent e3445bb
commit c3c319a
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 40 deletions.
diff --git a/frontend/src/components/UI/NftCard.js b/frontend/src/components/UI/NftCard.js
@@ -1,21 +1,42 @@
-import { loadJsonFromIPFS } from "../../utils/ipfs-utils";
-import { useState } from "react";
+import { loadJsonFromIPFS, ipfsPathToURL } from "../../utils/ipfs-utils";
+import { useState, useCallback, useEffect } from "react";
 
 function NftCard(props) {
   const [metadata, setMetadata] = useState({});
 
-  loadJsonFromIPFS(props.uri.replace("ipfs://", "")).then((json) => {
+  const loadMetadata = useCallback(async () => {
+    const json = await loadJsonFromIPFS(props.uri);
+
     setMetadata(json);
-  });
+  }, [props.uri]);
+
+  useEffect(() => {
+    loadMetadata();
+  }, [loadMetadata]);
 
   return (
-    <div>
-      <div className="card">
-        <div className="card-body">
-          <div>{metadata.title && metadata.title}</div>
-          <br/>
-          <div>{metadata.description && metadata.description}</div>
-        </div>
+    <div className="card">
+      {metadata.image && (
+        <img
+          className="card-img-top"
+          alt={metadata.name}
+          src={ipfsPathToURL(metadata.image)}
+        />
+      )}
+      <div className="card-body">
+        {metadata.name && (
+          <div>
+            <div className="mt-2 font-weight-bold">{"Title:"}</div>
+            <div>{metadata.name}</div>
+          </div>
+        )}
+
+        {metadata.description && (
+          <div>
+            <div className="font-weight-bold">{"Description:"}</div>
+            <div>{metadata.description}</div>
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -56,6 +56,9 @@ a, #new-link, #browse-link {
 
 .card {
   margin-bottom: 1em;
+  max-width: 15em;
+  min-width: 15em;
+  margin-bottom: 2em !important;
   -moz-box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 15%);
   -webkit-box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 15%);
   box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 15%);

diff --git a/frontend/src/pages/NFTIndex.js b/frontend/src/pages/NFTIndex.js
@@ -3,7 +3,7 @@ import NftCard from "../components/UI/NftCard";
 import { contracts } from "../utils/contracts-utils";
 import { ethers, utils } from "ethers";
 import { useEthers, useContractCall } from "@usedapp/core";
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 
 function NFTIndex() {
   const { library } = useEthers();
@@ -17,30 +17,30 @@ function NFTIndex() {
       args: [],
     }) ?? [];
 
-  if (totalBlueprints) {
-    console.log("totalBlueprints:", totalBlueprints.toNumber());
-
-    const blueprint = new ethers.Contract(
-      contracts.Blueprint.address,
-      contracts.Blueprint.abi,
-      library
-    );
-    totalBlueprints = 1;
-    const loadContent = async () => {
-      let cards = [];
+  const loadContent = useCallback(async () => {
+    if (totalBlueprints) {
+      console.log("totalBlueprints:", totalBlueprints.toNumber());
+
+      const blueprint = new ethers.Contract(
+        contracts.Blueprint.address,
+        contracts.Blueprint.abi,
+        library
+      );
+
+      let cardsDeck = [];
       for (let i = 0; i < totalBlueprints; i++) {
         const blueprintURI = await blueprint.blueprintURI(i);
 
-        cards.push(<NftCard key={i} uri={blueprintURI} />);
+        cardsDeck.push(<NftCard key={i} uri={blueprintURI} />);
       }
 
-      setContent(cards);
-    };
-
-    if (content.length !== totalBlueprints) {
-      loadContent();
+      setContent(cardsDeck);
     }
-  }
+  }, [totalBlueprints, library]);
+
+  useEffect(() => {
+    loadContent();
+  }, [loadContent]);
 
   return (
     <div>
@@ -49,7 +49,9 @@ function NFTIndex() {
           Create NFT
         </Link>
       </div>
-      <div className="container content-container">{content}</div>
+      <div className="container content-container">
+        <div className="card-deck d-flex justify-content-center">{content}</div>
+      </div>
     </div>
   );
 }

diff --git a/frontend/src/utils/contracts-utils.js b/frontend/src/utils/contracts-utils.js
@@ -1,6 +1,6 @@
 export const contracts = {
   "TokenPack": {
-    "address": "0x52173b6ac069619c206b9A0e75609fC92860AB2A",
+    "address": "0x532802f2F9E0e3EE9d5Ba70C35E1F43C0498772D",
     "abi": [
       {
         "inputs": [
@@ -243,7 +243,7 @@ export const contracts = {
     ]
   },
   "Token": {
-    "address": "0x8E09B30770010f3Aab2109B5523E74c4D1d64934",
+    "address": "0x1D3cb6157ECb64c5731Dd345CE3a115fcD68C425",
     "abi": [
       {
         "inputs": [
@@ -952,7 +952,7 @@ export const contracts = {
     ]
   },
   "Blueprint": {
-    "address": "0xE1Bdf8Fc03B8C9722a0C07d9Eb6Cb9d7475A93Df",
+    "address": "0x2E01dC71A50743b1536072fFa5486452CcD55A68",
     "abi": [
       {
         "anonymous": false,

diff --git a/frontend/src/utils/ipfs-utils.js b/frontend/src/utils/ipfs-utils.js
@@ -1,11 +1,16 @@
 import IPFS from "ipfs-api";
 
-const ipfs = new IPFS({
+const ipfsWriter = new IPFS({
   host: "ipfs.infura.io",
   port: 5001,
   protocol: "https",
 });
 
+const ipfsReader = {
+  host: "dweb.link",
+  protocol: "https",
+};
+
 /**
  * Reads the file as Buffer
  *
@@ -38,7 +43,7 @@ const readFileAsBuffer = (file) => {
 export const uploadFileToIPFS = async (file) => {
   const fileBuffer = await readFileAsBuffer(file);
 
-  const response = await ipfs.files.add(fileBuffer);
+  const response = await ipfsWriter.files.add(fileBuffer);
 
   console.log("IPFS file uploaded:", response);
   return response[0].path;
@@ -53,7 +58,7 @@ export const uploadFileToIPFS = async (file) => {
 export const uploadJsonToIPFS = async (json) => {
   const jsonString = JSON.stringify(json, null, 2);
 
-  const response = await ipfs.add(Buffer.from(jsonString));
+  const response = await ipfsWriter.add(Buffer.from(jsonString));
 
   console.log("IPFS JSON uploaded:", response);
   return response[0].path;
@@ -66,11 +71,31 @@ export const uploadJsonToIPFS = async (json) => {
  * @returns a JSON object loaded from the specified IPFS path
  */
 export const loadJsonFromIPFS = async (ipfsPath) => {
+  ipfsPath = ipfsPath.replace("ipfs://", "");
   const utf8decoder = new TextDecoder();
-  let ipfsMessage = utf8decoder.decode(await ipfs.cat(ipfsPath));
+  let ipfsMessage = utf8decoder.decode(await ipfsWriter.cat(ipfsPath));
+
+  // Mock response during tests to avoid exceeding limit restrictions on host
+  // let ipfsMessage = JSON.stringify({
+  //   "name": "Test title",
+  //   "description": "test description",
+  //   "image": "ipfs://QmVkcP3917y9ZURreM8c2MJCTGhsmGx8NRPzFSG6i7rdBF"
+  // }, null, 2);
 
   console.log("IPFS message retrieved:", ipfsMessage);
   return JSON.parse(ipfsMessage);
 };
 
-export default ipfs;
+/**
+ * Generates a URL from ipfs config and specified ipfs path
+ * e.g from `ipfs://someIpfsPath` to `http://ipfs.infura.io:5001/ipfs/someIpfsPath`
+ *
+ * @param {string} ipfsPath The IPFS path
+ * @returns a string representing the resulting URL
+ */
+export const ipfsPathToURL = (ipfsPath) => {
+  return `${ipfsReader.protocol}://${ipfsReader.host}/ipfs/${ipfsPath.replace(
+    "ipfs://",
+    ""
+  )}`;
+};
diff --git a/scripts/deploy.ts b/scripts/deploy.ts
@@ -111,7 +111,7 @@ async function loadTestBlueprints(blueprint: Contract) {
 
   for (let i = 0; i < 10; i++) {
     await blueprint.createBlueprint(
-      "QmSsdhTt5QDqcQBNazUFajxET4FqGevvuCxoXoFhezUSZW"
+      "QmX2V4MpeSmkBQ6UormESbxgi1kXyCqTeLRdusx2raWLvH"
     );
     console.log("Created test blueprint", i, signers[0].address);
   }