Merge pull request #167 from TokenScript/OH_mint_button_states

feat: 🎸 minting state of mint button
SmartTokenLabs · Feb 27, 2023 · 775b862 · 775b862
2 parents 388b69f + 8a8f2c3
commit 775b862
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/ecommerce-store-website/src/base/utils/interact.js b/ecommerce-store-website/src/base/utils/interact.js
@@ -20,18 +20,21 @@ export const safeMint = async ({
 	try {
 
 		window.contract = new _ethers.Contract(contract, abi, connectedWallet.provider.getSigner());
-		const txHash = await window.contract.safeMint(sendTo, tokenUri);
-
+		const tx = await window.contract.safeMint(sendTo, tokenUri);
+		
 		window.negotiator.ui.showLoaderDelayed([ 
 			"<h4>Minting...</h4>",
 			"<small>Transaction in progress</small>"
 		], 0, true);
 
-		setTimeout(() => { window.negotiator.ui.dismissLoader() }, 5000);
-
+		await tx.wait();
+		// ... now TX is succesfully minted
+
+		window.negotiator.ui.dismissLoader()
+
 		return {
 			success: true,
-			status: "✅ Check out your transaction: " + chain + " " + txHash?.hash
+			status: "✅ Check out your transaction: " + chain + " " + tx?.hash
 		}
 
 	} catch (error) {

diff --git a/ecommerce-store-website/src/ui/components/minter/minter.js b/ecommerce-store-website/src/ui/components/minter/minter.js
@@ -31,6 +31,8 @@ export default function Minter({ className }) {
 	const chain = chainMap[chainId] ? chainMap[chainId] : 'unsupported chain: ' + chainId;
 	const nftCollections = nftDataStore;
 
+	const [mintButonState, setMintButonState] = useState(nftDataStore.map(()=>false));
+
 	useEffect( () => {
 		if ( submissionStatus && !walletStatus ) setSubmissionStatus( walletStatus );
 	}, [ walletStatus ] );
@@ -88,6 +90,8 @@ export default function Minter({ className }) {
 					const { title, description, list } = nft;
 					const collectionItem = list[ 0 ];
 
+					let current = i;
+
 					let tokenIsSelected = false;
 					if (typeof ethereum !== "undefined") {
 						const chain = ethereum.chainId === '0x13881' ? '-mumbai' : '-goerli';
@@ -96,16 +100,33 @@ export default function Minter({ className }) {
 							selectedTokens[collectionItem.ref+chain].tokens.length > 0
 						);
 					}
+
+					let isMinted = mintedNFTs.indexOf( collectionItem.id ) > -1 || tokenIsSelected;
 
 					return (
 						<Card key={ i } className="-style-outline -mb6">
 							<Image className={ styles[ 'c-minter_image' ] } src={ collectionItem.imagePath } />
 							<Headline className="f5 -mt3 -mb1" type="h2">{ title }</Headline>
 								<p className="f7 -mb3">{ description }</p>
 							<MinterButton
-								className={ clsx( styles[ 'c-minter_button' ], '-mta' ) }
-								onClick={ event => onMintPressed( event, nft, collectionItem ) }
-								isMinted={ mintedNFTs.indexOf( collectionItem.id ) > -1 || tokenIsSelected }
+								className={ clsx( styles[ 'c-minter_button' ], '-mta' , mintButonState[i] && "is_running") }
+								onClick={ async event => {
+									if (mintButonState[current]) return;
+
+									let state = [...mintButonState];
+									state[current] = true;
+									setMintButonState(state);
+
+									await onMintPressed( event, nft, collectionItem );
+
+									state = [...mintButonState];
+									state[current] = false;
+									setMintButonState(state);
+
+								} }
+								isMinted={ isMinted }
+								mintMessage = { isMinted ? "" : (mintButonState[current] ? "Minting Your NFT" : "Mint Demo NFT") }
+
 							/>
 						</Card>
 					);
@@ -116,15 +137,15 @@ export default function Minter({ className }) {
 	);
 };
 
-function MinterButton({ className, onClick, isMinted = false }) {
+function MinterButton({ className, onClick, isMinted = false, mintMessage = "" }) {
 	return (
 		<Button
 			onClick={ onClick }
 			className={ clsx( className, isMinted ? '-style-primary-light' : '-style-outline' ) }
 			icon={ isMinted && 'check' }
 			iconPos="before"
 		>
-			{ isMinted ? ( 'NFT Minted' ) : ( 'Mint Demo NFT' )}
+			{ isMinted ? ( 'NFT Minted' ) : mintMessage }
 		</Button>
 	);
 }
diff --git a/ecommerce-store-website/src/ui/components/minter/minter.module.scss b/ecommerce-store-website/src/ui/components/minter/minter.module.scss
@@ -27,6 +27,11 @@
 	}
 
 	&_button {
+		&:global(.is_running) {
+			border-color: rgba(var(--color-text), 0.4);
+			background: transparent;
+		    box-shadow: none;
+		}
 
 		&:global(.-style-primary-light) {
 			pointer-events: none;