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

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

The next step after establishing a connection is to call the signTransaction() function. We add a few fields to specify the recipient's address and the amount to be sent, while the sender's address is automatically obtained from the JoyID information retrieved through the connect() function.

The amount of CKB to send is always specified in a unit of Shannons. One CKB is equal to 100,000,000 Shannons. 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.error(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