Building a Simple NFT Explorer Using Web3 Data APIs

curl --request POST \
     --url https://web3.nodit.io/v1/ethereum/mainnet/nft/getNftsOwnedByAccount \
     --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,
  "cursor": "W3sia2V5IjoidmFsdWUiLCJvcmRlciI6IkRFU0MiLCJlcXVhbCI6dHJ1ZSwicG9pbnQiOiIxIn0seyJrZXkiOiJ0b2tlbklkIiwib3JkZXIiOiJBU0MiLCJlcXVhbCI6ZmFsc2UsInBvaW50IjoiMTkifV0=",
  "items": [
    {
      "tokenId": "0",
      "tokenUri": null,
      "tokenUriSyncedAt": null,
      "ownerAddress": "0x84bb73064300aB1f539310237B892Ca47C58778c",
      "balance": "1",
      "contract": {
        "address": "0xe6313d1776E4043D906D5B7221BE70CF470F5e87",
        "deployedTransactionHash": "0xe015aef229ebe54e6e0b788a0b3eeafac1f4a881dffef74d96e3695a63e0c261",
        "deployedAt": "2023-01-26T02:20:47.000Z",
        "deployerAddress": "0x84bb73064300aB1f539310237B892Ca47C58778c",
        "logoUrl": null,
        "type": "ERC721",
        "name": "OnChainShiba",
        "symbol": "OCS"
      }
    },
  ...
    }
  ]
}

curl --request POST \
     --url https://web3.nodit.io/v1/ethereum/mainnet/nft/getNftMetadataByTokenIds \
     --header 'X-API-KEY: Input_your_API_Key' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "tokens": [
    {
      "contractAddress": "Input_your_contract_account_address",
      "tokenId": "1"
    }
  ]
}
'

[
  {
    "tokenId": "1",
    "tokenUri": "ipfs://QmeSjSinHpPnmXmspMjwiXyN6zS4E9zccariGR3jxcaWtq/1",
    "tokenUriSyncedAt": "2024-04-17T14:38:49.279Z",
    "rawMetadata": "{\"image\":\"ipfs://QmPbxeGcXhYQQNgsC6a36dDyYUcHgMLnGKnF8pVFmGsvqi\",\"attributes\":[{\"trait_type\":\"Mouth\",\"value\":\"Grin\"},{\"trait_type\":\"Clothes\",\"value\":\"Vietnam Jacket\"},{\"trait_type\":\"Background\",\"value\":\"Orange\"},{\"trait_type\":\"Eyes\",\"value\":\"Blue Beams\"},{\"trait_type\":\"Fur\",\"value\":\"Robot\"}]}\n",
    "metadataSyncedAt": "2024-04-17T14:38:53.819Z",
    "media": {
      "originUrl": "ipfs://QmPbxeGcXhYQQNgsC6a36dDyYUcHgMLnGKnF8pVFmGsvqi",
      "cachedUrl": "https://cdn.luniverse.io/media/ethereum/mainnet/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/1/raw.png",
      "thumbnailUrl": "https://cdn.luniverse.io/media/ethereum/mainnet/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/1/medium.png",
      "updatedAt": "2023-08-29T09:23:45.000Z"
    },
    "contract": {
      "address": "0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D",
      "deployedTransactionHash": "0x22199329b0aa1aa68902a78e3b32ca327c872fab166c7a2838273de6ad383eba",
      "deployedAt": "2021-04-22T03:03:16.000Z",
      "deployerAddress": "0xaBA7161A7fb69c88e16ED9f455CE62B791EE4D03",
      "logoUrl": null,
      "type": "ERC721",
      "name": "BoredApeYachtClub",
      "symbol": "BAYC"
    }
  }
]

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

