Add post mint status message for dapp

minting-dapp/package.json

@@ -22,6 +22,7 @@
         "postcss-loader": "^6.2.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-toastify": "^9.0.3",
         "regenerator-runtime": "^0.13.2",
         "sass": "^1.45.0",
         "sass-loader": "^12.4.0",

minting-dapp/src/scripts/main.tsx

@@ -1,13 +1,23 @@
 import '../styles/main.scss';
+import 'react-toastify/dist/ReactToastify.css';
 
 import ReactDOM from 'react-dom';
 import Dapp from './react/Dapp';
 import CollectionConfig from '../../../smart-contract/config/CollectionConfig';
+import { ToastContainer } from 'react-toastify';
 
 if (document.title === '') {
   document.title = CollectionConfig.tokenName;
 }
 
 document.addEventListener('DOMContentLoaded', async () => {
-  ReactDOM.render(<Dapp />, document.getElementById('minting-dapp'));
+  ReactDOM.render(<>
+    <ToastContainer
+          position='top-left'
+          autoClose={5000}
+          closeOnClick={true}
+          pauseOnHover={true}
+          theme='light' />
+    <Dapp />
+  </>, document.getElementById('minting-dapp'));
 });

minting-dapp/src/scripts/react/Dapp.tsx

@@ -8,6 +8,7 @@ import NetworkConfigInterface from '../../../../smart-contract/lib/NetworkConfig
 import CollectionStatus from './CollectionStatus';
 import MintWidget from './MintWidget';
 import Whitelist from '../lib/Whitelist';
+import { toast } from 'react-toastify';
 
 const ContractAbi = require('../../../../smart-contract/artifacts/contracts/' + CollectionConfig.contractName + '.sol/' + CollectionConfig.contractName + '.json').abi;
 
