Ah, the joys of querying Web3. It's like going on a grand adventure, where you're not quite sure what you're looking for or where you're going to find it. You might start out with a simple query, something like "How many transactions were processed on the Ethereum network yesterday?" But before you know it, you're down the rabbit hole of complex data structures, arcane technical jargon, and seemingly endless frustration.

The first challenge you'll face is figuring out how to actually query the data you're looking for. Once you've finally figured out which method to use, you'll need to start dealing with all of the technical details. You'll need to figure out which Ethereum node to connect to, what the correct block number or transaction hash is, and how to format your query in a way that the node will understand.

And even then, there's no guarantee that you'll get the data you're looking for. The Ethereum network is notoriously unreliable, and you might find yourself getting error messages or incomplete results.

But even if you manage to get your query working, you're not out of the woods yet. Just because you have the data doesn’t mean it’s usable yet. It's like trying to solve a puzzle with only half the pieces.

The challenges of Web3 data querying

Web3 data querying is a hot topic among developers, with many of them struggling to find the best way to access the vast amounts of data on the decentralized web. This has led to a rise in the use of APIs, which provide a simple and effective way for developers to query data on the blockchain.

One of the biggest challenges faced by developers when it comes to querying is the sheer amount of data that is available. With millions of transactions and blocks being added to the blockchain every day, it can be difficult for developers to know where to start when it comes to accessing this data.

Another challenge is the complexity of the data structures. Unlike traditional databases, which are organized in a simple, hierarchical manner, adding cross-chain functionality can be a complex task, as data does not flow easily between different blockchain networks. This added layer of complexity can make it more challenging to integrate and utilize multiple blockchains in a single system

The state of API development

In response to these challenges, many developers have turned to APIs, or application programming interfaces, to help them access data on the decentralized web. APIs provide a way for different software systems to communicate with each other and share data and functionality, making it easier for developers to build complex interconnected applications.

There are several different types of APIs available, each designed to serve a specific purpose. Some APIs allow developers to query data directly from the blockchain, while others provide access to third-party data sources, such as exchanges or other decentralized applications.

The Data Layer for Web3 dapps

Web3 dapps are applications built on top of the blockchain and use smart contracts and other decentralized technologies to provide a wide range of services and functionality.

However, building and running a Web3 dapp is not as simple as building a traditional web application. Unlike traditional web apps, which can easily access data from centralized databases, Web3 dapps must rely on the blockchain for their data needs.

That's where APIs come in. APIs provide a simple and standardized way for Web3 dapps to access data on the blockchain, allowing developers to query data and interact with smart contracts in a consistent and predictable way. In this sense, APIs can be thought of as the data layer for Web3 dapps, providing a common interface that can be used by any dapp, regardless of its specific requirements or underlying technology.

Build with Ankr Advanced APIs

Ankr offers advanced APIs that make it easy for developers to build and ship powerful dapps. These APIs provide a wide range of tools and features, including support for NFTs, tokens, and data querying. This allows developers to build complex and feature-rich dapps, without the toiling of setting up complex RPC calls, that provide value to users and take advantage of the full potential of the web3 data.

NFT API

One of the most popular Ankr APIs is the NFT API, which allows developers to access and query data related to non-fungible tokens, or NFTs. NFTs are unique digital assets, such as artwork or collectibles, that are built on top of the blockchain. They are often used in Web3 dapps to represent virtual items or assets and can be traded and exchanged on decentralized exchanges.

The NFT API offered by Ankr provides developers with a simple and standardized way to access and query data related to NFTs. With the NFT API, developers can easily retrieve information about specific NFTs, such as their metadata, ownership, and transaction history. They can also use the API to display and manage NFTs within their NFT galleries, wallets and marketplace dapps, providing their users with a seamless and secure way to interact with these unique digital assets.

Token API

Another important API offered by Ankr is the Token API, which provides developers with access to data related to tokens. Tokens are digital assets that can be traded and exchanged on the blockchain and are often used to represent a variety of different assets, such as cryptocurrencies, utility tokens, and stablecoins. The Token API allows developers to query data related to tokens, such as their token holders, prices, and account balances.

Query API

With the Query API, developers can easily retrieve information about transactions, blocks, and logs, making it easier to build applications that rely on this data. Additionally, Query API offers developers a simple and standardized way to access data from multiple blockchains, without having to worry about the complexities and differences of each individual chain.

Conclusion

With ANKR's advanced APIs, developers can take advantage of a range of features and capabilities, including no-node maintenance and cross-chain interoperability. These APIs are designed to be easy to use and integrate, making it possible for developers of all skill levels to get started building with blockchain.

From real-time data feeds to advanced analytics and reporting, Ankr's APIs provide a comprehensive suite of tools for building next-generation blockchain-based applications.

Start building now with Ankr Advanced APIs.

What are we building?

In this tutorial, we will be building an ERC-1155 (Edition) minting page. This will be a full-stack dApp made with Next.js, RainbowKit, thirdweb, and Ankr.

Tech Stack

• RPC provider: Ankr

• Wallet Connect: Rainbowkit

• User Interface: Chakra UI

• Smart Contract: Thirdweb

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

Step 01: Development Setup

Create Next.js app

First, open your terminal and run the following command to start your Next.js app:

npx create-next-app@latest --ts

We have named the directory thirdweb-rainbowkit, you can change directories to your Next app by running:

cd thirdweb-rainbowkit

Add Chakra UI

Next, add Chakra UI by running this command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

We’re not going to be using the api directory, so you can delete it.

Start up your instance of the Next App on localhost by running:

npm run dev

Now, head to pages/index.tsxand remove the <div> ... </div> and <p> ... </p> in <main> to clean up our minting page. This is also a good time to change the title from the boilerplate text, it should look something like the screenshot below:

Import the ChakraProvider, ColorModeScript, and extendTheme from @chakra-ui/react at the top of your _app.tsx file:

import { ChakraProvider, ColorModeScript, extendTheme } from "@chakra-ui/react";

Add the Chakra Provider to MyApp:

function MyApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
);
}

Below our imports, declare your initialColorMode, useSystemColorMode, fonts, and theme:

const config = {
initialColorMode: "dark",
useSystemColorMode: true,
};
const fonts = {
heading: "Inter", sans-serif,
body: "Inter", sans-serif,
};
const theme = extendTheme({ config, fonts });

Add ColorModeScript to your MyApp:

function MyApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider theme={theme}>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Component {...pageProps} />
</ChakraProvider>
);
}

Install RainbowKit

Now we’ll add our connect wallet button using RainbowKit:

npm install @rainbow-me/rainbowkit wagmi ethers

Import the required packages into the top of _app.tsx:

import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
  useSigner,
} from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
import {
  connectorsForWallets,
  wallet,
  RainbowKitProvider,
  midnightTheme,
} from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";

Configure chains, provider, connectorsForWallets, and wagmiClient underneath of your config, fonts, and theme:

const { chains, provider } = configureChains(
  [chain.goerli],
  [
    jsonRpcProvider({
      rpc: () => {
        return {
          http: "<https://rpc.ankr.com/eth_goerli>",
        };
      },
    }),
    publicProvider(),
  ]
);

const connectors = connectorsForWallets([
  {
    groupName: "Recommended",
    wallets: [
      wallet.metaMask({ chains, shimDisconnect: true }),
      wallet.walletConnect({ chains }),
      wallet.coinbase({ appName: "probably nothing", chains }),
      wallet.rainbow({ chains }),
    ],
  },
  {
    groupName: "Others",
    wallets: [
      wallet.argent({ chains }),
      wallet.brave({
        chains,
        shimDisconnect: true,
      }),
      wallet.imToken({ chains }),
      wallet.injected({
        chains,
        shimDisconnect: true,
      }),
      wallet.ledger({
        chains,
      }),
      wallet.steak({ chains }),
      wallet.trust({ chains, shimDisconnect: true }),
    ],
  },
]);

const wagmiClient = createClient({
  autoConnect: false,
  connectors,
  provider,
});

Wrap your MyApp in WagmiConfig and RainbowKitProvider:

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <WagmiConfig client={wagmiClient}>
        <RainbowKitProvider chains={chains} theme={midnightTheme()} coolMode>
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Component {...pageProps} />
        </RainbowKitProvider>
      </WagmiConfig>
    </ChakraProvider>
  );
}

Add thirdweb provider

Now we’re ready to set up our ThirdwebSDKProvider and declare the ChainId. First, add the package with NPM:

npm install @thirdweb-dev/react@2.6.0-1

Import the ThirdwebSDKProvider:

import { ThirdwebSDKProvider, ChainId } from "@thirdweb-dev/react";

Add the activeChainId in your constants:

const activeChainId = ChainId.Goerli;

Declare your ThirdwebProvider:

function ThirdwebProvider({ wagmiClient, children }: any) {
const { data: signer } = useSigner();
return (
<ThirdwebSDKProvider
desiredChainId={activeChainId}
signer={signer as any}
provider={wagmiClient.provider}
queryClient={wagmiClient.queryClient as any}
>
{children}
</ThirdwebSDKProvider>
);
}

Wrap your MyApp in the ThirdwebProvider:

function MyApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider theme={theme}>
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains} theme={midnightTheme()} coolMode>
<ThirdwebProvider wagmiClient={wagmiClient}>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<Component {...pageProps} />
</ThirdwebProvider>
</RainbowKitProvider>
</WagmiConfig>
</ChakraProvider>
);
}

_app.tsx Review

Your _app.tsx file should look very similar to this:

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { ChakraProvider, ColorModeScript, extendTheme } from "@chakra-ui/react";
import {
  chain,
  configureChains,
  createClient,
  WagmiConfig,
  useSigner,
} from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
import {
  connectorsForWallets,
  wallet,
  RainbowKitProvider,
  midnightTheme,
} from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";
import { ThirdwebSDKProvider, ChainId } from "@thirdweb-dev/react";

const config = {
  initialColorMode: "dark",
  useSystemColorMode: true,
};
const fonts = {
  heading: `"Inter", sans-serif`,
  body: `"Inter", sans-serif`,
};

const theme = extendTheme({ config, fonts });

const { chains, provider } = configureChains(
  [chain.goerli],
  [
    jsonRpcProvider({
      rpc: () => {
        return {
          http: "<https://rpc.ankr.com/eth_goerli>",
        };
      },
    }),
    publicProvider(),
  ]
);

const connectors = connectorsForWallets([
  {
    groupName: "Recommended",
    wallets: [
      wallet.metaMask({ chains, shimDisconnect: true }),
      wallet.walletConnect({ chains }),
      wallet.coinbase({ appName: "probably nothing", chains }),
      wallet.rainbow({ chains }),
    ],
  },
  {
    groupName: "Others",
    wallets: [
      wallet.argent({ chains }),
      wallet.brave({
        chains,
        shimDisconnect: true,
      }),
      wallet.imToken({ chains }),
      wallet.injected({
        chains,
        shimDisconnect: true,
      }),
      wallet.ledger({
        chains,
      }),
      wallet.steak({ chains }),
      wallet.trust({ chains, shimDisconnect: true }),
    ],
  },
]);

const wagmiClient = createClient({
  autoConnect: false,
  connectors,
  provider,
});

const activeChainId = ChainId.Goerli;

function ThirdwebProvider({ wagmiClient, children }: any) {
  const { data: signer } = useSigner();
  return (
    <ThirdwebSDKProvider
      desiredChainId={activeChainId}
      signer={signer as any}
      provider={wagmiClient.provider}
      queryClient={wagmiClient.queryClient as any}
    >
      {children}
    </ThirdwebSDKProvider>
  );
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <WagmiConfig client={wagmiClient}>
        <RainbowKitProvider chains={chains} theme={midnightTheme()} coolMode>
          <ThirdwebProvider wagmiClient={wagmiClient}>
            <ColorModeScript initialColorMode={theme.config.initialColorMode} />
            <Component {...pageProps} />
          </ThirdwebProvider>
        </RainbowKitProvider>
      </WagmiConfig>
    </ChakraProvider>
  );
}
export default MyApp;

Add connect wallet button

Head over to the index.tsx file and import the ConnectButton from RainbowKit:

import { ConnectButton } from "@rainbow-me/rainbowkit";

Add <ConnectButton /> in the <main> ... </main> tag:

<main className={styles.main}>
   <h1 className={styles.title}>gm</h1>
   <ConnectButton />
</main>

Congratulations 🎉 Your connect wallet button from RainbowKit should now show on localhost:3000:

Writing and deploying our contract on thirdweb

Thirdweb is a great way to get started deploying your own contracts while also maintaining security of your private keys and ownership of your contracts. Head to thirdweb.com and click Start building to begin deploying your first contract.

Before going further, you’ll need some Goerli ETH. Make sure to head over to any goerli faucet to request some test ether.

First, connect your wallet at https://thirdweb.com/dashboard

Next, select Pre-built contracts:

Then Release a drop:

And then Edition Drop - this is an ERC-1155 Audited Smart Contract:

Add the contract metadata that describes what your contract is about. Here’s what we have put:

Click Deploy Now to deploy your contract. You’ll be prompted to confirm a transaction in your wallet.

Now, you’re ready to add your first edition drop! Click + Create to get started:

Upload your image for the ERC-1155 NFT, metadata, and click Create Edition Drop. You’ll be prompted to sign a transaction in MetaMask, confirm it. Once the transaction confirms we are ready to set the Claim Phase for this token. Your dashboard should look like this, click ⚙️ Claim Phases then + Add Initial Claim Phase:

We’ve set 1 NFT per transaction, start date of the current time, unlimited NFTs on the drop, and only 1 NFT per wallet. Click Save Claim Phases and you will be prompted to confirm another transaction. Copy the contract address under the title of your Edition at the top of the page. For us, it is 0xc321cB91524f3C7fcD9e9333D71b644957852Fd2.

Now, we’re ready to head back to our Next.js app to continue building the minting functionality. We will be using the ThirdwebProvider and ThirdwebSDKProvider that we have already imported into our _app.tsx.

We’ll be starting in the index.tsx file. First we will clean up the heading and add padding before our connect wallet button. Add an import for the Chakra UI heading.

// imports
import { Heading } from "@chakra-ui/react";

// constants

