Building our first NFT Marketplace ARCANE without writing single line of Solidity  🖖
Tags: webdev, thirdweb, thirdwebhackathon, web3
Published: 2022-02-26 10:43:41

<p>Gm folks! It's 2022 😻, the year of getting ourselves in to web3. One morning we notice Hashnode dropped 2022's first hackathon on Web 3.0 with ThirdWeb, isn't it an amazing start for this year? Why wait for any further let's go through what we have cooked for this Hackathon.</p>
<p>Before that, If you are new to web3 you must be wondering what's Blockchain, NFT, and NFT marketplace? Don't worry I got your back.</p>
<iframe src="https://giphy.com/embed/7rmGeDcqs4wD2PnauU" width="480" height="270" class="giphy-embed"></iframe>

<h3 id="heading-what-is-blockchain">⛓️ What is Blockchain?</h3>
<p>Well it's hard to explain Blockchain in a one-liner but let me try</p>
<blockquote>
<p>Blockchain is a public database(ledger)📒 that is updated and shared across many computers(nodes) in a network.</p>
</blockquote>
<h3 id="heading-what-is-nft">👀 What is NFT?</h3>
<p>NFT stands for Non-Fungible Token. Wait it doesn't make any sense right? I Know let me explain it when I said Non-fungible that means unique, there is no other of the same kind. 
bitcoin is fungible because when you trade one token for another you got the same, it's different from the previous one.
but when we say non-fungible that means if you trade one token that is totally unique in its way with another non-fungible token you got a different kind.</p>
<h3 id="heading-what-is-nft-marketplace">🤔 What is NFT Marketplace?</h3>
<p>The marketplace is a common platform that acts as a market or meeting point for creators and collectors. Creators come to the marketplace and list their NFTs for sale and collectors buy those listed NFTs.</p>
<h3 id="heading-problem">🤷‍♀️Problem</h3>
<p>In past there was hardly one can verify the provenance of digital contents, like one can verify physical contents in traditional auctions that a given work of art is in fact the original one, not a replica.
As we already know blockchain contains transaction history on a public ledger that is decentralized and can't be altered, which serves the purpose of making any digital content unique in its own way. In laymen's way, we can say tokenization of unique digital content on the blockchain is minting NFT.</p>
<p>We build a decentralized Marketplace app without writing a single line of solidity code, if you are thinking what's so great about not writing solidity, let me tell you solidity is a strictly typed programming language that is used to write awesome smart contracts. It's a newly developed language specifically writing smart contracts and deploying them on the Ethereum network. Many of us are not very comfortable in writing  👩🏼‍💻smart contract with solidity and understanding all the basic and important components for writing your own smart contract for NFT minting or for another purpose. </p>
<p>Then what should a person don't want to write contracts but still want to build amazing web3 Dapps 🙇‍♂️. (🥁Drum roll, please !! ) here comes ThirdWeb.</p>
<p><strong> 🌐thirdweb</strong></p>
<p>ThirdWeb is a portal that provides smart contracts, SDKs, and UI components that creators, developers, etc can integrate into their projects/apps. It's a place where you can get all the web3 related tools and start building your awesome Dapp.</p>
<p>Using thirdweb SDK, project, and modules we didn't require to pay much attention to the backend part of DApp. We only focus on integration which is totally easy for anyone who is a beginner in frontend development.</p>
<h3 id="heading-inspiration">💡Inspiration</h3>
<p>We got inspired by amazing NFT Marketplaces like <a target="_blank" href="https://opensea.io/">OpenSea</a>,<a target="_blank" href="https://rarible.com/">Rarible</a>.</p>
<h3 id="heading-thats-where-arcane-comes-into-the-play">⚡That's where ARCANE comes into the Play</h3>
<iframe width="100%" height="500" src="https://www.youtube.com/embed/mlAhhvsJ1a4"></iframe>

<p>Well, ARCANE is an NFT marketplace where an artist can mint her/his digital content into NFT and store them on the blockchain, letting collectors purchase.
<a target="_blank" href="https://nft-maket-place.vercel.app/">l<strong>ive demo</strong></a>
We will start with having a crypto wallet. We recommend installing <a target="_blank" href="https://metamask.io/">Metamask</a>🦊</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643658818473/HcMp3H0hZ.png" alt="Screenshot 2022-02-01 011935.png" /></p>
<p>We login into thirdweb via crypto wallet, setting Mumbai as a network for creating projects and modules for our marketplace.
We created NFT, Marketplace module with the current address. after setting up some permission we are ready to use our smart contracts via thirdweb SDK.
Installing thirdweb SDK in Nextjs application.</p>
<pre><code><span class="hljs-comment">//Instantiate 3rdweb SDK</span>
 const rpcUrl <span class="hljs-operator">=</span> <span class="hljs-string">"https://rpc-mumbai.maticvigil.com"</span>;
 const privateKey <span class="hljs-operator">=</span> process.env.NEXT_PUBLIC_PRIVATE_KEY;

 const wallet <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> ethers.Wallet(
    privateKey,
    ethers.getDefaultProvider(rpcUrl)
  );

  const market <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> ThirdwebSDK(wallet).getMarketplaceModule(
    MARKETPLACE_ADDRESS
  );
