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/spore/package.json

@@ -60,7 +60,12 @@
   },
   "dependencies": {
     "@ckb-ccc/core": "workspace:*",
-    "axios": "^1.11.0"
+    "axios": "^1.11.0",
+    "satori": "^0.10.13",
+    "svgson": "^5.3.1"
+  },
+  "peerDependencies": {
+    "satori": "^0.10.13"
   },
   "packageManager": "pnpm@10.8.1"
 }

packages/spore/src/__examples__/renderDob.test.ts

@@ -0,0 +1,14 @@
+import { describe, it } from "vitest";
+import { renderByTokenKey } from "../dob/index.js";
+
+describe("decodeDob [testnet]", () => {
+  it("should respose a decoded dob render data from a spore id", async () => {
+    // The spore id that you want to decode (must be a valid spore dob)
+    const sporeId =
+      "dc19e68af1793924845e2a4dbc23598ed919dcfe44d3f9cd90964fe590efb0e4";
+
+    // Decode from spore id
+    const dob = await renderByTokenKey(sporeId);
+    console.log(dob);
+  }, 60000);
+});

packages/spore/src/dob/index.ts

@@ -1,3 +1,4 @@
 export * from "./api/index.js";
 export * from "./config/index.js";
 export * from "./helper/index.js";
+export * from "./render/index.js";

packages/spore/src/dob/render/api/dobDecode.ts

@@ -0,0 +1,18 @@
+import { config } from "../config";
+import type { DobDecodeResponse } from "../types";
+
+export async function dobDecode(tokenKey: string): Promise<DobDecodeResponse> {
+  const response = await fetch(config.dobDecodeServerURL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      id: 2,
+      jsonrpc: "2.0",
+      method: "dob_decode",
+      params: [tokenKey],
+    }),
+  });
+  return response.json() as Promise<DobDecodeResponse>;
+}

packages/spore/src/dob/render/background-color-parser.ts

@@ -0,0 +1,29 @@
+import { Key } from "./constants/key";
+import type { ParsedTrait } from "./traits-parser";
+
+export function getBackgroundColorByTraits(
+  traits: ParsedTrait[],
+): ParsedTrait | undefined {
+  return traits.find((trait) => trait.name === (Key.BgColor as string));
+}
+
+export function backgroundColorParser(
+  traits: ParsedTrait[],
+  options?: {
+    defaultColor?: string;
+  },
+): string {
+  const bgColorTrait = getBackgroundColorByTraits(traits);
+  if (bgColorTrait) {
+    if (typeof bgColorTrait.value === "string") {
+      if (
+        bgColorTrait.value.startsWith("#(") &&
+        bgColorTrait.value.endsWith(")")
+      ) {
+        return bgColorTrait.value.replace("#(", "linear-gradient(");
+      }
+      return bgColorTrait.value;
+    }
+  }
+  return options?.defaultColor || "#000";
+}

packages/spore/src/dob/render/config.ts

@@ -0,0 +1,83 @@
+export type FileServerResult =
+  | string
+  | {
+      content: string;
+      content_type: string;
+    };
+
+export type BtcFsResult = FileServerResult;
+export type IpfsResult = FileServerResult;
+
+export type BtcFsURI = `btcfs://${string}`;
+export type IpfsURI = `ipfs://${string}`;
+
+export type QueryBtcFsFn = (uri: BtcFsURI) => Promise<BtcFsResult>;
+export type QueryIpfsFn = (uri: IpfsURI) => Promise<IpfsResult>;
+export type QueryUrlFn = (uri: string) => Promise<FileServerResult>;
+
+export class Config {
+  private _dobDecodeServerURL = "https://dob-decoder.ckbccc.com";
+  private _queryBtcFsFn: QueryBtcFsFn = async (uri) => {
+    console.log("requiring", uri);
+    const response = await fetch(
+      `https://dob-decoder.ckbccc.com/restful/dob_extract_image?uri=${uri}&encode=base64`,
+    );
+    return {
+      content: await response.text(),
+      content_type: "",
+    };
+  };
+
+  private _queryUrlFn = async (url: string) => {
+    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);
+  };
+
+  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;
+  }
+
+  get queryBtcFsFn(): QueryBtcFsFn {
+    return this._queryBtcFsFn;
+  }
+
+  get queryIpfsFn(): QueryIpfsFn {
+    return this._queryIpfsFn;
+  }
+
+  get queryUrlFn(): QueryUrlFn {
+    return this._queryUrlFn;
+  }
+}
+
+export const config = new Config();

