Spore DOB render SDK

Installation

npm i @nervina-labs/dob-render

Usage

Examples

SDK Docs

Browser Example

NodeJs Example

Render by token key

Preview

import { renderByTokenKey } from '@nervina-labs/dob-render'

const tokenKey = 'dc19e68af1793924845e2a4dbc23598ed919dcfe44d3f9cd90964fe590efb0e4'
await renderByTokenKey(tokenKey) // <svg .../>

Render by dob decode server

import { renderByDobDecodeResponse } from '@nervina-labs/dob-render'

const tokenKey = 'dc19e68af1793924845e2a4dbc23598ed919dcfe44d3f9cd90964fe590efb0e4'
const response = await fetch('https://dob-decoder.rgbpp.io', {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: 2,
    jsonrpc: "2.0",
    method: "dob_decode",
    params: [tokenKey],
  }),
});
const dobDecodeResult = response.json();
await renderByDobDecodeResponse(dobDecodeResult.result) // <svg ... />

Custom font

import { renderByTokenKey } from '@nervina-labs/dob-render'

const fetchFont = async (url: string) => fetch(url).then((res) => res.arrayBuffer())
const [regular, italic, bold, boldItalic] = await Promise.all([
  fetchFont('/fonts/TurretRoad-Medium.ttf'),
  fetchFont('/fonts/TurretRoad-Medium.ttf'),
  fetchFont('/fonts/TurretRoad-Bold.ttf'),
  fetchFont('/fonts/TurretRoad-Bold.ttf'),
])

const tokenKey = 'dc19e68af1793924845e2a4dbc23598ed919dcfe44d3f9cd90964fe590efb0e4'
await renderByTokenKey(tokenKey, {
  font: {
    regular,
    italic,
    bold,
    boldItalic,
  }
}) // <svg .../>

Config

Config DOB Decode server

DOB Decode server source code

import { 
  config, // step1: import
  renderByTokenKey,
} from '@nervina-labs/dob-render'

// step2: set
config.setDobDecodeServerURL('https://dob-decoder.rgbpp.io')

const tokenKey = 'dc19e68af1793924845e2a4dbc23598ed919dcfe44d3f9cd90964fe590efb0e4'
await renderByTokenKey(tokenKey) // this function will query the configured decode service to read the data required for rendering

Config btcfs query function

import { 
  config, // step1: import
  renderByTokenKey,
} from '@nervina-labs/dob-render'

// step2: set
config.setQueryBtcFsFn(async (uri) => {
  const response = await fetch(`https://api.joy.id/api/v1/wallet/dob_imgs?uri=${uri}`)
  return response.json()
})

const tokenKey = 'dc19e68af1793924845e2a4dbc23598ed919dcfe44d3f9cd90964fe590efb0e4'
await renderByTokenKey(tokenKey) // this function will use the configured btcfs function

API

export interface BtcFsResult {
  content: string
  content_type: string
}

export type BtcFsURI = `btcfs://${string}`

export type QueryBtcFsFn = (uri: BtcFsURI) => Promise<BtcFsResult>

TraitsParser

import { traitsParser } from '@nervina-labs/dob-render' 

const { traits, indexVarRegister } = traitsParser([
  {
    name: 'var',
    traits: [
      {
        String: `4<_>`,
      },
    ],
  },
  {
    name: 'prev.bgcolor',
    traits: [
      {
        String: `(%var):['#FFFF00', '#0000FF', '#FF00FF', '#FF0000', '#000000']`,
      },
    ],
  },
])

const trait = traits.find(({ name }) => name === 'prev.bgcolor').value // is '#000000'
indexVarRegister['var'] // is 4

More example

API

interface RenderOutput {
  name: string;
  traits: {
    String?: string;
    Number?: number;
  }[];
}

interface ParsedTrait {
  name: string;
  value: number | string;
}

function traitsParser(items: RenderOutput[]): {
  traits: ParsedTrait[];
  indexVarRegister: Record<string, number>;
};