return (
...
<main className={styles.main}>
   <Heading size="xl" textAlign="center" pb="3">gm</Heading>
   <ConnectButton />
</main>

Add minting to your dApp

Nice, now it’s time to add some minting functionality from the thirdweb SDK. Add the following imports to allow use of useEditionDrop and useClaimNFT and wagmi:

import { useEditionDrop, useClaimNFT } from "@thirdweb-dev/react";
import { useAccount } from "wagmi";

Now, add constants. Be sure to replace the CONTRACT_ADDRESS with your contract address from thirdweb:

const Home: NextPage = () => {
  // new constants
  const { address } = useAccount();
  const editionDrop = useEditionDrop(
    "CONTRACT_ADDRESS"
  );
  const { mutate: claimNft, isLoading, error } = useClaimNFT(editionDrop);
  if (error) {
    console.error("failed to claim nft", error);
  }
  // your frontend
  return (

Add Button and **Image**to your import with Chakra UI at the top of index.tsx:

import { Heading, Button, Image } from "@chakra-ui/react";

The next step will add logic to detect a connected wallet from RainbowKit and render the UI accordingly using a ternary statement. You’ll need to add an image in place of probablynothing.png and also add your <CONTRACT_ADDRESS> and <TOKEN_ID> for the OpenSea URL. Add and modify this code underneath of your <ConnectButton />:

{address ? (
  <>
    <Image
      src="./probablynothing.png"
      rounded="2xl"
      width="42%"
      maxW="300px"
      mt="5"
      mb="3"
      alt="probably nothing"
    />
    {isLoading ? (
      <Button
        colorScheme="purple"
        disabled={isLoading}
        isLoading
        loadingText="minting..."
        spinnerPlacement="start"
        _hover={{ transform: "scale(1.1)" }}
        size="lg"
        my="3"
      />
    ) : (
      <Button
        colorScheme="purple"
        disabled={isLoading}
        onClick={() =>
          claimNft({ to: address as any, tokenId: <TOKEN_ID>, quantity: 1 })
        }
        _hover={{ transform: "scale(1.1)" }}
        size="lg"
        my="3"
      >
        claim probably nothing!
      </Button>
    )}
    <Button
      colorScheme="blue"
      rightIcon={<GiSailboat />}
      onClick={() =>
        window.open(
          "<https://testnets.opensea.io/assets/goerli/><CONTRACT_ADDRESS>/<TOKEN_ID>",
          "_blank"
        )
      }
    >
      view on opensea
    </Button>
  </>
) : null}

Between your <Heading> … </Heading> and <ConnectButton />, add this code to conditionally render the image of the NFT to be minted if a wallet is not connected, and hide it if there is a connection:

{!address ? (
  <Image
    src="./probablynothing.png"
    rounded="full"
    width="42%"
    mt="5"
    maxW="300px"
    alt="probably nothing"
  />
) : null}
<br />

index.tsx review

Your index.tsx should now look very similar like this:

import type { NextPage } from "next";
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import { Heading, Button, Image } from "@chakra-ui/react";
import { useEditionDrop, useClaimNFT } from "@thirdweb-dev/react";
import { useAccount } from "wagmi";

const Home: NextPage = () => {
  const { address } = useAccount();
  const editionDrop = useEditionDrop(
    "0xc321cB91524f3C7fcD9e9333D71b644957852Fd2"
  );
  const { mutate: claimNft, isLoading, error } = useClaimNFT(editionDrop);
  if (error) {
    console.error("failed to claim nft", error);
  }
  return (
    <div className={styles.container}>
      <Head>
        <title>thirdweb + RainbowKit + Ankr Edition Drop</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <Heading size="xl" textAlign="center" pb="3">
          gm
        </Heading>
        {!address ? (
          <Image
            src="./probablynothing.png"
            rounded="full"
            width="42%"
            mt="5"
            maxW="300px"
            alt="probably nothing"
          />
        ) : null}
        <br />
        <ConnectButton />
        {address ? (
          <>
            <Image
              src="./probablynothing.png"
              rounded="2xl"
              width="42%"
              maxW="300px"
              mt="5"
              mb="3"
              alt="probably nothing"
            />
            {/* <Text>0 out of ∞ Minted</Text> */}
            {isLoading ? (
              <Button
                colorScheme="purple"
                disabled={isLoading}
                isLoading
                loadingText="minting..."
                spinnerPlacement="start"
                _hover={{ transform: "scale(1.1)" }}
                size="lg"
                my="3"
              />
            ) : (
              <Button
                colorScheme="purple"
                disabled={isLoading}
                onClick={() =>
                  claimNft({ to: address as any, tokenId: 0, quantity: 1 })
                }
                _hover={{ transform: "scale(1.1)" }}
                size="lg"
                my="3"
              >
                claim probably nothing!
              </Button>
            )}
            <Button
              colorScheme="blue"
              onClick={() =>
                window.open(
                  "<https://testnets.opensea.io/assets/goerli/0xc321cB91524f3C7fcD9e9333D71b644957852Fd2/0>",
                  "_blank"
                )
              }
            >
              view on opensea
            </Button>
          </>
        ) : null}
      </main>
      <footer className={styles.footer}>
        <a
          href="<https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app>"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by Vercel
        </a>
      </footer>
    </div>
  );
};

export default Home;

Beautiful!

Here, you can go and test out the mint functionality and play around the code to add more functionalities.

Refresher on 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, 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-cryptolist

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-cryptolist

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 crypto tokens by blockchain.

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 Cryptocurrencies

In this step, we will first create a getCurrencies function in the ./apis.ts file, which will accept the blockchain, and return us the list of cryptocurrencies and the respective details about each token. Here we are going to use the getCurrencies↗ 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', 'syscoin', 'optimism',];

//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',
  syscoin: 'SYS',
  optimism: 'Opt',
};

//getCurrencies function
export const getCurrencies = async (

  blockchain: Blockchain
) => {
  return provider.getCurrencies({

    blockchain,
  });
};

Let's call this function on our page i.e. ./pages/index.tsx to check the list. 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 {
  getCurrencies,
} from '../apis';

function App() {

  useEffect(() => {
    (async () => {
      const  total  = await getCurrencies(
        "eth"
      );
      console.log({ total });
    })();
  }, []);

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

export default App;

Now, let's see the fetched list of cryptocurrencies of an inputted blockchain 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 cryptocurrencies with their contract addresses, name, symbol and thumbnail.

Github Repo

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

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

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 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-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

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

• Node.js as our script runner
• Ankr.js to interact with Ankr's Advanced APIs
• Ankr's Advanced APIs as the data source

Prerequisites

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

Step 1: Set Up Your Node.js Project

Navigate into a directory of your choice and run the following commands in your terminal to set up a new Node.js project:

mkdir ankrjs-node-followalong && cd ankrjs-node-followalong; # create and cd into our project directory
mkdir src; # where our source code will live
yarn init -y; # generates our package.json and yarn.lock files
git init;
echo "node_modules\\n.env\\nbuild\\n*.log" > .gitignore;
yarn add -D typescript ts-node @types/node;
yarn add prompts; # library to help us accept inputs from the terminal
./node_modules/.bin/tsc --init; # generates our tsconfig.json file

Now, create a new file named app.ts inside of your src folder.

File: ./src/app.ts

const main = async () => {
    // this function contains the code that be executed when you run your script
    console.log('Hello world!');
};

main();

Next, go into your package.json file and add a dev script that will let you run your code.

File: ./package.json

{
  "name": "ankrjs-node-tutorial",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Dhaiwat Pandya",
  "license": "MIT",
  "dependencies": {
    "prompts": "^2.4.2"
  },
  "devDependencies": {
    "@types/node": "^18.0.3",
    "ts-node": "^10.8.2",
    "typescript": "^4.7.4"
  },
+  "scripts": {
+    "dev": "ts-node src/app.ts"
+  }
}

You can now run your script from the root of your project:

yarn dev

Step 2: Install And Set Up Ankr.js

Next, you will install and set up Ankr.js so that you can use it to fetch all the NFTs and tokens for a given wallet address later on.

Start by installing the ankr.js package from npm:

# /ankrjs-node-followalong
yarn add @ankr.com/ankr.js

Next, create a new file named utils.ts inside the src directory. You will initialize Ankr.js in this file.

File: ./src/utils.ts

import AnkrscanProvider from '@ankr.com/ankr.js';

const provider = new AnkrscanProvider('');

Your provider instance will be your interface to the Ankr Advanced APIs whenever you want to fetch some data from them.

Step 3: Create The 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.

You can utilize the getNFTsByOwner function provided by Ankr.js for this.

File: ./src/utils.ts

import AnkrscanProvider from '@ankr.com/ankr.js';

const provider = new AnkrscanProvider('');

export const getNFTs = async (walletAddress: string) => {
  return provider.getNFTsByOwner({
    walletAddress,
  });
};

Just to see if things are working, let's call this function from our main script i.e. ./src/app.ts and log out the output.

File: ./src/app.ts

import { getNFTs } from './utils';

const main = async () => {
  // this function contains the code that be executed when you run your script
  console.log('NFTS =================');
  const nfts = await getNFTs('0x0ED6Cec17F860fb54E21D154b49DAEFd9Ca04106');
  console.log(nfts);
};

main();

You can now re-run your script using yarn dev and see a list of NFTs being logged out.

# /ankrjs-node-followalong
yarn dev

Step 4: Accept the address as an input

At the moment, we are passing in a hard-coded address to the getNFTs function. You will now let the user pass in any address from their keyboard instead.

To achieve this, you can make use of the prompts package.

File: ./src/app.ts

import { getNFTs } from './utils';
const prompts = require('prompts');

const main = async () => {
  // this function contains the code that be executed when you run your script
  const addressToQueryNFTsFor = await prompts({
    type: 'text',
    name: 'address',
    message: 'Enter an address to query NFTs for',
  });
  console.log('NFTS =================');
  const nfts = await getNFTs(addressToQueryNFTsFor.address);
  console.log(nfts);
};

main();

Re-run your script by running yarn dev. You should now be able to type in any address of your choice and see all the NFTs owned by that address being logged out.

# /ankrjs-node-followalong
yarn dev

Step 5: Create the getAccountBalance function

In this step, you will create a getAccountBalance function that accepts a walletAddress and returns a list of ERC20 tokens owned by that address and their balances.

You can use the getNFTsByOwner function provided by Ankr.js for this.

File: ./src/utils.ts

import AnkrscanProvider from '@ankr.com/ankr.js';

const provider = new AnkrscanProvider('');

export const getNFTs = async (walletAddress: string) => {
  return provider.getNFTsByOwner({
    walletAddress,
  });
};

export const getAccountBalance = async (walletAddress: string) => {
  return provider.getAccountBalance({
    walletAddress,
    blockchain: ['eth'], // you can fetch ERC20 tokens on other chains by passing in more chain names to this array eg. ['eth', 'polygon']
  });
};

Step 6: Use getAccountBalance in your script

In this step, you will accept an address as input and pass it into getAccountBalance to display results for the given address just like you did with getNFTs.

File: ./src/app.ts

import { getAccountBalance, getNFTs } from './utils';
const prompts = require('prompts');

const main = async () => {
  // this function contains the code that be executed when you run your script
  const addressToQueryNFTsFor = await prompts({
    type: 'text',
    name: 'address',
    message: 'Enter an address to query NFTs for',
  });
  console.log('NFTS =================');
  const nfts = await getNFTs(addressToQueryNFTsFor.address);
  console.log(nfts);

  const addressToQueryBalancesFor = await prompts({
    type: 'text',
    name: 'address',
    message: 'Enter an address to query token balances for',
  });
  console.log('TOKEN BALANCES =================');
  const balances = await getAccountBalance(addressToQueryBalancesFor.address);
  console.log(balances);
};

main();

Run your script again and everything should work as expected!

# /ankrjs-node-followalong
yarn dev

You can find the final code for reference here: https://github.com/Dhaiwat10/ankrjs-node-quickstart

Conclusion

In this guide, you learned how to get up and running with Ankr.js in a Node.js project. If you ran into an issue or have any questions about this guide, feel free to let us know in our Discord server.

Next Steps

Ankr.js and Ankr Advanced APIs have so much more to offer than what we covered in this quickstart guide. Ankr.js gives you access to all sorts of data from seven different chains. Learn more here: https://github.com/ankr-network/ankr.js#️-ankrjs

Other Articles To Read

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

1. 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.
2. View Projects — users can see all the existing projects and campaign details on the homepage
3. 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

  git clone https://github.com/kaymomin/Starterkit-Crowdfunding-dApp.git
  

• Now, let's navigate into the cloned directory and set up the development environment

  cd starterkit-crowdfunding-dapp
  

  yarn
  

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

  yarn dev
  

  and you will be able to see the starter-kit webpage. Here's what the site will look like at this point:

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:

1. 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.
2. 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

Step 4: Get Contract ABI for Verified Codes

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

1. we will verify our smart contracts on Polygonscan↗
2. 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.

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! 🛠️

You can try it out yourself here.

ℹ️ Note: The content of this tutorial was prepared with wagmi 0.5.8 and rainbowkit 0.4.1. These libraries get updated often and sometimes introduce breaking changes, so please keep that in mind!

Tech Stack

• RainbowKit for wallet connections.: It is made by the same team behind the popular Rainbow wallet. It lets developers add a beautiful connect wallet button to their app with just a few lines of code.

• wagmi to interact with our smart contract.: It is a set of React hooks for building frontends for Ethereum & EVM-based dApps. The wagmi Github repository has over 2,000 stars on GitHub and is quickly becoming the go-to library for React devs.
• React and Vite to build our frontend.
• TypeScript as our programming language.

Project Setup

Let's start off by initializing a new Vite project from our terminal. Make sure you have Node.js installed.

yarn create vite

Next, let's cd into our project directory and install the dependencies.

Once those dependencies have been installed, we can run our app locally by running yarn dev.

If you open http://localhost:3000 in your browser, you should see our app running:

Setting Up Rainbowkit And wagmi

We are mostly going to follow the instructions on the Rainbowkit installation page.

We'll start by installing some dependencies. On top of the dependencies required by Rainbowkit, let's also install some dependencies for Chakra UI. We will be using Chakra to help us with some styling.

Run yarn add @rainbow-me/rainbowkit wagmi ethers @chakra-ui/react @emotion/react @emotion/styled framer-motion in your terminal.

Once that's done, let's setup the different providers and clients.

File: ./src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import '@rainbow-me/rainbowkit/styles.css';
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
import { publicProvider } from 'wagmi/providers/public';
import { ChakraProvider } from '@chakra-ui/react';

const { chains, provider } = configureChains(
  [chain.goerli], // you can add more chains here like chain.mainnet, chain.optimism etc.
  [
    jsonRpcProvider({
      rpc: () => {
        return {
          http: 'https://rpc.ankr.com/eth_goerli', // go to https://www.ankr.com/protocol/ to get a free RPC for your network
        };
      },
    }),
    publicProvider(),
  ]
);

const { connectors } = getDefaultWallets({
  appName: 'NFT minting dApp',
  chains,
});

const wagmiClient = createClient({
  autoConnect: false,
  connectors,
  provider,
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ChakraProvider>
      <WagmiConfig client={wagmiClient}>
        <RainbowKitProvider chains={chains}>
          <App />
        </RainbowKitProvider>
      </WagmiConfig>
    </ChakraProvider>
  </React.StrictMode>
);

That's all the configuration work out of the way.

Adding The Connect Wallet Button

Like I mentioned earlier, Rainbowkit makes it extremely easy for you to add a connect wallet button to your app. This is all you need:

File: ./src/App.tsx

import { Container } from '@chakra-ui/react';
import { ConnectButton } from '@rainbow-me/rainbowkit';

function App() {
  return (
    <Container paddingY='10'>
      <ConnectButton />
    </Container>
  );
}

export default App;

You should now see a fully-functional connect wallet button in your app! It's that easy.

Loading Up The Smart Contract

We will be minting NFTs from a smart contract that has already been deployed at 0xaa3906f986e0cd86e64c1e30ce500c1de1ef46ad on the Goerli testnet. I have verified the contract so you can view the source code on Etherscan too if you are curious.

💡 If you want to learn how to write and deploy your own ERC721 NFT smart contract, I highly recommend checking out this tutorial: https://ankr.hashnode.dev/deploy-and-mint-a-cryptokitties-like-nft-with-erc-721-smart-contract

On top of the address of the contract, we'll also need its ABI (What's an ABI?). Create a new file named abiFile.json inside the src directory.

Copy and paste the contents of this file into your abiFile.json file.

Displaying The Image Of The NFT

For convenience's sake, the smart contract we are using for this tutorial uses the same image for all the NFTs it mints. It has a variable named commonTokenURI which holds a link to the metadata of our NFT.

We will have to call a function with the same name in order to get the URI for our NFT's image. We'll be using the useContractRead hook from our wagmi node package to do this.

File: ./src/App.tsx

import { Container } from '@chakra-ui/react';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useEffect } from 'react';
import { useContractRead } from 'wagmi';
import abiFile from './abiFile.json';

const CONTRACT_ADDRESS = '0xaa3906f986e0cd86e64c1e30ce500c1de1ef46ad';

function App() {
  const contractConfig = {
    addressOrName: CONTRACT_ADDRESS,
    contractInterface: abiFile.abi,
  };

  const { data: tokenURI } = useContractRead({
    ...contractConfig,
    functionName: 'commonTokenURI',
  }); // calling the 'commonTokenURI' function in our contract

    // Log the fetched tokenURI to the console
  useEffect(() => {
    console.log({ tokenURI });
  }, [tokenURI]);

  return (
    <Container paddingY='10'>
      <ConnectButton />
    </Container>
  );
}

export default App;

Go back to your app and open the console in your browser. You should see the token URI being logged.

Let's open this link. As you can see, it's just a JSON file hosted on IPFS: https://gateway.pinata.cloud/ipfs/QmPf2x91DoemnhXSZhGDP8TX9Co8AScpvFzTuFt9BGAoBY.

If you open the link associated with the image field in that file, you should see this:

This is the image for our NFTs. A good ol' blue Ankr logo!

Since we want to display this image in our app, let's go about grabbing a link to it from the tokenURI we fetched from the commonTokenURI function on our contract.

File: ./src/App.tsx

function App() {
  const contractConfig = {
    addressOrName: CONTRACT_ADDRESS,
    contractInterface: abiFile.abi,
  };

  const { data: tokenURI } = useContractRead({
    ...contractConfig,
    functionName: 'commonTokenURI',
  });
  const [imgURL, setImgURL] = useState('');

  useEffect(() => {
    (async () => {
      if (tokenURI) {
        const res = await (await fetch(tokenURI as unknown as string)).json();
        setImgURL(res.image);
      }
    })();
  }, [tokenURI]);

  return (
    <Container paddingY='10'>
      <ConnectButton />
      <Image src={imgURL} width='200px' />
    </Container>
  );
}

You should now see the image showing up in your app. Nice!

Let's tidy up our page a little bit and add a loading indicator for the image before we move on.

File: ./src/App.tsx

import { Box, Container, Image, Skeleton, Text } from '@chakra-ui/react';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import { useContractRead } from 'wagmi';
import abiFile from './abiFile.json';

const CONTRACT_ADDRESS = '0xaa3906f986e0cd86e64c1e30ce500c1de1ef46ad';

function App() {
  const contractConfig = {
    addressOrName: CONTRACT_ADDRESS,
    contractInterface: abiFile.abi,
  };

  const { data: tokenURI } = useContractRead({
    ...contractConfig,
    functionName: 'commonTokenURI',
  });
  const [imgURL, setImgURL] = useState('');

  useEffect(() => {
    (async () => {
      if (tokenURI) {
        const res = await (await fetch(tokenURI as unknown as string)).json();
        setImgURL(res.image);
      }
    })();
  }, [tokenURI]);

  return (
    <Container paddingY='10'>
      <ConnectButton />
      <Text marginTop='4'>This is the NFT we will be minting!</Text>

      {imgURL ? (
        <Box
          as={motion.div}
          borderColor='gray.200'
          borderWidth='1px'
          width='fit-content'
          marginTop='4'
          padding='6'
          shadow='md'
          rounded='lg'
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <Image src={imgURL} width='200px' />
        </Box>
      ) : (
        <Skeleton marginTop='4' width='250px' height='250px' rounded='lg' />
      )}
    </Container>
  );
}

export default App;

Our app looks much better now.

Adding the mint functionality

It's now time to add the logic that will let people mint NFTs! We're gonna start by placing a nice button on our page. We'll also call a function named onMintClick when someone clicks this button.

To mint an NFT, we will be calling the mint function on our smart contract. We'll be using the useContractWrite hook from our wagmi node package for this.

  const { address } = useAccount();
  const { writeAsync: mint, error: mintError } = useContractWrite({
    ...contractConfig,
    functionName: 'mint',
  });
  const [mintLoading, setMintLoading] = useState(false);

  const onMintClick = async () => {
    try {
      const tx = await mint({
        args: [
          address,
          {
            value: ethers.utils.parseEther('0.001'),
          },
        ],
      });
      const receipt = await tx.wait();
      console.log({ receipt });
    } catch (error) {
      console.error(error);
    } finally {
      setMintLoading(false);
    }
  };

Before proceeding, make sure you have some Goerli ETH in your account. You can grab some from this generous faucet by Paradigm.

Once you have some test ETH, you can finally click that mint button and see what happens. Confirm the transaction request in your wallet and you should see something like this being logged out in your console:

That's the transaction receipt of an NFT you just successfully minted! Cool. Our code is working.

Next we’re going to clean up the UI a bit and add one or two additional pieces of functionality. Once the user successfully mints an NFT, we'll show them a link to their NFT on Opensea.

We will also handle errors if there are any because that's what good devs do.

File: ./src/App.tsx

import {
  Button,
  Container,
  Text,
  Image,
  Box,
  Link,
  Skeleton,
} from '@chakra-ui/react';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { ethers } from 'ethers';
import { useEffect, useState } from 'react';
import { useAccount, useContractRead, useContractWrite } from 'wagmi';
import abiFile from './abiFile.json';
import { motion } from 'framer-motion';

const CONTRACT_ADDRESS = '0xaa3906f986e0cd86e64c1e30ce500c1de1ef46ad';

const getOpenSeaURL = (tokenId: string | number) =>
  `https://testnets.opensea.io/assets/goerli/${CONTRACT_ADDRESS}/${tokenId}`;

function App() {
  const contractConfig = {
    addressOrName: CONTRACT_ADDRESS,
    contractInterface: abiFile.abi,
  };
  const { data: tokenURI } = useContractRead({
    ...contractConfig,
    functionName: 'commonTokenURI',
  });
  const [imgURL, setImgURL] = useState('');

  const { writeAsync: mint, error: mintError } = useContractWrite({
    ...contractConfig,
    functionName: 'mint',
  });
  const [mintLoading, setMintLoading] = useState(false);
  const { address } = useAccount();
  const isConnected = !!address;
  const [mintedTokenId, setMintedTokenId] = useState<number>();

  const onMintClick = async () => {
    try {
      setMintLoading(true);
      const tx = await mint({
        args: [address, { value: ethers.utils.parseEther('0.001') }],
      });
      const receipt = await tx.wait();
      console.log('TX receipt', receipt);
      // @ts-ignore
      const mintedTokenId = await receipt.events[0].args[2].toString();
      setMintedTokenId(mintedTokenId);
    } catch (error) {
      console.error(error);
    } finally {
      setMintLoading(false);
    }
  };

  useEffect(() => {
    (async () => {
      if (tokenURI) {
        const res = await (await fetch(tokenURI as unknown as string)).json();
        setImgURL(res.image);
      }
    })();
  }, [tokenURI]);

  return (
    <Container paddingY='10'>
      <ConnectButton />

      <Text marginTop='4'>This is the NFT we will be minting!</Text>

      {imgURL ? (
        <Box
          as={motion.div}
          borderColor='gray.200'
          borderWidth='1px'
          width='fit-content'
          marginTop='4'
          padding='6'
          shadow='md'
          rounded='lg'
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <Image src={imgURL} width='200px' />
        </Box>
      ) : (
        <Skeleton marginTop='4' width='250px' height='250px' rounded='lg' />
      )}

      <Button
        disabled={!isConnected || mintLoading}
        marginTop='6'
        onClick={onMintClick}
        textColor='white'
        bg='blue.500'
        _hover={{
          bg: 'blue.700',
        }}
      >
        {isConnected ? '🎉 Mint' : '🎉 Mint (Connect Wallet)'}
      </Button>

      {mintError && (
        <Text marginTop='4'>⛔️ Mint unsuccessful! Error message:</Text>
      )}

      {mintError && (
        <pre style={{ marginTop: '8px', color: 'red' }}>
          <code>{JSON.stringify(mintError, null, ' ')}</code>
        </pre>
      )}
      {mintLoading && <Text marginTop='2'>Minting... please wait</Text>}

      {mintedTokenId && (
        <Text marginTop='2'>
          🥳 Mint successful! You can view your NFT{' '}
          <Link
            isExternal
            href={getOpenSeaURL(mintedTokenId)}
            color='blue'
            textDecoration='underline'
          >
            here!
          </Link>
        </Text>
      )}
    </Container>
  );
}

export default App;

That's all! Our NFT minting page is ready now. Go ahead and mint as many NFTs as you want. :)

Final Code

You can find the final code for this project here: https://github.com/Dhaiwat10/rainbowkit-nft-mint-vite

Next Steps

• Follow me on Twitter at @dhaiwat10 👻
• Now that you know how to interact with an NFT smart contract and mint an NFT, you can try something bigger by building out a UI for an NFT marketplace. If you don't want to write an NFT marketplace contract, you can just build a UI for an existing marketplace like Zora.

Other Articles To Read

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 eight 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 below:

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

const provider = new AnkrscanProvider('');

const listOfChains: Blockchain[] = [
  'eth',
  'arbitrum',
  'avalanche',
  'bsc',
  'fantom',
  'polygon',
];

export const chainsToNativeSymbols: { [key in Blockchain]: string } = {
  eth: 'ETH',
  arbitrum: 'ETH',
  avalanche: 'AVAX',
  bsc: 'BNB',
  fantom: 'FTM',
  polygon: 'MATIC',
};

export const getAccountBalance = async (
  walletAddress: string,
  blockchain: Blockchain
) => {
  return provider.getAccountBalance({
    walletAddress,
    blockchain,
  });
};

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.

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]

