TITLE: Create 4-Tier Membership DOB with Spore Protocol
DESCRIPTION: This TypeScript code snippet illustrates the complete process of creating a Spore Cluster and then minting a Spore (DOB) that represents a 4-tier membership. It defines utility functions for generating DNA and explorer URLs, and crucially, constructs the DOB/1 pattern for different membership levels, linking them to Bitcoin-inscribed SVG images. The process involves creating a cluster description, creating the cluster, and then minting the individual Spore with a generated DNA and linking it to the cluster.
SOURCE: https://github.com/sporeprotocol/dob-cookbook/blob/main/examples/dob1/1.spore-genesis(svg_bg_btcfs_icon).md#_snippet_0

LANGUAGE: typescript
CODE:
```
import { ccc } from "@ckb-ccc/ccc";
import { client, signer } from "@ckb-ccc/playground";

function getExplorerTxUrl(txHash: string) {
  const isMainnet = client.addressPrefix === 'ckb';
  const baseUrl = isMainnet ? 'https://explorer.nervos.org' : 'https://testnet.explorer.nervos.org';

  return `${baseUrl}/transaction/${txHash}`
}

function generateSimpleDNA(length: number): string {
  return Array.from(
    { length }, 
    () => Math.floor(Math.random() * 16).toString(16)
  ).join('');
}

/**
 * Generate cluster description
 */
function generateClusterDescriptionUnderDobProtocol() {
 
  const clusterDescription = "Owning a Spore Genesis DOB grants exclusive access to special events, governance participation, and future airdrops within the Spore ecosystem.";
  
  const dob0Pattern: ccc.spore.dob.PatternElementDob0[] = [
    {
      traitName: "Level",
      dobType: "String",
      dnaOffset: 0,
      dnaLength: 1,
      patternType: "options",
      traitArgs: ["Gold", "Silver", "Copper", "Blue"],
    },
    {
      traitName: "Member ID",
      dobType: "String",
      dnaOffset: 1,
      dnaLength: 10,
      patternType: "rawString",
    }
  ];

  const dob1Pattern: ccc.spore.dob.PatternElementDob1[] = [
    {
      imageName: "IMAGE.0",
      svgFields: "attributes",
      traitName: "",
      patternType: "raw",
      traitArgs: "xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'",
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "",
      patternType: "raw",
      traitArgs: "<image width='400' height='400' x='50' y='100' href='https://spore.pro/svg/amazing-mushroom.svg' />"
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "Level",
      patternType: "options",
      traitArgs: [
        ["Gold", "<image width='100' height='100' x='0' y='0' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i0' />"],
        ["Silver", "<image width='100' height='100' x='0' y='0' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i1' />"],
        ["Copper", "<image width='100' height='100' x='0' y='0' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i2' />"],
        ["Blue", "<image width='100' height='100' x='0' y='0' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i3' />"]
      ]
    }
  ];

  const dob1: ccc.spore.dob.Dob1 = {
    description: clusterDescription,
    dob: {
      ver: 1,
      decoders: [
        {
          decoder: ccc.spore.dob.getDecoder(client, "dob0"),
          pattern: dob0Pattern,
        },
        {
          decoder: ccc.spore.dob.getDecoder(client, "dob1"),
          pattern: dob1Pattern,
        },
      ],
    },
  };

  return ccc.spore.dob.encodeClusterDescriptionForDob1(dob1);
}

/**
 * create cluster
 */
const { tx: clusterTx, id: clusterId } = await ccc.spore.createSporeCluster({
  signer,
  data: {
    name: "Spore Genesis",
    description: generateClusterDescriptionUnderDobProtocol(),
  },
});
await clusterTx.completeFeeBy(signer, 2000n);
const clusterTxHash = await signer.sendTransaction(clusterTx);
console.log("Create cluster tx sent:", clusterTxHash, `Cluster ID: ${clusterId}`);

/**
 * create spore
 */
//const clusterId = '0x77729e8e81cbeb2bf3e005e4706853405ceb45d136282894cb0b56986f4c908f';
const { tx: sporeTx, id: sporeId } = await ccc.spore.createSpore({
  signer,
  data: {
    contentType: "dob/1",
    content: ccc.bytesFrom(`{ "dna": "${generateSimpleDNA(16)}" }`, "utf8"),
    clusterId: clusterId,
  },
  clusterMode: "clusterCell",
});
await sporeTx.completeFeeBy(signer, 2000n);
const sporeTxHash = await signer.sendTransaction(sporeTx);
console.log("Mint DOB tx sent:", sporeTxHash, `Spore ID: ${sporeId}`);

await signer.client.waitTransaction(clusterTxHash);
console.log("Create cluster tx committed:", getExplorerTxUrl(clusterTxHash), `Cluster ID: ${clusterId}`);
await signer.client.waitTransaction(sporeTxHash);
console.log("Mint DOB tx committed:", getExplorerTxUrl(sporeTxHash), `Spore ID: ${sporeId}`);
```

