DEV Community: Tomiwa 😃

How to Build a Multi-Chain NFT Marketplace on Ethereum, using Solidity, React, Hardhat and Ethers.js

Tomiwa 😃 — Tue, 21 Feb 2023 21:41:18 +0000

In this tutorial, we’ll learn how to create a multi-chain NFT marketplace like arthouse where you can create, sell and buy an NFT on multiple blockchains such as Ethereum, Polygon and Binance Smart using Solidity, React and Ethers.js.

We’ll be writing our code in a very dynamic way so that we can add other chains in the future such as Avalanche, Celo, and Optimism with minimal code changes.

To see a live demo of what it looks like visit art.atila.ca or test.art.atila.ca to use the testnets.

All source code is available at github.com/atilatech/arthouse.

The original tutorial can be found at atila.ca.

What we’ll be Building

Our NFT marketplace will have 4 features. Mint NFT, List NFT, Buy NFT and withdraw sales.

We’ll mint an NFT to multiple chains. Then we’ll list the NFT on one of those chains for sale and then finally we’ll use another account to buy that NFT.

This tutorial is inspired by Nader Dabit’s excellent NFT marketplace tuorial and video tutorial. This tutorial will focus mainly on parts that are different from Nader’s tutorial instead of going over every single line of code. If you want more context, watch the video tutorial that I made to accompany this tutorial or check out Nader’s tutorial.

Our Tech Stack

How to write Solidity smart contract code
How to write tests for smart contracts using Hardhat and Waffle
How to dynamically deploy your smart contract to different blockchains using Hardat
How to create a React Web Application to interact with your smart contract using ethers.js

Getting Started

Instead of making projects from scratch, I believe the best way to learn is by taking an existing project and incrementally rebuilding it to add the feature you want.

Clone the github.com/atilatech/arthouse from Github and checkout to an older version of the Repo before the desired functionality was added.

https://github.com/atilatech/art-house/commit/0c2079f647e97a09445d0b6d9f24be4ac5d6793e

git clone https://github.com/atilatech/arthouse
git checkout 0c2079f647e97a09445d0b6d9f24be4ac5d6793e
# the following command allows you to make changes without being in a detached HEAD state
git checkout -b arthouse-tutorial

Sidenote: Here’s a cool trick to find the first commit.

Installing Packages

I’m using yarn but feel free to use npm, pnpm or your favourite package manager.

If you’re using npm you can replace yarn add with npm install.

Next, we need to install some packages. These packages will automatically be installed by yarn add or npm install since these packages are already in our package.json . Note that, some of these packages may also be outdated which is another reason to re-install packages. For the sake of completeness, install these packages.

yarn add ethers hardhat   \
web3modal @openzeppelin/contracts ipfs-http-client \
axios 

# I think it's good to separate main from development dependencies. Especially if you want to run yarn install in CI, you can skip installing testing packages

yarn add -D chai @nomiclabs/hardhat-waffle \
ethereum-waffle @nomiclabs/hardhat-ethers

yarn install

# I like the ant design library but feel free to use any design library you prefer

yarn add antd

Adding Blockchains

Add the Rinkeby and Binance Smart Chain testnets to our configuration file (src/config-chains.json). We’ll add Polygon later so you can see how a new chain can be added without changing any code logic.

Get the chain ID and PRC URLs using chainlist.org. Note that for the public RPC URLs, you might need to get a private RPC Url in case it gets too much traffic or is rate-limited.
1. If the RPC URLs are not working for you, you might need to create an Infura account or a similar RPC provider.

src/config-chains.json

{
    "4": {
        "NETWORK_NAME": "Rinkeby",
        "CHAIN_NAME": "Ethereum",
        "CURRENCY_SYMBOL": "ETH",
        "NFT_MARKETPLACE_ADDRESS": "0x359f6a8cf6da9b1a886965ce9eb5352bb7913eb4",
        "NFT_ADDRESS": "0x06c6a25884c36156b3d0105283d9724018b034b0",
        "IS_MAIN_NET": false,
        "LOGO_URL": "https://styles.redditmedia.com/t5_2zf9m/styles/communityIcon_hebckbd64w811.png",
        "CHAIN_ID": "4",
        "BLOCK_EXPLORER_URL": "https://rinkeby.etherscan.io",
        "RPC_PROVIDER_URL": "https://rinkeby.infura.io/v3/59b59e23bb7c44d799b5db4a1b83e4ee"
    },
    "97": {
        "NETWORK_NAME": "Testnet",
        "CHAIN_NAME": "Binance Smart Chain",
        "CURRENCY_SYMBOL": "BNB",
        "NFT_MARKETPLACE_ADDRESS": "0xc219B570Efe3a74620F89D884F3DA51e8ebcFfD4",
        "NFT_ADDRESS": "0xa94EC56924E2E4dcCb48e4987fEadA4B646637a3",
        "IS_MAIN_NET": false,
        "LOGO_URL": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Binance-coin-bnb-logo.png/800px-Binance-coin-bnb-logo.png",
        "CHAIN_ID": "97",
        "BLOCK_EXPLORER_URL": "https://testnet.bscscan.com",
        "RPC_PROVIDER_URL": "https://data-seed-prebsc-1-s1.binance.org:8545"
    },
    "localhost": {
        "NETWORK_NAME": "Localhost",
        "CHAIN_NAME": "Ethereum",
        "NFT_MARKETPLACE_ADDRESS": "0x5FbDB2315678afecb367f032d93F642f64180aa3",
        "NFT_ADDRESS": "0x5FbDB2315678afecb367f032d93F642f64180aa3",
        "IS_MAIN_NET": false,
        "LOGO_URL": "https://styles.redditmedia.com/t5_2zf9m/styles/communityIcon_hebckbd64w811.png",
        "CHAIN_ID": "localhost",
        "BLOCK_EXPLORER_URL": "https://rinkeby.etherscan.io",
        "RPC_PROVIDER_URL": ""
    }
}

Configuring Hardhat

Usually, we would run npx hardhat which will configure a new Hardhat development environment and create the following files:

hardhat.config.js, scripts, test contracts

However, you’ll notice our repo already has those files so instead we’ll go ahead and just modify each one starting with hardhat.config.js

You will also need to get a private key. The easiest way to do this is to install Metamask (or similar browser wallet), export one of the private keys and set it to your environment variable. Note: treat this private key like a password or a bank account information. If anyone gets access to this, they can control your wallet.

/* hardhat.config.js */
require("@nomiclabs/hardhat-waffle")
const { CONTRACT_DEPLOYMENT_WALLET_PRIVATE_KEY, INFURA_API_KEY} = process.env;

module.exports = {
  solidity: {
    version: "0.8.4",
    settings: {
      optimizer: {
        enabled: true,
        runs: 200
      }
    },
  },
  paths: {
    artifacts: './src/artifacts',
  },
  defaultNetwork: "hardhat",
  networks: {
    hardhat: {
      chainId: 1337
    },
    rinkeby: {
      url: `https://rinkeby.infura.io/v3/${INFURA_API_KEY}`,
      accounts: [`0x${CONTRACT_DEPLOYMENT_WALLET_PRIVATE_KEY}`],
      chainId: 4
    },
    bsctestnet: {
      url: `https://data-seed-prebsc-1-s1.binance.org:8545`,
      accounts: [`0x${CONTRACT_DEPLOYMENT_WALLET_PRIVATE_KEY}`],
      chainId: 97
    },
  }
}

Why we’re using Ethereum Rinkeby’s Network

We chose Rinkeby because it is supported by the most popular NFT marketplace, Opensea. So if we want our NFTs to be visble there we will need to use Rinkeby. It seems like most other marketplaces use Rinkeby as well.

Ethereum has many testnets and in a previous tutorial, I used Ropsten.

In that tutorial I said:

We're using the Ropsten test network because it's the test network that most resembles the main Ethereum blockchain.

Source: *How to add Ethereum and Binance Payments to a React Website with Metamask and Ethers.js*

Rinkeby doesn't fully reproduce the current mainnet since it uses PoA. While Ropsten uses proof of work just like the Ethereum mainnet. This also means that the Ether supply can only be be mined by a pre-approved group of nodes on Ropsten.

Coding the Smart Contract

Now we can get into the real smart contract development stuff.

// contracts/NFT.sol
// SPDX-License-Identifier: MIT OR Apache-2.0
pragma solidity ^0.8.3;

