Sign CoTA NFT Transaction

In this guide, we will create and sign a transaction to send a CoTA NFT using the @joyid/ckb SDK signCotaNFTTx() function.

The CoTA (Compact Token Aggregator) protocol is a layer-1.5 account-based non-fungible token and data management solution on Nervos CKB. It manages large data volumes using Sparse Merkle Tree (SMT) encoding. This data is then represented on-chain via a single 32-byte hash, confirming data validity while using very little space. For instance, an unlimited amount of CoTA NFTs can be represented on-chain using just 32 bytes of data per user, leading to significant space savings and consequently lower fees. For additional information on CoTA, please visit the CoTA Developer Portal (opens in a new tab).

To sign a transaction and send a CoTA NFT with the user's JoyID session, complete the following steps.

Step 1: Save the User's JoyID Information

In the connect guide, we established a connection with JoyID and obtained the user's JoyID information. It's essential to retain this information so it can be used in the signing process later on. There are many ways this can be done. Below, we demonstrate two common methods: using a state variable in a React component and employing the Vuex store in a Vue app.

import * as React from 'react';
import { connect } from '@joyid/ckb';
import './style.css';
 
export default function App() {
  const [joyidInfo, setJoyidInfo] = React.useState(null);
 
  const onConnect = async () => {
    try {
      const authData = await connect();
      setJoyidInfo(authData);
      console.log(`JoyID user info:`, authData);
    } catch (error) {
      console.error(error);
    }
  }
 
  return (
    <div>
      <h1>Hello JoyID!</h1>
      <button onClick={onConnect}>Connect JoyID</button>
    </div>
  );
}

Step 2: Claim CoTA NFTs

In order to send a CoTA NFT, you must first have one on your account. The easiest way to get a free NFT on the testnet is to claim one from Freeminter (opens in a new tab).

Once you have claimed an NFT, you can view them on the JoyID Testnet (opens in a new tab) by using the "Collectable" tab.

If you click on any NFT on the Collectible tab, it will take you to the NFT detail page. The below is an example of what a URL will look like for the details page of an NFT.

https://testnet.joyid.dev/nft/ffffffff57b5554a76058639db054c2926965e98fdca66fd00000010

Looking at the last path parameter ffffffff57b5554a76058639db054c2926965e98fdca66fd00000010. This is the TokenKey, which is the unique ID for the CoTA NFT. We will need this TokenKey to send an NFT.

Step 3: Sign a CoTA NFT Transaction

Now that we have established a connection, claimed an NFT, and obtained the TokenKey for that NFT, we are ready to proceed. Using the signCotaNFTTx() function, we'll create and sign a transaction to transfer the NFT. This involves specifying the recipient's address and the amount to be sent, while the sender's address is automatically retrieved from the previously acquired JoyID information.

Note: The code below will create a signed transaction, but it does not broadcast it to the network. To do so you must use an RPC call to a CKB node. For more information on setting up a local node or using a public community node, please visit the Nervos Docs Site (opens in a new tab).

import * as React from 'react';
import { connect, signCotaNFTTx } from '@joyid/ckb';
import './style.css';
 
export default function App() {
  const [joyidInfo, setJoyidInfo] = React.useState(null);
  const [toAddress, setToAddress] = React.useState('ckt1qrfrwcdnvssswdwpn3s9v8fp87emat306ctjwsm3nmlkjg8qyza2cqgqqxv6drphrp47xalweq9pvr6ll3mvkj225quegpcw');
  // The TokenKey prefix `ffffffff` is optional and it is just an example, you should replace real value with your own TokenKey
  const [tokenKey, setTokenKey] = React.useState('0x003688bb1cba009d89dd3f1c8a6027a0c5851e8600000006');
 
  const onConnect = async () => {
    try {
      const authData = await connect();
      setJoyidInfo(authData);
    } catch (error) {
      console.error(error);
    }
  }
 
  const onSign = async () => {
    const signedTx = await signCotaNFTTx({
      to: toAddress,
      from: joyidInfo.address,
      tokenKey,
    });
    console.log('signedTx', signedTx);
    // You can use CKB RPC `sendTransaction` to send the `signedTx` to the blockchain.
  }
  return (
    <div>
      <h1>Hello JoyID!</h1>
      {joyidInfo ? null : <button onClick={onConnect}>Connect JoyID</button>}
      {joyidInfo ? (
        <div>
          <textarea value={toAddress} onChange={e => setToAddress(e.target.value)} />
          <textarea value={tokenKey} onChange={e => setTokenKey(e.target.value)} />
          <button onClick={onSign}>Sign</button>
        </div>
      ) : null}
    </div>
  );
}

Try it Out