NFT Collectibles Masterclass project deployed on Polygon/Matic network

About

Dapp University NFT Collectibles Masterclass project deployed to Polygon/Network Read accompanying document on Polygon

Technology Stack and Tools

• Node Version Manager - node version manager
• Polygon/Matic - Polygon Matic Network
• ERC721 - ERC721 Token standard (NFTs)
• Metamask Wallet - Metamask Wallet
• Truffle - development framework
• React - front end framework
• Redux - state management framework for React
• Solidity - ethereum smart contract language
• Ganache - local blockchain development
• Web3 - library interact with ethereum nodes
• JavaScript - logic front end and testing smart contracts
• Infura - connection to ethereum networks
• Open Zeppelin - smart contract libraries

Folder / Directory Structure (key folders)

• NFT Collectibles Masterclass
  • node_modules
  • public
    • index.html
  • src
    • backEnd
      • abis
      • contracts
      • migrations
      • scripts
      • test
    • components
    • images
    • store
    • index.js
    • .env
    • .env.example
    • truffle.js
    • package.json

Preconfiguration, Installation and Running project locally

1. You will need nvm to install specific version node v12.10.0

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
$ source ~/.nvm/nvm.sh

Restart your terminal

2. Install node v12.10.0

$ nvm install 12.10.0
$ nvm alias default 12.10.0
$ nvm use default

3. Install truffle globally

$ npm install -g truffle

4. If opting to use ganache-cli vs Ganache GUI, install ganache-cli globally

$ npm install -g ganache-cli
$ ganache-cli

Run ganache-cli in different terminal and keep running

5. Run IPFS Install IPFS:

$ npm i -g ipfs 

6. Run IPFS Node in a different terminal and keep running:

$ jsipfs daemon

7. Enter project directory and install dependancies

$ cd nft_masterclass_1
$ npm install 

Migrating contracts and Testing Locally to ensure all is working well

1. To compile contracts e.g you make changes to contracts

$ truffle compile 

Make sure your truffle.js or truffle-config.js file is properly configured for development environment. 2. Migrate contracts to local running instance ganache

$ truffle migrate --reset 

3. To test contracts

$ truffle test

4. Interact with locally deployed contracts and excute script to mint tokens

$ truffle migrate --reset
$ truffle exec src/backEnd/scripts/mint.js --network development
$

5. Run app on localhost front-end
6. Run app locally

$ npm start

Enter dApp in browser at localhost:3000

Deploying to Polygon/Matic Mumbai testnet network

You can also read up on our Polygon document here . You can also lookup with Matic Developer documentation here

1. Setup up Polygon/Matic network on Metamask under Networks Custom RPC configuration.

2. You will need Matic tokens in an account that will deploy contract We will get MATIC tokens from faucet https://faucet.matic.network/ into a Metamask Account. Copy Metamask address and request MATIC. See image below

After a little while you should see a new balance in your address on Mumbai network

3. Ensure truffle is configured for Polygon Matic Mumbai Test network with added configuration like below Make sure you have added the private key/ mnemonic of account that received Matic tokens into .env file See .env.example

require('babel-register');
require('babel-polyfill');
require('dotenv').config();
const HDWalletProvider = require('truffle-hdwallet-provider-privkey');
const privateKeys = process.env.PRIVATE_KEYS || ""

...

module.exports = {
  networks: {
    development: {
      ...
    },
    matic: {
      provider: () => new HDWalletProvider(mnemonic, `https://rpc-mumbai.matic.today`),
      network_id: 80001,
      confirmations: 2,
      timeoutBlocks: 200,
      skipDryRun: true
    },
  },
  ...

2. Deploy using truffle.

$ truffle migrate --network matic
$ truffle networks 

truffle networks above will show you the networks to which NFT contract has been deployed copy contract address and or transaction hash from console output and ... you can verify deployment on https://mumbai-explorer.matic.today/

3. Mint NFT's on Matic Network( ensure you have sufficient Matic tokens)

$ truffle exec src/backEnd/scripts/mint.js --network matic

4. Run app on localhost front-end and interact with app

$ npm start

Optional publish on IPFS

1. Build app

$ npm run build

2. Publish on IPFS

$ jsipfs add -r build

3. Copy the latest generated hash and paste into the place of hash below: https://ipfs.io/ipfs/hash For the first time may take a while to load dApp Create Human readable link Use this site

Optional publish front end to Surge

1. Run build and enter build directory

$ npm run build
$ cd build

2. Install surge globally:

$ npm i -g surge

3. Deploy to surge.

$ surge

...and follow the instructions

Optional Matic-Ethereum bridge

As you develop on Matic you may need to make use of bridges between the two networks

Find out how to move tokens between Ethereum network e.g Goerli testnet and Polygon Matic network e.g Matic testnet Follow project/guide at https://github.com/MatricksDeCoder/ethereum_matic_bridge to move DummyERC20Token from Goerli to Mumbai using POS Bridge.