import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

import "hardhat/console.sol";

contract NFT is ERC721URIStorage {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    event NFTMinted (
        uint256 indexed tokenId,
        string tokenURI
    );
    constructor() ERC721("Atila NFT", "ATILANFT") {}

    function createToken(string memory tokenURI) public returns (uint) {
        _tokenIds.increment();
        uint256 newTokenId = _tokenIds.current();
        _mint(msg.sender, newTokenId);
        _setTokenURI(newTokenId, tokenURI);
        emit NFTMinted(newTokenId, tokenURI);
        return newTokenId;
    }
}

If you get the following error in VS Code

file import callback not supported

Do the following:

Install the Solidity extension in Visual Studio Code
Right-click the error and change the default workspace compiler to local or localNodeModue

See this Stack Overflow answer for more context

The first thing we’ll do is code our smart contract. We’ll be using the OpenZeppelin library and making some slight modifications to it. OpenZeppelin is a well tested and audited smart contracts library so we can leverage the level of security in their contracts.

Counters is used to keep track of how many token IDs we’ve created and ERC721URIStorage is what allows us to store the URL that will be pointing to our NFT data. So the actual image in a JPEG NFT isn’t stored on the blokchain but the URL pointing to that JPEG is stored on-chain.

You can see the ERC721 OpenZeppelinimplementation to see how this logic works and compare it to the ERC20 implementation. For example, see the different implementations of balanceOf (ER721, balanceOf in ERC20) or transfer (ERC20, ERC721).

Next, we will simply set the tokenURI for our NFT and emit an event. Emitting an event is useful because it allows us to query the transaction logs and can allow for us to easily index NFT creation events to tools like The Graph.

Also, note that in the original tutorial, the NFT would give the contract permission to transfer the NFT. We’ve removed this code [commit] to decouple the NFT contract from the marketplace contract. Now, once the NFT has been minted, the owner is able to maintain full ownership of their NFT and can decide to list it on the marketplace or do with it as we see fit.

Adding Smart Contract Tests

Due to the immutable and financial nature of smart contracts, testing is extra important. We all know that testing is important, but in smart contract development, it’s especially true.

Create a new file and create some basic tests for your NFT contracts. While this is a pretty simple NFT and we are mostly using OpenZeppelin’s library, it’s good to get into the habit of writing tests and writing tests also help you understand your code better and can often be a very effective form of documentation.

Create a new file called test/contracts/NFT.test.js and add the following:

// import ethers is not mandatory since its globally available but adding here to make it more explicity and intuitive
const { expect } = require("chai");
const { ethers } = require("hardhat");

const DEFAULT_URI = "https://www.mytokenlocation.com";
describe("NFT", function() {

  let NFT, nft,nftContractAddress, ownerSigner, secondNFTSigner;

  before(async function() {
    /* deploy the NFT contract */
    NFT = await ethers.getContractFactory("NFT")
    nft = await NFT.deploy();
    await nft.deployed()
    nftContractAddress = nft.address;
    /* Get users */
    [ownerSigner, secondNFTSigner, ...otherSigners] = await ethers.getSigners();

  })

  describe("createToken", function() {
    it("Emit NFTMinted event", async function() {
        await expect(nft.connect(ownerSigner).createToken(DEFAULT_URI)).to.emit(nft, 'NFTMinted').withArgs(1, DEFAULT_URI);

    })
    it("Should update the balances", async function() {

        await expect(() => nft.connect(ownerSigner).createToken(DEFAULT_URI))
          .to.changeTokenBalance(nft, ownerSigner, 1);

        await expect(() => nft.connect(secondNFTSigner).createToken(DEFAULT_URI))
          .to.changeTokenBalance(nft, secondNFTSigner, 1);

    })
  })
})

In the before block we will be using the ethers library to allow us to “deploy” our contract to the blockchain. Then we will use ethers.getSigners() to get access to a series of accounts that can be used to represent real users.

The most important thing we want to check in these tests is that the NFT event is emitted and that the token balances changes. Fortunately, we can use the Ethereum Waffle package to abstract a lot of tests such as changeTokenBalances .

You can see in this commit [TODO] how much simpler such abstractions can make your tests.

Interestingly that test works for both ERC721 NFTs and ERC20 tokens (it even counts one ERC721 token as 1 wei in the error logs). This is possible because it calls balanceOf, which is implemented in both specifications as I mentioned earlier.

Marketplace Smart Contract

The marketplace smart contract is a bit more complex because it’s doing a lot more custom functions that are not already implemented in OpenZeppelin.

You can copy the entire smart contract code from here. I will simply show the concepts and code that are different from Nader’s tutorial.

If you want more context on the other pieces of the smart contract see Nader’s NFT marketplace tutorial blog post or video tutorial

At a high level, this marketplace allows you to do a few things

List an item for sale
Sell an item
Buy an item
Unlist the item

Going a bit deeper, the selling and buying process is a bit different from Nader Dabit’s tutorial in the following ways:

A seller has the ability to unlist an item
Instead of paying a listing fee, the marketplace charges a 2.5% commission
When the sale is made, the seller’s revenue and the market commission is sent to a credits table which both users can call to withdraw the money from.

Let’s unpack each one starting with the simplest one, unlisting an item:

Unlisting a Market Item

/* Unlists an item previously listed for sale and transfer back to the seller */
  function unListMarketItem(
    address nftContract,
    uint256 itemId
  ) public payable nonReentrant {

    require(msg.sender == idToMarketItem[itemId].seller, "Only seller may unlist an item");
    uint tokenId = idToMarketItem[itemId].tokenId;
    IERC721(nftContract).transferFrom(address(this), msg.sender, tokenId);
    idToMarketItem[itemId].owner = payable(msg.sender);

  }

The unlisting process first verifies that the user making the unlisting call is the same user that sold the NFT.

Then the IERC721 Interface wrapper is used to get access to the methods of another smart contract and we call the transferFrom method to return the NFT back to the sender.

This is possible because when we first list the NFT on the market, we will call setApprovalForAll which will give the market permission to transfer any of the tokens created by nftContract .

Then we set the smart contract owner back to the person who unlisted the items.

Note: this means that a given tokenId can exist in the idToMarketItem mapping multiple times. If you want to fetch what items are currently available for sale then you will filter by items in idToMarketItem that have the owner set to the smart contract.

Creating a Market Sale

This marketplace pays based on a commission instead of a flat fee. I will explain the economic and financial reasons why I coded it this way here then walk through the code implementation.

The Benefits of Percentage Commission

I prefer the idea of a percentage-based commission model because it dynamically changes based on the value of the item being sold and it works across different chains. For example, suppose a smart contract set the listing fee to 1 MATIC in the base currency (10^18 wei). That would be $0.638 USD in Matic but $1787.80 in ETH as of today’s price (May 29, 2022, 3:30 PM EST). You would have to change the listing fee for each contract and update it over time. While a percentage fee doesn’t need to be updated as often. You also don’t know if that listing fee is too little or too expensive for a given user.

*Note that all EVM compatible chains use the term “ether” in their smart contracts and in libraries like ethers.js but this doesn’t mean ETH, it could also mean BNB, MATIC etc.

Artist Royalties

There are also interesting proposals to add a royalty fee to the NFT itself in EIPS-2981. This would allow the NFT owner to receive a lifetime royalty even when other sell the NFT. Note that this implementation would depend on marketplaces agreeing to follow the specification since there is no way to differentiate between a transfer that doesn’t require a royalty and a sale which requires a royalty.

Marketplace smart Contract Code Walkthrough

Let’s walk through the different parts of the code.

Important: This code makes the assumption thatthe IERC721(nftContract).transferFrom() is a safe function call. We will probably need to add validation that ensures this is actually true. See this issue for more context.


/**
    Credit the given address, using a "pull" payment strategy.
    https://fravoll.github.io/solidity-patterns/pull_over_push.html
    https://docs.openzeppelin.com/contracts/2.x/api/payment#PullPayment 
  */
  function _allowForPull(address receiver, uint amount) private {
      credits[receiver] += amount;
  }

function withdrawCredits() public {
      uint amount = credits[msg.sender];

      require(amount > 0, "There are no credits in this recipient address");
      require(address(this).balance >= amount, "There are no credits in this contract address");

      credits[msg.sender] = 0;

      payable(msg.sender).transfer(amount);
  }

