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

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 <[e-mail]>"]
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:

1. storage_minumum_balance: gets the minimum required storage value needed for a sale item.
2. storage_deposit: allows users to deposit storage. This is to cover the cost of storing sale objects on the contract.
3. 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

Comments

[myhope]

Hi @kels_orien , great tutorial. It seems like we encountered a problem. When listing an NFT for sale we always encounter this error. Please help. Thanks

{"index":0,"kind":{"ExecutionError":"Smart contract panicked: panicked at 'Insufficient storage paid: 0, for 1 sales at 10000000000000000000000 rate of per sale', src\nft_callbacks.rs:68:9"}}

[Kohwo Orien]

Compare your code with the github repo, your storage paid should not be zero (0). There are two functions getMinumumStorage and sendStorageDeposit that handle this. Regards.

[myhope]

Thanks @kels_orien , it's working now. Amazing tutorial :D

[LoboVH]

Hi @kels_orien @myhope I am also encountering the same error you mentioned above... I am unable to solve it... I think in my case 'minimum' is not set in 'setMinimum' and hence the attachedDeposit is not updated...
Pls help me here..

[Kohwo Orien]

Are you the one that sent the email? If so compare your code with the github repo, your storage paid should not be zero (0). There are two functions getMinumumStorage and sendStorageDeposit that handle this. it should work but you can check your 'minimum' value in the sendStorageDeposit function after getMinimum storage is executed using console.log("minimum", minimum). I think your sale value is too high "100000000000000000000000000", use single digit.Cheers.