Skip to content

Commit

Permalink
feat: 🎸 minting state of mint button
Browse files Browse the repository at this point in the history
  • Loading branch information
oleggrib committed Feb 22, 2023
1 parent b52edf1 commit 8a8f2c3
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 10 deletions.
13 changes: 8 additions & 5 deletions ecommerce-store-website/src/base/utils/interact.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
31 changes: 26 additions & 5 deletions ecommerce-store-website/src/ui/components/minter/minter.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ] );
Expand Down Expand Up @@ -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';
Expand All @@ -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>
);
Expand All @@ -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>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 8a8f2c3

Please sign in to comment.