diff --git a/client/src/App.js b/client/src/App.js index f049346..a3bbe23 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -3,11 +3,14 @@ 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"; function App() { const [currentAccount, setCurrentAccount] = useState(""); const [mintedNFT, setMintedNFT] = 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 contractABI = epicNFT.abi; @@ -31,8 +34,11 @@ function App() { const contract = new Contract(contractAddress, contractABI, signer); const txn = await contract.mint(); + setLink(""); + setLoading(true); console.log(`Mining ${txn.hash}…`); await txn.wait(); + setLoading(false); console.log(`Minted. See transaction: https://rinkeby.etherscan.io/tx/${txn.hash}`); }); @@ -59,9 +65,7 @@ function App() { const handleNewEpicNFT = (from, tokenID) => { console.log(from, tokenID.toNumber()); setMintedNFT(tokenID + 1); - alert( - `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: ` - ); + setLink(`https://testnets.opensea.io/assets/${contractAddress}/${tokenID.toNumber()}`); }; if (window.ethereum) { @@ -82,18 +86,30 @@ function App() {

EpicNFTs Collection

Each unique. Each beautiful. Discover your NFT today.

- {currentAccount ? ( - - ) : ( - - )} -

- {mintedNFT} EpicNFTs on {maxNFT} already minted -

+
+ + {currentAccount ? ( + + ) : ( + + )} +

+ {mintedNFT} EpicNFTs on {maxNFT} already minted +

+ {link && ( +

+ 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 + +

+ )} +