ruidy/epicNFT
1
0
Fork 0
mirror of https://github.com/rjNemo/epicNFT synced 2026-06-12 12:46:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

format project

Browse source
This commit is contained in:
Ruidy 2022-04-11 06:01:09 -04:00
parent e9aaefcd04
commit cdcba91f34
18 changed files with 263 additions and 259 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -2,6 +2,10 @@
Demo NFT collection for learning purposes. 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 ## OpenSea Testnet
1. https://testnets.opensea.io/collection/squarenft-cd2xk3yh7v 1. https://testnets.opensea.io/collection/squarenft-cd2xk3yh7v

26
client/public/index.html
View file

@ -1,17 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8"/>
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app" /> <meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

12
client/src/App.css
View file

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

19
client/src/App.js
View file

@ -1,9 +1,9 @@
import {LoadingOverlay} from "@mantine/core";
import {Contract, providers} from "ethers";
import {useEffect, useState} from "react";
import "./App.css"; 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 epicNFT from "./lib/epicNFT.json";
import { LoadingOverlay } from "@mantine/core"; import {withEth} from "./lib/eth";
function App() { function App() {
const [currentAccount, setCurrentAccount] = useState(""); const [currentAccount, setCurrentAccount] = useState("");
@ -13,10 +13,11 @@ function App() {
const [link, setLink] = useState(""); const [link, setLink] = useState("");
const contractAddress = process.env.REACT_APP_STAGING_CONTRACT_ADDRESS; const contractAddress = process.env.REACT_APP_STAGING_CONTRACT_ADDRESS;
const collectionAddress = process.env.REACT_APP_COLLECTION_ADDRESS;
const contractABI = epicNFT.abi; const contractABI = epicNFT.abi;
const checkIfWalletConnected = withEth(async (ethereum) => { const checkIfWalletConnected = withEth(async (ethereum) => {
const accounts = await ethereum.request({ method: "eth_accounts" }); const accounts = await ethereum.request({method: "eth_accounts"});
if (accounts.length !== 0) { if (accounts.length !== 0) {
console.log(`Found authorized account ${accounts[0]}`); console.log(`Found authorized account ${accounts[0]}`);
setCurrentAccount(accounts[0]); setCurrentAccount(accounts[0]);
@ -24,7 +25,7 @@ function App() {
}); });
const connectWallet = withEth(async (ethereum) => { const connectWallet = withEth(async (ethereum) => {
const accounts = await ethereum.request({ method: "eth_requestAccounts" }); const accounts = await ethereum.request({method: "eth_requestAccounts"});
console.log(`connected to ${accounts[0]}`); console.log(`connected to ${accounts[0]}`);
setCurrentAccount(accounts[0]); setCurrentAccount(accounts[0]);
}); });
@ -87,7 +88,7 @@ function App() {
<p className="header gradient-text">EpicNFTs Collection</p> <p className="header gradient-text">EpicNFTs Collection</p>
<p className="sub-text">Each unique. Each beautiful. Discover your NFT today.</p> <p className="sub-text">Each unique. Each beautiful. Discover your NFT today.</p>
<div> <div>
<LoadingOverlay visible={loading} /> <LoadingOverlay visible={loading}/>
{currentAccount ? ( {currentAccount ? (
<button onClick={mintNFT} className="cta-button mint-button"> <button onClick={mintNFT} className="cta-button mint-button">
Mint your EpicNFT Mint your EpicNFT
@ -102,7 +103,7 @@ function App() {
</p> </p>
{link && ( {link && (
<p className="sub-text"> <p className="sub-text">
Hey there! We've minted your NFT. It may be blank right now. <br /> Hey there! We've minted your NFT. It may be blank right now. <br/>
It can take a max of 10 min to show up on OpenSea. Here's the{" "} It can take a max of 10 min to show up on OpenSea. Here's the{" "}
<a href={link} target="_blank" rel="noreferrer"> <a href={link} target="_blank" rel="noreferrer">
link link
@ -113,7 +114,7 @@ function App() {
className="cta-button connect-wallet-button" className="cta-button connect-wallet-button"
onClick={() => onClick={() =>
window.open( window.open(
"https://testnets.opensea.io/collection/squarenft-noshuqlivp", collectionAddress,
"_blank" "_blank"
) )
} }

4
client/src/App.test.js
View file

@ -1,8 +1,8 @@
import { render, screen } from '@testing-library/react'; import {render, screen} from '@testing-library/react';
import App from './App'; import App from './App';
test('renders learn react link', () => { test('renders learn react link', () => {
render(<App />); render(<App/>);
const linkElement = screen.getByText(/learn react/i); const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument(); expect(linkElement).toBeInTheDocument();
}); });

4
client/src/index.js
View file

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

2
client/src/lib/eth.js
View file

@ -1,5 +1,5 @@
const getEth = () => { const getEth = () => {
const { ethereum } = window; const {ethereum} = window;
if (!ethereum) { if (!ethereum) {
alert("Wallet not detected. Make sure you have Metamask extension installed and activated."); alert("Wallet not detected. Make sure you have Metamask extension installed and activated.");
} }

2
client/src/reportWebVitals.js
View file

@ -1,6 +1,6 @@
const reportWebVitals = onPerfEntry => { const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) { if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { import('web-vitals').then(({getCLS, getFID, getFCP, getLCP, getTTFB}) => {
getCLS(onPerfEntry); getCLS(onPerfEntry);
getFID(onPerfEntry); getFID(onPerfEntry);
getFCP(onPerfEntry); getFCP(onPerfEntry);

15
contracts/EpicNFT.sol
View file

@ -11,17 +11,16 @@ contract EpicNFT is ERC721URIStorage {
Counters.Counter private _tokenIds; Counters.Counter private _tokenIds;
event NewEpicNFTMinted(address sender, uint256 tokenID); event NewEpicNFTMinted(address sender, uint256 tokenID);
uint256 private maxTokenAllowed = 50;
uint256 private constant MAX_NFT_ALLOWED = 50;
constructor() ERC721("SquareNFT", "SQUARE") { constructor() ERC721("SquareNFT", "SQUARE") {
console.log("My first NFT contract! EPIC!!!"); 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 = [ string[] colors = [
"red", "red",
@ -81,13 +80,13 @@ contract EpicNFT is ERC721URIStorage {
return _tokenIds.current(); return _tokenIds.current();
} }
function getMaxNFTAllowed() public view returns(uint){ function getMaxNFTAllowed() public pure returns (uint) {
return maxTokenAllowed; return MAX_NFT_ALLOWED;
} }
function mint() public { function mint() public {
require( require(
_tokenIds.current() < maxTokenAllowed, _tokenIds.current() < MAX_NFT_ALLOWED,
"the maximum of EpicNFT has already been minted" "the maximum of EpicNFT has already been minted"
); );
uint256 tokenID = _tokenIds.current(); uint256 tokenID = _tokenIds.current();

BIN
screenshots/Screenshot 2022-04-07 at 11.50.25.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
screenshots/Screenshot 2022-04-07 at 18.54.18.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
screenshots/Screenshot 2022-04-07 at 19.27.52.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
screenshots/Screenshot 2022-04-08 at 05.59.44.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 223 KiB

2
scripts/deploy.js
View file

@ -1,4 +1,4 @@
const { ethers } = require("hardhat"); // this import is optional const {ethers} = require("hardhat"); // this import is optional
async function main() { async function main() {
const EpicNFT = await ethers.getContractFactory("EpicNFT"); const EpicNFT = await ethers.getContractFactory("EpicNFT");

2
scripts/run.js
View file

@ -1,4 +1,4 @@
const { ethers } = require("hardhat"); // this import is optional const {ethers} = require("hardhat"); // this import is optional
async function main() { async function main() {
const EpicNFT = await ethers.getContractFactory("EpicNFT"); const EpicNFT = await ethers.getContractFactory("EpicNFT");