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. The CoTA protocol is used to manage large amounts of data encoded in Sparse Merkle Tree (SMT) and then represented on-chain with a single 32-byte hash which proves data validity. An example of this is that any number of CoTA NFTs can be represented on-chain using only 32-bytes of data per user. This is a huge space savings which results in much lower fees. For more 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 created a connection with JoyID and received the user's JoyID information. Now we need to retain this information so it can be used for signing. There are many ways this can be done, but we will demonstrate this below using a state variable of the React component and the Vuex store of the 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(setJoyidInfo);
      console.log(`JoyID user info:`, authData);
    } catch (error) {
      console.log(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 most easy 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/ffffffff003688bb1cba009d89dd3f1c8a6027a0c5851e860000002e

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

Step 3: Sign a CoTA NFT Transaction

Now that we have created a connection, claimed an NFT, and have the TokenKey for that NFT, we are ready to create and sign a transaction to send it to another address using the signCotaNFTTx() function. We add a couple fields for the required fields, and the sending address is taken from the JoyID information that was returned from connect().

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.log(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