TITLE: Implementing Wallet Connection Hook with Lumos and Wagmi (TSX)
DESCRIPTION: Defines a React hook `useWallet` to manage wallet connection state, retrieve the connected Ethereum address, derive the corresponding CKB lock script and address using Lumos, fetch the CKB balance, and provide functions for connecting and disconnecting the wallet. It depends on `@ckb-lumos/lumos`, `react`, `wagmi`, and a local `getCapacities` utility.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/create-new-site.mdx#_snippet_0

LANGUAGE: TSX
CODE:
```
import { BI, commons, config, helpers } from '@ckb-lumos/lumos';
import { useEffect, useMemo, useState } from 'react';
import { useAccount, useConnect, useDisconnect } from 'wagmi';
import { InjectedConnector } from 'wagmi/connectors/injected';
import { getCapacities } from '@/utils/balance';

export default function useWallet() {
  const { address: ethAddress, isConnected } = useAccount();
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  });
  const { disconnect } = useDisconnect();
  const [balance, setBalance] = useState<BI | null>(null);

  const lock = useMemo(() => {
    if (!ethAddress) return;

    return commons.omnilock.createOmnilockScript(
      {
        auth: { flag: 'ETHEREUM', content: ethAddress ?? '0x' },
      },
      { config: config.predefined.AGGRON4 },
    );
  }, [ethAddress]);

  const address = useMemo(
    () =>
      lock
        ? helpers.encodeToAddress(lock, {
            config: config.predefined.AGGRON4,
          })
        : undefined,
    [lock],
  );

  useEffect(() => {
    if (!address) {
      return;
    }
    getCapacities(address).then((capacities) => {
      setBalance(capacities.div(10 ** 8));
    });
  }, [address]);

  return {
    address,
    lock,
    balance,
    isConnected,
    connect,
    disconnect,
  };
}
```

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

TITLE: Initializing Wagmi Configuration (TypeScript/TSX)
DESCRIPTION: Include this code in your `src/pages/_app.tsx` file to initialize the Wagmi configuration. It sets up auto-connection and configures a public client using `viem` to interact with the Ethereum mainnet.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/connect-wallet.mdx#_snippet_1

LANGUAGE: TypeScript
CODE:
```
import type { AppProps } from 'next/app';
import { WagmiConfig, createConfig, mainnet } from 'wagmi';
import { createPublicClient, http } from 'viem';

const config = createConfig({
  autoConnect: true,
  publicClient: createPublicClient({
    chain: mainnet,
    transport: http(),
  }),
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig config={config}>
      <Component {...pageProps} />
    </WagmiConfig>
  );
}
```

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

TITLE: Connecting and Displaying MetaMask Address (TypeScript/TSX)
DESCRIPTION: Add this code to your `src/pages/index.tsx` to implement the wallet connection logic. It uses Wagmi hooks to connect to MetaMask via `InjectedConnector`, displays the connected ETH address, and provides buttons for connecting and disconnecting.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/connect-wallet.mdx#_snippet_2

LANGUAGE: TypeScript
CODE:
```
import { useAccount, useConnect, useDisconnect } from 'wagmi';
import { InjectedConnector } from 'wagmi/connectors/injected';

export default function Home() {
  const { address, isConnected } = useAccount();
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  });
  const { disconnect } = useDisconnect();

  return (
    <div>
      <div>{address}</div>
      {isConnected ? (
        <button onClick={() => disconnect()}>Disconnect</button>
      ) : (
        <button onClick={() => connect()}>Connect Wallet</button>
      )}
    </div>
  );
}
```

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

TITLE: Creating Spore Post Transaction with Spore SDK TSX
DESCRIPTION: This snippet defines a React component that handles the creation and publishing of a blog post as a Spore cell. It uses the Spore SDK's `createSpore` function to build the transaction, signs it using a wallet hook, and sends it to the CKB blockchain. The post content (title and body) is saved as a JSON string within the Spore's content field.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/manage-blog-post.mdx#_snippet_0

LANGUAGE: TSX
CODE:
```
import useWallet from '@/hooks/useWallet';
import { signTransaction } from '@/utils/transaction';
import { RPC } from '@ckb-lumos/lumos';
import { createSpore } from '@spore-sdk/core';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { config } from '@/config';

export default function NewPost() {
  const router = useRouter();
  const { id } = router.query;
  const { address, lock, isConnected, connect } = useWallet();
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handlePublishPost = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!address || !lock) return;

    const { txSkeleton } = await createSpore({
      data: {
        content: Buffer.from(JSON.stringify({ title, content })),
        contentType: 'application/json',
        clusterId: id as string,
      },
      fromInfos: [address],
      toLock: lock,
    });
    const tx = await signTransaction(txSkeleton);
    const rpc = new RPC(config.ckbNodeUrl);
    const hash = await rpc.sendTransaction(tx, 'passthrough');
    setTitle('');
    setContent('');
    console.log(hash);
  };

  return (
    <div>
      {isConnected ? (
        <form onSubmit={handlePublishPost}>
          <div>
            <label htmlFor="title">Title: </label>
            <div>
              <input
                type="text"
                id="title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
              />
            </div>
          </div>
          <div>
            <label htmlFor="content">Content</label>
            <div>
              <textarea
                id="content"
                value={content}
                onChange={(e) => setContent(e.target.value)}
              />
            </div>
          </div>
          <button type="submit">Publish</button>
        </form>
      ) : (
        <button onClick={() => connect()}>Connect Wallet</button>
      )}
    </div>
  );
}
```

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

