How to render badges

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 discord

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 following gateways.

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:

• Using the TheBadge-UI-Library: https://github.com/thebadge/thebadge-ui-library

• Rendering the image using custom HTML.