Example: Custom NFT Minting Sales Page using React

This example React app renders a minting pre-sale/public-sale widget for an NFT collection.

🔥 Quick Start

Create a new NFT collection using Flair's dashboard. Note that you will be the full owner of smart contract.

Clone the examples repo, install dependencies in the custom-nft-minting-sales directory:

git clone https://github.com/0xflair/examples

cd examples/react/custom-nft-minting-sales

npm install

Grab your contract address and chain ID, and update .env:
- Set REACT_APP_COLLECTION_CONTRACT_ADDRESS to your deployed contract address you get from Flair's dashboard > Collections > your-collection > Deploy tab.
- Set REACT_APP_COLLECTION_CHAIN_ID depending on the contract chain. Use 1 for Eth mainnet, 4 for Rinkeby testnet, 137 for Polygon mainnet, etc.
Run the react app in the custom-nft-minting-sales directory:
```
npm start
```
Open http://localhost:3000 to view it in the browser.

To use this example within your app:

Configure FlairProvider around your root App:

import { FlairProvider } from 'flair-sdk';

// ...
   <FlairProvider>
      <App />
   </FlairProvider>
// ...

Implement the minting widget depending on your preferred customizability:
- Easiest approach with minimum customizability you can copy the code within App.tsx.
- To have your own layout you can use individual components as in CollectionSalesMintingSection.tsx
(optional) To get the default styling you can install and configure tailwindcss:
1. Install npm install tailwindcss @headlessui/react @heroicons/react
2. Configure tailwind.config.js
3. Configure postcss.config.js
4. Import tailwind in your index.css. Make sure your app imports the CSS import './index.css';.
(optional) If you're using Webpack 5 (e.g. React v17+) you need to manually configure Buffer for Coinbase wallet to work:
1. Install npm install react-app-rewired buffer
2. Then create a config-overrides.js to inject the Buffer.
Profit 🚀