Skip to content

Commit

Permalink
feat:add create spor&cluster,transfer spore,melt spore demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@sfsf332
sfsf332 committed Dec 9, 2024
1 parent b641c71 commit 4c84430
Show file tree
Hide file tree
Showing 4 changed files with 296 additions and 213 deletions.
2 changes: 1 addition & 1 deletion packages/demo/src/app/connected/(tools)/CreateCluster/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useGetExplorerLink } from "@/src/utils";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";
import { createSporeCluster, dob } from "@ckb-ccc/spore";
import { ccc } from "@ckb-ccc/core";
import { ccc } from "@ckb-ccc/connector-react";
function generateClusterDescriptionUnderDobProtocol(
client: ccc.Client,
): string {
Expand Down
230 changes: 122 additions & 108 deletions packages/demo/src/app/connected/(tools)/CreateSpore/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,122 +8,136 @@ import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";
import { Dropdown } from "@/src/components/Dropdown";
import { ccc } from "@ckb-ccc/connector-react";
import { createSpore,findSporesBySigner} from "@ckb-ccc/spore";
import { createSpore, findSporeClustersBySigner } from "@ckb-ccc/spore";

export default function CreateSpore() {
const { signer, createSender } = useApp();
const { log } = createSender("Create Spore");
const { explorerTransaction } = useGetExplorerLink();
const [dnaText, SetDnaText] = useState<string>("");
const [clusterId, setClusterId] = useState<string>("");
const clusterList = [
{
id: ' 0x2e3817f0880af469c657c44fdb4b5bbedad821757df27f9e1f7030b3996ea14b',
name: 'test'
},
{
id: '',
name: 'no Cluster'
}
]
const CreateSporeWithCluster = async () => {
if (!signer) return
const { signer, createSender } = useApp();
const { log } = createSender("Create Spore");
const { explorerTransaction } = useGetExplorerLink();
const [dnaText, SetDnaText] = useState<string>("");
const [clusterId, setClusterId] = useState<string>("");
const [clusterList, setClusterList] = useState([
{
id: "",
name: "no Cluster",
},
]);

const hasher = new ccc.HasherCkb(7);
hasher.update(ccc.bytesFrom(dnaText, "utf8"));
let dna = ccc.bytesFrom(hasher.digest());
dna = ccc.bytesConcat(dna, ccc.bytesFrom(dnaText, "utf8"));
// expect(dna.length === 20);
const hexedDna = ccc.bytesTo(dna, "hex"); // no leading "0x"
const content = `{"dna":"${hexedDna}"}`;

const CreateSporeWithCluster = async () => {
if (!signer) return;

// Build transaction
let { tx, id } = await createSpore({
signer,
data: {
contentType: "dob/1",
content: ccc.bytesFrom(content, "utf8"),
clusterId: clusterId
},
clusterMode: "clusterCell",
});
log("sporeId:", id);
// Complete transaction
await tx.completeFeeBy(signer);
tx = await signer.signTransaction(tx);
const txHash = await signer.sendTransaction(tx);
log("Transaction sent:", explorerTransaction(txHash));
await signer.client.waitTransaction(txHash);
log("Transaction committed:", explorerTransaction(txHash));
const hasher = new ccc.HasherCkb(7);
hasher.update(ccc.bytesFrom(dnaText, "utf8"));
let dna = ccc.bytesFrom(hasher.digest());
dna = ccc.bytesConcat(dna, ccc.bytesFrom(dnaText, "utf8"));
// expect(dna.length === 20);
const hexedDna = ccc.bytesTo(dna, "hex"); // no leading "0x"
const content = `{"dna":"${hexedDna}"}`;
console.log(clusterId)
// Build transaction
let { tx, id } = await createSpore({
signer,
data: {
contentType: "dob/1",
content: ccc.bytesFrom(content, "utf8"),
clusterId: clusterId,
},
clusterMode: "clusterCell",
});
log("sporeId:", id);
// Complete transaction
await tx.completeFeeBy(signer);
tx = await signer.signTransaction(tx);
const txHash = await signer.sendTransaction(tx);
log("Transaction sent:", explorerTransaction(txHash));
await signer.client.waitTransaction(txHash);
log("Transaction committed:", explorerTransaction(txHash));
};
const CreateSporeWithoutCluster = async () => {
if (!signer) return;

}
const CreateSporeWithoutCluster = async () => {
if (!signer) return
// Build transaction
let { tx, id } = await createSpore({
signer,
data: {
contentType: "text/plain",
content: ccc.bytesFrom(dnaText, "utf8"),
},
});
log("sporeId:", id);

// Build transaction
let { tx, id } = await createSpore({
signer,
data: {
contentType: "text/plain",
content: ccc.bytesFrom(dnaText, "utf8"),

},
});
log("sporeId:", id);
// Complete transaction
await tx.completeFeeBy(signer);
tx = await signer.signTransaction(tx);
// Send transaction
const txHash = await signer.sendTransaction(tx);
log("Transaction sent:", explorerTransaction(txHash));
await signer.client.waitTransaction(txHash);
log("Transaction committed:", explorerTransaction(txHash));
};
useEffect(() => {
let synced = false

// Complete transaction
await tx.completeFeeBy(signer);
tx = await signer.signTransaction(tx);
// Send transaction
const txHash = await signer.sendTransaction(tx);
log("Transaction sent:", explorerTransaction(txHash));
await signer.client.waitTransaction(txHash);
log("Transaction committed:", explorerTransaction(txHash));
if (!signer) {
return;
}
useEffect(()=>{

if (!signer) { return }
(async () => {
// Search Cluster cells
console.log(1111)
for await (const spore of findSporesBySigner({ signer, order: "desc" })) {
console.log(spore);
}
})()

},[signer])
return (
<div className="flex w-full flex-col items-stretch">
<TextInput
label="DNA"
placeholder="Spore DNA"
state={[dnaText, SetDnaText]}
/>

<label className="text-sm">Select a Cluster (optional)</label>
{/* <Dropdown
options={clusterList.map((cluster, i) => ({
name: cluster.id,
displayName: cluster.name,
iconName: 'Wheat'
}))}
selected={''}
onSelect={(clusterId) => {
setClusterId(clusterId)
log('Use clusterId', clusterId)
}}
/> */}
<ButtonsPanel>
<Button
className="self-center"
onClick={async () => {
(clusterId.length > 0) ? CreateSporeWithCluster() : CreateSporeWithoutCluster()
(async () => {

// Search Cluster cells
console.log(1111)
let list = [];
for await (const cluster of findSporeClustersBySigner({
signer,
order: "desc",
})) {
if(synced) return
console.log(cluster)
list.push({
id: cluster.cluster.cellOutput.type?.args||'',
name: cluster.clusterData.name,
});
}
setClusterList(prevState => [...prevState, ...list]);
})();
return ()=>{
synced = true
}
}, [signer]);
return (
<div className="flex w-full flex-col items-stretch">
<TextInput
label="DNA"
placeholder="Spore DNA"
state={[dnaText, SetDnaText]}
/>

}}
>
Create Spore
</Button>
</ButtonsPanel>
</div>
);
<label className="text-sm">Select a Cluster (optional)</label>
<Dropdown
options={clusterList.map((cluster, i) => ({
name: cluster.id,
displayName: cluster.name,
iconName: 'Wheat'
}))}
selected={''}
onSelect={(clusterId) => {
setClusterId(clusterId)
log('Use clusterId', clusterId)
}}
/>
<ButtonsPanel>
<Button
className="self-center"
onClick={async () => {
clusterId.length > 0
? CreateSporeWithCluster()
: CreateSporeWithoutCluster();
}}
>
Create Spore
</Button>
</ButtonsPanel>
</div>
);
}
135 changes: 86 additions & 49 deletions packages/demo/src/app/connected/(tools)/MeltSpore/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,55 +6,92 @@ import { Button } from "@/src/components/Button";
import { useGetExplorerLink } from "@/src/utils";
import { useApp } from "@/src/context";
import { ButtonsPanel } from "@/src/components/ButtonsPanel";
import { meltSpore } from "@ckb-ccc/spore";

import { findSporesBySigner, meltSpore } from "@ckb-ccc/spore";
import { Dropdown } from "@/src/components/Dropdown";

export default function MeltSpore() {
const { signer, createSender } = useApp();
const { log } = createSender("Melt Spore");
const { explorerTransaction } = useGetExplorerLink();
const [sporeId, SetSporeId] = useState<string>("");




return (
<div className="flex w-full flex-col items-stretch">

<TextInput
label="Spore ID"
placeholder="Spore Token ID"
state={[sporeId, SetSporeId]}
/>


<ButtonsPanel>
<Button
className="self-center"
onClick={async () => {
if (!signer||!sporeId) return

// Build transaction
let { tx } = await meltSpore({
signer,
// Change this if you have a different sporeId
id: sporeId
});
log('Melt Spore tokenID:',sporeId)
// Complete transaction
await tx.completeFeeBy(signer);
tx = await signer.signTransaction(tx);

// 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>
);
const { signer, createSender } = useApp();
const { log } = createSender("Melt Spore");
const { explorerTransaction } = useGetExplorerLink();
const [sporeId, SetSporeId] = useState<string>("");

const [sporeList, setSporeList] = useState([
{
id: "",
},
]);
useEffect(() => {
let synced = false;

if (!signer) {
return;
}

(async () => {
// Search Cluster cells
let list = [];
for await (const spore of findSporesBySigner({
signer,
order: "desc",
})) {
if (synced) return;
console.log(spore);
list.push({
id: spore.spore.cellOutput.type?.args || "",
});
}
setSporeList((prevState) => [...prevState, ...list]);
})();
return () => {
synced = true;
};
}, [signer]);

return (
<div className="flex w-full flex-col items-stretch">
<label className="text-sm">Select a Spore to melt</label>
<Dropdown
options={sporeList.map((spore, i) => ({
name: spore.id,
displayName: spore.id,
iconName: "Flower2",
}))}
selected={sporeId}
onSelect={(sporeId) => {
SetSporeId(sporeId);
log("Use sporeId", sporeId);
}}
/>



<ButtonsPanel>
<Button
className="self-center"
onClick={async () => {
if (!signer || !sporeId) return;

// Build transaction
let { tx } = await meltSpore({
signer,
// Change this if you have a different sporeId
id: sporeId,
});
log("Melt Spore tokenID:", sporeId);
// Complete transaction
await tx.completeFeeBy(signer);
tx = await signer.signTransaction(tx);

// 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>
);
}
Loading

0 comments on commit 4c84430

Please sign in to comment.