4.ipfs-png.md

Intro

This example demonstrates how to create a DOB based on the DOB/0 protocol, using ipfs:// image links 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 ipfs png 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:[
       "ipfs://QmRRPWG96cmgTn2qSzjwr2qvfNEuhunv6FNeMFGa9bx6mQ",
      ],
    },
    {
      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: "IPFS PNG",
    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 = '0x63667a454c67ae31ad9acca4ad5798004eb62fbc047dceee6913c8c5fca91e91';
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:

On-chain test cluster and DOB

Testnet

• 👉🔗 createCluster tx

  • clusterId: 0x63667a454c67ae31ad9acca4ad5798004eb62fbc047dceee6913c8c5fca91e91 (type_script.args)
  • clusterTypeHash: 0x17469eda1b649ed47da7d8c762baa6368ad6cbb44a0c34add556cf577172ae25 (hash(type_script(cluster cell)))

• 👉🔗 mintSpore tx

  • sporeId: 0x7615bffce6825f68fef92e0d4bce234b8a496987cdac9d00171a61520b136143 (type_script.args)
  • sporeTypeHash: 0xe0d258a164af075cf311c60d8fd3ce1625f80f56d1b651c192ce4f7d87392e3d (hash(type_script(spore cell)))

Mainnet

• 👉🔗 createCluster tx

  • clusterId: 0x0c19f33271b7f88516c156ebdc3fc72c9bb76a55a676f68925c6177eedbd03f1 (type_script.args)
  • clusterTypeHash: 0x3c59218529bdf67742d532904078b1579a52891266bdcac1a32e198aca693151 (hash(type_script(cluster cell)))

• 👉🔗 mintSpore tx

  • sporeId: 0xa8765e295c25b9478725f2536834bf0347feecb75b09f0741bf1f27d76ad588d (type_script.args)
  • sporeTypeHash: 0x3b47e4fed63b7a616d4239704eba53f0ce3c08612446f763b6c6cb39aa57fb8d (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 →