This example React app renders a minting widget for an ERC721 (A) NFT collection deployed via Flair's dashboard.
The main difference between this example and custom-tiered-sales is this: Since we know this sales is for an ERC721 collection we can render a "Supply Counter" for the total and max supply of the collection.
flair-sdk
: latestreact
: v17.x or v18.x
-
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
erc721-custom-tiered-sales
directory:git clone https://github.com/flair-sdk/examples cd examples/react/erc721-custom-tiered-sales npm install
-
Grab your contract address and chain ID, and update .env:
- Set
REACT_APP_CONTRACT_ADDRESS
to your deployed contract address you get from Flair's dashboard > Collections > your-collection > Deploy tab. - Set
REACT_APP_CONTRACT_CHAIN_ID
depending on the contract chain. Use1
for Eth mainnet,4
for Rinkeby testnet,137
for Polygon mainnet, etc.
- Set
-
Run the react app in the
erc721-custom-tiered-sales
directory:npm start
-
Open http://localhost:3000 to view it in the browser.
To use this example within your app:
-
Install
@flair-sdk/react
in your React app:npm install @flair-sdk/react
-
Configure FlairProvider around your root App:
import { FlairProvider } from "@flair-sdk/react"; // ... <FlairProvider> <App /> </FlairProvider>; // ...
-
Implement the minting widget depending on your preferred customizability:
- If you need control over each element you can copy and customize the code within App.tsx.
- To use a ready-made component for basic minting functionality you can use TieredSalesMintingSection.tsx component (it has Mint count, Mint button, Statuses, and loading bar)
-
(optional) If you're using Webpack 5 (e.g. React v17+) you need to manually configure Buffer for Coinbase wallet to work:
- Install
npm install react-app-rewired buffer
- Then create a config-overrides.js to inject the Buffer.
- Install
-
Profit ๐