Building a Simple Token Tracker Using Web3 Data APIs

curl --request POST \
     --url https://web3.nodit.io/v1/ethereum/mainnet/native/getNativeBalanceByAccount \
     --header 'X-API-KEY: Input_your_API_Key' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "accountAddress": "Input_your_account_address"
}
'

{
  "ownerAddress": "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
  "balance": "29435021161388550777"
}

curl --request POST \
     --url https://web3.nodit.io/v1/ethereum/mainnet/token/getTokensOwnedByAccount \
     --header 'X-API-KEY: Input_your_API_Key' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "accountAddress": "Input_your_account_address"
}
'

{
    "rpp": 20,
    "page": 2,
    "count": 389,
    "items": [
        {
            "ownerAddress": "0xdAC17F958D2ee523a2206206994597C13D831ec7",
            **"balance": "1000000000000000000000000",**
            "contract": {
                **"address": "0x6B1E3c59561d299Cab1eAa18bbD03eE3fFD2A0C7",**
                "deployedTransactionHash": "0x5eacfd6869aac83fd7b74fb1740d24d504daddcf90d61953b47703194a033af1",
                "deployedAt": "2023-10-26T16:49:59.000Z",
                "deployerAddress": "0x788A0E6c06448723D74efDe653E9d567faA262F5",
                "logoUrl": null,
                "type": "ERC20",
                **"name": "Tether",
                "symbol": "USDT",**
                "totalSupply": "1000000001000000000000000000",
                **"decimals": 18**
            }
        },
      ...
    ]
}

 curl --request POST \
     --url https://web3.nodit.io/v1/ethereum/mainnet/token/getTokenContractMetadataByContracts \
     --header 'X-API-KEY: Input_your_API_Key' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "contractAddresses": [
    "Input_your_contract_address"
  ]
}
'

[
  {
    "address": "0xdAC17F958D2ee523a2206206994597C13D831ec7",
    "deployedTransactionHash": "0x2f1c5c2b44f771e942a8506148e256f94f1a464babc938ae0690c6e34cd79190",
    "deployedAt": "2017-11-28T00:41:21.000Z",
    "deployerAddress": "0x36928500Bc1dCd7af6a2B4008875CC336b927D57",
    "logoUrl": "https://cdn.luniverse.io/img/crypto-currencies/ethereum/mainnet/0xdac17f958d2ee523a2206206994597c13d831ec7/64x64.png",
    "type": "ERC20",
    "name": "Tether USD",
    "symbol": "USDT",
    "totalSupply": "53981730120396390",
    "decimals": 6
  }
]

curl --request POST \
     --url https://web3.nodit.io/v1/ethereum/mainnet/token/getTokenTransfersByContract \
     --header 'X-API-KEY: Input_your_API_Key' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "contractAddress": "Input_your_contract_address",
}
'

{
  "rpp": 20,
  "cursor": "eyJzb3J0IjpbImJsb2NrX3RpbWVzdGFtcDpkZXNjIiwiYmxvY2tfbnVtYmVyOmRlc2MiLCJsb2dfaW5kZXg6ZGVzYyJdLCJzZWFyY2hBZnRlciI6WzE3MjUwMDg4MTkwMDAsMjA2NDAzOTEsMjAzXX0=",
  "items": [
    {
      "from": "0x0802Dd2EDD3f9faD39A9173B4595be819f201d61",
      "to": "0x09DEdfcef409fCaB410D79E2834FAD16554d1B7c",
      "value": "10200000",
      "timestamp": 1725008831,
      "blockNumber": 20640392,
      "transactionHash": "0x50793eedb9083a23d3725df8c31d727b0365e004dccf3f58ad9353c391c62088",
      "logIndex": 240,
      "contract": {
        "address": "0xdAC17F958D2ee523a2206206994597C13D831ec7",
        "deployedTransactionHash": "0x2f1c5c2b44f771e942a8506148e256f94f1a464babc938ae0690c6e34cd79190",
        "deployedAt": "2017-11-28T00:41:21.000Z",
        "deployerAddress": "0x36928500Bc1dCd7af6a2B4008875CC336b927D57",
        "logoUrl": "https://cdn.luniverse.io/img/crypto-currencies/ethereum/mainnet/0xdac17f958d2ee523a2206206994597c13d831ec7/64x64.png",
        "type": "ERC20",
        "name": "Tether USD",
        "symbol": "USDT",
        "totalSupply": "53981730120396390",
        "decimals": 6
      }
    },
  ...
  ]
}