The Lens team has conveniently made available an API that indexes all of the contracts on the protocol and gives developers, especially frontend devs ease of access to the protocol's data. This API relies on JWT tokens to authenticate users. Our focus for this article will be on learning about how these tokens are used by Lens Protocol to authenticate users and how you can set up a simple user authentication flow on your frontend.

Building An Authenticated Lens Protocol Feed

We’ll be building a Next.js app that lets people connect their wallets and then logs into Lens Protocol. As a bonus, we will also show them a timeline of some recommended posts coming straight from the Lens API!

Project Setup Walkthrough

Let's start by setting up a Next.js project locally. To save us some time, we are going to use a Next RainbowKit wagmi template I made as a base. It comes along with Rainbowkit, wagmi and Chakra UI pre-configured.

git clone https://github.com/Dhaiwat10/next-chakra-rainbowkit-wagmi-starter lens-frontend;

Let's install the dependencies now.

cd lens-frontend;

yarn;

We also need to install two additional dependencies. We will be needing these to fetch data from the Lens API.

# ./lens-frontend

yarn add @apollo/client graphql

Now, let’s look at what we’re working with by running yarn dev and opening our site on http://localhost:3000.

API Client Setup

Let's get to business! As discussed earlier, we will be using Apollo Client to interact with the Lens API.

Create a new file called utils.js at the root of your project. We'll start by setting up an HttpLink to fetch data and an ApolloLink to take care of authentication. In the end, we are just creating an ApolloClient and passing in both the httpLink and authLink.

File: ./utils.js

// utils.js
import {
  ApolloClient,
  ApolloLink,
  HttpLink,
  InMemoryCache,
  gql
} from '@apollo/client';

const API_URL = '<https://api.lens.dev/>';

// `httpLink` our gateway to the Lens GraphQL API. It lets us request for data from the API and passes it forward
const httpLink = new HttpLink({ uri: API_URL });

/* `authLink` takes care of passing on the access token along with all of our requests. We will be using session storage to store our access token. 

The reason why we have to account for an access token is that that's what the Lens API uses to authenticate users. This is the token you'll get back when someone successfully signs in. We need to pass this token along with all the requests we made to the API that *need* authentication.
*/
const authLink = new ApolloLink((operation, forward) => {
    const token = sessionStorage.getItem('accessToken');

    operation.setContext({
        headers: {
            'x-access-token': token ? `Bearer ${token}` : '',
        },
    });

    return forward(operation);
});

export const apolloClient = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
});

Sign-In With Lens Setup

The next step is to get a brief idea of the general flow of how authentication with the Lens API works.

1. Request For A “Challenge” Text

To verify the authenticity of requests coming in, the Lens API asks clients to request for a “challenge” text (or prompt) that they must get signed by the user's wallet. This challenge text is nothing but a piece of text containing a timestamp and a random request id (nonce) generated by the API. This is what a challenge text looks like:

Before prompting the user to sign this message with their wallet, we have to retrieve it from the Lens API. Let's set up a query for that. Add this to the bottom of your utils.js file.

File: ./utils.js

// ...

const GET_CHALLENGE = `
    query($request: ChallengeRequest!) {
        challenge(request: $request) { text }
    }
`;

export const generateChallenge = async (address) => {
    const res = await apolloClient.query({
        query: gql(GET_CHALLENGE),
        variables: {
            request: {
                address,
            }
        }
    });
    return res.data.challenge.text;
}

The generateChallenge function lets us ask the Lens API for a challenge text for the user to sign. Let's now add an actual sign in button to our UI. Go to the pages/index.js file and add this to the markup:

File: ./pages/index.js

export default function Home() {
  return (
    <Container paddingY='10'>
      <ConnectButton />

      <Button marginTop='2'>Login with Lens</Button>
    </Container>
  );
}

Next, we are going to create a signIn function and execute it whenever someone clicks the Login button.

import { Button, Container } from '@chakra-ui/react';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useAccount } from 'wagmi';
import { generateChallenge } from '../utils';

export default function Home() {
  const { data } = useAccount();
  const address = data?.address;
  const connected = !!data?.address;

  const signIn = async () => {
    try {
      if (!connected) {
        return alert('Please connect your wallet first');
      }
      const challenge = await generateChallenge(address);
      console.log({ challenge });
    } catch (error) {
      console.error(error);
      alert('Error signing in');
    }
  };

  return (
    <Container paddingY='10'>
      <ConnectButton />

     <Button onClick={signIn} marginTop='2'>
       Login with Lens
     </Button>
     <Button marginTop='2'>Login with Lens</Button>
    </Container>
  );
}

