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

display message after mint

Browse source
This commit is contained in:
Ruidy 2022-04-08 05:51:16 -04:00
parent c181e3de13
commit 69a47ea74c
1 changed files with 31 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
client/src/App.js
View file

@ -3,11 +3,14 @@ import { providers, Contract } from "ethers";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { withEth } from "./lib/eth"; import { withEth } from "./lib/eth";
import epicNFT from "./lib/epicNFT.json"; import epicNFT from "./lib/epicNFT.json";
import { LoadingOverlay } from "@mantine/core";
function App() { function App() {
const [currentAccount, setCurrentAccount] = useState(""); const [currentAccount, setCurrentAccount] = useState("");
const [mintedNFT, setMintedNFT] = useState(0); const [mintedNFT, setMintedNFT] = useState(0);
const [maxNFT, setMaxNFT] = useState(0); const [maxNFT, setMaxNFT] = useState(0);
const [loading, setLoading] = useState(false);
const [link, setLink] = useState("");
const contractAddress = process.env.REACT_APP_STAGING_CONTRACT_ADDRESS; const contractAddress = process.env.REACT_APP_STAGING_CONTRACT_ADDRESS;
const contractABI = epicNFT.abi; const contractABI = epicNFT.abi;
@ -31,8 +34,11 @@ function App() {
const contract = new Contract(contractAddress, contractABI, signer); const contract = new Contract(contractAddress, contractABI, signer);
const txn = await contract.mint(); const txn = await contract.mint();
setLink("");
setLoading(true);
console.log(`Mining ${txn.hash}…`); console.log(`Mining ${txn.hash}…`);
await txn.wait(); await txn.wait();
setLoading(false);
console.log(`Minted. See transaction: https://rinkeby.etherscan.io/tx/${txn.hash}`); console.log(`Minted. See transaction: https://rinkeby.etherscan.io/tx/${txn.hash}`);
}); });
@ -59,9 +65,7 @@ function App() {
const handleNewEpicNFT = (from, tokenID) => { const handleNewEpicNFT = (from, tokenID) => {
console.log(from, tokenID.toNumber()); console.log(from, tokenID.toNumber());
setMintedNFT(tokenID + 1); setMintedNFT(tokenID + 1);
alert( setLink(`https://testnets.opensea.io/assets/${contractAddress}/${tokenID.toNumber()}`);
`Hey there! We've minted your NFT. It may be blank right now. It can take a max of 10 min to show up on OpenSea. Here's the link: <https://testnets.opensea.io/assets/${contractAddress}/${tokenID.toNumber()}>`
);
}; };
if (window.ethereum) { if (window.ethereum) {
@ -82,18 +86,30 @@ function App() {
<div className="header-container"> <div className="header-container">
<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>
{currentAccount ? ( <div>
<button onClick={mintNFT} className="cta-button mint-button"> <LoadingOverlay visible={loading} />
Mint your EpicNFT {currentAccount ? (
</button> <button onClick={mintNFT} className="cta-button mint-button">
) : ( Mint your EpicNFT
<button className="cta-button connect-wallet-button" onClick={connectWallet}> </button>
Connect with Wallet ) : (
</button> <button className="cta-button connect-wallet-button" onClick={connectWallet}>
)} Connect with Wallet
<p className="sub-text"> </button>
{mintedNFT} EpicNFTs on {maxNFT} already minted )}
</p> <p className="sub-text">
{mintedNFT} EpicNFTs on {maxNFT} already minted
</p>
{link && (
<p className="sub-text">
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">
link
</a>
</p>
)}
</div>
</div> </div>
</div> </div>
</div> </div>