// .env

VITE_API_KEY=Your_Nodit_API_Key
VITE_PROTOCOL=ethereum
VITE_NETWORK=mainnet

// instance.ts

import axios, { AxiosInstance } from "axios";

const apiKey = import.meta.env.VITE_API_KEY;
const protocol = import.meta.env.VITE_PROTOCOL;
const network = import.meta.env.VITE_NETWORK;

export function createWeb3ApiInstance(): AxiosInstance {
  const instance = axios.create({
    baseURL: `https://web3.nodit.io/v1/${protocol}/${network}`,
    headers: {
      "X-API-KEY": `${apiKey}`,
      "Content-Type": "application/json",
      Accept: "application/json",
    },
  });
  return instance;
}

// useQueries.ts

import { useQuery } from "@tanstack/react-query";
import { createWeb3ApiInstance } from "./instance";
const instance = createWeb3ApiInstance();

export const useGetTokensOwnedByAccount = (
  accountAddress: string,
  page: number,
  rpp = 20
) => {
  return useQuery({
    queryKey: ["getTokensOwnedByAccount", accountAddress, page, rpp],
    queryFn: async () =>
      instance.post("token/getTokensOwnedByAccount", {
        accountAddress,
        withCount: true,
        rpp,
        page,
      }),
    retry: false,
    staleTime: 1000 * 60 * 5,
  });
};

//TokenTable.tsx

import {
  TokenTableProps,
  TokensOwnedByAccountResponse,
} from "./interface";

const TokenTable = ({ ownedTokensByAccountData }: TokenTableProps) => {

  return (
    <div className="flex flex-col items-center justify-center">
      <div className="mt-10 text-2xl font-bold">Token List</div>
      {ownedTokenByAccountData && ownedTokenByAccountData.length > 0 ? (
          <table className="w-full max-w-7xl table-fixed border-collapse mt-5 mb-10 shadow-xl shadow-black ">
            <thead>
              <tr className="border-2 border-noditGreen bg-noditGreen text-white ">
                <th className="p-5">Number</th>
                <th className="p-5">Name</th>
                <th className="p-5">Symbol</th>
                <th className="p-5">Decimals</th>
                <th className="p-5">Balances</th>
              </tr>
            </thead>
            <tbody>
              {ownedTokenByAccountData.map(
                (item: TokensOwnedByAccountResponse, index: number) => (
                  <tr
                    key={item.contract.deployedTransactionHash}
                    className="border border-noditGreen hover:scale-105 duration-100 cursor-pointer "
                  >
                    <th className="font-bold p-5">
                      {ownedTokenByAccountData.page === 1
                        ? index + 1
                        : ownedTokenByAccountData.page * 20 + index - 19}
                    </th>
                    <th className="font-light p-5">{item.contract.name}</th>
                    <th className="font-light p-5">{item.contract.symbol}</th>
                    <th className="font-light p-5">{item.contract.decimals}</th>
                    <th className="font-light p-5">{item.balance}</th>
                  </tr>
                )
              )}
            </tbody>
          </table>
      ) : (
        <div>This Account doesn't have any Tokens</div>
      )}
    </div>
  );
};

export default TokenTable;

// TokenList.tsx

import React from "react";
import {
  useGetTokensOwnedByAccount,
} from "./useQueries";
import { useParams } from "react-router-dom";
import TokenTable from "./components/TokenTable";

const TokenList = (): React.ReactElement => {
  const { accountAddress } = useParams();
  if (!accountAddress) throw new Error("Check your account address");
  const {
    isError,
    data: getTokensOwnedByAccountData,
    isLoading,
  } = useGetTokensOwnedByAccount(accountAddress, currentPage);

  if (isLoading) return <div>Loading...</div>;

  if (isError) return <div>You have to connect node</div>;

  return (
    <div>
      <TokenTable
        ownedTokensByAccountData={getTokensOwnedByAccountData?.data}
      />
    </div>
  );
};

export default TokenList;

$ git clone https://github.com/Lambda256/Nodit-EVM-Tutorials
$ cd Nodit-EVM-Tutorials
$ cd token_tutorial

$ npm install

// .env

VITE_API_KEY=Your_Nodit_API_Key
VITE_PROTOCOL=ethereum
VITE_NETWORK=mainnet

$ npm run dev