TITLE: Implement CKB Transaction Signing (TypeScript)
DESCRIPTION: Define an asynchronous function `signTransaction` that takes a Lumos transaction skeleton, prepares signing entries, signs messages using wagmi, handles ECDSA recovery ID, and packs the signature into the witness for CKB transactions.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/create-new-site.mdx#_snippet_4

LANGUAGE: tsx
CODE:
```
import { commons, config, helpers } from '@ckb-lumos/lumos';
import { blockchain } from '@ckb-lumos/base';
import { bytes } from '@ckb-lumos/codec';
import { signMessage } from 'wagmi/actions';

export async function signTransaction(
  txSkeleton: helpers.TransactionSkeletonType,
) {
  config.initializeConfig(config.predefined.AGGRON4);
  let tx = commons.omnilock.prepareSigningEntries(txSkeleton);

  const signedWitnesses = new Map<string, string>();
  const signingEntries = tx.get('signingEntries')!;
  for (let i = 0; i < signingEntries.size; i += 1) {
    const entry = signingEntries.get(i)!;
    if (entry.type === 'witness_args_lock') {
      const { message, index } = entry;
      if (signedWitnesses.has(message)) {
        const signedWitness = signedWitnesses.get(message)!;
        tx = tx.update('witnesses', (witnesses) => {
          return witnesses.set(index, signedWitness);
        });
        continue;
      }

      let signature = await signMessage({ message: { raw: message } as any });

      // Fix ECDSA recoveryId v parameter
      // <https://bitcoin.stackexchange.com/questions/38351/ecdsa-v-r-s-what-is-v>
      let v = Number.parseInt(signature.slice(-2), 16);
      if (v >= 27) v -= 27;
      signature = ('0x' +
        signature.slice(2, -2) +
        v.toString(16).padStart(2, '0')) as `0x${string}`;

      const signedWitness = bytes.hexify(
        blockchain.WitnessArgs.pack({
          lock: commons.omnilock.OmnilockWitnessLock.pack({
            signature: bytes.bytify(signature!).buffer,
          }),
        }),
      );
      signedWitnesses.set(message, signedWitness);

      tx = tx.update('witnesses', (witnesses) => {
        return witnesses.set(index, signedWitness);
      });
    }
  }

  const signedTx = helpers.createTransactionFromSkeleton(tx);
  return signedTx;
}
```

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

TITLE: Signing and Sending Spore Transaction (TypeScript)
DESCRIPTION: Shows how to sign and send a prepared transaction skeleton (`txSkeleton`) using the `wallet.signAndSendTransaction` API. This function handles the process of signing the transaction with the wallet's private key and broadcasting it to the CKB network. It returns the transaction hash upon successful submission.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-first-spore/explore-code.md#_snippet_7

LANGUAGE: TypeScript
CODE:
```
const hash: string = await wallet.signAndSendTransaction(txSkeleton);
```

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

TITLE: Creating Default Lock Wallet in TSX
DESCRIPTION: Initializes a Wallet object using the createDefaultLockWallet function, requiring a private key string. This object encapsulates the lock script, address, and signing capabilities needed for CKB transactions.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-first-spore/explore-code.md#_snippet_0

LANGUAGE: tsx
CODE:
```
const wallet: Wallet = createDefaultLockWallet('<prvate_key>');
```

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

TITLE: Generate CKB Address from ETH Address (Lumos)
DESCRIPTION: React/TypeScript code using `wagmi` and `@ckb-lumos/lumos` to connect to an Ethereum wallet, retrieve the ETH address, and use `useMemo` to generate a corresponding CKB address via the Omnilock script.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/connect-wallet.mdx#_snippet_5

LANGUAGE: tsx
CODE:
```
import { useAccount, useConnect, useDisconnect } from 'wagmi';
import { InjectedConnector } from 'wagmi/connectors/injected';
// highlight-start
import { commons, config, helpers } from '@ckb-lumos/lumos';
import { useMemo } from 'react';
// highlight-end

export default function Home() {
	// highlight-next-line
  const { address: ethAddress, isConnected } = useAccount();
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  });
  const { disconnect } = useDisconnect();

	// highlight-start
  const address = useMemo(() => {
    if (!ethAddress) return;

    const lock = commons.omnilock.createOmnilockScript({
      auth: { flag: 'ETHEREUM', content: ethAddress ?? '0x' },
    });
    return helpers.encodeToAddress(lock, { config: config.predefined.AGGRON4 });
  }, [ethAddress]);
	// highlight-end

  return (
    <div>
      <div>{address}</div>
      {isConnected ? (
        <button onClick={() => disconnect()}>Disconnect</button>
      ) : (
        <button onClick={() => connect()}>Connect Wallet</button>
      )}
    </div>
  );
}
```

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

TITLE: Querying and Displaying User Sites (React/TypeScript)
DESCRIPTION: Defines a TypeScript type Site for structuring site data. Adds state to store an array of Site objects. Implements a useEffect hook that fetches "Cluster" cells associated with the connected wallet's lock script using the CKB indexer and Spore SDK, updates the sites state, and renders a list of site names.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/create-new-site.mdx#_snippet_9

