feat(spore): dob-render-sdk migration

.changeset/mean-yaks-rescue.md

@@ -0,0 +1,6 @@
+---
+"@ckb-ccc/spore": minor
+---
+
+Migrate dob-render-sdk directly into spore module
+

packages/ccc/package.json

@@ -64,7 +64,8 @@
     "@ckb-ccc/shell": "workspace:*",
     "@ckb-ccc/uni-sat": "workspace:*",
     "@ckb-ccc/utxo-global": "workspace:*",
-    "@ckb-ccc/xverse": "workspace:*"
+    "@ckb-ccc/xverse": "workspace:*",
+    "@ckb-ccc/dob-render": "workspace:*"
   },
   "packageManager": "pnpm@10.8.1"
 }

packages/ccc/src/barrel.ts

@@ -1,3 +1,4 @@
+export * from "@ckb-ccc/dob-render";
 export * from "@ckb-ccc/eip6963";
 export * from "@ckb-ccc/joy-id";
 export * from "@ckb-ccc/nip07";

packages/dob-render/README.md

@@ -0,0 +1,42 @@
+# @ckb-ccc/render
+
+CCC - CKBer's Codebase. Common Chains Connector's render SDK for DOB protocol.
+
+This package provides rendering capabilities for DOB (Decentralized Object) protocol, allowing you to render DOB tokens as SVG images.
+
+## Installation
+
+```bash
+npm install @ckb-ccc/dob-render
+```
+
+## Usage
+
+```typescript
+import {
+  renderByTokenKey,
+  renderByDobDecodeResponse,
+} from "@ckb-ccc/dob-render";
+
+// Render by token key
+const svg = await renderByTokenKey("your-token-key");
+
+// Render by DOB decode response
+const svg = renderByDobDecodeResponse(renderOutput);
+```
+
+## API
+
+### `renderByTokenKey(tokenKey: string, options?: RenderOptions)`
+
+Renders a DOB token by its key.
+
+### `renderByDobDecodeResponse(renderOutput: RenderOutput | string, props?: RenderProps)`
+
+Renders a DOB token from a decoded response.
+
+## Dependencies
+
+- `satori` - SVG to image conversion
+- `svgson` - SVG parsing
+- `axios` - HTTP client for API calls

packages/dob-render/eslint.config.mjs

@@ -0,0 +1,62 @@
+// @ts-check
+
+import eslint from "@eslint/js";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import tseslint from "typescript-eslint";
+
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+export default [
+  ...tseslint.config({
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+    ],
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+      "@typescript-eslint/unbound-method": ["error", { ignoreStatic: true }],
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/require-await": "off",
+      "@typescript-eslint/only-throw-error": [
+        "error",
+        {
+          allowThrowingAny: true,
+          allowThrowingUnknown: true,
+          allowRethrowing: true,
+        },
+      ],
+      "@typescript-eslint/prefer-promise-reject-errors": [
+        "error",
+        {
+          allowThrowingAny: true,
+          allowThrowingUnknown: true,
+        },
+      ],
+      "no-empty": "off",
+      "prefer-const": [
+        "error",
+        { ignoreReadBeforeAssign: true, destructuring: "all" },
+      ],
+    },
+    languageOptions: {
+      parserOptions: {
+        project: true,
+        tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
+      },
+    },
+  }),
+  eslintPluginPrettierRecommended,
+];

packages/dob-render/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@ckb-ccc/dob-render",
+  "version": "1.0.1",
+  "description": "CCC - CKBer's Codebase. Common Chains Connector's render SDK for DOB protocol",
+  "author": "ashuralyk <ashuralyk@live.com>",
+  "license": "MIT",
+  "private": false,
+  "homepage": "https://github.com/ckb-devrel/ccc",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/ckb-devrel/ccc.git"
+  },
+  "sideEffects": false,
+  "main": "dist.commonjs/index.js",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist.commonjs/index.js",
+      "default": "./dist.commonjs/index.js"
+    },
+    "./barrel": {
+      "import": "./dist/barrel.js",
+      "require": "./dist.commonjs/barrel.js",
+      "default": "./dist.commonjs/barrel.js"
+    }
+  },
+  "scripts": {
+    "build": "rimraf ./dist && rimraf ./dist.commonjs && tsc && tsc --project tsconfig.commonjs.json",
+    "lint": "eslint ./src",
+    "format": "prettier --write . && eslint --fix ./src"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.34.0",
+    "@types/node": "^24.3.0",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.2.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.41.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@ckb-ccc/spore": "workspace:*",
+    "axios": "^1.11.0",
+    "satori": "^0.10.13",
+    "svgson": "^5.3.1"
+  },
+  "peerDependencies": {
+    "satori": "^0.10.13"
+  },
+  "packageManager": "pnpm@10.8.1"
+}

