Sign CoTA NFT Transaction

Once the connection is complete, we will get the user's JoyID information, such as address, public key, credential, etc. In this guide, we will continue our previous journey in Connect by signing transactions to send CKB CoTA NFT after the connection is complete.

The CoTA (aka. Compact Token Aggregator) protocol is a layer-1.5 account based non-fungible token and k-v data management solution on Nervos CKB. The basic idea of CoTA is to manage and verify enormous number of data by a Sparse Merkle Tree (SMT) with a constant size(like 32 bytes) of on-chain storage space.

You can use @joyid/ckb SDK to sign a transaction to send CoTA NFTs to others.

To sign a transaction with the user's JoyID, we need to do the following steps:

Step 1: Save JoyID info

In the previous guide, we have already connected the user with JoyID, and we have got the user's JoyID information. Now we need to save the user's JoyID information. We can save it in the local storage, or in the state of the React component, or in the Vuex store of the Vue app, etc.

import * as React from 'react'
import { connect } from '@joyid/ckb'
import './style.css'
 
export default function App() {
  const onConnect = async () => {
    try {
      const authData = await connect()
      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

You can connect your JoyID account and claim CoTA NFTs on the CKB Testnet from Freeminter (opens in a new tab) for developing and testing later.

Once the NFTs are claimed to your JoyID account, you can visit NFT list in JoyID App (opens in a new tab). You can click any NFT to visit NFT detail page and the page URL is like this:

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

The last path parameter ffffffff003688bb1cba009d89dd3f1c8a6027a0c5851e860000002e is TokenKey which is unique id for the CoTA NFT.

Step 3: Sign a CoTA NFT Transaction

After the connection is complete, we need to add a button element and listen to the click event. When the user clicks the button, we will call the signTransaction to sign a transaction with the user's JoyID.

If you want to send NFT to others firstly, you must have CoTA cell to manage NFT assets with SMT. In the JoyID web app, you will see an entry to upgrade your account to create CoTA cell for a few minutes.

The entry looks like this:

Click the Upgrade now and then the CoTA cell will be created later automatically.

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