Overview

In this tutorial we will create a non-fungible token (NFT) and deploy to harmony testnet.

HRC721 is a standard for representing ownership of non-fungible tokens, that is, where each token is unique such as in real estate or collectibles.

We will use Presets contracts in OpenZeppelin Contracts to create an HRC721 and deploy using Remix.

Video Tutorial

Setting up the Contract Metadata and Images using IPFS

EIP-721 includes an optional metadata extension with a name, symbol and for each tokenID a tokenURI with can point to a JSON file with name, description and image for the given token ID.

For our example we will upload three files

1. HarmonyLogo.svg which stores the Image used for the token.

2. NFTTokenBaseURL.json which stores the metadata for all the tokens and is used when deploying the NFT contract.

3. NFTToken0.json which stores an instance of the metadata for Token0.

Uploading to IPFS

We will use Pinata, a convenient IPFS API and toolkit, to store our NFT asset and metadata to ensure our NFT is truly decentralized. If you don't have a Pinata account, sign up for a free account here and complete the steps to verify your email.

Once you've created an account:

• Navigate to the "Pinata Upload" button on the top right

• Upload an image to pinata - this will be the image asset for your NFT. Feel free to name the asset whatever you wish

• After you upload, at the top of the page, there should be a green popup that allows you to view the hash of your upload —> Copy that hashcode. You can view your upload at: https://gateway.pinata.cloud/ipfs/<hash-code>

Feel free to change the data in the json files below. You can remove or add to the attributes section. Most importantly, make sure the image field points to the location of your IPFS image— otherwise, your NFT will include a photo of a (very cute!) Harmony Logo.

Once you're done editing the json file, save it and upload it to Pinata, following the same steps we did for uploading the image.

Here is the information for the two json files

On your local machine

Make a new file called NFTTokenBaseURL.json and add the following json code:

[
    {
      "id": 0,
      "description": "My NFT",
      "external_url": "https://forum.openzeppelin.com/t/create-an-nft-and-deploy-to-a-public-testnet-using-truffle/2961",
      "image": "https://gateway.pinata.cloud/ipfs/QmTTg77eKPFeKF1h75KdRrC9pTRKiMb34J9uXGzfj5xq6r",
      "name": "My NFT 0"
    },
    {
      "id": 1,
      "description": "My NFT",
      "external_url": "https://forum.openzeppelin.com/t/create-an-nft-and-deploy-to-a-public-testnet-using-truffle/2961",
      "image": "https://gateway.pinata.cloud/ipfs/QmTTg77eKPFeKF1h75KdRrC9pTRKiMb34J9uXGzfj5xq6r",
      "name": "My NFT 1"
    },
    {
      "id": 2,
      "description": "My NFT",
      "external_url": "https://forum.openzeppelin.com/t/create-an-nft-and-deploy-to-a-public-testnet-using-truffle/2961",
      "image": "https://twemoji.maxcdn.com/svg/1f40e.svg",
      "name": "My NFT 2"
    }
  ]

Make a new file called NFTToken0.json and add the following json code:

{
    "id": 0,
    "description": "My NFT",
    "external_url": "https://forum.openzeppelin.com/t/create-an-nft-and-deploy-to-a-public-testnet-using-truffle/2961",
    "image": "https://gateway.pinata.cloud/ipfs/QmTTg77eKPFeKF1h75KdRrC9pTRKiMb34J9uXGzfj5xq6r",
    "name": "My NFT 0"
  }

For our example we loaded the following two files

1. HarmonyLogo.svg at https://gateway.pinata.cloud/ipfs/QmTTg77eKPFeKF1h75KdRrC9pTRKiMb34J9uXGzfj5xq6r

2. NFTTokenBaseURL.json at https://gateway.pinata.cloud/ipfs/QmVkDbc6NPni1uzQq3gsiocUc3YGZjF7QGcM37hMcBqNmv

3. NFTToken0.json at https://gateway.pinata.cloud/ipfs/QmdAprJQmTtZ3vQLuorpuwJwyXs4YyC8Uh11hjsevCM5DC

Setting up the Remix Development Environment

Open https://remix.ethereum.org/ in your favorite browser.

If you haven’t used Remix before, you need to setup plugins so that you can use the Solidity Compiler and Deploy and Run Transactions.

Select the Plugin Manager button on the bottom left under the Environments heading. If the Solidity Compiler is not already active, search for it and then press the activate button.

Importing the contract

We are going to use Preset ERC721PresetMinterPauserAutoId which is an ERC721 that is preset so it can be minted, paused and burned.

We need to import ERC721PresetMinterPauserAutoId into Remix.

In the new file add the import statement for ERC721PresetMinterPauserAutoId below.

We specify a minimum version of the Solidity compiler to use and import ERC721PresetMinterPauserAutoId from GitHub.

Note: When importing via GitHub, you should specify the release tag, otherwise you will get the latest code in the master branch. For OpenZeppelin Contracts you should only use code published in an official release. We will import OpenZeppelin Contracts v3.4.0. (for further instructions on how imports work in remix see Importing from GitHub 35 in the Remix documentation).

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.4;

import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/v3.4.0/contracts/presets/ERC721PresetMinterPauserAutoId.sol";

Note when importing the contract it automatically inserts the contracts under dependencies.

Compile the contract

Select the Solidity Compiler plugin on the left hand side of the screen. Press the Compile button to compile the contract.

The contract and the contracts it inherits from will be loaded into Remix. The contract will then be compiled.

Deploy the contract Locally

We can deploy our new token to a development blockchain. Providing a name, a symbol and a base URI as parameters to the constructor to create a new ERC721PresetMinterPauserAutoId.

Select the Deploy & Run Transactions plugin on the left hand side of the screen. Environment should default to JavaScript VM (Berlin) or JavasScript VM (London)our development blockchain. Change the gas limit to 5000000 Change the Contract to ERC721PresetMinterPauserAutoId

Specify the name, symbol and base URI to use for our new token. by selecting the drop down next to the deploy button. I am using “My NFT” and “NFT” and "https://gateway.pinata.cloud/ipfs/QmTmHW5NDh5wUTstTLcPRkKgGU75tvapMhHtPxjcRtMkLN"

Press Deploy.

Remix will deploy our token . You can see the deployed contract under the Deployed contracts section. By pressing the drop down on the right you can see the methods which you can use to interact with the token.

Interact with our Token

We can interact with our deployed token using Remix. In the Deploy & Run Transactions plugin, under Deployed Contracts expand our deployed token (ERC721PRESETMINTERPAUSERAUTOID) to show the methods we can interact with. (for help see Deployed Contracts in Remix documentation)

Token metadata

We can call the contract functions to read token metadata such as name, symbol and baseURI

Press the name, symbol and baseURI function buttons and this will call the functions in our deployed token. Showing values:

• baseURI: 0: string: https://my-json-server.typicode.com/abcoathup/samplenft/tokens/

• name: 0: string: My Token

• symbol: 0: string: My NFT

Mint

We can send a transaction to mint tokens to a given account, from an account with the minter role. In our case we are minting from the account which deployed the token, which is given the minter role.

We will mint 1 NFT with token ID 0 to our account: 0x5B38Da6a701c568545dCfcB03FcB875f56beddC4

We can set the parameters as follows "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4"

Press mint The transaction will be shown in the console

We can check the owner of the token and the token URI for the metadata Showing values:

