import { useState } from 'react';
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";
function App() {
const [mintAmount, setMintAmount] = useState(1);
const nftCost = 0.001;
const projectId = '_YOUR_PROJECT_ID_';
const collectionId = '_YOUR_COLLECTION_ID_';
const handleDecrement = () => {
if (mintAmount <= 1) return;
setMintAmount(mintAmount - 1);
}
const handleIncrement = () => {
if (mintAmount >= 3) return;
setMintAmount(mintAmount + 1);
}
return (
<div>
<button onClick={handleDecrement}> - </button>
<input
readOnly
type="number"
value={mintAmount}
/>
<button onClick={handleIncrement}> + </button>
<CrossmintPayButton
projectId={projectId}
collectionId={collectionId}
environment="staging"
mintConfig={{
type: "erc-721",
totalPrice: (nftCost * mintAmount).toString(),
_quantity: mintAmount // the `_quantity` property should match what is in your mint function
// your custom minting arguments...
}}
/>
</div>
);
}
export default App;