{
  "rpp": 20,
  "cursor": null,
  "items": [
    {
      "from": "0x0000000000000000000000000000000000000000",
      "to": "0x84bb73064300aB1f539310237B892Ca47C58778c",
      "value": "1",
      "timestamp": 1674701879,
      "blockNumber": 16488153,
      "transactionHash": "0x8d46fd387f991e7a3bc6c5eecc2c8f3737153ec689a8094f9631253d2544a857",
      "logIndex": 231,
      "contract": {
        "address": "0xe6313d1776E4043D906D5B7221BE70CF470F5e87",
        "deployedTransactionHash": "0xe015aef229ebe54e6e0b788a0b3eeafac1f4a881dffef74d96e3695a63e0c261",
        "deployedAt": "2023-01-26T02:20:47.000Z",
        "deployerAddress": "0x84bb73064300aB1f539310237B892Ca47C58778c",
        "logoUrl": null,
        "type": "ERC721",
        "name": "OnChainShiba",
        "symbol": "OCS"
      },
      "nft": {
        "tokenId": "1",
        "tokenUri": "data:application/json;base64,eyJuYW1lIjoiT25DaGFpblNoaWJhICMxIiwiZGVzY3JpcHRpb24iOiJUaGlzIGNvbGxlY3Rpb24gaXMgdGhlIGZpcnN0IG9mZmljaWFsIGNvbGxlY3Rpb24gb2YgTWV0YXZlcnNlICYgTkZUIFN0dWRpbywgJ0xhYmVsIE0nLiBEZWRpY2F0ZWQgdG8gYWxsIFNoaWJhIGFuZCBwaXhlbCBhcnQgZmFucy4iLCJpbWFnZV9kYXRhIjoiZGF0YTppbWFnZS9zdmcreG1sO2Jhc2U2NCxQSE4yWnlCM2FXUjBhRDBpTVRBd0pTSWdhR1ZwWjJoMFBTSXhNREFsSWlCMmFXVjNRbTk0UFNJd0lEQWdNVEl3TUNBeE1qQXdJaUIyWlhKemFXOXVQU0l4TGpJaUlIaHRiRzV6UFNKb2RIUndPaTh2ZDNkM0xuY3pMbTl5Wnk4eU1EQXdMM04yWnlJK1BHbHRZV2RsSUhkcFpIUm9QU0l4TWpBd0lpQm9aV2xuYUhROUlqRXlNREFpSUdoeVpXWTlJbVJoZEdFNmFXMWhaMlV2YzNabkszaHRiRHRpWVhObE5qUXNVRWhPTWxwNVFqTmhWMUl3WVVRd2FVMVVTWGROUTBsbllVZFdjRm95YURCUVUwbDRUV3BCZDBscFFqSmhWMVl6VVcwNU5GQlRTWGRKUkVGblRWUkpkMDFEUVhoTmFrRjNTV2xDTWxwWVNucGhWemwxVUZOSmVFeHFTV2xKU0doMFlrYzFlbEJUU205a1NGSjNUMms0ZG1RelpETk1ibU42VEcwNWVWcDVPSGxOUkVGM1RETk9NbHA1U1dkak0xSTFZa2RWT1VsdFNtaFpNblJ1WTIwNU1XSnRVWFJaTWpsellqTkpObVJJU21oaWJrNTNXVmhLYkdKdVVUZFpiVVpxWVRKa2VXSXpWblZhUXpGd1lsZEdibHBVY0RGamJYZHZXa2RHTUZsVWNIQmlWMFp1V2xNNWQySnRZemRaYlVaNldsUlpNRXhIYkZkUmF6bFRaSHBDVEZJeVpIWlJWVVpDVVZVMVZGWlhhRVpXVjJSQ1VWVkdRMW93UmtKUlZVWmFVVEJHV2xGVlJrSlNSMlJyWldwTk1GRlZSa0pSVlVaWlZHeE9VMDFGYkVKamJrMHdXWHBhVWxGVlJrSlNSbHBMVld0V1IxWldUa1prYmxGM1kydFdTMUZWUmtKVVZVWnlVMGRTYlUxdGVFbExNREY1WkZaVmQyUlZWak5MTVc4MFZVZFpjbFZGU2xSYU0wNXlWbFpHZGxvd1JrZFhSWEJEVWxWMFdsUlZSbGRWTVd4U1VUQmtUV0ZZV21oVFNFcEdVVlZLY2xKSVNURmlWVVpDVVZWR1FsRlZWbk5TYkZKeVZUTldVbUpWVGtSTFUzZ3hZMjEzYjFwSFJqQlpWSEJ3WWxkR2JscFRPWGRpYldNM1dXMUdlbHBVV1RCTVIyeFhVV3M1VTJSNlFreFNNbVIyVVZWR1FsRlZOVlJXVjJoR1ZsZGtRbEZWUmtOYU1FWkNVVlZHV2xFd1JscFJWVVpDVWtka2EyVnFUVEJSVlVaQ1VWVkdXVlJzVGxOTlJXeENZMjVOTUZsNldsSlJWVVpDVW14d1MxVnJWa2RXVms1R1pFZHdZVk13UmpSWFZYUlVaVU4wVW1WWGNFZGhSVVpPVGtkU1Jsb3daRzVOUjJ4dVlWVmFRbFpWTVVaa01WSnlWbTVHVTJGSFNYWlphbFYzVGpGR2FWSldRVFJWYlRsQ1l6STVVMW93YkVaVVZsa3dVMFZzVGxaV1RURlNXRkp1WVVjeFJsSkdiRFJaYTJzd1lVaHNibE50YkcxV1JWcDRVVlphY21GRk5WTmlNR2hEVTFVNVQwNVhkRVpTVlVaS1UydFdSbEZ0ZEhkV01GcFZaVlZHUWxGVlJrSlNWM2hIVmtkMFZHUldSblJSTUUxd1RFaFdlV0pEYUd0WldGSm9UMjFzZEZsWFpHeE1NMEoxV25wMGFWbFlUbXhPYWxGellWWmFRMVF4U2pOTlJYUklXakk1UWxGVlJrSlViRTVXWVVWV1Zsb3dSa0pSVlVwdVVWVkdRbEZXYkVSUlZteENVVlZHUlZveVVqWk5lbEpDVVZWR1FsRldhRTlWTVVsM1UxVkdlV042VW1wT2JFWkNVVlZHUjFwRmNGTlNWVnBXVlRCV01HRnNjRXhSV0doYVV6Rk9ORXN4UmpWaGExcHZVVlV3TUZwRlZtNVNNbU4zWVZka2NGSnJSbFpVVlZwMlV6Sm9kbFJyYkhaVFYyaFNVbXRTUTJWVlZYaFNhVGd5VW0xb1VtVnJSa1pSTUU1NVVWVldhbUZwT1V4TlJUQTFVakExZDFkRVpETlJhMjh3Wld4a1JWZEZSakJSVlVwdlZHMTRSRlV4VmxoU1ZXUldVMjVDVTFsVlJrMVpNRlpaVmtWR1JXUXhWa0pPUm5CNFVsZGFhVlpYWkVKUlZVWkNVV3R3VTFaVVZrWmpiWFJMV2pKa2JsQlVNSEJNU0ZaNVlrTm9hMWxZVW1oUGJXeDBXVmRrYkV3elFuVmFlblJwV1ZoT2JFNXFVWE5oVmxwRFZERktNMDFGZEVoYU1qbENVVlZHUWxSc1RsWmhSVlpXV2pCR1FsRlZTbTVSVlVaQ1VWWnNSRkZXYkVKUlZVWkZXakpTTmsxNlVrSlJWVVpDVVZab1QxVXhTWGRUVlVaNVkzcFNhazVzUmtKUlZVWlhaVVZ3VTFKVldsWlZNRll3WVd4d1RGRllhRnBSTVZKSFRERkJOVmRET1cxUFNIQm9ZbFJvY2xVeFJYWlZiV3d5VDBkYVlWVkRkRzFMTTFaV1QxaGplV1ZWV2xSUlZuQlVWRVV4U0dReFJrVlplbGx5VEhsMGMyUkZVbkpVVjNCUlYxTTRNRmRGZDNaVWJuQlJUMFp3TkZKR2FGcFNNRkp1Vm0weGExb3lWazFVTUZKdVZsVm9SbEZVYUZaVk1uUk9USHBCZVdKV1JscFVSMnR5V2tkc2RGSlhWbTlhTUZKS1kwWkdOVnB0V25GVFdHTTBWRVZvUlZSSFduTk1NVTR4VkZNNVRGRXliM3BoVlZvMFlsZE9UV0pyZEhCaFdFRjZUVmRaTkV3ell6VmFWMHBhVkZoV05Fc3hSalpXUlVaM1VXNUpjbHBIWkdGVGJUVkxTekZzZW1GcE9UWmFNbEY1VkVkT2JsRlhkRkJTV0VwNVRIcHNkRkV3Tld0aE1taFhZekJPZW1GR1RucGhiWEI2VkZSa1JWUnRkRmxQUmtKd1VtNUdlbFZHUmtoU1ZUVk9aRmR3ZUdKVVRUUlZWazQwV2pGc1NGTnViRzFrYTJSUlpERlZlVlp0YURGVlJYY3lWRVJvVDJNd2FISlNWV1JEWVhwV1IyRklVbFZYUkZZMFVraEdTRlZHUm1GU01EQjRaRlZXUTA5VlZuaFdXSEJ0VTFWR2FGRnJSa3haTW13MFUydDRhVmR1YUhWTmJrWnZZak53VGxOSWEzWmxibVJDVkVaS2RWSkZWbEpsVkVKeVpWZGtURlZXUm14UmEyc3hWakExU1ZSV1NqVmFWelZHVWpCa00yVllaelZhVmtaT1dUQm9OVkV3UmsxWFIzQkNUa2hTY1dWVlJsUmFNbmMxVmtaYVVWRlZWakZSYldSdVlUQmtVbFJWVmtWUlV6bHFTekprVUZSWFVrVlNhbFl5VTNwb1VGbFhaSFZSYlVadVZGUkdWRmt6VGxoVFdIQjBZVmR3UjJORlJtbFJWMlJWVFZkd2FsbHJTbWhSYTBaVFVrVkdTRkV3VG5KWGJGSkdXVEJXYmxGWFpFTk9NVnAyVkZad2RsbHNhM2RrUlVaQ1VWVkdRbEZyY0ZOV1ZGWkdZMjEwUzFveVpHNVFWREJ3VEVoV2VXSkRhR3RaV0ZKb1QyMXNkRmxYWkd4TU0wSjFXbnAwYVZsWVRteE9hbEZ6WVZaYVExUXhTak5OUlhSSVdqSTVRbEZWUmtKVWJFNVdZVVZXVmxvd1JrSlJWVXB1VVZWR1FsRldiRVJSVm14Q1VWVkdSVm95VWpaTmVsSkNVVlZHUWxGV2FFOVZNVWwzVTFWR2VXTjZVbXBPYkVaQ1VWVkdSbEpyY0ZOU1ZWcFdWVEJXTUdGc2NFeFJXR2hhVXpGT05Fc3hSalZoYTFwdlVWVXhXbGxYT1VkTlIxbHlWa2RhVVU5R2NEWldSR3h2WWxWV2FrMVZUWHBSYWxaaFdrWkdSRXN5ZEZsbFYwWkRaREZHUlZReldsTlRWVXAyVkd0c2VWTnJVbTVUTUZKSVRVZE9TMlJVVWtwVVZXeENVVzB3TkZGclNuUlpWR1JwVkd0S1FsRlZSa0pSVlZaelVteFNjbFV6VmxKaVZVNUVTMU40TVdOdGQyOWFSMFl3V1ZSd2NHSlhSbTVhVXpsM1ltMWpOMWx0Um5wYVZGa3dURWRzVjFGck9WTmtla0pNVWpKa2RsRlZSa0pSVlRWVVZsZG9SbFpYWkVKUlZVWkRXakJHUWxGVlJscFJNRVphVVZWR1FsSkhaR3RsYWswd1VWVkdRbEZWUmxsVWJFNVRUVVZzUW1OdVRUQlplbHBTVVZWR1FsVnVVa3RWYTFaSFZsWk9SbVJyV2xkV1NFNVFaREp3UWxSWFVsaFhXRll6V1RGR1UyRXdOVzlYYWtvMFVqQndkVlV3TkhkWGF6azJVMVZXYTJGV1NraFVibFpYWkd4S1MxTkdiRkJUVms0MlVsVm9VRlpFU25WWlZUbElUbFY0VTFNeGEzbFpNMUYyWlcxVmVrNVlRa05TTVVwc1UxZHdUa3Q1T1VwTlZVWkNZVE5rY0dGcWJHaFZSWFJoVWtoc01Gb3dXalJhYTNSSFRqQm9TbFp0ZEcxWGJFcENZakpHYTFOcldrVmhSbHBJWlZkYVdsZEdSa1JPYld4d1ZFWkpNRk5YY3pKV1YzUkpaREpPVkU5WVpGRmtiV2hXVVd4YWNXUnVRa2xVYld4VlVtMTBZVko2U2t0TmJXUjRVbFZ6TlZGdVFsbFdha3AxV201d1dWUllSa1JTYkVaT1lVaHNlVlJXUmxCTldFNVFVbGQ0Y1ZKWFNsUmFiV041WTFSU1dGUnFUbXRWTURrMFdsZFdhR05yYnpSUFJXeHdWVlZLTW1FelZUVlRSRXAwVWpGbmVtVkZlSGhaTVVwaFVXcHNOVlF4UVhKaFJGWnlUVmRzZDFscldYaFJNV3hJV201bmVsbFZVbmxXTVZaaFYxaGtjazFIVm0xUlZVVjRXa1ZqZGs1VlNrSlViVkp6V1ROdmVGSklUakJsYWtaeFlUQXhVMDFxVGpaT2JWWjZVVEpvUjJGVk9UVldRM1JDWTBoamVrNUZVbEZWTTBKSVpXcEtkMU13VlRSTE1XUkNZWHBvTkUxdGVEQk9NbmhHVFRCd00xUklSbEZoTW5CVlZqQnNhRXN6U20xVVZHUldWRVJhYkZSRmJIQlNNVVpLWVc1Vk5WcHVjRXRpVmxwSVZteFNWRTVGTlVKUlZVWkNVVlZHVkZaV1dsQlZhM014VVRGc1NsTlVNSEJNU0ZaNVlrTm9hMWxZVW1oUGJXeDBXVmRrYkV3elFuVmFlblJwV1ZoT2JFNXFVWE5oVmxwRFZERktNMDFGZEVoYU1qbENVVlZHUWxSc1RsWmhSVlpXV2pCR1FsRlZTbTVSVlVaQ1VWWnNSRkZXYkVKUlZVWkZXakpTTmsxNlVrSlJWVVpDVVZab1QxVXhTWGRUVlVaNVkzcFNhazVzUmtKUlZVWkZWbXR3VTFKVldsWlZNRll3WVdwR1NrMHdPSFpqZW14Q1ZWUm9RazVIUm01U01tZDNVV3BDVDFOWGRFcGhTR2hGVVZkR1UxTXdOVU5WYTFKQ1VsVk9SR0l4YkZWV1ZtUnhWVlpXVW1Rd1NrSmFNMFpJVWxSR1IxTlliRVJUVlVaRFZteENUV015ZUcxaGFrWjBZMVZHUWxGVlJrSlNWM2hIVmtkMFZHUldSblJSTUUxd1R6SkthRmt5ZEc1amJUa3hZbTFSZEdOdFZuZGFWMFl3VDIwMWRreFlTbXhqUjFab1pFUjBhVmxYVG5KYU0wcDJaRmMxYTB4WVRuQmxiVlUyV1RJNWRXUkhSbkJpYW5ScFdWZE9jbG96U25aa1Z6VnJURmhDZG1NeWJEQmhWemwxVDIxT2JHSnVVbXhqYW5Sd1lsZEdibHBUTVhsYVZ6VnJXbGhLY0dKdFl6Wk1XR1JzV1cxMGNHUkRNWFpqU0ZKd1lsZHNObHBUTVdwaU1qVXdZMjFHZW1SRWMzUmlXRTEwWVZjMU1GcFlTbmRpTW5ob1pFZHNkbUpwTVhSaU1sSnNUMjAxYkZsWVNteGpNMUYwWW0xV2NGb3lhR2xpTTBrM1lWY3hhRm95VlhSamJWWjFXa2RXZVdGWE5XNVBhVEYwWWpOdmRGa3pTbkJqTTBGMFdsZFNibHBZVFRkaFZ6Rm9XakpWZEdOdFZuVmFSMVo1WVZjMWJrOXVRbkJsUjFaeldWaFNiRnBFYzJsUWFuZDJZek5hYmxCblBUMGlQand2YVcxaFoyVStQQzl6ZG1jKyIsImF0dHJpYnV0ZXMiOlt7InRyYWl0X3R5cGUiOiJFeWVzIiwidmFsdWUiOiJDYWbDqSBDdXRpZXMifSx7InRyYWl0X3R5cGUiOiJNb3V0aCIsInZhbHVlIjoiVHdpZyJ9LHsidHJhaXRfdHlwZSI6IkhlYWQiLCJ2YWx1ZSI6IkNyb3duIn0seyJ0cmFpdF90eXBlIjoiRWFycmluZyIsInZhbHVlIjoiR29sZCJ9LHsidHJhaXRfdHlwZSI6IkZ1ciIsInZhbHVlIjoiT3JhbmdlIn1dfQ==",
        "tokenUriSyncedAt": "2024-02-21T08:26:18.754Z"
      }
    }
  ]
}

