5.regular-link-svg.md

Intro

This example demonstrates how to create a DOB using the DOB/0 protocol, with regular image URLs as the primary rendering objects. You can view the DOB on JoyID, Omiga, CKB Explorer, Mobit, Dobby.

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}`);

You can also open and edit the code online in ccc-playground:

This example adds two traits to set the background image: prev.type and prev.bg.

• prev.type : Render as image or text.
• prev.bg : Set the background image.

On-chain test cluster and DOB

Testnet

• 👉🔗 createCluster tx

  • clusterId: 0x3ae41180f64a22ad6c73058d27f956f8195c17bab3bc03222b5e5683771407c4 (type_script.args)
  • clusterTypeHash: 0x574c7a019d7cbb584e2f75ed69f69047de6a2dd1b0fb2da3b1153c11155ce12a (hash(type_script(cluster cell)))

• 👉🔗 mintSpore tx

  • sporeId: 0x2bc5d6ca4084ea4d7eff02764d84df4be116cfbbb20e2ca4704a636e13a9d4d9 (type_script.args)
  • sporeTypeHash: 0xbd03eafbd4fce08923ead64bd0629ce0635262ff2f83aa536a34902a658d6a3d (hash(type_script(spore cell)))

Mainnet

• 👉🔗 createCluster tx

  • clusterId: 0xc38e390673f9ddda5277d617736f53c7e518941b82b407df0e981f7ed1f57337 (type_script.args)
  • clusterTypeHash: 0xd7bef71e729c9fc3ef63f6df5bc2fac60d2f34bebd15dea71ce071f6a54e4e56 (hash(type_script(cluster cell)))

• 👉🔗 mintSpore tx

  • sporeId: 0x7b5563c0aa6f7a4d574c6f2ed91dbf2e7577847e1ae5962b4104024112a24b24 (type_script.args)
  • sporeTypeHash: 0x9d57d06d56e77cbba843be09b063dbb2b2ff163bb7b64f5728c41282af503d3f (hash(type_script(spore cell)))

Platform Preview(Testnet)

JoyID

View on JoyID

Omiga

View on Omiga

Mobit

View on mobit

Dobby

View on Dobby

Explorer

View on CKB Explorer

Compatibility

	JoyID	Omiga	CKB Explorer	Mobit	Dobby
Testnet	✅	✅	✅	✅	✅
Mainnet	✅	✅	✅	✅	✅

---

← Previous Example	Next Example →