• ownerOf: 0: address: 0x5B38Da6a701c568545dCfcB03FcB875f56beddC4

• tokenURI: 0: string: https://my-json-server.typicode.com/abcoathup/samplenft/tokens/0

Deploy to a Harmony testnet

Setup and fund your Harmony Metamask Wallet

In order to deploy to Harmony Testnet you will need to setup Metamask and get some one tokens from the faucet.

After successful setup and funding your Metamask should look like this

Deploy to Harmony Testnet

Set the network in MetaMask to Harmony Testnet. Change the environment in Deploy and Run Transactions to Injected Web3 so that Remix uses web3 from MetaMask

Check the gas limit is set to 5000000 Check the Contract is set to ERC721PresetMinterPauserAutoId Specify the name, symbol and base URI to use for our new token. I am using “My NFT” and “NFT” and “https://gateway.pinata.cloud/ipfs/QmVkDbc6NPni1uzQq3gsiocUc3YGZjF7QGcM37hMcBqNmv"

Press Deploy. Confirm the transaction in MetaMask The console will show creation of ERC721PresetMinterPauserAutoId pending... and then shortly after the contract will be deployed.

You will be able to see the contract deployed in metamask and the harmony explorer, for example here is the contract I deployed.

Mint

We can send a transaction to mint tokens to a given account, from an account with the minter role.

In our case we are minting from the account which deployed the token, which is given the minter role.

We will mint 1 NFT with token ID 0. Specify the address that you want to be the token holder (0x8875fc2A47E35ACD1784bB5f58f563dFE86A8451 is one of my test accounts)

Press mint with the recipient address Confirm the transaction in MetaMask

The console will show transact to ERC721PresetMinterPauserAutoId.mint pending ... and then shortly afterwards the NFT will be minted

Viewing the NFT Token in Metamask

By using the explorer and looking at your transaction history for your metamask account you can find the address of the NFT contract deployed. Our account is here and our NFT contract is here.

You can then add that token address to metamask,

Our NFT contract address is 0xe9218ef3c209e1e7db8bef2e33f822006b44bcd7

We add the NFT Token Contract

and after adding it to metamask we see

Next steps

• Create your artwork and metadata.

• Host your images and metadata in a location that will last the life of the token.

• Define what rights your token holders have.

• Prepare for mainnet 76.

The repo https://github.com/harmony-one/band_oracle contains examples on how to fetch price feeds using band oracle.

There are two scenarios:

• Fetching price feed in your javascript application code

• Fetching price feed in your smart contract

Requesting data using BandChain.js library

https://github.com/harmony-one/band_oracle/blob/main/main.js

git clone https://github.com/harmony-one/band_oracle
cd band_oracle

yarn
node main.js

Using BandChain data in EVM Smart Contract in Harmony

https://github.com/harmony-one/band_oracle

git clone https://github.com/harmony-one/band_oracle
cd band_oracle

yarn
export PRIVATE_KEY=place your private key here
yarn hardhat run ./scripts/deploy.js

Contract's been deployed and you can call getPrice or getMultiPrices to get actual prices. More details with code snippets are in https://docs.harmony.one/home/developers/tools/oracle-band-protocol

This API will let you swap assets between different chains, this is the current status:

Version: B0.1

• This version allow you to swap BUSD in Ethereum into BUSD in Binance, we thought this is a good first step because it will serve as a vehicle between any assets between the two networks.