LANGUAGE: tsx
CODE:
```
import { Indexer, RPC } from '@ckb-lumos/lumos';
import { useEffect, useState } from 'react';
import { createCluster, unpackToRawClusterData, getSporeScript } from '@spore-sdk/core';
import { signTransaction } from '@/utils/transaction';
import useWallet from '@/hooks/useWallet';
import { config } from '@/config';

export type Site = {
  id: string;
  name: string;
  description: string;
};

export default function Home() {
  const { address, lock, balance, isConnected, connect, disconnect } =
    useWallet();
  const [siteName, setSiteName] = useState('');
  const [siteDescription, setSiteDescription] = useState('');
  const [sites, setSites] = useState<Site[]>([]);

  // ...

  useEffect(() => {
    if (!lock) {
      return;
    }

    (async () => {
      const indexer = new Indexer(config.ckbIndexerUrl);
      const { script } = getSporeScript(config, 'Cluster');
      const collector = indexer.collector({
        type: { ...script, args: '0x' },
        lock,
      });

      const sites = [];
      for await (const cell of collector.collect()) {
        const unpacked = unpackToRawClusterData(cell.data);
        sites.push({
          id: cell.cellOutput.type!.args,
          name: unpacked.name,
          description: unpacked.description,
        });
      }
      setSites(sites);
    })();
  }, [lock]);

  // ...

return (
    <div>
      <div>
        <div>CKB Address: {address}</div>
        <div>Balance: {balance?.toNumber() ?? 0} CKB</div>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
      <div>
        <h2>Create Site</h2>
        <form onSubmit={handleCreateSite}>
          <div>
            <label htmlFor="name">Name: </label>
            <input
              type="text"
              id="name"
              value={siteName}
              onChange={(e) => setSiteName(e.target.value)}
            />
          </div>
          <div>
            <label htmlFor="description">Description: </label>
            <input
              type="text"
              id="description"
              value={siteDescription}
              onChange={(e) => setSiteDescription(e.target.value)}
            />
          </div>
          <button type="submit">Create</button>
        </form>
      </div>

      <div>
        <h2>My Sites</h2>
        <ul>
          {sites.map((site) => (
            <li key={site.id}>{site.name}</li>
          ))}
        </ul>
      </div>

    </div>
  );
}
```

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

TITLE: Constructing Create Spore Transaction in TSX
DESCRIPTION: Calls the createSpore API from the spore-sdk to build a transaction skeleton for creating a new spore. It requires spore data (content type and content), the recipient's lock script, and the sender's address information.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-first-spore/explore-code.md#_snippet_4

LANGUAGE: tsx
CODE:
```
const { txSkeleton, outputIndex } = await createSpore({
  data: {
    contentType: 'image/jpeg',
    content: await fetchLocalFile('./image.jpg'),
  },
  toLock: wallet.lock,
  fromInfos: [wallet.address],
});
```

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

TITLE: Preparing Spore Transaction for Signing (TypeScript)
DESCRIPTION: Illustrates the initial steps required to prepare a transaction skeleton (`txSkeleton`) for signing, specifically for the SECP256K1_BLAKE160 lock script. It involves getting the Spore configuration, accessing the script details, and using `prepareSigningEntries` to generate the messages that need to be signed by the wallet. This is a prerequisite step before the actual signing.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-first-spore/explore-code.md#_snippet_8

LANGUAGE: TypeScript
CODE:
```
import { SporeConfig, getSporeConfig } from '@spore-sdk/core';

// Generate messages to be signed
const config: SporeConfig = getSporeConfig();
const Secp256k1Blake160 = config.lumos.SCRIPTS['SECP256K1_BLAKE160']!;
txSkeleton = secp256k1Blake160.prepareSigningEntries(txSkeleton, { config: config.lumos });

// Sign transaction messages with private key from the `wallet`
txSkeleton = wallet.signTransaction(txSkeleton);
```

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

TITLE: Fetching and Displaying Site Info and Posts using Spore SDK
DESCRIPTION: This code snippet, located in `src/pages/site/[id].tsx`, fetches site information (Cluster data) and associated blog posts (Spore data) using the CKB Indexer and Spore SDK. It filters Spore by `contentType` ('application/json') and `clusterId`, parses the content as JSON to extract title and content, and updates the component's state to display the site details and a list of post titles as links.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/manage-blog-post.mdx#_snippet_3

