Building a Full Stack NFT Market Place with Near Protocol and React.js Part 2
Tags: web3, rust, react
Published: 2022-05-19 14:48:47

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](https://github.com/kels-orien/nft-marketplace-part-2).

 Here is the link for [Part 1](https://dev.to/kels_orien/building-a-full-stack-nft-market-place-with-near-protocol-and-reactjs-ak9).
## 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](https://github.com/near-examples/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](https://docs.near.org/docs/tutorials/contracts/cross-contract-calls) 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](https://wallet.testnet.near.org) 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` 

{% embed https://gist.github.com/kels-orien/a723f8c2dbc4b282c48067d8bccd5f90 %}

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

#### useModal.js

{% embed https://gist.github.com/kels-orien/8af5c681e57bcdac22987ce9a6b10b0d %}

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


### Modal.js

{% embed https://gist.github.com/kels-orien/2295bac60c99c238233a8e436ce9d086 %}

`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](https://github.com/kels-orien/nft-marketplace-part-2/blob/main/src/App.js) 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.

{% embed https://gist.github.com/kels-orien/1a83af5a0ceb058621f4a123f635e300 %}

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

{% embed https://gist.github.com/kels-orien/31cf3f180df9136b24ef53567055a25f %}

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

{% embed https://gist.github.com/kels-orien/3bbe592d757c123be04abe87acd4e0d8 %}

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

{% embed https://gist.github.com/kels-orien/7bcf29928547669cf6671dbb595a0438 %}

`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.

{% embed https://gist.github.com/kels-orien/83ae52b180840b03f1635cda6e359433 %}

### Testing it out

Change into the root directory and run the start command:

```
npm start

```