Sign Transaction

In this guide we will create and sign a transaction to send CKB from one address to another using the @joyid/ckb SDK signTransaction() function.

To sign a transaction and send CKB 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.

App.tsx

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: Create and Sign a Transaction

The next step after establishing a connection is to call the signTransaction() function. We add a couple fields for the to address and amount, and the from address is taken from the JoyID information that was returned from connect().

The amount of CKB to send is always specified in a unit of Shannons. There are 100,000,000 Shannons in one CKB. If you do not have any CKB to send, you can claim some testnet CKB from the Nervos Testnet Faucet (opens in a new tab).

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).

App.tsx

import * as React from 'react';
import { connect, signTransaction } from '@joyid/ckb';
import './style.css';
 
export default function App() {
  const [joyidInfo, setJoyidInfo] = React.useState(null);
  const [toAddress, setToAddress] = React.useState('ckt1qrfrwcdnvssswdwpn3s9v8fp87emat306ctjwsm3nmlkjg8qyza2cqgqqxv6drphrp47xalweq9pvr6ll3mvkj225quegpcw');
  const [amount, setAmount] = React.useState('100');
 
  const onConnect = async () => {
    try {
      const authData = await connect();
      setJoyidInfo(authData);
    } catch (error) {
      console.log(error);
    }
  }
 
  const onSign = async () => {
    const signedTx = await signTransaction({
      to: toAddress,
      from: joyidInfo.address,
      amount: BigInt(Number(amount) * 10 ** 8).toString(),
    });
    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={amount} onChange={e => setAmount(e.target.value)} />
          <button onClick={onSign}>Sign</button>
        </div>
      ) : null}
    </div>
  )
}

💡

To learn more about the signTransaction() function, please check the API Reference.

Try it Out

Verify Message Sign Cota NFT Transaction