How do I use Web3js with a nonfungible token NFT marketplace
How do I use Web3js with a nonfungible token NFT marketplace
Using Web3.js with a Non-Fungible Token (NFT) Marketplace
Creating an NFT marketplace involves several steps, including setting up a smart contract for the NFTs, integrating Web3.js for blockchain interactions, and building a user interface. This guide will walk you through the process of building a simple NFT marketplace using Web3.js and Solidity.
1. Prerequisites
Before you start, ensure you have the following:
- Node.js and npm installed on your machine
- A local Ethereum node or access to a test network (e.g., Ganache)
- Basic understanding of Solidity and JavaScript
2. Set Up Your Project
Create a new project directory and initialize it:
mkdir nft-marketplace
cd nft-marketplace
npm init -y3. Install Web3.js
Install the Web3.js library using npm:
npm install web34. Create the Smart Contract
For this example, we will create a simple NFT marketplace smart contract. Below is the Solidity code for the contract:
pragma solidity ^0.8.0;
import `@openzeppelin/contracts/token/ERC721/ERC721.sol`;
import `@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol`;
import `@openzeppelin/contracts/access/Ownable.sol`;
contract NFTMarketplace is ERC721URIStorage, Ownable {
uint public tokenCounter;
constructor() ERC721(`NFTMarketplace`, `NFTM`) {
tokenCounter = 0;
}
function createNFT(string memory tokenURI) public onlyOwner returns (uint) {
uint newItemId = tokenCounter;
_safeMint(msg.sender, newItemId);
_setTokenURI(newItemId, tokenURI);
tokenCounter++;
return newItemId;
}
}Deploy this contract using Remix IDE or Truffle to your local Ethereum node or a test network.
5. Create the Frontend
Create an index.html file in your project directory:
<!DOCTYPE html>
<html lang=`en`>
<head>
<meta charset=`UTF-8`>
<meta name=`viewport` content=`width=device-width, initial-scale=1.0`>
<title>NFT Marketplace</title>
<script src=`https://cdn.jsdelivr.net/npm/web3/dist/web3.min.js`></script>
<script src=`app.js`></script>
</head>
<body>
<h1>NFT Marketplace</h1>
<input type=`text` id=`tokenURI` placeholder=`Token URI`>
<button id=`createNFTButton`>Create NFT</button>
<p id=`statusMessage`></p>
</body>
</html>6. Create the JavaScript File
Create an app.js file in your project directory:
const Web3 = require('web3');
// Connect to your local Ethereum node or test network
const web3 = new Web3('http://localhost:8545'); // Change to your node URL
// Replace with your deployed contract address
const contractAddress = '0xYourContractAddress';
// ABI of the NFTMarketplace contract
const contractABI = [
{
`inputs`: [`string`],
`name`: `createNFT`,
`outputs`: [`uint`],
`stateMutability`: `nonpayable`,
`type`: `function`
}
];
// Create contract instance
const nftMarketplace = new web3.eth.Contract(contractABI, contractAddress);
// Function to create an NFT
async function createNFT() {
const accounts = await web3.eth.getAccounts();
const tokenURI = document.getElementById('tokenURI').value;
await nftMarketplace.methods.createNFT(tokenURI).send({ from: accounts[0] });
document.getElementById('statusMessage').innerText = 'NFT created successfully!';
}
// Add event listener
document.getElementById('createNFTButton').addEventListener('click', createNFT);
7. Run Your NFT Marketplace
To run your NFT marketplace, you can use a simple HTTP server. If you have Python installed, you can run:
python -m http.server 8000</ code>http://localhost:8000 to interact with your NFT marketplace.8. Conclusion
By following these steps, you can create a simple NFT marketplace using Web3.js. This marketplace allows users to create NFTs by providing a token URI, demonstrating the capabilities of non-fungible tokens and decentralized applications.