format project

README.md

@@ -2,6 +2,10 @@
 
 Demo NFT collection for learning purposes.
 
+Deployed on [link](https://keen-swan-c84e28.netlify.app/)
+
+[![nft](https://lh3.googleusercontent.com/qaMvdevQbrgmjsaGLWdvciVOgTM1GNovIQ6XPWHF8BiOPEvS4mk1Q2gACR6H4Oyv7NiBc43gDs8kiL4qI7Ejp6D48MqZ2cUrN1QekA=w600)](https://opensea.io/assets/matic/0x3cd266509d127d0eac42f4474f57d0526804b44e/16596)
+
 ## OpenSea Testnet
 
 1.  https://testnets.opensea.io/collection/squarenft-cd2xk3yh7v

client/src/App.css

@@ -92,7 +92,7 @@
 /* KeyFrames */
 @-webkit-keyframes gradient-animation {
     0% {
-        background-position: 0% 50%;
+        background-position: 0 50%;
     }
 
     50% {
@@ -100,13 +100,13 @@
     }
 
     100% {
-        background-position: 0% 50%;
+        background-position: 0 50%;
     }
 }
 
 @-moz-keyframes gradient-animation {
     0% {
-        background-position: 0% 50%;
+        background-position: 0 50%;
     }
 
     50% {
@@ -114,13 +114,13 @@
     }
 
     100% {
-        background-position: 0% 50%;
+        background-position: 0 50%;
     }
 }
 
 @keyframes gradient-animation {
     0% {
-        background-position: 0% 50%;
+        background-position: 0 50%;
     }
 
     50% {
@@ -128,6 +128,6 @@
     }
 
     100% {
-        background-position: 0% 50%;
+        background-position: 0 50%;
     }
 }

client/src/App.js

@@ -1,9 +1,9 @@
-import "./App.css";
-import { providers, Contract } from "ethers";
-import { useEffect, useState } from "react";
-import { withEth } from "./lib/eth";
-import epicNFT from "./lib/epicNFT.json";
 import {LoadingOverlay} from "@mantine/core";
+import {Contract, providers} from "ethers";
+import {useEffect, useState} from "react";
+import "./App.css";
+import epicNFT from "./lib/epicNFT.json";
+import {withEth} from "./lib/eth";
 
 function App() {
     const [currentAccount, setCurrentAccount] = useState("");
@@ -13,6 +13,7 @@ function App() {
     const [link, setLink] = useState("");
 
     const contractAddress = process.env.REACT_APP_STAGING_CONTRACT_ADDRESS;
+    const collectionAddress = process.env.REACT_APP_COLLECTION_ADDRESS;
     const contractABI = epicNFT.abi;
 
     const checkIfWalletConnected = withEth(async (ethereum) => {
@@ -113,7 +114,7 @@ function App() {
                             className="cta-button connect-wallet-button"
                             onClick={() =>
                                 window.open(
-                  "https://testnets.opensea.io/collection/squarenft-noshuqlivp",
+                                    collectionAddress,
                                     "_blank"
                                 )
                             }

client/src/index.js

@@ -1,8 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import reportWebVitals from "./reportWebVitals";
 import App from "./App";
 import "./index.css";
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
     <React.StrictMode>

contracts/EpicNFT.sol

@@ -11,17 +11,16 @@ contract EpicNFT is ERC721URIStorage {
     Counters.Counter private _tokenIds;
 
     event NewEpicNFTMinted(address sender, uint256 tokenID);
-    uint256 private maxTokenAllowed = 50;
+
+    uint256 private constant MAX_NFT_ALLOWED = 50;
 
     constructor() ERC721("SquareNFT", "SQUARE") {
         console.log("My first NFT contract! EPIC!!!");
     }
 
-    string baseSvg1 =
+    string baseSvg1 = "<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin meet' viewBox='0 0 350 350'><style>.base { fill:";
-        "<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin meet' viewBox='0 0 350 350'><style>.base { fill:";
 
-    string baseSvg2 =
+    string baseSvg2 = "; font-family: serif; font-size: 24px; }</style><rect width='100%' height='100%' fill='black' /><text x='50%' y='50%' class='base' dominant-baseline='middle' text-anchor='middle'>";
-        "; font-family: serif; font-size: 24px; }</style><rect width='100%' height='100%' fill='black' /><text x='50%' y='50%' class='base' dominant-baseline='middle' text-anchor='middle'>";
 
     string[] colors = [
     "red",
@@ -81,13 +80,13 @@ contract EpicNFT is ERC721URIStorage {
         return _tokenIds.current();
     }
 
-    function getMaxNFTAllowed() public view returns(uint){
+    function getMaxNFTAllowed() public pure returns (uint) {
-        return maxTokenAllowed;
+        return MAX_NFT_ALLOWED;
     }
 
     function mint() public {
         require(
-            _tokenIds.current() < maxTokenAllowed,
+            _tokenIds.current() < MAX_NFT_ALLOWED,
             "the maximum of EpicNFT has already been minted"
         );
         uint256 tokenID = _tokenIds.current();