/* Creates the sale of a marketplace item */
  /* Transfers ownership of the item, as well as funds between parties */
  function createMarketSale(
    address nftContract,
    uint256 itemId
    ) public payable nonReentrant {
    uint price = idToMarketItem[itemId].price;
    uint tokenId = idToMarketItem[itemId].tokenId;

    // uses the check-effects-interactions design patter. Check if sale can be made. Do the effects of the sale, then perform the sale interactions.
    // make external transfer call last.
    // https://fravoll.github.io/solidity-patterns/checks_effects_interactions.html

    require(idToMarketItem[itemId].owner == address(this), "This item is not available for sale");
    require(msg.value == price, "Please submit the asking price in order to complete the purchase");

    address seller = idToMarketItem[itemId].seller;
    // use basis points and multiply first before dividng because solidity does not support decimals
    // https://ethereum.stackexchange.com/a/55702/92254
    // https://stackoverflow.com/a/53775815/5405197
    uint marketPayment = (price * salesFeeBasisPoints)/basisPointsTotal;
    uint sellerPayment = price - marketPayment;

    // use the pull payment strategy. See function documentation for _allowForPull for more information on how this works
    // note: the funds go from the seller to the contract automatically due to msg.value 
    // we don't need to call payable(address(this)).transfer(amount);
    _allowForPull(seller, sellerPayment);
    idToMarketItem[itemId].owner = payable(msg.sender);
    idToMarketItem[itemId].sold = true;
    _itemsSold.increment();
    _allowForPull(payable(owner), marketPayment);
// NOTE! This code makes the assumption thatthe IERC721(nftContract).transferFrom() is a safe function call.
    IERC721(nftContract).transferFrom(address(this), msg.sender, tokenId);
  }

Prevent Reentrancy attacks

The first thing we have is the nonReentrant modifier. This is to prevent reEntrancy attacks:

A Reentrancy attack occurs when the attacker drains funds from the target by recursively calling the target's withdraw function
. When the contract fails to update its state, a victim's balance, prior to sending funds, the attacker can continuously call the withdraw function to drain the contract's funds.

Source: Reentrancy Vulnerability Identification in Ethereum Smart Contracts

The most famous example of reentrancy attacks is The DAO which resulted in over $150 million being stolen. My favourite recollection of that attack is Laura Shin’s The Cryptopians todo.

