DEV Community: krinza.eth (🧱, 🚀)

How to fetch all NFTs owned by a particular Wallet Address using Ankrjs

krinza.eth (🧱, 🚀) — Sun, 09 Oct 2022 20:32:14 +0000

In this tutorial, we’ll be fetching all the NFTs owned by a particular wallet or owner across multiple blockchains such as Ethereum, Polygon, and Fantom, to name a few, using Ankr's Advanced Multichain APIs↗.

Ankr Advanced APIs

Ankr's Advanced Multichain APIs are the collection of RPC methods created to simplify querying blockchain data. These APIs do all the heavy lifting for us so that we can query on-chain data in a matter of seconds.

Currently, it supports Eight EVM compatible chains: Ethereum, Fantom, Binance Smart Chain, Syscoin, Optimism, Polygon, Avalanche, Arbitrum, with more EVM and non-EVM chains coming soon. To interact with Ankr's Advanced APIs, we are going to use a JavaScript library named Ankr.js↗.

Getting Started

Prerequisite: To successfully finish this guide, you'll need Node.js↗ and Yarn↗ installed on your machine.

Step 1: Setting Up Next.js Starter Application

First up, navigate into the directory of your choice where you want to initiate this project and run the following command in your terminal to set up a new Next.js starter page:

yarn create next-app --ts ankrjs-fetch-nfts

You'll be able to see a couple of files and folders being created for you. Let's dive into the newly created directory and start the development server on localhost:3000.

cd ankrjs-fetch-nfts

yarn dev

Visit localhost:3000 to view the starter application and it will resemble the screen attached below:

Step 2: Installing and Setting Up Ankr.js

In this section, we will install and set up Ankr.js for querying NFT data from the blockchain for a given wallet address.

We will start by installing the ankr.js package from npm:

yarn add @ankr.com/ankr.js

Now that we have installed the Ankr.js library, let's set up Ankr.js by creating a new file named apis.ts at the root of your project directory. We will initialize Ankr.js in this file.

File: ./apis.ts

import AnkrscanProvider from '@ankr.com/ankr.js';
import type { Blockchain } from '@ankr.com/ankr.js/dist/types';

const provider = new AnkrscanProvider('');

To interact with Ankr's Advanced APIs, we have created a provider instance that will serve as an interface to the APIs required to fetch data.

Step 3: Create getNFTs Function

In this step, you will create a getNfts function that accepts a walletAddress and returns a list of NFTs owned by that address.

Here, we are going to utilize the getNFTsByOwner function provided by Ankr.js for this.

File: ./apis.ts

import AnkrscanProvider from '@ankr.com/ankr.js';
import type { Blockchain } from '@ankr.com/ankr.js/dist/types';

const provider = new AnkrscanProvider('');

export const getNfts = async (address: string) => {
  const { assets } = await provider.getNFTsByOwner({
    walletAddress: address,
    blockchain: 'eth',
  });
  return {
    nfts: assets,
  };
};

And that's it.

Let's call this function on our page i.e. ./pages/index.tsx to see the fetched NFTs by the owner's wallet address and log the output. To do so, clear the code from the index.tsx file and replace it with the one given below:

File: ./pages/index.tsx

import type { NextPage } from 'next';
import { useEffect } from 'react';
import { getNfts } from '../apis';

const Home: NextPage = () => {
  useEffect(() => {
    (async () => {
      const { nfts } = await getNfts(
        '0xd8da6bf26964af9d7eed9e03e53415d37aa96045'
      );
      console.log({ nfts });
    })();
  }, []);

  return (
  <div className='p-10 flex flex-col items-center'>
      <h1 className='text-3xl font-bold'>NFTs</h1>
    </div>
  );
};

export default Home;

Now, let's see the NFT logs of an inputted wallet address in the developer console of a browser.

Head over to your localhost and use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).

You should be able to see the list of NFTs owned by a particular address.

You can also extend the toggle to dive into the details of the NFTs held by the owner. Details include: blockchain, collectionName, contractAddress, contractType, imageUrl, name, symbol, tokenId and tokenUrl.

GitHub Repo

Find Code Here!

You can also extend what you just learned here into building a Multichain NFT Viewer.↗

How to check your Account Balance across Multiple Blockchains using Ankrjs

krinza.eth (🧱, 🚀) — Sun, 09 Oct 2022 20:23:06 +0000

In this tutorial, we’ll be fetching the account balances from multiple blockchains such as Ethereum, Polygon, and Fantom, to name a few, using Ankr's Advanced Multichain APIs↗.

Refresher on Ankr Advanced APIs

Currently, it supports six EVM compatible chains: Ethereum, Fantom, Binance Smart Chain, Polygon, Avalanche, Arbitrum, with more EVM and non-EVM chains coming soon. To interact with Ankr's Advanced APIs, we are going to use a JavaScript library named Ankr.js↗.

Getting Started

Prerequisite: To successfully finish this guide, you'll need Node.js↗ and Yarn↗ installed on your machine.

Step 1: Setting Up Next.js Starter Application

First up, navigate into the directory of your choice where you want to initiate this project and run the following command in your terminal to set up a new Next.js starter page:

yarn create next-app --ts ankrjs-account-balance

You'll be able to see a couple of files and folders being created for you. Let's dive into the newly created directory and start the development server on localhost:3000.

cd ankrjs-account-balance

yarn dev

Visit localhost:3000 to view the starter application and it will resemble the screen attached below:

Step 2: Installing and Setting Up Ankr.js

In this section, we will install and set up Ankr.js for querying account balances across multichains.

We will start by installing the ankr.js package from npm:

yarn add @ankr.com/ankr.js

Now that we have installed the Ankr.js library, let's set up Ankr.js by creating a new file named apis.ts at the root of your project directory. We will initialize Ankr.js in this file.

File: ./apis.ts

import AnkrscanProvider from '@ankr.com/ankr.js';
import type { Blockchain } from '@ankr.com/ankr.js/dist/types';

const provider = new AnkrscanProvider('');

To interact with Ankr's Advanced APIs, we have created a provider instance that will serve as an interface to the APIs required to fetch data.

Step 3: Create Function to Fetch Total Balance

In this step, we will first create a getAccountBalance function in the ./apis.ts file, which will accept a walletAddress, and return the coin and the respective token balance. Here we are going to utilize the getAccountBalance↗ method provided by Ankr.js.

File: ./apis.ts

import AnkrscanProvider from '@ankr.com/ankr.js';
import type { Blockchain } from '@ankr.com/ankr.js/dist/types';

const provider = new AnkrscanProvider('');

//defining the list of supported blockchains
const listOfChains: Blockchain[] = ['eth', 'arbitrum', 'avalanche', 
'bsc', 'fantom', 'polygon', ];

//key-value pair mapping of chains to their native symbols
export const chainsToNativeSymbols: { [key in Blockchain]: string } = {
  eth: 'ETH',
  arbitrum: 'ETH',
  avalanche: 'AVAX',
  bsc: 'BNB',
  fantom: 'FTM',
  polygon: 'MATIC',
};

//getAccountBalance function to fetch coins and their respective token balances
export const getAccountBalance = async (walletAddress: string) => {
  return provider.getAccountBalance({
    walletAddress,
  });
};

Let's call this function on our page i.e. ./pages/index.tsx to check the account balances. To do so, clear the code from the index.tsx file and replace it with the one given below:

File: ./pages/index.tsx

import { useEffect } from 'react';

import {
  getAccountBalance,
} from '../apis';

function App() {

  useEffect(() => {
    (async () => {
      const  total  = await getAccountBalance(
        "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
      );
      console.log({ total });
    })();
  }, []);

  return (
    <div className='p-10 flex flex-col items-center'>
      <h1 className='text-3xl font-bold'>Account Balance</h1>
    </div>
  );
}

export default App;

Now, let's see the Account Balances of an inputted wallet address in the developer console of a browser.

Head over to your localhost and use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).

You should be able to see the list of chains with their respective tokens and account balances.

[Optional]: Calculating the Net Worth

To calculate the sum of balances (net worth) across the chains we will create a new function in the apis.ts file and let's call it getTotalMultichainBalance.

File: ./apis.ts

import AnkrscanProvider from '@ankr.com/ankr.js';
import type { Blockchain } from '@ankr.com/ankr.js/dist/types';

const provider = new AnkrscanProvider('');

//defining the list of supported blockchains
const listOfChains: Blockchain[] = ['eth', 'arbitrum', 'avalanche', 
'bsc', 'fantom', 'polygon', ];

//key-value pair mapping of chains to their native symbols
export const chainsToNativeSymbols: { [key in Blockchain]: string } = {
  eth: 'ETH',
  arbitrum: 'ETH',
  avalanche: 'AVAX',
  bsc: 'BNB',
  fantom: 'FTM',
  polygon: 'MATIC',
};

//getAccountBalance function to fetch coins and their respective token balances
export const getAccountBalance = async (
  walletAddress: string,
  blockchain: Blockchain
) => {
  return provider.getAccountBalance({
    walletAddress,
    blockchain,
  });
};

//use getAccountBalance to sum total balance across chains
export const getTotalMultichainBalance = async (walletAddress: string) => {
  let total = 0;
  for await (const chain of listOfChains) {
    const { totalBalanceUsd, assets } = await getAccountBalance(
      walletAddress,
      chain
    );
    total += +totalBalanceUsd;
  }
  return total;
};

Let's call this function on our page to check the total account balance.

File: ./pages/index.tsx

import { useEffect } from 'react';

import {
  getTotalMultichainBalance,
} from '../apis';

function App() {

  useEffect(() => {
    (async () => {
      const  total  = await getTotalMultichainBalance(
        "0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
      );
      console.log({ total });
    })();
  }, []);

  return (
    <div className='p-10 flex flex-col items-center'>
      <h1 className='text-3xl font-bold'>Net Worth</h1>
    </div>
  );
}

export default App;

Let's see the net worth of an inputted wallet address in the developer console of a browser.

Head over to your localhost and use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).

You should be able to see the net worth.

GitHub Repo

Find Code Here!

You can also extend what you just learned here into building a Multichain DeFi Board.↗

How to build an End-to-End Donation-Based Crowdfunding dApp on Polygon

krinza.eth (🧱, 🚀) — Sun, 31 Jul 2022 14:01:00 +0000

In this tutorial, well be building a donation-based crowdfunding dApp on Polygon where users can start a fundraising project for anyone to contribute and support the campaign by pledging the amount of their wish.

By the end of this tutorial, you'll be able to:

deploy crowdfunding smart contract on polygon
and create a full-fledged frontend for your dApp

The Functionalities

Start New Campaign users will be able to start a new crowdfunding project by inputting some details about the campaign like title, story and goal amount to be raised.
View Projects users can see all the existing projects and campaign details on the homepage
Make Donation anyone can fund to the project they want to support in Matic tokens

The Tech Stack

Smart Contract Language: Solidity
Smart Contract Deploy and Verify Scripts: Javascript
Smart Contract Development Environment: Hardhat
Frontend Language: React - TypeScript
Wallet Connect: Rainbowkit
Interacting with Contract through Frontend: Wagmi
User Interface: TailwindCSS
RPC provider: Ankr

Getting Started

Prerequisite: To successfully finish this guide, you'll need Node.js and Yarn installed on your machine.