----------------------------------------

TITLE: Define DOB/1 Cluster Description for Tiered Membership (TypeScript)
DESCRIPTION: This function constructs the detailed DOB/1 cluster description, specifying a 4-tier membership system (Gold, Silver, Copper, Blue). It defines how DNA segments map to 'Level' and 'Member ID' traits, and how SVG image elements are dynamically generated, incorporating both IPFS and Bitcoin-inscribed (BTCFS) assets for badges.
SOURCE: https://github.com/sporeprotocol/dob-cookbook/blob/main/examples/dob1/3.azuki-genesis(ipfs_bg_btcfs_icon).md#_snippet_0

LANGUAGE: TypeScript
CODE:
```
function generateClusterDescriptionUnderDobProtocol() {
  const clusterDescription = "Owning a Azuki Genesis DOB grants exclusive access to special events, governance participation, and future airdrops.";
  
  const dob0Pattern: ccc.spore.dob.PatternElementDob0[] = [
    {
      traitName: "Level",
      dobType: "String",
      dnaOffset: 0,
      dnaLength: 1,
      patternType: "options",
      traitArgs: ["Gold", "Silver", "Copper", "Blue"],
    },
    {
      traitName: "Member ID",
      dobType: "String",
      dnaOffset: 1,
      dnaLength: 10,
      patternType: "rawString",
    }
  ];

  const dob1Pattern: ccc.spore.dob.PatternElementDob1[] = [
    {
      imageName: "IMAGE.0",
      svgFields: "attributes",
      traitName: "",
      patternType: "raw",
      traitArgs: "xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'",
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "",
      patternType: "raw",
      traitArgs: "<image width='500' height='500' href='ipfs://QmYDvPAXtiJg7s8JdRBSLWdgSphQdac8j1YuQNNxcGE1hg/108.png' />"
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "Level",
      patternType: "options",
      traitArgs: [
        ["Gold", "<image width='100' height='100' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i0' />"],
        ["Silver", "<image width='100' height='100' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i1' />"],
        ["Copper", "<image width='100' height='100' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i2' />"],
        ["Blue", "<image width='100' height='100' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i3' />"]
      ]
    }
  ];

  const dob1: ccc.spore.dob.Dob1 = {
    description: clusterDescription,
    dob: {
      ver: 1,
      decoders: [
        {
          decoder: ccc.spore.dob.getDecoder(client, "dob0"),
          pattern: dob0Pattern,
        },
        {
          decoder: ccc.spore.dob.getDecoder(client, "dob1"),
          pattern: dob1Pattern,
        }
      ]
    }
  };

  return ccc.spore.dob.encodeClusterDescriptionForDob1(dob1);
}
```

----------------------------------------

TITLE: Define DOB0 and DOB1 Patterns and Generate Cluster Description
DESCRIPTION: This function, `generateClusterDescriptionUnderDobProtocol`, defines the structure for Digital Object Blueprint (DOB) patterns, specifically DOB0 and DOB1. DOB0 defines basic traits like 'Shape' and 'BackgroundColor' using string options. DOB1 maps these traits to SVG elements and attributes, allowing for dynamic visual representation based on DNA. The function then encodes these patterns into a cluster description suitable for the Spore protocol.
SOURCE: https://github.com/sporeprotocol/dob-cookbook/blob/main/examples/dob1/0.basic-shape.md#_snippet_1

