TheBadge documentation
  • 👨‍🏫TheBadge's Introduction
    • Relevance
  • 💎Landing page
  • 🏅What is a Badge
    • Definition
    • Badge history
    • Badge Categories
      • Community Badges
      • Third-party Badges
  • 🫂Protocol Participants
    • Creators
    • Curators
    • Badge Receiver
    • Badge Types
    • Badge Status
  • ⚙️Protocol Mechanics
    • How it works
    • Challenge
    • Challenge Flow
  • 📚How to / Guides
    • How to get a badge
    • How to create a badge
    • How to become a creator
    • How to become a curator
    • How to curate
    • How to challenge
    • How to claim a third party certificate
    • How to place your diploma on LinkedIn
  • ⛓️Integration Guide
    • How to fetch badges
    • How to render badges
      • Using the TheBadge-UI-Library
  • 🙂Community
    • TheBadge's Ambassador
Powered by GitBook
On this page

Was this helpful?

  1. Integration Guide

How to render badges

PreviousHow to fetch badgesNextUsing the TheBadge-UI-Library

Last updated 1 year ago

Was this helpful?

Disclaimer: we are under development, expect changes in the model in the future, we are migrating to the V2 of our contracts. We also plan to launch an SDK for making the integration easy but it's still under development. If you want to collaborate with us feel free to contact us on

Note: we store the information under IPFS, that means that every ipfs hash that you will see on this tutorial has to be converted to urls to fetch the info from it. We recommend using one of the .

For example with PinataCloud:

  • Original ipfs hash: QmZnKDwa7rkJEraPKVuDHSeQGCKuamG8WyxpNfZ9jm9qye

  • Hash converted with gateway:

https://gateway.pinata.cloud/ipfs/QmZnKDwa7rkJEraPKVuDHSeQGCKuamG8WyxpNfZ9jm9qye

1) First to have to obtain the metadata of the badge that you want to render:

  • How to fetch badges

2) Once you have the metadata it will look like this:

{
    "badge": {
      "id": "0x51fd663a6b85383c96e229ec12c0882eaa9886fe-8",
      "evidenceMetadataUrl": "ipfs://QmYVn1MGonZ6n1VKN8M7fEeGtfLeyjGSztFDEaTHqERcgD",
      "reviewDueDate": "1680277596",
      "status": "InReview",
      "isChallenged": false,
      "receiver": {
        "id": "0x51fd663a6b85383c96e229ec12c0882eaa9886fe"
      },
      "badgeType": {
        "id": "8",
        "metadataURL": "ipfs://QmaMdeyvZbgo2v5rKxopdZ6CFuJd95V2Lp3hmoWYYer4jJ",
        "validFor": "0",
        "badgesMintedAmount": "0"
      }
    }
  }

3) Now you need to fetch the general information of the badge from the `badgeType.metadataURL` from IPFS, it will have a format like this:

{
    "description": "Proof of ownership of a Mercado Libre Sellers account",
    "image":"ipfs://QmW3hVcLJ1a5fD9yeKCLuoKB3WbZGY7kfxg66Hx53Wkk3n",
    "name":"Proof of Merchant Account in MercadoLibre"
}

4) From here you can take "name" and "description"

5) The image should be taken from the badge evidenceMetadatUrl (is an ipfs hash, you need to fetch it first):

{
  "columns": [
    {
      "label": "Wallet Address",
      "type": "address",
      "description": "Provide your personal wallet"
    },
    {
      "label": "Personal post link",
      "type": "link",
      "description": "Add your link to a Mercado Libres sellers post. With your wallet's address in the description."
    }
  ],
  "image": "ipfs://QmZnKDwa7rkJEraPKVuDHSeQGCKuamG8WyxpNfZ9jm9qye", -> this is the image of the badge
  "values": {
    "help": true,
    "Wallet Address": "0x7EC0354F3Df24B4F18a6691D42E97A4c0C422585",
    "Personal post link": "https://servicio.mercadolibre.com.ar/MLA-1381674462-servicio-de-certificacion-de-calificacion-_JM"
  }
}

6) Then you can access using the image value

7) Now you have two methods to render it:

  • Rendering the image using custom HTML.

Using the TheBadge-UI-Library:

⛓️
discord
following gateways
https://github.com/thebadge/thebadge-ui-library