From c412df84aa5748f1e19236e9bcfbe949a0d41619 Mon Sep 17 00:00:00 2001
From: Jack <k4667333@gmail.com>
Date: Tue, 19 Nov 2024 23:24:58 +0800
Subject: [PATCH] feat: add spore demo

---
 .changeset/real-geckos-fry.md                 |   5 +
 packages/demo/package.json                    |   1 -
 .../connected/(tools)/CreateCluster/page.tsx  | 198 ++++++++++++++++++
 .../app/connected/(tools)/MintSpore/page.tsx  | 101 +++++++++
 .../(tools)/TransferCluster/page.tsx          | 100 +++++++++
 .../connected/(tools)/TransferSpore/page.tsx  | 136 ++++++++++++
 packages/demo/src/app/connected/page.tsx      |  14 ++
 packages/spore/src/cluster/index.ts           |  53 +++--
 packages/spore/src/spore/index.ts             |  70 ++++---
 pnpm-lock.yaml                                |   3 -
 10 files changed, 630 insertions(+), 51 deletions(-)
 create mode 100644 .changeset/real-geckos-fry.md
 create mode 100644 packages/demo/src/app/connected/(tools)/CreateCluster/page.tsx
 create mode 100644 packages/demo/src/app/connected/(tools)/MintSpore/page.tsx
 create mode 100644 packages/demo/src/app/connected/(tools)/TransferCluster/page.tsx
 create mode 100644 packages/demo/src/app/connected/(tools)/TransferSpore/page.tsx

