diff --git a/ecommerce-store-website/src/base/utils/interact.js b/ecommerce-store-website/src/base/utils/interact.js
index 88316cbcf..4eb113324 100644
--- 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([
"
Minting...
",
"Transaction in progress"
], 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
index ddf194b40..5e43b9faf 100644
--- 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,6 +100,8 @@ export default function Minter({ className }) {
selectedTokens[collectionItem.ref+chain].tokens.length > 0
);
}
+
+ let isMinted = mintedNFTs.indexOf( collectionItem.id ) > -1 || tokenIsSelected;
return (
@@ -103,9 +109,24 @@ export default function Minter({ className }) {
{ title }
{ description }
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") }
+
/>
);
@@ -116,7 +137,7 @@ export default function Minter({ className }) {
);
};
-function MinterButton({ className, onClick, isMinted = false }) {
+function MinterButton({ className, onClick, isMinted = false, mintMessage = "" }) {
return (
);
}
diff --git a/ecommerce-store-website/src/ui/components/minter/minter.module.scss b/ecommerce-store-website/src/ui/components/minter/minter.module.scss
index 80b1b4eb4..b052d912b 100644
--- 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;