How To Build an NFT Minting Dapp on the Flow Blockchain | by John Vester | Nov, 2022

Important things to note in the smart contract above:

• We are importing the NonFungibleToken and MetadataViews contracts to create our NFTs using Flow standards
• We define our NFT resource in the pub resource NFT function
• The mintNFT function mints an NFT into the account that calls the function

Now we need to go back into our flow.json file to add a few things:

• In the contracts section, add the contract and its path.
• In the deployments section add the network (testnet), the account that we will use to perform the deployment (testnet-account), and the contract name (FlowTutorialMint).

{
"emulators": {
"default": {
"port": 3569,
"serviceAccount": "emulator-account"
}
},
"contracts": {
"FlowTutorialMint": "./FlowTutorialMint.cdc"
},
"networks": {
"emulator": "127.0.0.1:3569",
"mainnet": "access.mainnet.nodes.onflow.org:9000",
"testnet": "access.devnet.nodes.onflow.org:9000"
},
"accounts": {
"emulator-account": {
"address": "f8d6e0586b0a20c7",
"key": "2becfbede2fb89796ab68df3ec2a23c3627235ec250a3e5da41df850a8dd4349"
},
"testnet-account": {
"address": "0x8e0dac5df6e8489e",
"key": "c91f4716a51a66683ccb090ca3eb3e213b90e9f9ae2b1edd12defffe06c57edc"
}
},
"deployments": {
"testnet": {
"testnet-account": [
"FlowTutorialMint"
]
}
}
}

The final step in setting up the smart contract is to deploy it to the testnet. To do that, type the following command in the project folder in your terminal:

flow project deploy -n=testnet

We should receive an output stating the contract was deployed successfully:

It’s important to note here that Cadence smart contracts exist in the storage of the account that deploys them, whereas, with Solidity, the smart contract exists at its own address on the blockchain.

Although there are limits to the account’s storage capacity, these are relative to the number of FLOW tokens reserved in the account. You can learn more about account storage in the Flow Developer Portal.

Awesome! Now let’s build a simple frontend to interact with our contract.

For the frontend of this project, we will be using React. First, navigate to a new folder and run the following command to create a React project:

npx create-react-app flow-tutorial

Next, navigate into the flow-tutorial folder and install the Flow Client Library (FCL):

npm i -S @onflow/fcl

The FCL will allow us to communicate with the Flow blockchain, call transactions, and integrate all other FCL-compatible wallets without needing to add custom integrations. Once that finishes, we will install a few additional dependencies:

npm i elliptic sha3 styled-components

After installing all our dependencies, we are ready to start working on the dapp frontend.

3.a. Configure the FCL

Before we begin structuring and styling things, let’s create an FCL configuration file where we’ll define important settings, such as whether we will interact with testnet or mainnet.

In the src directory, create a new folder named flow. Within this new folder, create a file called config.js.

In this config.js file, we will import the FCL, call the fcl.config function and create some settings for our dapp, such as:

• app.detail.title
• accessNode.api
• discovery.wallet

Open the config.js file and fill it with the following code:

const fcl = require("@onflow/fcl");
fcl.config({
"app.detail.title": "Flow Mint Page Tutorial", // this adds a custom name to our wallet
"accessNode.api": "https://rest-testnet.onflow.org", // this is for the local emulator
"discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn", // this is for the local dev wallet
})

There are additional settings we can configure for our dapp, but for now, this is all we will need.

With the configuration out of the way, let’s move on to building!

3.b. The initial structure

First, navigate to the App.js file in the src folder and replace the code with this:

import './App.css';
function App() {
return (
<div className="App">
<h1>Mint Your Dog!</h1>
</div>
);
}
export default App;

This will give us the initial structure of our dapp, from which we will expand upon.