We will begin the project by forking this Crowdfunding-dApp🌈 Starter Repository that I have prepared which includes basic configurations, wallet connect with rainbowkit and complete structure of empty files and folders to get us started with our dApp. To clone the repo, click the fork button at the top-right of the linked GitHub page.

Note in the code block below, make sure you paste the repo URL of your own cloned repository.

Once the repository has been forked, clone it locally to get building on top of it by following the steps below:

Navigate into a directory of your choice and run the following command in your terminal to set up a local clone of the starterkit
Now, let's navigate into the cloned directory and set up the development environment
To launch the starter kit, run the following command in the VSCode terminal

Step 1: Setup Hardhat Configs

Navigate back to the project and find the hardhat.config.js file in root directory and the following code:

File: hardhat.config.js

/**
 * @type import('hardhat/config').HardhatUserConfig
 */
 require("dotenv").config();
 require("@nomiclabs/hardhat-ethers");
 require("@nomiclabs/hardhat-etherscan");

 module.exports = {
   solidity: "0.8.15",
   defaultNetwork: "mumbai",
   networks: {
     hardhat: {},
     mumbai: {
       //ankr's free public rpc
       url: "https://rpc.ankr.com/polygon_mumbai",
       accounts: [`0x${process.env.PRIVATE_KEY}`],
     },
   },
   etherscan: {
     apiKey: {
       polygon: process.env.POLYGONSCAN_API_KEY || "",
       polygonMumbai: process.env.POLYGONSCAN_API_KEY || "",
     },
   },
 };

In this file, we have configured the solidity version, network details and plugged Ankr's free public RPC for Polygon Mumbai Testnet.

Did you notice how we are sourcing the PRIVATE_KEY and POLYGONSCAN_API_KEY variable in this file? We are loading them up from process.env using the dotenv library. So before we move ahead to next steps, let's add these variables in our .env file.

Head over to the .env file and create these two environment variables:

File: .env

PRIVATE_KEY=ADD_YOUR_WALLET_PRIVATE_KEY
POLYGONSCAN_API_KEY=ADD_YOUR_POLYGONSCAN_API_KEY

Here, you need to set your wallet's private key and API key from Polygonscan. You can follow their tutorial if you aren't familiar with how to get one.

Step 2: Write Crowdfunding Smart Contract

Now that we have everything setup, we are all ready to write the smart contract for the donation based crowdfund platform. For that, navigate to contracts directory and you'll find crowdfunding.sol file. Add the following code in that file:

File: contracts/crowdfunding.sol

// SPDX-License-Identifier: Unlicensed
pragma solidity ^0.8.15;

//contract to record all crowdfunding projects
contract CrowdFactory {
    address[] public publishedProjs;

    event Projectcreated(
        string projTitle,
        uint256 goalAmount,
        address indexed ownerWallet,
        address projAddress,
        uint256 indexed timestamp
    );

    function totalPublishedProjs() public view returns (uint256) {
        return publishedProjs.length;
    }

    function createProject(
        string memory projectTitle,
        uint256 projgoalAmount,
        string memory projDescript,
        address ownerWallet
    ) public {
        //initializing CrowdfundingProject contract
        CrowdfundingProject newproj = new CrowdfundingProject(
            //passing arguments from constructor function
            projectTitle,
            projgoalAmount,
            projDescript,
            ownerWallet
        );

        //pushing project address
        publishedProjs.push(address(newproj));

        //calling Projectcreated (event above)
        emit Projectcreated(
            projectTitle,
            projgoalAmount,
            msg.sender,
            address(newproj),
            block.timestamp
        );
    }
}

contract CrowdfundingProject {
    //defining state variables
    string public projTitle;
    string public projDescription;
    uint256 public goalAmount;
    uint256 public raisedAmount;
    address ownerWallet; //address where amount to be transfered

    event Funded(
        address indexed donar,
        uint256 indexed amount,
        uint256 indexed timestamp
    );

    constructor(
        string memory projectTitle,
        uint256 projgoalAmount,
        string memory projDescript,
        address ownerWallet_
    ) {
        //mapping values
        projTitle = projectTitle;
        goalAmount = projgoalAmount;
        projDescription = projDescript;
        ownerWallet = ownerWallet_;
    }

    //donation function
    function makeDonation() public payable {
        //if goal amount is achieved, close the proj
        require(goalAmount > raisedAmount, "GOAL ACHIEVED");

        //record walletaddress of donor
        (bool success, ) = payable(ownerWallet).call{value: msg.value}("");
        require(success, "VALUE NOT TRANSFERRED");

        //calculate total amount raised
        raisedAmount += msg.value;

        emit Funded(msg.sender, msg.value, block.timestamp);
    }
}

You'll see we have initiated two contracts:

CrowdfundingProject - deals with a single project or campaign being create. It includes the makeDonation() function which calculates the amount raised and checks if the goalAmount is achieved or not while recording the wallet address of the donor.
CrowdFactory - records for all the crowdfunding projects being created and launched.

Now, let's compile hardhat to see if everything's good to go!

yarn hardhat compile

# output
# Compiled n Solidity file successfully

Step 3: Write the Deploy Script(s)

Now that we've got our contract set up, let's create the deployment scripts. There will be two scripts, one for deploying the CrowdFactory contract and second for a dummy campaign creation with some dummy project info.

For the first script, navigate to the scripts folder and add the following code in deploy.js file

File: scripts/deploy.js

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

