DEV Community: Kohwo Orien

Building a Full Stack NFT Market Place with Near Protocol and React.js Part 2

Kohwo Orien — Thu, 19 May 2022 14:48:47 +0000

For the Part 2 of this guide, we will concentrate on developing the market contract and updating the frontend. The repository for part two of this project is located here.

Here is the link for Part 1.

Getting started

The first contract nft-contract enabled us to mint our NFT and transfer to wallet.

The market contract we are about to create will provide a means of buying and selling NFTs in the market place.

From your downloaded nft-tutorial, copy the market-contract folder into your project root directory.

Rename market-contract to market_contract

Your market_contract folder/directory should look like this:

market_contract

     |___ build.sh
     |____build.bat
     |___ Cargo.lock
     |___ Cargo.toml
     |___ README.md
     |___ test.sh
     |____src
           |____ external.rs
           |____ internals.rs
           |____ lib.rs
           |____ nft_callbacks.rs
           |____ sale_views.rs
           |____ sales.rs

external.rs: used for external contract calls. This will initiate a cross contract call to the nft contract.

internals.rs: used to generate a unique prefix for our storage collections to avoid data collisions.

lib.rs: holds the smart contract initialization functions.

nft_callbacks.rs: approval callbacks from the NFT contracts.

sale_views.rs: returns data on market place sales.

sale.rs: struct that holds important information about each sale on the market.

update your Cargo.toml file

[package]
name = "market_contract"
version = "0.1.0"
authors = ["Your name <Youraddress@mail.com>"]
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
near-sdk = "=4.0.0-pre.4"

[profile.release]
codegen-units=1
opt-level = "z"
lto = true
debug = false
panic = "abort"
overflow-checks = true

Before the market-contract subaccount can be created, your near testnet wallet account wallet must contain at least a 100 near tokens. To increase your near tokens. create a new testnet wallet account and transfer required tokens to your current wallet account.

Build the contract

From market_contract directory via CLI

For Windows users, type :

./build.bat

For Mac and Linux users:

./build.sh

Create market subaccount

From your market_contract directory via CLI, input command:

near create-account  market_contract.youraccountname.testnet --masterAccount youraccountname.testnet

Deploy contract

near deploy market_contract.youraccountname.testnet --wasmFile res/market_contract.wasm

Initialize Your contract

To initialize our market contract from CLI:

near call market_contract.youraccountname.testnet new '{"owner_id": "nft-contract.youraccountname.testnet"}' --accountId youraccountname.testnet