</code></pre><p>Defining which module to use while minting NFT we needed the NFT module address and for listing and buying needed marketplace module address.</p>
<pre><code><span class="hljs-comment">// assign the smart contract address</span>
const NFT_MODULE_ADDRESS <span class="hljs-operator">=</span> <span class="hljs-string">"0x0C8fe5019D3B3BaC3B9e0878080C898518E02060"</span>;

<span class="hljs-comment">// Instantiate NFT Collection module</span>
 const nft <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> ThirdwebSDK(wallet).getNFTModule(NFT_MODULE_ADDRESS);
</code></pre><p>it's now time to mint your digital asset to another address</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643658944199/EWuINAMlE.png" alt="Screenshot 2022-02-01 012019.png" /></p>
<pre><code><span class="hljs-comment">// Minting the NFT asynchronously</span>

<span class="hljs-keyword">import</span> { <span class="hljs-title">ThirdwebSDK</span> } <span class="hljs-title"><span class="hljs-keyword">from</span></span> <span class="hljs-string">"@3rdweb/sdk"</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title">ethers</span> } <span class="hljs-title"><span class="hljs-keyword">from</span></span> <span class="hljs-string">"ethers"</span>;

export default async <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">mint</span>(<span class="hljs-params">req, res</span>) </span>{
  const rpcUrl <span class="hljs-operator">=</span> <span class="hljs-string">"https://rpc-mumbai.maticvigil.com"</span>;

  const privateKey <span class="hljs-operator">=</span> process.env.NEXT_PUBLIC_PRIVATE_KEY;

  const NFT_MODULE_ADDRESS <span class="hljs-operator">=</span> <span class="hljs-string">"0x0C8fe5019D3B3BaC3B9e0878080C898518E02060"</span>;

  const { account, name, decription, image } <span class="hljs-operator">=</span> await req.body;
  console.log(req.body);
  const wallet <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> ethers.Wallet(
    privateKey,
    ethers.getDefaultProvider(rpcUrl)
  );

  <span class="hljs-comment">// initialize the SDK and get the NFT Collection module</span>
  const nft <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> ThirdwebSDK(wallet).getNFTModule(NFT_MODULE_ADDRESS);
  await nft
    .mintTo(account, {
      name: name,
      decription: decription,
      image: image,
    })
    .then((metadata) <span class="hljs-operator">=</span><span class="hljs-operator">&gt;</span> {
      console.log(metadata);
      res.<span class="hljs-built_in">send</span>(JSON.stringify(metadata));
    })
    .catch((e) <span class="hljs-operator">=</span><span class="hljs-operator">&gt;</span> console.log(e));
}
</code></pre><p>for listing, we need both modules addresses.</p>
<pre><code>
<span class="hljs-comment">// Declaring the NFT Collection module address</span>
 const NFT_MODULE_ADDRESS <span class="hljs-operator">=</span> <span class="hljs-string">"0x0C8fe5019D3B3BaC3B9e0878080C898518E02060"</span>;

<span class="hljs-comment">// Declaring the MarketPlace  module address</span>
  const MARKETPLACE_ADDRESS <span class="hljs-operator">=</span> <span class="hljs-string">"0x229b1f789506dbea2052f8423a780b1be1c16f21"</span>;

<span class="hljs-comment">// Initialize market module by passing in the module address</span>

  const market <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> ThirdwebSDK(wallet).getMarketplaceModule(
    MARKETPLACE_ADDRESS
  );
</code></pre><p>you can list your minted NFT on the marketplace</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1643658974126/RcX5CI9xu.png" alt="Screenshot 2022-02-01 011840.png" /></p>
<pre><code><span class="hljs-comment">// the listingId of the listing you want to fetch data for</span>
<span class="hljs-keyword">import</span> { <span class="hljs-title">ThirdwebSDK</span> } <span class="hljs-title"><span class="hljs-keyword">from</span></span> <span class="hljs-string">"@3rdweb/sdk"</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title">ethers</span> } <span class="hljs-title"><span class="hljs-keyword">from</span></span> <span class="hljs-string">"ethers"</span>;

