Added marketplace page

package.json

@@ -13,9 +13,11 @@
     "@types/node": "^18.7.15",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
+    "aos": "^2.3.4",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
+    "bootstrap": "^5.2.1",
     "ethers": "^5.7.0",
     "immutability-helper": "^3.1.1",
     "react": "^18.2.0",
@@ -27,7 +29,9 @@
     "react-scripts": "5.0.1",
     "solc": "^0.8.16",
     "typescript": "^4.8.2",
+    "walletlink": "^2.5.0",
     "web-vitals": "^2.1.4",
+    "web3-providers": "^1.0.0-beta.55",
     "webpack": "^4.17.1",
     "webpack-cli": "^3.1.0",
     "yup": "^0.32.11"

public/index.html

@@ -16,8 +16,8 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Inter:wght@400;600;700&family=Open+Sans:wght@400;600;800&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Open+Sans:wght@600&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -12,23 +12,23 @@ import LoanSeeker from './components/loanseekerhome/LoanSeeker';
 import './App.css';
 
 function App() {
-
   return (
-    <div className='App'>
+    <div className="App">
       <Routes>
-        <Route path="/" element={ <Home/> } />
-        <Route path="home" element={ <Home/> } />
+        <Route path="/" element={<Home />} />
+        <Route path="home" element={<Home />} />
         <Route path="about" element={<About />} />
-        <Route path="marketplace" element={<Marketplace />} />
+        <Route path="marketplace" element={<MarketPlace />} />
         <Route path="signup" element={<Signup />} />
         <Route path="login" element={<Login />} />
         <Route path="investor" element={<InvestorPage />} />
         <Route path="loan" element={<LoanSeekerForm />} />
-        <Route path=":id" element={<CollectionDetails />} />
+        <Route path="details" element={<Mint />} />
         <Route path="loanseeker" element={<LoanSeeker />} />
+        <Route path="dashboard" element={<Dashboard />} />
       </Routes>
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/collectionDetails/CollectionDetails.js

@@ -1,10 +1,151 @@
-import React from 'react';
-import './collectionDetails.css'
+import React from "react";
+import { Link } from "react-router-dom";
+import "./collectionDetails.css";
+import { ethers } from "ethers";
+import Web3Modal from "web3modal";
+import WalletConnectProvider from "@walletconnect/web3-provider";
+import WalletLink from "walletlink";
 
-function CollectionDetails() {
-    return (
-        <div>Collection Details</div>
-    )
+import DiversifyNFT from "../../contracts/DiversifyNFT.json";
+import DiversifyNFTSales from "../../contracts/DiversifyNFTSales.json";
+import nft1 from "../../assets/624c8c6d91d58f79a0e4d49b.jpg";
+
+const NFTAddress = "0xCc48a3ECB6c671eb4eEBBeBE000802D4C15796f6";
+const NFTSaleAddress = "0xB48bceaAF3bF8aB9C5517518aF0dCc21F81790cE";
+
+class details extends React.Component {
+    constructor(props) {
+      super(props);
+      this.addMintNumber = this.addMintNumber.bind(this);
+      this.subMintNumber = this.subMintNumber.bind(this);
+      // Set initial state (ONLY ALLOWED IN CONSTRUCTOR)
+      this.state = {
+        value: 3,
+        mintState: true,
+      };
+    }
+
+    addMintNumber(e) {
+      let mintNum = this.state.value + 1;
+      if (mintNum > 5) {
+        mintNum = 5;
+      }
+      this.setState({ value: mintNum });
+    }
+
+    subMintNumber(e) {
+      let mintNum = this.state.value - 1;
+      if (mintNum < 1) {
+        mintNum = 1;
+      }
+      this.setState({ value: mintNum });
+    }
+
+    mintNFT = async () => {
+      const { ethereum } = window;
+      if (ethereum) {
+        const providerOptions = {
+          //   binancechainwallet: {
+          //     package: binancechainwallet
+          //     },
+          walletconnect: {
+            package: WalletConnectProvider,
+            options: {
+              infuraId: "0bbb45846bdf44d1bcbe6275327619ad",
+            },
+          },
+          walletlink: {
+            package: WalletLink,
+            options: {
+              appName: "Hip Ass Ape Minter",
+              infuraId: "0bbb45846bdf44d1bcbe6275327619ad",
+              rpc: "",
+              chainId: 4,
+              appLogoUrl: null,
+              darkMode: true,
+            },
+          },
+        };
+
+        var provider = new ethers.providers.Web3Provider(ethereum);
+        const accounts = await provider.listAccounts();
+        if (accounts.length > 0) {
+          // var account = accounts[0];
+          const { chainId } = await provider.getNetwork();
+          if (chainId !== 0x4) {
+            // alert("Please change the network to rinkby");
+            return;
+          }
+          this.setState({ mintState: false });
+
+          const signer = provider.getSigner();
+          const DiversifyNFTContract = new ethers.Contract(
+            NFTAddress,
+            DiversifyNFT.abi,
+            signer
+          );
+          const DiversifyNFTSalesContract = new ethers.Contract(
+            NFTSaleAddress,
+            DiversifyNFTSales.abi,
+            signer
+          );
+
+          const result = await DiversifyNFTContract.totalSupply();
+          const totalSupply = result.toNumber();
+          // console.log("totalSupply : ", totalSupply);
+
+          let data = [];
+          for (var n = 0; n < this.state.value; n++) {
+            const tokenID = totalSupply + n;
+            const obj = { user: accounts[0], tokenId: tokenID };
+            data.push(obj);
+          }
+          // console.log("mint data : ", data);
+
+          const mintFee = await DiversifyNFTSalesContract.fee();
+          // console.log("fee : ", ethers.utils.formatEther(mintFee));
+
+          await DiversifyNFTSalesContract.mint(data, { value: mintFee });
+
+          alert("NFt minting successed!");
+
+          // const mintResult = await DiversifyNFTSalesContract.minted();
+          // console.log("minted : ", mintResult.toNumber());
+        } else {
+          alert("Please connect the wallet");
+        }
+      } else {
+        alert("Please install Metamask!");
+      }
+
+      this.setState({ mintState: true });
+    };
+    render () {
+  return (
+    <div>
+      <div className="nft-details">
+        <img src={nft1} className="detail-pic" alt="nftimages" />
+        <div className="details-info">
+          <span className="detail-name">The Greenepoint Collection</span>
+          <div className="detail-amt">250 Items</div>
+          <div>
+            <span className="detail-avail">(250 Sold, 250 Available)</span>
+            <Link to="/details">
+              <button
+                className="mintbtn"
+                variant="success"
+                onClick={this.mintNFT}
+                disabled={!this.state.mintState}
+              >
+                MInt
+              </button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
 }
 
-export default CollectionDetails;
+export default details;

src/components/collectionDetails/collectionDetails.css

@@ -0,0 +1,53 @@
+* {
+  box-sizing: border-box;
+}
+.nft-details{
+    margin: 100px 30rem 0px ;
+    display: block;
+}
+.detail-pic {
+  width: 400px;
+  height: 350px;
+  background: #d9d9d9;
+  border-radius: 20px;
+  cursor: pointer;
+
+}
+.details-info{
+    padding-left: 40px;
+}
+.detail-name{
+    font-family: 'Nunito';
+font-style: normal;
+font-weight: 800;
+font-size: 16px;
+line-height: 22px;
+cursor: pointer;
+}
+.detail-amt{
+    padding-top: 12px;
+    font-family: 'Nunito';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 19px;
+}
+.detail-avail{
+    font-family: 'Nunito';
+font-style: normal;
+font-weight: 800;
+font-size: 14px;
+line-height: 14px;
+}
+.mintbtn{
+    margin-left:70px;
+    cursor: pointer;
+    width: 100px;
+    height: 50px;
+    border: none;
+    background: #DB15EC;
+    border-radius: 30px;
+    color: white;
+    font-family: 'Nunito';
+    font-weight: 600;
+}