You should now be able to click on the Login button and see a challenge text being logged in the console.

2. Ask The User To Sign The Challenge Text

We will use the useSignMessage hook from wagmi to do this. All we need to do is to pass in the challenge to the signMessageAsync function and retrieve the signature.

File: ./pages/index.js

import { useAccount, useSignMessage } from 'wagmi';

export default function Home() {
  const { data } = useAccount();
  const address = data?.address;
  const connected = !!data?.address;

    // `signMessageAsync` lets us programatically request a message signature from the user's wallet
 const { signMessageAsync } = useSignMessage();

  const signIn = async () => {
    try {
      if (!connected) {
        return alert('Please connect your wallet first');
      }
      const challenge = await generateChallenge(address);
      const signature = await signMessageAsync({ message: challenge });
      console.log({ signature });
    } catch (error) {
      console.error(error);
      alert('Error signing in');
    }
  };

  return (
    <Container paddingY='10'>
      <ConnectButton />

     <Button onClick={signIn} marginTop='2'>
       Login with Lens
     </Button>
     <Button marginTop='2'>Login with Lens</Button>
    </Container>
  );
}

You should now see a Metamask popup asking you to sign a message and the signed message being logged in the console.

3. Retrieve Access Token With Signed Message

Now that we have a signature, let's send it over to the Lens API for verification. In return, we can expect to get back an access token if the signature is legit.

Go to your utils.js file and add this piece of code to the bottom of your file.

File: ./utils.js

// ...

const AUTHENTICATION = `
  mutation($request: SignedAuthChallenge!) {
    authenticate(request: $request) {
      accessToken
      refreshToken
    }
 }
`;

export const authenticate = async (address, signature) => {
  const { data } = await apolloClient.mutate({
    mutation: gql(AUTHENTICATION),
    variables: {
      request: {
        address,
        signature,
      },
    },
  });
  return data.authenticate.accessToken;
};

The authenticate function here is taking in the user's address and the signed message, sending it to the Lens API to get it verified and returning an access token if there is one. We will now make use of this function inside of the signIn function for our UI in our pages/index.js file.

File: ./pages/index.js

import { authenticate, generateChallenge } from '../utils';

export default function Home() {
  const { data } = useAccount();
  const address = data?.address;
  const connected = !!data?.address;
  const { signMessageAsync } = useSignMessage();

  const signIn = async () => {
    try {
      if (!connected) {
        return alert('Please connect your wallet first');
      }
      const challenge = await generateChallenge(address);
      const signature = await signMessageAsync({ message: challenge });
      const accessToken = await authenticate(address, signature);
      console.log({ accessToken });
      window.sessionStorage.setItem('accessToken', accessToken);
    } catch (error) {
      console.error(error);
      alert('Error signing in');
    }
  };

  return (
    <Container paddingY='10'>
      <ConnectButton />

     <Button onClick={signIn} marginTop='2'>
       Login with Lens
     </Button>
     <Button marginTop='2'>Login with Lens</Button>
    </Container>
  );
}

You will also notice that we are calling window.sessionStorage.setItem to store the access token to the browser's session storage. Let me explain why - if you go back to the utils.js file and have a look, you will notice that we are looking for the access token inside the browser's session storage to then pass it along with any further requests.

File: ./utils.js

// ...

const authLink = new ApolloLink((operation, forward) => {
  const token = sessionStorage.getItem('accessToken');

  operation.setContext({
    headers: {
      'x-access-token': token ? `Bearer ${token}` : '',
    },
  });

  return forward(operation);
});

Let's now go to our browser and try this out. You should now see the access token being stored in the browser's session storage successfully.

That's it! That's all you need to do to integrate Login with Lens in your React app. With the setup that we have in place, you don't need to do any additional work in order to make use of the access token in your future API requests. (You may need to tackle refresh tokens if you want to create a production app)

ℹ️ Note: Lens API currently has restricted access to the write endpoints/mutations. You might need to get your domain allowlisted.

Bonus: Timeline

As a bonus, we will add a simple timeline showing the current top posts on Lens Protocol.

To get started, let's setup a getPublications function in our utils.js file. Add this piece of code to the bottom of it:

File: ./utils.js

const GET_PUBLICATIONS_QUERY = `
query {
  explorePublications(request: {
    sortCriteria: TOP_COMMENTED,
    publicationTypes: [POST],
    limit: 20
  }) {
    items {
      __typename
      ... on Post {
        ...PostFields
      }
    }
  }
}

fragment ProfileFields on Profile {
  id
  name
  metadata
  handle
  picture {
    ... on NftImage {
      uri
    }
    ... on MediaSet {
      original {
        ...MediaFields
      }
    }
  }
  stats {
    totalComments
    totalMirrors
    totalCollects
  }
}

fragment MediaFields on Media {
  url
}

fragment PublicationStatsFields on PublicationStats {
  totalAmountOfMirrors
  totalAmountOfCollects
  totalAmountOfComments
}

fragment MetadataOutputFields on MetadataOutput {
    content
  media {
    original {
      ...MediaFields
    }
  }
}

fragment PostFields on Post {
  id
  profile {
    ...ProfileFields
  }
  stats {
    ...PublicationStatsFields
  }
  metadata {
    ...MetadataOutputFields
  }
}
  `;

// publications = posts in Lens lingo
export const getPublications = async () => {
  const { data } = await apolloClient.query({
    query: gql(GET_PUBLICATIONS_QUERY),
  });
  return data.explorePublications.items;
};

It's quite a long GraphQL query I know! This is because we are fetching data about a lot of different fields. Let's now use this getPublications function to show some posts in our UI.

In our pages/index.js file, we want to fetch a list of posts using getPublications and display them in our UI nicely.

Add the following piece of code to your pages/index.js file in order to make this happen.

File: ./pages/index.js

import { authenticate, generateChallenge, getPublications } from '../utils';
import { useEffect, useState } from 'react';

export default function Home() {
  const { data } = useAccount();
  const address = data?.address;
  const connected = !!data?.address;
  const { signMessageAsync } = useSignMessage();

  const [posts, setPosts] = useState([]);

  const signIn = async () => {
    try {
      if (!connected) {
        return alert('Please connect your wallet first');
      }
      const challenge = await generateChallenge(address);
      const signature = await signMessageAsync({ message: challenge });
      const accessToken = await authenticate(address, signature);
      console.log({ accessToken });
      window.sessionStorage.setItem('accessToken', accessToken);
    } catch (error) {
      console.error(error);
      alert('Error signing in');
    }
  };

    useEffect(() => {
    getPublications().then(setPosts);
  }, []);

  return (
    <Container paddingY='10'>
      <ConnectButton />

      <Button onClick={signIn} marginTop='2'>
        Login with Lens
      </Button>

      <VStack spacing={4} marginY='10'>
        {posts
          .filter((post) => post.__typename === 'Post') // we need to filter the list to make sure we are not rendering anything other than Posts, like comments and other formats.
          .map((post) => {
            return (
              <VStack
                key={post.id}
                borderWidth='0.7px'
                paddingX='4'
                paddingY='2'
                rounded='md'
                width='full'
                alignItems='left'
                as='a'
                href={`https://lenster.xyz/posts/${post.id}`}
                target='_blank'
                transition='all 0.2s'
                _hover={{
                  shadow: 'md',
                }}
              >
                <HStack>
                  <Avatar src={post.profile.picture.original.url} />
                  <Text fontWeight='bold' justifyContent='left'>
                    {post.profile?.handle || post.profile?.id}
                  </Text>
                </HStack>
                 <Text>{post.metadata?.content}</Text>
                <HStack textColor='gray.400'>
                  <Text>
                    {post.stats?.totalAmountOfComments} comments,
                  </Text>
                  <Text>
                    {post.stats?.totalAmountOfMirrors} mirrors,
                  </Text>
                  <Text>
                    {post.stats?.totalAmountOfCollects} collects
                  </Text>
                </HStack>
              </VStack>
            );
          })}
      </VStack>
    </Container>
  );
}

You should now be seeing a nice list of posts showing up on your timeline. Cool!

To add some last few finishing touches, we are going to show some skeletons when the posts are still loading and we are going to hide the login button once someone has signed in.

To add the skeletons, add the following piece of code to your pages/index.js file.(I have omitted the parts of the file which are unaffected)

File: ./pages/index.js

import { Skeleton } from '@chakra-ui/react';

export default function Home() {
    return (
        <Container paddingY='10'>
      <ConnectButton />

      <Button onClick={signIn} marginTop='2'>
        Login with Lens
      </Button>

      <VStack spacing={4} marginY='10'>
        {posts
          .filter((post) => post.__typename === 'Post')
          .map((post) => {
            return (
              ...
            );
          })}

        {/* Skeletons */}
        {posts.length === 0 || !posts ? (
          <VStack>
            {[...Array(10)].map((_, idx) => {
              return <Skeleton key={idx} height='32' width='xl' rounded='md' />;
            })}
          </VStack>
        ) : null}
      </VStack>
    </Container>
    );
}

To hide the Login button when someone is already signed in, we are going to make use of a simple hack. We are going to create a state variable called signedIn and use that variable to show the button conditionally. Let's add the following piece of code to make this happen:

File: ./pages/index.js