Next, we’ll style this structure. Open the index.css file and replace the code with the following:

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:wght@200;300;600;700&display=swap');
body {
margin: 0;
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

If you run npm start, you will see a blank page with the title Mint Your Dog!

Next, let’s create some components!

3.c. The nav component

Inside the src directory, create a new folder called components, where we will build all of our custom React components.

The first component we will create is the Navbar, which will show the Login button if the user isn’t connected, or the Logout button next to the user’s address and the number of FLOW tokens the account has if they are connected.

Create a file called Navbar.jsx and fill it with the following code:

Let’s walk through the code to see what’s going on here.

• First, we are importing the Flow Client Library, which will provide us with functions to authenticate, unauthenticate, and determine the currentUser.
• Next, we import the other dependencies we need and then use styled-components to create the basic styling of our Navbar inside the Wrapper variable.
• Then, we define some React state variables (user and flow).
• Next is the functionality of the dapp, such as logOut, logIn, and getFlow (get the connected account’s FLOW balance).
• After that, we return the html for the Navbar wrapped in our styling.

With a complete Navbar component, we can now import it into the App.js file:

import './App.css';
import Navbar from './components/Navbar.jsx';
function App() {
return (
<div className="App">
<Navbar />
<h1>Mint your Dog!</h1>
</div>
);
}
export default App;

Now, if we run the project with npm start, we see our Navbar gives us the functionality we defined in our code. Awesome!

Next, let’s build our NFT minting component!

3.d. The NFT minting component

Inside the components folder, create a new file called MintComponent.jsx, then copy the following code:

Again, let’s walk through the code to ensure we understand what’s going on.

• We need to import the FCL in this component to gain access to the function that will let us mint our NFT.
• Again, we use styled-components to add some styling.

The mintNFT function uses the fcl.mutate function to perform the actual mint by:

• Validating whether the user has a Flow Tutorial Mint NFT collection in their account and creating one if not.
• Calling the existing mint function inside the FlowTutorialMint contract and passing the parameters.
• The function returns the resource (NFT), which we deposit into the user’s account.
• In the fcl.mutate function, we are importing the smart contract we deployed with the line: import FlowTutorialMint from 0x8e0dac5df6e8489e
• We also import the NonFngibleToken and MetadataViews standards.
• In the transaction, we specify the NFT type and url of the image.

Cadence transactions have two phases: prepare and execute

• prepare – we ask for the user’s signature to access their account and perform private functions. In this case, creating a new FlowTutorial Mint collection if they don’t already have one. We also initialize a public Capability restricted to NonFungibleToken.CollectionPublic. For more context on Capabilities, check out this link.
• execute – call the mintNFT function inside of our contract on the testnet.
• In the html portion of the code, we display three images from which the user can mint an NFT.

With our MintComponent complete, we can import it into the App.js file:

import './App.css';
import Navbar from './components/Navbar.jsx';
import MintComponent from './components/MintComponent.jsx';
function App() {
return (
<div className="App">
<Navbar />
<h1>Mint your Dog!</h1>
<MintComponent />
</div>
);
}
export default App;

Now the user can log into the dapp and mint an NFT to their account!

The final piece of the puzzle is to create a component that will fetch the user’s NFTs and display them.

3.e. Showing the user’s NFTs

In the components folder, create a new file called ShowNfts.jsx, and we will use the following code:

Essentially what we are doing in this code is querying the Flow Blockchain using the FCL, and gathering the NFTs in the connected account that are from our FlowTutorialMint collection.

We just need to add this component to our App.js, and we are good to go!

import './App.css';
import Navbar from './components/Navbar.jsx';
import MintComponent from './components/MintComponent.jsx';
import ShowNfts from './components/ShowNfts';
function App() {
return (
<div className="App">
<Navbar />
<h1>Mint your Dog!</h1>
<MintComponent />
<ShowNfts />
</div>
);
}
export default App;

That’s everything! Now let’s test our dapp and make sure we can mint some NFTs.

4. Let’s mint some NFTs!

So first, let’s start the app with npm start and then open our browser to http://localhost:3000/.

If everything goes well, your screen should look like this:

The beautiful thing about using the FCL in our Login sequence is that it gives our users easy access to making an account right on the spot using just an email address. Let’s walk through the process to make sure it works properly. By clicking the Login button, a dialogue will pop up, giving us two options to log in with. We will choose Blocto.

Blocto will prompt us to enter an email address and, upon doing so, gives us the ability to Register a new account. Then, once we input the code emailed to our address, Blocto sets us up with a shiny, new Flow address!

From here, we can choose which dog image we want to mint as an NFT. I chose the Swag Dog because it reminds me a bit of myself!

Pressing the Mint button will pop up another dialogue telling us about the transaction we are about to perform. We can see that Blocto is graciously covering the minting fees, and if we want to look at the script we are calling, we can do so.

Several seconds after hitting Approve, we should receive a message that our mint was successful, and our newly minted Swag Dog will display under the My NFTs section of our dapp.

Here’s a link to our dapp in action:

https://s1.gifyu.com/images/flow_tutorial-min.gif

The entire source code for this project can be found in this repository.

As you can see, building an NFT minting dapp on the Flow Blockchain is straightforward once you understand how it all works together. Additionally, the Flow Client Library is a powerful tool at our disposal that gives us access to extensive built-in functionality and helps give our dapp a better user experience.

In contrast to Ethereum, Flow handles NFT creation and management much more efficiently and securely. This is achieved by deploying smart contracts and minting the NFTs directly into the user’s account, rather than creating a reference to addresses or mappings stored on the digital ledger.

For more information about building on Flow, check out the Flow Developer Portal.

Have a really great day!