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;