LANGUAGE: typescript
CODE:
```
function generateClusterDescriptionUnderDobProtocol() {
  /**
   * Generation example for DOB0
   */
  const clusterDescription = "This is a basic-shape example for dob1.";
  const dob0Pattern: ccc.spore.dob.PatternElementDob0[] = [
    {
      traitName: "Shape",
      dobType: "String",
      dnaOffset: 1,
      dnaLength: 1,
      patternType: "options",
      traitArgs: ["circle", "square", "triangle", "star", "text"]
    },
    {
      traitName: "BackgroundColor",
      dobType: "String",
      dnaOffset: 0,
      dnaLength: 1,
      patternType: "options",
      traitArgs: ["red", "blue", "green", "yellow", "pink"]
    }
  ];
  
  /**
   * Generation example for DOB1
   */
  const dob1Pattern: ccc.spore.dob.PatternElementDob1[] = [
    {
      imageName: "IMAGE.0",
      svgFields: "attributes",
      traitName: "",
      patternType: "raw",
      traitArgs: "xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'"
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "BackgroundColor",
      patternType: "options",
      traitArgs: [
        ["red", "<rect width='500' height='500' x='0' y='0' fill='red' />"],
        ["blue", "<rect width='500' height='500' x='0' y='0' fill='blue' />"],
        ["green", "<rect width='500' height='500' x='0' y='0' fill='green' />"],
        ["yellow", "<rect width='500' height='500' x='0' y='0' fill='yellow' />"],
        [["*"], "<rect width='500' height='500' x='0' y='0' fill='pink' />"]
      ]
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "Shape",
      patternType: "options",
      traitArgs: [
        ["circle", "<circle cx='250' cy='250' r='150' fill='white' stroke='black' stroke-width='2' />"],
        ["square", "<rect width='300' height='300' x='100' y='100' fill='white' stroke='black' stroke-width='2' />"],
        ["triangle", "<polygon points='250,100 400,400 100,400' fill='white' stroke='black' stroke-width='2' />"],
        ["star", "<path d='M250 100 L290 200 L400 200 L310 260 L340 370 L250 300 L160 370 L190 260 L100 200 L210 200 Z' fill='white' stroke='black' stroke-width='2' />"],
        ["text", "<text x='250' y='250' text-anchor='middle' dominant-baseline='middle' font-size='48' fill='black'>DOB1</text>"],
        [["*"], "<circle cx='250' cy='250' r='150' fill='white' stroke='black' stroke-width='2' />"]
      ]
    }
  ];

  const dob1: ccc.spore.dob.Dob1 = {
    description: clusterDescription,
    dob: {
      ver: 1,
      decoders: [
        {
          decoder: ccc.spore.dob.getDecoder(client, "dob0"),
          pattern: dob0Pattern
        },
        {
          decoder: ccc.spore.dob.getDecoder(client, "dob1"),
          pattern: dob1Pattern
        }
      ]
    }
  };

  return ccc.spore.dob.encodeClusterDescriptionForDob1(dob1);
}
```

----------------------------------------

TITLE: Create Colorful DOB with DOB/0 Protocol in TypeScript
DESCRIPTION: This TypeScript example demonstrates how to create a Data Object Bundle (DOB) with custom background and text colors using the DOB/0 protocol. It involves generating a cluster description with specific `prev.bgcolor` and `prev<%k: %v>` traits for color customization, then creating a Spore cluster and minting a DOB (spore) with a simple DNA. The `prev.bgcolor` trait sets the background color, while `prev<%k: %v>` sets the text color and outputs the property name and value. The code also includes helper functions for generating DNA and CKB explorer URLs.
SOURCE: https://github.com/sporeprotocol/dob-cookbook/blob/main/examples/dob0/1.colorful-loot.md#_snippet_0

