altert user when NFT is minted

README.md

@@ -8,6 +8,7 @@ Demo NFT collection for learning purposes.
 2.  https://testnets.opensea.io/collection/squarenft-bndes4idpq
 3.  https://testnets.opensea.io/collection/squarenft-lemz9demvy
 4.  https://testnets.opensea.io/collection/squarenft-1xkwn34mdz
+5.  https://testnets.opensea.io/collection/squarenft-qlxxnjj8mo (0x6c603E2bF856529A095dAbC9D9991f0c559e1855)
 
 ## Square NFT
 

client/src/App.js

@@ -7,6 +7,9 @@ import epicNFT from "./lib/epicNFT.json";
 function App() {
   const [currentAccount, setCurrentAccount] = useState("");
 
+  const contractAddress = process.env.REACT_APP_STAGING_CONTRACT_ADDRESS;
+  const contractABI = epicNFT.abi;
+
   const checkIfWalletConnected = withEth(async (ethereum) => {
     const accounts = await ethereum.request({ method: "eth_accounts" });
     if (accounts.length !== 0) {
@@ -22,9 +25,6 @@ function App() {
   });
 
   const mintNFT = withEth(async (ethereum) => {
-    const contractAddress = process.env.REACT_APP_STAGING_CONTRACT_ADDRESS;
-    const contractABI = epicNFT.abi;
-    
     const signer = new providers.Web3Provider(ethereum).getSigner();
     const contract = new Contract(contractAddress, contractABI, signer);
 
@@ -38,6 +38,27 @@ function App() {
     checkIfWalletConnected();
   }, []);
 
+  useEffect(() => {
+    let contract;
+    const handleNewEpicNFT = (from, tokenID) => {
+      console.log(from, tokenID.toNumber());
+      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: <https://testnets.opensea.io/assets/${contractAddress}/${tokenID.toNumber()}>`
+      );
+    };
+
+    if (window.ethereum) {
+      const signer = new providers.Web3Provider(window.ethereum).getSigner();
+      contract = new Contract(contractAddress, contractABI, signer);
+      contract.on("NewEpicNFTMinted", handleNewEpicNFT);
+    }
+    return () => {
+      if (contract) {
+        contract.off("NewEpicNFTMinted", handleNewEpicNFT);
+      }
+    };
+  }, [contractABI, contractAddress]);
+
   return (
     <div className="App">
       <div className="container">