packages/dob-render/prettier.config.cjs

@@ -0,0 +1,11 @@
+/**
+ * @see https://prettier.io/docs/configuration
+ * @type {import("prettier").Config}
+ */
+const config = {
+  singleQuote: false,
+  trailingComma: "all",
+  plugins: [require.resolve("prettier-plugin-organize-imports")],
+};
+
+module.exports = config;

packages/dob-render/src/api/index.ts

@@ -0,0 +1,2 @@
+export * from "./renderDobDecode.js";
+export * from "./renderToken.js";

packages/dob-render/src/api/renderDobDecode.ts

@@ -0,0 +1,35 @@
+import { Key } from "../config/constants.js";
+import { renderTextParamsParser } from "../core/parsers/textParamsParser.js";
+import { traitsParser } from "../core/parsers/traitsParser.js";
+import { renderDob1Svg } from "../core/renderers/dob1Render.js";
+import { renderImageSvg } from "../core/renderers/imageRender.js";
+import type { RenderProps } from "../core/renderers/textRender.js";
+import { renderTextSvg } from "../core/renderers/textRender.js";
+import type { RenderOutput } from "../types/external.js";
+
+export function renderByDobDecodeResponse(
+  renderOutput: RenderOutput | string,
+  props?: Pick<RenderProps, "font"> & {
+    outputType?: "svg";
+  },
+) {
+  let renderData: RenderOutput;
+  if (typeof renderOutput === "string") {
+    renderData = JSON.parse(renderOutput) as RenderOutput;
+  } else {
+    renderData = renderOutput;
+  }
+
+  const { traits, indexVarRegister } = traitsParser(renderData);
+  for (const trait of traits) {
+    if (trait.name === String(Key.Type) && trait.value === "image") {
+      return renderImageSvg(traits);
+    }
+    // TODO: multiple images
+    if (trait.name === String(Key.Image) && trait.value instanceof Promise) {
+      return renderDob1Svg(trait.value);
+    }
+  }
+  const renderOptions = renderTextParamsParser(traits, indexVarRegister);
+  return renderTextSvg({ ...renderOptions, font: props?.font });
+}

packages/dob-render/src/api/renderToken.ts

@@ -0,0 +1,18 @@
+import { dob } from "@ckb-ccc/spore";
+import { config } from "../config.js";
+import type { RenderProps } from "../core/renderers/textRender.js";
+import { renderByDobDecodeResponse } from "./renderDobDecode.js";
+
+export async function renderByTokenKey(
+  tokenKey: string,
+  options?: Pick<RenderProps, "font"> & {
+    outputType?: "svg";
+  },
+) {
+  const renderOutput = await dob.decodeDobBySporeId(
+    tokenKey,
+    config.dobDecodeServerURL,
+  );
+
+  return renderByDobDecodeResponse(renderOutput, options);
+}

packages/dob-render/src/barrel.ts

@@ -0,0 +1,5 @@
+export * from "./api/index.js";
+export * from "./config/index.js";
+export * from "./core/index.js";
+export * from "./types/index.js";
+export * from "./utils/index.js";

packages/dob-render/src/config.ts