• Testnets required for running this versions are:

  • Harmony Testnet (https://api.s0.b.hmny.io)

  • Ethereum Kovan (https://kovan.infura.io/v3/acb534b53d3a47b09d7886064f8e51b6)

  • BSC Testnet (https://docs.binance.org/smart-chain/developer/rpc.html)

Some Basic Instructions

• Right now you see two folders, webserver and testing. The former contains the webserver that must be started to call the API endpoints locally in you machine (read this for more detailed instructions), the latter contains scripts in javascript and postman that can be used to test the endpoints once you have the webserber running. It also has examples of how to make calls to the API.

• You will need to set .env files in both folders, we are adding samples for those files (they are called env_file), so you can just go ahead and rename them to .env. You will also need to add your private key to the .env file in the testing folder if you plan to use the .js file. If you plan to use postman, you will need to paste it into the workspace, so make sure that you create it outside the repo. In any case we encourage you to add .env files to the .gitignore and never paste you private keys in the code.

Enjoy!

Filecoin and IPFS are complementary protocols for storing and sharing data in the distributed web. Both systems are free, open-source, and share many building blocks, including data representation formats (IPLD) and network communication protocols (libp2p).

IPFS allows users to store and transfer verifiable, content-addressed data in a peer-to-peer network. It is great for getting started using for all sorts of distributed web applications.

IPFS alone does not include a built-in mechanism to incentivize the storage of data for other people. Built on top of IPFS, Filecoin is the distributed storage network to add longer term data persistence via on-chain storage deals, along with built-in economic incentives to ensure files are stored reliably over time.

However, the processes of storing, verifying, and retrieving data are computationally expensive and can take time. Therefore, many solutions (called storage helpers) combine the two networks to get the best of both worlds: IPFS for content addressing & data discovery, and Filecoin for longer-term persistence.

In this section, you will find tutorials to guide you through the process of using IPFS and/or Filecoin for decentralized storage, including storage helpers that combine both systems such as .

• Using IPFS

• Using NFT.storage

Create your own HRC20 token

Let us first create a simple HRC20 token with name "Gold" and symbol "GLD" with default 18 decimals.

1. Launch and create a new file with name GLDToken.sol and copy paste the code below.

2. Compile the GLDToken.sol

3. Deploy the GLDToken.sol

4. Interacting with the deployed GLDToken.

5. Changing decimals from default 18 to e.g., 16 can be done by adding the following function to GLDToken.sol file and repeating steps 2-4.

Install the graph-cli

Build your own graph-indexer local node

Copy paste the below docker-compose file and replace services.graph-node.environment.ethereum accordingly to the network: mainnet s0 : mainnet:archive,traces:https://a.api.s0.t.hmny.io mainnet s1 : mainnet:archive,traces:https://a.api.s1.t.hmny.io

and run your indexer node

docker logs hmy_indexer -f should show the indexer synching with the harmony chain

A few component are installed

An example of query you can use to show subgraph currently being indexed would be :

Right now of course, the result is empty

Our first subgraph

lets use blocklytics/ethereum-blocks subgraph as example

Edit package.json file and add these lines

Update the manifest

Update the manifest subgraph.yaml file datasources[0]['network'] from rinkeby to mainnet or testnet accordingly to how you edited the network in your docker-compose.yaml if there is no need to index the entire blockchain, you can add an attribute startBlock to speed up the sync : datasources[0]['source']['startBlock']

Also, update the subgraph.yaml apiVersion: 0.0.5

Create and deploy the subgraph

Note that the above example query should now show your something similar to the below

data['indexingStatuses'][0]['chains'][0]['latestBlock']['number'] will indicate the last block synched

How to write subgraphs

Official Graph's doc

Community article

Getting help

This is a webserver using node and express, in order to start it you need to run the following commands in the terminal:

• npm install

• node index.js

We assume that it will run in port 3000 but feel free to change it. Don't forget to update the scritps accordingly though.

Endpoints

The general architecture of the API is the following

• Endpoints that receive signed transactions as inputs and they will complete the required transactions. This allow you to sign the transactions of the front end and it is safe to use on a production server because the private key is never sent to the endpoints. To sign the transactions you can see the examples in the scripts folder of this repo.

• You can make and end-to-end swap using the /swap endpoints. But this is a multi-step process that will fail if one of the single steps fails. It uses Harmony's Horizon Bridge and Viper DEX, so for example, the bridging part can work but if there is no liquidity in the pool so the who transaction will fail. Therefore use this enpoint only if you are sure that Viper's LPs have enough liquidity.

• If you prefer to do it setp-by-step, you should use the following end-points in the specified order:

  • /swap/bridge-in - Bridges BUSD in ethereum to Harmony's BUSD

  • /swap/viper/ - Swaps Harmony's BUSD to bscBUSD (Both are bridged assets in the Harmony network)

  • /swap/bridge-out - Bridges bscBUSD into Binance's BUSD

Right now the following endpoints are enabled, but we will keep adding more reguarly, so remember to pull once in a while.

POST /swap

This endpoint will swap balances between Ethereum BUSD and Binance BUSD, the body for this request should look like this:

• amount: this is a string with the amount in decimals (e.g. "10.50") that you want to swap

• oneAddress: this is a string with the address of the wallet owned by the private key in the Harmony wallet format i.e. oneaxxxxxxxx

• ethAddress: this is a string with the address of the wallet owned by the private key in the Ethereum wallet format i.e. Oxaxxxxxxxx

• lockApproveTxnHash : this is a string with the hash of the contract manager's approval for the lock transaction

• lockTxnHash : this is a string with the hash of the lock transaction

• burnApproveTxnHash : this is a string with the hash of the contract manager's approval for the burn transaction

• depositTxnHash : this is a string with the hash of the deposit transaction

• burnTxnHash : this is a string with the hash of the burn transaction

• routerContract : This is a string with the writing approval for Viper's swap router contract

• fromTokenContract : This is a string with the transaction approval for the account swapping in Viper

POST /swap/bridge-in

This enpoint will bridges BUSD in ethereum to Harmony's BUSD, it is the first step of the step-by-step swap, the body for this request should look like this:

• amount: this is a string with amount in decimals (e.g. "10.50") that you want to swap

• oneAddress: the address of the wallet owned by the private key in the Harmony wallet format i.e. oneaxxxxxxxx

• ethAddress: the address of the wallet owned by the private key in the Ethereum wallet format i.e. Oxaxxxxxxxx

• lockApproveTxnHash : this is a string with the hash of the contract manager's approval for the lock transaction

• lockTxnHash : this is a string with the hash of the lock transaction

POST /swap/viper

This enpoint will swap Harmony's BUSD to bscBUSD (Both are bridged assets in the Harmony network), it is the second step of the step-by-step swap, the body for this request should look like this:

• amount: this is a string with amount in decimals (e.g. "10.50") that you want to swap

• wallet: this is the private key of the wallets with the funds, please use an .env or equivalent to store this key, never put it in your code

• oneAddress: the address of the wallet owned by the private key in the Harmony wallet format i.e. oneaxxxxxxxx

• routerContract : This is a string with the writing approval for Viper's swap router contract

• fromTokenContract : This is a string with the transaction approval for the account swapping in Viper

POST /swap/bridge-out

• amount: this is a string with amount in decimals (e.g. "10.50") that you want to swap

• oneAddress: the address of the wallet owned by the private key in the Harmony wallet format i.e. oneaxxxxxxxx

• ethAddress: the address of the wallet owned by the private key in the Ethereum wallet format i.e. Oxaxxxxxxxx

• burnApproveTxnHash : this is a string with the hash of the contract manager's approval for the burn transaction

• depositTxnHash : this is a string with the hash of the deposit transaction

• burnTxnHash : this is a string with the hash of the burn transaction

Local Endpoints

POST /local/swap

This enpoint will swap balances between Ethereum BUSD and Binance BUSD, the body for this request should look like this:

• amount: this is a string with amount in decimals (e.g. "10.50") that you want to swap

• wallet: this is the private key of the wallets with the funds, please use an .env or equivalent to store this key, never put it in your code

• oneAddress: the address of the wallet owned by the private key in the Harmony wallet format i.e. oneaxxxxxxxx

• ethAddress: the address of the wallet owned by the private key in the Ethereum wallet format i.e. Oxaxxxxxxxx

POST /local/swap/bridge-in

This enpoint will bridges BUSD in ethereum to Harmony's BUSD, it is the first step of the step-by-step swap, the body for this request should look like this:

• amount: this is a string with amount in decimals (e.g. "10.50") that you want to swap

• wallet: this is the private key of the wallets with the funds, please use an .env or equivalent to store this key, never put it in your code

• oneAddress: the address of the wallet owned by the private key in the Harmony wallet format i.e. oneaxxxxxxxx

• ethAddress: the address of the wallet owned by the private key in the Ethereum wallet format i.e. Oxaxxxxxxxx

POST /local/swap/viper

This enpoint will swap Harmony's BUSD to bscBUSD (Both are bridged assets in the Harmony network), it is the second step of the step-by-step swap, the body for this request should look like this:

• amount: this is a string with amount in decimals (e.g. "10.50") that you want to swap

• wallet: this is the private key of the wallets with the funds, please use an .env or equivalent to store this key, never put it in your code

• oneAddress: the address of the wallet owned by the private key in the Harmony wallet format i.e. oneaxxxxxxxx

POST /local/swap/bridge-out

This enpoint will bridges bscBUSD into Binance's BUSD, it is the third step of the step-by-step swap, the body for this request should look like this:

• amount: this is a string with amount in decimals (e.g. "10.50") that you want to swap

• wallet: this is the private key of the wallets with the funds, please use an .env or equivalent to store this key, never put it in your code

• oneAddress: the address of the wallet owned by the private key in the Harmony wallet format i.e. oneaxxxxxxxx

• ethAddress: the address of the wallet owned by the private key in the Ethereum wallet format i.e. Oxaxxxxxxxx

Harmony is on The Graph

Deploying Subgraphs

Option 1. Using Harmony's public graph node.

Option 2. Using a local indexer node.

See .

See How to create an EVM compatible blockchain bridge.

In order to test the API, you need to complete the following checklist:

• Get tokens

• Make sure that there is enough liquidity in the BSUD/bscBUSD pool in Viper and/or add liquidity

• Start the webserver

• Try the examples in this folder!

Getting tokens

• You need the following tokens:

  • BUSD in the Ethereum Kovan testnet

  • Harmony's ONE tokens (for paying gas)

  • Harmony's BUSD and bscBUSD for adding liquidity

Getting BUSD in the Ethereum Kovan testnet

• You can get these tokens from Harmony's Horizon Bridge Faucet

Getting Harmony's ONE token

• You can get these tokens from the Harmony testnet faucet

Getting Harmony's BUSD and bscBUSD bridged tokens

• For getting Harmony's BUSD you need to bridge from Ethereum BUSD using Harmony's Horizon Bridge

• For getting Harmony's bscBUSD you need to bridge from Harmony's BUSD using ViperSwap

Using the Scripts the API

• These scripts will build the transactions required to call Harmony's production API, for more instructions on how to use the API check the webserver repo

• Make sure to rename the env_file to .env and add your private key.

• To run a script just execute the node file e.g. node bridge_eth_to_one.js

The Scripts

• bridge_eth_to_one.js This script bridges ethereum BUSD to Harmony's ethereum BUSD

• bridge_one_to_bsc.js This script bridges Harmony's BSC BUSD to BSC BUSD

• viper_swap.js This script swaps Harmony's ethereum BUSD to Harmony's BSC BUSD to BSC BUSD

• end_to_end.js This script performs a full end-to-end swap from Ethereum BUSD to BSC BUSD

Context

Harmony blockchain can be used to store data. But is it really worth the cost? To put into perspective 1 byte of a data can cost you 42,107 gas or 0.00042017 ONE token, or equal to about $0.00003092031 in today's market. It maybe small for just one byte of data but let's say you want to store a file with 1 GB data (1,000,000,000 bytes) it will cost you $30920.31. The solution is IPFS, the InterPlanetary File System.

What is IPFS?

IPFS is a distributed system for storing and accessing files, websites, applications, and data. Using IPFS as a storage you don't need to store entire files to harmony blockchain you just need to store the hash of the IPFS to the harmony blockchain, thus make it much more cheaper then just storing the file.

In this tutorial, we are going to use IPFS to store some files offchain and store the hash of the file to the blockchain. And we will also get the data back from blockchain, and show it to the webpage.

Video link

https://www.youtube.com/watch?v=AUzmku4xQLw

Github Link

https://github.com/harmony-one/harmony-ipfs

Prerequisites

• Node.js

• IPFS

• Metamask

In this entire tutorial i'm using windows 10, but you can use any other os.

Step 1 - Install IPFS

To install IPFS on your machine, there are so many ways to do it. You can see for yourself here https://docs.ipfs.io/install/command-line/#official-distributions. After that go to your command prompt and type:

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "["""webui://-""", """http://localhost:3000""", """http://127.0.0.1:5001""", """https://webui.ipfs.io"""]"

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods "["""PUT""", """POST"""]"

This command needed so that we can upload our file without any CORS problem. After that run this command to run ipfs locally:

ipfs daemon

Step 2 - Install Metamask

There is also so many way to download metamask. If you're using chrome you can download it from here https://metamask.io/download.html, and click on install metamask for chrome after you install the metamask you need to setup the metamask so that it can interact with harmony blockchain click on Custom RPC like below :

Then after that write this one by one:

Network Name :
Harmony Testnet

New RPC URL :
https://api.s0.b.hmny.io

Chain ID :
1666700000

Currency Symbol :
ONE

Block Explorer URL :
https://explorer.pops.one/

Now you have an harmony one account on metamask testnet we need to fill some harmony one token you can do that by going to harmony one testnet faucet like this one https://faucet.pops.one/, to get your address click on the three dot and click on view in explorer like this :

you will then get your address like this :

Put it in the harmony testnet faucet and click send me and you will get your harmony one token filling up.

Step 3 - Create a smart contract

First we need to install truffle. To install truffle go to your command prompt and type:

npm install -g truffle

Now create a folder and go inside that folder and type on the command prompt:

truffle init

After you run that command basically you will get some file and folder like this:

contracts/  migrations/  test/  truffle-config.js

So now i want you to go to contract folder and create a file called IPFSstorage.sol and paste this code in that file:

pragma solidity 0.8.6;
contract IPFSstorage {
 string ipfsHash;

 function sendHash(string memory x) public {
   ipfsHash = x;
 }

 function getHash() public view returns (string memory x) {
   return ipfsHash;
 }
}

So this is actually a really basic smart contract with the purpose of storing the hash of the file to the blockchain. sendHash is to store the hash, and getHash is to get the hash. After that go to the migrations folder and create a file called 2_ipfs_storage_migration.js and paste this code into that file :

var IPFSstorage = artifacts.require("./IPFSstorage.sol");

module.exports = function(deployer) {
    // Demo is the contract's name
    deployer.deploy(IPFSstorage);
};

This code is basically used for deploying our contract to our testnet later using truffle. Now go back to the root of our folder and look for truffle-config.js file and replace the code inside of that file with this :

require('dotenv').config()

const PrivateKeyProvider = require('./private-provider')

const networkId = {
  Mainnet: 1666600000,
  Testnet: 1666700000
}

module.exports = {
  networks: {
    localnet: {
      provider: () => {
        return new PrivateKeyProvider(process.env.LOCALNET_PRIVATE_KEY, 'http://localhost:9500', networkId.Testnet)
      },
      network_id: networkId.Testnet
    },

    testnet: {
      provider: () => {
        return new PrivateKeyProvider(process.env.TESTNET_PRIVATE_KEY, 'https://api.s0.b.hmny.io', networkId.Testnet)
      },
      network_id: networkId.Testnet
    },

    mainnet: {
      provider: () => {
        return new PrivateKeyProvider(process.env.MAINNET_PRIVATE_KEY, 'https://api.s0.t.hmny.io', networkId.Mainnet)
      },
      network_id: networkId.Mainnet
    }
  },

  compilers: {
    solc: {
      version: '0.8.6'
    },
  }
}

After that create a file called private-provider.js and copy paste this code :

const ProviderEngine = require('@trufflesuite/web3-provider-engine');
const WalletSubprovider = require('@trufflesuite/web3-provider-engine/subproviders/wallet');
const RpcSubprovider = require('@trufflesuite/web3-provider-engine/subproviders/rpc');
const EthereumjsWallet = require('ethereumjs-wallet');

// ChainIdSubProvider
function ChainIdSubProvider(chainId) {
  this.chainId = chainId;
}
ChainIdSubProvider.prototype.setEngine = function (engine) {
  const self = this;
  if (self.engine) return;
  self.engine = engine;
};
ChainIdSubProvider.prototype.handleRequest = function (payload, next, end) {
  if (
    payload.method == 'eth_sendTransaction' &&
    payload.params.length > 0 &&
  typeof payload.params[0].chainId == 'undefined'
  ) {
    payload.params[0].chainId = this.chainId;
  }
  next();
};

// NonceSubProvider
function NonceSubProvider() { }
NonceSubProvider.prototype.setEngine = function (engine) {
   const self = this;
   if (self.engine) return;
   self.engine = engine;
};
NonceSubProvider.prototype.handleRequest = function (payload, next, end) {
  if (payload.method == 'eth_sendTransaction') {
    this.engine.sendAsync(
    {
      jsonrpc: '2.0',
      id: Math.ceil(Math.random() * 4415011859092441),
      method: 'eth_getTransactionCount',
      params: [payload.params[0].from, 'latest'],
    },
    (err, result) => {
      const nonce =
        typeof result.result == 'string'
          ? result.result == '0x'
            ? 0
            : parseInt(result.result.substring(2), 16)
          : 0;
      payload.params[0].nonce = nonce || 0;
      next();
    });
  } else {
    next();
  }
};

// PrivateKeyProvider
function PrivateKeyProvider(privateKey, providerUrl, chainId) {
  if (!privateKey) {
    throw new Error(
      `Private Key missing, non-empty string expected, got "${privateKey}"`
    );
  }

  if (!providerUrl) {
    throw new Error(
      `Provider URL missing, non-empty string expected, got "${providerUrl}"`
    );
  }

  this.wallet = EthereumjsWallet.default.fromPrivateKey(Buffer.from(privateKey, 'hex'));
  this.address = `0x${this.wallet.getAddress().toString('hex')}`;

  this.engine = new ProviderEngine({ useSkipCache: false });

  this.engine.addProvider(new ChainIdSubProvider(chainId));
  this.engine.addProvider(new NonceSubProvider());
  this.engine.addProvider(new WalletSubprovider(this.wallet, {}));
  this.engine.addProvider(new RpcSubprovider({ rpcUrl: providerUrl }));

  this.engine.start();
}

PrivateKeyProvider.prototype.sendAsync = function (payload, callback) {
  return this.engine.sendAsync.apply(this.engine, arguments);
};

PrivateKeyProvider.prototype.send = function () {
  return this.engine.send.apply(this.engine, arguments);
};

module.exports = PrivateKeyProvider;

Now create a file called package.json and copy paste this code :

{
  "name": "harmony-box",
  "version": "1.0.0",
  "dependencies": {
    "@openzeppelin/contracts": "^3.4.0",
    "@trufflesuite/web3-provider-engine": "^15.0.13-1",
    "ethereumjs-wallet": "^1.0.1",
    "dotenv": "^8.2.0",
    "truffle": "^5.1.66",
    "solc": "^0.7.6"
  }
}

And run npm install to install all the dependencies. Now create a file called .env and copy paste this code :

LOCALNET_PRIVATE_KEY='ENTER_PRIVATE_KEY_HERE'
TESTNET_PRIVATE_KEY='ENTER_PRIVATE_KEY_HERE'
MAINNET_PRIVATE_KEY='ENTER_PRIVATE_KEY_HERE'

Because we are gonna use testnet, we need to get our private key and set it in the .env file, on the TESTNET_PRIVATE_KEY variable. Let's go to the metamask and get our private key. Click the three dot again and click account detail and click export private key :

After you input your password you should see your private key, after that just copy past it in the .env file, on the TESTNET_PRIVATE_KEY variable. After that to deploy our smart contract you just need to run this command :

truffle migrate --network testnet --reset

Wait for it to complete and then you will get a contract address like this :

Save that contract address in the safe place, because we will need it in the next step.

Step 4 - Integrating IPFS + Harmony Blockchain

First thing first, we need to create a react application to communicate with the harmony blockchain and IPFS, much more easily, we gonna use nextjs framework for this one so to create it first we need to run this command :

npx create-next-app harmony-ipfs --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

It will create a new directory called harmony-ipfs and install all the dependencies for you. We also need to style our app with some css, so we gonna use chakra-ui for this. Go inside the harmony-ipfs directory and install the dependencies :

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4 ipfs-http-client

After that create a directory called abi and copy paste the abi file called IPFSstorage.json from build/contracts folder on the root of the project.

Now go inside pages folder and create a file called _app.js and copy paste this code :

import { ChakraProvider } from "@chakra-ui/react"

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

Now go to index.js and replace the code with this one :

import Head from 'next/head'
import { Container } from "@chakra-ui/react";
export default function Home() {
  return (
    <Container>
      <Head>
        <title>IPFS + Harmony</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </Container>
  )
}

Add all of the import first below import { Container } from "@chakra-ui/react"; :

import { Button } from "@chakra-ui/react";
import { Center } from "@chakra-ui/react";
import Web3 from "web3";
import {
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td 
} from "@chakra-ui/react";
import {useRef,useState, useEffect} from "react"
import { create } from 'ipfs-http-client'
import IPFScontract from "../abi/IPFSstorage.json"

Let's create all the state that we need so that our application can function properly, below export default function Home() { copy paste this code :

const [inputFile,setInputFile]=useState(null)
  const [ethereumEnabled,setEthereumEnabled]=useState(false)
  const [web3,setWeb3]=useState(null)
  const [transaction,setTransaction]=useState(null)
  const [ipfsHash,setIpfsHash]=useState(null)

And then let's create a function that can be used for later to connect to our metamask put it below the state :

const ethEnabled = async () => {
    if (window.ethereum) {
      await window.ethereum.send('eth_requestAccounts');
      setWeb3(new Web3(window.ethereum))
      setEthereumEnabled(true)
      return true;
    }
    setEthereumEnabled(false)
    return false;
  }

And then let's create some code that can trigger the choose file button and also upload to ipfs :

 const fileInput = useRef(null); // trigger choose file button for later
  const client = create('http://localhost:5001/api/v0') // function to create a client to upload to ipfs later
  async function onChange(e){ // function to detect file change
    const file = e.target.files[0]
    setInputFile(file)  
  }

Let's create a function that can be used to upload the file to ipfs and harmony blockchain :

  async function uploadFileToIPFS(file){
    try {
      const added = await client.add(file)
      let contract = new web3.eth.Contract(IPFScontract.abi, "<contract address>")
      const from=(await web3.eth.getAccounts())[0]
      const contractTransaction=await contract.methods.sendHash(added.path).send({ from })
      setTransaction(contractTransaction)
      console.log(contractTransaction)
   setInputFile(null)

    } catch (error) {
      console.log('Error uploading file: ', error)
      return false

    }  
  }

If you remember before you save the contract address of IPFSstorage contract right replace <contract address> with your saved contract address, then after that let's create a function that can be used to get the hash of the file that we uploaded to IPFS :

async function getIPFSHash(){
    try {

      let contract = new web3.eth.Contract(IPFScontract.abi, "<contract address>")
      const contractIpfsHash=await contract.methods.getHash().call()
      setIpfsHash(contractIpfsHash)

    } catch (error) {
      console.log('Error getting hash: ', error)
      return false

    }  
  }

Last but not least, create a html that can be used to upload and display our blockchain transaction also our ipfs hash that we get from harmony blockchain copy paste this code below </Head> tag :

<input
      ref={fileInput}
        type="file"
        style={{visibility:"hidden"}}
        onChange={onChange}
      />
      <Center mt="10px"><b>Upload file to ipfs and harmony blockchain</b></Center>
      <Center h="100px" color="white">
      {!ethereumEnabled?<Button colorScheme="blue" onClick={()=>ethEnabled()}>Login with metamask</Button>:<Button colorScheme="orange">Logout</Button>}


      </Center>
      <Center style={{display:!ethereumEnabled?"none":"flex"}} h="100px" color="white">

        <Button colorScheme="blue" onClick={()=>fileInput.current.click()}>{inputFile?inputFile.name:"Choose File"}</Button>


      </Center>
      <Center style={{display:!ethereumEnabled||!inputFile?"none":"flex"}} h="100px" color="white">
        <Button colorScheme="green" onClick={()=>uploadFileToIPFS(inputFile)}>Upload File</Button>
      </Center>
      <Center style={{display:!ethereumEnabled||!transaction?"none":"flex"}}><b>Transaction Detail</b></Center>
      <Table style={{display:!ethereumEnabled||!transaction?"none":""}} variant="simple">
        <Thead>
          <Tr>
            <Th>Key</Th>
            <Th>Value</Th>
          </Tr>
        </Thead>
        <Tbody>
          <Tr>
            <Td>Transaction Hash</Td>
            <Td>{transaction?.transactionHash}</Td>

          </Tr>
          <Tr>
            <Td>Status</Td>
            <Td>{transaction?.status}</Td>

          </Tr>
          <Tr>
            <Td>Gas Used</Td>
            <Td>{transaction?.gasUsed}</Td>

          </Tr>
          <Tr>
            <Td>Block Number</Td>
            <Td>{transaction?.blockNumber}</Td>

          </Tr>
          <Tr>
            <Td>Block Hash</Td>
            <Td>{transaction?.blockHash}</Td>

          </Tr>
        </Tbody>

      </Table>
      <Center style={{display:!ethereumEnabled||!transaction?"none":"flex"}} h="100px" color="white">

        <Button colorScheme="blue" onClick={()=>getIPFSHash()}>Get IPFS URL</Button>



      </Center>
      <Center><a target="_blank" href={ipfsHash?`http://localhost:8080/ipfs/${ipfsHash}`:"#"}>{ipfsHash?`http://localhost:8080/ipfs/${ipfsHash}`:""}</a></Center>

This is our final code of index.js file :

import Head from 'next/head'
import { Container } from "@chakra-ui/react";
import { Button } from "@chakra-ui/react";
import { Center } from "@chakra-ui/react";
import Web3 from "web3";
import {
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td 
} from "@chakra-ui/react";
import {useRef,useState, useEffect} from "react"
import { create } from 'ipfs-http-client'
import IPFScontract from "../abi/IPFSstorage.json"
export default function Home() {
  const [inputFile,setInputFile]=useState(null)
  const [ethereumEnabled,setEthereumEnabled]=useState(false)
  const [web3,setWeb3]=useState(null)
  const [transaction,setTransaction]=useState(null)
  const [ipfsHash,setIpfsHash]=useState(null)
  const ethEnabled = async () => {
    if (window.ethereum) {
      await window.ethereum.send('eth_requestAccounts');
      setWeb3(new Web3(window.ethereum))
      setEthereumEnabled(true)
      return true;
    }
    setEthereumEnabled(false)
    return false;
  }
  const fileInput = useRef(null); // trigger choose file button for later
  const client = create('http://localhost:5001/api/v0') // function to upload to ipfs
  async function onChange(e){ // function to detect file change
    const file = e.target.files[0]
    setInputFile(file)  
  }
  async function uploadFileToIPFS(file){
    try {
      const added = await client.add(file)
      let contract = new web3.eth.Contract(IPFScontract.abi, "<contract address>")
      const from=(await web3.eth.getAccounts())[0]
      const contractTransaction=await contract.methods.sendHash(added.path).send({ from })
      setTransaction(contractTransaction)
      console.log(contractTransaction)
   setInputFile(null)

    } catch (error) {
      console.log('Error uploading file: ', error)
      return false

    }  
  }
  async function getIPFSHash(){
    try {

      let contract = new web3.eth.Contract(IPFScontract.abi, "<contract address>")
      const contractIpfsHash=await contract.methods.getHash().call()
      setIpfsHash(contractIpfsHash)

    } catch (error) {
      console.log('Error getting hash: ', error)
      return false

    }  
  }
  return (
    <Container>
      <Head>
        <title>IPFS + Harmony</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <input
      ref={fileInput}
        type="file"
        style={{visibility:"hidden"}}
        onChange={onChange}
      />
      <Center mt="10px"><b>Upload file to ipfs and harmony blockchain</b></Center>
      <Center h="100px" color="white">
      {!ethereumEnabled?<Button colorScheme="blue" onClick={()=>ethEnabled()}>Login with metamask</Button>:<Button colorScheme="orange">Logout</Button>}


      </Center>
      <Center style={{display:!ethereumEnabled?"none":"flex"}} h="100px" color="white">

        <Button colorScheme="blue" onClick={()=>fileInput.current.click()}>{inputFile?inputFile.name:"Choose File"}</Button>


      </Center>
      <Center style={{display:!ethereumEnabled||!inputFile?"none":"flex"}} h="100px" color="white">
        <Button colorScheme="green" onClick={()=>uploadFileToIPFS(inputFile)}>Upload File</Button>
      </Center>
      <Center style={{display:!ethereumEnabled||!transaction?"none":"flex"}}><b>Transaction Detail</b></Center>
      <Table style={{display:!ethereumEnabled||!transaction?"none":""}} variant="simple">
        <Thead>
          <Tr>
            <Th>Key</Th>
            <Th>Value</Th>
          </Tr>
        </Thead>
        <Tbody>
          <Tr>
            <Td>Transaction Hash</Td>
            <Td>{transaction?.transactionHash}</Td>

          </Tr>
          <Tr>
            <Td>Status</Td>
            <Td>{transaction?.status}</Td>

          </Tr>
          <Tr>
            <Td>Gas Used</Td>
            <Td>{transaction?.gasUsed}</Td>

          </Tr>
          <Tr>
            <Td>Block Number</Td>
            <Td>{transaction?.blockNumber}</Td>

          </Tr>
          <Tr>
            <Td>Block Hash</Td>
            <Td>{transaction?.blockHash}</Td>

          </Tr>
        </Tbody>

      </Table>
      <Center style={{display:!ethereumEnabled||!transaction?"none":"flex"}} h="100px" color="white">

        <Button colorScheme="blue" onClick={()=>getIPFSHash()}>Get IPFS URL</Button>



      </Center>
      <Center><a target="_blank" href={ipfsHash?`http://localhost:8080/ipfs/${ipfsHash}`:"#"}>{ipfsHash?`http://localhost:8080/ipfs/${ipfsHash}`:""}</a></Center>
    </Container>
  )
}

If you're successfully follow this tutorial you will get something like this :

Let's click on login button and you will see something like this :

Choose your account and click next and connect.

If you see connected button like above you're successfully connected to the site.

Click on choose file button and choose your file.

Click on upload file

Click on confirm and wait for a while.

After that if you get your transaction detail you're successfully uploaded your file to IPFS and harmony blockchain.

If you click on "Get IPFS URL" you will get your IPFS URL.

Conclusion

Congrats! You're successfully uploaded your file to IPFS and harmony blockchain. This is just a simple use case to upload and get a file from harmony blockchain. You can be creative and create a more complex use case like NFT metadata storage or something like that. And if you notice we are using local IPFS node. Which means if our IPFS node is down, you can't get your file. One thing you can do is using service like infura it is a free with some limitation IPFS service. You can also automatically pin your file to infura by changing the localhost:8080 to ipfs.infura.io, and your file can be seen forever, but you can't unpin it so be careful when using infura to upload your private file. That's it for now if you have any questions or suggestions feel free to ask in Official Harmony Discord

NFT.Storage is a long-term storage service designed for off-chain NFT data (like metadata, images, and other assets). Data is content addressed using IPFS, meaning the URL pointing to a piece of data (“ipfs://…”) is completely unique to that data. IPFS URLs can be used in NFTs and metadata to ensure the NFT forever actually refers to the intended data (eliminating things like rug pulls). IPFS URLs are storage layer agnostic - meaning you can store your data on many storage layers at once (whether it be on local storage, cloud storage, or multiple decentralized storage networks.

NFT.Storage stores many copies of uploaded data on the public IPFS network and Filecoin network in two primary ways: in dedicated IPFS servers managed by NFT.Storage, and decentralized on Filecoin. Since IPFS is a standard used by many different storage services, it's easy to redundantly store data uploaded to NFT.Storage on any other IPFS-compatible storage solutions.

This tutorial will walk you through the process of creating a simple NFT on Harmony, using NFT.Storage to store off-chain NFT data on IPFS and Filecoin to achieve a fully decentralized, verifiable NFT.

Overview

This tutorial will walk you through the process of creating a simple NFT on Harmony, using NFT.Storage to store off-chain NFT data on IPFS and Filecoin to achieve a fully decentralized, verifiable NFT. It is organized in 4 steps:

1. Write an NFT smart contract using Truffle

2. Connect to Harmony blockchain via Metamask

3. Upload your NFT assets via NFT.Storage

4. Invoking NFT smart contract to mint NFT via MetaMask

Prerequisites

This tutorial requires basic knowledge about Harmony blockchain, HRC721/ERC721, Truffle and Metamask.

Before you start this tutorial, make sure you have installed these necessary tools:

• Node.js

• Truffle

• Metamask browser extension

Part 1: Write the NFT smart contract

In this step, we will create a React application and use the Truffle framework to developer, compile, and deploy our NFT smart contract.

1. Create the React project and initialize Truffle

   Copy

   npx create-react-app harmony-nft
   cd harmony-nft
   truffle init

   Once the project is created and initialized successfully, you will have a basic React project structure and Truffle project structure which will include:

   • contracts for our smart contracts

   • migrations for the deployment scripts

   • truffle.js for all Truffle-related configurations

2. Create the Solidity contract

   Next, let's create the smart contract. We will use the ERC721URIStorage contract from the Openzepplin contracts library so that our NFT contract inherits standard ERC721 functions as well as storage based token URI management.

   First, install openzepplin via npm:

   Copy

   // run this command under harmony-nft folder
   npm install @openzeppelin/contracts

   Then create a HarmonyNFT.sol file under the contracts folder, and copy the ERC721URIStorage smart contract code into that file.

   Copy

   // SPDX-License-Identifier: UNLICENSED
   pragma solidity >=0.4.22 <0.9.0;
   
   import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
   import "@openzeppelin/contracts/utils/Counters.sol";
   
   contract HarmonyNFT is ERC721URIStorage{
       using Counters for Counters.Counter;
       Counters.Counter private _tokenIds;
   
       event NewHarmonyNFT(address sender, uint256 tokenId, string tokenURI);
       
       //Deploy EPC721 with name and description specified.
       constructor() ERC721 ("ETH on Harmony using NFT.Storage", "HNFT") {}
   
   	//Mint a new NFT Item and update its tokenURI with IPFS link.
       function mintItem(string memory tokenURI) public{
           _tokenIds.increment();
           uint256 newItemId = _tokenIds.current();
           _mint(msg.sender, newItemId);
           _setTokenURI(newItemId, tokenURI);
           emit NewHarmonyNFT(msg.sender, newItemId, tokenURI);
       }
   }

3. Build smart contract

   Now the NFT smart contract is ready, let's compile it.

   Copy

   truffle compile

   If the contract compiles successfully, related manifest files will be generated in build/contracts, which we will use later in this tutorial. (Tip: If you get a solidity compiler version incompatibility error, we can configure it in truffle.js to use the right compiler version.)

4. Create deployment script

   Next, we need to to deploy the Solidity contract to the Harmony blockchain. Create a file named 2_deploy_contracts.js under migrations folder with the following code:

   Copy

   var HarmonyNft = artifacts.require("HarmonyNFT");
   
   module.exports = function(deployer) {
     deployer.deploy(HarmonyNft);
   };

5. Deploy NFT contract to Harmony Testnet

   In order to deploy the NFT smart contract to Harmony Testnet, you need to let Truffle which network configuration and which Harmony wallet to use. You can do this by configuring truffle in truffle-config.js.

   First, install @truffle/hdwallet-provider via npm.

   Copy

   npm install --save-dev @truffle/hdwallet-provider

   Add harmony testnet configuration to truffle-config.js file. Also make sure requesting some TestNet token (ONE) from Harmony TestNet Faucet to the wallet so we can pay for transaction fees for smart contract deployment.

   Copy

   const HDWalletProvider = require('@truffle/hdwallet-provider');
   //If you have a Harmony wallet in MetaMask, you can export the private key.
   const privateKeyTest = '<ADD-YOUR-PRIVATE-KEY-HERE>';
   
   ....<other code>....
   networks: {
       harmonyTestnet: {
         provider: () => {
           if (!privateKeyTest.trim()) {
             throw new Error(
               'Please enter a private key with funds, you can use the default one'
             );
           }
           return new HDWalletProvider({
             privateKeys: [privateKeyTest],
             providerOrUrl: 'https://api.s0.b.hmny.io',
           });
         },
         network_id: 1666700000,
       },
     },
   ... <other code>...

   Now the truffle configuration is all set, we can run the following command to deploy the NFT contract to Harmony Testnet.

   Copy

   truffle deploy --network harmonyTestnet

   Once the smart contract is deployed success, remember to record your smart contract address which we will also use later. You can also find your NFT contract on Harmony Testnet blockchain explorer, also test it on Remix.

Part 2: Connect to Metamask

In this step, we will write some front-end code to connect to a MetaMask wallet so that you can use it to mint the NFT and pay transaction fees.

Before we move forward, make sure we have installed MetaMask browser extension and add Harmony Network RPC Endpoint (we will use Harmony Testnet in this tutorial). Check more instructions here.

Now, let's start coding.

1. Create a WalletConnect component

   This component will detect the wallet provider and connect to MetaMask. Go to the harmony-nft/src folder which was created as part of your React app in Part 1.

   Within harmony-nft/src, create a new folder components. Inside components, create a WalletConnect.js file and paste in the following code:

   Also make sure requesting some TestNet token (ONE) from Harmony TestNet Faucet to the wallet so we can pay for transaction fees for minting NFT on Harmony Blockchain.

   Copy

   //The core code to detect wallet provider and connect to MetaMask
   const connectWalletHandler = async() => {
   		if (window.ethereum && window.ethereum.isMetaMask) {
   			console.log('MetaMask Here!');
   
   			try {
   				const accounts = await window.ethereum.request({ method: 'eth_requestAccounts'});
   				accountChangedHandler(accounts[0]);
   				setConnButtonText('Wallet Connected');
   				setWalletConnected(true);
   			} catch (error) {
   				setErrorMessage(error.message);
   			}
   
   		} else {
               setWalletConnected(false);
   			console.log('Need to install MetaMask');
   			setErrorMessage('Please install MetaMask browser extension to interact');
   		}
   	}

2. Add the WalletConnect component to App.js

   Copy

   import WalletConnect from './components/WalletConnect'
   ...<other code>...
   function App() {
     return (
       <div className='App'>
         <div className='logos'>
           <img className='harmony' src={harmonyLogo} alt="Harmony Logo"/>
           <img className='nftStorage' src={nftStorageLogo} alt="Harmony Logo"/>
         </div>
         <WalletConnect/>
       </div>
     );
   }

   Now, let's test the wallet connection function. Run the following command to start the React application.

   Copy

   npm start

   Once the application is up, you can click the Connect Wallet button to invoke the MetaMask and authorize the connection.

Part 3: MintNFT process

In this step, we will write the code that mints the NFT. Have the following items ready:

• NFT Smart Contract deployed to Harmony Testnet.

  • NFT contract address

  • NFT contract manifest JSON file

• Metamask browser extension installed and filled your wallet with some TestNet token - ONE.

In this step, we will write code to mint a NFT on Harmony blockchain and also upload your NFT asset and metadata to IPFS & Filecoin so that your NFT is truly decentralized other than storing on centralized cloud. Here, we will use a tool called NFT.Storage which offers free and long-term storage on IPFS and Filecoin.

1. Create a NFT.Storage account.

   In order to use NFT.Storage to upload NFT assets, we will need to sign up an account and create a new API Key which will be used in our code to access NFT.Storage services.

   Also we will use ethers to interact with MetaMask to invoke NFT smart contract which is deployed on Harmony blockchain.

2. Create mintNFT component

   Now we will create a MintNFT.js component in src/components folder. Let's first create a form to upload NFT Images in MintNFT.js.

   Copy

   import React, {useState} from 'react';
   const MintNFT =() => {
     const [uploadedFile, setUploadedFile] = useState();
   
     const handleFileUpload = (event) => {
         setUploadedFile(event.target.files[0]);
     }
   
     const mintNFTToken = async(inputFile) =>{
         //Will add MintNFT logic here.
     }
   
     return(
         <div className='MintNFT'>
             <form>
                 <h3>Mint your NFT on Harmony & Filecoin/IPFS</h3>
                 <input type="file" onChange={handleFileUpload}></input>
                 <button onClick={e=>mintNFTToken(e, uploadedFile)}>Mint NFT</button>
             </form>
         </div>
     )
   }
   export default MintNFT;

   Once the NFT image is captured via form upload, we will upload the NFT asset and metadata to IPFS/Filecoin via NFT.storage, then invoke the NFT smart contract on Harmony to mint a new item. The basic logic will be like following:

   Copy

   const mintNFTToken = async(event, uploadedFile) =>{
       //1. Upload NFT content via NFT.storage
       const metaData = await uploadNFTContent(uploadedFile);
   
       //2. Mint a NFT token on Harmony
       const mintNFTTx = await sendTxToHarmony(metaData);
   }

3. Upload NFT asset via NFT.Storage

   Now let's set up NFT.Storage so you can upload NFT assets.

   • Install NFT.Storage dependency in your React app.

     Copy

     npm install nft.storage

   • We are all set to start coding your logic. Add the following code blocks to MintNFT.js. (You can also copy the entire sample file from Github.)

   First, import NFTstorage and get the API Key that we created in the first step.

   Copy

   import { NFTStorage } from "nft.storage";
   const APIKEY = '<Your-API-KEY>';
   ...

   • Then, initialize the NFTStorage connection using your API KEY.

     Copy

     const uploadNFTContent = async(inputFile) =>{
     	//Initialize NFTStorage
         const nftStorage = new NFTStorage({token: APIKEY,});
     }

   • We can simply call nftStorage.store() to upload NFT content, which will upload your NFT as well as its related metadata to IPFS & Filecoin. You can customize your NFT metadata by updating properties like name and description.

     Copy

     const uploadNFTContent = async(inputFile) =>{
         //Initialize NFTStorage
         const nftStorage = new NFTStorage({token: APIKEY,});
         try {
             //Upload NFT to IPFS & Filecoin
             const metadata = await nftStorage.store({
                 name: 'Harmony NFT collection',
                 description: 'This is a Harmony NFT collenction stored on IPFS & Filecoin.',
                 image: file
             });
             return metadata;
     
         } catch (error) {
             setErrorMessage("Could not save NFT to NFT.Storage - Aborted minting.");
             console.log(error);
         }
     }

     If NFT asset is uploaded successfully, NFT.Storage will do the following two things:

     • Store NFT image on IPFS & Filecoin.

     • Update NFT metadata with the IPFS link to your NFT image, then also store the NFT metadata on IPFS & Filecoin.

4. Mint a new NFT on Harmony

   After getting the metadata on IPFS, we can invoke the NFT smart contract on Harmony to mint a new NFT using that metadata as tokenURI.

   In this step, we will need to use ethers to interact with Metamask, so we first install this dependency.

   Copy

   npm install ethers

   In order to invoke the NFT contract we have deployed to Harmony Testnet, we need to grab the contract ABI from the manifest JSON file which was generated via smart contract compilation.

   Copy

   //run this command under harmony-nft folder
   cp ../build/contracts/HarmonyNFT.json src/abi/

   Then we are ready to write code to send MintNFT transaction in MintNFT.js . This will import ethers and the smart contract manifest file, and also create a nftContractAddress for the deployed NFT contract.

   Copy

   import HarmonyNFT from "../abi/HarmonyNFT.json";
   import { ethers } from 'ethers';
   
   const nftContractAddress = '0x494543afa8445025B9dBc7a39EdC7Fc624cA46F6';

   Then we can load the deployed NFT contract and invoke mintItem method.

   Copy

   //Add this code to load deployed NFT contract and invoke mintItem method.
   const sendTxToHarmony = async(metadata) =>{
       try {
           const provider = new ethers.providers.Web3Provider(window.ethereum);
           const connectedContract = new ethers.Contract(
               nftContractAddress,
               HarmonyNFT.abi,
               provider.getSigner()
           );
           const mintNFTTx = await connectedContract.mintItem(metadata.url);
           console.log(mintNFTTx);
       } catch (error) {
           setErrorMessage("Failed to send tx to Harmony.");
           console.log(error);
       }
   }

5. Preview the new minted NFT

   By now, we have all the codes to upload NFT data, send mint item transaction to Harmony. If everything works as expected, we will be able to mint a fresh NFT with its images and metadata stored on IPFS & Filecoin, minting transaction recorded on Harmony Blockchain. Let's add some code to preview our fresh minted NFT, including the NFT image, NFT metadata on IPFS and mintNFT transaction on Harmony.

   Copy

   const MintNFT =() => {
     ...
         const [imageView, setImageView] = useState();
         const [metaDataURL, setMetaDataURl] = useState();
         const [txURL, setTxURL] = useState();
         const [txStatus, setTxStatus] = useState();
     ...
     const mintNFTToken = async(inputFile) =>{
         ...
         //3. review your nft
         previewNFT(metaData, mintNFTTx);
     }
     ...
     const previewNFT = (metaData, mintNFTTx) =>{
         let imgViewString = getIPFSGatewayURL(metaData.data.image.pathname);;
         setImageView(imgViewString);
         setMetaDataURl(getIPFSGatewayURL(metaData.url));
         setTxURL('https://explorer.pops.one/tx/'+ mintNFTTx.hash);
         setTxStatus("NFT is minted successfully!");
     }
   
     //
     const getIPFSGatewayURL = (ipfsURL)=>{
         let urlArray = ipfsURL.split("/");
         let ipfsGateWayURL = `https://${urlArray[2]}.ipfs.dweb.link/${urlArray[3]}`;
         return ipfsGateWayURL;
     }
     ...
     return(
         <div className='MintNFT'>
             <form>
                 <h3>Mint your NFT on Harmony & Filecoin/IPFS</h3>
                 <input type="file" onChange={handleFileUpload}></input>
                 <button onClick={e=>mintNFTToken(e)}>Mint NFT</button>
             </form>
             {errorMessage}
             {txStatus && <p>{txStatus}</p>}
             {imageView && <img className='NFTImg' src={imageView} alt="NFT image preview"/>}
             {metaDataURL && <p><a href={metaDataURL}>Metadata on IPFS</a></p>}
             {txURL && <p><a href={txURL}>See the mint transaction</a></p>}
         </div>
     )
   }

   You can find the full MintNFT.js file on Github.