async function main() {
  // Grab the contract factory
  const CrowdFactory = await ethers.getContractFactory("CrowdFactory");

  // Start deployment, returning a promise that resolves to a contract object
  const crowd = await CrowdFactory.deploy(); // Instance of the contract
  await crowd.deployed();
  console.log("Contract deployed to address:", crowd.address);
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

Save this file and run the following command to deploy the CrowdFactory contract

yarn hardhat run scripts/deploy.js --network mumbai

Running this command will prompt you with the address of the deployed contract. Here's the contract I deployed.

Note your contract address as you will need it in your next deployment script.

Before we go on deploying another contract, let's save this contract address in a file named constants.tx under src directory.

File: src/constants.tx

//add your contract's address here
export const FACTORY_CONTRACT_ADDRESS = "0xA6A30bCc591107d932CA12a50FC616BAb5E58cdA";

//just for testing purpose
export const DEBUG = false;

Now let's deploy another contract with a sudo campaign details for us to get started. For this, we are going to use createCampaigns.js file under scripts directory. Navigate to that file and save the following code.

Note: In this file you need to edit two things. First the contract address we got in the above step. Replace your contract address with the address mentioned already in the script (check line 6). Second, on line 13, replace my wallet address with yours.

File: scripts/createCampaigns.js

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

async function main() {
const contract = await ethers.getContractAt("CrowdFactory",
//add the contract address that you just deployed in the last step
"0xA6A30bCc591107d932CA12a50FC616BAb5E58cdA") //line 6

await contract.createProject(
"first title", 
ethers.utils.parseUnits("0.1", 18), 
"description", 
//insert your wallet's public key
"0x81AE60AC85F0b81Cc00e2B294d83A03f40d1deF5") //line 13
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

Once done, run the following command to deploy this script as well:

yarn hardhat run scripts/createCampaigns.js --network mumbai

Step4: Get Contract ABI for Verified Codes

In this step, we are going to do two things:

we will verify our smart contracts on Polygonscan
get contract ABIs for verified contract source codes

Verifying Smart Contracts

Go to verify-factory.js file under scripts folder and add the following verify script:

Note: In this file you need to edit one thing. The contractAddress you see on line number 5 needs to be replaced by your contract's address.

File: scripts/verify-factory.js

const { run } = require("hardhat");

async function main() {
//add the contract address that you deployed in the prev steps
  const contractAddress = "0xA6A30bCc591107d932CA12a50FC616BAb5E58cdA"; //line 5

  try {
    await run("verify:verify", {
      address: contractAddress,
      constructorArguments: [],
      contract: "contracts/crowdfunding.sol:CrowdFactory",
    });
  } catch (error) {
    if (error.message.toLowerCase().includes("already verified")) {
      console.log("Already verified!");
    } else {
      console.log(error);
    }
  }
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

Now in the terminal, run this command to verify the CrowdFactory smart contract on polygonscan:

yarn hardhat run scripts/verify-factory.js --network mumbai

Output of this command:

Successfully verified contract CrowdFactory on Etherscan.https://mumbai.polygonscan.com/address/0xA6A30bCc591107d932CA12a50FC616BAb5E58cdA#code

Head over to the Mumbai Polygonscan link you get as the output after running the command and it will land you to the verified contract's page
Scroll down and you'll find Contract ABI section

Copy the ABI and paste it in the crowdfactory.json file under src/abis directory
Go back to the same polygonscan link, click on the Read Contract button and query "0" from the publishedProjs.

Copy and save the address it outputs, we will need it in line 5 of the next file.

Now, we are going to follow the similar steps to first verify our dummy crowdfunding project and get the contract's ABI.

Navigate to verify-crowdfundingproject.js file under scripts folder and insert the following code in the file:

Replace contractAddress in the file with the one we saved above querying the 0th publishedProj and also insert your wallet address on line 9

File: scripts/verify-crowdfundingproject.js

const { run, ethers } = require("hardhat");

async function main() {
  //replace contractAddress with the one we saved above querying the 0th publishedProj
  const contractAddress = "0xcf092E8bDCDC1FA8B15Ebeb9D97453D498067Df1"; //line5
  const args = [
    "first title", ethers.utils.parseUnits("0.1", 18), "description",
//Insert you wallet's public address here
"YOUR_WALLET_PUBLIC_ADDRESS", //line 9

  ];

  try {
    await run("verify:verify", {
      address: contractAddress,
      constructorArguments: args,
      contract: "contracts/crowdfunding.sol:CrowdfundingProject",
    });
  } catch (error) {
    if (error.message.toLowerCase().includes("already verified")) {
      console.log("Already verified!");
    } else {
      console.log(error);
    }
  }
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

Once you save the above file, run this command to verify it on polygonscan:

yarn hardhat run scripts/verify-crowdfundingproject.js --network mumbai

Output of this command:

Successfully verified contract CrowdfundingProject on Etherscan. https://mumbai.polygonscan.com/address/0xcf092E8bDCDC1FA8B15Ebeb9D97453D498067Df1#code

Head over to the Mumbai Polygonscan link you get as the output after running the command and it will land you to the verified contract's page
Scroll down, find Contract ABI section and copy-paste ABI in the crowdfundingproject.json file under src/abis directory

Once this is done, run the following command in the terminal:

yarn typechain

TypeChain is a typescript binding and code generator used to create smart contracts that features static typing and IDE support.

Step 5: Write Hooks, Utils and Read

As the heading suggests, this section will be no less than a lot of code. We will begin by updating the hooks.ts under src directory. In this file, we will be creating generic hooks to access the write and read functions of both "crowdfactory" and "CrowdfundingProject" contracts.

File: src/hooks.ts

import { useContract, useContractRead, useContractWrite } from "wagmi";

import CROWDFACTORY_ABI from "./abis/crowdfactory.json";
import CROWNFUNDINGPROJECT_ABI from "./abis/crowdfundingproject.json";
import { FACTORY_CONTRACT_ADDRESS } from "./constants";
import type { Crowdfactory } from "./contract-types/Crowdfactory";
import type { Crowdfundingproject } from "./contract-types/Crowdfundingproject";

/*//////////////////////////////////////////////////////////////
                              CROWD FACTORY
//////////////////////////////////////////////////////////////*/

export function useCrowdFactoryContract(): Crowdfactory {
  const contract = useContract({
    addressOrName: FACTORY_CONTRACT_ADDRESS,
    contractInterface: CROWDFACTORY_ABI,
  });

  return contract as Crowdfactory;
}

// create a generic hook to access write functions of contract
export function useCrowdFactoryFunctionWriter(
  functionName: string
): ReturnType<typeof useContractWrite> {
  const contractWrite = useContractWrite({
    addressOrName: FACTORY_CONTRACT_ADDRESS,
    contractInterface: CROWDFACTORY_ABI,
    functionName: functionName,
  });

  return contractWrite;
}

export interface UseCrowdFactoryFunctionReaderProps {
  functionName: string;
  args?: any[];
}
// create a generic hook to access read functions of contract
export function useCrowdFactoryFunctionReader({
  functionName,
  args,
}: UseCrowdFactoryFunctionReaderProps): ReturnType<typeof useContractRead> {
  const contractRead = useContractRead({
    addressOrName: FACTORY_CONTRACT_ADDRESS,
    contractInterface: CROWDFACTORY_ABI,
    functionName: functionName,
    args: args,
    watch: true,
  });

  return contractRead;
}

/*//////////////////////////////////////////////////////////////
                          CROWD FUNDING PROJECT
//////////////////////////////////////////////////////////////*/

export function useCrowdfundingProjectContract(
  contractAddress: string
): Crowdfundingproject {
  const contract = useContract({
    addressOrName: contractAddress,
    contractInterface: CROWNFUNDINGPROJECT_ABI,
  });

  return contract as Crowdfundingproject;
}

export interface UseCrowdfundingProjectFunctionWriterProps {
  contractAddress: string;
  functionName: string;
}

export function useCrowdfundingProjectFunctionWriter({
  contractAddress,
  functionName,
}: UseCrowdfundingProjectFunctionWriterProps): ReturnType<
  typeof useContractWrite
> {
  const contractWrite = useContractWrite({
    addressOrName: contractAddress,
    contractInterface: CROWNFUNDINGPROJECT_ABI,
    functionName: functionName,
  });

  return contractWrite;
}

export interface UseCrowdfundingProjectFunctionReaderProps {
  contractAddress: string;
  functionName: string;
  args?: any[];
}

// create a generic hook to access read functions of contract
export function useCrowdfundingProjectFunctionReader({
  contractAddress,
  functionName,
  args,
}: UseCrowdfundingProjectFunctionReaderProps): ReturnType<
  typeof useContractRead
> {
  const contractRead = useContractRead({
    addressOrName: contractAddress,
    contractInterface: CROWNFUNDINGPROJECT_ABI,
    functionName: functionName,
    args: args,
    watch: true,
  });

  return contractRead;
}

Now, let's move to the other file named " utils.ts". In this file we are creating helper functions to convert wei into matic.

File: src/utils.ts

//helper functions to convert wei into matic

import type { BigNumberish } from "ethers";
import { BigNumber, utils } from "ethers";

/**
 * Return the `value` converted to BigNumber.
 *
 * @param value string value preferred.
 * @return BigNumber value
 */
export function toBN(value: BigNumberish): BigNumber {
  return BigNumber.from(value);
}

/**
 * Return the `gasPrice` converted to gwei.
 * formatUnits(value: BigNumberish, unitName?: BigNumberish | undefined): string
 * BigNumberish -> string, BigNumber, number, BytesLike or BigInt.`https://docs.ethers.io/v5/api/utils/bignumber/#BigNumberish`
 *
 * @param gasPrice BigNumberish value to be converted, preferred is BigNumber.
 * @return string value
 */
export function toGwei(gasPrice: BigNumberish): string {
  return utils.formatUnits(gasPrice, "gwei");
}

/**
 * Return the `value` converted to BigNumber wei.
 * parseUnits(value: string, unitName?: BigNumberish | undefined): BigNumber
 * BigNumberish -> string, BytesLike, BigNumber, number or BigInt.`https://docs.ethers.io/v5/api/utils/bignumber/#BigNumberish`
 *
 * @param value the string value to be converted.
 * @param decimals decimal value or BigNumberish.
 * @return BigNumber value or undefined.
 */
export function toWei(value: string, decimals: number = 18): BigNumber {
  return utils.parseUnits(value, decimals);
}
/**
 * Return the `value` converted to string from wei.
 * formatUnits(value: BigNumberish, unitName?: BigNumberish | undefined): string
 * BigNumberish -> string, BigNumber, number, BytesLike or BigInt.`https://docs.ethers.io/v5/api/utils/bignumber/#BigNumberish`
 *
 * @param value BigNumberish value to be converted, preferred is BigNumber.
 * @param decimals decimal value or BigNumberish.
 * @return string value.
 */
export function fromWei(value: BigNumberish, decimals: number = 18): string {
  return utils.formatUnits(value, decimals);
}

/**
 * Returns true if the string value is zero in hex
 * @param hexNumberString
 */
export default function isZero(hexNumberString: string) {
  return /^0x0*$/.test(hexNumberString);
}

And last but not at all the least, " read.ts" under the src directory which will contain view and pure functions.

File: src/read.ts

//read function
//view and pure functions (Smartcontract)

import type { BigNumber } from "ethers";
import type { Result } from "ethers/lib/utils";

import { DEBUG } from "./constants";
import type { Crowdfactory } from "./contract-types/Crowdfactory";
import type { Crowdfundingproject } from "./contract-types/Crowdfundingproject";
import {
  useCrowdFactoryFunctionReader,
  useCrowdfundingProjectFunctionReader,
} from "./hooks";

/*//////////////////////////////////////////////////////////////
                              CROWD FACTORY
//////////////////////////////////////////////////////////////*/

export function useTotalPublishedProjs(): number | undefined {
  const totalPublishedProjsReader = useCrowdFactoryFunctionReader({
    functionName: "totalPublishedProjs",
  });
  const totalPublishedProjs:
    | Awaited<ReturnType<Crowdfactory["totalPublishedProjs"]>>
    | Result
    | undefined = totalPublishedProjsReader.data;

  DEBUG &&
    console.log("totalPublishedProjs: ", totalPublishedProjs?.toString());

  if (!totalPublishedProjs) return undefined;

  return parseInt(totalPublishedProjs.toString()) as number;
}

export function usePublishedProjs(index: number): string | undefined {
  const publishedProjsReader = useCrowdFactoryFunctionReader({
    functionName: "publishedProjs",
    args: [index],
  });
  const publishedProjs:
    | Awaited<ReturnType<Crowdfactory["publishedProjs"]>>
    | Result
    | undefined = publishedProjsReader.data;

  DEBUG && console.log("publishedProjs: ", publishedProjs);

  if (!publishedProjs) return undefined;

  return publishedProjs as unknown as string;
}

/*//////////////////////////////////////////////////////////////
                          CROWD FUNDING PROJECT
//////////////////////////////////////////////////////////////*/

export function useProjTitle(contractAddress: string): string | undefined {
  const projTitleReader = useCrowdfundingProjectFunctionReader({
    contractAddress: contractAddress,
    functionName: "projTitle",
  });

  const projTitle:
    | Awaited<ReturnType<Crowdfundingproject["projTitle"]>>
    | Result
    | undefined = projTitleReader.data;

  DEBUG && console.log("projTitle: ", projTitle);

  if (!projTitle) return undefined;

  return projTitle as unknown as string;
}

export function useProjDescription(
  contractAddress: string
): string | undefined {
  const projDescriptionReader = useCrowdfundingProjectFunctionReader({
    contractAddress: contractAddress,
    functionName: "projDescription",
  });

  const projDescription:
    | Awaited<ReturnType<Crowdfundingproject["projDescription"]>>
    | Result
    | undefined = projDescriptionReader.data;

  DEBUG && console.log("projDescription: ", projDescription);

  if (!projDescription) return undefined;

  return projDescription as unknown as string;
}

export function useGoalAmount(contractAddress: string): BigNumber | undefined {
  const goalAmountReader = useCrowdfundingProjectFunctionReader({
    contractAddress: contractAddress,
    functionName: "goalAmount",
  });

  const goalAmount:
    | Awaited<ReturnType<Crowdfundingproject["goalAmount"]>>
    | Result
    | undefined = goalAmountReader.data;

  DEBUG && console.log("goalAmount: ", goalAmount);

  if (!goalAmount) return undefined;

  return goalAmount as unknown as BigNumber;
}

export function useRaisedAmount(
  contractAddress: string
): BigNumber | undefined {
  const raisedAmountReader = useCrowdfundingProjectFunctionReader({
    contractAddress: contractAddress,
    functionName: "raisedAmount",
  });

  const raisedAmount:
    | Awaited<ReturnType<Crowdfundingproject["raisedAmount"]>>
    | Result
    | undefined = raisedAmountReader.data;

  DEBUG && console.log("raisedAmount: ", raisedAmount);

  if (!raisedAmount) return undefined;

  return raisedAmount as unknown as BigNumber;
}

Step 6: Create Components

In this step, we are going to head over to components folder under src directory. First up, navigate to " CreateCampaign.tsx" file and insert the following code. In this file, we will be using custom hook we made in hooks.ts for writing functions along with the coding the UI.

File: src/components/CreateCampaign.tsx

import { DEBUG } from "../constants";
import type { Crowdfactory } from "../contract-types/Crowdfactory";
import { useCrowdFactoryFunctionWriter } from "../hooks";
import { toWei } from "../utils";
import { useAddRecentTransaction } from "@rainbow-me/rainbowkit";
import type { ChangeEvent, FormEvent } from "react";
import { useState } from "react";
import { useAccount } from "wagmi";

function CreateCampaign() {
  const [title, setTitle] = useState<string>("");
  const [amount, setAmount] = useState<string>("");
  const [story, setStory] = useState<string>("");

  const { address } = useAccount();

  // custom hook we made in hooks.ts for writing functions
  const { writeAsync, isError } =
    useCrowdFactoryFunctionWriter("createProject");

  // rainbow kit txn handler
  const addRecentTransaction = useAddRecentTransaction();

  // onChange handler for title
  const handleTitle = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();

    const value = e.target.value;
    DEBUG && console.log("title: ", value);

    // set title
    setTitle(value);
  };

  // onChange handler for amount
  const handleAmount = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();

    const value = e.target.value;
    DEBUG && console.log("amount: ", value);

    // set amount
    setAmount(value);
  };

  // onChange handler for story
  const handleStory = (e: ChangeEvent<HTMLTextAreaElement>) => {
    e.preventDefault();

    const value = e.target.value;
    DEBUG && console.log("story: ", value);

    // set story
    setStory(value);
  };

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    if (!title || !amount || !story || !address) {
      return;
    }

    try {
      e.preventDefault();

      console.log("submit!");

      DEBUG && console.log({ title, amount, story });

      const amountToWei = toWei(amount);
      DEBUG && console.log("amountToWei: ", amountToWei);

      const functionArgs: Parameters<Crowdfactory["createProject"]> = [
        title,
        amountToWei,
        story,
        address,
      ];
      const tx = await writeAsync({
        args: functionArgs,
      });
      console.log("tx >>> ", tx);

      addRecentTransaction({
        hash: tx.hash,
        description: "Create Project Transaction",
      });
    } catch (error) {
      console.log("errror >>> ", error);
    }
  };

  return (
    <>
      <div className="text-center font-bold text-xl mb-2">
        Create Crowdfunding Project
      </div>

      <form
        className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
        onSubmit={handleSubmit}
      >
        <div className="flex flex-wrap -mx-3 mb-6">
          <div className="w-full md:w-1/2 px-3 mb-6 md:mb-0">
            <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
              Campaign Title
            </label>
            <input
              className="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
              type="text"
              placeholder="Campaign Title"
              onChange={handleTitle}
              required
            />
          </div>

          <div className="w-full md:w-1/2 px-3">
            <label
              className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
              htmlFor="grid-password"
            >
              Required Amount
            </label>
            <input
              className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
              type="number"
              min={0}
              step="0.01"
              placeholder="0.00"
              onChange={handleAmount}
              required
            />
          </div>
        </div>

        <div className="flex flex-wrap -mx-3 mb-6">
          <div className="w-full px-3">
            <label className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
              Story
            </label>
            <textarea
              className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
              placeholder="Story"
              onChange={handleStory}
              required
            />
          </div>
        </div>

        <div className="md:flex md:items-center">
          <div className="md:w-1/3"></div>
          <div className="md:w-2/3">
            <button
              className="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded"
              type="submit"
            >
              Create Campaign
            </button>
          </div>

          {/* if error occures display text to try again */}
          {isError && (
            <p className="text-red-500 text-xs italic">
              Error occured! Please try again!.
            </p>
          )}
        </div>
      </form>
    </>
  );
}

export default CreateCampaign;

Now, navigate to " Campaign.tsx" file and the edit the following code. Again in this file, we will use custom hook we made in hooks.ts for writing functions along with the UI. This component deals with the details of a single campaign.

File: src/components/Campaign.tsx

import { DEBUG } from "../constants";
import { useCrowdfundingProjectFunctionWriter } from "../hooks";
import {
  useGoalAmount,
  useProjDescription,
  useProjTitle,
  usePublishedProjs,
  useRaisedAmount,
} from "../read";
import { fromWei, toWei } from "../utils";
import { useAddRecentTransaction } from "@rainbow-me/rainbowkit";
import type { ChangeEvent, MouseEvent } from "react";
import { useState } from "react";

export type CampaignProps = { projectNumber: number };

function Campaign({ projectNumber }: CampaignProps) {
  DEBUG && console.log("projectNumber: ", projectNumber);

  const [value, setValue] = useState<string>("");

  const publishedProjsAddress = usePublishedProjs(projectNumber);

  const projTitle = useProjTitle(publishedProjsAddress || "");
  const projDescription = useProjDescription(publishedProjsAddress || "");
  const goalAmount = useGoalAmount(publishedProjsAddress || "");
  const raisedAmount = useRaisedAmount(publishedProjsAddress || "");

  DEBUG &&
    console.log({
      publishedProjsAddress,
      projTitle,
      projDescription,
      goalAmount,
      raisedAmount,
    });

  // rainbow kit txn handler
  const addRecentTransaction = useAddRecentTransaction();

  // custom hook we made in hooks.ts for writing functions
  const { writeAsync, isError } = useCrowdfundingProjectFunctionWriter({
    contractAddress: publishedProjsAddress || "",
    functionName: "makeDonation",
  });

  const handleValue = (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault();

    const inputValue = e.target.value;
    DEBUG && console.log("value: ", inputValue);

    // set value
    setValue(inputValue);
  };

  const handleDonate = async (e: MouseEvent<HTMLButtonElement>) => {
    try {
      e.preventDefault();

      const valueToWei = toWei(value);
      DEBUG && console.log("valueToWei: ", valueToWei);

      const tx = await writeAsync({
        overrides: {
          value: valueToWei,
        },
      });
      console.log("tx >>> ", tx);

      addRecentTransaction({
        hash: tx.hash,
        description: `Donate ${value} MATIC`,
      });
    } catch (error) {
      console.log("errror >>> ", error);
    }
  };

  if (
    !publishedProjsAddress ||
    !projTitle ||
    !projDescription ||
    !goalAmount ||
    !raisedAmount
  ) {
    return null;
  }

  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <div className="px-6 py-4">
        <div className="font-bold text-xl mb-2">{projTitle}</div>
        <p className="text-gray-700 text-base">{projDescription}</p>
      </div>
      <div className="px-6 pt-4 pb-2">
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
          Goal Amount:
          <span className="text-purple-700">{fromWei(goalAmount)} MATIC</span>
        </span>
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
          Raised Amount:
          <span className="text-purple-700">{fromWei(raisedAmount)} MATIC</span>
        </span>

        <div className="flex items-center py-2">
          <input
            className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none"
            type="number"
            placeholder="0.000"
            min={0}
            step="0.001"
            required
            onChange={handleValue}
          />
          <button
            className="flex-shrink-0 bg-purple-500 hover:bg-purple-400 border-purple-500 hover:border-purple-400 text-sm border-4 text-white py-1 px-2 rounded"
            type="button"
            onClick={handleDonate}
          >
            Donate
          </button>
        </div>

        {/* if error occures display text to try again */}
        {isError && (
          <p className="text-red-500 text-xs italic">
            Error occured! Please try again!.
          </p>
        )}
      </div>
    </div>
  );
}