@@ -0,0 +1,101 @@
+export type FileServerResult =
+  | string
+  | {
+      content: string;
+      content_type: string;
+    };
+
+export type BtcFsResult = FileServerResult;
+export type IpfsResult = FileServerResult;
+export type CkbFsResult = FileServerResult;
+
+export type BtcFsURI = `btcfs://${string}`;
+export type IpfsURI = `ipfs://${string}`;
+export type CkbFsURI = `ckbfs://${string}`;
+
+export type QueryBtcFsFn = (uri: BtcFsURI) => Promise<BtcFsResult>;
+export type QueryIpfsFn = (uri: IpfsURI) => Promise<IpfsResult>;
+export type QueryCkbFsFn = (uri: CkbFsURI) => Promise<CkbFsResult>;
+export type QueryUrlFn = (uri: string) => Promise<FileServerResult>;
+
+export class Config {
+  private _dobDecodeServerURL = "https://dob-decoder.ckbccc.com";
+
+  private _queryBtcFsFn: QueryBtcFsFn = async (uri) => {
+    console.log("dob-render-sdk requiring", uri);
+    const response = await fetch(
+      `https://dob-decoder.ckbccc.com/restful/dob_extract_image?uri=${uri}&encode=base64`,
+    );
+    const text = await response.text();
+    return {
+      content: text,
+      content_type: "",
+    };
+  };
+
+  private _queryUrlFn = async (url: string) => {
+    console.log("dob-render-sdk requiring", url);
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return new Promise<IpfsResult>((resolve, reject) => {
+      const reader = new FileReader();
+
+      reader.onload = function () {
+        const base64 = this.result as string;
+        resolve(base64);
+      };
+      reader.onerror = (error) => {
+        reject(new Error(`FileReader error: ${error.type}`));
+      };
+      reader.readAsDataURL(blob);
+    });
+  };
+
+  private _queryIpfsFn = async (uri: IpfsURI) => {
+    const key = uri.substring("ipfs://".length);
+    const url = `https://ipfs.io/ipfs/${key}`;
+    return this._queryUrlFn(url);
+  };
+
+  private _queryCkbFsFn: QueryCkbFsFn = async (_uri: CkbFsURI) => {
+    throw new Error("CkbFs is not supported");
+  };
+
+  get dobDecodeServerURL() {
+    return this._dobDecodeServerURL;
+  }
+
+  setDobDecodeServerURL(dobDecodeServerURL: string): void {
+    this._dobDecodeServerURL = dobDecodeServerURL;
+  }
+
+  setQueryBtcFsFn(fn: QueryBtcFsFn): void {
+    this._queryBtcFsFn = fn;
+  }
+
+  setQueryIpfsFn(fn: QueryIpfsFn): void {
+    this._queryIpfsFn = fn;
+  }
+
+  setQueryCkbFsFn(fn: QueryCkbFsFn): void {
+    this._queryCkbFsFn = fn;
+  }
+
+  get queryBtcFsFn(): QueryBtcFsFn {
+    return this._queryBtcFsFn;
+  }
+
+  get queryIpfsFn(): QueryIpfsFn {
+    return this._queryIpfsFn;
+  }
+
+  get queryUrlFn(): QueryUrlFn {
+    return this._queryUrlFn;
+  }
+
+  get queryCkbFsFn(): QueryCkbFsFn {
+    return this._queryCkbFsFn;
+  }
+}
+
+export const config = new Config();

packages/dob-render/src/config/constants.ts

@@ -0,0 +1,12 @@
+export enum Key {
+  Bg = "prev.bg",
+  Type = "prev.type",
+  BgColor = "prev.bgcolor",
+  Prev = "prev",
+  Image = "IMAGE",
+}
+
+export const ARRAY_REG = /\(%(.*?)\):(\[.*?\])/;
+export const ARRAY_INDEX_REG = /(\d+)<_>$/;
+export const GLOBAL_TEMPLATE_REG = /^prev<(.*?)>/;
+export const TEMPLATE_REG = /^(.*?)<(.*?)>/;

packages/dob-render/src/config/fonts.ts

@@ -0,0 +1,9 @@
+import SpaceGroteskBoldBase64 from "../fonts/spaceGroteskBold.base64.js";
+import TurretRoadBoldBase64 from "../fonts/turretRoadBold.base64.js";
+import TurretRoadMediumBase64 from "../fonts/turretRoadMedium.base64.js";
+
+export const FONTS = {
+  SpaceGroteskBold: SpaceGroteskBoldBase64,
+  TurretRoadBold: TurretRoadBoldBase64,
+  TurretRoadMedium: TurretRoadMediumBase64,
+} as const;

packages/dob-render/src/config/index.ts

@@ -0,0 +1,3 @@
+export { config } from "../config.js";
+export * from "./constants.js";
+export * from "./fonts.js";

packages/dob-render/src/core/index.ts

@@ -0,0 +1,2 @@
+export * from "./parsers/index.js";
+export * from "./renderers/index.js";