LANGUAGE: typescript
CODE:
```
import { ccc } from "@ckb-ccc/ccc";
import { client, signer } from "@ckb-ccc/playground";

function getExplorerTxUrl(txHash: string) {
  const isMainnet = client.addressPrefix === 'ckb';
  const baseUrl = isMainnet ? 'https://explorer.nervos.org' : 'https://testnet.explorer.nervos.org';

  return `${baseUrl}/transaction/${txHash}`
}

function generateSimpleDNA(length: number): string {
  return Array.from(
    { length }, 
    () => Math.floor(Math.random() * 16).toString(16)
  ).join('');
}

/**
 * Generate cluster description
 */
function generateClusterDescriptionUnderDobProtocol() {
 
  const clusterDescription = "A colorful loot cluster";
  
  const dob0Pattern: ccc.spore.dob.PatternElementDob0[] = [
    {
      traitName: "prev.bgcolor",
      dobType: "String",
      dnaOffset: 0,
      dnaLength: 1,
      patternType: "options",
      traitArgs: ['#DBAB00', '#FFBDFC', '#09D3FF', '#AFE7F9', '#66C084'],
    },
    {
      traitName: "prev<%k: %v>",
      dobType: "String",
      dnaOffset: 0,
      dnaLength: 1,
      patternType: "options",
      traitArgs: ['#FFFFFF', '#000000', '#FFBDFC', '#000000', '#FFFFFF']
    },
    {
      traitName: "Type",
      dobType: "Number",
      dnaOffset: 1,
      dnaLength: 1,
      patternType: "range",
      traitArgs: [10, 50],
    },
    {
      traitName: "Timestamp",
      dobType: "Number",
      dnaOffset: 2,
      dnaLength: 4,
      patternType: "rawNumber",
    },
  ];

  const dob0: ccc.spore.dob.Dob0 = {
    description: clusterDescription,
    dob: {
      ver: 0,
      decoder: ccc.spore.dob.getDecoder(client, "dob0"),
      pattern: dob0Pattern,
    },
  };

  return ccc.spore.dob.encodeClusterDescriptionForDob0(dob0);
}

/**
 * create cluster
 */
const { tx: clusterTx, id: clusterId } = await ccc.spore.createSporeCluster({
  signer,
  data: {
    name: "Colorful loot",
    description: generateClusterDescriptionUnderDobDobProtocol(),
  },
});
await clusterTx.completeFeeBy(signer, 2000n);
const clusterTxHash = await signer.sendTransaction(clusterTx);
console.log("Create cluster tx sent:", clusterTxHash, `Cluster ID: ${clusterId}`);
await signer.client.waitTransaction(clusterTxHash);
console.log("Create cluster tx committed:", getExplorerTxUrl(clusterTxHash), `Cluster ID: ${clusterId}`);

/**
 * create spore
 */
const { tx: sporeTx, id: sporeId } = await ccc.spore.createSpore({
  signer,
  data: {
    contentType: "dob/0",
    content: ccc.bytesFrom(`{ "dna": "${generateSimpleDNA(16)}" }`, "utf8"),
    clusterId: clusterId,
  },
  clusterMode: "clusterCell",
});
await sporeTx.completeFeeBy(signer, 2000n);
const sporeTxHash = await signer.sendTransaction(sporeTx);
console.log("Mint DOB tx sent:", sporeTxHash, `Spore ID: ${sporeId}`);
await signer.client.waitTransaction(sporeTxHash);
console.log("Mint DOB tx committed:", getExplorerTxUrl(sporeTxHash), `Spore ID: ${sporeId}`);
```

----------------------------------------

TITLE: Create Spore Cluster and Mint Spore with DOB Content
DESCRIPTION: This snippet demonstrates the end-to-end process of creating a Spore cluster and then minting a Spore within that cluster. It first creates a cluster with a name and a dynamically generated DOB description. Subsequently, it mints a new Spore, assigning it a `dob/0` content type and a randomly generated DNA, linking it to the newly created cluster. Finally, it sends and waits for both transactions to be committed on the CKB blockchain, logging their explorer URLs and IDs.
SOURCE: https://github.com/sporeprotocol/dob-cookbook/blob/main/examples/dob1/0.basic-shape.md#_snippet_2

LANGUAGE: typescript
CODE:
```
/**
 * create cluster
 */

const { tx: clusterTx, id: clusterId } = await ccc.spore.createSporeCluster({
  signer,
  data: {
    name: "dob1-basic-shape",
    description: generateClusterDescriptionUnderDobProtocol()
  }
});
await clusterTx.completeFeeBy(signer, 2000n);
const clusterTxHash = await signer.sendTransaction(clusterTx);
console.log("Create cluster tx sent:", clusterTxHash, `Cluster ID: ${clusterId}`);

/**
 * create spore
 */
//const clusterId = '0xc2e4164c6b390b0ca31138d1715201c24dc9aafae1a75b1047763cd06602de4e';
const { tx: sporeTx, id: sporeId } = await ccc.spore.createSpore({
  signer,
  data: {
    contentType: "dob/0",
    content: ccc.bytesFrom(`{ \"dna\": \"${generateSimpleDNA(16)}\" }`, "utf8"),
    clusterId: clusterId
  },
  clusterMode: "clusterCell"
});
await sporeTx.completeFeeBy(signer, 2000n);
const sporeTxHash = await signer.sendTransaction(sporeTx);
console.log("Mint DOB tx sent:", sporeTxHash, `Spore ID: ${sporeId}`);

await signer.client.waitTransaction(clusterTxHash);
console.log("Create cluster tx committed:", getExplorerTxUrl(clusterTxHash), `Cluster ID: ${clusterId}`);
await signer.client.waitTransaction(sporeTxHash);
console.log("Mint DOB tx committed:", getExplorerTxUrl(sporeTxHash), `Spore ID: ${sporeId}`);
```

----------------------------------------

TITLE: TypeScript: Generate DOB/1 Cluster Description for Membership System
DESCRIPTION: Defines the structure and patterns for a DOB/1 cluster description, specifically for a 4-tier membership system. It includes `dob0Pattern` for 'Level' and 'Member ID' traits, and `dob1Pattern` for image attributes and elements, linking membership tiers to specific badge images inscribed on Bitcoin.
SOURCE: https://github.com/sporeprotocol/dob-cookbook/blob/main/examples/dob1/2.nervape-genesis(btcfs_bg_btcfs_icon).md#_snippet_1

LANGUAGE: typescript
CODE:
```
/**
 * Generate cluster description
 */