// .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 "../apis/instance";
const instance = createWeb3ApiInstance();

export const useGetNFTOwnedByAccount = (
  accountAddress: string,
  page: number
) => {
  return useQuery({
    queryKey: ["getNFTOwnedByAccount", accountAddress, page],
    queryFn: async () => {
      try {
        const result = await instance.post("nft/getNftsOwnedByAccount", {
          accountAddress,
          withCount: true,
          withMetadata: true,
          rpp: 20,
          page: page,
        });
        return result;
      } catch (error) {
        console.error(error);
      }
    },
    retry: false,
    staleTime: 1000 * 60 * 5,
  });
};

// NftTable.tsx

import {
  NftListTableProps,
  NftsOwnedByAccountResponse,
} from "../types/interface";

const NftTable = ({ ownedNftsByAccountData }: NftListTableProps) =>

  return (
    <div className="flex flex-col items-center justify-center">
      <div className="mt-10 text-2xl font-bold">NFT List</div>
      {ownedNftsByAccountData && ownedNftsByAccountData.items.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="pl-5">Number</th>
                <th className="p-5">Name</th>
                <th className="p-5">Symbol</th>
                <th className="pr-5">Token Id</th>
              </tr>
            </thead>
            <tbody>
              {ownedNftsByAccountData.items.map(
                (item: NftsOwnedByAccountResponse, index: number) => (
                  <tr
                    key={index + item.contract.deployedTransactionHash}
                    className="border border-noditGreen hover:scale-105 duration-100 cursor-pointer"
                  >
                    <th className="font-bold p-5">
                      {ownedNftsByAccountData.page === 1
                        ? index + 1
                        : ownedNftsByAccountData.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.tokenId.length < 10
                        ? item.tokenId
                        : item.tokenId.slice(0, 10) + "..."}
                    </th>
                  </tr>
                )
              )}
            </tbody>
          </table>
      ) : (
        <div>This Account doesn't have any NFTs</div>
      )}
    </div>
  );
};

export default NftTable;

// NftList.tsx

import React from "react";
import { useGetNFTOwnedByAccount } from "./useQueries";
import NftTable from "./NftTable";

const NftList = (): React.ReactElement => {
  const {
    isError,
    data: ownedNftData,
    isLoading,
  } = useGetNFTOwnedByAccount(accountAddress, currentPage);
  return (
    <div>
      <NftTable
        ownedNftByAccountData={ownedNftData?.data}
        accountAddress={accountAddress}
      />
    </div>
  );
};

export default NftList;

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

$ npm install

// .env

VITE_API_KEY=Your_Nodit_API_Key
VITE_PROTOCOL=ethereum
VITE_NETWORK=mainnet

$ npm run dev