ruidy/epicNFT
1
0
Fork 0
mirror of https://github.com/rjNemo/epicNFT synced 2026-06-06 01:46:38 +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.
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

26
client/public/index.html
View file

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

12
client/src/App.css
View file

@ -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%;
}
}

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 { 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 {withEth} from "./lib/eth";
function App() {
const [currentAccount, setCurrentAccount] = useState("");
@ -13,10 +13,11 @@ 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) => {
const accounts = await ethereum.request({ method: "eth_accounts" });
const accounts = await ethereum.request({method: "eth_accounts"});
if (accounts.length !== 0) {
console.log(`Found authorized account ${accounts[0]}`);
setCurrentAccount(accounts[0]);
@ -24,7 +25,7 @@ function App() {
});
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]}`);
setCurrentAccount(accounts[0]);
});
@ -87,7 +88,7 @@ function App() {
<p className="header gradient-text">EpicNFTs Collection</p>
<p className="sub-text">Each unique. Each beautiful. Discover your NFT today.</p>
<div>
<LoadingOverlay visible={loading} />
<LoadingOverlay visible={loading}/>
{currentAccount ? (
<button onClick={mintNFT} className="cta-button mint-button">
Mint your EpicNFT
@ -102,7 +103,7 @@ function App() {
</p>
{link && (
<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{" "}
<a href={link} target="_blank" rel="noreferrer">
link
@ -113,7 +114,7 @@ function App() {
className="cta-button connect-wallet-button"
onClick={() =>
window.open(
"https://testnets.opensea.io/collection/squarenft-noshuqlivp",
collectionAddress,
"_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';
test('renders learn react link', () => {
render(<App />);
render(<App/>);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

4
client/src/index.js
View file

@ -1,12 +1,12 @@
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>
<App />
<App/>
</React.StrictMode>,
document.getElementById("root")
);

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

@ -1,5 +1,5 @@
const getEth = () => {
const { ethereum } = window;
const {ethereum} = window;
if (!ethereum) {
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 => {
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);
getFID(onPerfEntry);
getFCP(onPerfEntry);

15
contracts/EpicNFT.sol
View file

@ -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 =
"<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin meet' viewBox='0 0 350 350'><style>.base { fill:";
string baseSvg1 = "<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin meet' viewBox='0 0 350 350'><style>.base { fill:";
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'>";
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'>";
string[] colors = [
"red",
@ -81,13 +80,13 @@ contract EpicNFT is ERC721URIStorage {
return _tokenIds.current();
}
function getMaxNFTAllowed() public view returns(uint){
return maxTokenAllowed;
function getMaxNFTAllowed() public pure returns (uint) {
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();

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() {
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() {
const EpicNFT = await ethers.getContractFactory("EpicNFT");