Learn to Deploy an NFT smart contract, Generate NFT with AI and Build a full front End App
Below is code for our smart contract. You can get it from here NFT.sol
Now as per the âsetâ practices, you would be expected to deploy the above contract on either a local blockchain node (eg: Hardhat or Truffle) or a public testnet like Goreli Testnet. While that is okay, except the following pain points:
In relation to the local node:
localhost
for a reason! So forget about it. đ2.1. That is where BuildBear comes in. It kind-a marries the benefits of both the world for you:
Have a look over here: **Where Localhost Fails and *Win Web3 Hackathons, using BuildBear Testnetâs analytics
2.2. Visit the BuildBear App. Once you login with your Github or Google Account, you will see a page similar to the image added below:
2.3. Create your private node forking from the Ethereum Mainnet:
2.4. Add your private testnet to your MetaMask wallet by using the âAdd to Metamaskâ button:
2.5. Mint your Eth tokens from the Faucet (using the Faucet URL):
2.5.1. Minting the Tokens
3.1. Navigate to the Remix Online IDE website and accept the terms and conditions.
3.2. Create a new contract and paste the Smart Contract Code, available over here đ GitHub Link
3.3. Compile the Smart Contract, with Solidity Version 0.8.1, by using the following icon and details:
Please note that the ABI of the Contract is available only once the Contract is compiled. You can see in the above image the ABI which can be copied. Please keep this handy. We will need it momentarily.
3.4. Select the âDeploy and Run Transactionsâ tab: and deploy the contract as follows:
3.5. Click on the âtransactâ button to deploy the contract to your private node network; once done, you will see something similar to the following:
3.6. Copy the address of the Contract and visit the Blockchain Explorer for your personal forked testnet (link available on the dashboard page at home.buildbear.io) and locate your contract.
3.6.1. Submitting the ABI of the contract for ease of interaction
You can visit your contract page on BuildBearâs Blockchain Explorer and then visit the Contract tab. You should see something similar to the following:
Submit the ABI that we copied from Step 3.3; once done, you should see the Read and Write Contract buttons made available to you on the Contract Page:
WOOT WOOT đ đ
The easiest way to create a new Next.js application is by using the create-next-app
CLI tool. You can install it via npm
:
$ npm install create-next-app
Once installed, you can initialize a new Next.js application by calling the tool and supplying a name for your project:
$ npx create-next-app nft-app
Note: If you donât already have create-next-app
installed - npx
will prompt you to install it automatically.
Once the tool finished initializing a skeleton project, letâs move to the directory and take a peek inside:
The standard package.json
, package-lock.json
and node_modules
are there, however, we've also got the /pages
, /public
and /styles
directories, as well as a next.config.js
file!
Letâs take a look at what these are.
Next.js is ultimately an extension for React, and it does introduce a couple of new things that make React application development simpler and faster â starting with Next.js pages.
Next.js makes creating multi-page applications with React ridiculously easy with its default file-system-based router. You donât need to install any additional packages, such as react-router-dom
, or configure a router at all.
All Next.js projects include a default /pages
directory, which is the home of all of the React components you'll be using. For each component - a router will serve a page based on that component.
Next.js project setup is done
Since storing data on Blockchain is expensive we will be using IPFS to upload the NFT Data, for this we are going to use NFT.storage service
NFT.Storage is a storage service that lets you upload off-chain NFT data(like metadata, images, and other assets) for free, with the goal to store all NFT data as a public good.
The data is stored perpetually in the Filecoin decentralized storage network and made available over IPFS via its unique content ID.
npm install nft.storage
StoreMetadata.jsx
and add this code to the fileThis is the main component that prepares the metadata from the inputs we give and then uploads it to IPFS via the JS client created.
You can customize the metadata according to the standards for the Token type For Example Metadata file you can edit which data you want to add or select.
index.js
file Set states for the inputs(in our case name, description, and Image file)Home.module.css
Letâs see how we can integrate the DALL-E 2 API into our application.
First of all, we need to go to the OpenAI website. You need to sign up to generate an API key. You will also get $18 in your account that you can use.
Choose that you are creating an application while you are signing up.
So after you have created your account, go to the View API Keys section, where you can create your unique API key. Check the below image for reference.
Now in your next App, create a .env file. This is to store the API key.
Add your API key there.
NEXT_PUBLIC_AI_API_KEY= Your Api key here
Now that the API key is added, we need to import a few things in our App.js or App.jsx file. These include the Configuration and OpenAIApi from openai SDK. But first, we need to install the openai SDK into the React App.
To install it, just type the command below:
npm install openai
It may take some time to install. Then, import both things that we mentioned earlier like this:
import { Configuration, OpenAIApi } from "openai";
We need to create a configuration variable, which will take the API key from the .env file.
const configuration = new Configuration({ apiKey: import.meta.env.VITE_Open_AI_Key, });
const openai = new OpenAIApi(configuration);
we need something that connects our client to one of these nodes of blockchain so they can start using the full power of the blockchain, thatâs exactly what ether.js is itâs a library written in javascript that lets as create any javascript application that talks to the blockchain so we can use and create many applications which are going to be based on decentralized application (daps). Itâs the bridge that essentially that takes your client and it allows it to connect to the blockchain.
Ether.js Modules
npm install --save ethers
Letâs test the app
Connect the wallet. enter name, description, Generate the image, and press the mint button and sign the transaction. oneâs it is successful you received an alert.
Go to the block explorer and look at the Transaction details
We have successfully built the NFT Mint!!! đđđ
Share your project on Twitter and LinkedIn as tag BuildBear
If you appreciate what we are doing, please follow us on Twitter, and LinkedIn and Join the Telegram group if you havenât done yet.
And please give us a clap đ if you like our work.
Authors: Chandan,
Code Repo : https://github.com/BuildBearLabs/Tutorials/tree/main/Ai-mint