export default function Home() {
  const [signedIn, setSignedIn] = useState(false);

  const signIn = async () => {
    try {
      if (!connected) {
        return alert('Please connect your wallet first');
      }
      const challenge = await generateChallenge(data?.address as string);
      const signature = await signMessageAsync({ message: challenge });
      const accessToken = await authenticate(address as string, signature);
      window.sessionStorage.setItem('accessToken', accessToken);

      setSignedIn(true);
    } catch (error) {
      console.error(error);
      alert('Error signing in');
    }
  };

  return (
    <Container paddingY='10'>
      <ConnectButton showBalance={false} />
       {!signedIn && (
        <Button onClick={signIn} marginTop='2'>
          Login with Lens
        </Button>
       )}
            ...

There we have it! We now have a nice-looking, simple React frontend built on top of Lens Protocol in front of us.

Full Code Repository

What’s Next?

Now that you know how to authenticate users using the Lens API, the possibilities for you are endless. I highly suggest browsing through the Lens API docs and the Lens Showcase for some inspiration. You can build anything from a Hackernews clone to a decentralized YouTube clone. You have the world at your feet!

Other Articles To Read

I mean, I'm no Naval Ravikant, so I won’t say that the next big thing in code is no-code but I'll rather let Chris echo that on my behalf:

"The future of coding is no coding at all." - Chris Wanstrath, CEO at GitHub.

Anyway, getting back to the topic, the DAO; a new-ish type of organizational structure and another hot acronym on the block. For those of you who aren't familiar with what DAO is, toggle the tweet. For the rest of you, enter the playground!

So, what are we building today?

A DAO.
haha, I already read the title … tell me more!

Um, without writing a single line of code.
what do you think why I clicked on this article, huh?

Let me just show you instead. Also, was that just me talking to myself or what?

TL;DR: We will build a DAO on Aragon Client↗ and deploy it on the Ethereum Rinkeby Testnet. By the end of this tutorial, you’ll be able to:

• deploy a DAO
• declare the name and symbol for your token
• allocate tokens to the members of the DAO
• create the first proposal question
• begin the voting process
• and enter your first vote in favor/against the proposal

Wait, what’s Aragon though?

Aragon is a DAO maker tool for beginners and developers to create their first of many DAOs in a couple of clicks. This tool will help you with managing your DAO members, their votes, and proposals, and will let you admin your funds directly on the blockchain without writing a single line of code.

Getting Started

Before we get started deploying our very first DAO, make sure your Metamask wallet is connected with the Rinkeby Testnet. Next, we will need some test ethers to make transactions. So, head over to the Rinkeby Faucet↗, follow through the instructions, and get yourself some test ETH. You'll at least need 0.2 test ETH.

Setting up a DAO

Head over to Aragon Client↗ and follow these steps:

• Click on the "Connect Account" button and select "Metamask", approve the request from MetaMask, and connect with the ‘Ethereum Rinkeby Testnet.

• Navigate to the "Create an organization" option and click on that.

Once you select the "Create an Organization" button, you'll land to this page where you'll be given a few options as pre-configured templates for your DAO, with the details given already.

For this project, we will opt for the "Company" template where the tokens are transferable and decisions are based on the weighted voting system.

In a weighted voting system, all votes are valid but not equally counted. Each voter's voting power is based on the size of their stake; their individual level of status or expertise; or according to pre-defined organizational rules.

• Next up, we will set up the DAO's name. The name you choose will be mapped to the organization's address and cannot be changed after you launch it.

• Once you set up the name from the DAO, click "Next: Configure template".

Configure Voting

Now, in the above screenshot, you see a couple of different options which we will be exploring below:

• Support % is the relative percentage of tokens that are required to vote “Yes” for a proposal to be approved. For example, if “Support” is set to 50%, then more than 50% of the tokens used to vote on a proposal must vote “Yes” for it to pass.

• Minimum Approval % is the percentage of the total token supply that is required to vote “Yes” on a proposal before it can be approved. For example, if the “Minimum Approval” is set to 20%, then more than 20% of the outstanding token supply must vote “Yes” on a proposal for it to pass.

• Vote Duration is the length of time that the vote will be open for participation. For example, if the Vote Duration is set to 24 hours, then token holders have 24 hours to participate in the vote.

You can set the settings which might suit best for your DAO, for the sake of this project, let's go with the default configs.

Set Tokens!

Now that we have configured the voting mechanism for the DAO, you can now set a desired name and symbol for your token.

• Enter the token name and symbol
• Enter the addresses of the DAO members or holders and allocate tokens to them.
• Review the information and hit ‘Launch your organization’.

After you launch your organization, the Metamask window will pop up for transaction approval. Confirm the transaction and make sure you don't select the speed-up option in MetaMask. Also, do not refresh the window.

With that, you should be presented with a screen similar to this:

First Proposal, First Vote

Click on get started, and let us create our very first proposal to begin the voting process.

• Click on ‘Vote’ from the options shown or find 'Voting' from the left menu and click on ‘Create a New Vote’.

• Add in the proposal question and open it for voting.

This action will require you to sign a transaction for the proposal to go live.

Once the proposal is live, members can vote "yes" or "no" based on their decision in favor or against the question asked. The voting window will be open for the time duration set in the earlier steps. In our case, it is 24 hours only.

Now that you have successfully published the first proposal, you can finally register your first vote!

Next Steps

If you're leaving under a rock, here is some news for you - Ethereum Rinkeby Testnet will be deprecated soon. Don't fret, we're good for now and I'll update these tutorials as the testnet landscape changes. But for now, here's a task for y'all:

• Create an exclusive club for your friends online (aka DAO) and deploy it on the Polygon network instead (here's me saving you from dollars worth of deployment cost).

PS: Feel free to plug your DAO's ENS in the comments below. I'm all eyes and ears, really. You can also drop me a "👋" on Twitter @kayprasla or find me in the Developer DAO discord!

Other Articles to Explore

• Next.js as the React/frontend framework
• TailwindCSS as the CSS framework
• Ankr.js to interact with Ankr's Advanced APIs
• Ankr's Advanced APIs as the data source

Prerequisites

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

Step 1: Set Up Your Next.js Starter Project

Navigate into a directory of your choice and run the following command in your terminal to set up a new Next.js project:

yarn create next-app --ts ankrjs-tutorial

You can now navigate into the directory and launch the app:

cd ankrjs-tutorial && yarn dev

Here's what it looks like at the moment:

The app currently only contains the boilerplate code provided by Next.js. Over the course of the next few sections, you'll set up Ankr.js and use it to create a gallery of NFTs for any given wallet address.

Before we proceed to step 2, feel free to set up TailwindCSS by following their official guide for Next.js: https://tailwindcss.com/docs/guides/nextjs

Step 2: Install And Set Up Ankr.js

Next, you will install and set up Ankr.js so that you can use it to fetch all the NFTs for a given wallet address later on.

Start by installing the ankr.js package from npm:

# ./ankrjs-tutorial

yarn add @ankr.com/ankr.js

Next, create a new file named utils.ts at the root of your project directory. You will initialize Ankr.js in this file.

File: ./utils.ts

import AnkrscanProvider from '@ankr.com/ankr.js';

const provider = new AnkrscanProvider('');

Your provider instance will be your interface to the Ankr Advanced APIs whenever you want to fetch some data from them.

Step 3: Create NFT Retrieval Function

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

You can utilize the getNFTsByOwner function provided by Ankr.js for this.

File: ./utils.ts

import AnkrscanProvider from '@ankr.com/ankr.js';

const provider = new AnkrscanProvider('');

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

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

File: ./pages/index.tsx

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

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

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

export default Home;

You should see a list of nfts being logged out in your browser's console.

Step 4: Create Wallet Address Input

You will now add an input to the UI that lets the user input any wallet address they want and pass it to the getNfts function.

You can keep track of the wallet address input in a state variable named walletAddress, hook it up to the input element in the UI, and then pass walletAddress to the getNfts function.

File: ./pages/index.tsx

/* eslint-disable @next/next/no-img-element */
import type { NextPage } from 'next';
import Link from 'next/link';
import { useState } from 'react';
import { useNfts } from '../hooks';

const Home: NextPage = () => {
  const [walletAddress, setWalletAddress] = useState(
    '0xB2Ebc9b3a788aFB1E942eD65B59E9E49A1eE500D'
  );

  useEffect(() => {
    (async () => {
      const { nfts } = await getNfts(walletAddress);
      console.log({ nfts });
    })();
  }, [walletAddress]);

  return (
    <div className='p-10 flex flex-col items-center'>
      <h1 className='text-3xl font-bold'>NFT viewer</h1>

      <div className='flex flex-col mt-4'>
        <label className='text-zinc-700' htmlFor='wallet-address'>
          Wallet address
        </label>
        <input
          id='wallet-address'
          type='text'
          value={walletAddress}
          onChange={(e) => setWalletAddress(e.target.value)}
          className='rounded p-2 w-[400px] border'
          placeholder='Enter a wallet address here'
        />
      </div>
    </div>
  );
};

export default Home;

You should see a different list of nfts being logged out in the console when you change the wallet address in the input now. Congrats! You are now able to fetch the list of NFTs owned by any given address.

Step 5: Display NFTs In Your UI

You can start off by storing the list of NFTs you fetch in a state variable named nfts. You can then loop through nfts and display all the NFTs in a grid.

File: ./pages/index.tsx

/* eslint-disable @next/next/no-img-element */
import type { NextPage } from 'next';
import Link from 'next/link';
import { useState } from 'react';
import { useNfts } from '../hooks';

const Home: NextPage = () => {
  const [walletAddress, setWalletAddress] = useState(
    '0xB2Ebc9b3a788aFB1E942eD65B59E9E49A1eE500D'
  );
  const [nfts, setNfts] = useState<Nft[]>([]);

  useEffect(() => {
    (async () => {
      const { nfts } = await getNfts(walletAddress);
      console.log({ nfts });
      setNfts(nfts);
    })();
  }, [walletAddress]);

  return (
    <div className='p-10 flex flex-col items-center'>
      ...

      <div className='grid grid-cols-3 mt-8 gap-4'>
        {nfts.map((nft) => {
          return (
            <div
              key={`${nft.contractAddress}/${nft.tokenId}`}
              className='flex flex-col rounded border p-4'
            >
              <img
                className='w-[200px] rounded shadow'
                src={nft.imageUrl}
                alt={nft.name}
              />
              <span className='font-bold mt-4'>{nft.name}</span>
              <span>{nft.collectionName}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Home;

You should now see a gallery of all the NFTs owned by the given wallet address of your choice. LFG!

Full Code Repository

You can find the final code for reference here:

Conclusion & Next Steps

Ankr.js and Ankr Advanced APIs have so much more to offer than what we covered in this quick-start guide. Ankr.js gives you access to all sorts of data from seven different chains. Learn more here: https://github.com/ankr-network/ankr.js#️-ankrjs

Apart from that, you can make some UX improvements to the app we built in the guide. We did not handle the loading or the error state for our app. You can try fixing that on your own! If you want to go the fancy route, you can create a useNfts hook on top of the getNfts function to do this. If you need help, I have included this in the final code for the guide that you can find here: https://github.com/Dhaiwat10/ankrjs-react-quickstart. Good luck!

If you run into an issue or have any questions about this guide, feel free to let us know in our Discord server.

Other Articles To Read

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 driver’s 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? Let’s SHIPPPPP one!

Building a Soulbound NFT

In this tutorial, we will learn how to:

1. Create a non-transferable NFT smart contract on Solidity

2. Deploy it on Ethereum Rinkeby Testnet

3. 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, we’ll 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.

• Injected Provider - Provider Name: For connecting Remix to an injected web3 provider. The most common injected provider is Metamask.

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 don’t 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, we’re 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 you’re 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! We’ve 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.

What’s 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!

Other Articles I’ve Written

%[https://ankr.hashnode.dev/how-to-deploy-your-own-erc-20-token-with-ankr-and-hardhat-on-eth-goerli-testnet] %[https://ankr.hashnode.dev/deploy-and-mint-a-cryptokitties-like-nft-with-erc-721-smart-contract]

If you’d like to understand IPFS a bit better, check out the another article written called Easily Understand & Upload Files To IPFS With Filebase. In short, this tutorial will focus on creating a Node Backend API that allows for uploading to IPFS with Filebase.

Requirements

Before we start, we need to make sure that you have the following installed locally on your computer.

• NVM or Node v16.15.1
• Yarn
• Postman (Optional - will also show with curl)

Node Project Setup

The first step is to setup our project from scratch with Express & Typescript.

mkdir node-filebase-ipfs-uploader;
cd node-filebase-ipfs-uploader;
mkdir bucket; # Folder we'll be using for local testing
touch bucket/.gitkeep; # To make sure we keep the folder and not its file
mkdir src; # Where our code will live
echo "16.15.1" > .nvmrc;
nvm install; # ignore if you already have Node 16.15.1 installed
yarn init -y;
git init;
echo "node_modules\n.env\nbucket/*\n\!bucket/.gitkeep\nbuild\n*.log" > .gitignore;
yarn add aws-sdk cors express dotenv multer multer-s3 typescript @aws-sdk/client-s3 @types/cors @types/express @types/multer-s3 @types/node;
yarn add -D nodemon ts-node;
./node_modules/.bin/tsc --init; # generates our tsconfig.json file

Now that we have our project setup, let’s make a modification to our TypeScript config file to adjust for the output folder to be set to ./build.

File: ./tsconfig.json

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */

    /* Modules */
    "module": "commonjs" /* Specify what module code is generated. */,
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
    // "resolveJsonModule": true,                        /* Enable importing .json files. */
    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */

    /* JavaScript Support */
    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */

    /* Emit */
    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
    "outDir": "./build" /* Specify an output folder for all emitted files. */,
    // "removeComments": true,                           /* Disable emitting comments. */
    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */

    /* Interop Constraints */
    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

    /* Completeness */
    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
}

Creating Initial Server Endpoints

Now that we have our initial project configuration and files setup, we’re going to create two new files that host both the endpoints and the server respectively.

The first file is the endpoints and our initial Express server configurations with a single get endpoint on the root to verify that the server is working.

File: ./src/app.ts

// Imports
// ========================================================
import { config } from "dotenv";
import express from "express";
import cors from "cors";

// ENV VARS
// ========================================================
config();

const NODE_ENV: string = process.env.NODE_ENV || "development";

// Init
// ========================================================
/**
 * Initial ExpressJS
 */
const app = express();

// Middlewares
// ========================================================
/**
 * Allows for requests from other servers
 */
app.use(cors());

// Endpoints / Routes
// ========================================================
/**
 * Main endpoint to verify that things are working and what environment mode it's running in
 */
app.get("/", (_req, res) => res.send({ environment: NODE_ENV }));

// Exports
// ========================================================
export default app;

Our second file imports the endpoints and runs them on a specific server. Typically you might have seen both of these in the same files, but for testing (covered in another article), it’s typically easier to run unit and integration tests without the server running to separate concerns.

File: ./src/server.ts

// Imports
// ========================================================
import app from "./app";
import { config } from "dotenv";

// ENV VARS
// ========================================================
config();
const NODE_ENV: string = process.env.NODE_ENV || "development";
const PORT: number =
  NODE_ENV === "production" ? 8080 : parseInt(process.env.PORT || "5001", 10);

// Server
// ========================================================
app.listen(PORT, () =>
  console.log(`Listening on PORT ${PORT}\nEnvironment: ${NODE_ENV}`)
);

Next, let’s make it easier for ourselves by adding a script command to our package.json file, so we can run yarn dev.

File: ./package.json

{
  "name": "node-filebase-ipfs-uploader",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon src/server.ts"
  },
  "dependencies": {
    "@aws-sdk/client-s3": "^3.113.0",
    "@types/cors": "^2.8.12",
    "@types/express": "^4.17.13",
    "@types/multer-s3": "^3.0.0",
    "@types/node": "^18.0.0",
    "aws-sdk": "^2.1157.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "multer": "^1.4.5-lts.1",
    "multer-s3": "^3.0.1",
    "typescript": "^4.7.4"
  },
  "devDependencies": {
    "nodemon": "^2.0.16",
    "ts-node": "^10.8.1"
  }
}

Now if we run yarn dev and open up our browser to http://localhost:5001 we should see our server running.

# /node-filebase-ipfs-uploader
yarn dev;

# Expected Output
# $ nodemon src/server.ts
# [nodemon] 2.0.16
# [nodemon] to restart at any time, enter `rs`
# [nodemon] watching path(s): *.*
# [nodemon] watching extensions: ts,json
# [nodemon] starting `ts-node src/server.ts`
# Listening on PORT 5001
# Environment: development

Our server is now working, now we need to add upload functionality.

Adding Local File Upload

In order to get a file uploader code setup, we’re going to take advantage of an npm package called multer. Multer is a middleware that makes developer’s lives easier when handling files. It is originally done for just local development, but there are additional extensions that support AWS S3, which we’ll be using for Filebase.

We’re going to modify our original endpoints file to include a new POST upload endpoint that utilizes multer.

File: ./src/app.ts

// Imports
// ========================================================
import { config } from "dotenv";
import express from "express";
import cors from "cors";
import multer from "multer";

// ENV VARS
// ========================================================
config();
const NODE_ENV: string = process.env.NODE_ENV || "development";
const FILE_DEST: string = process.env.FILE_DEST || "bucket";
const FILE_SERVER_URL: string =
  process.env.FILE_SERVER_URL || "http://localhost:5002";

// Init
// ========================================================
/**
 * Initial ExpressJS
 */
const app = express();

// Middlewares
// ========================================================
/**
 * Allows for requests from other servers
 */
app.use(cors());

/**
 * Main uploader middleware that configures the final `destination` of the file and how the `filename` would be set once saved
 */
const upload = multer({
  storage: multer.diskStorage({
    destination: (_req, file, callback) => {
      callback(null, FILE_DEST);
    },
    filename: (_req, file, callback) => {
      callback(null, file.originalname);
    },
  }),
});

// Endpoints / Routes
// ========================================================
/**
 * Main endpoint to verify that things are working and what environment mode it's running in
 */
app.get("/", (_req, res) => res.send({ environment: NODE_ENV }));

/**
 * Upload endpoint that accepts an input file field of `file`
 */
app.post("/upload", upload.single("file"), (req, res) => {
  const responseData = {
    file: req.file?.originalname,
    url: `${FILE_SERVER_URL}/${req.file?.originalname}`,
  };

  return res.json({ data: responseData });
});

// Exports
// ========================================================
export default app;

While the server is running, let’s make an upload.

Curl:

# /node-filebase-ipfs-uploader

curl --location --request POST 'http://localhost:5001/upload' \
--form 'file=@"/full/path/to/node-filebase-ipfs-uploader/test/test-forever.jpg"';

# Expected Output
# {"data":{"file":"test-forever.jpg","url":"http://localhost:5002/test-forever.jpg"}}

Postman:

To confirm that the file has also been uploaded, we can check our bucket folder to see a new test-forever.jpg created. We can also create a server on port 5002 to see that our file is uploaded by running the following:

# /node-filebase-ipfs-uploader
npx http-server -p 5002 bucket;

# Expected Output
# npx: installed 39 in 3.094s
# Starting up http-server, serving bucket
# 
# http-server version: 14.1.1
# 
# http-server settings: 
# CORS: disabled
# Cache: 3600 seconds
# Connection Timeout: 120 seconds
# Directory Listings: visible
# AutoIndex: visible
# Serve GZIP Files: false
# Serve Brotli Files: false
# Default File Extension: none
# 
# Available on:
#   http://127.0.0.1:5002
#   http://10.0.0.6:5002
# Hit CTRL-C to stop the server

If we open up http://localhost:5002/test-forever.jpg we can see in our browser that image is there.

Now that we have the base setup for our local uploads, we’re going to leverage multer-s3 to utilize Filebase’s AWS S3 Client compatibility.

Adding Filebase IPFS Support

Before we can add the code, we’ll need to create a new account at Filebase.com. Once an account has been created, we’ll need to create a new bucket, with the Storage Network set to IPFS (All data is public).

Once we have our newly created bucket, we’re going to take note of the name so that we can use it later, and then get our Access Keys.

Now that we have the values, we’re going to create a dot environment file .env, but we’ll create a template (.env.example) for it because we should never save our .env to our git repository.

# /node-filebase-ipfs-uploader

echo "PORT=5001\nNODE_ENV=development\nFILEBASE_ACCESS_KEY=key\nFILEBASE_SECRET_KEY=secret\nFILEBASE_BUCKET=bucket\nFILEBASE_REGION=us-east-1\nFILE_SERVER_URL=http://localhost:5002" > .env.example;
cp .env.example .env;

In our copied .env we’ll need to fill it out with the values we just got from Filebase.

File: ./.env

PORT=5001
NODE_ENV=development
FILEBASE_ACCESS_KEY=<YOUR-FILEBASE-ACCESS-KEY>
FILEBASE_SECRET_KEY=<YOUR-FILEBASE-SECRET-KEY>
FILEBASE_BUCKET=<YOUR-FILEBASE-BUCKET-NAME>
FILEBASE_REGION=us-east-1
FILE_SERVER_URL=http://localhost:5002

What we want to do is create a way so that when we’re running in development mode that the files upload to our local bucket folder, but when we’re in production mode, the files upload to IPFS with Filebase. To do this, we’re going to take advantage of our NODE_ENV and modify our upload middleware to use a different multer configuration when the NODE_ENV is set to production. More specifically, we’ll be using an extension of multer called multer-s3 that handles requests regularly to AWS S3 but because Filebase is an AWS S3 compatible service, we’ll just configure it to point to Filebase.

File: ./src/app.ts

// Imports
// ========================================================
import { config } from "dotenv";
import express from "express";
import cors from "cors";
import multer from "multer";
import multerS3 from "multer-s3";
import { S3Client, GetObjectCommand } from "@aws-sdk/client-s3";

// ENV VARS
// ========================================================
config();
const NODE_ENV: string = process.env.NODE_ENV || "development";
const FILE_DEST: string = process.env.FILE_DEST || "bucket";
const FILE_SERVER_URL: string =
  process.env.FILE_SERVER_URL || "http://localhost:5002";
const FILEBASE_BUCKET = process.env.FILEBASE_BUCKET || "";
// Configured AWS S3 Client For Filebase
const s3 = new S3Client({
  endpoint: "https://s3.filebase.com",
  region: process.env.FILEBASE_REGION || "",
  credentials: {
    accessKeyId: process.env.FILEBASE_ACCESS_KEY || "",
    secretAccessKey: process.env.FILEBASE_SECRET_KEY || "",
  },
});

// Init
// ========================================================
/**
 * Initial ExpressJS
 */
const app = express();

// Middlewares
// ========================================================
/**
 * Allows for requests from other servers
 */
app.use(cors());

/**
 * Main uploader middleware that configures the final `destination` of the file and how the `filename` would be set once saved
 */
const upload =
  // If production use the s3 client
  NODE_ENV === "production"
    ? multer({
        storage: multerS3({
          s3: s3,
          bucket: FILEBASE_BUCKET,
          metadata: (_req, file, cb) => {
            cb(null, { fieldName: file.fieldname });
          },
          key: (_req, file, cb) => {
            cb(null, file.originalname);
          },
        }),
      })
    : multer({
        storage: multer.diskStorage({
          destination: (_req, file, callback) => {
            callback(null, FILE_DEST);
          },
          filename: (_req, file, callback) => {
            callback(null, file.originalname);
          },
        }),
      });

// Endpoints / Routes
// ========================================================
/**
 * Main endpoint to verify that things are working and what environment mode it's running in
 */
app.get("/", (_req, res) => res.send({ environment: NODE_ENV }));

/**
 * Upload endpoint that accepts an input file field of `file`
 */
app.post("/upload", upload.single("file"), async (req, res) => {
  const responseData = {
    file: req.file?.originalname,
    url: `${FILE_SERVER_URL}/${req.file?.originalname}`,
  };

  // If production retrieve file data to get the ipfs CID
  if (NODE_ENV === "production") {
    const commandGetObject = new GetObjectCommand({
      Bucket: FILEBASE_BUCKET,
      Key: req.file?.originalname,
    });
    const response = await s3.send(commandGetObject);
    responseData.url = `ipfs://${response.Metadata?.cid}`;
  }

  return res.json({ data: responseData });
});

// Exports
// ========================================================
export default app;

Now, in order to test it, we just need to create a different start script that passes a new NODE_ENV. To do this, we’ll need to modify our package.json

File: ./package.json

{
  "name": "node-filebase-ipfs-uploader",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon src/server.ts",
    "start": "export NODE_ENV=production && tsc && node build/server.js"
  },
  "dependencies": {
    "@aws-sdk/client-s3": "^3.113.0",
    "@types/cors": "^2.8.12",
    "@types/express": "^4.17.13",
    "@types/multer-s3": "^3.0.0",
    "@types/node": "^18.0.0",
    "aws-sdk": "^2.1157.0",
    "cors": "^2.8.5",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "multer": "^1.4.5-lts.1",
    "multer-s3": "^3.0.1",
    "typescript": "^4.7.4"
  },
  "devDependencies": {
    "nodemon": "^2.0.16",
    "ts-node": "^10.8.1"
  }
}

Now when we run the following we should see our server running on port 8080.

# /node-filebase-ipfs-uploader

yarn start;

# Expected Output
# yarn run v1.22.18
# $ export NODE_ENV=production && tsc && node build/server.js
# Listening on PORT 8080
# Environment: production

If we try uploading our file again with curl or Postman with the new address, we should get a different result.

Curl:

# /node-filebase-ipfs-uploader

curl --location --request POST 'http://localhost:8080/upload' \
--form 'file=@"/full/path/to/node-filebase-ipfs-uploader/test/test-forever.jpg"';

# Expected Output
# {"data":{"file":"test-forever.jpg","url":"ipfs://QmY8UXb7Nka5VWkXXRAMC1DQtamc1s8xzcjoQY6GaEbTdn"}}

Postman:

Seeing that IPFS url, we can go to it directly and see that it’s actually persisted on the decentralized storage.

https://ipfs.filebase.io/ipfs/bafybeierozrtdlir5ywdguah573ga25a7tzzhqeh7kvlvfx2y2wqymdj7u

There you have it, we built a Backend IPFS File Uploader with Filebase.

Code Repository

If you’d like to check out the full code, check out the following GitHub repository.

What’s Next?

Now that you have the backend, the next step is to build a frontend that communicates with the backend, which is another article I should be working on shortly.

Another aspect that could be worked on is the deployment of the backend to either a service like Digital Ocean with Docker, or Netlify with Edge Functions.

If you got value from this, please like it, heart it, fire it, all of the emojis, and please also follow me on twitter (where I’m quite active) @codingwithmanny and on Discord as codingwithmanny :).

Other Articles To Read

NFTs are also expensive, though. Most people cannot afford to buy an NFT just to get access to a certain community or just to use it as a profile picture on Twitter.

If buying them is out of the question, what if you could rent them? What if you could only pay a fraction of the price and still be able to “use” the NFT everywhere in web3? That's exactly what we are going to talk about and build in this article!

Building A Rentable NFT

We are going to be building a rentable NFT collection. By “rentable”, we mean that any NFT from this collection can be rented out to someone else by its owner for a certain time period. During this rental period, the account renting the NFT can “use” it but cannot sell it or perform any destructive actions, like transfer or burn.

To test out our rentable NFTs, we will be using a gated frontend that gives you access to some content depending on whether you have rented a given NFT or not.

To make these NFTs even more accessible, we will be deploying them to the Optimism’s Kovan Testnet. Optimism is an extremely powerful Layer-2 scaling solution for Ethereum, and if you’d like to read more about them check Optimism’s Website.

Before we get into writing the smart contract, let's first discuss a standard for rentable NFTs that already exists - EIP-4907. We will be building our NFT collection on top of this standard.

EIP-4907: The Rental NFT Standard

Ethereum Improvement Proposal (EIP) 4907 discusses a new standard called ERC4907 which is an extension of the ERC721 standard. For some context, the ERC721 standard is the most commonly used standard for Non-Fungible Tokens (NFTs).

ERC4907 proposes an additional role called (user) which can be granted to addresses, and a time where the role is automatically revoked. The user role represents permission to 'use' the NFT, but not the ability to transfer it or set users.

– From the official EIP-4907 doc - (https://eips.ethereum.org/EIPS/eip-4907)

In other words, the ERC4907 NFT standard makes it possible for you to “rent out” the utilities unlocked by your NFT to another address. This is made possible by adding a new role to the NFT.

For example, as mentioned in the EIP itself, rentable NFTs can be leveraged heavily in projects where NFTs are used to manage the ownership of virtual real estate or “virtual land”.

Think of a Metaverse project like Voxels where in order to purchase land in the virtual world, you need to purchase a corresponding NFT. Owning the NFT makes you the owner of that piece of land.

Just like IRL real estate, the ERC4907 NFT standard would let land owners rent out their land. This lets land owners create some passive revenue from their virtual assets and makes virtual land more accessible by lowering the barrier in terms of the money required. It's a win-win situation!

Now that we have got a gist of the ERC4907 standard, let's start building!

Project Setup

We will be using Hardhat to bootstrap our local development environment. Make sure you have NodeJS installed!

Let's first create an empty folder for our project.

mkdir optimism-rentable-nfts && cd optimism-rentable-nfts;

Initialize Project Using Hardhat

We'll now use the super convenient scaffolding CLI tool provided by Hardhat to set up some boilerplate for our project. Run this in your terminal:

# /optimism-rentable-nfts
npx hardhat;

Select Create a Javascript project when asked and say yes to all the remaining questions. The CLI tool will now set up the boilerplate and install dependencies for us.

Once that's done, we need to install one last dependency.

# /optimism-rentable-nfts
npm install @openzeppelin/contracts;

OpenZeppelin is an extremely handy library containing implementations of some common standards like ERC20 and ERC721. We will need these contracts later on.

Writing The Smart Contract

First, open your project in a code editor of your choice and create three new, empty files inside of the contracts folder.

Let's go over each of these files and what their purpose is.

IERC4907.sol

The IERC4907.sol file will contain the Solidity interface for the ERC4907 standard including Natspec & OpenZeppelin interfaces. This means that this file will contain the skeleton or blueprint of the ERC4907 implementation.

Copy the entire contents of this file and paste it in your IERC4907.sol file. We don't need to touch this file again.

File: ./contracts/IERC4907.sol

// SPDX-License-Identifier: CC0-1.0

pragma solidity ^0.8.0;

interface IERC4907 {
    // Logged when the user of a token assigns a new user or updates expires
    /// @notice Emitted when the `user` of an NFT or the `expires` of the `user` is changed
    /// The zero address for user indicates that there is no user address
    event UpdateUser(uint256 indexed tokenId, address indexed user, uint64 expires);

    /// @notice set the user and expires of a NFT
    /// @dev The zero address indicates there is no user 
    /// Throws if `tokenId` is not valid NFT
    /// @param user  The new user of the NFT
    /// @param expires  UNIX timestamp, The new user could use the NFT before expires
    function setUser(uint256 tokenId, address user, uint64 expires) external ;

    /// @notice Get the user address of an NFT
    /// @dev The zero address indicates that there is no user or the user is expired
    /// @param tokenId The NFT to get the user address for
    /// @return The user address for this NFT
    function userOf(uint256 tokenId) external view returns(address);

    /// @notice Get the user expires of an NFT
    /// @dev The zero value indicates that there is no user 
    /// @param tokenId The NFT to get the user expires for
    /// @return The user expires for this NFT
    function userExpires(uint256 tokenId) external view returns(uint256);
}

ERC4907.sol

The ERC4907.sol file will contain the full implementation of the ERC4907 standard. We need this file because we will be 'extending' our actual NFT collection contract off of the ERC4907 standard.

Copy the entire contents of this file and paste it in your ERC4907.sol file. You may notice that you are copying the source code from my repo instead of directly from the EIP like we did with IERC4907.sol. This is because we have to make some adjustments to the original ERC4907.sol file in order to compile it and use it in our project. Specifically, I had to add the override keyword to some functions to make them work. You can see the original unmodified source code here: https://github.com/ethereum/EIPs/blob/master/assets/eip-4907/contracts/ERC4907.sol

We have to do this manually because EIP-4907 has not been accepted yet as a standard and isn't a part of any libraries like OpenZeppelin.

Let's briefly go through some of the important parts of the ERC4907 source code.

The functions we want to be paying attention to are setUser and userOf.

setUser

File: ./contracts/ERC4907.sol

/// @notice set the user and expires of a NFT
/// @dev The zero address indicates there is no user
/// Throws if `tokenId` is not valid NFT
/// @param user The new user of the NFT
/// @param expires UNIX timestamp, The new user could use the NFT before expires
function setUser(uint256 tokenId, address user, uint64 expires) public virtual{
    require(_isApprovedOrOwner(msg.sender, tokenId),"ERC721: transfer caller is not owner nor approved");
    UserInfo storage info =  _users[tokenId];
    info.user = user;
    info.expires = expires;
    emit UpdateUser(tokenId,user,expires);
}

As discussed earlier, the ERC4907 token standard extends the ERC721 standard and manages two roles for each token

1. The owner (rentee) of the token
2. The user (renter) of the token

Just to recap, accounts with the user role can use the token but cannot perform any destructive actions like transfer or burn.

The setUser function lets owners rent out their NFT to another account. It can only be called by token owners (or “approved” accounts).

The function then sets the info struct in the contract with the newly set user and expires values - user being the address we want to rent out the NFT to and expires being the block timestamp when we want the renting period to end. I definitely recommend reading up on Ethereum Block Timestamps.

A key detail that we don't want to miss is that the setUser does not require a payment in the form of ETH or any other tokens in order to run. This is because it can only be called by the owner and, well, you are not going to be the one paying if you are renting your NFT out!

It should be the user who should have to pay a fee. This is why if you want to use the ERC4907 token standard then you would have to use the setUser function as a base and build your own payment functionality on top of it.

Let's move on to the userOf function for now.

userOf

Let's say you have rented out an NFT to a person named Bob.

Now, how does Bob actually use your NFT? How does Bob get access to, for example, the token gated communities or content your NFT gives access to?

To answer that, we need to understand how most token gated communities define the criteria for access. The community is going to take advantage of the balanceOf function, that comes built into the ERC721 our contract extends, which allows it to verify a specific wallet owns a certain amount.

With ERC4907, these gating tools will still be able to correctly grant access to the original owner. If we look back the ERC4907.sol file we can see that it extends the ERC721 standard, which brings with it all of its default functionality. This is why it has the exact same balanceOf functionality that comes with ERC721.

This token gating functionality won’t work out of the box for users (renters) of the NFT because:

1. The balanceOf function only works for owners
2. There is no counterpart of balanceOf for users

This is where the userOf function comes in.

File: ./contracts/ERC4907.sol

/// @notice Get the user address of an NFT
/// @dev The zero address indicates that there is no user or the user is expired
/// @param tokenId The NFT to get the user address for
/// @return The user address for this NFT
function userOf(uint256 tokenId)public view virtual returns(address){
    if( uint256(_users[tokenId].expires) >=  block.timestamp){
        return  _users[tokenId].user;
    }
    else {
        return address(0);
    }
}

When we send a tokenId to userOf it returns the wallet address of its renter.

Because of this userOf function, token gating tools can also support accounts who have rented NFTs! All they would have to do is also call the userOf function and check if the account trying to get access has rented an NFT.

The only weird quirk here is that you need to pass in a tokenId to userOf.

Now that we have a pretty decent understanding of the inner workings of the ERC4907 token standard, let's move on to writing the source code for our rentable NFT collection!

RentableNFT.sol

This file will contain the source code for our NFT collection's smart contract. This is everything we’ll need to get our ERC4907 NFT collection up and running:

File: ./contracts/RentableNFT.sol

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

import "./ERC4907.sol";

// We are extending our contract from ERC4907. It lets us make our NFTs rentable and gives us access to functions like setUser and userOf.
contract RentableNFT is ERC4907 {
    mapping(uint256 => string) public tokenURIs;

    // We are accepting the collection's name and its symbol in our constructor. 1:1 copy of how it's done in an ERC721 contract.
        constructor(string memory _name, string memory _symbol)
        ERC4907(_name, _symbol)
    {}

    function mint(uint256 _tokenId, string memory _tokenURI) public {
        _mint(msg.sender, _tokenId);
        tokenURIs[_tokenId] = _tokenURI;
    }

        // This is where the ✨ magic ✨ happens. This function will let any owners rent out their NFTs. It internally calls the setUser function from the ERC4907 standard
    function rentOut(
        uint256 _tokenId,
        address _user,
        uint64 _expires
    ) public onlyOwner(_tokenId) {
        setUser(_tokenId, _user, _expires);
    }

        // Returns the tokenURI for a given _tokenId
    function tokenURI(uint256 _tokenId)
        public
        view
        override
        returns (string memory)
    {
        return tokenURIs[_tokenId];
    }

        // Checks if the account calling the function actually owns the given token.
    modifier onlyOwner(uint256 _tokenId) {
        require(
            _isApprovedOrOwner(msg.sender, _tokenId),
            "caller is not owner nor approved"
        );
        _;
    }
}

You might have noticed that the only way an NFT can be rented out right now is if the owner goes and calls this rentOut function. There is no way for a person looking to rent an NFT to pay a certain fee and get an NFT on rent without the owner having to intervene. We’ll go over this functionality near the end of the article.

That is all for the source code of our contract. Let's now write an automated test suite that tests the entire renting flow from start to finish so that we know that our new shiny rentable NFT collection actually does something!

Writing Tests For ERC4907

Tests! Who doesn't like writing some tests?

Delete the sample-test.js file in your tests directory and create a new file called tests.js.

Let's start by writing two utility functions that will come in handy.

File: ./test/tests.js

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

// this function will deploy our NFT collection's contract and return an instance of the contract for us to interact with
const setupContract = async () => {
  const RentableNFT = await ethers.getContractFactory("RentableNFT");
  const rentableNFT = await RentableNFT.deploy("RentableNFT", "RNFT");
  await rentableNFT.deployed();
  return rentableNFT;
};

// this function will simply give us *full* access to two accounts a.k.a *'signers'*. Using these two accounts, we will be able to simulate two different accounts interacting with our contract in any way we want
const setupAccounts = async () => {
  const accounts = await ethers.getSigners();
  return [accounts[0], accounts[1]];
};

With this base, we can now structure what we want to test for different scenarios.

Let’s write the code for our test suite now.

File: ./test/tests.js

it("Rent flow ", async () => {
  const rentableNFT = await setupContract();
  const [owner, renter] = await setupAccounts();

  // mint tokenId 0 to owner. The .connect function lets us interact with the contract instance explicitly from an account of our choice. In this case, that account is owner.
    const tx = await rentableNFT.connect(owner).mint(0, "QmPf2x91DoemnhXSZhGDP8TX9Co8AScpvFzTuFt9BGAoBY");
    await tx.wait();

  // check owner of tokenId 0
    const ownerOf = await rentableNFT.ownerOf(0);
    expect(ownerOf).to.equal(owner.address);

  // rent the nft to renter for 1 hour
    const expiryTimestamp = Math.round(new Date().getTime() / 1000) + 3600;
    const tx2 = await rentableNFT
      .connect(owner)
      .rentOut(0, renter.address, expiryTimestamp);
    await tx2.wait();

  // check 'renter i.e. 'user' of tokenId 0
    const renterOf = await rentableNFT.userOf(0);
  expect(renterOf).to.equal(renter.address);

  // fast forward the chain to 2 hours later and check if the nft is still rented
    await network.provider.send("evm_increaseTime", [3601]); // 3601 -> 3600 seconds = 1 hour + 1 seconds
    await network.provider.send("evm_mine");

  // check renter i.e. 'user' of tokenId 0
    const renterOf2 = await rentableNFT.userOf(0);
    expect(renterOf2).to.not.equal(renter.address);
    expect(renterOf2).to.equal("0x0000000000000000000000000000000000000000");
});

We'll now run npx hardhat test and check if our entire flow works as intended.

The test might not pass in the first run. Just run it again. Sometimes it doesn’t manage to fast forward the chain successfully on the first go.

# /optimism-rentable-nfts
npx hardhat test

  ✔ Rent flow (85ms)

  1 passing (618ms)

And...of course, it does! We just tested the entire lifecycle of an ERC4907 rentable NFT. Woohoo! 🎉

Let's now try deploying our smart contract to a Tesnet!

Deploying To Testnet

We will be deploying our contract to the Optimism Kovan Testnet.

The great thing about Optimism is that even deploying something to the Optimism Mainnet is extremely cheap (a couple of dollars at most).

But we are going to do the right thing and not clog up the Mainnet with our temporary test contracts. That's what Testnets are for.

Instead of using Hardhat for the deployment, we are going to use Thirdweb Deploy. It is a tool that lets us deploy smart contracts without needing to deal with bare private keys. You can learn more about the tool here: https://portal.thirdweb.com/thirdweb-deploy

Let's get started by running npx thirdweb deploy in your terminal. Make sure you run this command from the root of your project.

# /optimism-rentable-nfts
npx thirdweb deploy

Select only the RentableNFT contract when prompted. We don't need to deploy the ERC4907 contract separately. If all goes well, you should see something like this show up in your browser:

Fill in the contract's constructor parameters, select the Optimism Testnet from the Network dropdown and then click Deploy Now. You will see two transaction confirmation requests show up.

The first popup will be for the actual contract deployment. Make sure you confirm this one.

The second transaction is optional. This transaction will add your contract to Thirdweb's proxy so that you can access it from your Thirdweb dashboard later on. This does not give away any ownership of your contract to Thirdweb.

Once your contract gets deployed you should be redirected to the Contract Explorer which allows you to interact with the contract functions.

Make sure you copy your contract's address from the top. You will need it later on.

LFG! We just successfully deployed a rentable NFT collection to the Optimism Kovan Testnet!

You can go see your contract on Optimism's Testnet block explorer too.

Interacting With Our Deployed Contract

We are going to use the Thirdweb UI to interact with our contract and go through the entire renting flow we touched upon when we wrote all those tests.

Let’s start by minting an NFT by selecting the mint function from the left sidebar, specifying a _tokenId and _tokenURI (our IPFS URL), and then clicking Execute.

Next, we are going to rent this NFT out to an account. Make sure you have access to this account though! We will use this account to interact with that gated frontend we talked about at the beginning.

Let’s rent out the NFT by selecting the rentOut function from the left sidebar, specifying a _tokenId, a _user and an _expires timestamp.

You can run this piece of code in your browser’s console to get a timestamp for 1 hour from now.

Math.round(new Date().getTime() / 1000) + 3600

Additionally, you can use Node as well.

node;
> Math.round(new Date().getTime() / 1000) + 3600
> 1657242017

Check if the NFT was successfully rented out by calling userOf function for the token with token ID 1.

You can also go see your NFT on Quixotic, which is an NFT marketplace for Optimism. Insert your contract address and token ID in this link to view yours:

https://testnet.quixotic.io/asset/CONTRACT_ADDRESS/TOKEN_ID

Here’s an NFT that was already deployed and minted.

https://testnet.quixotic.io/asset/0x1d269Cf95A2732ce98fAaF909642D756b59Af0aF/2

Seeing The Rentable NFTs In Action

We will now use the NFT we just rented for access to a gated frontend. It is a website that gives you access to some content if and only if you have rented an NFT from a certain ERC4907 NFT collection. This website will help you get a feel of a practical use case of the Rentable NFTs we just built.

To save you some time and efforts, I have already created this website for you. You can go clone this rentable nft gated frontend repo and follow the instructions in the README.md to get yourself up and running.

GitHub - Dhaiwat10/rentable-nft-gated-frontend

Connect with the wallet you rented your NFT to and you should be able to view the gated content!

ℹ️ NOTE: Try this again after a hour and you will notice that your rented NFT has now expired. It won't let you get to the gated content anymore.

Final Code

You can find the repo containing the full code for this project here:

GitHub - Dhaiwat10/optimism-rentable-nfts: Rentable NFTs on Optimism 🔴

Next Steps

A good next step after building this project would be to build a marketplace for these rentable NFTs. If you recall, the smart contract we wrote for our NFT collection doesn't let anyone get an NFT on rent on-demand. It requires the owner of the NFT to call a function that rents out the NFT.

Ideally, anyone looking to get an NFT on rent should be able to pay a certain fee and get it on rent without waiting on anyone else. This is why you need a marketplace smart contract that acts as a bridge between NFT owners and people looking to rent them. This is something you can work on or wait for my next article. 😉

Have questions, comments, or words of appreciation? Find me on Twitter at @dhaiwat10 where I’m super-active!

If you’re just getting started with web3 or just haven’t touched decentralized storage before, then Filebase is a good way to bridge the gap between traditional storage and Interplanetary File System (IPFS).

If you read that last line and asked yourself “What the heck is IPFS”, then let’s break it down in simple terms, it’s a decentralized storage system that lives forever. In other words, make sure you know what you’re uploading before hand.

Why Would You Want Forever Storage?

One of the main reasons for storing a file forever is to either give value to its permanence or keep a full record of data that is immutable (can never be modified), which adds to its validity of authenticity. One of main uses for this currently are Non-Fungible Tokens (NFTs).

If you get past the highly priced JPGs then there is value in authentic data. In the offline world, authentic data comes in the form government issued identification, supply chain logs, wills, deeds, contracts, and basically anything that could potentially be forged.

Web3 is still young, and IPFS is still being adopted by major browsers, but decentralized storage definitely has a use, alongside traditional web2 storage.

Getting Started With Filebase

Web3 is growing and until it has a mass adoption there will still be a need for web2 solutions that bridge the gap. Filebase is the bridge to web3 decentralized storage on IPFS. The good news is that Filebase is currently 5GB of storage without any credit card, so take advantage and upload that entire collection of Gilmore Girls* to IPFS. Just create an account at Filebase.com.

*(Don’t listen to me. This is probably a bad idea)

Uploading Your First File

The first step will be to create a bucket, by going to the Buckets section and click Create Bucket. If you’re familiar with AWS S3, then buckets are another way of saying folders. Why they chose the names buckets, I have no idea, but my guess is that instead of trying to organize things into folders, they just dumped everything into a bucket and ignore trying to organize anything.

Give your Bucket a name, to try and organize things, and select the IPFS (All data is public) as the Storage Network.

Click on your newly created bucket to open it up and take a look at its emptiness that screams “I need some files!”

In your new bucket, click upload and File, to be prompted with file to upload, and select an image to start with to make things easier.

Tada! You have uploaded a file to IPFS. Click on the new file to see its details.

In the details, Right-Click the link in a new tab and wait for it to load.

You should also be able to access the file from this public gateways URL

https://ipfs.filebase.io/ipfs/bafybeiblmwzu3evblahlvasdbs2a7p4qk6n6yaihcznvyqpp7mabfadkd4

Deleting Your Files

Wait, how can you delete a file that lives forever and is immutable?

The answer is you can’t, the file lives forever. What you’re really deleting is just the reference to it in Filebase. A good way to test this theory is to use other IPFS Gateways to access the file. Depending on the Gateway, the request to load the file may differ.

We can access the file natively through the Opera Web Browser at:

ipfs://bafybeiblmwzu3evblahlvasdbs2a7p4qk6n6yaihcznvyqpp7mabfadkd4

We can use Cloudfare’s IPFS Gateway to also access the file through a browser that doesn’t natively support IPFS.

https://cloudflare-ipfs.com/ipfs/QmRG4BgEVcD3MuNaL3SxmZJcCEEYkRomw6PFEaha1Gagi2

We can also still access our file through Filebase’s IPFS Gateway, even after we’ve deleted it in Filebase.

https://ipfs.filebase.io/ipfs/bafybeiblmwzu3evblahlvasdbs2a7p4qk6n6yaihcznvyqpp7mabfadkd4

What’s Next

Now that we can see that we can upload files directly to IPFS with Filebase, we can start to think about what we can do to built on top of this.

With IPFS in mind, here some articles that coming are:

• How to build a Frontend file uploader with React & Filebase
• Storing Your NFT Images Permanently On-Chain With IPFS

Definitely look out for those when they are done being written.

If you got value from this, please like it, heart it, fire it, all of the emojis, and please also follow me on twitter (where I’m quite active) @codingwithmanny and on Discord as codingwithmanny 😉.

Other Articles To Read

If you have ever wanted to create your own type of currency or token that would be used as a means for an exchange of value or trading then you’re in the right place today. We’ll be building and deploying an ERC-20 Token to Optimism Kovan Testnet.

We’ll be walking you through the entire process of coding, testing, setting up your network, adding tokens via a faucet, deploying the contract to the Optimism testnet, and interacting with it via a blockchain explorer.

Wait, What’s Optimism?

Optimism is a fast and transactionally cheap L2 EVM Blockchain that lets developers build contracts on top of its chain with Solidity. If you’d like to read more about what Optimism is, there is a great article on CoinMarketCap explaining its advantages and differences.

Requirements

Before we start, here is a list of things you’ll need on your computer:

1. NVM or Node v16.15.1+
2. Yarn
3. VSCode
4. Metamask Wallet

Project Setup

To start, we’re going to leverage Hardhat to develop, compile, test, and deploy our contract locally. If you’re not familiar, this will be a good primer to start with.

To start, we’re going to scaffold out a new project with TypeScript.

mkdir optimism-erc20;
cd optimism-erc20;
npx hardhat;

# PROMPT 1 - Choose base
888    888                      888 888               888
888    888                      888 888               888
888    888                      888 888               888
8888888888  8888b.  888d888 .d88888 88888b.   8888b.  888888
888    888     "88b 888P"  d88" 888 888 "88b     "88b 888
888    888 .d888888 888    888  888 888  888 .d888888 888
888    888 888  888 888    Y88b 888 888  888 888  888 Y88b.
888    888 "Y888888 888     "Y88888 888  888 "Y888888  "Y888

👷 Welcome to Hardhat v2.9.9 👷‍

? What do you want to do? …
  Create a basic sample project
  Create an advanced sample project
❯ Create an advanced sample project that uses TypeScript
  Create an empty hardhat.config.js
  Quit

# PROMPT 2 - Confirm project root
✔ What do you want to do? · Create an advanced sample project that uses TypeScript
? Hardhat project root: › /path/to/optimism-erc20

# PROMPT 3 - Git Ignore
✔ What do you want to do? · Create an advanced sample project that uses TypeScript
✔ Hardhat project root: · /path/to/optimism-erc20
? Do you want to add a .gitignore? (Y/n) › y

# PROMPT 4 - Install Dependencies
✔ What do you want to do? · Create an advanced sample project that uses TypeScript
✔ Hardhat project root: · /Users/manny/Documents/github/optimism-erc20
✔ Do you want to add a .gitignore? (Y/n) · y
? Do you want to install this sample project's dependencies with npm (hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers @nomiclabs/hardhat-etherscan dotenv eslint eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise hardhat-gas-reporter prettier prettier-plugin-solidity solhint solidity-coverage @typechain/ethers-v5 @typechain/hardhat @typescript-eslint/eslint-plugin @typescript-eslint/parser @types/chai @types/node @types/mocha ts-node typechain typescript)? (Y/n) › y

If we open up our project in VSCode we should see big list of files generated for us, but don’t worry we won’t need to use all of them.

Creating Our Contract

Now that we have all our files, we’re going to start off by modifying our current Solidity contract (Greeter.sol) in the contracts folder by renaming it to Buidl.sol and making the following modifications.

File: ./contracts/Buidl.sol

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

contract BuidlToken {
}

With that base in place, we’re now going to leverage some existing code to easily build our own ERC-20 token on top of a widely adopted standard. To do this, we’ll be using OpenZeppelin’s contract npm package.

# /optimism-erc20
yarn add @openzeppelin/contracts;

With this newly installed npm package, we can add it to our contract, extend the contract, and pass the default attributes needed to define the name and its symbol.

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

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

contract BuidlToken is ERC20 {
    constructor(uint256 initialSupply) ERC20("BuidlToken", "BDL") {
        _mint(msg.sender, initialSupply);
    }
}

That’s it! We have our ERC-20 token. The reason why our code is so short is because we’re using all the functions defined by the OpenZeppelin ERC20.sol file. The file provided by OpenZeppelin is an inherited set of functions from the ERC-20 contract, which you can more details on here. In VSCode, you can actually see the functions by doing Command (PC CTRL) + Click on the ERC20.sol part of the import.

This should open up the file located in your node_modules folder and show you the contents of the entire file we’re extending.

There is one thing that we need to factor in with this default ERC-20 token and that is that the supply can only be defined once, at the time of the contract deployed. We’re going to make a slight modification to our contract to make it so that only the owner (the wallet that deployed the contract) can modify the supply after the contract has been deployed.

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

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

contract BuidlToken is ERC20, Ownable {
    constructor(uint256 initialSupply) ERC20("BuidlToken", "BDL") {
        _mint(msg.sender, initialSupply);
    }

    /**
     * Contract Owner - Increase the total supply and add it to their wallet
     */
    function mint(uint256 amount) external onlyOwner {
        _mint(msg.sender, amount);
    }

    /**
     * User - Decrease their total supply
     */
    function burn(uint256 amount) public {
        _burn(msg.sender, amount);
    }
}

Deploying Our Contract Locally

The next step is to deploy our contract to our local development environment to make sure things compile correctly. To do that we’ll need modify deploy.ts.

File: ./scripts/deploy.ts

// We require the Hardhat Runtime Environment explicitly here. This is optional
// but useful for running the script in a standalone fashion through `node <script>`.
//
// When running the script with `npx hardhat run <script>` you'll find the Hardhat
// Runtime Environment's members available in the global scope.
import { ethers } from "hardhat";

async function main() {
  // Hardhat always runs the compile task when running scripts with its command
  // line interface.
  //
  // If this script is run directly using `node` you may want to call compile
  // manually to make sure everything is compiled
  // await hre.run('compile');

  // We get the contract to deploy
  const Contract = await ethers.getContractFactory("BuidlToken");
  const contract = await Contract.deploy(1000); // Create 1000 initial tokens

  await contract.deployed();

  console.log("Contract deployed to:", contract.address);
}

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

After we’ve modified the file we’ll need to run two Terminals to get things deployed. The first one is to run the local development Ethereum Virtual Machine and the second is to deploy it to that environment.

Terminal 1:

# TERMINAL 1
# /optimism-erc20

./node_modules/.bin/hardhat node;

# Expected Output
# Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/
# 
# Accounts
# ========
# 
# WARNING: These accounts, and their private keys, are publicly known.
# Any funds sent to them on Mainnet or any other live network WILL BE LOST.
# 
# Account #0: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 (10000 ETH)
# Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
# 
# Account #1: 0x70997970C51812dc3A010C7d01b50e0d17dc79C8 (10000 ETH)
# Private Key: 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d
# 
# ...
# 
# WARNING: These accounts, and their private keys, are publicly known.
# Any funds sent to them on Mainnet or any other live network WILL BE LOST.

Terminal 2:

# TERMINAL 2
# /optimism-erc20

./node_modules/.bin/hardhat run scripts/deploy.ts --network localhost;

# Expected Output
# Generating typings for: 5 artifacts in dir: typechain for target: ethers-v5
# Successfully generated 11 typings!
# Compiled 5 Solidity files successfully
# Contract deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

Testing Our Contract

A good habit is that when you have your contract code, is to create a series of tests to make sure that things are working as expected. As a brief overview of how I structure tests, the guideline I try to aim for is the following:

1 - Imports
2 - Configurations
3 - Helpers (Optional)
4 - Tests
    A - Function One Expected Failure(s)
    B - Function One Expected Success(es)
    C - Function Two ...
    D - Scenario(s)

Taking this guide into consideration, the main things we’re going to test for are:

1. Minting - Increasing the supply
2. Burning - Decreasing the supply
3. Approving - Giving another user permission to spend tokens on our behalf
4. Transferring - Moving tokens from one user to another
5. Scenario Insufficient Tokens - A user has the permission to spend tokens of another user but the tokens are already spent or burned

ℹ️ NOTE: This is a lot of code to read, but gives you some insight as to how tests are written. If you want to skip this part, just scroll through it, but if you want to test your code, I recommend just copying it for now.

File: ./test/index.ts

// Imports
// ========================================================
import { expect } from "chai";
import { ethers } from "hardhat";
import ContractABI from "../artifacts/contracts/Buidl.sol/BuidlToken.json";

// Config
// ========================================================
/**
 * Name of contract
 */
const CONTRACT_NAME = "BuidlToken";

/**
 * @dev Account #0: First wallet address given when we run the hardhat node
 */
const OWNER_ADDRESS = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266";

/**
 * @dev Account #1: Second wallet address given when we run the hardhat node
 */
const RANDOM_ADDRESS = "0x70997970C51812dc3A010C7d01b50e0d17dc79C8";

/**
 * @dev Account #2: Third wallet address given when we run the hardhat node
 */
const ANOTHER_ADDRESS = "0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC";

// Tests
// ========================================================
describe(`${CONTRACT_NAME} - Contract Tests`, async () => {
  /**
   * mint
   */
  it("mint - should FAIL when minting -1", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToMint = -1;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signer = provider.getSigner(OWNER_ADDRESS);
    // - Get the contract linked with the signer
    const contract = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signer
    );

    try {
      // Init
      await contract.mint(amountToMint);
    } catch (error: any) {
      // Expectations
      expect(error?.reason).to.be.eq("value out-of-bounds");
    }
  });

  /**
   * mint
   */
  it("mint - should PASS when minting 10", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToMint = 10;
    const walletOwner = OWNER_ADDRESS;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signer = provider.getSigner(walletOwner);
    // - Get the contract linked with the signer
    const contract = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signer
    );

    // Init
    await contract.mint(amountToMint);
    const result = await contract.totalSupply();

    // Expectations
    expect(result).to.be.eq(initialSupply + amountToMint);
  });

  /**
   * burn
   */
  it("burn - should FAIL when burning -1", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToBurn = -1;
    const walletOwner = OWNER_ADDRESS;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signer = provider.getSigner(walletOwner);
    // - Get the contract linked with the signer
    const contract = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signer
    );

    try {
      // Init
      await contract.burn(amountToBurn);
    } catch (error: any) {
      // Expectations
      expect(error?.reason).to.be.eq("value out-of-bounds");
    }
  });

  /**
   * burn
   */
  it("burn - should FAIL when burning tokens that aren't owned", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToBurn = 100;
    const walletOwner = RANDOM_ADDRESS;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signer = provider.getSigner(walletOwner);
    // - Get the contract linked with the signer
    const contract = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signer
    );

    try {
      // Init
      await contract.burn(amountToBurn);
    } catch (error: any) {
      // Expectations
      expect(error?.reason).to.be.eq(
        "Error: VM Exception while processing transaction: reverted with reason string 'ERC20: burn amount exceeds balance'"
      );
    }
  });

  /**
   * burn
   */
  it("burn - should PASS when burning tokens that exist/owned", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToBurn = 100;
    const walletOwner = OWNER_ADDRESS;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signer = provider.getSigner(walletOwner);
    // - Get the contract linked with the signer
    const contract = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signer
    );

    // Init
    await contract.burn(amountToBurn);
    const result = await contract.totalSupply();

    // Expectations
    expect(result).to.be.eq(initialSupply - amountToBurn);
  });

  /**
   * approve
   */
  it("approve - should FAIL when approving -1", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToApprove = -1;
    const walletOwner = OWNER_ADDRESS;
    const walletApproved = RANDOM_ADDRESS;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signer = provider.getSigner(walletOwner);
    // - Get the contract linked with the signer
    const contract = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signer
    );

    try {
      // Init
      await contract.approve(walletApproved, amountToApprove);
    } catch (error: any) {
      // Expectations
      expect(error?.reason).to.be.eq("value out-of-bounds");
    }
  });

  /**
   * approve
   */
  it("approve - should PASS when approving 10", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToApprove = 10;
    const walletOwner = OWNER_ADDRESS;
    const walletApproved = RANDOM_ADDRESS;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signer = provider.getSigner(walletOwner);
    // - Get the contract linked with the signer
    const contract = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signer
    );

    // Init
    await contract.approve(walletApproved, amountToApprove);
    const result = await contract.allowance(walletOwner, walletApproved);

    // Expectations
    expect(result.toNumber()).to.be.eq(amountToApprove);
  });

  /**
   * transfer
   */
  it("transfer - should FAIL when transferring -1", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToTransfer = -1;
    const walletOwner = OWNER_ADDRESS;
    const walletReceiving = RANDOM_ADDRESS;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signer = provider.getSigner(walletOwner);
    // - Get the contract linked with the signer
    const contract = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signer
    );

    try {
      // Init
      await contract.transfer(walletReceiving, amountToTransfer);
    } catch (error: any) {
      // Expectations
      expect(error?.reason).to.be.eq("value out-of-bounds");
    }
  });

  /**
   * transfer
   */
  it("transfer - should FAIL when transferring more than owned", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToTransfer = 1001;
    const walletOwner = OWNER_ADDRESS;
    const walletReceiving = RANDOM_ADDRESS;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signer = provider.getSigner(walletOwner);
    // - Get the contract linked with the signer
    const contract = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signer
    );

    try {
      // Init
      await contract.transfer(walletReceiving, amountToTransfer);
    } catch (error: any) {
      // Expectations
      expect(error?.reason).to.be.eq(
        "Error: VM Exception while processing transaction: reverted with reason string 'ERC20: transfer amount exceeds balance'"
      );
    }
  });

  /**
   * transfer
   */
  it("transfer - should PASS when transferring 10", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToTransfer = 10;
    const walletOwner = OWNER_ADDRESS;
    const walletReceiving = RANDOM_ADDRESS;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signer = provider.getSigner(walletOwner);
    // - Get the contract linked with the signer
    const contract = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signer
    );

    // Init
    await contract.transfer(walletReceiving, amountToTransfer);
    const result = await contract.balanceOf(walletReceiving);

    // Expectations
    expect(result.toNumber()).to.be.eq(amountToTransfer);
  });

  /**
   * scenario transferFrom
   */
  it("scenario transferFrom - should FAIL when approved spender spends more than the owner has", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToApprove = 10;
    const walletOwner = OWNER_ADDRESS;
    const walletApproved = RANDOM_ADDRESS;
    const walletReceiving = ANOTHER_ADDRESS;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signerOwner = provider.getSigner(walletOwner);
    const signerSpender = provider.getSigner(walletApproved);
    // - Get the contract linked with the signer
    const contractOwner = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signerOwner
    );
    // - Get the contract linked with other signer
    const contractSpender = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signerSpender
    );

    // Init
    await contractOwner.approve(walletApproved, amountToApprove);
    const resultAllowance = await contractOwner.allowance(
      walletOwner,
      walletApproved
    );
    await contractOwner.burn(initialSupply);
    try {
      await contractSpender.transferFrom(
        walletOwner,
        walletReceiving,
        amountToApprove
      );
    } catch (error: any) {
      // Expectations
      expect(error?.reason).to.be.eq(
        "Error: VM Exception while processing transaction: reverted with reason string 'ERC20: transfer amount exceeds balance'"
      );
      expect(resultAllowance.toNumber()).to.be.eq(amountToApprove);
    }
  });

  /**
   * scenario transferFrom
   */
  it("scenario transferFrom - should PASS when approved spender spends what the owner has", async () => {
    // Setup
    const initialSupply = 1000;
    const amountToApprove = 10;
    const walletOwner = OWNER_ADDRESS;
    const walletApproved = RANDOM_ADDRESS;
    const walletReceiving = ANOTHER_ADDRESS;
    // - Deploy contract
    const Contract = await ethers.getContractFactory(`${CONTRACT_NAME}`);
    const deployedContract = await Contract.deploy(initialSupply);
    await deployedContract.deployed();
    // - Setup wallet that will interact with the contract as a signer
    const provider = new ethers.providers.JsonRpcProvider();
    const signerOwner = provider.getSigner(walletOwner);
    const signerSpender = provider.getSigner(walletApproved);
    // - Get the contract linked with the signer
    const contractOwner = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signerOwner
    );
    // - Get the contract linked with other signer
    const contractSpender = new ethers.Contract(
      (await deployedContract.deployed()).address,
      ContractABI.abi,
      signerSpender
    );

    // Init
    await contractOwner.approve(walletApproved, amountToApprove);
    const resultAllowanceBefore = await contractOwner.allowance(
      walletOwner,
      walletApproved
    );
    await contractSpender.transferFrom(
      walletOwner,
      walletReceiving,
      amountToApprove
    );
    const resultAllowanceAfter = await contractOwner.allowance(
      walletOwner,
      walletApproved
    );
    const resultBalanceReceiver = await contractOwner.balanceOf(
      walletReceiving
    );
    const resusltBalanceOwner = await contractOwner.balanceOf(walletOwner);

    // Expectations
    expect(resultAllowanceBefore).to.be.eq(amountToApprove);
    expect(resultAllowanceAfter).to.be.eq(0);
    expect(resultBalanceReceiver.toNumber()).to.be.eq(amountToApprove);
    expect(resusltBalanceOwner.toNumber()).to.be.eq(
      initialSupply - amountToApprove
    );
  });
});