Using the TheBadge-UI-Library

Available components

• The UI-Lib contains a lot of components and different formats for displaying the badges, you can check them and access to the docs in Storybook.

• Please note that the library it's still under development.

• The library repository can be found here.

1) First you have to install the library:

yarn add thebadge-ui-library

2) Then import CSS files with styles in your _app.tx file:

import 'node_modules/thebadge-ui-library/dist/index.css'

3) Now you can use the component by providing to it the badge metadata

Example with BadgePreviewV2:

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

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

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

<BadgePreviewV2
  imageUrl={badgeTypeMetadata.imageUrl} -> it should be an url, ipfs not supported at the moment
  size="medium" -> Large / Medium / Small
  title={badgeTypeMetadata.name}
  description={badgeTypeMetadata.description}
  badgeUrl={`staging-app.thebadge.xyz/${badgeType.id}/${ownerAddress}`}

  {/** NON-EDITABLE VALUES (under development) **/}
  animationEffects={['wobble', 'grow', 'glare']}
  animationOnHover
  badgeBackgroundUrl="https://images.unsplash.com/photo-1512998844734-cd2cca565822?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTIyfHxhYnN0cmFjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
  textContrast="light-withTextBackground"
/>

It will look like this:

Badge example