4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | Flair - Custom NFT Minting Sales
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/react/community-airdrop-reward-stream/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | Flair - Community Airdrop Reward Stream
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/react/simple-wallet-integration/README.md:
--------------------------------------------------------------------------------
1 | # Example: Simple Wallet Integration using React
2 |
3 | This example React app renders a connect button and when wallet is connected it shows a dropdown menu with wallet's address, balance and disconnect button.
4 |
5 | ##### Dependencies
6 |
7 | - `flair-sdk`: latest
8 | - `react`: v17.x or v18.x
9 |
10 |
30 |
31 | ## 🔮 Tutorial
32 |
33 | To use this example within your app:
34 |
35 | 1. Install `flair-sdk` in your React app:
36 |
37 | ```sh
38 | npm install flair-sdk
39 | ```
40 |
41 | 2. Configure FlairProvider around your root App:
42 |
43 | ```ts
44 | import { FlairProvider } from "flair-sdk";
45 |
46 | // ...
47 |
48 |
49 | ;
50 | // ...
51 | ```
52 |
53 | 3. _(optional)_ If you're using Webpack 5 (e.g. React v17+) you might to manually configure Buffer for Coinbase wallet to work:
54 |
55 | 1. Install `npm install react-app-rewired buffer`
56 | 2. Then create a [config-overrides.js](config-overrides.js) to inject the Buffer.
57 |
58 | 4. Add ``, `` and/or `` components in your dApp.
59 |
60 | ```ts
61 | import {
62 | ConnectButton,
63 | DisconnectButton,
64 | IfConnected,
65 | WalletProfile,
66 | WalletDropdown
67 | } from "flair-sdk";
68 |
69 | const App = () => {
70 | return (
71 |
72 | {/* Render a simple connect button */}
73 | Hi! You can connect here:
74 |
75 | {/* If user is connected render a dropdown */}
76 |
77 |
78 |
79 |
80 | {/* Render a wallet profile right after connect button */}
81 |
82 |
83 |
84 |
85 | {/* Render a dropdown with wallet profile and menu right after connect button */}
86 |
87 |
88 |
89 |
90 | {/* Render a disconnect button after user has connected */}
91 |
92 |
93 |
94 |
95 | );
96 | };
97 | ```
98 |
99 | 5. Profit :rocket:
100 |
--------------------------------------------------------------------------------
/nodejs/express/mint-one-of-one-nfts-meta-transactions/README.md:
--------------------------------------------------------------------------------
1 | # Example: Mint 1-of-1 NFTs from your backend (Node.js)
2 |
3 | This example uses Flair SDK to mint new NFTs from your backend using meta transactions. In this approach you will configure a private key that has the "minter" role on your NFT collection (or is contract owner -- which is less secure).
4 |
5 | We're going to use "Digital Asset Collection" collection, which is using [OneOfOneExtension](https://docs.flair.finance/sdk/nft-collections/minting/of-1-mint), and will mint NFTs with dedicated dynamic metadata and image URI. This means each NFT will have it's own metadata and image IPFS URI.
6 |
7 | ##### Dependencies
8 |
9 | * Node.js
10 | * Express
11 | * `flair-sdk`: latest
12 | * An Ethereum-compatible wallet private key (either [via Javascript](https://www.quicknode.com/guides/web3-sdks/how-to-generate-a-new-ethereum-address-in-javascript) using [MetaMask](https://metamask.io/))
13 |
14 | ## :fire: Quick Start
15 |
16 | 1. Create and deploy a **Digital Asset Collection** under 2 minutes via [Flair's Collections](https://app.flair.finance/collections/create/ERC721OneOfOne).
17 |
18 | 2. Create your first API Key if not already done via [Flair's API Keys](https://app.flair.finance/clients).
19 |
20 | 3. Clone this repo and navigate to the example directory:
21 |
22 | ```bash
23 | git clone https://github.com/0xflair/examples
24 |
25 | cd examples/nodejs/express/mint-one-of-one-nft-meta-transactions
26 |
27 | npm install
28 | ```
29 |
30 | 4. Copy `.env.dist` and create a new `.env` file:
31 |
32 | ```bash
33 | cp .env.dist .env
34 | ```
35 |
36 | 5. Put the correct values in `.env` file:
37 | * *FLAIR_CLIENT_ID*: copy from step2 above.
38 | * *CONTRACT_CHAIN_ID*: based on the chain you used to deploy the contract. `1` for Eth mainnet, `4` for Rinkeby testnet, `137` for Polygon mainnet, etc.
39 | * *MINTER_PRIVATE_KEY*: the private key of your wallet, or a new wallet you created just for minting.
40 |
41 | 6. If you're using a minter wallet other than your contract owner, give that minter address "MINTER_ROLE", so it can mint NFTs:
42 | 1. Go to your collection dashboard
43 | 2. Go to "Roles" admin section
44 | 3. Paste your minter address, and click on "Grant role".
45 |
46 | 7. Allow Flair's trusted forwarder to send meta-transactions to your collection:
47 | 1. Go to your collection dashboard
48 | 2. Go to "Minting" admin section, scroll down to "Backend minting" card.
49 | 3. Configure your trusted forwarder address with the value of Flair's latest trusted forwarder shown at the bottom of the same card.
50 |
51 | 8. Start the test server:
52 |
53 | ```bash
54 | npm start
55 | ```
56 |
57 | 9. Open the test endpoint in your browser to mint the first NFT:
58 |
59 | * [http://localhost:8080/mint](http://localhost:8080/mint)
60 |
61 | ## Need help?
62 |
63 | Our developers are happy to help you debug issues and problems, join our [Discord](https://discord.gg/flair) and drop a message.
64 |
--------------------------------------------------------------------------------
/nodejs/express/mint-nft-by-role-meta-transactions/README.md:
--------------------------------------------------------------------------------
1 | # Example: Mint NFTs by role from your backend
2 |
3 | This example uses Flair SDK to mint new NFTs from your backend using meta transactions. In this approach you will configure a private key that has the "minter" role on your NFT collection (or is contract owner -- which is less secure).
4 |
5 | We're going to rely on [ERC721RoleBasedMintExtension](https://github.com/0xflair/evm-contracts/blob/main/contracts/collections/ERC721/extensions/ERC721RoleBasedMintExtension.sol) to mint NFTs. This means you'll grant MINTER_ROLE to a specific admin wallet on your backend, which is able to mint NFTs based on your own logic in your backend.
6 |
7 | ##### Dependencies
8 |
9 | * Node.js
10 | * Express
11 | * `flair-sdk`: latest
12 | * An Ethereum-compatible wallet private key (either [via Javascript](https://www.quicknode.com/guides/web3-sdks/how-to-generate-a-new-ethereum-address-in-javascript) using [MetaMask](https://metamask.io/))
13 |
14 | ## :fire: Quick Start
15 |
16 | 1. Create and deploy a **Simple or Tiered Sales Collection** under 2 minutes via [Flair's Collections](https://app.flair.finance/collections/create).
17 |
18 | 2. Create your first API Key if not already done via [Flair's API Keys](https://app.flair.finance/clients).
19 |
20 | 3. Clone this repo and navigate to the example directory:
21 |
22 | ```bash
23 | git clone https://github.com/0xflair/examples
24 |
25 | cd examples/nodejs/express/mint-nft-by-role-meta-transactions
26 |
27 | npm install
28 | ```
29 |
30 | 4. Copy `.env.dist` and create a new `.env` file:
31 |
32 | ```bash
33 | cp .env.dist .env
34 | ```
35 |
36 | 5. Put the correct values in `.env` file:
37 | * *FLAIR_CLIENT_ID*: copy from step2 above.
38 | * *CONTRACT_CHAIN_ID*: based on the chain you used to deploy the contract. `1` for Eth mainnet, `4` for Rinkeby testnet, `137` for Polygon mainnet, etc.
39 | * *MINTER_PRIVATE_KEY*: the private key of your wallet, or a new wallet you created just for minting.
40 |
41 | 6. If you're using a minter wallet other than your contract owner, give that minter address "MINTER_ROLE", so it can mint NFTs:
42 | 1. Go to your collection dashboard
43 | 2. Go to "Roles" admin section
44 | 3. Paste your minter address, and click on "Grant role".
45 |
46 | 7. Allow Flair's trusted forwarder to send meta-transactions to your collection:
47 | 1. Go to your collection dashboard
48 | 2. Go to "Minting" admin section, scroll down to "Backend minting" card.
49 | 3. Configure your trusted forwarder address with the value of Flair's latest trusted forwarder shown at the bottom of the same card.
50 |
51 | 8. Start the test server:
52 |
53 | ```bash
54 | npm start
55 | ```
56 |
57 | 9. Open the test endpoint in your browser to mint the first NFT:
58 |
59 | * [http://localhost:8080/mint](http://localhost:8080/mint)
60 |
61 | ## Need help?
62 |
63 | Our developers are happy to help you debug issues and problems, join our [Discord](https://discord.gg/flair) and drop a message.
64 |
--------------------------------------------------------------------------------
/react/custom-nft-minting-sales/README.md:
--------------------------------------------------------------------------------
1 | # Example: Custom NFT Minting Sales Page using React
2 |
3 | This example React app renders a minting pre-sale/public-sale widget for an NFT collection.
4 |
5 | ##### Dependencies
6 |
7 | * `flair-sdk`: latest
8 | * `react`: v17.x or v18.x
9 |
10 | ## :fire: Quick Start
11 |
12 | 1. Create a new NFT collection using [Flair's dashboard](https://app.flair.finance/collections). Note that you will be the full owner of smart contract.
13 | 2. Clone the examples repo, install dependencies in the `custom-nft-minting-sales` directory:
14 |
15 | ```sh
16 | git clone https://github.com/0xflair/examples
17 |
18 | cd examples/react/custom-nft-minting-sales
19 |
20 | npm install
21 | ```
22 |
23 | 3. Grab your contract address and chain ID, and update [.env](./.env):
24 | * Set `REACT_APP_COLLECTION_CONTRACT_ADDRESS` to your deployed contract address you get from Flair's dashboard > Collections > your-collection > Deploy tab.
25 | * 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.
26 | 4. Run the react app in the `custom-nft-minting-sales` directory:
27 |
28 | ```sh
29 | npm start
30 | ```
31 |
32 | 5. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
33 |
34 | 
35 |
36 | ## 🔮 Tutorial
37 |
38 | To use this example within your app:
39 |
40 | 1. Install `flair-sdk` in your React app:
41 |
42 | ```sh
43 | npm install flair-sdk
44 | ```
45 |
46 | 2. Configure FlairProvider around your root App:
47 |
48 | ```ts
49 | import { FlairProvider } from 'flair-sdk';
50 |
51 | // ...
52 |
53 |
54 |
55 | // ...
56 | ```
57 |
58 | 3. Implement the minting widget depending on your preferred customizability:
59 | * Easiest approach with minimum customizability you can copy the code within [App.tsx](./src/App.tsx).
60 | * To have your own layout you can use individual components as in [CollectionSalesMintingSection.tsx](https://github.com/0xflair/typescript-sdk/blob/main/packages/react-nft-collections/src/extensions/sales/sections/CollectionSalesMintingSection.tsx#L28-L135)
61 |
62 | 4. *(optional)* To get the default styling you can install and configure [tailwindcss](https://tailwindcss.com/docs/installation/using-postcss):
63 | 1. Install `npm install tailwindcss @headlessui/react @heroicons/react`
64 | 2. Configure [tailwind.config.js](./tailwind.config.js)
65 | 3. Configure [postcss.config.js](./postcss.config.js)
66 | 4. Import tailwind in your [index.css](./src/index.css). Make sure your app imports the CSS `import './index.css';`.
67 |
68 | 5. *(optional)* If you're using Webpack 5 (e.g. React v17+) you need to manually configure Buffer for Coinbase wallet to work:
69 | 1. Install `npm install react-app-rewired buffer`
70 | 2. Then create a [config-overrides.js](config-overrides.js) to inject the Buffer.
71 |
72 | 6. Profit :rocket:
73 |
--------------------------------------------------------------------------------
/react/community-airdrop-reward-stream/README.md:
--------------------------------------------------------------------------------
1 | # Example: Airdrop rewards to your NFT community
2 |
3 | This example React app uses Flair token streams to render a claiming widget for holders of your NFT collection to claim some ERC20 rewards over a specific period of time.
4 |
5 | ##### Dependencies
6 |
7 | * `flair-sdk`: latest
8 | * `react`: v17.x or v18.x
9 |
10 | ## :fire: Quick Start
11 |
12 | 1. Create a new stream in [Flair's dashboard](https://app.flair.finance/streams). Note that you will be the full owner of staking contract.
13 | 2. Make sure to create "Reward for holding NFTs"
14 |
15 | 
16 |
17 | 3. Grab your contract address and chain ID, and update [App.tsx](./src/App.tsx):
18 | * Set `STREAM_CONTRACT_ADDRESS` to your deployed contract address you get from Flair's dashboard > Streams > your-stream > Deploy tab.
19 | * Set `STREAM_CHAIN_ID` depending on the contract chain. Use `1` for Eth mainnet, `4` for Rinkeby testnet, `137` for Polygon mainnet.
20 | 4. Clone the repo, install dependencies and run the react app in the `community-airdrop-reward-stream` directory:
21 |
22 | ```sh
23 | git clone https://github.com/0xflair/examples
24 |
25 | cd examples/react/community-airdrop-reward-stream
26 |
27 | npm install
28 |
29 | npm start
30 | ```
31 |
32 | 5. Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
33 |
34 | 
35 |
36 | ## 🔮 Tutorial
37 |
38 | To use this example within your own React app:
39 |
40 | 1. Install `flair-sdk`:
41 |
42 | ```sh
43 | npm install flair-sdk
44 | ```
45 |
46 | 2. Configure FlairProvider around your root App:
47 |
48 | ```ts
49 | import { FlairProvider } from 'flair-sdk';
50 |
51 | // ...
52 |
53 |
54 |
55 | // ...
56 | ```
57 |
58 | 3. Implement the claiming widget depending on your preferred customizability:
59 | * Easiest approach with minimum customizability you can copy the code within [App.tsx](./src/App.tsx).
60 | * To have your own layout you can use individual components as in [StreamClaimingSection.tsx](https://github.com/0xflair/typescript-sdk/blob/main/packages/react-token-streams/src/sections/StreamClaimingSection.tsx#L61)
61 |
62 | 4. *(optional)* To get the default styling you can install and configure [tailwindcss](https://tailwindcss.com/docs/installation/using-postcss):
63 | 1. Install `npm install tailwindcss @headlessui/react @heroicons/react`
64 | 2. Configure [tailwind.config.js](./tailwind.config.js)
65 | 3. Configure [postcss.config.js](./postcss.config.js)
66 | 4. Import tailwind in your [index.css](./src/index.css). Make sure your app imports the CSS `import './index.css';`.
67 |
68 | 5. *(optional)* If you're using Webpack 5 (e.g. React v17+) you need to manually configure Buffer for Coinbase wallet to work:
69 | 1. Install `npm install react-app-rewired buffer`
70 | 2. Then create a [config-overrides.js](config-overrides.js) to inject the Buffer.
71 |
72 | 6. Profit :rocket:
73 |
--------------------------------------------------------------------------------
/typescript/express/mint-one-of-one-nfts-meta-transactions/README.md:
--------------------------------------------------------------------------------
1 | # Example: Mint 1-of-1 NFTs from your backend (Typescript)
2 |
3 | This example uses Flair SDK to mint new NFTs from your backend using meta transactions. In this approach you will configure a private key that has the "minter" role on your NFT collection (or is contract owner -- which is less secure).
4 |
5 | We're going to use "Digital Asset Collection" collection, which is using [OneOfOneExtension](https://docs.flair.finance/sdk/nft-collections/minting/of-1-mint), and will mint NFTs with dedicated dynamic metadata and image URI. This means each NFT will have it's own metadata and image IPFS URI.
6 |
7 | ##### Dependencies
8 |
9 | * Node.js
10 | * Typescript
11 | * Express
12 | * `flair-sdk`: latest
13 | * An Ethereum-compatible wallet private key (either [via Javascript](https://www.quicknode.com/guides/web3-sdks/how-to-generate-a-new-ethereum-address-in-javascript) using [MetaMask](https://metamask.io/))
14 |
15 | ## :fire: Quick Start
16 |
17 | 1. Create and deploy a **Digital Asset Collection** under 2 minutes via [Flair's Collections](https://app.flair.finance/collections/create/ERC721OneOfOne).
18 |
19 | 2. Create your first API Key if not already done via [Flair's API Keys](https://app.flair.finance/clients).
20 |
21 | 3. Clone this repo and navigate to the example directory:
22 |
23 | ```bash
24 | git clone https://github.com/0xflair/examples
25 |
26 | cd examples/nodejs/express/mint-one-of-one-nft-meta-transactions
27 |
28 | npm install
29 | ```
30 |
31 | 4. Copy `.env.dist` and create a new `.env` file:
32 |
33 | ```bash
34 | cp .env.dist .env
35 | ```
36 |
37 | 5. Put the correct values in `.env` file:
38 | * *FLAIR_CLIENT_ID*: copy from step2 above.
39 | * *CONTRACT_CHAIN_ID*: based on the chain you used to deploy the contract. `1` for Eth mainnet, `4` for Rinkeby testnet, `137` for Polygon mainnet, etc.
40 | * *MINTER_PRIVATE_KEY*: the private key of your wallet, or a new wallet you created just for minting.
41 |
42 | 6. If you're using a minter wallet other than your contract owner, give that minter address "MINTER_ROLE", so it can mint NFTs:
43 | 1. Go to your collection dashboard
44 | 2. Go to "Roles" admin section
45 | 3. Paste your minter address, and click on "Grant role".
46 |
47 | 7. Allow Flair's trusted forwarder to send meta-transactions to your collection:
48 | 1. Go to your collection dashboard
49 | 2. Go to "Minting" admin section, scroll down to "Backend minting" card.
50 | 3. Configure your trusted forwarder address with the value of Flair's latest trusted forwarder shown at the bottom of the same card.
51 |
52 | 8. Build the project to get javascript files based on typescript code:
53 |
54 | ```bash
55 | npm run build
56 | ```
57 |
58 | 9. Start the test server:
59 |
60 | ```bash
61 | npm start
62 | ```
63 |
64 | 10. Open the test endpoint in your browser to mint the first NFT:
65 |
66 | * [http://localhost:8080/mint](http://localhost:8080/mint)
67 |
68 | ## Need help?
69 |
70 | Our developers are happy to help you debug issues and problems, join our [Discord](https://discord.gg/flair) and drop a message.
71 |
--------------------------------------------------------------------------------
/nodejs/express/mint-nft-by-role-meta-transactions/src/index.js:
--------------------------------------------------------------------------------
1 | require("dotenv").config();
2 |
3 | const express = require("express");
4 | const asyncHandler = require("express-async-handler");
5 |
6 | /**
7 | * 1) Import required libraries:
8 | *
9 | * - "ethers" helps us create a Wallet object based on a private key, which helps us sign transactions.
10 | * - "flair-sdk" provides a contract object with ability to submit meta transactions.
11 | */
12 | const { Wallet } = require("ethers");
13 | const { createFlairContractWithMetaTransactions } = require("@0xflair/meta-transactions");
14 |
15 | /**
16 | * 2) Load configurations from environment variables (or any config management you use):
17 | *
18 | * - "chainId" is the numeric ID of the chain where your NFT contract is deployed (1 for Ethereum, 4 for Rinkeby Testnet, 137 for Polygon).
19 | * - "flairClientId" unique client ID of your Flair account, used for billing purposes.
20 | * - "signer" is created based on private key of the minter wallet, used to sign NFT minting meta transactions.
21 | * - "nftCollectionAddress" contract address for your deployed NFT collection on the blockchain.
22 | */
23 | const chainId = Number(process.env.CONTRACT_CHAIN_ID);
24 | const flairClientId = process.env.FLAIR_CLIENT_ID;
25 | const signer = new Wallet(process.env.MINTER_PRIVATE_KEY);
26 | const nftCollectionAddress = process.env.NFT_COLLECTION_ADDRESS;
27 |
28 | /**
29 | * 3) Create client instance for the ethers.js-compatible contract augmented with meta transactions.
30 | *
31 | * In this example we use one of ready-made presets (ERC721SimpleSalesCollection).
32 | * To use a custom built contract you can manually create the meta transactions client instance (new ).
33 | */
34 | const nftContract = createFlairContractWithMetaTransactions({
35 | chainId: chainId,
36 | flairClientId: flairClientId,
37 | contractFqn: "collections/ERC721/extensions/ERC721RoleBasedMintExtension",
38 | addressOrName: nftCollectionAddress,
39 | signer: signer,
40 | });
41 |
42 | /**
43 | * 4) Example endpoints:
44 | *
45 | * - "GET /mint" endpoint simply uploads a new metadata to IPFS and mints a new 1-of-1 NFT based on that metadata.
46 | */
47 | const app = express();
48 |
49 | app.get(
50 | "/mint",
51 | asyncHandler(async (req, res) => {
52 | //
53 | // A) "to" is the wallet address that receives the new NFT
54 | //
55 | const to = "0x8016f96b5cCC4663324E8D117c337BB7aA68d909";
56 |
57 | //
58 | // B) "count" is the number of NFTs to send to this wallet
59 | //
60 | const count = 1;
61 |
62 | console.log(``);
63 | console.log(`Minting ${count} NFTs to ${to}:`);
64 |
65 | //
66 | // C) Sign a meta transaction and submit it to the Flair backend relayer for processing
67 | //
68 | const data = await nftContract.metaTransaction.mintByRole(
69 | to,
70 | count
71 | );
72 |
73 | console.log(` - Signature: ${data.signature}`);
74 | console.log(` - Transaction is being processed and mined check your contract on EtherScan to see the status...`);
75 | console.log(``);
76 |
77 | // The response is a successfully submitted (but not yet mined) meta transaction.
78 | // Note that depending on traffic on the blockchain it might take a few minutes to be mined and processed.
79 | res.send({
80 | response: data
81 | });
82 | })
83 | );
84 |
85 | const port = 8080;
86 |
87 | app.listen(port, () => {
88 | console.log(`Flair SDK Example - Mint NFTs by role via Meta Transactions!`);
89 | console.log(`- Listening on port ${port}`);
90 | console.log(``);
91 | console.log(`Now you can mint NFTs by opening: http://localhost:${port}/mint`);
92 | });
93 |
--------------------------------------------------------------------------------
/nodejs/express/mint-one-of-one-nfts-meta-transactions/src/index.js:
--------------------------------------------------------------------------------
1 | require("dotenv").config();
2 |
3 | const express = require("express");
4 | const asyncHandler = require("express-async-handler");
5 |
6 | /**
7 | * 1) Import required libraries:
8 | *
9 | * - "ethers" helps us create a Wallet object based on a private key, which helps us sign transactions.
10 | * - "flair-sdk" provides a contract object with ability to submit meta transactions.
11 | */
12 | const { Wallet } = require("ethers");
13 | const { IpfsClient } = require("@0xflair/ipfs");
14 | const { createFlairContractWithMetaTransactions } = require("@0xflair/meta-transactions");
15 |
16 | /**
17 | * 2) Load configurations from environment variables (or any config management you use):
18 | *
19 | * - "chainId" is the numeric ID of the chain where your NFT contract is deployed (1 for Ethereum, 4 for Rinkeby Testnet, 137 for Polygon).
20 | * - "flairClientId" unique client ID of your Flair account, used for billing purposes.
21 | * - "signer" is created based on private key of the minter wallet, used to sign NFT minting meta transactions.
22 | * - "nftCollectionAddress" contract address for your deployed NFT collection on the blockchain.
23 | */
24 | const chainId = Number(process.env.CONTRACT_CHAIN_ID);
25 | const flairClientId = process.env.FLAIR_CLIENT_ID;
26 | const signer = new Wallet(process.env.MINTER_PRIVATE_KEY);
27 | const nftCollectionAddress = process.env.NFT_COLLECTION_ADDRESS;
28 |
29 | /**
30 | * 3) Create client instance for the ethers.js-compatible contract augmented with meta transactions.
31 | *
32 | * In this example we use one of ready-made presets (ERC721OneOfOneCollection).
33 | * To use a custom built contract you can manually create the meta transactions client instance (new ).
34 | */
35 | const nftContract = createFlairContractWithMetaTransactions({
36 | chainId: chainId,
37 | flairClientId: flairClientId,
38 | contractFqn: "collections/ERC721/extensions/ERC721OneOfOneMintExtension",
39 | addressOrName: nftCollectionAddress,
40 | signer: signer,
41 | forwarder: "0xb1780c61a8b0714bF08E8c403f6cd5c1374F6AA9",
42 | });
43 |
44 | const ipfsClient = new IpfsClient({
45 | flairClientId: flairClientId,
46 | });
47 |
48 | /**
49 | * 4) Example endpoints:
50 | *
51 | * - "GET /mint" endpoint simply uploads a new metadata to IPFS and mints a new 1-of-1 NFT based on that metadata.
52 | */
53 | const app = express();
54 |
55 | app.get(
56 | "/mint",
57 | asyncHandler(async (req, res) => {
58 | //
59 | // A) "to" is the wallet address that receives the new NFT
60 | //
61 | const to = "0x8016f96b5cCC4663324E8D117c337BB7aA68d909";
62 |
63 | //
64 | // B) "count" is the number of NFTs to send to this wallet
65 | //
66 | const count = 1;
67 |
68 | //
69 | // C) Uploading a new metadata to IPFS
70 | //
71 | const someRandomId = Math.floor(Math.random() * 10000000000);
72 | /** @type {import("flair-sdk").NftCollectionMetadata} */
73 | const nftMetadata = {
74 | name: `Angel #${someRandomId}`,
75 | image: `https://my-awesome-site.com/nft/${someRandomId}.png`,
76 | description: "This is the first NFT in the collection",
77 | external_url: `https://my-awesome-site.com/nft/${someRandomId}`,
78 | };
79 | const tokenOneIpfsHash = await ipfsClient.uploadJson(nftMetadata);
80 |
81 | //
82 | // D) "tokenURIs" an array with exact size of "count" of metadata URLs for the newly minted NFTs
83 | //
84 | const tokenURIs = [`ipfs://${tokenOneIpfsHash}`];
85 |
86 | console.log(``);
87 | console.log(`Minting ${count} NFTs to ${to}:`);
88 | console.log(` - TokenURI: ${tokenURIs[0]}`);
89 |
90 | //
91 | // E) Sign a meta transaction and submit it to the Flair backend relayer for processing
92 | //
93 | const data = await nftContract.metaTransaction.mintWithTokenURIsByRole(
94 | to,
95 | count,
96 | tokenURIs
97 | );
98 |
99 | console.log(` - Signature: ${data.signature}`);
100 | console.log(` - Transaction is being processed and mined check your contract on EtherScan to see the status...`);
101 | console.log(``);
102 |
103 | // The response is a successfully submitted (but not yet mined) meta transaction.
104 | // Note that depending on traffic on the blockchain it might take a few minutes to be mined and processed.
105 | res.send({
106 | tokenURIs: tokenURIs,
107 | nftMetadata: nftMetadata,
108 | response: data
109 | });
110 | })
111 | );
112 |
113 | const port = 8080;
114 |
115 | app.listen(port, () => {
116 | console.log(`Flair SDK Example - Mint 1-of-1 NFTs via Meta Transactions!`);
117 | console.log(`- Listening on port ${port}`);
118 | console.log(``);
119 | console.log(`Now you can mint NFTs by opening: http://localhost:${port}/mint`);
120 | });
121 |
--------------------------------------------------------------------------------
/typescript/express/mint-one-of-one-nfts-meta-transactions/src/index.ts:
--------------------------------------------------------------------------------
1 | import dotenv from 'dotenv';
2 | import express, { Express, Request, Response } from 'express';
3 | import asyncHandler from 'express-async-handler';
4 |
5 | dotenv.config();
6 |
7 | /**
8 | * 1) Import required libraries:
9 | *
10 | * - "ethers" helps us create a Wallet object based on a private key, which helps us sign transactions.
11 | * - "flair-sdk" provides a contract object with ability to submit meta transactions.
12 | */
13 | import { Wallet } from "ethers";
14 | import { V1_22_ERC721OneOfOneCollection } from "@0xflair/contracts-registry";
15 | import { IpfsClient } from "@0xflair/ipfs";
16 | import { createFlairContractWithMetaTransactions } from "@0xflair/meta-transactions";
17 |
18 | /**
19 | * 2) Load configurations from environment variables (or any config management you use):
20 | *
21 | * - "chainId" is the numeric ID of the chain where your NFT contract is deployed (1 for Ethereum, 4 for Rinkeby Testnet, 137 for Polygon).
22 | * - "flairClientId" unique client ID of your Flair account, used for billing purposes.
23 | * - "signer" is created based on private key of the minter wallet, used to sign NFT minting meta transactions.
24 | * - "nftCollectionAddress" contract address for your deployed NFT collection on the blockchain.
25 | */
26 | const chainId = Number(process.env.CONTRACT_CHAIN_ID);
27 | const flairClientId = process.env.FLAIR_CLIENT_ID as string;
28 | const signer = new Wallet(process.env.MINTER_PRIVATE_KEY as string);
29 | const nftCollectionAddress = process.env.NFT_COLLECTION_ADDRESS;
30 |
31 | /**
32 | * 3) Create client instance for the ethers.js-compatible contract augmented with meta transactions.
33 | *
34 | * In this example we use one of ready-made presets (ERC721OneOfOneCollection).
35 | * To use a custom built contract you can manually create the meta transactions client instance (new ).
36 | */
37 | const nftContract = createFlairContractWithMetaTransactions({
38 | chainId: chainId,
39 | flairClientId: flairClientId,
40 | contractFqn: "collections/ERC721/extensions/ERC721OneOfOneMintExtension",
41 | addressOrName: nftCollectionAddress,
42 | signer: signer,
43 | });
44 |
45 | const ipfsClient = new IpfsClient({
46 | flairClientId: flairClientId,
47 | });
48 |
49 | /**
50 | * 4) Example endpoints:
51 | *
52 | * - "GET /mint" endpoint simply uploads a new metadata to IPFS and mints a new 1-of-1 NFT based on that metadata.
53 | */
54 | const app: Express = express();
55 |
56 | app.get(
57 | "/mint",
58 | asyncHandler(async (req: Request, res: Response) => {
59 | //
60 | // A) "to" is the wallet address that receives the new NFT
61 | //
62 | const to = "0x8016f96b5cCC4663324E8D117c337BB7aA68d909";
63 |
64 | //
65 | // B) "count" is the number of NFTs to send to this wallet
66 | //
67 | const count = 1;
68 |
69 | //
70 | // C) Uploading a new metadata to IPFS
71 | //
72 | const someRandomId = Math.floor(Math.random() * 10000000000);
73 | /** @type {import("flair-sdk").NftCollectionMetadata} */
74 | const nftMetadata = {
75 | name: `Angel #${someRandomId}`,
76 | image: `https://my-awesome-site.com/nft/${someRandomId}.png`,
77 | description: "This is the first NFT in the collection",
78 | external_link: `https://my-awesome-site.com/nft/${someRandomId}`,
79 | };
80 | const tokenOneIpfsHash = await ipfsClient.uploadJson(nftMetadata);
81 |
82 | //
83 | // D) "tokenURIs" an array with exact size of "count" of metadata URLs for the newly minted NFTs
84 | //
85 | const tokenURIs = [`ipfs://${tokenOneIpfsHash}`];
86 |
87 | console.log(``);
88 | console.log(`Minting ${count} NFTs to ${to}:`);
89 | console.log(` - TokenURI: ${tokenURIs[0]}`);
90 |
91 | //
92 | // E) Sign a meta transaction and submit it to the Flair backend relayer for processing
93 | //
94 | const data = await nftContract.metaTransaction.mintWithTokenURIsByRole(
95 | to,
96 | count,
97 | tokenURIs
98 | );
99 |
100 | console.log(` - Signature: ${data.signature}`);
101 | console.log(` - Transaction is being processed and mined check your contract on EtherScan to see the status...`);
102 | console.log(``);
103 |
104 | // The response is a successfully submitted (but not yet mined) meta transaction.
105 | // Note that depending on traffic on the blockchain it might take a few minutes to be mined and processed.
106 | res.send({
107 | tokenURIs: tokenURIs,
108 | nftMetadata: nftMetadata,
109 | response: data
110 | });
111 | })
112 | );
113 |
114 | const port = 8080;
115 |
116 | app.listen(port, () => {
117 | console.log(`Flair SDK Example - Mint 1-of-1 NFTs via Meta Transactions!`);
118 | console.log(`- Listening on port ${port}`);
119 | console.log(``);
120 | console.log(`Now you can mint NFTs by opening: http://localhost:${port}/mint`);
121 | });
122 |
--------------------------------------------------------------------------------
/react/community-airdrop-reward-stream/src/App.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ConnectButton,
3 | StreamClaimableAmount,
4 | StreamClaimButton,
5 | StreamClaimingProvider,
6 | StreamRateByTokens,
7 | StreamEmissionTimeUnit,
8 | StreamTotalClaimed,
9 | SwitchChainButton,
10 | WalletDropdown,
11 | StreamClaimingStatusBar,
12 | IfWalletConnected,
13 | StreamProvider,
14 | IfWalletNotConnected,
15 | } from "flair-sdk";
16 |
17 | const STREAM_CHAIN_ID = "137";
18 | const STREAM_CONTRACT_ADDRESS = "0xbb1cb56e057022fba8d55c8dde1d17adbd3be649";
19 |
20 | function App() {
21 | const chainId = Number(STREAM_CHAIN_ID);
22 | const contractAddress = STREAM_CONTRACT_ADDRESS;
23 |
24 | const buttonClass =
25 | "mt-4 w-full bg-indigo-600 border border-transparent rounded-md py-3 px-8 flex items-center justify-center text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed";
26 |
27 | return (
28 |
32 | {({ data: { stream } }) => (
33 | <>
34 |
35 |