LANGUAGE: TSX
CODE:
```
import useWallet from '@/hooks/useWallet';
import { Indexer } from '@ckb-lumos/lumos';
  // highlight-start
import {
  getSporeScript,
  bufferToRawString,
  unpackToRawClusterData,
  unpackToRawSporeData,
} from '@spore-sdk/core';
  // highlight-end
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { Site } from '..';
import { config } from '@/config';
// highlight-start
import Link from 'next/link';

export type Post = {
  id: string;
  title: string;
  content: string;
};
// highlight-end

export default function SitePage() {
  const router = useRouter();
  const { id } = router.query;
  const { lock, isConnected, connect } = useWallet();
  const [siteInfo, setSiteInfo] = useState<Site>();
	// highlight-next-line
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => {
    if (!id) {
      return;
    }

    (async () => {
      const indexer = new Indexer(config.ckbIndexerUrl);
      const { script } = getSporeScript(config, 'Cluster');
      const collector = indexer.collector({
        type: { ...script, args: id as string },
      });

      for await (const cell of collector.collect()) {
        const unpacked = unpackToRawClusterData(cell.data);
        setSiteInfo({
          id: cell.cellOutput.type!.args,
          name: unpacked.name,
          description: unpacked.description,
        });
      }
    })();

		// highlight-start
    (async () => {
      const indexer = new Indexer(config.ckbIndexerUrl);
      const { script } = getSporeScript(config, 'Spore');
      const collector = indexer.collector({
        type: { ...script, args: '0x' },
        lock,
      });

      const posts = [];
      for await (const cell of collector.collect()) {
        const unpacked = unpackToRawSporeData(cell.data);
        const { contentType } = unpacked;

        if (contentType !== 'application/json' || unpacked.clusterId !== id) {
          continue;
        }

        const { title, content } =
          JSON.parse(bufferToRawString(unpacked.content)) ?? {};
        if (title && content) {
          posts.push({
            id: cell.cellOutput.type!.args,
            title,
            content,
          });
        }
      }
      setPosts(posts);
    })();
		// highlight-end
  }, [id, lock]);

  // ...

  return (
    <div>
      <h1>{siteInfo?.name}</h1>
      <p>{siteInfo?.description}</p>
      {isConnected ? (
        <button onClick={() => router.push(`/post/new?id=${id}`)}>
          Add Post
        </button>
      ) : (
        <button onClick={() => connect()}>Connect Wallet</button>
      )}
			{/* highlight-start */}
      <div>
        <h2>Posts</h2>
        <ul>
          {posts.map((post) => (
            <li key={post.id}>
              <Link href={`/post/${post.id}`}>{post.title}</Link>
            </li>
          ))}
        </ul>
      </div>
			{/* highlight-end */}
    </div>
  );
}
```

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

TITLE: Handle Spore Cluster Creation (TypeScript)
DESCRIPTION: Implement an asynchronous function `handleCreateSite` that uses `createCluster` to build a transaction skeleton for creating a Spore Cluster, signs it using the custom `signTransaction` function, and sends the signed transaction to the CKB RPC node.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/create-new-site.mdx#_snippet_7

LANGUAGE: tsx
CODE:
```
export default function Home() {
  // ...

	// highlight-start
  const handleCreateSite = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!address || !lock) return;

    const { txSkeleton } = await createCluster({
      data: {
        name: siteName,
        description: siteDescription,
      },
      fromInfos: [address],
      toLock: lock,
    });
    const tx = await signTransaction(txSkeleton);
    const rpc = new RPC(config.ckbNodeUrl);
    const hash = await rpc.sendTransaction(tx, 'passthrough');
    console.log(hash);
  };
	// highlight-end


  return (
    <div>
     // ...
    </div>
  );
}
```

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

TITLE: Transferring Spore with spore-sdk (TSX)
DESCRIPTION: Initiates the transfer of a Spore to a new owner using the `transferSpore` function from `@spore-sdk/core`. It requires the `outPoint` of the Spore to be transferred and the `toLock` script of the recipient. The function returns a transaction skeleton that needs to be signed and sent to the network.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Transfer/transfer-spore.mdx#_snippet_0

LANGUAGE: tsx
CODE:
```
import { transferSpore } from '@spore-sdk/core';

let { txSkeleton } = await transferSpore({
  outPoint: {
    txHash: '0x<transaction_hash>',
    index: '0x0',
  },
  toLock: RECEIVER_LOCK_SCRIPT,
});
```

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

TITLE: Constructing Spore Creation Transaction (TypeScript)
DESCRIPTION: Demonstrates calling the `createSpore` API to construct a transaction skeleton for minting a new Spore. It includes setting the `data` field with `contentType` ('image/jpeg') and `content` (obtained from `fetchLocalFile`), specifying the owner's lock script in `toLock`, and listing sponsor addresses in `fromInfos` to cover storage and fees. The API returns a `txSkeleton` and the `outputIndex` of the new Spore cell.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-first-spore/explore-code.md#_snippet_6

LANGUAGE: TypeScript
CODE:
```
const { txSkeleton, outputIndex } = await createSpore({
  data: {
    contentType: 'image/jpeg',
    content: await fetchLocalFile('./image.jpg'),
  },
  toLock: wallet.lock,
  fromInfos: [wallet.address],
});
```

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

TITLE: Creating a Spore with spore-sdk (TSX)
DESCRIPTION: Demonstrates the basic usage of the `createSpore` function from `@spore-sdk/core` to construct a transaction skeleton for creating a spore. It requires specifying the spore's content data, the owner's lock script, and the sponsor's addresses for capacity.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Create/create-spore.mdx#_snippet_0

LANGUAGE: tsx
CODE:
```
import { createSpore } from '@spore-sdk/core';

let { txSkeleton } = await createSpore({
  data: {
    contentType: CONTENT_MIME_TYPE,
    content: CONTENT_AS_BYTES,
  },
  toLock: OWNER_LOCK,
  fromInfos: [SPONSOR_ADDRESS],
});
```

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

TITLE: Initializing Blog Site Homepage with Spore SDK (TypeScript)
DESCRIPTION: This code defines a Next.js page component that fetches and displays details for a specific blog site (represented by a Spore Cluster). It uses the router to get the site ID, queries the CKB indexer for the corresponding Cluster cell using the Spore SDK, unpacks the data, and updates the component state to display the site's name and description. It also includes basic wallet connection logic.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/create-new-site.mdx#_snippet_10

