Merge pull request #2 from NandishM0618/npbNFT

nft marketplace frontend made
jaibhedia · Dec 14, 2023 · d6881be · d6881be
2 parents 98bb07d + 5e1afb4
commit d6881be
Show file tree

Hide file tree

Showing 21 changed files with 4,383 additions and 5,474 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,11 +16,12 @@
     "chai": "^4.3.6",
     "ethereum-waffle": "^3.4.0",
     "ethers": "^5.5.4",
-    "hardhat": "^2.8.4",
+    "hardhat": "^2.19.2",
     "ipfs-http-client": "^56.0.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.1.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.12.0",
     "react-router": "^6.2.1",
     "react-router-dom": "^6.14.1",
     "react-scripts": "5.0.0",
@@ -51,6 +52,7 @@
     ]
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11"
+    "@babel/preset-env": "^7.16.11",
+    "tailwindcss": "^3.3.6"
   }
 }
diff --git a/src/frontend/components/App.js b/src/frontend/components/App.js
@@ -1,55 +1,57 @@
-import {
-  BrowserRouter,
-  Routes,
-  Route
-} from "react-router-dom";
-import Navigation from './Navbar';
-import Home from './Home.js'
-import Create from './Create.js'
-import MyListedItems from './MyListedItems.js'
-import MyPurchases from './MyPurchases.js'
-import MarketplaceAbi from '../contractsData/Marketplace.json'
-import MarketplaceAddress from '../contractsData/Marketplace-address.json'
-import NFTAbi from '../contractsData/NFT.json'
-import NFTAddress from '../contractsData/NFT-address.json'
-import { useState } from 'react'
-import { ethers } from "ethers"
-import { Spinner } from 'react-bootstrap'
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Navigation from "./Navbar";
+import Home from "./Home.js";
+import Create from "./Create.js";
+import MyListedItems from "./MyListedItems.js";
+import MyPurchases from "./MyPurchases.js";
+import MarketplaceAbi from "../contractsData/Marketplace.json";
+import MarketplaceAddress from "../contractsData/Marketplace-address.json";
+import NFTAbi from "../contractsData/NFT.json";
+import NFTAddress from "../contractsData/NFT-address.json";
+import { useState } from "react";
+import { ethers } from "ethers";
+import { Spinner } from "react-bootstrap";
 
-import './App.css';
+import "./App.css";
 
 function App() {
-  const [loading, setLoading] = useState(true)
-  const [account, setAccount] = useState(null)
-  const [nft, setNFT] = useState({})
-  const [marketplace, setMarketplace] = useState({})
+  const [loading, setLoading] = useState(true);
+  const [account, setAccount] = useState(null);
+  const [nft, setNFT] = useState({});
+  const [marketplace, setMarketplace] = useState({});
   // MetaMask Login/Connect
   const web3Handler = async () => {
-    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
-    setAccount(accounts[0])
+    const accounts = await window.ethereum.request({
+      method: "eth_requestAccounts",
+    });
+    setAccount(accounts[0]);
     // Get provider from Metamask
-    const provider = new ethers.providers.Web3Provider(window.ethereum)
+    const provider = new ethers.providers.Web3Provider(window.ethereum);
     // Set signer
-    const signer = provider.getSigner()
+    const signer = provider.getSigner();
 
-    window.ethereum.on('chainChanged', (chainId) => {
+    window.ethereum.on("chainChanged", (chainId) => {
       window.location.reload();
-    })
+    });
 
-    window.ethereum.on('accountsChanged', async function (accounts) {
-      setAccount(accounts[0])
-      await web3Handler()
-    })
-    loadContracts(signer)
-  }
+    window.ethereum.on("accountsChanged", async function (accounts) {
+      setAccount(accounts[0]);
+      await web3Handler();
+    });
+    loadContracts(signer);
+  };
   const loadContracts = async (signer) => {
     // Get deployed copies of contracts
-    const marketplace = new ethers.Contract(MarketplaceAddress.address, MarketplaceAbi.abi, signer)
-    setMarketplace(marketplace)
-    const nft = new ethers.Contract(NFTAddress.address, NFTAbi.abi, signer)
-    setNFT(nft)
-    setLoading(false)
-  }
+    const marketplace = new ethers.Contract(
+      MarketplaceAddress.address,
+      MarketplaceAbi.abi,
+      signer
+    );
+    setMarketplace(marketplace);
+    const nft = new ethers.Contract(NFTAddress.address, NFTAbi.abi, signer);
+    setNFT(nft);
+    setLoading(false);
+  };
 
   return (
     <BrowserRouter>
@@ -59,30 +61,59 @@ function App() {
         </>
         <div>
           {loading ? (
-            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '80vh' }}>
-              <Spinner animation="border" style={{ display: 'flex' }} />
-              <p className='mx-3 my-0'>Waiting for a Metamask Connection...</p>
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                minHeight: "80vh",
+              }}
+            >
+              <Spinner animation="border" style={{ display: "flex" }} />
+              <p className="mx-3 my-0">Waiting for a Metamask Connection...</p>
             </div>
           ) : (
             <Routes>
-              <Route path="/" element={
-                <Home marketplace={marketplace} nft={nft} />
-              } />
-              <Route path="/create" element={
-                <Create marketplace={marketplace} nft={nft} />
-              } />
-              <Route path="/my-listed-items" element={
-                <MyListedItems marketplace={marketplace} nft={nft} account={account} />
-              } />
-              <Route path="/my-purchases" element={
-                <MyPurchases marketplace={marketplace} nft={nft} account={account} />
-              } />
+              <Route
+                path="/"
+                element={
+                  <Home
+                    marketplace={marketplace}
+                    nft={nft}
+                    account={account}
+                    web3Handler={web3Handler}
+                  />
+                }
+              />
+              <Route
+                path="/create"
+                element={<Create marketplace={marketplace} nft={nft} />}
+              />
+              <Route
+                path="/my-listed-items"
+                element={
+                  <MyListedItems
+                    marketplace={marketplace}
+                    nft={nft}
+                    account={account}
+                  />
+                }
+              />
+              <Route
+                path="/my-purchases"
+                element={
+                  <MyPurchases
+                    marketplace={marketplace}
+                    nft={nft}
+                    account={account}
+                  />
+                }
+              />
             </Routes>
           )}
         </div>
       </div>
     </BrowserRouter>
-
   );
 }