packages/spore/src/dob/render/constants/key.ts

@@ -0,0 +1,5 @@
+export enum Key {
+  BgColor = "prev.bgcolor",
+  Prev = "prev",
+  Image = "IMAGE",
+}

packages/spore/src/dob/render/constants/regex.ts

@@ -0,0 +1,4 @@
+export const ARRAY_REG = /\(%(.*?)\):(\[.*?\])/;
+export const ARRAY_INDEX_REG = /(\d+)<_>$/;
+export const GLOBAL_TEMPLATE_REG = /^prev<(.*?)>/;
+export const TEMPLATE_REG = /^(.*?)<(.*?)>/;

packages/spore/src/dob/render/index.ts

@@ -0,0 +1,10 @@
+export { config } from "./config";
+export * from "./render-by-dob-decode-response";
+export * from "./render-by-token-key";
+export * from "./render-dob-bit";
+export * from "./render-image-svg";
+export * from "./render-text-params-parser";
+export * from "./render-text-svg";
+export * from "./svg-to-base64";
+export * from "./traits-parser";
+export * from "./types";

packages/spore/src/dob/render/render-by-dob-decode-response.ts

@@ -0,0 +1,39 @@
+import { Key } from "./constants/key";
+import { renderDob1Svg } from "./render-dob1-svg";
+import { renderImageSvg } from "./render-image-svg";
+import { renderTextParamsParser } from "./render-text-params-parser";
+import type { RenderProps } from "./render-text-svg";
+import { renderTextSvg } from "./render-text-svg";
+import { traitsParser } from "./traits-parser";
+import type { DobDecodeResult, RenderPartialOutput } from "./types";
+
+export function renderByDobDecodeResponse(
+  dob0Data: DobDecodeResult | string,
+  props?: Pick<RenderProps, "font"> & {
+    outputType?: "svg";
+  },
+) {
+  if (typeof dob0Data === "string") {
+    dob0Data = JSON.parse(dob0Data) as DobDecodeResult;
+  }
+  if (typeof dob0Data.render_output === "string") {
+    dob0Data.render_output = JSON.parse(
+      dob0Data.render_output,
+    ) as RenderPartialOutput[];
+  }
+  const { traits, indexVarRegister } = traitsParser(dob0Data.render_output);
+  for (const trait of traits) {
+    if (trait.name === "prev.type" && trait.value === "image") {
+      return renderImageSvg(traits);
+    }
+    // TODO: multiple images
+    if (
+      trait.name === (Key.Image as string) &&
+      trait.value instanceof Promise
+    ) {
+      return renderDob1Svg(trait.value);
+    }
+  }
+  const renderOptions = renderTextParamsParser(traits, indexVarRegister);
+  return renderTextSvg({ ...renderOptions, font: props?.font });
+}

packages/spore/src/dob/render/render-by-token-key.ts

@@ -0,0 +1,13 @@
+import { dobDecode } from "./api/dobDecode";
+import { renderByDobDecodeResponse } from "./render-by-dob-decode-response";
+import type { RenderProps } from "./render-text-svg";
+
+export async function renderByTokenKey(
+  tokenKey: string,
+  options?: Pick<RenderProps, "font"> & {
+    outputType?: "svg";
+  },
+) {
+  const dobDecodeResponse = await dobDecode(tokenKey);
+  return renderByDobDecodeResponse(dobDecodeResponse.result, options);
+}

packages/spore/src/dob/render/render-dob-bit.ts