LANGUAGE: TypeScript
CODE:
```
import useWallet from '@/hooks/useWallet';
import { Indexer } from '@ckb-lumos/lumos';
import { getSporeScript, unpackToRawClusterData } from '@spore-sdk/core';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { Site } from '..';
import { config } from '@/config';

export default function SitePage() {
  const router = useRouter();
  const { id } = router.query;
  const { lock, isConnected, connect } = useWallet();
  const [siteInfo, setSiteInfo] = useState<Site>();

  useEffect(() => {
    if (!id) {
      return;
    }

    (async () => {
      const indexer = new Indexer(config.ckbIndexerUrl);
      const { script } = getSporeScript(config, 'Cluster');
      const collector = indexer.collector({
        type: { ...script, args: id as string },
      });

      for await (const cell of collector.collect()) {
        const unpacked = unpackToRawClusterData(cell.data);
        setSiteInfo({
          id: cell.cellOutput.type!.args,
          name: unpacked.name,
          description: unpacked.description,
        });
      }
    })();
  }, [id, lock]);

  return (
    <div>
      <h1>{siteInfo?.name}</h1>
      <p>{siteInfo?.description}</p>
      {isConnected ? (
        <button>Add Post</button>
      ) : (
        <button onClick={() => connect()}>Connect Wallet</button>
      )}
      <div></div>
    </div>
  );
}
```

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

TITLE: Install Spore SDK with npm (Shell)
DESCRIPTION: Installs the Spore SDK core package using the npm package manager. This command downloads the necessary dependencies and makes the SDK available in your project.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/resources/spore-sdk.mdx#_snippet_0

LANGUAGE: shell
CODE:
```
npm i @spore-sdk/core
```

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

TITLE: Set up CKB Balance Query Utility
DESCRIPTION: This snippet creates a utility function `getCapacities` in `src/utils/balance.ts` to query the CKB balance for a given address on the Nervos CKB testnet using @ckb-lumos/lumos. It initializes the indexer, sets up a collector for the address, and sums the capacities of the collected cells.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/connect-wallet.mdx#_snippet_7

LANGUAGE: tsx
CODE:
```
import { Indexer, config, BI, helpers } from '@ckb-lumos/lumos';

const CKB_RPC_URL = 'https://testnet.ckb.dev/rpc';
const CKB_INDEXER_URL = 'https://testnet.ckb.dev/indexer';

const indexer = new Indexer(CKB_INDEXER_URL, CKB_RPC_URL);

export async function getCapacities(address: string): Promise<BI> {
  config.initializeConfig(config.predefined.AGGRON4);
  const collector = indexer.collector({
    lock: helpers.parseAddress(address),
		type: 'empty',
		data: '0x',
  });

  let capacities = BI.from(0);
  for await (const cell of collector.collect()) {
    capacities = capacities.add(cell.cellOutput.capacity);
  }

  return capacities;
}
```

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