function generateClusterDescriptionUnderDobProtocol() {
 
  const clusterDescription = "Owning a Nervape Genesis DOB grants exclusive access to special events, governance participation, and future airdrops.";
  
  const dob0Pattern: ccc.spore.dob.PatternElementDob0[] = [
    {
      traitName: "Level",
      dobType: "String",
      dnaOffset: 0,
      dnaLength: 1,
      patternType: "options",
      traitArgs: ["Gold", "Silver", "Copper", "Blue"],
    },
    {
      traitName: "Member ID",
      dobType: "String",
      dnaOffset: 1,
      dnaLength: 10,
      patternType: "rawString",
    }
  ];

  const dob1Pattern: ccc.spore.dob.PatternElementDob1[] = [
    {
      imageName: "IMAGE.0",
      svgFields: "attributes",
      traitName: "",
      patternType: "raw",
      traitArgs: "xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'",
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "",
      patternType: "raw",
      traitArgs: "<image width='500' height='500' href='btcfs://f1dce09bbb61961b3c61efbfa263a38511cf89dbdeed206f6ecc001a52c1fb01i0' />"
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "Level",
      patternType: "options",
      traitArgs: [
        ["Gold", "<image width='100' height='100' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i0' />"],
        ["Silver", "<image width='100' height='100' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i1' />"],
        ["Copper", "<image width='100' height='100' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i2' />"],
        ["Blue", "<image width='100' height='100' href='btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i3' />"]
      ]
    }
  ];

  const dob1: ccc.spore.dob.Dob1 = {
    description: clusterDescription,
    dob: {
      ver: 1,
      decoders: [
        {
          decoder: ccc.spore.dob.getDecoder(client, "dob0"),
          pattern: dob0Pattern,
        },
        {
          decoder: ccc.spore.dob.getDecoder(client, "dob1"),
          pattern: dob1Pattern,
        },
      ],
    },
  };

  return ccc.spore.dob.encodeClusterDescriptionForDob1(dob1);
}
```

----------------------------------------

TITLE: Create DOB with Regular Image URLs using DOB/0 Protocol (TypeScript)
DESCRIPTION: This TypeScript example demonstrates the creation of a Digital Object (DOB) using the DOB/0 protocol. It includes functions to generate a simple DNA string, construct a cluster description with specific traits (`prev.type`, `prev.bg`), and then create both a Spore cluster and a Spore (DOB) on the CKB blockchain, using regular image URLs for rendering.
SOURCE: https://github.com/sporeprotocol/dob-cookbook/blob/main/examples/dob0/5.regular-link-svg.md#_snippet_0

LANGUAGE: typescript
CODE:
```
import { ccc } from "@ckb-ccc/ccc";
import { client, signer } from "@ckb-ccc/playground";

function getExplorerTxUrl(txHash: string) {
  const isMainnet = client.addressPrefix === 'ckb';
  const baseUrl = isMainnet ? 'https://explorer.nervos.org' : 'https://testnet.explorer.nervos.org';

  return `${baseUrl}/transaction/${txHash}`
}

function generateSimpleDNA(length: number): string {
  return Array.from(
    { length }, 
    () => Math.floor(Math.random() * 16).toString(16)
  ).join('');
}

/**
 * Generate cluster description
 */
function generateClusterDescriptionUnderDobProtocol() {
 
  const clusterDescription = "A cluster with regular link svg as the primary rendering objects.";
  
  const dob0Pattern: ccc.spore.dob.PatternElementDob0[] = [
    {
      traitName: "prev.type",
      dobType: "String",
      dnaOffset: 0,
      dnaLength: 1,
      patternType: "options",
      traitArgs: ['image'],
    },
    {
      traitName: "prev.bg",
      dobType: "String",
      dnaOffset: 1,
      dnaLength: 1,
      patternType: "options",
      traitArgs:[
       "https://www.nervos.org/favicon.svg",
      ],
    },
    {
      traitName: "Type",
      dobType: "Number",
      dnaOffset: 3,
      dnaLength: 1,
      patternType: "range",
      traitArgs: [10, 50],
    },
    {
      traitName: "Timestamp",
      dobType: "Number",
      dnaOffset: 4,
      dnaLength: 4,
      patternType: "rawNumber",
    },
  ];

  const dob0: ccc.spore.dob.Dob0 = {
    description: clusterDescription,
    dob: {
      ver: 0,
      decoder: ccc.spore.dob.getDecoder(client, "dob0"),
      pattern: dob0Pattern,
    },
  };

  return ccc.spore.dob.encodeClusterDescriptionForDob0(dob0);
}