@@ -23,6 +24,7 @@ interface State {
   maxMintAmountPerTx: number;
   tokenPrice: BigNumber;
   isPaused: boolean;
+  loading: boolean;
   isWhitelistMintEnabled: boolean;
   isUserInWhitelist: boolean;
   merkleProofManualAddress: string;
@@ -39,6 +41,7 @@ const defaultState: State = {
   maxMintAmountPerTx: 0,
   tokenPrice: BigNumber.from(0),
   isPaused: true,
+  loading: false,
   isWhitelistMintEnabled: false,
   isUserInWhitelist: false,
   merkleProofManualAddress: '',
@@ -63,7 +66,7 @@ export default class Dapp extends React.Component<Props, State> {
     const browserProvider = await detectEthereumProvider() as ExternalProvider;
 
     if (browserProvider?.isMetaMask !== true) {
-      this.setError( 
+      this.setError(
         <>
           We were not able to detect <strong>MetaMask</strong>. We value <strong>privacy and security</strong> a lot so we limit the wallet options on the DAPP.<br />
           <br />
@@ -84,16 +87,44 @@ export default class Dapp extends React.Component<Props, State> {
   async mintTokens(amount: number): Promise<void>
   {
     try {
-      await this.contract.mint(amount, {value: this.state.tokenPrice.mul(amount)});
+      this.setState({loading: true});
+      const transaction = await this.contract.mint(amount, {value: this.state.tokenPrice.mul(amount)});
+
+      toast.info(<>
+        Transaction sent! Please wait...<br/>
+        <a href={this.generateTransactionUrl(transaction.hash)} target="_blank" rel="noopener">View on {this.state.networkConfig.blockExplorer.name}</a>
+      </>);
+
+      const receipt = await transaction.wait();
+
+      toast.success(<>
+        Success!<br />
+        <a href={this.generateTransactionUrl(receipt.transactionHash)} target="_blank" rel="noopener">View on {this.state.networkConfig.blockExplorer.name}</a>
+      </>);
+
+      this.setState({loading: false});
     } catch (e) {
       this.setError(e);
+      this.setState({loading: false});
     }
   }
 
   async whitelistMintTokens(amount: number): Promise<void>
   {
     try {
-      await this.contract.whitelistMint(amount, Whitelist.getProofForAddress(this.state.userAddress!), {value: this.state.tokenPrice.mul(amount)});
+      const transaction = await this.contract.whitelistMint(amount, Whitelist.getProofForAddress(this.state.userAddress!), {value: this.state.tokenPrice.mul(amount)});
+
+      toast.info(<>
+        Transaction sent! Please wait...<br/>
+        <a href={this.generateTransactionUrl(transaction.hash)} target="_blank" rel="noopener">View on {this.state.networkConfig.blockExplorer.name}</a>
+      </>);
+
+      const receipt = await transaction.wait();
+
+      toast.success(<>
+        Success!<br />
+        <a href={this.generateTransactionUrl(receipt.transactionHash)} target="_blank" rel="noopener">View on {this.state.networkConfig.blockExplorer.name}</a>
+      </>);
     } catch (e) {
       this.setError(e);
     }
@@ -134,7 +165,7 @@ export default class Dapp extends React.Component<Props, State> {
     navigator.clipboard.writeText(merkleProof);
 
     this.setState({
-      merkleProofManualAddressFeedbackMessage: 
+      merkleProofManualAddressFeedbackMessage:
       <>
         <strong>Congratulations!</strong> <span className="emoji">🎉</span><br />
         Your Merkle Proof <strong>has been copied to the clipboard</strong>. You can paste it into <a href={this.generateContractUrl()} target="_blank">{this.state.networkConfig.blockExplorer.name}</a> to claim your tokens.
@@ -153,7 +184,7 @@ export default class Dapp extends React.Component<Props, State> {
           : null}
 
         {this.state.errorMessage ? <div className="error"><p>{this.state.errorMessage}</p><button onClick={() => this.setError()}>Close</button></div> : null}
-        
+
         {this.isWalletConnected() ?
           <>
             {this.isContractReady() ?
@@ -179,6 +210,7 @@ export default class Dapp extends React.Component<Props, State> {
                     isUserInWhitelist={this.state.isUserInWhitelist}
                     mintTokens={(mintAmount) => this.mintTokens(mintAmount)}
                     whitelistMintTokens={(mintAmount) => this.whitelistMintTokens(mintAmount)}
+                    loading={this.state.loading}
                   />
                   :
                   <div className="collection-sold-out">
@@ -202,7 +234,7 @@ export default class Dapp extends React.Component<Props, State> {
         :
           <div className="no-wallet">
             {!this.isWalletConnected() ? <button className="primary" disabled={this.provider === undefined} onClick={() => this.connectWallet()}>Connect Wallet</button> : null}
-            
+
             <div className="use-block-explorer">
               Hey, looking for a <strong>super-safe experience</strong>? <span className="emoji">😃</span><br />
               You can interact with the smart-contract <strong>directly</strong> through <a href={this.generateContractUrl()} target="_blank">{this.state.networkConfig.blockExplorer.name}</a>, without even connecting your wallet to this DAPP! <span className="emoji">🚀</span><br />
@@ -245,7 +277,7 @@ export default class Dapp extends React.Component<Props, State> {
         errorMessage = error.message;
       } else if (React.isValidElement(error)) {
         this.setState({errorMessage: error});
-  
+
         return;
       }
     }
@@ -265,6 +297,11 @@ export default class Dapp extends React.Component<Props, State> {
     return CollectionConfig.marketplaceConfig.generateCollectionUrl(CollectionConfig.marketplaceIdentifier, !this.isNotMainnet());
   }
 
+  private generateTransactionUrl(transactionHash: string): string
+  {
+    return this.state.networkConfig.blockExplorer.generateTransactionUrl(transactionHash);
+  }
+
   private async connectWallet(): Promise<void>
   {
     try {
@@ -279,7 +316,7 @@ export default class Dapp extends React.Component<Props, State> {
   private async initWallet(): Promise<void>
   {
     const walletAccounts = await this.provider.listAccounts();
-    
+
     this.setState(defaultState);
 
     if (walletAccounts.length === 0) {
@@ -298,7 +335,7 @@ export default class Dapp extends React.Component<Props, State> {
 
       return;
     }
-    
+
     this.setState({
       userAddress: walletAccounts[0],
       network,

minting-dapp/src/scripts/react/MintWidget.tsx

@@ -9,6 +9,7 @@ interface Props {
   tokenPrice: BigNumber;
   maxMintAmountPerTx: number;
   isPaused: boolean;
+  loading: boolean;
   isWhitelistMintEnabled: boolean;
   isUserInWhitelist: boolean;
   mintTokens(mintAmount: number): Promise<void>;
@@ -64,7 +65,7 @@ export default class MintWidget extends React.Component<Props, State> {
     return (
       <>
         {this.canMint() ?
-          <div className="mint-widget">
+          <div className={`mint-widget ${this.props.loading ? 'animate-pulse saturate-0 pointer-events-none' : ''}`}>
             <div className="preview">
               <img src="/build/images/preview.png" alt="Collection preview" />
             </div>
@@ -74,16 +75,16 @@ export default class MintWidget extends React.Component<Props, State> {
             </div>
 
             <div className="controls">
-              <button className="decrease" onClick={() => this.decrementMintAmount()}>-</button>
+              <button className="decrease" disabled={this.props.loading} onClick={() => this.decrementMintAmount()}>-</button>
               <span className="mint-amount">{this.state.mintAmount}</span>
-              <button className="increase" onClick={() => this.incrementMintAmount()}>+</button>
-              <button className="primary" onClick={() => this.mint()}>Mint</button>
+              <button className="increase" disabled={this.props.loading} onClick={() => this.incrementMintAmount()}>+</button>
+              <button className="primary" disabled={this.props.loading} onClick={() => this.mint()}>Mint</button>
             </div>
           </div>
           :
           <div className="cannot-mint">
             <span className="emoji">⏳</span>
-            
+
             {this.props.isWhitelistMintEnabled ? <>You are not included in the <strong>whitelist</strong>.</> : <>The contract is <strong>paused</strong>.</>}<br />
             Please come back during the next sale!
           </div>

minting-dapp/yarn.lock

@@ -2712,6 +2712,11 @@ clone@^2.0.0, clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -6116,6 +6121,13 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-toastify@^9.0.3:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.3.tgz#8e6d22651c85cb584c5ebd0b5e2c3bf0d7ec06ee"
+  integrity sha512-0QZJk0SqYBxouRBGCFU3ymvjlwimRRhVH7SzqGRiVrQ001KSoUNbGKx9Yq42aoPv18n45yJzEFG82zqv3HnASg==
+  dependencies:
+    clsx "^1.1.1"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"

smart-contract/lib/NetworkConfigInterface.ts

@@ -4,5 +4,6 @@ export default interface NetworkConfigInterface {
   blockExplorer: {
     name: string;
     generateContractUrl: (contractAddress: string) => string;
+    generateTransactionUrl: (transactionAddress: string) => string;
   };
 };

smart-contract/lib/Networks.ts

@@ -9,6 +9,7 @@ export const hardhatLocal: NetworkConfigInterface = {
   blockExplorer: {
     name: 'Block explorer (not available for local chains)',
     generateContractUrl: (contractAddress: string) => `#`,
+    generateTransactionUrl: (transactionAddress: string) => `#`,
   },
 }
 
@@ -21,6 +22,7 @@ export const ethereumTestnet: NetworkConfigInterface = {
   blockExplorer: {
     name: 'Etherscan (Rinkeby)',
     generateContractUrl: (contractAddress: string) => `https://rinkeby.etherscan.io/address/${contractAddress}`,
+    generateTransactionUrl: (transactionAddress: string) => `https://rinkeby.etherscan.io/tx/${transactionAddress}`,
   },
 }
 
@@ -30,6 +32,7 @@ export const ethereumMainnet: NetworkConfigInterface = {
   blockExplorer: {
     name: 'Etherscan',
     generateContractUrl: (contractAddress: string) => `https://etherscan.io/address/${contractAddress}`,
+    generateTransactionUrl: (transactionAddress: string) => `https://etherscan.io/tx/${transactionAddress}`,
   },
 }
 
@@ -42,6 +45,7 @@ export const polygonTestnet: NetworkConfigInterface = {
   blockExplorer: {
     name: 'Polygonscan (Mumbai)',
     generateContractUrl: (contractAddress: string) => `https://mumbai.polygonscan.com/address/${contractAddress}`,
+    generateTransactionUrl: (transactionAddress: string) => `https://mumbai.polygonscan.com/tx/${transactionAddress}`,
   },
 }
 
@@ -51,5 +55,6 @@ export const polygonMainnet: NetworkConfigInterface = {
   blockExplorer: {
     name: 'Polygonscan',
     generateContractUrl: (contractAddress: string) => `https://polygonscan.com/address/${contractAddress}`,
+    generateTransactionUrl: (transactionAddress: string) => `https://polygonscan.com/tx/${transactionAddress}`,
   },
 }