Build a Flow Collectibles Portal Using Cadence (Part 2)

With a Collectibles portal on the Flow blockchain and deployed to the testnet we can now focus on creating the frontend using React in the conclusion of this series.

John Vester

CORE ·

Feb. 26, 24 · Tutorial

Like (1)

Save

18.6K Views

Welcome to the final step in creating your Collectibles portal! (for part 1, see here).

In this part, we'll focus on building the front end — the last piece of the puzzle. Here's what we'll achieve:

Connect the Flow Wallet.
Initialize your account and mint your NFT.
Check the NFT ID in your Collection.
View the NFT with the NFT ID you have in your Collection.

We will be using Next.js to build the front end.

Let's get started!

1. Installation

Setting Up

Open your project flow-collectible-portal directory. Then, run
npx create-next-app@latest frontend in the terminal and press enter .

This will provide you with several options. In this tutorial, we will not use Typescript, ESLint, or TailwindCSS, and we will use the src directory and the App router at the time of this article.

Now you have a fresh web app ready. This is how your frontend folder looks:

2. Configuration

To interact with the Flow blockchain, we will use the Flow Client Library (FCL) to manage wallet connections, run scripts, and send transactions in our application. It will allow us to write complete Cadence functions and run them as Javascript functions.

To get started, let's install FCL for our app by running the following command:

    Shell
   
   npm install @onflow/fcl --save

After installing FCL, we need to configure it. Here's what you need to do:

Inside the app folder create a new folder named flow and add a file named config.js.
In this file, set up the configuration for the FCL, such as specifying the Access Node and wallet discovery endpoint. This helps you to choose between using a testnet or a local emulator.
You will also want to specify the Collectibles contract address we deployed in Part 1.

Add the following code to the config.js file:

    JavaScript
   
 

   import { config } from "@onflow/fcl";

config({
 "app.detail.title": "Flow Name Service",
 "app.detail.icon": "https://placekitten.com/g/200/200",
 "accessNode.api": "https://rest-testnet.onflow.org",
 "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn",
 "0xCollectibles": "ADD YOUR CONTRACT ACCOUNT ADDRESS",
 "0xNonFungibleToken": "0x631e88ae7f1d7c20",
});
  

Now, you're all set up to use the FCL in your app.

3. Authentication

To verify a user's identity in an app, you can use several functions:

For logging in, call fcl.logIn().
For signing up, call fcl.signUp().
For logging out, call fcl.unauthenticate().

Let’s learn how we can implement these fcl functions in your front end.

First, we will add the following code to our page.js file inside the app directory. This will import some dependencies, set up some initial useState for parts of our app, and build a basic UI.

To make sure it looks nice, delete the page.module.css file inside the app directory and instead make a file called page.css. Then, paste the contents of this file inside of it. Now, we can write out our initial page.

JavaScript

) : (

Connect Wallet to mint NFT!!

)}

); }" data-lang="text/javascript">

"use client";
import React, { useState, useEffect, useRef } from "react";
import * as fcl from "@onflow/fcl";
import "./page.css";
import "./flow/config";

export default function Page() {
  const [currentUser, setCurrentUser] = useState({
    loggedIn: false,
    addr: undefined,
  });

  const urlInputRef = useRef();
  const nameInputRef = useRef();
  const idInputRef = useRef();
  const [isInitialized, setIsInitialized] = useState();
  const [collectiblesList, setCollectiblesList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [ids, setIds] = useState([]);
  const [nft, setNFT] = useState({});

  useEffect(() => fcl.currentUser.subscribe(setCurrentUser), []);

  function handleInputChange(event) {
    const inputValue = event.target.value;

    if (/^\d+$/.test(inputValue)) {
      idInputRef.current = +inputValue;
    } else {
      console.error("Invalid input. Please enter a valid integer.");
    }
  }

  return (
    <div>
      <div className="navbar">
        <h1>Flow Collectibles Portal</h1>
        <span>Address: {currentUser?.addr ?? "NO Address"}</span>
        <button onClick={currentUser.addr ? fcl.unauthenticate : fcl.logIn}>
          {currentUser.addr ? "Log Out" : "Connect Wallet"}
        </button>
      </div>

      {currentUser.loggedIn ? (
        <div className="main">
          <div className="mutate">
            <h1>Mutate Flow Blockchain</h1>
            <form
              onSubmit={(event) => {
                event.preventDefault();
              }}
            >
              <input
                type="text"
                placeholder="enter name of the NFT"
                ref={nameInputRef}
              />
              <input type="text" placeholder="enter a url" ref={urlInputRef} />
              <button type="submit">Mint</button>
            </form>
            <mark>Your Collection will be initialized while minting NFT.</mark>
          </div>
          <div className="query">
            <h1>Query Flow Blockchain</h1>
            <mark>Click below button to check</mark>
            <button>Check Collection</button>
            <p>
              Is your collection initialized: {isInitialized ? "Yes" : "No"}
            </p>
            <button onClick={viewIds}>
              View NFT IDs you hold in your collection
            </button>
            <p>NFT Id: </p>
          </div>
          <div className="view">
            <h1>View Your NFT</h1>
            <input
              type="text"
              placeholder="enter your NFT ID"
              onChange={handleInputChange}
            />
            <button>View NFT</button>
            <div className="nft-card">
              <p>NFT id: </p>
              <p>NFT name: </p>
              <img src="" alt="" />
            </div>
          </div>
        </div>
      ) : (
        <div className="main-2">
          <h1>Connect Wallet to mint NFT!!</h1>
        </div>
      )}
    </div>
  );
}

Related

Trending

Build a Flow Collectibles Portal Using Cadence (Part 2)

With a Collectibles portal on the Flow blockchain and deployed to the testnet we can now focus on creating the frontend using React in the conclusion of this series.

1. Installation

Setting Up

2. Configuration

3. Authentication

Connect Wallet to mint NFT!!

4. Querying the Flow Blockchain

5. Mutating the Flow Blockchain

6. Final Code

Conclusion

Related

Partner Resources