export default Campaign;

Last, let's edit the " Campaigns.tsx" file and for that, navigate to Campaigns.tsx and add the following code:

File: src/components/Campaigns.tsx

import { DEBUG } from "../constants";
import { useTotalPublishedProjs } from "../read";
import Campaign from "./Campaign";

function Campaigns() {
  // for testing no projects yet
  // const totalPublishedProjs = 0;

  const totalPublishedProjs = useTotalPublishedProjs();
  DEBUG &&
    console.log("totalPublishedProjs: ", totalPublishedProjs?.toString());

  // if totalPublishedProjs not present return nothing
  if (!totalPublishedProjs) {
    return <div className="font-bold text-xl mb-2">No Projects yet!</div>;
  }

  return (
    <>
      <div className="text-center font-bold text-xl mb-2">
        Crowdfunding Projects
      </div>
      <div className="p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
        {/* create an array starting from 0 index */}
        {Array.from(Array(totalPublishedProjs).keys()).map(
          (projectNumber: number, i) => {
            return (
              <div key={i}>
                <Campaign projectNumber={projectNumber} />
              </div>
            );
          }
        )}
      </div>
    </>
  );
}

export default Campaigns;

Step 7: Displaying the UI

Now comes the moment of truth we have been waiting for. All the code, all these functions, contract, and frontend will come together in a form of a single-page application.

In this section, we will edit our "App.tsx" file which will display everything we have been building so far. So let's go and edit the existing code in the file and replace it with this one:

File: src/App.tsx

import Campaigns from "./components/Campaigns";
import CreateCampaign from "./components/CreateCampaign";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import { useAccount } from "wagmi";

function App() {
  const { isConnected } = useAccount();

  return (
    <div className="flex flex-col items-center py-8">
      <h1 className="flex justify-center text-sm sm:text-base md:text-3xl lg:text-4xl pb-10">
        Crowdfunding 💜 Show love to your fav project!
      </h1>

      <div className="flex justify-center">
        <ConnectButton
          showBalance={false}
          accountStatus={{
            smallScreen: "avatar",
            largeScreen: "full",
          }}
        />
      </div>

      {!isConnected ? (
        <div className="text-center font-bold text-xl m-8">
          Please connect to wallet
        </div>
      ) : (
        <>
          <div className="flex gap-6 mt-8">
            <div className="flex flex-col">
              <CreateCampaign />
            </div>
          </div>

          <div className="flex gap-6 mt-8">
            <div className="flex flex-col">
              <Campaigns />
            </div>
          </div>
        </>
      )}
    </div>
  );
}

export default App;

Woah, that was a lot of code that we wrote! Now comes the crunch as we run our dApp in the local dev environment.

yarn dev

And, here's what you should be able to see!

Check the GitHub Repo

If you want to take a look at the full source code, find the repo below.

Crowdfunding-dApp

Next Steps

If you are up for a fun challenge, extend this project into a full-fleshed platform with additional functionalities in the smart contract and improved UI.

Also, feel free to share your learnings and reach out to me on Twitter @kayprasla if you've any doubts or questions for me.

Happy building! 🛠

Explore More Such Tutorials

https://ankr.hashnode.dev/create-a-whats-in-your-wallet-dapp-using-ankrs-multichain-advanced-apis

https://ankr.hashnode.dev/nft-20-creating-a-soulbound-token

https://ankr.hashnode.dev/deploy-and-mint-a-cryptokitties-like-nft-with-erc-721-smart-contract

Create a “What’s in Your Wallet?” dApp using Ankr’s Multichain Advanced APIs

krinza.eth (🧱, 🚀) — Wed, 20 Jul 2022 14:01:32 +0000

In this tutorial, well be building a "What's in Your Wallet?" dApp where users can check their net worth, credits in native balance by chain, and NFTs they hold on multiple blockchains such as Ethereum, Polygon and Fantom (to name a few) using Ankr's Advanced Multichain APIs.

Ankr Advanced APIs

Ankr's Advanced Multichain APIs are the collection of RPC methods created to simplify querying blockchain data. These APIs does all the heavy lifting for us so that we can query on-chain data in a matter of seconds.

Currently, it support six EVM compatible chains: Ethereum, Fantom, Binance Smart Chain, Polygon, Avalanche, Arbitrum, with more EVM and non-EVM chains coming soon.

To interact with Ankr's Advanced APIs, we are going to use a JavaScript library named Ankr.js. Here's the tech stack for this guide:

Vite.js
TailwindCSS as CSS framework (follow their official guide to set it up)
Ankr's Advanced APIs for querying blockchain data

Here's what you'll be able to build by the end of this tutorial:

Now that we have a basic understanding of what we are building and the tools we will be using to achieve the outcome, we can start building our dApp!

Getting Started

Prerequisite : To successfully finish this guide, you'll only need Node.js and Yarn installed on your machine.

We will begin the project by forking this Vite + Tailwind CSS + RainbowKit 🌈 starter repository. We can do so by clicking the 'fork' button at the top-right of the linked GitHub page. It has some basic configurations and setup to get us started with our dApp.

Note in the code block below, make sure you paste the repo URL of your own cloned repository.

Once the repository has been forked, we will clone it locally to get building on top of it by following the steps below:

Navigate into a directory of your choice and run the following command in your terminal to set up a local clone of the starter-kit

git clone https://github.com/kaymomin/StarterKit-DefiDashboard

Now, let's navigate into the cloned directory and install the dependencies in the following section

cd starterkit-defidashboard


yarn

Installing Ankr.js

In this section, we will install and set up Ankr.js for querying NFTs and Tokens related data from the blockchain for a given wallet address.

We will start by installing the ankr.js package from npm:

yarn add @ankr.com/ankr.js

Now that we have installed the Ankr.js library, let's head to the VSCode and open the starterkit-defidashboard folder in our code editor.

To launch the starter kit, run the following command in the VSCode terminal:

yarn dev

and you will be able to see the start-kit webpage. Here's the live demo of what the site will look like at this point.

Setting Up Ankr.js