TITLE: Create Clustered Spore with Cluster Agent using spore-sdk TypeScript
DESCRIPTION: This snippet shows how to create a Spore and link it to a Cluster by referencing a `ClusterAgent` via its `outPoint`. It calls the `createSpore` function from `@spore-sdk/core`. Key parameters are `data` (including `contentType`, `content`, and `clusterId`), `clusterAgentOutPoint` (the OutPoint of the Cluster Agent cell), `toLock` (owner's lock), and `fromInfos` (sponsor addresses). It returns a transaction skeleton and the output index.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Create/create-clustered-spore.mdx#_snippet_1

LANGUAGE: tsx
CODE:
```
import { createSpore } from '@spore-sdk/core';

let { txSkeleton, outputIndex } = await createSpore({
  data: {
    contentType: CONTENT_MIME_TYPE,
    content: CONTENT_AS_BYTES,
    clusterId: CLUSTER_ID,
  },
  // highlight-next-line
  clusterAgentOutPoint,
  toLock: OWNER_LOCK,
  fromInfos: [SPONSOR_ADDRESS],
});
```

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

TITLE: Create Next.js Page to Display Spore Post (TypeScript/React)
DESCRIPTION: Implements a Next.js dynamic route page ([id].tsx) that fetches a Spore Cell by its ID from the URL, unpacks and parses its JSON content (title, content), and renders the title and Markdown content using react-remark. It uses Lumos Indexer to find the cell.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/manage-blog-post.mdx#_snippet_5

LANGUAGE: typescript
CODE:
```
import { Indexer } from '@ckb-lumos/lumos';
import {
  SporeData,
  bufferToRawString,
  getSporeScript,
} from '@spore-sdk/core';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { useRemark } from 'react-remark';
import { Post } from '../site/[id]';
import { config } from '@/config';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;
  const [post, setPost] = useState<Post>();
  const [reactContent, setMarkdownSource] = useRemark();

  useEffect(() => {
    if (!id) {
      return;
    }

    (async () => {
      const indexer = new Indexer(config.ckbIndexerUrl);
      const { script } = getSporeScript(config, 'Spore');
      const collector = indexer.collector({
        type: { ...script, args: id as string },
      });

      for await (const cell of collector.collect()) {
        const unpacked = SporeData.unpack(cell.data);

        const { title, content } =
          JSON.parse(bufferToRawString(unpacked.content)) ?? {};
        if (title && content) {
          setPost({
            id: cell.cellOutput.type!.args,
				outPoint: cell.outPoint!,
            title,
            content,
          });
          return;
        }
      }
    })();
  }, [id]);

  useEffect(() => {
    setMarkdownSource(post?.content ?? '');
  }, [post, setMarkdownSource]);

  return (
    <div>
      <h1>{post?.title}</h1>
      <div style={{ width: '600px' }}>{reactContent}</div>
    </div>
  );
}
```

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

TITLE: Encoding SporeData with @spore-sdk/core (TSX)
DESCRIPTION: Demonstrates how to use `packRawSporeData` from `@spore-sdk/core` to serialize a JSON object representing SporeData into a binary `Uint8Array`. It requires the content to be bytified using `bytifyRawString` before packing.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Data/handle-spore-data.md#_snippet_0

LANGUAGE: tsx
CODE:
```
import { packRawSporeData, bytifyRawString } from '@spore-sdk/core';

const packed = packRawSporeData({
  contentType: 'text/plain',
  content: bytifyRawString('testing plain string'),
  clusterId: '0x21a30f2b2f4927dbd6fd3917990af0dbb868438f44184e84d515f9af84ae4861'
});
```

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

TITLE: Decoding SporeData with @spore-sdk/core (TSX)
DESCRIPTION: Demonstrates how to use `unpackToRawSporeData` from `@spore-sdk/core` to deserialize a hex string or byte array back into a JSON object structure representing the raw SporeData.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Data/handle-spore-data.md#_snippet_3

LANGUAGE: tsx
CODE:
```
import { unpackToRawSporeData, bytifyRawString } from '@spore-sdk/core';

const data = unpackToRawSporeData('0x58000000100000001e000000340000000a000000746578742f706c61696e1200000074657374696e6720706c61696e20746578742000000021a30f2b2f4927dbd6fd3917990af0dbb868438f44184e84d515f9af84ae4861');
```

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

TITLE: Integrate and Display CKB Balance in React
DESCRIPTION: This snippet demonstrates how to use the `getCapacities` function within a React component (`src/pages/index.tsx`) to fetch and display the CKB balance. It uses wagmi to connect a wallet, derives the CKB address from the connected Ethereum address using Omnilock, fetches the balance using `useEffect`, and displays the address and balance (converted from shannons to CKB) on the page.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/connect-wallet.mdx#_snippet_8

LANGUAGE: tsx
CODE:
```
import { useAccount, useConnect, useDisconnect } from 'wagmi';
import { InjectedConnector } from 'wagmi/connectors/injected';
// highlight-start
import { BI, commons, config, helpers } from '@ckb-lumos/lumos';
import { useEffect, useMemo, useState } from 'react';
import { getCapacities } from '../utils/balance';
// highlight-end

export default function Home() {
  const { address: ethAddress, isConnected } = useAccount();
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  });
  const { disconnect } = useDisconnect();
	// highlight-next-line
  const [balance, setBalance] = useState<BI | null>(null);

  const address = useMemo(() => {
    if (!ethAddress) return;

    const lock = commons.omnilock.createOmnilockScript({
      auth: { flag: 'ETHEREUM', content: ethAddress ?? '0x' },
    });
    return helpers.encodeToAddress(lock, { config: config.predefined.AGGRON4 });
  }, [ethAddress]);

	// highlight-start
  useEffect(() => {
    if (!address) {
      return;
    }
    getCapacities(address).then((capacities) => {
      setBalance(capacities.div(10 ** 8));
    });
  }, [address]);

  return (
    <div>
      {isConnected ? (
        <div>
          <div>CKB Address: {address}</div>
          <div>Balance: {balance?.toNumber() ?? 0} CKB</div>
          <button onClick={() => disconnect()}>Disconnect</button>
        </div>
      ) : (
        <button onClick={() => connect()}>Connect Wallet</button>
      )}
    </div>
  );
	// highlight-end
}
```

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

TITLE: Decode ClusterData Bytes using spore-sdk TypeScript
DESCRIPTION: Illustrates how to convert binary bytes or a hexadecimal string representing ClusterData back into a JavaScript object using the `unpackToRawClusterData` function from `@spore-sdk/core`. It takes a hex string as input.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Data/handle-cluster-data.md#_snippet_2

LANGUAGE: TypeScript
CODE:
```
import { unpackToRawClusterData } from '@spore-sdk/core';

const data = unpackToRawSporeData('0x3a0000000c0000001c0000000c000000636c7573746572206e616d651a0000006465736372697074696f6e206f662074686520636c7573746572');
```

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

TITLE: Converting Decoded Content Hex to String (TSX)
DESCRIPTION: Uses `bufferToRawString` from `@spore-sdk/core` to convert the hexadecimal string representation of the content within the decoded SporeData object back into its original plain text string format.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Data/handle-spore-data.md#_snippet_5

LANGUAGE: tsx
CODE:
```
import { bufferToRawString } from '@spore-sdk/core';

console.log(bufferToRawString(data.content));
// testing plain string
```

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

TITLE: Create Clustered Spore with Cluster ID using spore-sdk TypeScript
DESCRIPTION: This snippet demonstrates how to create a Spore and associate it with a Cluster by providing the Cluster ID directly in the `data` object. It uses the `createSpore` function from `@spore-sdk/core`. Required parameters include `data` (with `contentType`, `content`, and `clusterId`), `toLock` (the owner's lock script), and `fromInfos` (sponsor addresses). It returns a transaction skeleton.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Create/create-clustered-spore.mdx#_snippet_0

LANGUAGE: tsx
CODE:
```
import { createSpore } from '@spore-sdk/core';

let { txSkeleton } = await createSpore({
  data: {
    contentType: CONTENT_MIME_TYPE,
    content: CONTENT_AS_BYTES,
    // highlight-next-line
    clusterId: CLUSTER_ID,
  },
  toLock: OWNER_LOCK,
  fromInfos: [SPONSOR_ADDRESS],
});
```

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

TITLE: Generating CKB Default Lock Script and Address (TypeScript)
DESCRIPTION: Configures Lumos with a predefined network config (Aggron4), defines a standard SECP256K1_BLAKE160 lock script using the generated Blake160 hash, and encodes it into a standard CKB address.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Create/create-public-cluster.mdx#_snippet_2

LANGUAGE: TypeScript
CODE:
```
const config = predefinedSporeConfig.Aggron4;
const Secp256k1Blake160 = config.lumos.SCRIPTS.SECP256K1_BLAKE160!;

const ownerLock: Script = {
  codeHash: Secp256k1Blake160.CODE_HASH,
  hashType: Secp256k1Blake160.HASH_TYPE,
  args: blake160,
};
const ownerLockAddress: string = helpers.encodeToAddress(ownerLock, {
  config: config.lumos,
});
```

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

TITLE: Implementing Spore Post Deletion Logic (TSX)
DESCRIPTION: This snippet implements the `handlePostDelete` asynchronous function. It finds the post by ID, retrieves its `outPoint`, uses `meltSpore` from the Spore SDK to create a transaction skeleton for deleting the Spore cell, signs the transaction, sends it to the CKB network, and then refetches the posts after a short delay. It also includes necessary imports and updates the `Post` type to include `outPoint`.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-on-chain-blog/manage-blog-post.mdx#_snippet_7

LANGUAGE: TSX
CODE:
```
import useWallet from '@/hooks/useWallet';
	
import { Indexer, OutPoint, RPC } from '@ckb-lumos/lumos';
import {
  meltSpore,
  getSporeScript,
  bufferToRawString,
  unpackToRawClusterData,
  unpackToRawSporeData,
} from '@spore-sdk/core';
	
import { useRouter } from 'next/router';
    
import { useCallback, useEffect, useState } from 'react';
import { Site } from '..';
import { config } from '@/config';
	
import Link from 'next/link';
import { signTransaction } from '@/utils/transaction';
	

export type Post = {
  id: string;
  title: string;
  content: string;

  outPoint: OutPoint;
};

export default function SitePage() {
  const router = useRouter();
  const { id } = router.query;
  const { lock, isConnected, connect } = useWallet();
  const [siteInfo, setSiteInfo] = useState<Site>();
  const [posts, setPosts] = useState<Post[]>([]);
  const { address } = useWallet();

    
  const fetchPosts = useCallback(async () => {
    const indexer = new Indexer(config.ckbIndexerUrl);
    const { script } = getSporeScript(config, 'Spore');
    const collector = indexer.collector({
      type: { ...script, args: '0x' },
      lock,
    });

    const posts = [];
    for await (const cell of collector.collect()) {
      const unpacked = unpackToRawSporeData(cell.data);
      const { contentType } = unpacked;

      if (contentType !== 'application/json' || unpacked.clusterId !== id) {
        continue;
      }

      const { title, content } =
        JSON.parse(bufferToRawString(unpacked.content)) ?? {};
      if (title && content) {
        posts.push({
          id: cell.cellOutput.type!.args,
          title,
          content,
          outPoint: cell.outPoint!,
        });
      }
    }
    setPosts(posts);
  }, [id, lock]);
    

  useEffect(() => {
    if (!id) {
      return;
    }

    (async () => {
      const indexer = new Indexer(config.ckbIndexerUrl);
      const { script } = getSporeScript(config, 'Cluster');
      const collector = indexer.collector({
        type: { ...script, args: id as string },
      });

      for await (const cell of collector.collect()) {
        const unpacked = unpackToRawClusterData(cell.data);
        setSiteInfo({
          id: cell.cellOutput.type!.args,
          name: unpacked.name,
          description: unpacked.description,
        });
      }
    })();
    
    fetchPosts();
  }, [id, lock, fetchPosts]);

    
  const handlePostDelete = async (id: string) => {
    if (!address) return;

    const post = posts.find((post) => post.id === id);
    if (!post) return;

    const { txSkeleton } = await meltSpore({
      outPoint: post.outPoint,
      fromInfos: [address],
    });
    const tx = await signTransaction(txSkeleton);
    const rpc = new RPC(config.ckbNodeUrl);
    const hash = await rpc.sendTransaction(tx, 'passthrough');
    setTimeout(() => fetchPosts(), 1000);
    console.log(hash);
  };
    

  return ...
}
```

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

TITLE: Creating DOB Spore using Spore SDK (TSX)
DESCRIPTION: This snippet shows how to create a Spore with the `content_type` set to `dob/0`, linking it to a previously created DOB cluster. It defines the DOB content (e.g., DNA) and uses the `createSpore` function from `@spore-sdk/api`. The function requires the Spore data, sender information, recipient lock, and the cluster ID, returning a transaction skeleton and output index for signing.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/dob/Introduction.mdx#_snippet_1

LANGUAGE: tsx
CODE:
```
import { createSpore } from '@spore-sdk/api';
import { bytifyRawString } from '@spore-sdk/helpers/buffer';

const account = ...;
const dob_cluster_id = ...;
const dob_content = {
  dna: 'df4ffcb5e7a283ea7e6f09a504d0e256'
};

const { txSkeleton, outputIndex } = await createSpore({
  data: {
    contentType: 'dob/0',
    content: bytifyRawString(JSON.strinify(dob_content)),
    clusterId: dob_cluster_id
  },
  fromInfos: [account.address],
  toLock: account.lock
});

// sign for txSkeleton
```

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

TITLE: Minting DOB with Spore SDK (JavaScript)
DESCRIPTION: Illustrates the process of minting a Spore (acting as a DOB) using the Spore SDK `createSpore` function, specifying the 'dob/0' content type, embedding the DNA in the content field, and linking it to a pre-configured DOB cluster.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/dob/dob0-protocol.md#_snippet_4

LANGUAGE: jsx
CODE:
```
import { createSpore } from '@spore-sdk/api';
import { bytifyRawString } from '@spore-sdk/helpers/buffer';

const account = ...;
const dob_cluster_id = ...;
const dob_content = {
  dna: 'df4ffcb5e7a283ea7e6f09a504d0e256'
};

const { txSkeleton, outputIndex } = await createSpore({
  data: {
    content_type: 'dob/0',
    content: bytifyRawString(JSON.strinify(dob_content)),
    cluster_id: dob_cluster_id
  },
  fromInfos: [account.address],
  toLock: account.lock
});

// sign for txSkeleton
```

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

TITLE: Creating Private Cluster with spore-sdk (TSX)
DESCRIPTION: Demonstrates the usage of the `createCluster` function from `@spore-sdk/core` to construct the transaction skeleton for creating a private cluster. It requires specifying the cluster's data (name, description), the owner's lock script (`toLock`), and the addresses providing capacity (`fromInfos`). This snippet covers the transaction construction phase.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Create/create-private-cluster.mdx#_snippet_0

LANGUAGE: tsx
CODE:
```
import { createCluster } from '@spore-sdk/core';

let { txSkeleton } = await createCluster({
  data: {
    name: 'Name of the cluster',
    description: 'Description of the cluster',
  },
  toLock: OWNER_LOCK,
  fromInfos: [SPONSOR_ADDRESS],
});
```

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

TITLE: Viewing CKB Transaction on Explorer (URL)
DESCRIPTION: This is a URL pattern used to view a specific CKB transaction on the Pudge block explorer. Replace `{hash}` with the actual transaction hash returned after sending the transaction to see its details and confirmation status.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-first-spore/explore-code.md#_snippet_10

LANGUAGE: URL
CODE:
```
https://pudge.explorer.nervos.org/transaction/{hash}
```

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

TITLE: Encode Raw ClusterData using spore-sdk TypeScript
DESCRIPTION: Demonstrates how to convert a JavaScript object representing Raw ClusterData into binary bytes using the `packRawClusterData` function from `@spore-sdk/core`. It takes an object with `name` and `description` properties.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Data/handle-cluster-data.md#_snippet_0

LANGUAGE: TypeScript
CODE:
```
import { packRawClusterData } from '@spore-sdk/core';

const packed = packRawSporeData({
  name: 'cluster name',
  description: 'description of the cluster',
});
```

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

TITLE: Generating CKB Default Lock Script in TSX
DESCRIPTION: Constructs the Secp256k1Blake160 lock script for the wallet. It retrieves the script configuration, sets the code hash and hash type, and generates the args from the private key's Blake160 hash.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-first-spore/explore-code.md#_snippet_2

LANGUAGE: tsx
CODE:
```
import { getSporeConfig } from '@sproe-sdk/core';

const config = getSporeConfig();
const Secp256k1Blake160 = config.lumos.SCRIPTS['SECP256K1_BLAKE160']!;
const lock: Script = {
  codeHash: Secp256k1Blake160.CODE_HASH,
  hashType: Secp256k1Blake160.HASH_TYPE,
  args: hd.key.privateKeyToBlake160(privateKey),
};
```

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

TITLE: Generating CKB Address from Lock Script in TSX
DESCRIPTION: Converts the generated lock script into a human-readable CKB address string. It uses the helpers.encodeToAddress method from the @ckb-lumos/lumos library, requiring the lock script and Lumos configuration.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/tutorials/create-first-spore/explore-code.md#_snippet_3

LANGUAGE: tsx
CODE:
```
import { helpers } from '@ckb-lumos/lumos';

const address: string = helpers.encodeToAddress(lock, {
  config: config.lumos,
});
```

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

TITLE: Define Owner Lock Script and Address (Omnilock)
DESCRIPTION: Configures the Lumos environment for Aggron4, retrieves the Omnilock script definition, and constructs the owner's Omnilock script using the derived Blake160 hash. It then encodes this script into a CKB address.
SOURCE: https://github.com/sporeprotocol/spore-docs/blob/main/docs/recipes/Create/create-public-cluster.mdx#_snippet_8

LANGUAGE: TypeScript
CODE:
```
const config = predefinedSporeConfig.Aggron4;
const Omnilock = config.lumos.SCRIPTS.OMNILOCK!;

const ownerLock: Script = {
  codeHash: Omnilock.CODE_HASH,
  hashType: Omnilock.HASH_TYPE,
  args: `0x00${blake160}`,
};
const ownerLockAddress: string = helpers.encodeToAddress(ownerLock, {
  config: config.lumos,
});
```