How to build a portal page for a protocol

If you are a developer working on a project or website related to web3 protocols, you would certainly need to develop corresponding portal pages or detail pages for each protocol.

It is well known that building the pages themselves is relatively simple, but obtaining and parsing accurate data can be somewhat challenging.

However, you don't have to worry! You can leverage our free API to accelerate your project's development.

Get the metadata of a protocol

For instance, if you are working on a protocol's detail page but lack certain basic information about the protocol, you can call the getProtocolMetadata or getProtocolMetadataByContract endpoint to retrieve essential details such as the protocol name, logo, website URL, Twitter handle, Discord channel, and more.

For example: (Perhaps you should read this to learn how to obtain the protocol_slug.)

curl --request GET \
     --url 'https://api.footprint.network/api/v2/protocol/info?chain=Ethereum&protocol_slug=the-sandbox' \
     --header 'accept: application/json' \
     --header 'api-key: demo-api-key'

Then you will retrieve:

{
  "message": "success",
  "code": 0,
  "data": [
    {
      "chain": "Ethereum",
      "protocol_slug": "the-sandbox",
      "protocol_type": "GameFi",
      "protocol_sub_type": "N/A",
      "protocol_name": "The Sandbox",
      "logo": "https://footprint-imgs.oss-us-east-1.aliyuncs.com/logo_images/the-sandbox.jpg",
      "categories": [
        "Minigame",
        "Open-World",
        "Virtual-World"
      ],
      "discord": "https://discordapp.com/invite/vAe4zvY",
      "github": "",
      "twitter": "TheSandboxGame",
      "telegram": "",
      "web_url": "https://www.sandbox.game/en/",
      "description": "The Sandbox is a virtual gaming world where players can build, own, and monetize their gaming experiences.",
      "updated_at": "2023-05-08 06:50:48.000 UTC",
      "created_at": "2022-07-07 15:59:59.000 UTC"
    }
  ]
}

With this data at your disposal, you can create an aesthetically pleasing and comprehensive detail page for the protocol.

Get all relatived contracts of a protocol

Moreover, if you wish to display all the contract addresses associated with a protocol similar to DappRadar does.

you can utilize another free API called getProtocolContractList. This API will provide you with all the contract information associated with the specific protocol.

For example:

curl --request GET \
     --url 'https://api.footprint.network/api/v2/protocol/getProtocolContractList?protocol_slug=the-sandbox' \
     --header 'accept: application/json' \
     --header 'api-key: demo-api-key'

You will retrieve:

{
  "message": "success",
  "code": 0,
  "data": [
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "LandTunnel",
      "contract_address": "0x03c545163bd114d756c65dda1d97d37b89da2236",
      "chain": "Ethereum"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "Asset",
      "contract_address": "0x067a1eb5e383ed24b66d72aaf80d8d7db3d299a8",
      "chain": "Ethereum"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "The Doggies",
      "contract_address": "0x0e14a75d654dcae5566ec4af53acd66afbd83865",
      "chain": "Ethereum"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "LandSaleWithReferral",
      "contract_address": "0x126a3437f3b76155e5e574abdc048b54f2f4adaa",
      "chain": "Ethereum"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "Sandbox's ESTATEs",
      "contract_address": "0x1ca86b53017bf49b14eb9cefa79bb8e2dbbe3682",
      "chain": "Ethereum"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "TwoPeriodsRewardCalculator",
      "contract_address": "0x1ecf1791b8466eb3b859cc55b748b7872460f5b0",
      "chain": "Polygon"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "Sandbox's LANDs",
      "contract_address": "0x1fc6479bdc7511c6803aff2f477e0fd3171606e0",
      "chain": "Ethereum"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "MultiGiveaway",
      "contract_address": "0x214d52880b1e4e17d020908cd8eaa988ffdd4020",
      "chain": "Polygon"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "Sandbox's ASSETs",
      "contract_address": "0x266003afa9976d72565cac0bd840c276b01ae34f",
      "chain": "Ethereum"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "SAND",
      "contract_address": "0x3845badade8e6dff049820680d1f14bd3903a5d0",
      "chain": "Ethereum"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "BoxKey",
      "contract_address": "0x3e9e891e26ebf108b8da923b92625681bd7aabd8",
      "chain": "Ethereum"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "Sandbox's LANDs",
      "contract_address": "0x4ebcfb9f8b4df38ce149c655541d591afb6a03bd",
      "chain": "Polygon"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "Land",
      "contract_address": "0x50f5474724e0ee42d9a4e711ccfb275809fd6d4a",
      "chain": "Ethereum"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "SAND",
      "contract_address": "0x5a3d077d05d1c7e146e0ccafdfc91aeeee79e32d",
      "chain": "Ethereum"
    },
    {
      "protocol_slug": "the-sandbox",
      "contract_name": "Land",
      "contract_address": "0x5cc5b05a8a13e3fbdb0bb9fccd98d38e50f90c38",
      "chain": "Ethereum"
    },
    // ...
  ]
}

By utilizing these APIs efficiently, you can alleviate the challenges of gathering accurate data and expedite the development of your web3 protocol project or website.