export default async <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">list</span>(<span class="hljs-params">req, res</span>) </span>{

  const rpcUrl <span class="hljs-operator">=</span> <span class="hljs-string">"https://rpc-mumbai.maticvigil.com"</span>;
  const privateKey <span class="hljs-operator">=</span> process.env.NEXT_PUBLIC_PRIVATE_KEY;

  const NFT_MODULE_ADDRESS <span class="hljs-operator">=</span> <span class="hljs-string">"0x0C8fe5019D3B3BaC3B9e0878080C898518E02060"</span>;
  const MARKETPLACE_ADDRESS <span class="hljs-operator">=</span> <span class="hljs-string">"0x229b1f789506dbea2052f8423a780b1be1c16f21"</span>;
 const TOKEN_ADDRESS <span class="hljs-operator">=</span> <span class="hljs-string">"0x0000000000000000000000000000000000000000"</span>;  <span class="hljs-comment">//MATIC Mumbai token address</span>

  console.log(privateKey);

  const { tokenOffer, tokenId } <span class="hljs-operator">=</span> await req.body;

  console.log(req.body);

  const wallet <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> ethers.Wallet(
    privateKey,
    ethers.getDefaultProvider(rpcUrl)
  );

  const market <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> ThirdwebSDK(wallet).getMarketplaceModule(
    MARKETPLACE_ADDRESS
  );

  await market
    .createDirectListing({
      assetContractAddress: NFT_MODULE_ADDRESS,
      buyoutPricePerToken: ethers.utils.parseUnits(tokenOffer, <span class="hljs-number">18</span>),
      currencyContractAddress: TOKEN_ADDRESS,
      startTimeInSeconds: Math.floor(Date.now() <span class="hljs-operator">/</span> <span class="hljs-number">1000</span>),
      listingDurationInSeconds: <span class="hljs-number">60</span> <span class="hljs-operator">*</span> <span class="hljs-number">60</span> <span class="hljs-operator">*</span> <span class="hljs-number">24</span>,
      tokenId: tokenId,
      quantity: <span class="hljs-number">1</span>,
    })
    .then((data) <span class="hljs-operator">=</span><span class="hljs-operator">&gt;</span> {
      console.log(data);
      res.<span class="hljs-built_in">send</span>(JSON.stringify(data));
    })
    .catch((<span class="hljs-function"><span class="hljs-keyword">error</span>) =&gt; </span>{
      console.log(<span class="hljs-function"><span class="hljs-keyword">error</span>)</span>;
    });
}
</code></pre><p>🥳Woohooo!! we have minted our digital assets and listed them on the Polygon blockchain without writing any line of solidity smart contract way to go thirdweb  ✨.</p>
<p>Now it's time to reveal the tech-stack we have used to build this amazing marketplace  🙈</p>
<h3 id="heading-techstack-used">📚 TechStack Used</h3>
<p><strong>Framework and Services</strong></p>
<ul>
<li><a target="_blank" href="https://nextjs.org/">NextJS</a> - for Frontend</li>
<li><a target="_blank" href="https://mui.com/getting-started/installation/">Material UI</a> - for styling the website</li>
<li><a target="_blank" href="https://thirdweb.com/">thirdweb</a> - for getting pre-build smart contracts</li>
</ul>
<p><strong>Libraries</strong></p>
<ul>
<li><a target="_blank" href="https://docs.ethers.io/v5/">ether.js</a>- for interacting with the Ethereum Blockchain and its ecosystem</li>
<li><a target="_blank" href="https://www.npmjs.com/package/axios">axios</a> - Promise based HTTP client for the browser and node.js</li>
<li><a target="_blank" href="https://docs.ipfs.io/reference/js/api/">ipfs-http-client</a>  - The JavaScript HTTP RPC API client library for IPFS implementations.</li>
</ul>
<h3 id="heading-team-and-collaborator">👯‍♂️ Team and Collaborator</h3>
<p>I have been in collaboration with <a class="user-mention" href="https://hashnode.com/@SnehaMaurya">Sneha Maurya</a> who handles backend, API/SDK integrations, and web3 related functionalities✌️.</p>
<h3 id="heading-deploying">🚀 Deploying</h3>
<p>The whole app is deployed on <a target="_blank" href="https://nft-maket-place.vercel.app/">Vercel</a>,  🏃🏽‍♀️ go and check it out.</p>
<h3 id="heading-links-and-resources">🌐 Links and resources</h3>
<ul>
<li>Live demo - <a target="_blank" href="https://nft-maket-place.vercel.app/">ARCANE</a></li>
<li>Github Repository link -<a target="_blank" href="https://github.com/theashishmaurya/nftMaketPlace">Github-NFTMarketplace</a></li>
<li>connect to us on twitter - @sneha_kushw and @theashishmaurya</li>
</ul>
<h3 id="heading-future-possibilities">🤖 Future Possibilities</h3>
<ul>
<li>buying listed NFT using our custom/existing currency token form marketplace</li>
<li>adding royalties for minted NFTs.</li>
<li>adding more crypto wallets for accessing our website.</li>
</ul>
</br><p style="color:#808080;">This blog is posted using <a target="_blank" href="https://blogtiple.com">Blogtiple</a></p>