Now to set up Ankr.js, create a new file named api.ts under the src directory. We will initialize Ankr.js in this file.

File: src/api.ts

import AnkrscanProvider from '@ankr.com/ankr.js';
import type { Blockchain } from '@ankr.com/ankr.js/dist/types';

const provider = new AnkrscanProvider('');

To interact with Ankr's Advanced APIs, we have created a provider instance which will serve as an interface to the APIs required to fetch data.

Creating Function to Fetch Total Balance

In this step, we will first create a getAccountBalance function in the src/api.ts file, which will accept a walletAddress, and return the coin and the respective token balances. Here we are going to utilize the getAccountBalance method provided by Ankr.js to calculate the sum of balance (net worth) across the chains in the getTotalMultichainBalance function.

File: src/api.ts

import AnkrscanProvider from '@ankr.com/ankr.js';
import type { Blockchain } from '@ankr.com/ankr.js/dist/types';

const provider = new AnkrscanProvider('');

//defining the list of supported blockchains
const listOfChains: Blockchain[] = ['eth', 'arbitrum', 'avalanche', 
'bsc', 'fantom', 'polygon', ];

//key-value pair mapping of chains to their native symbols
export const chainsToNativeSymbols: { [key in Blockchain]: string } = {
  eth: 'ETH',
  arbitrum: 'ETH',
  avalanche: 'AVAX',
  bsc: 'BNB',
  fantom: 'FTM',
  polygon: 'MATIC',
};

//getAccountBalance function to fetch coins and their respective token balances
export const getAccountBalance = async (
  walletAddress: string,
  blockchain: Blockchain
) => {
  return provider.getAccountBalance({
    walletAddress,
    blockchain,
  });
};

//use getAccountBalance to sum total balance across chains
export const getTotalMultichainBalance = async (walletAddress: string) => {
  let total = 0;
  for await (const chain of listOfChains) {
    const { totalBalanceUsd, assets } = await getAccountBalance(
      walletAddress,
      chain
    );
    total += +totalBalanceUsd;
  }
  return total;
};

Just to see if things are working, let's call this function on our app i.e. ./src/App.tsx and log out the output.

import { ConnectButton } from "@rainbow-me/rainbowkit";
import { useEffect} from 'react';
import {
  getTotalMultichainBalance,
} from './api';

function App() {

  useEffect(() => {
    (async () => {
      const total = await getTotalMultichainBalance(
        //add your wallet address
        '0xdC4EfDac43475F434482e61805E0df96D2dC1DF4'
      );
      console.log({ total });
    })();
  }, []);

  return (
    <div className="flex flex-col items-center py-8">
    <h1 className="flex justify-center text-sm sm:text-base md:text-3xl 
lg:text-4xl pb-10">DefiDashboard 🪙 What's in your Wallet?</h1>

    <div className="flex justify-center">
      <ConnectButton showBalance={false}/>
    </div>
    <div className="flex gap-6 mt-8">
    <div className='flex flex-col'>
      </div></div></div>
  );
}

export default App;

You should be able to see the net-worth or total balance in your browser's console.

You can now revert back the changes we made in the App.tsx file as we will work on it once we create all our functions in api.ts file.

Creating More Functions

Now that we have created a function to get total balance, in this section we will write three more functions as follow:

getNativeCurrencyBalance: This function will fetch account balance for a particular chain.
getAllNativeCurrencyBalances: This function will serve as a loop to get all the native currency balance from the list of blockchains we declared in the above section.
getNfts: Will returns the list of NFTs owned by the particular address.

File: src/api.ts

export const getNativeCurrencyBalance = async (
    walletAddress: string,
    chain: Blockchain
  ) => {
    const { assets } = await getAccountBalance(walletAddress, chain);
    const nativeCurrencySymbol = chainsToNativeSymbols[chain];
    const nativeCurrencyBalance = assets.find(
      (asset) => asset.tokenSymbol === nativeCurrencySymbol
    );
    return nativeCurrencyBalance ? +nativeCurrencyBalance.balance : 0;
  };

  export const getAllNativeCurrencyBalances = async (walletAddress: string) => 
{
    const balances: { [key in Blockchain]?: number } = {};
    for await (const chain of listOfChains) {
      const nativeCurrencyBalance = await getNativeCurrencyBalance(
        walletAddress,
        chain
      );
      balances[chain] = nativeCurrencyBalance;
    }
    return balances;
  };

  export const getNfts = async (walletAddress: string) => {
    const { assets } = await provider.getNFTsByOwner({
      walletAddress,
      // blockchain: 'eth',
    });
    return assets;
  };

And with that, we have our api.ts file all ready where we created methods for getting account balance, calculation net worth, fetching balances by native tokens and getting NFTs by owner. You can also find the complete code for this file under the toggle below:

api.ts

import AnkrscanProvider from '@ankr.com/ankr.js';
import type { Blockchain } from '@ankr.com/ankr.js/dist/types';

const provider = new AnkrscanProvider('');

//defining the list of supported blockchains
const listOfChains: Blockchain[] = ['eth', 'arbitrum', 'avalanche', 
'bsc', 'fantom', 'polygon', ];

//key-value pair mapping of chains to their native symbols
export const chainsToNativeSymbols: { [key in Blockchain]: string } = {
  eth: 'ETH',
  arbitrum: 'ETH',
  avalanche: 'AVAX',
  bsc: 'BNB',
  fantom: 'FTM',
  polygon: 'MATIC',
};

//getAccountBalance function to fetch coins and their respective token balances
export const getAccountBalance = async (
  walletAddress: string,
  blockchain: Blockchain
) => {
  return provider.getAccountBalance({
    walletAddress,
    blockchain,
  });
};

//use getAccountBalance to sum total balance across chains
export const getTotalMultichainBalance = async (walletAddress: string) => {
  let total = 0;
  for await (const chain of listOfChains) {
    const { totalBalanceUsd, assets } = await getAccountBalance(
      walletAddress,
      chain
    );
    total += +totalBalanceUsd;
  }
  return total;
};

export const getNativeCurrencyBalance = async (
    walletAddress: string,
    chain: Blockchain
  ) => {
    const { assets } = await getAccountBalance(walletAddress, chain);
    const nativeCurrencySymbol = chainsToNativeSymbols[chain];
    const nativeCurrencyBalance = assets.find(
      (asset) => asset.tokenSymbol === nativeCurrencySymbol
    );
    return nativeCurrencyBalance ? +nativeCurrencyBalance.balance : 0;
  };

  export const getAllNativeCurrencyBalances = async (walletAddress: string) => {
    const balances: { [key in Blockchain]?: number } = {};
    for await (const chain of listOfChains) {
      const nativeCurrencyBalance = await getNativeCurrencyBalance(
        walletAddress,
        chain
      );
      balances[chain] = nativeCurrencyBalance;
    }
    return balances;
  };

  export const getNfts = async (walletAddress: string) => {
    const { assets } = await provider.getNFTsByOwner({
      walletAddress,
      // blockchain: 'eth',
    });
    return assets;
  };

Creating Components and Frontend

In this section, we will work on App.tsx file where we will create some components that will interact with our functions in api.ts file and build frontend to display the results on our webpage. Here's the code for the App.tsx file:

File: src/App.tsx

import { ConnectButton } from "@rainbow-me/rainbowkit";
import type { Blockchain, Nft } from '@ankr.com/ankr.js/dist/types';
import { useEffect, useMemo, useState } from 'react';
import { useAccount } from 'wagmi';
import {
  chainsToNativeSymbols,
  getAllNativeCurrencyBalances,
  getNfts,
  getTotalMultichainBalance,
} from './api';