/**
 * create cluster
 */
const { tx: clusterTx, id: clusterId } = await ccc.spore.createSporeCluster({
  signer,
  data: {
    name: "Regular link SVG",
    description: generateClusterDescriptionUnderDobProtocol(),
  },
});
await clusterTx.completeFeeBy(signer, 2000n);
const clusterTxHash = await signer.sendTransaction(clusterTx);
console.log("Create cluster tx sent:", clusterTxHash, `Cluster ID: ${clusterId}`);
await signer.client.waitTransaction(clusterTxHash);
console.log("Create cluster tx committed:", getExplorerTxUrl(clusterTxHash), `Cluster ID: ${clusterId}`);

/**
 * create spore
 */
//const clusterId = '0x3ae41180f64a22ad6c73058d27f956f8195c17bab3bc03222b5e5683771407c4';
const { tx: sporeTx, id: sporeId } = await ccc.spore.createSpore({
  signer,
  data: {
    contentType: "dob/0",
    content: ccc.bytesFrom(`{ "dna": "${generateSimpleDNA(16)}" }`, "utf8"),
    clusterId: clusterId,
  },
  clusterMode: "clusterCell",
});
await sporeTx.completeFeeBy(signer, 2000n);
const sporeTxHash = await signer.sendTransaction(sporeTx);
console.log("Mint DOB tx sent:", sporeTxHash, `Spore ID: ${sporeId}`);
await signer.client.waitTransaction(sporeTxHash);
console.log("Mint DOB tx committed:", getExplorerTxUrl(sporeTxHash), `Spore ID: ${sporeId}`);
```

----------------------------------------

TITLE: Construct Spore Protocol DOB1 Object with Decoders
DESCRIPTION: This TypeScript snippet demonstrates how to construct a `Dob1` object for the Spore Protocol. It includes a `description` and defines an array of `decoders`, each associated with a specific `pattern`. The `ccc.spore.dob.getDecoder` function is used to retrieve decoders from a client, and the `ccc.spore.dob.encodeClusterDescriptionForDob1` function is called to process the constructed `Dob1` object, preparing it for use within the protocol.
SOURCE: https://github.com/sporeprotocol/dob-cookbook/blob/main/examples/dob1/4.nervape-compose(btcfs).md#_snippet_2

LANGUAGE: TypeScript
CODE:
```
  const dob1: ccc.spore.dob.Dob1 = {
    description: clusterDescription,
    dob: {
      ver: 1,
      decoders: [
        {
          decoder: ccc.spore.dob.getDecoder(client, "dob0"),
          pattern: dob0Pattern,
        },
        {
          decoder: ccc.spore.dob.getDecoder(client, "dob1"),
          pattern: dob1Pattern,
        }
      ]
    }
  };

  return ccc.spore.dob.encodeClusterDescriptionForDob1(dob1);
```

----------------------------------------

TITLE: Create DOB/0 Cluster and Spore with BTCFS i0 SVG
DESCRIPTION: This TypeScript code demonstrates the end-to-end process of creating a Spore cluster and minting a DOB (Digital Object Blueprint) based on the DOB/0 protocol. It defines a DOB/0 pattern using `btcfs://` SVG image links for rendering, generates a simple DNA, and then executes the transactions to create the cluster and mint the spore on the CKB blockchain.
SOURCE: https://github.com/sporeprotocol/dob-cookbook/blob/main/examples/dob0/6.btcfs-i0-svg.md#_snippet_0