Windows users should remember to use backward slash("\").

Updating the Frontend

Changes were made to App.js config.js useModal.js and Modal.js. Let's discuss the changes.

Let's start be updating config.js

We are including the MARKET_CONTRACT_NAME since we create a contract for the market contract.

useModal.js

useModal.js updated to include toggle functions that can change the states for modal sale and price.

Modal.js

Modal.js updated to include states for sale and bid

We are going to add the following market contract methods to the frontend's app component:

storage_minumum_balance: gets the minimum required storage value needed for a sale item.
storage_deposit: allows users to deposit storage. This is to cover the cost of storing sale objects on the contract.
nft_approve: approve an account ID to transfer a token on user behalf.

App Component

The code is rather long, use the link to update it while we discus the main changes.

Let's discuss the new functions added to the app component:

loadSaleItems: gets and displays all sale items in the market contract. The get_sales_by_nft_contract_id gets the all items for sale by NFT contract id. The get_sales_by_nft_contract_id does not provide complete data for each sale item, comparing the results of the nft-contract method nft-token and market_contract method get_sales_by_nft_contract_id enables us to get the complete record of the sale items.

getMinimumStorage: gets the storage amount needed to store a sale item using the storage_minimum_balance method.

sendStorageDeposit: sends storage deposit needed to store a sale item using storage_deposit method.

approveNFTForSale: approves the market contract to transfer an NFT token on owner behalf.

offerPrice: places an offer on a specific sale. The sale will go through as long as the deposit is greater than or equal to the list price using the offer method.

Testing it out

Change into the root directory and run the start command:

npm start

Building a Full Stack NFT Market Place with Near Protocol and React.js Part 1

Kohwo Orien — Thu, 07 Apr 2022 18:12:43 +0000

For this guide, I decided to build an NFT Market Place using Near Protocol, although there is a much faster ways of setting up a near project using create-near-app, I wanted to put the pieces together to make it easier to understand.

Near Protocol Overview

Near Protocol is a Layer one(L1), developer friendly proof of stake public blockchain. Near Protocol compared to Ethereum has significantly lower Gas fees thanks to a more efficient contract execution model. It also uses Nightshade, a dynamic approach to Sharding.

Benefits of Near Protocol:

NEAR allows transactions to be processed for an extremely low fee.
Near Protocol is significantly faster than Ethereum Layer One
Near features human readable addresses for contracts and accounts
The use of Rust or AssemblyScript for smart contracts on the Near platform made it easy for developers to write code.
Developers and users can move assets quickly thanks to the ETH-Near Rainbow Bridge.

Project Overview

This tutorial comprises of three sections, as follows:

Part 1: Setting up the NFT Contract(Backend and Frontend)
Part 2: Setting up the Market Place(Backend and Frontend)

We are going to build a Market place for both frontend and backend.

Part 1

The repository for part one of this project is located here.

Prerequisites

Nodejs: is a JavaScript runtime environment built on Chrome V8 engine.
NEAR Wallet Account:NEAR Wallet is a secure wallet and account manager for your accounts on the NEAR blockchain. A Near wallet allows you to interact with applications on Near and securely store tokens and NFTs. For this tutorial we are using a testnet wallet.

Rust Toolchain: Rust Toolchain is a particular version of a collection of programs needed to compile a Rust application it includes, but is not limited to, the compiler rustc, the dependency manager and build tool, cargo, the documentation generator, rustdoc and the static and/ or dynamic libraries.
NEAR-CLI: is a NodeJS command line interface that utilizes near-api-js to connect to and interact with the NEAR blockchain.

Getting Started

Near Protocol uses rust programming language for it's smart contracts. We are going to start with a rust contract template.

From your CLI create a folder/directory named nft-marketplace-part-1

Enter your project root directory:

cd nft-marketplace-part-1

Clone the following rust template into your nft-market-place-part-1 root folder/directory:

git clone https://github.com/near-examples/rust-template.git

Rename the file rust-template to nft-contract

update your Cargo.toml file:

[package]
- name = " rust-template"
+ name = "nft-contract"
version = "0.1.0"
- authors = ["Near Inc <hello@near.org>"]
+ authors = ["Your name<youraddress@mail.com>"]
edition = "2021"

[lib]   
- crate-type = ["cdylib"]
+ crate-type = ["cdylib", "rlib"]

[dependencies]
near-sdk = "4.0.0-pre.4"
+ serde_json = "1.0"

[profile.release]
codegen-units = 1
# Tell `rustc` to optimize for small code size.
opt-level = "z"
lto = true
debug = false
panic = "abort"
overflow-checks = true

By changing name, we'll be changing the compiled wasm file's name after running the build script. For Windows it's the build.bat for OS X and linux build.sh

Download this near protocol nft-tutorial from github. Copy the src directory of nft-contract folder and copy it into your new own nft-contract folder .

Your nft-contract folder/directory should look like this:

nft-contract

     |___ build.sh
     |____build.bat
     |___ Cargo.lock
     |___ Cargo.toml
     |___ README.md
     |___ test.sh
     |____src
           |____ approval.rs
           |____ enumeration.rs
           |____ events.rs
           |____ internals.rs
           |____ lib.rs
           |____ metadata.rs
           |____ mint.rs
           |____ nft_core.rs
           |____ royalty.rs

approval.rs: contains functions that controls the access and transfers of non-fungible tokens.

enumeration.rs: contains the methods to list NFTs tokens and their owners.

lib.rs: Holds the smart contract initialization functions.

metadata.rs: Defines the token and metadata structure.

mint.rs: Contains token minting logic

nft_core.rs: Core logic that allows you to transfer NFTs between users

royalty.rs: Contains payout related functions

Logging into near account

We are going to login into near account from CLI.

near login

This is take you to the Near Wallet again where you can confirm the creation of a full-access key. Follow the instructions from the login command to create a key on your hard drive. The key will be located in your operating system's home directory in a folder called near-credentials.

Build the contract

From nft-contract directory via CLI

For Windows users, type :

./build.bat

For Mac and Linux users:

./build.sh

Creating a subaccount

if you have followed the prerequisites recommended, you already have a near wallet account created and NEAR CLI installed with full-access key on your machine. The next step is to create a subaccount and deploy the contract to it.

To create subacccount from nft-contract directory via CLI run:

near create-account nft-contract.youraccountname.testnet --masterAccount youraccountname.testnet

youraccountname is the name of the testnet wallet that should have been created by you earlier.

After creating the account, you can view the state with the following command:

near state nft-contract.youraccountname.testnet

Your account state should look like this:

Note your codehash, the numbers are all ones(1s), this means that no contract has been deployed to this account, this will change when the contract is deployed.

Deploy the contract

near deploy --accountId nft-contract.youraccountname.testnet --wasmFile res/nft_contract.wasm

Check your account state again:

you can see that your hash changed from only ones, this is a code hash of a deployed smart contract.

Initialize Your contract

To initialize our contract from CLI:

For Mac and Linux Users:

near call nft-contract.youraccountname.testnet new_default_meta '{"owner_id": "nft-contract.youraccountname.testnet"}' --accountId nft-contract.youraccountname.testnet

For Windows Users:
Windows command prompt doesn't accept single quotes so we have to escape them with the backward slash("\"). See below:

near call nft-contract.youraccountname.testnet new_default_meta '{\"owner_id\": \"nft-contract.youraccountname.testnet\"}' --accountId nft-contract.youraccountname.testnet

After initializing, to view metadata via CLI, use command

near view nft-contract.youraccountname.testnet nft_metadata

Minting Token

For Mac and Linux users:

near call nft-contract.youraccountname.testnet nft_mint '{"token_id": "token-1", "metadata": {"title": "My Non Fungible Team Token", "description": "The Team Most Certainly Goes :)", "media": "https://bafybeiftczwrtyr3k7a2k4vutd3amkwsmaqyhrdzlhvpt33dyjivufqusq.ipfs.dweb.link/goteam-gif.gif"}, "receiver_id": "youraccountname.testnet"}' --accountId youraccountname.testnet --amount 0.1

For Windows users:

near call nft-contract.youraccountname.testnet nft_mint '{\"token_id": "token-1\", "metadata": {\"title": \"My Cat Fungible Meme Token\", \"description\": \" Grumpy Cat:(\", \"media\": \"https://res.cloudinary.com/dofiasjpi/image/upload/v1649353927/near-tutorial-nfts/OIP.jpg\"}, \"receiver_id\": \"youraccountname.testnet\"}' --accountId youraccountname.testnet --amount 0.1

You can check the collectibles section of your testnet wallet for your freshly minted NFT.

View NFT Information via CLI:

For Mac and Linux users:

near view nft-contract.youraccountname.testnet nft_token '{"token_id": "token-1"}'

For Windows users:

near view nft-contract.youraccountname.testnet nft_token '{\"token_id\": \"token-1\"}'

Transferring NFTs

To transfer an NFT create another testnet wallet account

To transfer run command via CLI:

near call nft-contract.youraccountname.testnet nft_transfer '{"receiver_id": "yoursecondaccountname.testnet, "token_id": "token-1", "memo": "Go Team :)"}' --accountId youraccountname.testnet --depositYocto 1

In this call 1 yoctoNEAR is deposited for security so that the user will be redirected to the NEAR wallet.

Windows users should remember to add backslash before every quote mark like we did previously.

Creating the Frontend

You can follow this nice tutorial to add react with parcel bundler on your nft-marketplace-part-1/src directory. Create a src folder/directory inside the nft-marketplace-part-1 and move your index.html and index.js inside it.

From the nft-marketplace-part-1 directory via CLI install:

npm install near-api-js regenerator-runtime react-scripts

update your the scripts sections of your package.json

"scripts": {
    "start": "parcel src/index.html",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Entry point

Update our src/index.js file with the following code

We are starting with an asynchronous JavaScript function that sets up the required parameters that are passed to the React app.

Let's breakdown the code above, starting with the imports.

We imported from:

config.js This file contains details of the different networks.

near-api-js We import all the functions of this dependency to nearAPI

const keyStore = new nearAPI.keyStores.BrowserLocalStorageKeyStore()

Creates a keystore for signing transactions using the user's key which is located in the browser's local storage after the user logs in.

const near = await nearAPI.connect({ keyStore, ...nearConfig });

initializing the connection to the NEAR testnet.

const walletConnection = new nearAPI.WalletConnection(near)

Initializes wallet connection


initContract().then(({ currentUser, nearConfig, walletConnection, near})=> {

  ReactDOM.render(<App currentUser={currentUser} nearConfig={nearConfig} walletConnection={walletConnection} near={near}/>,
       document.getElementById('root'));
})

The initContract method is called and data is passed to the App.js Component

App Component

Let's start be discussing the imports:

Modal: is a component overlay that will enable us to add a form inside it.
useModal: uses useState to open and close modal.

Now let's discuss the functions:

signIn: Remember we passed a walletConnection object to App.js Component, once logged in, the object will be tied to the logged-in user and they'll use that key to sign in transactions and interact with the contract.

signOut: allows user to sign out of wallet account.

sendMeta: is a function call to the contract method new_default_meta to set metadata, remember we used this method to set metadata when we used CLI.

displayAllNFT: is a function call to nft_tokens_for_owner method in the contract account which retrieves all nfts from the collectibles section of the wallet account.

mintAssetToNFT: is a function call to mint an assets(picture, video) using the nft_mint method from the contract.

Create file names config.js, Modal.js, useModal.js Close.js and App.css in your nft-marketplace-part-1/src directory with the following code:

config.js

useModal.js

Modal.js

Close.js

App.css

For this file you can find the CSS code here

To run React app from CLI:
From nft-marketplace-part-1 directory, use command:

npm start