diff --git a/.changeset/real-geckos-fry.md b/.changeset/real-geckos-fry.md
new file mode 100644
index 00000000..2e6dfe41
--- /dev/null
+++ b/.changeset/real-geckos-fry.md
@@ -0,0 +1,5 @@
+---
+"@ckb-ccc/spore": patch
+---
+
+refactor(spore): unified findSpore(s) interface
diff --git a/packages/demo/package.json b/packages/demo/package.json
index 6afbc559..ed50074f 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -24,7 +24,6 @@
   "devDependencies": {
     "@ckb-ccc/connector-react": "workspace:*",
     "@ckb-ccc/lumos-patches": "workspace:*",
-    "@ckb-ccc/udt": "workspace:*",
     "@ckb-lumos/ckb-indexer": "^0.24.0-next.1",
     "@ckb-lumos/common-scripts": "^0.24.0-next.1",
     "@ckb-lumos/config-manager": "^0.24.0-next.1",
diff --git a/packages/demo/src/app/connected/(tools)/CreateCluster/page.tsx b/packages/demo/src/app/connected/(tools)/CreateCluster/page.tsx
new file mode 100644
index 00000000..3b565d37
--- /dev/null
+++ b/packages/demo/src/app/connected/(tools)/CreateCluster/page.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { TextInput } from "@/src/components/Input";
+import { Button } from "@/src/components/Button";
+import { useGetExplorerLink } from "@/src/utils";
+import { useApp } from "@/src/context";
+import { ButtonsPanel } from "@/src/components/ButtonsPanel";
+import { ccc, spore } from "@ckb-ccc/connector-react";
+import { Textarea } from "@/src/components/Textarea";
+
+function generateClusterDescriptionUnderDobProtocol(
+  client: ccc.Client,
+): string {
+  /**
+   * Generation example for DOB0
+   */
+  const clusterDescription = "My First DOB Cluster";
+  const dob0Pattern: spore.dob.PatternElementDob0[] = [
+    {
+      traitName: "BackgroundColor",
+      dobType: "String",
+      dnaOffset: 0,
+      dnaLength: 1,
+      patternType: "options",
+      traitArgs: ["red", "blue", "green", "black", "white"],
+    },
+    {
+      traitName: "FontSize",
+      dobType: "Number",
+      dnaOffset: 1,
+      dnaLength: 1,
+      patternType: "range",
+      traitArgs: [10, 50],
+    },
+    {
+      traitName: "FontFamily",
+      dobType: "String",
+      dnaOffset: 2,
+      dnaLength: 1,
+      patternType: "options",
+      traitArgs: ["Arial", "Helvetica", "Times New Roman", "Courier New"],
+    },
+    {
+      traitName: "Timestamp",
+      dobType: "Number",
+      dnaOffset: 3,
+      dnaLength: 4,
+      patternType: "rawNumber",
+    },
+    {
+      traitName: "ConsoleLog",
+      dobType: "String",
+      dnaOffset: 7,
+      dnaLength: 13,
+      patternType: "utf8",
+    },
+  ];
+
+  /**
+   * Generation example for DOB1
+   */
+  const dob1Pattern: spore.dob.PatternElementDob1[] = [
+    {
+      imageName: "IMAGE.0",
+      svgFields: "attributes",
+      traitName: "",
+      patternType: "raw",
+      traitArgs: "xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'",
+    },
+    {
+      imageName: "IMAGE.0",
+      svgFields: "elements",
+      traitName: "Timestamp",
+      patternType: "options",
+      traitArgs: [
+        [
+          [0, 1000000],
+          "<image width='300' height='200' href='btcfs://b2f4560f17679d3e3fca66209ac425c660d28a252ef72444c3325c6eb0364393i0' />",
+        ],
+        [
+          ["*"],
+          "<image width='300' height='200' btcfs://eb3910b3e32a5ed9460bd0d75168c01ba1b8f00cc0faf83e4d8b67b48ea79676i0 />",
+        ],
+      ],
+    },
+    {
+      imageName: "IMAGE.0",
+      svgFields: "elements",
+      traitName: "BackgroundColor",
+      patternType: "options",
+      traitArgs: [
+        ["red", "<rect width='20' height='20' x='5' y='5' fill='red' />"],
+        ["blud", "<rect width='20' height='20' x='20' y='5' fill='blue' />"],
+        ["green", "<rect width='20' height='20' x='5' y='20' fill='green' />"],
+        [["*"], "<rect width='20' height='20' x='20' y='20' fill='pink' />"],
+      ],
+    },
+    {
+      imageName: "IMAGE.0",
+      svgFields: "elements",
+      traitName: "ConsoleLog",
+      patternType: "options",
+      traitArgs: [
+        [
+          "hello, world!",
+          "<image width='100' height='100' href='ipfs://QmeQ6TfqzsjJCMtYmpbyZeMxiSzQGc6Aqg6NyJTeLYrrJr' />",
+        ],
+        [
+          ["*"],
+          "<image width='100' height='100' href='ipfs://QmYiiN8EXxAnyddatCbXRYzwU9wwAjh21ms4KEJodxg8Fo' />",
+        ],
+      ],
+    },
+  ];
+  const dob1: spore.dob.Dob1 = {
+    description: clusterDescription,
+    dob: {
+      ver: 1,
+      decoders: [
+        {
+          decoder: spore.dob.getDecoder(client, "dob0"),
+          pattern: dob0Pattern,
+        },
+        {
+          decoder: spore.dob.getDecoder(client, "dob1"),
+          pattern: dob1Pattern,
+        },
+      ],
+    },
+  };
+  return spore.dob.encodeClusterDescriptionForDob1(dob1);
+}
+export default function CreateCluster() {
+  const { signer, createSender } = useApp();
+  const { client } = ccc.useCcc();
+  const { log } = createSender("Create Cluster");
+
+  const { explorerTransaction } = useGetExplorerLink();
+
+  const [name, SetName] = useState<string>("");
+  const [description, setDescription] = useState<string>("");
+
+  useEffect(() => {
+    setDescription(
+      JSON.stringify(
+        JSON.parse(generateClusterDescriptionUnderDobProtocol(client)),
+        undefined,
+        2,
+      ),
+    );
+  }, [client]);
+
+  return (
+    <div className="flex w-full flex-col items-stretch">
+      <TextInput
+        label="Name"
+        placeholder="Cluster Name"
+        state={[name, SetName]}
+      />
+      <Textarea
+        label="Description"
+        placeholder="Cluster Description"
+        rows={10}
+        state={[description, setDescription]}
+      />
+
+      <ButtonsPanel>
+        <Button
+          onClick={async () => {
+            if (!signer) return;
+            const { tx, id } = await spore.createSporeCluster({
+              signer,
+
+              data: {
+                name,
+                description: JSON.stringify(JSON.parse(description)),
+              },
+            });
+            await tx.completeFeeBy(signer);
+
+            const txHash = await signer.sendTransaction(tx);
+            log(
+              "Transaction sent:",
+              explorerTransaction(txHash),
+              "Cluster ID:",
+              id,
+            );
+            await signer.client.waitTransaction(txHash);
+            log("Transaction committed:", explorerTransaction(txHash));
+          }}
+        >
+          Create Cluster
+        </Button>
+      </ButtonsPanel>
+    </div>
+  );
+}
diff --git a/packages/demo/src/app/connected/(tools)/MintSpore/page.tsx b/packages/demo/src/app/connected/(tools)/MintSpore/page.tsx
new file mode 100644
index 00000000..40ebb550
--- /dev/null
+++ b/packages/demo/src/app/connected/(tools)/MintSpore/page.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import React, { useCallback, useEffect, useState } from "react";
+import { TextInput } from "@/src/components/Input";
+import { Button } from "@/src/components/Button";
+import { useGetExplorerLink } from "@/src/utils";
+import { useApp } from "@/src/context";
+import { ButtonsPanel } from "@/src/components/ButtonsPanel";
+import { Dropdown } from "@/src/components/Dropdown";
+import { ccc, spore } from "@ckb-ccc/connector-react";
+
+export default function MintSpore() {
+  const { signer, createSender } = useApp();
+  const { log } = createSender("Mint Spore");
+  const { explorerTransaction } = useGetExplorerLink();
+  const [dna, setDna] = useState<string>("");
+  const [clusterId, setClusterId] = useState<string>("");
+  const [clusterList, setClusterList] = useState([
+    {
+      id: "",
+      name: "Mint Without Cluster",
+    },
+  ]);
+
+  const mintSpore = useCallback(async () => {
+    if (!signer) return;
+
+    const content = `{"dna":"${ccc.hexFrom(dna).slice(2)}"}`;
+    // Build transaction
+    const { tx, id } = await spore.createSpore({
+      signer,
+      data: {
+        contentType: "dob/1",
+        content: ccc.bytesFrom(content, "utf8"),
+        clusterId: clusterId === "" ? undefined : clusterId,
+      },
+      clusterMode: clusterId === "" ? "skip" : "clusterCell",
+    });
+    await tx.completeFeeBy(signer);
+
+    const txHash = await signer.sendTransaction(tx);
+    log("Transaction sent:", explorerTransaction(txHash), "Spore ID:", id);
+    await signer.client.waitTransaction(txHash);
+    log("Transaction committed:", explorerTransaction(txHash));
+  }, [signer, log, clusterId, dna, explorerTransaction]);
+
+  useEffect(() => {
+    if (!signer) {
+      return;
+    }
+
+    (async () => {
+      const list = [
+        {
+          id: "",
+          name: "Mint Without Cluster",
+        },
+      ];
+
+      for await (const {
+        cluster,
+        clusterData,
+      } of spore.findSporeClustersBySigner({
+        signer,
+        order: "desc",
+      })) {
+        if (!cluster.cellOutput.type?.args) {
+          continue;
+        }
+
+        list.push({
+          id: cluster.cellOutput.type.args,
+          name: clusterData.name,
+        });
+      }
+
+      setClusterList(list);
+    })();
+  }, [signer]);
+
+  return (
+    <div className="flex w-full flex-col items-stretch">
+      <TextInput label="DNA" placeholder="Spore DNA" state={[dna, setDna]} />
+
+      <label className="mt-4 text-sm">Select a Cluster (optional)</label>
+      <Dropdown
+        className="mt-2"
+        options={clusterList.map((cluster) => ({
+          name: cluster.id,
+          displayName: cluster.name,
+          iconName: "Wheat",
+        }))}
+        selected={clusterId}
+        onSelect={setClusterId}
+      />
+      <ButtonsPanel>
+        <Button onClick={mintSpore}>Mint Spore</Button>
+      </ButtonsPanel>
+    </div>
+  );
+}
diff --git a/packages/demo/src/app/connected/(tools)/TransferCluster/page.tsx b/packages/demo/src/app/connected/(tools)/TransferCluster/page.tsx
new file mode 100644
index 00000000..78acddd3
--- /dev/null
+++ b/packages/demo/src/app/connected/(tools)/TransferCluster/page.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { TextInput } from "@/src/components/Input";
+import { Button } from "@/src/components/Button";
+import { useGetExplorerLink } from "@/src/utils";
+import { useApp } from "@/src/context";
+import { ButtonsPanel } from "@/src/components/ButtonsPanel";
+import { ccc } from "@ckb-ccc/connector-react";
+import { Dropdown } from "@/src/components/Dropdown";
+
+export default function TransferCluster() {
+  const { signer, createSender } = useApp();
+  const { log } = createSender("Transfer Cluster");
+  const { explorerTransaction } = useGetExplorerLink();
+  const [address, setAddress] = useState<string>("");
+  const [clusterId, setClusterId] = useState<string>("");
+
+  const [clusterList, setClusterList] = useState([
+    { id: "", name: "Loading..." },
+  ]);
+
+  useEffect(() => {
+    if (!signer) {
+      return;
+    }
+
+    (async () => {
+      const list = [];
+      for await (const {
+        cluster,
+        clusterData,
+      } of ccc.spore.findSporeClustersBySigner({
+        signer,
+        order: "desc",
+      })) {
+        if (!cluster.cellOutput.type?.args) {
+          continue;
+        }
+
+        list.push({
+          id: cluster.cellOutput.type.args,
+          name: clusterData.name,
+        });
+      }
+      setClusterList(list);
+    })();
+  }, [signer]);
+
+  return (
+    <div className="flex w-full flex-col items-stretch">
+      <TextInput
+        label="Address"
+        placeholder="Receiver address"
+        state={[address, setAddress]}
+      />
+
+      <label className="mt-4 text-sm">Select a Cluster to transfer</label>
+      <Dropdown
+        className="mt-2"
+        options={clusterList.map(({ id, name }) => ({
+          name: id,
+          displayName: name,
+          iconName: "Flower2",
+        }))}
+        selected={clusterId}
+        onSelect={setClusterId}
+      />
+
+      <ButtonsPanel>
+        <Button
+          disabled={clusterId === ""}
+          onClick={async () => {
+            if (!signer || !address || clusterId === "") return;
+            // Create a new owner
+            const { script: to } = await ccc.Address.fromString(
+              address,
+              signer.client,
+            );
+
+            // Build transaction
+            const { tx } = await ccc.spore.transferSporeCluster({
+              signer,
+              id: clusterId,
+              to,
+            });
+            await tx.completeFeeBy(signer);
+
+            const txHash = await signer.sendTransaction(tx);
+            log("Transaction sent:", explorerTransaction(txHash));
+            await signer.client.waitTransaction(txHash);
+            log("Transaction committed:", explorerTransaction(txHash));
+          }}
+        >
+          Transfer Spore
+        </Button>
+      </ButtonsPanel>
+    </div>
+  );
+}
diff --git a/packages/demo/src/app/connected/(tools)/TransferSpore/page.tsx b/packages/demo/src/app/connected/(tools)/TransferSpore/page.tsx
new file mode 100644
index 00000000..d8f4d806
--- /dev/null
+++ b/packages/demo/src/app/connected/(tools)/TransferSpore/page.tsx
@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { TextInput } from "@/src/components/Input";
+import { Button } from "@/src/components/Button";
+import { useGetExplorerLink } from "@/src/utils";
+import { useApp } from "@/src/context";
+import { ButtonsPanel } from "@/src/components/ButtonsPanel";
+import { Dropdown } from "@/src/components/Dropdown";
+import { ccc } from "@ckb-ccc/connector-react";
+
+export default function TransferSpore() {
+  const { signer, createSender } = useApp();
+  const { log } = createSender("Transfer Spore");
+  const { explorerTransaction } = useGetExplorerLink();
+  const [address, setAddress] = useState<string>("");
+  const [sporeId, setSporeId] = useState<string>("");
+
+  const [sporeList, setSporeList] = useState([{ id: "", name: "Loading..." }]);
+
+  useEffect(() => {
+    if (!signer) {
+      return;
+    }
+
+    (async () => {
+      let list = [];
+      for await (const { spore, sporeData } of ccc.spore.findSporesBySigner({
+        signer,
+        order: "desc",
+      })) {
+        if (!spore.cellOutput.type?.args) {
+          continue;
+        }
+
+        if (sporeData.clusterId) {
+          const cluster = await ccc.spore.findCluster(
+            signer.client,
+            sporeData.clusterId,
+          );
+
+          if (cluster) {
+            list.push({
+              id: spore.cellOutput.type.args,
+              name: `${cluster.clusterData.name} ${spore.cellOutput.type.args.slice(10)}`,
+            });
+            continue;
+          }
+        }
+
+        list.push({
+          id: spore.cellOutput.type.args,
+          name: "Public Spore",
+        });
+      }
+      setSporeList(list);
+    })();
+  }, [signer]);
+
+  return (
+    <div className="flex w-full flex-col items-stretch">
+      <TextInput
+        label="Address"
+        placeholder="Receiver address"
+        state={[address, setAddress]}
+      />
+
+      <label className="mt-4 text-sm">Select a Spore to transfer</label>
+      <Dropdown
+        className="mt-2"
+        options={sporeList.map((spore) => ({
+          name: spore.id,
+          displayName: spore.name,
+          iconName: "Flower2",
+        }))}
+        selected={sporeId}
+        onSelect={setSporeId}
+      />
+
+      <ButtonsPanel>
+        <Button
+          disabled={sporeId === ""}
+          onClick={async () => {
+            if (!signer || !address || sporeId === "") {
+              return;
+            }
+            const { script: to } = await ccc.Address.fromString(
+              address,
+              signer.client,
+            );
+
+            // Build transaction
+            const { tx } = await ccc.spore.transferSpore({
+              signer,
+              id: sporeId,
+              to,
+            });
+            await tx.completeFeeBy(signer);
+
+            // Send transaction
+            const txHash = await signer.sendTransaction(tx);
+            log("Transaction sent:", explorerTransaction(txHash));
+            await signer.client.waitTransaction(txHash);
+            log("Transaction committed:", explorerTransaction(txHash));
+          }}
+        >
+          Transfer Spore
+        </Button>
+        <Button
+          className="ml-2"
+          disabled={sporeId === ""}
+          onClick={async () => {
+            if (!signer || sporeId === "") {
+              return;
+            }
+
+            // Build transaction
+            const { tx } = await ccc.spore.meltSpore({
+              signer,
+              id: sporeId,
+            });
+            await tx.completeFeeBy(signer);
+
+            // Send transaction
+            const txHash = await signer.sendTransaction(tx);
+            log("Transaction sent:", explorerTransaction(txHash));
+            await signer.client.waitTransaction(txHash);
+            log("Transaction committed:", explorerTransaction(txHash));
+          }}
+        >
+          Melt Spore
+        </Button>
+      </ButtonsPanel>
+    </div>
+  );
+}
diff --git a/packages/demo/src/app/connected/page.tsx b/packages/demo/src/app/connected/page.tsx
index e1678ea3..af97d1d2 100644
--- a/packages/demo/src/app/connected/page.tsx
+++ b/packages/demo/src/app/connected/page.tsx
@@ -36,6 +36,20 @@ const TABS: [ReactNode, string, keyof typeof icons, string][] = [
   ["Hash", "/utils/Hash", "Barcode", "text-violet-500"],
   ["Mnemonic", "/utils/Mnemonic", "SquareAsterisk", "text-fuchsia-500"],
   ["Keystore", "/utils/Keystore", "Notebook", "text-rose-500"],
+  ["Create Cluster", "/connected/CreateCluster", "Wheat", "text-emerald-500"],
+  ["Mint Spore", "/connected/MintSpore", "Cherry", "text-pink-500"],
+  [
+    "Transfer Spore",
+    "/connected/TransferSpore",
+    "BadgeCent",
+    "text-fuchsia-500",
+  ],
+  [
+    "Transfer Cluster",
+    "/connected/TransferCluster",
+    "BadgeCent",
+    "text-fuchsia-500",
+  ],
 ];
 /* eslint-enable react/jsx-key */
 
diff --git a/packages/spore/src/cluster/index.ts b/packages/spore/src/cluster/index.ts
index 7545f227..1ecab745 100644
--- a/packages/spore/src/cluster/index.ts
+++ b/packages/spore/src/cluster/index.ts
@@ -5,10 +5,9 @@ import {
   prepareSporeTransaction,
 } from "../advanced.js";
 import {
-  ClusterData,
-  ClusterDataV1,
   ClusterDataView,
   packRawClusterData,
+  unpackToRawClusterData,
 } from "../codec/index.js";
 import { findSingletonCellByArgs } from "../helper/index.js";
 import {
@@ -20,20 +19,32 @@ import {
 
 export async function findCluster(
   client: ccc.Client,
-  args: ccc.HexLike,
+  id: ccc.HexLike,
   scripts?: SporeScriptInfoLike[],
 ): Promise<
   | {
       cell: ccc.Cell;
+      cluster: ccc.Cell;
+      clusterData: ClusterDataView;
       scriptInfo: SporeScriptInfo;
     }
   | undefined
 > {
-  return findSingletonCellByArgs(
+  const found = await findSingletonCellByArgs(
     client,
-    args,
+    id,
     scripts ?? Object.values(getClusterScriptInfos(client)),
   );
+  if (!found) {
+    return;
+  }
+
+  return {
+    cell: found.cell,
+    cluster: found.cell,
+    clusterData: unpackToRawClusterData(found.cell.outputData),
+    scriptInfo: found.scriptInfo,
+  };
 }
 
 export async function assertCluster(
@@ -186,46 +197,44 @@ export async function transferSporeCluster(params: {
  * @param order the order in creation time of clusters
  * @param scriptInfos the deployed script infos of clusters
  */
-export async function* findSporeClustersBySigner(params: {
+export async function* findSporeClustersBySigner({
+  signer,
+  order,
+  limit,
+  scriptInfos,
+}: {
   signer: ccc.Signer;
   order?: "asc" | "desc";
+  limit?: number;
   scriptInfos?: SporeScriptInfoLike[];
 }): AsyncGenerator<{
+  cell: ccc.Cell;
   cluster: ccc.Cell;
   clusterData: ClusterDataView;
+  scriptInfo: SporeScriptInfo;
 }> {
-  const { signer, order, scriptInfos } = params;
   for (const scriptInfo of scriptInfos ??
     Object.values(getClusterScriptInfos(signer.client))) {
     if (!scriptInfo) {
       continue;
     }
+
     for await (const cluster of signer.findCells(
       {
         script: {
           ...scriptInfo,
-          args: [],
+          args: "",
         },
       },
       true,
       order,
-      10,
+      limit,
     )) {
-      let clusterData: ClusterDataView;
-      try {
-        clusterData = ClusterData.decode(cluster.outputData);
-      } catch (_) {
-        try {
-          clusterData = ClusterDataV1.decode(cluster.outputData);
-        } catch (e: unknown) {
-          throw new Error(
-            `Cluster data decode failed: ${(e as Error).toString()}`,
-          );
-        }
-      }
       yield {
+        cell: cluster,
         cluster,
-        clusterData,
+        clusterData: unpackToRawClusterData(cluster.outputData),
+        scriptInfo: SporeScriptInfo.from(scriptInfo),
       };
     }
   }
diff --git a/packages/spore/src/spore/index.ts b/packages/spore/src/spore/index.ts
index a861a36d..23904fb1 100644
--- a/packages/spore/src/spore/index.ts
+++ b/packages/spore/src/spore/index.ts
@@ -5,7 +5,11 @@ import {
   assembleTransferSporeAction,
   prepareSporeTransaction,
 } from "../advanced.js";
-import { SporeData, SporeDataView, packRawSporeData } from "../codec/index.js";
+import {
+  SporeDataView,
+  packRawSporeData,
+  unpackToRawSporeData,
+} from "../codec/index.js";
 import { findSingletonCellByArgs } from "../helper/index.js";
 import {
   SporeScriptInfo,
@@ -17,20 +21,32 @@ import { prepareCluster } from "./advanced.js";
 
 export async function findSpore(
   client: ccc.Client,
-  args: ccc.HexLike,
+  id: ccc.HexLike,
   scripts?: SporeScriptInfoLike[],
 ): Promise<
   | {
       cell: ccc.Cell;
+      spore: ccc.Cell;
+      sporeData: SporeDataView;
       scriptInfo: SporeScriptInfo;
     }
   | undefined
 > {
-  return findSingletonCellByArgs(
+  const found = await findSingletonCellByArgs(
     client,
-    args,
+    id,
     scripts ?? Object.values(getSporeScriptInfos(client)),
   );
+  if (!found) {
+    return undefined;
+  }
+
+  return {
+    cell: found.cell,
+    spore: found.cell,
+    sporeData: unpackToRawSporeData(found.cell.outputData),
+    scriptInfo: found.scriptInfo,
+  };
 }
 
 export async function assertSpore(
@@ -235,20 +251,28 @@ export async function meltSpore(params: {
  *
  * @param signer the owner of spores
  * @param order the order in creation time of spores
- * @param clusterId the cluster that spores belong to
+ * @param clusterId the cluster that spores belong to. "" to find public spores
  * @param scriptInfos the deployed script infos of spores
- * @returns speific spore cells
+ * @returns specified spore cells
  */
-export async function* findSporesBySigner(params: {
+export async function* findSporesBySigner({
+  signer,
+  clusterId,
+  scriptInfos,
+  limit,
+  order,
+}: {
   signer: ccc.Signer;
   order?: "asc" | "desc";
+  limit?: number;
   clusterId?: ccc.HexLike;
   scriptInfos?: SporeScriptInfoLike[];
 }): AsyncGenerator<{
+  cell: ccc.Cell;
   spore: ccc.Cell;
   sporeData: SporeDataView;
+  scriptInfo: SporeScriptInfo;
 }> {
-  const { signer, clusterId, scriptInfos, order } = params;
   for (const scriptInfo of scriptInfos ??
     Object.values(getSporeScriptInfos(signer.client))) {
     if (!scriptInfo) {
@@ -263,24 +287,20 @@ export async function* findSporesBySigner(params: {
       },
       true,
       order,
-      10,
+      limit,
     )) {
-      try {
-        const sporeData = SporeData.decode(spore.outputData);
-        if (!clusterId) {
-          yield {
-            spore,
-            sporeData,
-          };
-        }
-        if (sporeData.clusterId === clusterId) {
-          return {
-            spore,
-            sporeData,
-          };
-        }
-      } catch (e: unknown) {
-        throw new Error(`Spore data decode failed: ${(e as Error).toString()}`);
+      const sporeData = unpackToRawSporeData(spore.outputData);
+      if (
+        !clusterId ||
+        (clusterId === "" && !sporeData.clusterId) ||
+        sporeData.clusterId === ccc.hexFrom(clusterId)
+      ) {
+        yield {
+          cell: spore,
+          spore,
+          sporeData,
+          scriptInfo: SporeScriptInfo.from(scriptInfo),
+        };
       }
     }
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a163032e..d4583603 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -334,9 +334,6 @@ importers:
       '@ckb-ccc/lumos-patches':
         specifier: workspace:*
         version: link:../lumos-patches
-      '@ckb-ccc/udt':
-        specifier: workspace:*
-        version: link:../udt
       '@ckb-lumos/ckb-indexer':
         specifier: ^0.24.0-next.1
         version: 0.24.0-next.2