This guard, which we inherit from contract NFTMarket is ReentrancyGuard { and OpenZeppelin’s ReentrancyGuard prevents that attack.

For more on reentrancy attacks see:

Check Effects Interaction

The following pieces of code are going to follow the check-effects-interaction pattern. This is another recommendation in Solidity best practices for writing good Solidity code. It essentially ensures that all the correct changes are made internally before making any external changes.

The checks, in the beginning, assure that the calling entity is in the position to call this particular function (e.g. has enough funds). Afterwards, all specified effects are applied and the state variables are updated. Only after the internal state is fully up to date, external interactions should be carried out.

Source: Check Effects Interactions

Check if something can happen:
1. require(idToMarketItem[itemId].owner == address(this), "This item is not available for sale");
2. require(msg.value == price, "Please submit the asking price in order to complete the purchase");
Perform the internal state effects of that interaction:
1. address seller = idToMarketItem[itemId].seller;
2. _allowForPull(seller, sellerPayment);
3. etc.
Perform the external interactions
1. IERC721(nftContract).transferFrom(address(this), msg.sender, tokenId);

A combination of a reentrancy guard and using the check-effects-interaction pattern might have prevented such an attack from happening.

Prefer Pull vs Push Payments

Finally, when a sale is made, instead of transferring the money to an address, we credit the address for the amount of the sale:allowForPull(address, amount) . Later, the address can withdraw that credit: withdrawCredits(). This follows the pull over push Solidity pattern.

First, transferring ether to an untrusted wallet could present a security risk because the address might have malicious code that exploits your smart contract when you call it.

Secondly, the contract may run out of gas and be unable to pay the users on a sale. This shifts the burden of payment unto the hser. Note that this does come with a high cost of adding more burden to users. Makoto Inoue has a fascinating story about an event smart contract he wrote and managing the tradeoffs between making something secure and making something usable.

That covers the bulk of the relevant smart contract code. Next, let’s write tests.

More resources on Smart Contracts

There’s a lot more to learn about smart contract developments. Here are some relevant sources:

Adding Marketplace Smart Contract Tests

The test file is even longer than the smart contracts file, which you can find here: [TODO link to marketplace smart contract]

Create a test/contracts/NFTMarket.test.js file and create some basic variables

const { expect } = require("chai");
const { ethers } = require("hardhat");

const { BigNumber } = ethers;

const auctionPriceInEth = '1.5';
const auctionPrice = ethers.utils.parseUnits(auctionPriceInEth, 'ether');

Define a before block where we deploy our NFT and market contract. Theoretically, in a Unit test, we should only be testing the market contract because the market should also work with other NFTs. This also assumes that the smart contracts we are creating have the same functions that we are using in our tests.

This is actually one benefit of having the NFT coupled with the Market in the other impelemtation. It guarantees that any NFT created here will have the requisite functions. Such as transfer from.

before(async function() {
    /* deploy the marketplace */
    Market = await ethers.getContractFactory("NFTMarket")
    market = await Market.deploy()
    await market.deployed()
    marketAddress = market.address
    marketSigner = market.provider.getSigner(marketAddress);

    /* deploy the NFT contract */
    NFT = await ethers.getContractFactory("NFT")
    nft = await NFT.deploy();
    nft.setApprovalForAll(marketAddress, true);
    await nft.deployed()
    nftContractAddress = nft.address;
    /* Get users */
    [ownerSigner, sellerSigner, buyerSigner, ...otherSigners] = await ethers.getSigners();


  })

Next we’ll test three things

describe("createMarketSale", function() {

    it("Should update the seller and contract token balances when listing item for sale", async function() {

      let createNFTPromise = nft.connect(sellerSigner).createToken("https://www.mytokenlocation.com");
      const tokenId = await getTokenIdOrItemIdFromTransaction(createNFTPromise);
      await nft.connect(sellerSigner).setApprovalForAll(marketAddress, true);


      await expect(() => market.connect(sellerSigner).createMarketItem(nftContractAddress, tokenId, auctionPrice),
       "The seller token balance should decrease by 1 and the market balance should increase by 1")
      .to.changeTokenBalances(nft, [sellerSigner, marketSigner], [-1, 1]);

    })

    it("Should update the buyer and contract token balances when an item is sold", async function() {

      let { tokenId } = await createTokenAndMarketItem(sellerSigner);
      const { itemId } = await getMarketItemIdFromTokenId(tokenId);

      await expect(() => market.connect(buyerSigner).createMarketSale(nftContractAddress, itemId, { value: auctionPrice}))
      .to.changeTokenBalances(nft, [buyerSigner, marketSigner, sellerSigner], [1, -1, 0]);

    })

    it("Should update the buyer and contract ether balances on sale", async function() {

      let { tokenId } = await createTokenAndMarketItem(sellerSigner);
      const { itemId } = await getMarketItemIdFromTokenId(tokenId);

      const negativeAuctionPrice = ethers.utils.parseUnits(`-${auctionPriceInEth}`, 'ether');

      await expect(() => market.connect(buyerSigner).createMarketSale(nftContractAddress, itemId, { value: auctionPrice}),
      `The buyer's ether balance should decrease by the auction price: ${auctionPriceInEth} while the contract's ether balance increases by the auction price.`)
      .to.changeEtherBalances([buyerSigner, marketSigner], [negativeAuctionPrice, auctionPrice]);

    })

  })

The 3 things we’re testing here is:

When an item is listed. Seller's token balance should decrease and market’s token balance should increase.
When an item is sold. Market token balance should decrease and buyer’s token balance should increase.
When an item is sold. Market token balance should decrease and buyer’s token balance should increase.

We’ll also define 3 helper functions inside describe("NFTMarket", that will allow us to easily create tokens and list them for sale:

/**
   * Parse the transaction logs to get the tokenId returned from the function call
   * @param {*} transactionPromise 
   * @returns 
   */
   async function getTokenIdOrItemIdFromTransaction(transactionPromise) {
    transactionPromise = await transactionPromise;
    const transaction = await transactionPromise.wait()
    const event = transaction.events[0];
    let value = event.topics[3]
    value = BigNumber.from(value)
    // We usually shouldn't convert BigNumber toNumber() but this is okay since we don't expect the tokenId or itemId to be very large in our tests
    return value.toNumber()
  }

  /**
   * Reading the itemId from the transaction result is causing potential race conditions where tests pass in isolation
   * but fail when run together in the test suite.
   * To solve this, this helper function was created to get the item ID from the smart contract when it's needed.
   * @param {*} tokenId 
   * @param {*} returnSoldItems 
   * @returns 
   */
  async function getMarketItemIdFromTokenId(tokenId, returnSoldItems = false) {
    let marketItems = (await market.fetchMarketItems());
    return marketItems.find(item=> returnSoldItems ? item.sold : !item.sold && BigNumber.from(tokenId).eq(item.tokenId));
  }

  async function createTokenAndMarketItem(signer) {

    let createNFTPromise = nft.connect(signer).createToken("https://www.mytokenlocation.com");
    const tokenId = await getTokenIdOrItemIdFromTransaction(createNFTPromise);

    await nft.connect(signer).setApprovalForAll(marketAddress, true);

    const createMarketItemPromise = market.connect(signer).createMarketItem(nftContractAddress, tokenId, auctionPrice);
    const itemId = await getTokenIdOrItemIdFromTransaction(createMarketItemPromise);

    return {
      tokenId,
      itemId
    }
  }

Now you can run npx hardhat test

Deploying Smart Contract

Remember the goal of this platform is to build a multi-chain NFT platform. This means that we want to be able to add new chains to our contract without doing a lot of additional work. To do this, we will replace the traditional hardhat scripts with a hardhat task.

First, we create a scripts/helpers.js file that will contain our helper functions and we’ll move the hardhat settings from hardhat.config.js to our scripts/helpers.js file so that the task can use these hardHatSettings:

Creating a Deployment Task

The goal of the deployment task is to allow us to deploy our smart contract to any EVM compatible chain simply by providing a chainID argument. Then, src/config-chains.json will be updated with the new smart contract addresses and our pages will automatically reload.

In the current implementation of deploy.js, we need to update our code for each new contract. Now we can deploy to a specific chain or deploy only the Marketplace or NFT contract:

npx hardhat deploy --chain-id 4 or npx hardhat deploy:nft --chain-id 4

See the Opensea NFT minting tutorial for more instructions on deploying the smart contract.

// scripts/deploy.js

// We require the Hardhat Runtime Environment explicitly here. This is optional
// but useful for running the script in a standalone fashion through `node <script>`.
//
// When running the script with `npx hardhat run <script>` you'll find the Hardhat
// Runtime Environment's members available in the global scope.
// const hre = require("hardhat");
const { task } = require("hardhat/config");
const fs = require('fs');
const { getAvailableChains, chainConfigFilePath, getAccount } = require("./helpers");

task("deploy:nft", "Deploys the NFT.sol contract")
.addParam("chainId", "The Chain ID of the blockchain where this contract will be deployed.")
.setAction(async function (taskArguments, hre) {

  const availableChains = getAvailableChains();
  const { chainId } = taskArguments;

  if (!(chainId in availableChains)) {
    // characters at the beginning to make error print in a different color
    // https://stackoverflow.com/a/41407246/5405197
    let chainsForPrinting = {};
    Object.values(availableChains).forEach(chain=>{chainsForPrinting[chain.CHAIN_ID]= `${chain.CHAIN_NAME} (${chain.NETWORK_NAME})`});
    chainsForPrinting = JSON.stringify(chainsForPrinting, null, 4);

    console.error("\x1b[31m%s\x1b[0m", `Invalid chainId: ${chainId}.\nPlease select one of the following:\n${chainsForPrinting}`);
    process.exit(1);
  }
  const account = getAccount(chainId);
  let NFT;
  if (account) {
    NFT = await hre.ethers.getContractFactory("NFT", account);
  } else {
    NFT = await hre.ethers.getContractFactory("NFT");
  }

  const nft = await NFT.deploy();
  await nft.deployed();

  availableChains[chainId].NFT_ADDRESS = nft.address.toLowerCase();
  fs.writeFileSync(chainConfigFilePath, JSON.stringify(availableChains, null, 4));

  const chainConfig = availableChains[chainId];
  console.log("\x1b[32m%s\x1b[0m", `NFT deployed to ${chainConfig.CHAIN_NAME} (${chainConfig.NETWORK_NAME}): ${chainConfig.NFT_ADDRESS}`);
  console.log("\x1b[32m%s\x1b[0m", `View in block explorer: ${chainConfig.BLOCK_EXPLORER_URL}/address/${chainConfig.NFT_ADDRESS}`);

});

task("deploy:market", "Deploys the Market.sol contract")
.addParam("chainId", "The Chain ID of the blockchain where this contract will be deployed.")
.setAction(async function (taskArguments, hre) {

  const availableChains = getAvailableChains();
  const { chainId } = taskArguments;

  if (!(chainId in availableChains)) {
    let chainsForPrinting = {};
    Object.values(availableChains).forEach(chain=>{chainsForPrinting[chain.CHAIN_ID]= `${chain.CHAIN_NAME} (${chain.NETWORK_NAME})`});
    chainsForPrinting = JSON.stringify(chainsForPrinting, null, 4);

    console.error("\x1b[31m%s\x1b[0m", `Invalid chainId: ${chainId}.\nPlease select one of the following:\n${chainsForPrinting}`);
    process.exit(1);
  }

  const account = getAccount(chainId);
  let NFTMarket;
  if (account) {
    NFTMarket = await hre.ethers.getContractFactory("NFTMarket", account);
  } else {
    NFTMarket = await hre.ethers.getContractFactory("NFTMarket");
  }
  const nftMarket = await NFTMarket.deploy();
  await nftMarket.deployed();

  availableChains[chainId].NFT_MARKETPLACE_ADDRESS = nftMarket.address.toLowerCase();
  fs.writeFileSync(chainConfigFilePath, JSON.stringify(availableChains, null, 4));

  const chainConfig = availableChains[chainId];
  console.log("\x1b[32m%s\x1b[0m", `NFTMarket deployed to ${chainConfig.CHAIN_NAME} (${chainConfig.NETWORK_NAME}): ${chainConfig.NFT_MARKETPLACE_ADDRESS}`);
  console.log("\x1b[32m%s\x1b[0m", `View in block explorer: ${chainConfig.BLOCK_EXPLORER_URL}/address/${chainConfig.NFT_MARKETPLACE_ADDRESS}`);

});

task("deploy", "Deploys the Market.sol and NFT.sol contract")
.addParam("chainId", "The Chain ID of the blockchain where this contract will be deployed.")
.setAction(
  async (taskArgs, hre) => {
    await hre.run("deploy:market", taskArgs);
    await hre.run("deploy:nft", taskArgs);
  }
);

// scripts/helpers.js
const { ethers } = require("ethers");
const fs = require('fs');
const { CONTRACT_DEPLOYMENT_WALLET_PRIVATE_KEY, INFURA_API_KEY} = process.env;

const chainConfigFilePath = './src/config-chains.json';
function getAvailableChains() {
    let chainConfigRaw = fs.readFileSync(chainConfigFilePath);

    let chainConfigs = JSON.parse(chainConfigRaw);
    return chainConfigs
}

const hardHatSettings = {
    networks: {
        rinkeby: {
          url: `https://rinkeby.infura.io/v3/${INFURA_API_KEY}`,
          accounts: [`0x${CONTRACT_DEPLOYMENT_WALLET_PRIVATE_KEY}`],
          chainId: 4
        },
        bsctestnet: {
          url: `https://data-seed-prebsc-1-s1.binance.org:8545`,
          accounts: [`0x${CONTRACT_DEPLOYMENT_WALLET_PRIVATE_KEY}`],
          chainId: 97
        },
    }
};

// Helper method for fetching a connection provider to the Ethereum network
function getNetworkSetting(chainId) {
    return Object.values(hardHatSettings.networks).find(chainSettings => chainSettings.chainId == chainId);
}

// Helper method for fetching a connection provider to the Ethereum network
function getProvider(chainId) {
    const hardhatChainNetwork = getNetworkSetting(chainId);
    return ethers.getDefaultProvider(hardhatChainNetwork?.url);
}

// Helper method for fetching a wallet account using an environment variable for the PK
function getAccount(chainId) {

    const hardhatChainNetwork = getNetworkSetting(chainId);
    if (!hardhatChainNetwork) {
        console.error("\x1b[33m%s\x1b[0m", `No matching chainId found for network: '${chainId}', using localhost.`);
        return null
    }
    return new ethers.Wallet(hardhatChainNetwork? hardhatChainNetwork.accounts[0]:"", getProvider(chainId));
}

module.exports = {
    getAvailableChains,
    chainConfigFilePath,
    hardHatSettings,
    getProvider,
    getAccount,
    getNetworkSetting
}

/* hardhat.config.js */
const { hardHatSettings } = require("./scripts/helpers.js");

require("@nomiclabs/hardhat-waffle");
require("./scripts/deploy.js");

module.exports = {
  solidity: {
    version: "0.8.4",
    settings: {
      optimizer: {
        enabled: true,
        runs: 200
      }
    },
  },
  paths: {
    artifacts: './src/artifacts',
  },
  defaultNetwork: "hardhat",
  networks: hardHatSettings.networks,
}

Loading environment variables

To load the environment variables we will create a .env file and add the following values:

export CONTRACT_DEPLOYMENT_WALLET_PRIVATE_KEY=""
export INFURA_API_KEY=""

Note that these files have been removed from version control via the .gitignore file [todo link] so we don’t have to worry about committing our API key.

Then we can load them to our environment variables:

source .env

Getting Test Crypto from a faucet

Before we can deploy we’ll need some money, we can get some from any of the following faucets. Note that faucets frequently go down so you might have to search for “chain faucet” and try different results.

Ethereum Rinkeby
Binance Testnent
- https://testnet.binance.org/faucet-smart
Polygon Testnet
- https://faucet.polygon.technology/

Adding Blockchains to your Metamask

Go to the relevant block explorer and click Add [Network Name] at the bottom right of the page.
- https://testnet.bscscan.com/
- https://mumbai.polygonscan.com/
- Rinkeby is already on most networks by default

Deploy the smart contract

# Deploy to Ethereum’s Rinkeby testnet 

npx hardhat deploy --chain-id 4 

#Deploy to Binance Smart Chain’s Testnet

npx hardhat deploy --chain-id 97

# If we want to only deploy just the nft or market

npx hardhat deploy:nft --chain-id 4` or `npx hardhat deploy:market --chain-id 4

If your deploy task is not working, use the default deploy script

If the deploy task is not working, use the old school deploy script: npx hardhat run --network polygon scripts/deploy.js

// scripts/deploy-hardhat.js

// If the deploy task is not working use the old school deploy script
// npx hardhat run --network polygon scripts/deploy-hardhat.js
// We require the Hardhat Runtime Environment explicitly here. This is optional
// but useful for running the script in a standalone fashion through `node <script>`.
//
// When running the script with `npx hardhat run <script>` you'll find the Hardhat
// Runtime Environment's members available in the global scope.
const hre = require("hardhat");
const fs = require('fs');

// enter the CHAIN ID you want to deploy to here
// TODO make this a task so it can be passed as a command line argument
//  - https://stackoverflow.com/questions/69111785/hardhat-run-with-parameters
// - https://hardhat.org/guides/create-task.html
const chainID = "97";

async function main() {

const chainConfigFilePath = './src/config-chains.json';
let chainConfigRaw = fs.readFileSync(chainConfigFilePath);

let chainConfig = JSON.parse(chainConfigRaw);

  if (!chainID) {
    console.error("Chain ID must be set in scripts/deploy.js");
    process.exit(1)
  }

  if (!chainConfig[chainID]) {
    console.error(`Invalid Chain ID found: ${chainID}. Valid Chain IDs include: ${Object.keys(chainConfig)}`);
    process.exit(1)
  }

  const NFTMarket = await hre.ethers.getContractFactory("NFTMarket");
  const nftMarket = await NFTMarket.deploy();
  await nftMarket.deployed();
  chainConfig[chainID].NFT_MARKETPLACE_ADDRESS = nftMarket.address;

  console.log("NFT_MARKETPLACE_ADDRESS deployed to:", nftMarket.address);
  console.log("\x1b[32m%s\x1b[0m", `View in block explorer: ${chainConfig[chainID].BLOCK_EXPLORER_URL}/address/${chainConfig[chainID].NFT_MARKETPLACE_ADDRESS}`);
  fs.writeFileSync(chainConfigFilePath, JSON.stringify(chainConfig, null, 4))

  const NFT = await hre.ethers.getContractFactory("NFT");
  const nft = await NFT.deploy();
  await nft.deployed();
  chainConfig[chainID].NFT_ADDRESS = nft.address;

  console.log("NFT_ADDRESS deployed to:", nft.address);
  console.log("\x1b[32m%s\x1b[0m", `View in block explorer: ${chainConfig[chainID].BLOCK_EXPLORER_URL}/address/${chainConfig[chainID].NFT_ADDRESS}`);

  fs.writeFileSync(chainConfigFilePath, JSON.stringify(chainConfig, null, 4))
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

Adding more blockchains

To see how easy it is to add another blockchain. Let’s add the Polygon Mumbai chain. Add the following to your scripts/helpers.js and

// scripts/helpers.js
const hardHatSettings = {
    networks: {
        mumbai: {
          url: `https://polygon-mumbai.infura.io/v3/${rpcApiKeyMumbai}`,
          accounts: [`0x${CONTRACT_DEPLOYMENT_WALLET_PRIVATE_KEY}`],
          chainId: 80001
        },
//...

Add the following tosrc/config-chains.json

"80001": {
        "NETWORK_NAME": "Mumbai",
        "CHAIN_NAME": "Polygon",
        "CURRENCY_SYMBOL": "MATIC",
        "NFT_MARKETPLACE_ADDRESS": "0x290541B82B151cDC05eA1aF04fe74f6d7633ccDC",
        "NFT_ADDRESS": "0x5216962D1308AA3de2e89c969dacc1B2F798EaB5",
        "IS_MAIN_NET": false,
        "LOGO_URL": "https://brandlogovector.com/wp-content/uploads/2021/12/Polygon-Crypto-Icon-Logo-Small.png",
        "CHAIN_ID": "80001",
        "BLOCK_EXPLORER_URL": "https://mumbai.polygonscan.com",
        "RPC_PROVIDER_URL": "https://matic-mumbai.chainstacklabs.com"
    },

Deploy your new chain (make sure you’ve gotten faucet funds for that chain using the steps outlined above):

npx hardhat deploy --chain-id 80001

That’s it! Your react app should automatically reload and you will now see the new chain in your application.

Adding the frontend

For this tutorial, we’ll implement three components and two pages. The code needed for those files will be mentioned in the following links.

CreateNFT and Gallery [TODO don’t use Moralis, just read from the blockchain]

We will also neeed to create three components CryptoPrice, CryptoPriceEdit and NFTCard and NFTCard.scss.

Don’t forget to import all missing code which you can also find from this blob.

Page Components

You can copy-paste the following code snippets and put them in src/components

Displaying Price in Crypto and Fiat

Why do we need CryptoPrice.tsx and CryptoPriceEdit.tsx?

Most people still use currencies like USD as a unit of measurement to intuitively understand how much something costs. So I always display a US cost alongside any crypto costs. As a quick fix, we can hardcode the price of a currency in USD. A future implementation would get this information dynamically from an API and perhaps cache it to local storage.

Create NFT Page

async function onChange(e: any) {
    const file = e.target.files[0];
    // setFileUrl("https://atila.ca/static/media/atila-upway-logo-gradient-circle-border.bfe05867.png");
    // return;
    try {
      const added = await client.add(
        file,
        {
          progress: (progressValue: any) => console.log(`received: ${progressValue}`)
        }
      )
      const url = `https://ipfs.infura.io/ipfs/${added.path}`
      setFileUrl(url)
    } catch (error) {
      console.log('Error uploading file: ', error);
      setError(JSON.stringify(error));
    }  
  }

When you create an NFT you will be uploading it to IPFS to make the storage mroe distributed so it’s not just stored on one s.

Then we create the NFT:

async function _createNFT(activeChainId: string) {

    const activeChain = new Chain({...CONFIG_CHAINS[activeChainId]});
    const url = await getNFTMetadataUrl();

    if (!url) {
      setCreateNFTResponseMessage({
        ...createNFTResponseMessage,
         [activeChain.CHAIN_ID]: {
           type: "error",
           message: "Missing NFT url data. Try reuploading your NFT or refreshing the page.",
         }
         });
        return
    }
    const web3Modal = new Web3Modal()
    const connection = await web3Modal.connect()
    const provider = new ethers.providers.Web3Provider(connection)    
    const signer = provider.getSigner()

      if (window.ethereum.networkVersion !== activeChainId) {
        setError("Switch to the correct chain and try again");
        // switch to the correct network
        await window.ethereum.request({
        method: "wallet_switchEthereumChain",
        params: [{
            chainId: `0x${(Number.parseInt(activeChain.CHAIN_ID)).toString(16)}`,
        }]
      });
        return;
      } else {
        setError("");
      }


      const NFT_ADDRESS = activeChain.NFT_ADDRESS;

      /* next, create the item */
      const updatedcreateNFTResponseMessage = {...createNFTResponseMessage};
      updatedcreateNFTResponseMessage[activeChain.CHAIN_ID] = {
        message: `Minting NFT on ${activeChain.getChainFullName()}`,
        type: "info",
        loading: true,
      };
      setCreateNFTResponseMessage(updatedcreateNFTResponseMessage);
      try {

        let nftContract = new ethers.Contract(NFT_ADDRESS, NFT.abi, signer)
        let mintTransactionPromise = await nftContract.createToken(url)
        let mintTransaction = await mintTransactionPromise.wait()
        let event = mintTransaction.events[0]
        let value = event.args[2]
        let tokenId = value.toNumber();

        console.log({mintTransaction, url});
        const { name, description } = formInput
        const createdNFT: NFTMetadata = {
          name,
          description,
          image: fileUrl || "",
          // url,
          tokenId,
          // tokenAddress: activeChain.NFT_ADDRESS,
          chainId: activeChain.CHAIN_ID,
          // chain: activeChain,
          // mintTransaction,
        }

        const updatedCreatedNFTs = [...createdNFTs];

        updatedCreatedNFTs.push(createdNFT);
        setCreatedNFTs(updatedCreatedNFTs);
        setCreateNFTResponseMessage({
          ...updatedcreateNFTResponseMessage,
           [activeChain.CHAIN_ID]: {
             type: "success",
             message: `Finished creating NFT on ${activeChain.getChainFullName()}`,
           }
           });
      } catch (error: any) {
        console.log(error);
        setCreateNFTResponseMessage({
          ...updatedcreateNFTResponseMessage,
           [activeChain.CHAIN_ID]: {
             type: "error",
             message: error.message || JSON.stringify(error),
           }
           });
      }


  }

Let’s explain what’s happening here:

const web3Modal = new Web3Modal()
const connection = await web3Modal.connect()
const provider = new ethers.providers.Web3Provider(connection)    
const signer = provider.getSigner()

We use Web3Modal to support different crypto browser extensions so it should work with Metamask, Coinbase Wallet, WalletConnect etc. Then we connect the crypto browser extension to our account signer.

It’s usually at this point that anyone visiting your website for the first time will see a brower extension on Metamask popup. Generally, this isn’t actually a good UX pattern. Anytime you request permsssion to do anything, you should give context and the user should iniaitate the request. But for learning purposes, we can leave it like this for now.

if (window.ethereum.networkVersion !== activeChainId) {
        setError("Switch to the correct chain and try again");
        // switch to the correct network
        await window.ethereum.request({
        method: "wallet_switchEthereumChain",
        params: [{
            chainId: `0x${(Number.parseInt(activeChain.CHAIN_ID)).toString(16)}`,
        }]
      });
        return;
      } else {
        setError("");
      }

Then we create the token:

import NFT from '../../artifacts/contracts/NFT.sol/NFT.json';
// ...

let nftContract = new ethers.Contract(NFT_ADDRESS, NFT.abi, signer)
let mintTransactionPromise = await nftContract.createToken(url)
let mintTransaction = await mintTransactionPromise.wait()
let event = mintTransaction.events[0]
let value = event.args[2]
let tokenId = value.toNumber();

This works by connecting to the NFT smart contract we created earlier using something called an application Binary Interace NFT.abi

Recall the smart contract we created earlier:

// contracts/NFT.sol
function createToken(string memory tokenURI) public returns (uint) {
        _tokenIds.increment();
        uint256 newTokenId = _tokenIds.current();
        _mint(msg.sender, newTokenId);
        _setTokenURI(newTokenId, tokenURI);
        emit NFTMinted(newTokenId, tokenURI);
        return newTokenId;
    }

We can also access the return value using the mintTransaction response.

Listing an NFT for sale

Next, we will list one of our NFTs for sale. We will implement this functionality inside the src/components/NFTCard.tsx component.

This logic is the same as minting an NFT, however, in order to sell the NFT to the buyer, we need to give the marketplace permission to transfer our NFT to themselves and then to the owner.

signer = await getSigner()
const nftContract = new ethers.Contract(activeChain.NFT_ADDRESS, NFT.abi, signer);
const signerAddress = await signer.getAddress()
const isApprovedForAll = await nftContract.isApprovedForAll(signerAddress, activeChain.NFT_MARKETPLACE_ADDRESS);

const marketContract = new ethers.Contract(activeChain.NFT_MARKETPLACE_ADDRESS, Market.abi, signer);

await marketContract.createMarketItem(activeChain.NFT_ADDRESS, nft.tokenId, price);

It’s also important to note that price is a BigNumber type. When working with crypto values, you’ll need to pay attention to when you’re using a number vs BigNumber or even a string . Personally, I’ve found that you should always use a BigNumber for as long as possible. Only converting to a number or string when you need to display a value to a user.

Buying an NFT

Once you’ve implemented a few contract calls using ethers.js the pattern becomes familiar. Get a signer, connect to a contract, and then perform a function. First, we’ll need a Gallery to display all the NFT available for sale in the marketplace. [TODO add Gallery.tsx without Moralis]

To get the list of items for sale we’ll be querying the Smart Contract for the list of all Market Items usin the fetchMarketItems contract. This is an example of something that could be made more efficient using something like Graph Protocol. That can be a fun exercise for you to improve this project.

The full code is available here [TODO update NFTCard]

// .. parts of the code have been removed for brevity
const buyNFT = async  () => {

// ...
        signer = await getSigner()

        const marketContract = new ethers.Contract(activeChain.NFT_MARKETPLACE_ADDRESS, Market.abi, signer);
        const { price } = nft;

        await marketContract.createMarketSale(activeChain.NFT_ADDRESS, nft.itemId, { value: price});
       // ...

    };

This function has a new type of arguement.

await marketContract.createMarketSale(activeChain.NFT_ADDRESS, nft.itemId, { value: price});

The { value: price} argument is very special here and it’s what sends the eth to the smart contract and is accessed in the smart contract as [msg.value global variable](https://docs.soliditylang.org/en/develop/units-and-global-variables.html?highlight=msg.value#block-and-transaction-properties) (a good further explanation).

Withdrawing your Tokens

After you’ve created the tokens, you’ll want to be able to withdraw it into your account.

Create an [AccountSales](https://github.com/atilatech/arthouse/blob/6fa30541eaeec731325d4a7a53e2393304802ea9/src/components/AccountSales.tsx) component and put it inside the Gallery component.

Recall: the code you’ll be using is in the AccountSales link in the prevous line.

This also follows the smart contract pattern: Get a signer, connect to the contract, call a funtion.

This component has two separate functions that call the market smart contract. getBalance and withdrawCredits. There are lots of optimizations you could do to make this one call and maybe cache the value.

However, for learning purposes and simplicty, we’ve separated them.

// src/components/AccountSales.tsx
const getBalance = async (chainId :string) => {

        const activeChain = new Chain({...CONFIG_CHAINS[chainId]});
/...
        const activeSigner = await getSigner();
        const marketContract = new ethers.Contract(activeChain.NFT_MARKETPLACE_ADDRESS, Market.abi, activeSigner);

        const signerAddress = await activeSigner.getAddress()
        const addressCredits = await marketContract.getAddressCredits(signerAddress);
// ...
    }

const withdrawCredits = async (chainId :string) => {

        const activeChain = new Chain({...CONFIG_CHAINS[chainId]});

        const activeSigner = await getSigner();
        const marketContract = new ethers.Contract(activeChain.NFT_MARKETPLACE_ADDRESS, Market.abi, activeSigner);

        await marketContract.withdrawCredits();

        // in theory, the credits may not be zero and we should fetch the updated value from the blockchain
        // but for simplicity, we can assume that after withdrawing all credits the balance is zero.
        //Users can always trigger another get balance request if they want to see an updated balance.
        setChainCredits({
            ...chainCredits,
            [chainId]: BigNumber.from(0),
        })

    }

Putting it All Together

Now we’ll want to buy the NFT we listed for sale. If you want to truly understand the full market flow. I recommend you create 3 wallets.

Similar to what you did in your tests:

// import ethers is not mandatory since its globally available but adding here to make it more explicity and intuitive
// ...test/contracts/NFTMarket.test.js

describe("NFTMarket", function() {

  let Market, market, marketSigner, NFT, nft, ownerSigner, sellerSigner, buyerSigner, otherSigners;

  before(async function() {
// ...
    [ownerSigner, sellerSigner, buyerSigner, ...otherSigners] = await ethers.getSigners();


  })

Now you see why tests can be so useful?

Putting it All Together Diagram

Owner: This is the wallet that deployed the smart contract and receives the 2.5% commission on each sale.
Seller: This is the wallet that creates the NFT and lists it for sale
Buyer: This is the wallet that buys the NFT

Use a faucet as shown earlier or send eth to the additional accounts you need to fund them with enough money to perform the transactions. Then you can click on the token in the block explorer.

Here is a token that went through all these steps. You can also see this token’s transactions in the block explorer or on Opensea.

How to Start Coding in 2019

Tomiwa 😃 — Fri, 29 Mar 2019 15:52:52 +0000

One of the most valuable skills to learn in 2019 is learning how to code. Since the hardest part to any change you want to make in your life is usually starting, here is a very detailed step-by-step guide that teaches you exactly how to start learning how to code.

In this tutorial I will walk through the foundations of how to learn front end development, backend development and data science.

Table of Contents:

Introduction [0:29]
Why Coding is Important [0:45]
Understanding How You Learn and Why You Might Quit [2:55]
What Tools Should You Use To Code [4:20]
Types of Coding [5:20]
What Languages Should You Learn [6:50]
Front End Development [7:55]
Back End Development [13:00]
Data Science [18:30]
Putting it All Together [23:50]
General Advice [26:00]
Conclusion [28:10]

Watch on Youtube

See Slides on SpeakerDeck

Listen to Podcast on Spotify

Listen to Podcast on Itunes

Introduction

Coding is a large field that entails many different things and it can be overwhelming to know what branch to start with and what to learn next. So in addition to teaching how to start coding, I will also talk about what you should learn first, in what order should you learn things like frontend, backend and data science. How to learn in a way that you actually remember and understand what you’re doing and don’t lose motivation and quit.

Note, there is no one right way to do anything. But I’ve learnt that it’s annoying when you ask someone how to do X and they give you 3 different alternatives, but don’t commit and make a recommendation on which one to do. So I am going to write this article in an opinionated way by showing you different alternatives and telling you which one to pick. Again, there is no right way but at least we can spend less time debating between X and Y and spend more time actually building cool stuff.

Why Coding is Important

Software engineering is one of the few jobs I can think of that has both a good quality of life and it pays well. Most well paying jobs like investment banking or working on an oilfield, usually require you to work long hours in a high-stress environment. While jobs that typically have better work-life balance, like a teacher or accountant, also typically have modest salaires.

Glassdoor Salary for Google Software Engineer with No experience

If you get a software engineering job at a big tech company like Google, you can make about $120K base salary and $16k bonus with 0-1 years of experience. That means, straight out of university you can be making a six-figure salary! There are actually quite a few jobs where you can make six figures out of university but few companies offer the same work life balance, low stress environment as a software engineer at a big tech company.

We all know that money isn’t everything, allegedly. But programming can improve the quality of your life in a lot of other ways. Most importantly, it can give you a lot of freedom. You can learn how to use or write software that can make your life easier, ranging from gmail extensions to automate your email to scripts to help you get data on something you find interesting.

Even if you aren’t working at a big tech company. Learning programming can allow you to travel the world and work from anywhere while still writing code as a full time remote worker or a freelance developer.

If you have an idea for a software or service you want to build, instead of trying to convince or pay someone to help you build it, you can just go ahead and build it yourself.

Understanding How You Learn and Why You Might Quit

One of the biggest roadblocks for me when I first started programming was figuring out the best way to learn. I think the best way to learn coding and almost anything is by doing. Basically this means, thinking of something you want to build, finding a tutorial on how to do it then just follow the tutorial word for word. Once you feel comfortable with how things are working, you can start gradually adding more and more variations until you feel comfortable with what you have built.

Most problem solving nowadays is basically just thinking of a clever way to translate your problem into a google query that returns a useful result. You should also experiment and see if you learn better through written blog posts, books or videos. I recommend trying all three and see which method helps you learn new concepts the quickest.

A big part of learning how to learn, is understanding what prevents you from learning new things. A big part of this is losing motivation. A lot of my tips will have strategies that will keep you motivated and trick yourself into keep on learning, even (especially) when you feel like quitting.

What Tools Should You Use To Code

I think the best development machine is a Macbook Air. I myself have a 15 inch Macbook Pro because that’s what I had at my last internship and really enjoyed using it. But at my internship last summer, they gave me a Macbook Air, which is surprisingly quite powerful for development and very light so I recommend getting a 13 inch Macbook Air.

Now some of you already think I’m being very elitist/ blasé for suggesting you buy a $1200 laptop, which is obviously very expensive. Fortunately, for less than a quarter of the price of a Macbook, you can get this wonderful laptop called a Chromebook. Chromebooks are basically laptops running Chrome OS so most of the applications are running in the cloud via a web browser and you can use online IDEs like Cloud 9 to write code. I found one for $285 on Amazon and even a fancy touch screen one only costs $649. Even, if you don’t get a Chromebook. Check out cloud 9, it’s a very powerful tool.

Other than that, any laptop should be fine. I personally prefer unix based machines as I find Windows difficult to work with but to each their own, so just pick a laptop and get to work.

I strongly recommend using Github to save all your coding projects. Here is a very good tutorial on getting started with git and Github.

Types of Coding

There are many types of coding: web development, mobile app development, hardware programming etc. If you are a beginner, then you should probably start with either web development or mobile app development. I think you should start with web development because when you are just starting the most important thing is shipping quickly.

When you first start coding, it is very easy to get discouraged, distracted by installation and setup or be overwhelmed with all the different options. With web development you can write a simple web app and deploy it to a live url within minutes. You can also update very frequently, don’t have to worry about device specific features and can share what you’ve made with friends and family very quickly. This allows you to try new things quicker, thus learning quicker and see the fruits of your labor before you get discouraged.

I also think that we are moving from a mobile app world to a web app world. People don’t want to install another app, it’s hard to get discovered through app stores, you have to build for two devices etc. You can see this article for why web is better than mobile for most applications.

What Languages Should You Learn

Stack Overflow Most Popular Technologies 2018

I think the two languages you should learn are Javascript and Python. Starting with Javascript.

Javascript will be necessary for most front end web frameworks and Python is used frequently in backend and data science applications.

I generally break down software development into three phases. Front end, backend and data science. Two years ago, I would have just said frontend and backend engineering but I’ve noticed that data science is becoming an increasingly important part of every application we interact with. If you are just starting out I think the best place to start is by focusing on front end web development. By creating something that you can easily deploy, play with and show others, this will keep you motivated to keep learning more. There are also less set up steps and a lower learning curve than backend or data science.

Front End Development:

I learnt the hard way that the best way to start building is by taking something that already works and add your own modification instead of reinventing the wheel. So when building websites, I recommend using an existing framework/library such as Angular, React, Vue.js etc. See one of my first websiteswhich I made in pure html/css/js and PHP, making my life harder for NO reason.

I started using Angular because we used that at a course at my university. I still like Angular as they have a very well defined way of doing things. I even wrote an entire article for why I chose to build my startup using Angular. With all that being said, I think you should start learning how to build websites using React.

Again, all languages have pros and cons, you can read this article or this onecomparing different javascript frameworks. It is easy to waste time debating which one to pick (talking from experience). I will simplify all these arguments by saying that start with learning React because it is the most popular Javascript framework (as measured by Github stars) so it has the most jobs and freelance contracts available (though also the most competition). Also, because there are so many users, there are more people contributing to the open source React codebase to fix bugs faster and add more features.

The best way to learn React is to build projects in React. The best way to build projects in React is to find tutorials of things you want to build, follow it word for word and just copy and paste. Don’t worry if you don’t understand what you are copy and pasting. You will gradually learn the theory behind the WHY of how things work when you encounter a bug or decide to add a modification. This might be an unorthodox way of learning but I have found that for me this is fastest way to learn new ideas, ship products with the most SPEED and I think it might work for you as well.

Here is an awesome list of React projects that Dave Ceddia has created to start learning React. Here are my top 3 projects to start learning React:

Simple To-do List
Dave Ceddia’s Practice Projects
Serverless Stack React – A bit more advance, full stack web app, build this after completing 3 other tutorials

The most important skill you need to learn at this stage is problem solving and persistence. Or as I like it “how to effectively type things into Google”. If you are a complete beginner, there is a high chance that you might literally get stuck on step one. Don’t get discouraged, just copy and paste whatever they ask you to do that doesn’t make sense into Google and add a “How to”. For example, if a tutorial says “clone the tutorial from Github” just Google “how to clone from Github” or even “what is Github”. Another piece of advice is that if you get an error and you don’t know what it means, just copy the first 5-10 words of the error message, into Google and remove project-specific nouns.

The important thing is that when you are first starting out, every problem you are about to face has likely already been encountered before and because the internet is so awesome, the answer is probably on the internet somewhere. You just need to be clever about how to ask good questions. Incidentally, asking good questions is in my opinion a top 3 life skill (charisma and drive/optimism are the other 2) but I digress.

When you have finished making a project, I recommend you do two things: One, share it with the world ( or just friends and family) and two, teach people how you made it. There are two reasons for this. We are social creatures and the idea of showing people what you’ve built will motivate you to make sure you produce something that is good quality. Secondly, if you have supportive friends and family, they will react positively to what you made, motivating you to make more cool things to get that feeling again.

I recommend teaching other people what you’ve just learnt because by teaching other people, you find the gaps in your own knowledge which helps you understand the concept better and you can do something nice for other people. Note that teaching doesn’t necessarily mean literally teaching someone by tutoring them one-on-one or giving a lecture. Simply writing a blog post, making a slide deck on how you built something or recording a video of yourself while you explain how you built something, will still have the same effect and is less socially demanding and time consuming.

Save all your work to Github. For the first 1 or 2 projects I will allow you to cheat and not use Github as the learning curve will discourage a lot of people to quit before they even start. But once you have built one or 2 projects, you NEED to start using Github. Learning it is a bit annoying at first, but it will make your life so much easier in the long run.

Here are 3 resources you can use to start learning Git:

Back End Engineering

Back end engineering is a very interesting space as this is where a lot of the business value and technologies really start to differentiate themselves. For example, Google and Bing’s homepage (front end) look relatively similar,their backend infrastructure is vastly different. That backend is why Google search is a $59 billion/year (2013) product compared to Bing’s $3.2 billion/year (2013).

The best way to start with backend development is by building a REST API server that can send data to various clients based on their actions. For example, here is a simple REST API I built for serving scholarships information and here is some of the source code.

I recommend you start by learning python and you use a framework like Django to help speed up your learning process. I recommend python because:

Python is one of the most popular programming languages
You can start coding right away from the command line
The syntax is very intuitive and matches speaking english
Python is used extensively in data science so if you decided to do more ML projects, the learning curve will b easier

The two frameworks I recommend for learning python are Flask and Django. I recommend building your first 1 or 2 python projects in Flask, then as you feel more comfortable start building apps with Django. The Django Rest Framework is an excellent framework that can then be used to build REST APIs. Ruby on Rails is another popular choice.

Start by building a very simple REST API server, which takes some information from the user and sends some information back. For example, the demo API has 2 functions: Display a list of scholarships and search for scholarships based on the user query. You can then gradually add more complex functionality.

To keep you engaged, I recommend building a REST API that serves data on a topic which you are interested in. For example, if you are interested in basketball you can build an API that displays the 5 starters in every NBA team and their points, rebound and assists per game. Then allow users to query the API by position or points per game. You can use the NBA API to get stats for the NBA or just google “X api” to find data on whatever topic interests you.

You can then combine that with the front end development skills to make a mobile web app to allow users to research NBA players. Then you can use your data science skills and Tensorflow image recognition so if you take a picture of an NBA player, it tells you who the player is and the statistics for that player.

Here are five great tutorials to start learning, Flask, Django and Django Rest Framework:

Official Flask Tutorial
Miguel Grinberg’s Flask Tutorial – absolutely amazing! One of the best tutorials I have ever done and extremely detailed
Official Django Tutorial & Official Django Rest Framework Tutorial
Tango with Django – This one brings back memories, slightly outdated but this covers a wide array of topics as well
Django Girls Tutorial – I like this because it shows you how to install on a Chromebook and a cool section on how the internet works

Data Science

I made the realization in 2017/2018 that as more and more people enter coding, the basic front end development and even some back end development skills will be commoditized. The really great opportunities will be available to people who are solving the most complex, business value-add problems. I think that the most complex problems that have the highest ROI are in the field of data science.

The GREAT, Benjamin Franklin reading a machine learning ebook. Airpods hidden by wig.

This is also the least beginner friendly topic as most people in this industry have at least a Master’s or PhD. However, one of my role models, Benjamin Franklin, finished his schooling at age 10, didn’t even graduate high school and he invented the lightning rod, bifocals and other cool stuff. So if you are willing to learn, and experiment you can do very well in this field.

My preferred method of learning primarily involves blindly copy and pasting machine learning tutorials. Then I gradually modify and mix different tutorials together until I actually understand what I’m doing and what is happening at a deeper level. Once I understand a machine learning concept I also try to write about it or give a short talk about what I learnt, this helps me crystallize my knowledge and other people can learn something useful as well.

Me giving a talk about Machine Learning at a my previous internship with RBC Amplify, July 18 2017

A good website to start with that I really like is pythonprogramming.net. Follow one of those tutorials and once you have completed the tutorial, try to make a slight modification to the final project. Keep doing this for various tutorials and try to read wikipedia or google interesting concepts you come across. This way the concepts and science and math you learn are more likely to be remembered by your brain as you would have applied them to create a practical project.

Another site that you can checkout out is Machine Learning Mastery. That site can also be a bit overwhelming at first so I recommend starting with Your First Machine Learning Project in Python Step-By-Step. I also gave a talk on an introduction to machine learning aimed at both beginners and relative experts, which you can check out (slides, blog post).

Here are 3 machine learning tutorials that are good:

Putting it all Together

Ideally, this is how your programming journey should go:

Build 3 projects using React or Angular tutorials
Build 3 REST APIs using python and Django (or Ruby on Rails)
Create a data science project that takes an input, processes the input using machine learning and generates an output

Here is an example of how all three elements can tie in together:

User opens your web app and takes a picture of two basketball players.
Your data science function runs some analysis on the image and detects that its a picture of Lebron James and Michael Jordan.
Your REST API backend server returns some data back to your web app comparing the two players’ career statistics to each other.

General Advice:

In addition to coding I recommend some best practices that will make it easier for people to keep up with what you are doing.

Create a personal webpage so people can learn more about you and you can put all your links in one place. I recommend github pages or squarespace
Add a well-documented README.md to all your projects on Github so people looking can understand how you made it and how they can run your project on their local machine. Here is a good README.md example for atila-tech-landing.
Pick the projects which you are most proud of and write a blog post and make a video explaining how you built the project. Even if you never show the blog post or video to anyone, the process of recording your thought process will help you understand what you are doing even better.

Conclusion

The internet is amazing and companies like Google, Amazon, Facebook etc. have given us tremendous tools with tremendous leverage. But in order for you to take advantage of these opportunities you need to learn and apply the things you’ve learnt.

There’s a lot of stuff in this article, so just pick the easiest one and start working to get it done. Try to be the person in 2019, that you in 2020 will be proud of. What a time to be alive!