To successfully address the concern of carbon footprints emitted from NFT or block minting, NEAR Protocol’s computational mechanism is based on Proof-of-Stake (PoS) consensus. There are no miners in the PoS consensus mechanism; instead, the validators have the authority to stake a given token amount for their participation in the voting mechanism. Proof-of-Stake consensus mechanism thus helps blockchain communities to validate blocks and gather block awards.
NEAR’s Proof-of-Stake consensus is known as the Nightshade. Other than Nightshade, Sharding is another mechanism that helps the network attain scalability and security in an ecological and carbon-neutral way. Nightshade and sharding function simultaneously to allow every transaction to be energy efficient by splitting the network’s data computational load. This results in a final reduction of energy consumption, thus producing a minimum amount of carbon footprints.
NEAR, therefore, has one of the most sustainable ecosystems for minting and trading NFTs. This article is a step-by-step guide on building an NFT marketplace on NEAR.
- About NEAR blockchain
- What are the benefits of building on NEAR?
- What are the basic development components of NEAR?
- How to build an NFT marketplace on NEAR?
- What NEAR development services does LeewayHertz provide?
About NEAR blockchain
NEAR is a decentralized and carbon-neutral blockchain platform based on sharding and Nightstand mechanisms. It is a smart contract-capable blockchain protocol crafted to ensure the development of highly scalable dApps. NEAR blockchain has the efficiency of processing approximately 100,000 transactions per second. It has a community-operated cloud infrastructure for deploying and running the dApps on the network.
NEAR combines the distributed database features with a server-less database computing platform. NEAR token powers the NEAR dApps to connect with each other in different ways. NEAR blockchain helps the developers to build censorship-free backends for smart contract functioning to manage high-stake data like digital assets, identities and money.
NEAR blockchain functions in a similar way to a centralized data storage ecosystem. For example, Amazon Web Services (AWS) functions as a base layer on which the applications are built. The main difference between AWS and the NEAR platform is that- NEAR is a decentralized network of computers and is not controlled by a single authority. It allows the development of the dApp & NFT marketplace architecture around the network.
Some of the fundamental components of the NEAR platform are as the following:
- Mintbase
- NEAR Token
- NFT Minting Platform
- Flux Protocol
Let us now look at some of the benefits of developing on the NEAR blockchain in the next section.
What are the benefits of building on NEAR?
NEAR blockchain has a progressive User Experience (UX) for its dApp users in DeFi. Based on the sharding mechanism, NEAR Protocol helps network data retrieval and scales the dApps on DeFi platforms.
Along with sharding, it also uses a PoS election mechanism known as the Threshold Proof-of-Stake (TPoS). This mechanism paves a predetermined way for creating a large number of participants to manage the blockchain network. TPoS helps increase the level of decentralization and security of the blockchain network. NEAR Protocol uses TPoS to create a reward distribution system for dApp users.
Let us now explore the benefits that make NEAR Protocol a fit for blockchain-based application development:
Sustainability
NEAR Protocol has an efficient PoS network that ensures network sustainability and carbon neutrality. This powers the users to run various dApps and process blockchain transactions efficiently.
Cost-effective
NEAR Protocol has 1000 times lower transaction fees for its users and developers, comparatively less than most third-generation blockchains. It charges 30 percent of the transaction fees for participating in the network’s growth.
User-friendly
NEAR Protocol can produce a human-readable account address based on scoped DNS pattern. With the human-readable address, NEAR becomes a user-friendly blockchain that lets people with zero technical knowledge access the network.
Secure
With a robust network of active validators, NEAR maintains its credibility and high security throughout the network.
Interoperability
NEAR components like the EVM and cross-chain Rainbow bridge support NEAR to facilitate cross-chain transactions and exchanges among various independent blockchain platforms.
Pragmatic
NEAR smart contracts are written in expressive community-supported coding languages: Rust and AssemblyScript.
Now that we are familiar with the benefits let us look at the development suite of NEAR in the next section.
What are the basic development components of NEAR?
NEAR blockchain is built to be used independently in a permissionless way but with a set of tools and implementations. NEAR development suite consists of the following components:
NEAR SDKs
Users on NEAR Protocol utilize the JavaScript, Rust and AssemblyScript coding languages to write their smart contracts. NEAR has a complete SDK, standard data structures and testing tools for its smart contract languages.
Gitpod for NEAR
NEAR uses the existing Gitpod technology to provide a zero-time onboarding experience to the developers. This technology has an online ‘Integrated Development Environment (IDE). Using the IDE, developers can efficiently write, test and deploy NEAR smart contracts from the browser.
NEAR also has other templates that can be deployed with one click, making the development process easy for new and old developers.
NEAR wallet
NEAR wallet has built-in functionality to help, holders participate in the staking and governance processes on the NEAR platform. It powers the developers and end-users to store the digital assets on the NEAR network.
NEAR explorer
NEAR’s explorer helps the users understand the performance of the NEAR network, as well as facilitates debugging of the contracts. It provides real-time network data in an easily understandable web-based graphical format.
NEAR command-line tools
NEAR owns command-line tools that allow developers to create, test, and deploy the applications from their local environments.
In the next section, let us now understand the step-by-step process of developing an NFT marketplace on the NEAR platform.
How to build an NFT marketplace on NEAR?
Prerequisites
- Nodejs is a JavaScript runtime ecosystem developed on the Chrome V8 engine.
- NEAR wallet account is a secure account and wallet manager for NEAR users’ accounts. A NEAR wallet account will allow the user to connect with various decentralized applications on NEAR. It also stores the NEAR tokens and NFTs securely. This section will use a testnet wallet to develop an NFT marketplace on NEAR.
- Rust Toolchain is a specific version of a group of programs required to compile a Rust application.
- NEAR-CLI is a NodeJS CLI that uses the near-api-js to interact and connect with the NEAR network.
The NEAR NFT marketplace development is divided into two parts:
- Part 1- Setting up the NFT contract
- Part 2- Setting up the marketplace
Part 1
To set up smart contracts for the NEAR NFT marketplace, follow these steps:
Step 1
Clone
Clone the smart contract development application by using the command line interface:
git clone https://github.com/kels-orien/nft-marketplace-part-1.git
Step 2
Account creation
Open the wallet testnet account from the nft-contract folder by using the command CLI and then log in to the NEAR wallet account by inserting the following code:
near login
Then build the contract from the nft-contract directory by using the CLI; there are two different CLIs as given below:
For the Windows user:
/build.bat
For the Mac and Linux users:
/build.sh
Step 3
Subaccount creation
Use the following CLI to create a sub-account from the nft-contract directory:
near create-account nft-contract.youraccountname.testnet --masterAccount youraccountname.testnet
Step 4
Contract deployment
Deploy the smart contract using the following command:
near deploy --accountId nft-contract.youraccountname.testnet --wasmFile res/nft_contract.wasm
Then edit the contract name by changing the youraccountName section of the contractName component in the config.js file to a preferred ant name.
Then install all the packages for the frontend; go to the root of the directory nft-marketplace-part-1 by using the CLI given below:
cd .. npm install
Lastly, launch the frontend by running the below mentioned CLI:
npm start
Step 1
Getting started
Begin the NEAR NFT marketplace development with a rust contract template. Create a directory named nft-marketplace-part-1 from the CLI. Then, enter the project root directory as:
cd nft-marketplace-part-1
After this, clone the following rust template in the nft-marketplace-part-1 root directory:
git clone https://github.com/near-examples/rust-template.git
The alter and rename the rust-template file to nft-contract. Then, update the Cargo.toml file by entering the following command:
[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</youraddress@mail.com></hello@near.org>
Modify the name, run the build script and change the compiled wasm file’s name.
Windows users will use build.bat and the Linux users will use build.sh. Now copy the src directory of the nft-contract file in the new nft-contract folder. It 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 has the functions to control the access and transactions of NFTs
- enumeration.rs lists the NFT tokens and their respective owners.
- Lib.rs stores all the smart contract initialization functions.
- metadata.rs explains the metadata structure and the token.
- mint.rs explains the token minting logic
- nft_core.rs contains the core logic that allows the NEAR users to transfer NFTs.
- royalty.rs has the functions related to the payout on the NFT marketplace.
Step 2
Login to the NEAR account
Login to the near account from the CLI:
near login
This will open the NEAR wallet, in which the user will confirm the creation of a full-access key. then follow the instructions from the login CLI to create a key on the user hard drive. This key will be stored in the users’ operating system’s home directory in a near-credentials file.
Step 3
Build the contract
Build the contract from the nft-contract directory through the CLI:
For Windows users:
./build.bat
For Linux and Mac users:
./build.sh
Step 4
Subaccount creation
Create a subaccount and then deploy the smart contract to this subaccount by using the following CLI:
near create-account nft-contract.youraccountname.testnet --masterAccount youraccountname.testnet
Step 5
Deploy the contract
Use the following CLI to deploy the contract:
near deploy --accountId nft-contract.youraccountname.testnet --wasmFile res/nft_contract.wasm
Step 6
Initialize the contract
Initialize the 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 the Windows users:
near view nft-contract.youraccountname.testnet nft_metadata
After initializing, see the metadata through the CLI by using the following command:
near call nft-contract.youraccountname.testnet new_default_meta '{\"owner_id\": \"nft-contract.youraccountname.testnet\"}' --accountId nft-contract.youraccountname.testnet
Step 7
Minting token
Mint NEAR NFT tokens using the following commands,
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
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
Check all the collectibles section of the testnet wallet for the recently minted NFTs.
Step 8
View NFT data 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\"}'
Step 9
Transfer NFTs
To transfer the NFTs, create another testnet wallet account and transfer the NFT by running the command through 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
Step 10
Creating frontend
Add the react with the parcel-bundler on the nft-marketplace-part-1/src directory. Then create an src folder in the nft-marketplace-part-1 and shift the index.html and intex.js in the same folder.
npm install near-api-js regenerator-runtime react-scripts
Then, update the script sections of the package.json by running the following command:
"scripts": {
"start": "parcel src/index.html",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Step 11
Entry point
Update the src/index.js folder with the following code:
import React from 'react';import ReactDOM from 'react-dom';import App from './App';import getConfig from './config.js';import * as nearAPI from 'near-api-js'import 'regenerator-runtime'
async function initContract() { const nearConfig = getConfig(process.env.NEAR_ENV || 'testnet'); const keyStore = new nearAPI.keyStores.BrowserLocalStorageKeyStore() const near = await nearAPI.connect({keyStore, ...nearConfig}) const walletConnection = new nearAPI.WalletConnection(near) let currentUser;
if (walletConnection.getAccountId()) { currentUser = walletConnection.getAccountId() }
return { currentUser, nearConfig, walletConnection}}
initContract().then(({ currentUser, nearConfig, walletConnection})=> { ReactDOM.render(, document.getElementById('root'));})
Then the initContract method is called, and all the data is passed to the App.js Component using the following codes:
import React, { useEffect, useState } from "react";import "./App.css";import useModal from "./useModal";import Modal from "./Modal";import nearLogo from "./assets/near-logo.svg";
const initialValues = { assetTitle: "", assetDescription: "", assetUrl: "",};
const App = ({ currentUser, nearConfig, walletConnection }) => { const [showLoader, setShowLoader] = useState(false); const [values, setValues] = useState(initialValues); const { isVisible, toggleModal } = useModal(); const [nftResults, setNftResults] = useState([]);
const signIn = () => { walletConnection.requestSignIn( nearConfig.contractName, "", // title. Optional, by the way "", // successUrl. Optional, by the way "" // failureUrl. Optional, by the way ); sendMeta() };
useEffect(() => { if (!showLoader) { displayAllNFT(); } }, [showLoader]);
const handleInputChange = (e) => { const { name, value } = e.target; setValues({ ...values, [name]: value, }); };
const sendMeta = async () => { let functionCallResult = await walletConnection.account().functionCall({ contractId: nearConfig.contractName, methodName: "new_default_meta", args: { owner_id: nearConfig.contractName, }, attachedDeposit: 0, walletMeta: "", wallerCallbackUrl: "", });
if (functionCallResult) { console.log("new meta data created: "); } else { console.log("meta data not created"); } };
const mintAssetToNft = async () => { toggleModal() let functionCallResult = await walletConnection.account().functionCall({ contractId: nearConfig.contractName, methodName: "nft_mint", args: { token_id: `${values.assetTitle}`, metadata: { title: `${values.assetTitle}`, description: `${values.assetDescription}`, media: `${values.assetUrl}`, }, receiver_id:currentUser }, attachedDeposit: "589700000000000000000000", });
if (functionCallResult) { console.log("nft meta sent: "); } else { console.log("nft meta not sent"); } }; const displayAllNFT = async () => { let result = await walletConnection .account() .viewFunction(nearConfig.contractName, "nft_tokens_for_owner", { account_id: currentUser, from_index: "0", limit: 64, }); setNftResults(result); setShowLoader(true); return result; };
const signOut = () => { walletConnection.signOut(); window.location.replace(window.location.origin + window.location.pathname); };
return ( < div> < header className="top-header"> < div className="menu"> < div className="navbar-left"> < h3> NFT MARKET< /h3> </ div> < nav className="navbar"> < ul className="navbar-ul"> < li className="navbar-li pt-3 pr-2"> {currentUser ? ( < button href="#" className="log-link" onClick={signOut}> Log Out < /button> ) : ( < button href="#" className="log-link" onClick={signIn}> Log In < /button> )} < /li> < li className="navbar-li"> {currentUser ? ( < button className="btn" onClick={toggleModal}> Create NFT < /button> ) : ( "" )} < /li> < /ul> < /nav> < /div> < /header> < main className="main-wrapper"> < div className="wrapper"> {currentUser ? ( < div className="welcome-wrapper"> < span className="welcome-text">Welcome! < /span> {currentUser} < /div> ) : ( "user not logged in" )} < /div> < /main>
< div className="gallery-wrapper"> {nftResults ? nftResults.map((nft, index) => ( < div className="outter-wrapper" key={index}> < article className="card-wrapper"> < a className="asset-anchor" href="#"> < div className="asset-anchor-wrapper"> < div className="asset-anchor-wrapper-inner"> < div className="asset-anchor-wrapper-inner-2"> < img src={nft.metadata.media} className="img-wrapper" alt="NFT Token" /> < /div> < /div> < /div> < div className="details-wrapper"> < div className="details-title-wrapper"> < div className="details-title-left-wrapper"> < div className="details-title-left-wrapper-inner-1"> {nft.metadata.title} < /div> < div className="details-title-left-wrapper-inner-2"> {nft.owner_id} < /div> < /div> < div className="details-title-right-wrapper"> < div className="details-assets-right-wrapper-inner-1"> < span className="span-price">Price< /span> < div className="price-wrapper"> < div className="near-symbol"> < img className="near-logo" src={nearLogo} alt="near logo" /> < /div>
< div>4.4< /div> < /div> < /div> < /div> < /div> < /div> < /a> < /article> < /div> )) : "NFTs not found"} < /div> < div className="outform-wrapper"> < div className="form-wrapper"> < form onSubmit={(e) => { e.preventDefault(); mintAssetToNft(); }} > < div className="form-in-wrapper"> < h3 className="text-center pb-1">MINT NFT< /h3> < div className="box-wrapper"> < div className="box-in-wrapper"> < div className="input-wrapper"> < input className="input-box" placeholder="Asset Title" name="assetTitle" type="text" value={values.assetTitle} onChange={handleInputChange} /> < /div> < /div> < /div> < div className="box-wrapper"> < div className="box-in-wrapper"> < div className="input-wrapper"> < input className="input-box" placeholder="Asset Description" name="assetDescription" type="text" value={values.assetDescription} onChange={handleInputChange} /> < /div> < /div> < /div> < div className="box-wrapper"> < div className="box-in-wrapper"> < div className="input-wrapper"> < input className="input-box" placeholder="Asset Url" name="assetUrl" type="text" value={values.assetUrl} onChange={handleInputChange} /> < /div> < /div> < /div> < div className="form-btn-wrapper"> < button className="form-btn">Mint NFT< /button> < /div> < /div> < /form> < /div> < /div> < /div> );}; export default App;< /div>
Create all the file names config.js, Modal.js, useModal.js Close.js and App.css in the nft-marketplace-part-1/src directory using the following code:
Config.js
const CONTRACT_NAME = process.env.CONTRACT_NAME || 'nft-contract.youraccountname.testnet';
function getConfig(env) { switch(env) { case 'production': case 'mainnet': return { networkId: 'mainnet', nodeUrl: 'https://rpc.mainnet.near.org', contractName: CONTRACT_NAME, walletUrl: 'https://wallet.near.org', helperUrl: 'https://helper.mainnet.near.org' }; case 'development': case 'testnet': return { networkId: 'testnet', nodeUrl: 'https://rpc.testnet.near.org', contractName: CONTRACT_NAME, walletUrl: 'https://wallet.testnet.near.org', helperUrl: 'https://helper.testnet.near.org', }; case 'betanet': return { networkId: 'betanet', nodeUrl: 'https://rpc.betanet.near.org', contractName: CONTRACT_NAME, walletUrl: 'https://wallet.betanet.near.org', helperUrl: 'https://helper.betanet.near.org' }; case 'local': return { networkId: 'local', nodeUrl: 'http://localhost:3030', keyPath: `${process.env.HOME}/.near/validator_key.json`, walletUrl: 'http://localhost:4000/wallet', contractName: CONTRACT_NAME }; case 'test': case 'ci': return { networkId: 'shared-test', nodeUrl: 'https://rpc.ci-testnet.near.org', contractName: CONTRACT_NAME, masterAccount: 'test.near' }; case 'ci-betanet': return { networkId: 'shared-test-staging', nodeUrl: 'https://rpc.ci-betanet.near.org', contractName: CONTRACT_NAME, masterAccount: 'test.near' }; default: throw Error(`Unconfigured environment '${env}'. Can be configured in src/config.js.`); }}
module.exports = getConfig
useModal.js
import { useState } from "react";const useModal = () => { const [isVisible, setIsVisible] = useState(false);
function toggleModal() { setIsVisible(!isVisible); } return { isVisible, toggleModal, };};export default useModal;
Modal.js
import * as React from "react";import { createPortal } from "react-dom";import { CloseIcon } from "./Close";const Modal = ({ isVisible, hideModal, children }) => { return isVisible ? createPortal( < div className="modal-overlay"> < div className="close-wrapper"> < button className="sbutton" aria-label="Close dialog" onClick={hideModal}>< /button> < /div> {children} < /div> , ,
document.body ) : null;};
export default Modal
Close.js
import React from 'react' export const CloseIcon = () => ( < svg viewBox="0 0 24 24" width="28" height="28" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision" > < /svg> )
App.css
html, body, #root, .x-wrapper{ width: 100%; height: 100%; margin: 0px; display: contents;}
h1 { margin-bottom: 1em;}.modal-overlay { height: 100vh; left: 0; position: fixed; width: 100vw; z-index: 500; top: 0; background-color: rgba(0,0,0,.35);}.sbutton { border-style: none; color: white; cursor: pointer; font-weight: bold; padding: 0.9375rem; justify-content: right; transition-duration: .15s; transition-timing-function: cubic-bezier(.4,0,.2,1); background-color: transparent; background-image: none;}.close-wrapper{ display: flex; justify-content: right ;}.modal-wrapper { display: flex; justify-content: center; left: 0; outline: 0; overflow-x: hidden; overflow-y: auto; position: fixed; top: 25%; width: 100%; z-index: 1000;}
.s-modal { display: flex; justify-content: center; left: 0; outline: 0; overflow-x: hidden; overflow-y: auto; position: fixed; top: 25%; width: 100%; z-index: 1000;}
.gallery-wrapper { width: 100%; display: flex; justify-content: center; flex-flow: wrap;}
.outter-wrapper { padding: .5rem 2rem;}
.card-wrapper { display: flex; flex-direction: column; background-color: rgb(255, 255, 255); border: 1px solid rgb(229, 232, 235); border-radius: 10px; position: relative; z-index: 2;}.asset-anchor { display: flex; flex-direction: column; height: 100%; overflow: hidden;}
.asset-anchor-wrapper { height: 322px; width: 322px;}
.asset-anchor-wrapper-inner { min-height: inherit; border-radius: inherit; height: 100%; width: 100%; align-items: center;}
.asset-anchor-wrapper-inner-2 { align-items: center; display: flex; justify-content: center; max-height: 100%; max-width: 100%; overflow: hidden; position: relative; border-radius: 10px; }
.img-wrapper { width: auto; height: auto; max-width: 100%; max-height: 100%;}
.details-wrapper { display: flex; flex-direction: column; height: 126px; width: 100%; overflow: hidden; justify-content: space-between; cursor: pointer;}
.details-title-wrapper { padding: 12px; justify-content: space-between; display: flex;}
.detail-title-left-wrapper { margin-right: 12px; min-width: 0px; width: 60%;}
.details-title-right-wrapper { width: 40%; align-items: flex-end; display: flex; flex-direction: column;}.details-title-left-wrapper-inner-1 { display: flex; align-items: center; color: rgb(112, 122, 131); font-weight: 500; font-size: 12px;}
.details-title-left-wrapper-inner-2 { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; color: rgb(53, 56, 64); font-size: 12px; letter-spacing: 0.1px; font-weight: 600; text-align: left;}.details-assets-right-wrapper-inner-1 { flex: 1 0 0%; align-items: flex-end; flex-direction: column; display: flex;}
.span-price { font-weight: 400; font-size: 12px; color: rgb(112, 122, 131);}
.price-wrapper { font-size: 14px; height: initial; justify-content: flex-end; max-width: 13ch; -webkit-box-align: center; align-items: center; display: flex; font-weight: 600; color: rgb(53, 56, 64); width: fit-content;}
.near-symbol { align-items: center; display: flex; font-weight: 600; color: rgb(53, 56, 64); width: fit-content; max-width: 100%;}.near-logo { height: 14px; width: 16px;}.price { margin-left: 0.3em; width: 100%; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.s-header { align-items: center; display: flex; flex-direction: column; padding: 1.875rem 0.9375rem 1.875rem 0.9375rem;}
.s-title { margin-bottom: 0.3125rem;}
.s-description { color: #C1C1C1; text-align: center;}
.text-center { text-align: center;}
.pb-1 { padding-bottom: 1rem;}.top-header { width: 100%; box-shadow: rgb(4 17 29 / 25%) 0px 0px 8px 0px; max-width: 100vw; height: 72px; top: 0px; position: sticky; z-index: 110; transition: top 0.5s ease 0s; background-color: rgb(255, 255, 255);}
.menu { display: flex; justify-content: space-between; flex-direction: row; padding: 1rem;}.nav {
}.navbar{
}
h3 { display: block; font-size: 1.17em; margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;}
.username { padding: .2rem;}
.navbar-ul{ display: flex}
.wrapper { width: auto; padding: 1rem; }.welcome-wrapper { display: block;}.welcome-text { font-size: 1.2rem; font-weight: 500;}.main-wrapper { margin: 0 auto; text-align: center;}.navbar-li{ padding: 0rem;}
ul { list-style-type: none; list-style: none; margin-block-start: 0em; margin-block-end: 0em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px;}
.btn { display: inline-block; background-color: #ff424d; border-radius: 9999px; color: #fff; font-weight: 500; border: 2px solid transparent; line-height: 1.9; padding: .46875rem 1rem; font-size: .875rem!important; cursor: pointer;}
.navbar-left { width: auto;}.navbar-right {
}.outform-wrapper { box-sizing: border-box; transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s; padding: 0rem; margin: 0rem;}
.form-wrapper { border-width: 1px; border-style: solid; border-color: rgb(229, 227, 221); border-radius: 4px; box-shadow: none; background-color: rgb(255, 255, 255); overflow: hidden; box-sizing: border-box; margin: 0px auto; max-width: 32rem; width: 100%;}
.box-wrapper { box-sizing: border-box; transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s; padding-bottom: .3rem; margin: 0rem;}.box-in-wrapper { position: relative;}
.label{ box-sizing: border-box; transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s; padding: 0rem; margin: 0rem;}.form-in-wrapper { box-sizing: border-box; transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s; padding: 1.5rem; margin: 0rem;}.input-wrapper{ align-items: center; display: flex; margin-bottom: 0.5rem; position: relative; margin-top: 0.5rem;}.input-box { resize: none; min-width: 0px; width: 100%; font-weight: normal; appearance: none; background: rgb(245, 244, 242); border: 1px solid rgb(229, 227, 221); box-shadow: none; box-sizing: border-box; color: rgb(36, 30, 18); height: 3rem; outline: none; padding: 0.75rem 1rem; transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s; border-radius: 4px; font-size: 1rem !important;}.mint-text { color: rgb(36, 30, 18); font-family: Walsheim, sans-serif; position: relative; transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s; text-align: center; font-weight: 400 !important; margin: 1em 0px !important; font-size: 1.3125rem !important; line-height: 1.25 !important}.form-btn { align-items: center; backface-visibility: hidden; background-color: rgb(255, 66, 77); border-radius: 9999px; border: 1px solid rgb(255, 66, 77); box-sizing: border-box; cursor: pointer; display: flex; font-weight: 500; height: unset; -webkit-box-pack: center; justify-content: center; padding: 0.78125rem 1.5rem; position: relative; pointer-events: unset; text-align: center; text-decoration: none; text-transform: none; transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s; user-select: none; white-space: unset; width: 100%; color: rgb(255, 255, 255); font-size: 1rem !important;}.btn:hover { color: #ff424d; border-color: #ff424d; background-color: #fff;}
.form-btn:hover { color: #ff424d; border-color: #ff424d; background-color: #fff;}
.form-btn-wrapper { margin: 1rem 0rem}.nav-items {
}
.container { margin: 0 auto;}
.flex { display: flex;}.nav-button {
}
.pl { padding-left:.2rem}
.pr { padding-right:.2rem}.pr-2 { padding-right: .5rem;}.pt { padding-top: 0.7rem;}
.pt-3 { padding-top: 0.2rem;}
@font-face { font-family: 'Inter'; src: url('./fonts/static/Inter-Regular.ttf') format('ttf'), url('./fonts/static/Inter-Medium.ttf') format('ttf');}
body { margin: 0; font-family: 'Inter', -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;}
span.important { font-size: 1.9rem; color: #FF585D;}
a { text-decoration: none;}
.log-link { background-color: white; color: rgb(36, 30, 18); margin: 0em; border-style: none; border-color: white; padding: .65rem 1.5rem; cursor: pointer; font-size: 1rem; border: 1px solid #FF585D; border-radius: 9999px; cursor: pointer;}
.log-link:hover { color: #fff; border-color: #fff; background-color: #ff424d;}
Step 12
Run React
Lastly, run the React application from the CLI from nft-marketplace-part-1 using the following command:
npm start
Now that we are familiar with NFT marketplace development on NEAR let us look at its development services provided by LeewayHertz in the next section.
What NEAR development services does LeewayHertz provide?
Scalable dApps
Leveraging the advantage of infinite scalability provided by Near Protocol, we build advanced, secure, and scalable dApps on the Near protocol. We also analyze your project’s technical aspects to accentuate your dApp’s utility.
NFT marketplaces
Our blockchain experts analyze and innovate feature-rich NFT marketplaces on Near Protocol, providing you with the most curated NFT trading platform. With the intrinsic features of Near blockchain, we tailor your marketplace precisely to best suit your business use case.
Smart contracts
We provide smart contract development services to regulate your business processes on Near protocol. We cover every angle of contract development, from smart contract architecture to design, auditing, and optimization.
Exchange Bridges
We help enterprises leverage interoperability with cross-chain bridge launch on the Near Protocol, permitting their users to seamlessly exchange tokens, arbitrary data and resources across multiple independent blockchains.
Node and wallets
We help you develop and run a node on Near Protocol based on your project-specific requirements. Our developers build and integrate wallets into your dApp and decentralized exchange to support dApps and associated transactions.
DAO Integration
We provide DAO creation and integration services, keeping various aspects of your project in focus. DAO helps you build trust among the users by permitting them to propose changes to the protocol and take major decisions.
Maintenance & upgrade
We also offer our clients consistent support and maintenance services to ensure their dApps are optimized and running with negligible downtime.
Conclusion
NEAR blockchain is one of the distinctive blockchains with an environment-friendly and carbon-neutral protocol that emits minimal carbon footprints. It is a highly scalable network based on the Nightshade and sharding consensus mechanisms.
Along with scalability, it has unique features like interoperability and human-readable account names instead of cryptographically-coded wallet addresses to its credibility. This makes it easier for the users to access the wallets and dApps. NEAR blockchain is; thus, one of the most compatible blockchains meeting the dApp development needs of various businesses and startups.
If you are looking to develop an NFT marketplace for your businesses on the NEAR protocol, contact our blockchain experts for further in-depth guidance.
Webinar Details
Start a conversation by filling the form
All information will be kept confidential.
Insights
Metaverse Training: Future of Learning & Development
The disruptive innovation of metaverse mixed-reality learning environments can dramatically improve training, development and real learning.
Top 10 Metaverse Development Companies
Metaverse is the buzzword of this decade. Discover the best development companies that are assisting businesses in developing metaverse projects in 2024.
How much does it cost to build Metaverse?
Metaverse virtual world cost estimation varies based on metaverse features and user requirements changes.