LANGUAGE: TypeScript
CODE:
```
import { ccc } from "@ckb-ccc/ccc";
import { client, signer } from "@ckb-ccc/playground";

function getExplorerTxUrl(txHash: string) {
  const isMainnet = client.addressPrefix === 'ckb';
  const baseUrl = isMainnet ? 'https://explorer.nervos.org' : 'https://testnet.explorer.nervos.org';

  return `${baseUrl}/transaction/${txHash}`
}

function generateSimpleDNA(length: number): string {
  return Array.from(
    { length }, 
    () => Math.floor(Math.random() * 16).toString(16)
  ).join('');
}

/**
 * Generate cluster description
 */
function generateClusterDescriptionUnderDobProtocol() {
 
  const clusterDescription = "A cluster with btcfs i0 svg as the primary rendering objects.";
  
  const dob0Pattern: ccc.spore.dob.PatternElementDob0[] = [
    {
      traitName: "prev.type",
      dobType: "String",
      dnaOffset: 0,
      dnaLength: 1,
      patternType: "options",
      traitArgs: ['image'],
    },
    {
      traitName: "prev.bg",
      dobType: "String",
      dnaOffset: 1,
      dnaLength: 1,
      patternType: "options",
      traitArgs:[
       "btcfs://8ca2da44996f5a06ad44b5bb87fd9acb71390b6c0cb1910c10b0deb8daad7f82i0",
      ],
    },
    {
      traitName: "prev.bgcolor",
      dobType: "String",
      dnaOffset: 2,
      dnaLength: 1,
      patternType: "options",
      traitArgs:[
       "#FFC103",
      ],
    },
    {
      traitName: "Type",
      dobType: "Number",
      dnaOffset: 3,
      dnaLength: 1,
      patternType: "range",
      traitArgs: [10, 50],
    },
    {
      traitName: "Timestamp",
      dobType: "Number",
      dnaOffset: 4,
      dnaLength: 4,
      patternType: "rawNumber",
    },
  ];

  const dob0: ccc.spore.dob.Dob0 = {
    description: clusterDescription,
    dob: {
      ver: 0,
      decoder: ccc.spore.dob.getDecoder(client, "dob0"),
      pattern: dob0Pattern,
    },
  };

  return ccc.spore.dob.encodeClusterDescriptionForDob0(dob0);
}

/**
 * create cluster
 */
const { tx: clusterTx, id: clusterId } = await ccc.spore.createSporeCluster({
  signer,
  data: {
    name: "BTCFS i0 SVG",
    description: generateClusterDescriptionUnderDobProtocol(),
  },
});
await clusterTx.completeFeeBy(signer, 2000n);
const clusterTxHash = await signer.sendTransaction(clusterTx);
console.log("Create cluster tx sent:", clusterTxHash, `Cluster ID: ${clusterId}`);
await signer.client.waitTransaction(clusterTxHash);
console.log("Create cluster tx committed:", getExplorerTxUrl(clusterTxHash), `Cluster ID: ${clusterId}`);

/**
 * create spore
 */
//const clusterId = '0xd74f0b5c866f0f04958426213781ddb80e9cd730c78d24f7c149aad18d3bc8bd';
const { tx: sporeTx, id: sporeId } = await ccc.spore.createSpore({
  signer,
  data: {
    contentType: "dob/0",
    content: ccc.bytesFrom(`{ "dna": "${generateSimpleDNA(16)}" }`, "utf8"),
    clusterId: clusterId,
  },
  clusterMode: "clusterCell",
});
await sporeTx.completeFeeBy(signer, 2000n);
const sporeTxHash = await signer.sendTransaction(sporeTx);
console.log("Mint DOB tx sent:", sporeTxHash, `Spore ID: ${sporeId}`);
await signer.client.waitTransaction(sporeTxHash);
console.log("Mint DOB tx committed:", getExplorerTxUrl(sporeTxHash), `Spore ID: ${sporeId}`);
```

----------------------------------------

TITLE: Define Spore Protocol DOB Image Traits and Assets
DESCRIPTION: This snippet defines various image-based traits for a Digital Object (DOB) within the Spore Protocol. Each trait includes an 'imageName', 'svgFields', 'traitName', 'patternType', and a 'traitArgs' array. Each 'traitArgs' entry is a pair of a trait option name and an SVG image reference pointing to a 'btcfs' (Bitcoin File System) URI. This structure is used to specify different visual components like masks, earrings, accessories, and clothing for a digital asset.
SOURCE: https://github.com/sporeprotocol/dob-cookbook/blob/main/examples/dob1/4.nervape-compose(btcfs).md#_snippet_1