@@ -0,0 +1,109 @@
+import satori from "satori";
+import SpaceGroteskBoldBase64 from "./fonts/SpaceGrotesk-Bold.base64";
+import { traitsParser } from "./traits-parser";
+import type { DobDecodeResult, RenderPartialOutput } from "./types";
+import { base64ToArrayBuffer } from "./utils/string";
+
+const iconBase64 =
+  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNTA0XzI4OCkiPgo8cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTAwMCAwSDBWMTAwMEgxMDAwVjBaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNTAwIDY0NS42NjlDNjE1LjE1NyA2NDUuNjY5IDcwOC42NjEgNTUyLjE2NSA3MDguNjYxIDQzNy4wMDhDNzA4LjY2MSAzOTAuMDkyIDY5My4yNDIgMzQ2Ljc4NSA2NjYuOTk1IDMxMi4wMDhDNjkyLjI1NyAyOTIuNjUxIDcwOC42NjEgMjYyLjQ2NyA3MDguNjYxIDIyOC4zNDZINTAwQzM4NC44NDMgMjI4LjM0NiAyOTEuMzM5IDMyMS44NSAyOTEuMzM5IDQzNy4wMDhDMjkxLjMzOSA1NTEuODM3IDM4NS4xNzEgNjQ1LjY2OSA1MDAgNjQ1LjY2OVpNNTAwIDMyMy44MTlDNTYyLjMzNiAzMjMuODE5IDYxMy4xODkgMzc0LjY3MiA2MTMuMTg5IDQzNy4wMDhDNjEzLjE4OSA0OTkuMzQ0IDU2Mi4zMzYgNTUwLjE5NyA1MDAgNTUwLjE5N0M0MzcuNjY0IDU1MC4xOTcgMzg2LjgxMSA0OTkuMzQ0IDM4Ni44MTEgNDM3LjAwOEMzODYuODExIDM3NC42NzIgNDM3LjY2NCAzMjMuODE5IDUwMCAzMjMuODE5WiIgZmlsbD0iIzAwREY5QiIvPgo8cGF0aCBkPSJNNTAwIDgxMS4zNTJDNDA0LjE5OSA4MTEuMzUyIDMwOC4zOTkgNzc0LjkzNCAyMzUuMjM2IDcwMS43NzJDMjQ2LjcxOSA2NzEuNTg4IDI3MS45ODIgNjQ2LjY1NCAzMDUuNzc0IDYzNy4xMzlDMzU5LjkwOCA2ODkuNjMzIDQyOS43OSA3MTUuODc5IDUwMCA3MTUuODc5QzU3MC4yMSA3MTUuODc5IDY0MC4wOTIgNjg5LjYzMyA2OTQuMjI2IDYzNy4xMzlDNzI4LjAxOCA2NDYuNjU0IDc1My4yODEgNjcxLjI2IDc2NC43NjQgNzAxLjc3MkM2OTEuOTI5IDc3NC42MDYgNTk1LjgwMSA4MTEuMzUyIDUwMCA4MTEuMzUyWiIgZmlsbD0iIzI0NzFGRSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzUwNF8yODgiPgo8cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSIxMDAwIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=";
+
+export function renderDobBit(
+  dob0Data: DobDecodeResult | string,
+  _props?: {
+    outputType?: "svg";
+  },
+) {
+  if (typeof dob0Data === "string") {
+    dob0Data = JSON.parse(dob0Data) as DobDecodeResult;
+  }
+  if (typeof dob0Data.render_output === "string") {
+    dob0Data.render_output = JSON.parse(
+      dob0Data.render_output,
+    ) as RenderPartialOutput[];
+  }
+  const { traits } = traitsParser(dob0Data.render_output);
+  const account =
+    traits.find((trait) => trait.name === "Account")?.value ?? "-";
+  let fontSize = 76;
+  if (typeof account === "string") {
+    if (account.length > 10) {
+      fontSize = fontSize / 2;
+    }
+    if (account.length > 20) {
+      fontSize = fontSize / 2;
+    }
+    if (account.length > 30) {
+      fontSize = fontSize * 0.75;
+    }
+  }
+  const spaceGroteskBoldFont = base64ToArrayBuffer(SpaceGroteskBoldBase64);
+  return satori(
+    {
+      key: "container",
+      type: "div",
+      props: {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          width: "500px",
+          background: "#3A3A43",
+          color: "#fff",
+          height: "500px",
+          textAlign: "center",
+        },
+        children: [
+          {
+            type: "img",
+            props: {
+              src: iconBase64,
+              width: 100,
+              height: 100,
+              style: {
+                width: "100px",
+                height: "100px",
+                borderRadius: "100%",
+                marginBottom: "40px",
+              },
+            },
+          },
+          {
+            type: "div",
+            props: {
+              children: account,
+              style: {
+                marginBottom: "20px",
+                fontSize: `${fontSize}px`,
+                textAlign: "center",
+              },
+            },
+          },
+          {
+            type: "div",
+            props: {
+              children: ".bit",
+              style: {
+                fontSize: "44px",
+                padding: "4px 40px",
+                borderRadius: "200px",
+                background: "rgba(255, 255, 255, 0.10)",
+              },
+            },
+          },
+        ],
+      },
+    },
+    {
+      width: 500,
+      height: 500,
+      fonts: [
+        {
+          name: "SpaceGrotesk",
+          data: spaceGroteskBoldFont,
+          weight: 700,
+        },
+      ],
+    },
+  );
+}