function App() {
  const [totalBalance, setTotalBalance] = useState<number>();
  const [allNativeBalances, setAllNativeBalances] = useState<{
    [key in Blockchain]?: number;
  }>({});
  const [nfts, setNfts] = useState<Nft[]>([]);

  const nativeBalancesSorted = useMemo(() => {
    // sort allNativeBalances by value, descending and convert it back to an object
    const res = Object.entries(allNativeBalances).sort(([, a], [, b]) => b - a);
    return res;
  }, [allNativeBalances]);

  const { address } = useAccount();

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    (async () => {
      setLoading(true);
      if (!address) {
        return;
      }
      const totalBal = await getTotalMultichainBalance(address);
      const nativeBalances = await getAllNativeCurrencyBalances(address);
      const nfts = await getNfts(address);
      setAllNativeBalances(nativeBalances);
      setTotalBalance(Math.round(totalBal));
      setNfts(nfts);
      setLoading(false);
    })();
  }, [address]);

  return (
    <div className="flex flex-col items-center py-8">

        <h1 className="flex justify-center text-sm sm:text-base md:text-3xl lg:text-4xl pb-10">
          DefiDashboard 🪙 What's in your Wallet?
        </h1>

        <div className="flex justify-center">
          <ConnectButton showBalance={false}/>
        </div>
        <div className="flex gap-6 mt-8">
        <div className='flex flex-col'>
          {/* Net worth */}
          {totalBalance && (
            <div className='bg-[#f1f5f9] py-4 px-8 rounded flex flex-col w-[300px] items-center mt-20'>
              <h3 className='text-blue-800 font-bold'>Net Worth</h3>
              <span className='text-3xl '>${totalBalance}</span>
            </div>
          )}

          {/* Native currency balances */}
          {nativeBalancesSorted.length > 0 && (
            <div className='bg-[#f1f5f9] py-4 px-8 rounded flex flex-col mt-4 w-[300px] items-center'>
              <h3 className='text-blue-800 font-bold'>Wallet</h3>
              <ul className='mt-4 flex flex-col gap-2'>
                {nativeBalancesSorted.map(([chain, bal], idx) => (
                  <li key={chain + idx} className='capitalize flex flex-col'>
                    <span>{chain}</span>
                    <span className='font-bold text-2xl'>
                      {/* @ts-expect-error */}
                      {bal.toFixed(2)} {chainsToNativeSymbols[chain]}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>

        {/* NFTs section */}
        {nfts.length > 0 && (
          <div className='mt-8'>
            <h3 className='font-bold text-3xl text-blue-800 text-center'>
              NFTs
            </h3>
            <div className='grid grid-cols-3 gap-6'>
              {nfts.map((nft) => {
                const id = `${nft.contractAddress}/${nft.tokenId}`;

                return (
                  <div
                    key={id}
                    className='bg-[#f1f5f9] py-4 px-8 rounded flex flex-col mt-4 w-[200px] items-center'
                  >
                    <img src={nft.imageUrl} className='w-32 h-32 rounded-lg' />
                    <h3 className='text-blue-800 font-bold mt-2'>{nft.name}</h3>
                  </div>
                );
              })}
            </div>
          </div>
        )}      
  </div>
</div>
  );
}

export default App;

Woah, that's a lot of code that we wrote! Now comes the crunch as we run our dApp in the local dev environment.

yarn dev

You should now be able to view your net-worth, balances by chain and their native token and ofc the NFTs!!

Check the GitHub Repo

If you want to take a look at the full source code, find the repo below.

https://github.com/kaymomin/multichain-defi-board-dapp

Next Steps

If you are up for a fun challenge, extend this project into a full fleshed defi-dashboard with graphs and improvements in the UI itself. Or you can build a full-stack multichain NFT gallery using Ankr Advanced APIs.

Also, feel free to share your learnings and reach out to me on Twitter @kayprasla if you've any doubts or questions for me.

Explore More Such Tutorials

https://ankr.hashnode.dev/how-to-build-a-dao-with-zero-lines-of-code-and-yes-there-are-tokens

https://ankr.hashnode.dev/nft-20-creating-a-soulbound-token

https://ankr.hashnode.dev/deploy-and-mint-a-cryptokitties-like-nft-with-erc-721-smart-contract

NFT 2.0: Creating a Soulbound Token

krinza.eth (🧱, 🚀) — Mon, 18 Jul 2022 13:21:03 +0000

We laud NFTs for their transferability but Vitalik's extended idea in a blog post titled "Soulbound", over the long haul is showing up in literally every conversation happening around identity, reputation, and individuation in web3. If you haven't checked it out yet, go give it a read. If you've already and need a refresher, here's a TLDR:

Soulbound Tokens (SBT) are just non-fungible tokens (NFTs) that, "once picked up, cannot be transferred or sold to anyone else."

Provoking name and the Kardashian clan's shenanigans aside, there are (IRL) some things you just cannot sell. Think of your drivers license, university degree, and formal identification. What if all of it could be encoded on the blockchain and verified by the token, coined as soulbound?

Sounds interesting? Lets SHIPPPPP one!

Building a Soulbound NFT

In this tutorial, we will learn how to:

Create a non-transferable NFT smart contract on Solidity
Deploy it on Ethereum Rinkeby Testnet
and display the minted Soulbound token on Opensea

If you followed along the tutorial I published about building an ERC721 Smart Contract, then you already know most of the code necessary to build them. If not, you can always refer to that video to explore more. So, let's get building!

Step 1: Writing NFT Smart Contract

Before we implement the non-transferring logic in our smart contract, we would need a base ERC-721 code for NFTs. To start, well navigate to the OpenZeppelin Wizard, select ERC721 as our contract type and opt for a few features like "Mintable", "Auto-increment IDs" and "Base URI" from the sidebar as shown.

Step 2: Customizing Code to Make it Soulbound

Now that we have the base code ready, let's head over to Remix Solidity Compiler by clicking, "Open in Remix".

Once we're on Remix, you should be able to see the following code:

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

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

contract SoulBoundTest is ERC721, ERC721URIStorage, Ownable {
    using Counters for Counters.Counter;

    Counters.Counter private _tokenIdCounter;

    constructor() ERC721("SoulBoundTest", "SBT") {}

    function safeMint(address to, string memory uri) public onlyOwner {
        uint256 tokenId = _tokenIdCounter.current();
        _tokenIdCounter.increment();
        _safeMint(to, tokenId);
        _setTokenURI(tokenId, uri);
    }

    // The following functions are overrides required by Solidity.

    function _burn(uint256 tokenId) internal override(ERC721, ERC721URIStorage) {
        super._burn(tokenId);
    }

    function tokenURI(uint256 tokenId)
        public
        view
        override(ERC721, ERC721URIStorage)
        returns (string memory)
    {
        return super.tokenURI(tokenId);
    }
}

Now let's go ahead and add a new code snippet to the existing smart contract in order for us to block the transfer of NFT and eventually making it "Soulbound." There already exist an API in the OpenZeppelin's ERC721 Contract, using which we can actually control the transferability of our tokens.

If you navigate to the OpenZeppelin API Docs, you will find the following functions:

_beforeTokenTransfer ( address from, address to, uint256 tokenId)

To block token transfers, add the following to your code:

File: openzeppelin-contracts/contracts/token/ERC721/ERC721.sol

function _beforeTokenTransfer(
address from, 
address to, 
uint256 tokenId
) internal override virtual {
require(from == address(0), "Err: token transfer is BLOCKED");   
super._beforeTokenTransfer(from, to, tokenId);  
}

Now let's understand the logic behind this code.

Every time this code will run, the require statement will check: if the from address parameter in the function is set to zero. If yes, it will allow the action to happen and block all the other transfers to make it a non-transferable token.

Note: When the address from == 0, it means the token is being issued or minted and not transferred.

Step 3: Deploying The Soulbound NFT Smart Contract

To deploy the smart contract directly from remix, head over to side bar and select " Deploy and Run Transaction" from the tab. Set Environment to Injected Web3 , select the Soulbound smart contract we just created from contracts dropdown and click Deploy.

Make sure your MetaMask is connected to the Ethereum Rinkeby Testnet and you've some test ether to make transactions happen.

Step 4: Adding NFT Asset To IPFS Via Pinata

Once the contract is successfully deployed, the next thing we will need to do is minting a Soulbound NFT. To do so, we are going to first set the NFT asset and metadata using Pinata.

If you dont have a Pinata account, sign up for a free account here and complete the steps to verify your email.

Once you have verified your account on the Pinata, navigate to the " My Files" page and click the " Upload" button
Upload your NFT art and you'll see your image asset file under the Files page along with the CID column

Copy the CID by clicking the copy button next to it and use it as a postfix to this URL " gateway.pinata.cloud/ipfs" to view your NFT art.

Here's the image that I used.

Now, were going to upload one more document to Pinata - JSON metadata. To do that, create a JSON file and add the following code.

{
    "attributes" : [ {
      "trait_type" : "NFT",
      "value" : "Soulbound"
    }, {
      "trait_type" : "Asset",
      "value" : "Non-transferable Badge"
    }, {
        "trait_type" : "Badge",
        "value" : "Minting First Soulbound Token"
      }, {
        "trait_type" : "Type",
        "value" : "Demo"
      } ],
    "description" : "This is a demo soulbound token mint",
    "image" : "https://gateway.pinata.cloud/ipfs/QmTY1jMAqabHUZFCj91ckwnCu3CPtJChpg345jdkxzj3ac",
    "name" : "Soulbound Token"
}

Feel free to add or remove the attributes. Also, make sure you are providing your own IPFS image URL!

Once youre done editing the JSON file, save it and upload it to Pinata, following the same steps we followed for uploading the image and copy the CID for the JSON file (we will need that in the next step).

Step 5: Minting The Soulbound NFT

In this step, we are finally going to mint the NFT and display it on Opensea. To mint the NFT, head back to Remix IDE, find " Deployed Contracts" button, and click on the " SafeMint" function.

Under SafeMint, input your wallet address in to and set the JSON file's URL in URI, following the format as " gateway.pinata.cloud/ipfs/{CID_of_JSON_file}". Here's the IPFS link to the Metadata I uploaded to the Pinata.

Once the configurations is set, hit transact , confirm the transaction and wait a few seconds for the NFT to be minted.

Now, we are going to head to Opensea (Testnet) to view the minted Soulbound NFT.

Since we have blocked all the transfer action, if you try to send this NFT to some other wallet it will prompt you an error. This way, we can confirm that the NFT we just minted is now bounded to our souls (realistically, to our wallet address) and can never be transferred or sold to anyone else.

Full Code Repository

Wohoo! Weve finally deployed our very first Soulbound NFT on Rinkeyby Testnet. If you want to take a look at the full source code, find the repo below.

https://github.com/kaymomin/soulbound-nft-token-smart-contract/blob/main/soulbound.sol

Whats Next?

A fun project would be to create a platform that lets course creators issue a Soulbound NFT as a credential for students who complete the course.

PS: If you work on this idea, feel free to comment your creation in the comment section below.

You can also drop me a "👋" on Twitter @kayprasla or find me in the Developer DAO discord!

Deploy and Mint a CryptoKitties-Like NFT with ERC-721 Smart Contract

krinza.eth (🧱, 🚀) — Wed, 29 Jun 2022 08:46:06 +0000

The Dawn of ERC-721

Mention NFT revolution and you will most likely stumble upon this project over and over again: CryptoKitties. Originally built on the Ethereum blockchain, CryptoKitties was the first non-fungible token (NFT) that allowed the creation of unique digital collectibles as kitties, using the ERC-721 smart contract. Before the dawn of ERC-721, tokens on blockchain were only fungible, meaning they can be traded or exchanged with another identical one of the same value, much like a dollar bill.

We've already discussed how you can make a fungible token using ERC20, but what if you want to create tokens that are not alike at all?

What we are Building

CryptoKitties really braced the growth and use case of NFTs we see today and in this tutorial, we will walk through creating and deploying an ERC-721 smart contract and minting the token on Optimism Kovan-Testnet using Solidity, Hardhat and Pinata.

By the end of this tutorial - you'll be able to mint an NFT and display it on Quixotic (an NFT marketplace on Optimism) from your deployed ERC721 contract.

Getting Started

PS: I know I just threw a ton of new words at you in the previous section and if any of the above was confusing, don't worry as we'll discuss each one of them in detail.

But before we get our hands dirty, let's take a quick rundown on what Optimism is?

What is Optimistic Ethereum?

Optimism is a layer 2 scaling solution for ETH, meaning it functions on top of the Ethereum mainnet (L1). It uses a technology called rollups, specifically Optimistic rollups, where the transactions are executed off the chain and get bundled into a single transaction before being pushed to the main blockchain. This increases the transaction speed and throughput and decreases the cost per transaction.

Pretty handy, right? Ready to give optimism a try?

Step 1: Connect Metamask to Optimism Kovan Testnet

If you do not own a wallet, the first thing that needs to be done is to download and install the browser extension of MetaMask.

Once MetaMask is installed and running, follow these simple steps to connect with Optimism Kovan Testnet:

On the Settings page, select "Network"
To add Optimism Kovan manually, click "Add Network" in the upper-right corner and fill in these settings, as shown.

If you want to launch your ERC721 contract directly to mainnet, replace the RPC URL with Ankr's Public RPC -> https://rpc.ankr.com/optimism

Step 2: Add Test Ether from a Faucet

To request funds, go to Optimism Kovan Faucet and sign in with GitHub to acquire some tokens. Wait a few moments and your wallet should be funded!

Note: ETH on testnets has no real value.

Step 3: Set Up Your Development Environment

To get started with the hardhat installation, we first need to set up our dev environment. To do so, create a new directory called erc721-token-mint.

Now, initialize your new npm project in the erc721-token-mint directory by running the following command in the terminal of your preferred code editor.

npm init


npm install dotenv

Once your project is ready, install Hardhat, an Ethereum development environment for testing and deploying smart contracts to the blockchain.

It might take a minute or two to install everything!

npm install --save-dev hardhat

Run npx hardhat and choose "create an empty hardhat.config.js".

npx hardhat

Your project should now contain the following files and folders: hardhat.config.js, node_modules, package.json and package-lock.json.

Next, we are going to create two new directories to house our smart contract and deployment script. To do so, enter the following commands:

mkdir contracts


mkdir scripts

We will now install a Hardhat plugin that brings the Ethereum library ethers.js, which allows you to interact with the Ethereum blockchain in a simple way.

npm install --save-dev @nomiclabs/hardhat-ethers ethers


npm install --save-dev @openzeppelin/hardhat-upgrades

Create a .env file in your projects root folder and set the environment variable as follows. This is the private key of the account you intend to use on the Optimism Network from MetaMask.

PRIVATE_KEY = YOUR_PRIVATE_KEY

Step 4: Setup Hardhat Configs

Before setting up the hardhat.config.js file, we will need a gateway to communicate to the Ethereum blockchain. For that, we will be using the Kovan testnet RPC https://kovan.optimism.io/ provided by Optimism.

If you want to deploy your ERC-721 directly on the mainnet, you can use Ankr's Public RPC for Optimism. Just copy the URL, no account or login is required!

Now you are ready to edit your hardhat.config.js with the following:

Open the hardhat.config.js file
Delete the code inside, and copy-paste the code below:

/**
* @type import('hardhat/config').HardhatUserConfig
*/
require('dotenv').config();
require("@nomiclabs/hardhat-ethers");

module.exports = {
   solidity: "0.8.1",
   defaultNetwork: "kovan",
   networks: {
      hardhat: {},
      kovan: {
         url: "https://kovan.optimism.io/",
         accounts: [`0x${process.env.PRIVATE_KEY}`]
      }
   },
}

Did you notice how we are sourcing the PRIVATE_KEY variable in this file? We are loading them up from process.env using the dotenv library we installed while setting up the dev environment.

Step 5: Write ERC-721 Smart Contract

We will use an ERC-721 standard based on OpenZepplin. OpenZepplin is an open-source standard for securing blockchain applications and provides security products to build, automate, and operate dApps.

For this, we will install the OpenZepplin's contracts library.

npm install @openzeppelin/contracts

Now navigate to the contracts folder and create a new file called KittyMonster.sol
Below is our NFT smart contract code based on the OpenZeppelin's ERC721 implementation. Copy and paste the contents below into your KittyMonster.sol file.


// SPDX-License-Identifier: MIT
//Declare the version of solidity to compile this contract. 
//This must match the version of solidity in your hardhat.config.js file
pragma solidity ^0.8.1;

//inherits three OpenZepplin smart contract classes

//contains implementation of ERC721
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";

//provides counters that can only be incremented or decremented by one
import "@openzeppelin/contracts/utils/Counters.sol";

//implements ownership in the contracts
import "@openzeppelin/contracts/access/Ownable.sol";

//This function instantiates the contract and 
//classifies ERC721 for storage schema
contract KittyMonster is ERC721URIStorage, Ownable {

    //to keep track of the total number of NFTs minted 
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    //sets contract's name and symbol
    constructor() ERC721("KittyMonster", "KMON") {}

    //address recipient: address that will receive freshly minted NFT
    //tokenURI: describes the NFT's metadata
    function mintNFT(address recipient, string memory tokenURI)
        public onlyOwner
        returns (uint256)
    {
        _tokenIds.increment();

        uint256 newItemId = _tokenIds.current();
        _mint(recipient, newItemId);
        _setTokenURI(newItemId, tokenURI);

        return newItemId;
    }
}

Save the file and compile your contract to make sure everything is good to deploy using the command below:

npx hardhat compile

# output
# Compiled n Solidity file successfully

Step 6: Write the Deploy Script

Now that we've got our ERC-721 contract set up, let's create the deployment script.

Navigate to the scripts folder and create a new file called deploy.js
Open the deploy.js file and copy-paste the following code:

async function main() {
    // Grab the contract factory 
    //used to deploy new smart contracts
    const KittyMonster = await ethers.getContractFactory("KittyMonster");

    // Start deployment, returning a promise that resolves to a contract object
    const KMONS = await KittyMonster.deploy(); // Instance of the contract 
    console.log("Contract deployed to address:", KMONS.address);
 }

 main()
   .then(() => process.exit(0))
   .catch(error => {
     console.error(error);
     process.exit(1);
   });

Save and close the file
Run npx hardhat run scripts/deploy.js --network kovan

npx hardhat run scripts/deploy.js --network kovan

Output: Contract deployed to address: 0xA2a736b9af8B2D3bb95F92d1cC015Bc6D0A2C0cB

Running the above command will compile the contract and deploy it to the Optimism Kovan Testnet.

If you go to the Kovan Optimism Etherscan and search for your contract address, you should be able to see that the contract has been successfully deployed.

Step 7: Flattening the Solidity File

To update token information on Etherscan, the token contract address for the token must be verified. As contract owners, we can verify our contract by following the steps below. But before that, we will require to flatten the solidity file using Hardhat.

To do so, within your project directory, run the following command on your terminal:

npx hardhat flatten > flattened.sol

This will generate a flattened.sol file which contains the contract(s) code and all its dependencies, which we will copy and paste to the etherscan when verifying the contract.

Make sure in your flattened.sol file, // SPDX-License-Identifier: MIT is only mentioned one time. Otherwise, it will throw you an error.

Step 8: Verifying the Contract on Optimism Kovan Etherscan

To verify the contract on Optimism Kovan Etherscan, follow the steps below:

Under the contract address, next to the Transaction tab, you will be able to find the Contract tab. Then click on Verify And Publish and you'll land on Verify and Publish Contract Source Code page.
From the drop-down for compiler type, version selection and license type, select the following configs:

Hit "continue" and under Enter the Solidity Contract Code below section, copy and paste the entire code from the flattened.sol file that we generated in step 7.
Click Verify and Publish and you be able to see that your contract is successfully verified on Optimism Kovan Etherscan.

When the contract has been verified, the Code page will be filled with the contract details. The source code of the contract is now publicly available on Etherscan.

Step 9: Adding NFT Asset to IPFS | Pinata

Were going to use Pinata to store our NFT asset and JSON metadata to IPFS so that we can pass it through to our token contract (remember tokenURI parameter from our mintNFT function in the smart contract?).

If you dont have a Pinata account, sign up for a free account here and complete the steps to verify your email.

Once you have verified your account on the Pinata, navigate to the "My Files" page and click the "Upload" button.
Upload your NFT art and you'll see your image asset file under the Files page along with the CID column.

Copy the CID by clicking the copy button next to it and use it as a postfix to this URL "https://gateway.pinata.cloud/ipfs/" to view your NFT art.

Here's the image that I used.

Now, were going to upload one more document to Pinata - JSON metadata. To do that, follow the steps below:

In your code's root directory, make a new file called monstermeta.json and add the code given below to the JSON file.

{
    "attributes" : [ {
      "trait_type" : "Monster",
      "value" : "Dybbuk"
    }, {
      "trait_type" : "Space",
      "value" : "Fire"
    } ],
    "description" : "not cryptokitties.",
    "image" : "https://gateway.pinata.cloud/ipfs/QmY3AiXaCt9JFJ33GTR5U7YjXKrC5xbtjJDjEdUbN8QMVG",
    "name" : "Kabbey"
}

Feel free to add or remove the attributes. Also, make sure you are providing your IPFS image URL - otherwise, you will mint Kabbey too!!

Once youre done editing the JSON file, save it and upload it to Pinata, following the same steps we followed for uploading the image and copy the CID for the JSON file (we will need that in the next step).

Step 10: Minting NFT

To mint the NFT, navigate under the contract address page, next to the Transaction tab, you will find the Contract tab.
Click on Write Contract and "connect to Web3"
Under mintNFT, input your wallet's public address in recipient (address) and CID for the JSON file you uploaded to the Pinata.
Hit "write", and you can view your transaction successfully executed in the Optimism Kovan Etherscan.

Now, we will head to Quixotic.io, an NFT marketplace for Optimism.

Connect your wallet to Quicotic's testnet marketplace and you'll be able to view your minted NFT there!

Check the GitHub Repo

If you followed along with the tutorial, awesome! Here you can find the GitHub repository with the full code.

https://github.com/kaymomin/erc721-token-mint

Next Steps

If you are up for a challenge, build a full-stack dApp to mint, display and transfer NFTs to your friends and make sure you drop the project links in the comments section.

If you have any cool idea you want to discuss, drop me a "👋" on Twitter @kayprasla or find me in the Developer DAO discord!

How to deploy your own ERC-20 token with Ankr & Hardhat on ETH Goerli Testnet

krinza.eth (🧱, 🚀) — Fri, 20 May 2022 13:00:01 +0000

If 'I wish I had my own token ' thought ever crossed your mind, then this article will serve to be your step-by-step guide for building and deploying your very own token (think of a name already).

Getting Started

ERC-20 are widely used tokens on the Ethereum network. They are fungible , which means you dont have to care which token you have since theyre all the same. And they are transferrable , meaning they can be sent from one address to another. This contrasts with non-fungible tokens (NFTs), which are unique and therefore not interchangeable.

Now that we briefly understand what ERC20 means, let's get started creating our very first ERC20 token.

Step 1: Create a MetaMask Account

You will need MetaMask to access the testing networks on Ethereum. In this guide, we will use Goerli, an Ethereum test network that allows blockchain development testing before the deployment on Mainnet.

In your browser, go to metamask.io and install the plugin. Once MetaMask is installed and running, select the Goerli network.

Step 2: Acquire Goerli ETH

To request funds, go to Goerli Faucet and connect your metamask wallet with your newly-created test account into the UI. Wait a few moments and your wallet should be funded!

Note: ETH on testnets has no real value.

Step 3: Set up the Dev Environment

To get started with the hardhat installation, we first need to set up our dev environment. To do so, create a new directory called erc20-token-ankr.

Now, initialize your new npm project in the erc20-token-ankr directory by running the following command in the terminal.

npm init


npm install dotenv

Once your project is ready, install Hardhat, an Ethereum development environment for testing and deploying smart contracts to the blockchain.

npm install --save-dev hardhat

Run npx hardhat, choose "create a sample project" and say y to everything.

It might take a minute or two to install everything!

npx hardhat

Your project should now contain the following files and folders: hardhat.config.js,node_modules, package.json, package-lock.json, README.md, scripts, and contracts.

Go ahead and delete the sample-script.js in the /scripts directory and Greeter.sol in the /contractsdirectory.
We will now install a Hardhat plugin that brings the Ethereum library ethers.js, which allows you to interact with the Ethereum blockchain in a simple way.

npm install --save-dev @openzeppelin/hardhat-upgrades


npm install --save-dev @nomiclabs/hardhat-ethers ethers

Create a .env file in your projects root folder and set the environment variable as follows. This is the private key of the account you intend to use on the Ethereum Network from MetaMask.

PRIVATE_KEY=YOUR_PRIVATE_KEY

Step 4: Setup Hardhat

Before setting up the hardhat.config.js file, we will need a gateway to communicate to Ethereum blockchain.

For that, we will be using Ankr's Public RPCs to connect and send transactions on the Ethereum blockchain. Just copy the URL for the goerli testnet. No account or login is required!

Now you are ready to edit your hardhat.config.js with the following:

Open the hardhat.config.js file
Delete the code inside, and copy-paste the code below:

require("@nomiclabs/hardhat-waffle");
require('@openzeppelin/hardhat-upgrades');
// Any file that has require('dotenv').config() statement 
// will automatically load any variables in the root's .env file.
require('dotenv').config();

module.exports = {
  solidity: "0.8.0",
  networks:{
    goerli:{
      // Ankr's Public RPC URL
      url: "https://rpc.ankr.com/eth_goerli",
     // PRIVATE_KEY loaded from .env file
      accounts: [`0x${process.env.PRIVATE_KEY}`]
    }
  }
};

Did you notice how we are sourcing the PRIVATE_KEY variable in this file? We are loading them up from process.env using the dotenv library we installed while setting up the dev environment.

Step 5: Set Up ERC-20 Contract

We will use an ERC-20 standard based on OpenZepplin. OpenZepplin is an open-source standard for securing blockchain applications and provides security products to build, automate, and operate dApps.

For this, we will need the @openzeppelin/contracts package!

npm install @openzeppelin/contracts


npm install --save-dev @nomiclabs/hardhat-waffle

Now, it is time to name your token!

In the next steps, we will create a smart contract file ( you must match the name of the file with the name of token ). So if you're thinking to name your token Buildoooor, make sure to name the contract file exactly the same Buildoooor.sol.

cd into your /contracts folder (which should be empty right now), and run touch Buildoooor.sol.
Open the newly-create .sol file and copy-paste the following:

//SPDX-License-Identifier: Unlicense
//Declare the version of solidity to compile this contract. 
//This must match the version of solidity in your hardhat.config.js file
pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

//This function instantiates the contract and 
//classifies ERC20 for storage schema
contract Buildoooor is ERC20 {

   //Feel free to change the initial supply of 50 token 
   //Keep the (10**18) unchanged as it multiplies the number we want as our supply to have 18 decimal
    uint constant _initial_supply = 50 * (10**18);

    // make sure to replace the "Buildoooor" reference 
    //with your own ERC-20 name
    //choose a token symbol, in our this case "FIRT"
    constructor() ERC20("Buildoooor", "BUDL") {

        _mint(msg.sender, _initial_supply);
    }
}

Save and close this file
Compile your contract to make sure everything is good to deploy

npx hardhat compile

# output
# Compiled n Solidity file successfully

Note: If you are on windows and getting "nothing to compile error" thrown at you, run npm install glob@7.2.0 and rerun npx hardhat compile. This should solve the problem. Learn more here!

Step 6: Deploy the ERC20 Token

Now that we've got our ERC20 contract set up, let's create the deployment script for it.

cd .. back into your project root directory
cd into your scripts directory (which should be empty right now)
Run touch deploy.js, open the deploy.js file and copy-paste the following:

async function main() {
    const [deployer] = await ethers.getSigners();

    console.log("Deploying contracts with the account:", deployer.address);

    const weiAmount = (await deployer.getBalance()).toString();

    console.log("Account balance:", (await ethers.utils.formatEther(weiAmount)));

   // make sure to replace the "Buildoooor" reference 
   //with your own ERC-20 name
    const Token = await ethers.getContractFactory("Buildoooor");
    const token = await Token.deploy();

  // log the address of the Contract in our console
    console.log("Token address:", token.address);
  }

// run main, catch error, if any, and log in console
  main()
    .then(() => process.exit(0))
    .catch((error) => {
      console.error(error);
      process.exit(1);
  });

Save and close the file
cd .. back into your project root directory
Run npx hardhat run scripts/deploy.js --network goerli

npx hardhat run scripts/deploy.js --network goerli

#Deploying contracts with the account: 0x6d4779c3Dc002894C2E2108c75e6ef72C418E23f
#Account balance: 0.2
#Token address: 0x74d8C71a4aF1eBD7DA5B8eAAabe35b0D29478DF6

Your contract will be compiled and deployed to the Goerli network!

Now, go to goerli.etherscan.io/ and input your token address to see your deployed ERC-20 contract on Goerli Network.

Buildoooors, great job deploying your own ERC-20 token on Goerli using Ankr, Hardhat, and OpenZeppelin ERC20 standard. Comment your contract addresses below and share them with the community!

Quitting Web2 - Moving from Data to DevRel

krinza.eth (🧱, 🚀) — Mon, 02 May 2022 10:02:21 +0000

Back when I was in college, I was passionate about at least a dozen different things and had no idea what I was going to do for a career. My typical CS class would look like a conference of guys discussing all sorts of advanced subjects, gaming consoles, and of course sports (ah, classic). To say the least, I could feel an evident lack of estrogen in the lectures and often found myself feeling invisible around the conference of my male peers. The aggressive culture of criticism and the display of dominance gave me a tough time adjusting to the boys' club, that at one point I considered dropping out.

Yeah, so...that didnt happen.

Naturally, I wanted to put off that decision for as long as possible but pressured against time and lack of interest in doing anything but tech, I unknowingly chose to explore machine learning during the summer break of my sophomore year. Full disclosure, I was muddied by a deluge of "demand" hype and buzzword mania.

Not wasting a day, I opened the laptop and went straight to enroll myself in Andrew Ng's Machine Learning course on Coursera. A few weeks into the course and him still wearing the same black shirt that he wore to over one hundred videos, I felt an exaggerated wave of adrenaline break into my stomach every time there was a new concept being introduced. The overarching thought of getting to the most ideal model was fascinating and eventually fueled my interest in pursuing Data Science as a career.

Big mood but it was legit a task for me to not turn math into a panic attack. From the amount of tension and apprehension that interfered with my math anxiety in college, Im surprised I didnt scare everyone at graduation by looking like a gangly vampire.

Anyways, right at the edge of graduating, I was able to seal the deal with one of the unicorn companies that I bookmarked for as long as I could remember. I joined their Artificial Intelligence department as a data analyst and soon moved up the ladder as a Data Scientist championing for one of the European clients. The high-level task was to discover, predict and affect patterns of interpersonal behavior in a call center environment and monitor production to keep a check on significant changes.

blame the pandemic, if so

My first year working in that capacity was all fun and games until the work started to feel redundant to me. It was no longer about the thrill of solving a problem anymore but the drudgery of making the exact pipelines run in similar ways or applying them to different problems. Also, the roles I had access to, barely get to do the client-facing stuff (something I truly enjoy).

At this point, I was hoping it wasn't just me dangerously introspecting and having doubts about my work because of lockdown and social distancing.

Guess I wasn't alone and my employer wasn't prepared to prevent the upcoming wave of resignations. But but but a lot happened in between (thats for some other day) but know that I was already enveloped into crypto and had explored the NFT space to its fullest. Yet, it was really when I joined the Developer DAO that things started to pull me down the rabbit hole and I became hooked to web3. I could really feel the pull (especially after witnessing the vibes and culture IRL at ETH Dubai). No doubt, great culture attracts great talent.

This. This was my red pill.

And so I gave in my notice.

Of course, my resignation was random and came unexpected but who would have thought that my employer was to compete with a discord community here, huh? Anyhow, I must say I was too embarrassed to fully admit to my manager and HR that Im leaving this job to explore web3 and vibe with my internet frens at Developer DAO. Instead, I just remember myself mumbling.

so heres for my ex-manager

I left the job because:

the new structure of organization is empowering
it feels so much more to be collaborative than competitive
I get to experiment and be creative and theres pretty much no we cant do this
I no longer want to optimize on gains and revenue but rather on learning and adventures
somehow Im just convinced its worth a shot

So instead of focusing on the next promotions, the next bonus, or the next hike, I went all in to follow my curiosity, and let me tell you it didnt feel risky at all. Indeed, today Im joining Ankr as a Developer Advocate, and couldnt have been any happier.

What gravitated me to developer advocacy?

It started back when I was struggling in college to navigate my way in tech. Alas, my experience was part of a bigger trend on campus. Thats when I took the responsibility to launch, build and manage student tech communities in association with Google Developers, making me the first-ever female president to lead a tech club while bringing a brief reprieve to a reign of a male-dominated student body presidencies dating back from the establishment of my campus.

Launching and building a tech community from scratch was one of the most rewarding experiences of my life. I often found myself talking at a number of events, making sure to roll out educational resources and mentorship at all levels. When reaching memberships to multi-folds, onboarding females to leadership positions in the teams, conducting weekly study jams, and sessions, and actively advocating for the emerging technologies, I realized my purpose was to rectify a gender imbalance in access and control of technology while empowering aspiring developers, especially women to build cool stuff and envision their careers in tech. In short, advocating for marginalized genders and building communities come natural to me because that was something that I needed for myself.

Wrapping up

Knowing I wanted to be a Developer Advocate was only part of the equation. I also wanted to work for a company with core values that aligned with my personal goals. While I wasnt being paid by a corporation to talk about their products before, I definitely had an honest, heartfelt fire in my belly for what I choose to talk about.

So before making the decision to go full-time as an advocate, I really had to bring up a few questions for myself to shortlist who would I want to work with. Apparently, it boiled down to two questions: Will they be okay with me saying good things about the competition? and are they okay with me talking about rough spots in our APIs or product?

And, with Ankr, I couldnt think of a better way to double down on my conviction than to join the team and empower developers to create multi-chain systems, products, and services.

Heres to learning and building together! 🍻

DEV Community: krinza.eth (🧱, 🚀)

How to fetch all NFTs owned by a particular Wallet Address using Ankrjs

Ankr Advanced APIs

Getting Started

Step 1: Setting Up Next.js Starter Application

Step 2: Installing and Setting Up Ankr.js

Step 3: Create getNFTs Function

GitHub Repo

How to check your Account Balance across Multiple Blockchains using Ankrjs

Refresher on Ankr Advanced APIs

Getting Started

Step 1: Setting Up Next.js Starter Application

Step 2: Installing and Setting Up Ankr.js

Step 3: Create Function to Fetch Total Balance

[Optional]: Calculating the Net Worth

GitHub Repo

How to build an End-to-End Donation-Based Crowdfunding dApp on Polygon

The Functionalities

The Tech Stack

Getting Started

Step 1: Setup Hardhat Configs

Step 2: Write Crowdfunding Smart Contract

Step 3: Write the Deploy Script(s)

Step4: Get Contract ABI for Verified Codes

Step 5: Write Hooks, Utils and Read

Step 6: Create Components

Step 7: Displaying the UI

Check the GitHub Repo

Next Steps

Explore More Such Tutorials

Create a “What’s in Your Wallet?” dApp using Ankr’s Multichain Advanced APIs

Ankr Advanced APIs

Getting Started

Installing Ankr.js

Setting Up Ankr.js

Creating Function to Fetch Total Balance

Creating More Functions

api.ts

Creating Components and Frontend

Check the GitHub Repo

Next Steps

Explore More Such Tutorials

NFT 2.0: Creating a Soulbound Token

Building a Soulbound NFT

Step 1: Writing NFT Smart Contract

Step 2: Customizing Code to Make it Soulbound

Step 3: Deploying The Soulbound NFT Smart Contract

Step 4: Adding NFT Asset To IPFS Via Pinata

Step 5: Minting The Soulbound NFT

Full Code Repository

Whats Next?

Other Articles Ive Written

Deploy and Mint a CryptoKitties-Like NFT with ERC-721 Smart Contract

The Dawn of ERC-721

What we are Building

Getting Started

What is Optimistic Ethereum?

Step 1: Connect Metamask to Optimism Kovan Testnet

Step 2: Add Test Ether from a Faucet

Step 3: Set Up Your Development Environment

Step 4: Setup Hardhat Configs

Step 5: Write ERC-721 Smart Contract

Step 6: Write the Deploy Script

Step 7: Flattening the Solidity File

Step 8: Verifying the Contract on Optimism Kovan Etherscan

Step 9: Adding NFT Asset to IPFS | Pinata

Step 10: Minting NFT

Check the GitHub Repo

Next Steps

How to deploy your own ERC-20 token with Ankr & Hardhat on ETH Goerli Testnet

Getting Started

Step 1: Create a MetaMask Account

Step 2: Acquire Goerli ETH

Step 3: Set up the Dev Environment

Step 4: Setup Hardhat

Step 5: Set Up ERC-20 Contract

Step 6: Deploy the ERC20 Token

Quitting Web2 - Moving from Data to DevRel

This. This was my red pill.