LANGUAGE: TypeScript
CODE:
```
        ["Zombie Mask", "<image width='500' height='500' href='btcfs://9831cfdfc88d20fe2bd9ee8ede0bf72b9074e61f100b384550f720157eee646ei0' />"],
        ["Opera Mask Wukong", "<image width='500' height='500' href='btcfs://470d5f61d5b0878d863b93c7d69e9ec831b67069cf24f6b7f29f0b709dd1dd18i0' />"],
        ["Bonelist Mask", "<image width='500' height='500' href='btcfs://65be344dbe3a0d1b27e314a15bd8ecb4b350bb8aaf049702d93738ffdc0d4847i0' />"],
        ["Goofy Eyes Soup", "<image width='500' height='500' href='btcfs://2c888132cfa0342be9a1f2cf3c6b96b30c80c49fc54a702a7fd2e52963d8e2f9i0' />"],
      ]
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "Ears",
      patternType: "options",
      traitArgs: [
        ["Daisy Earrings Yellow", "<image width='500' height='500' href='btcfs://fe492fd08bbcaf9cc3b461d34fa388f14d7c8e9759b40ee241a274dbace27b29i0' />"],
        ["Bone Earrings Blue Purple", "<image width='500' height='500' href='btcfs://c7543d4066fff897fb23446cbe9ab8d3d77f04a2f6f2be8afacff8a479060755i0' />"],
        ["Apple Earrings Red", "<image width='500' height='500' href='btcfs://0840773bd7d9e56f43cd1e5b72c997e61e9aee55578a231c1a5d923ce67b6be5i0' />"],
        ["Feather Earrings", "<image width='500' height='500' href='btcfs://10d24f3aa3685f98c2fee91f2dcad65b0dd6612a63cc0921ccab3684446c0548i0' />"],
      ]
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "Accessory",
      patternType: "options",
      traitArgs: [
        ["Nervape Figure Green", "<image width='500' height='500' href='btcfs://c08bd2dfd9d50b88911c05f7d7db1430f1f5c4c96933220e8393d13e0b142ff0i1' />"],
        ["Assorted Rings Gold", "<image width='500' height='500' href='btcfs://77007c6c7b5dc7f40824dbf21a633ec5c6a93faac6d4770d2cbc2db0272d2aebi0' />"],
        ["Bitcoin Chain", "<image width='500' height='500' href='btcfs://a1af1a4f36a30df75c5c2ccef20972a46743499790d8bb34603801ff822ee4c8i1' />"],
        ["Nervos Chain", "<image width='500' height='500' href='btcfs://72d42930da02c9f3be654fde100f196691852a0a95ff28f269f33bc0dbeeb4d0i1' />"],
      ]
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "Upper body",
      patternType: "options",
      traitArgs: [
        ["Tee POW", "<image width='500' height='500' href='btcfs://95409604adad8ff6600071f78c3651a5438368812ccf4135eae4382cdb80a193i1' />"],
        ["Faux Fur Coat Pink", "<image width='500' height='500' href='btcfs://31361a16cd069578914b9dc6993ea2a532430589bd49e36a03c46410a49967d0i1' />"],
        ["Short-Sleeve Button-up Nervape Blue", "<image width='500' height='500' href='btcfs://83e316fabd7100cea61db4fa6df8d90840557c64ee1a7a46243835737ea1fd00i1' />"],
        ["Tee Bitcoin Pattern", "<image width='500' height='500' href='btcfs://acb0cf5b691b153154644f045a87a57cf1d00c67e4acca3606a7112e1502b05bi1' />"],
      ]
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "Lower body",
      patternType: "options",
      traitArgs: [
        ["Cargo Shorts", "<image width='500' height='500' href='btcfs://7143a9867f41b2a59547e05deb6bbcc61322b409e808ee540224e218b9143c4bi1' />"],
        ["Knife Pleated Skirt Denim Blue", "<image width='500' height='500' href='btcfs://50c9f8650d968d319b3e0435527d7461a8eb1d7ef67e3d2bc9c4c186f2a9302ai1' />"],
        ["Swimming Trunks POW BOOM", "<image width='500' height='500' href='btcfs://71c2e728c754d65ea549da7a31d07ac4b1af4b72896903eb2ef7cb8ddd0b5452i1' />"],
        ["Fishnet Stocking", "<image width='500' height='500' href='btcfs://e6df22f53aed8a007e79159e89231661495f46ecf1cc59f6f127242adce31c24i0' />"],
      ]
    },
    {
      imageName: "IMAGE.0",
      svgFields: "elements",
      traitName: "Handheld",
      patternType: "options",
      traitArgs: [
        ["Skateboard Red", "<image width='500' height='500' href='btcfs://1ccb3cfd1e33d4fe414cef717c4de93489e8d0cd80d792f068657c959a740a03i1' />"],
        ["Ruyi Jingu Bang", "<image width='500' height='500' href='btcfs://d47d6d4e1ee4556333618d958fe4de44e3f5e572d21c51ac29ae3dfda92f408bi1' />"],
        ["Coin BTC", "<image width='500' height='500' href='btcfs://48afad47bb9817c005131c257deb52302286e01f6a6724996fb9dfe4372a16a0i0' />"],
        ["Coin CKB", "<image width='500' height='500' href='btcfs://14f3d037dbb4ebac317a038803b6b95bb433f3f02239f455e1899a9753984473i0' />"],
      ]
    }
  ];
```