Sign Raw Transaction

In this guide, we will create and sign a ckb raw transaction using the @joyid/ckb SDK signRawTransaction() function.

Installation

npm install @joyid/ckb

Initialization

Before writing business code, you can call the initialization function initConfig on the project entry file:

The joyidAppURL parameter of initConfig() is the JoyID App URL that your app will connect to.

Testnet: https://testnet.joyid.dev (opens in a new tab)
Mainnet: https://app.joy.id (opens in a new tab)

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { initConfig } from "@joyid/ckb";
import App from "./App";
import "./index.css";
 
initConfig({
  // name of your app
  name: "JoyID demo",
  // logo of your app
  logo: "https://fav.farm/🆔",
  // JoyID app url that your app is integrated with
  joyidAppURL: "https://testnet.joyid.dev",
});
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Connect to JoyID

After initialization, you can call the connect function to connect to JoyID. The connect function returns a Promise, which will be resolved to a EVM address when the connection is successful.

💡

After a successful connection, JoyID persists the connection status to the local storage.

App.tsx

import { connect } from '@joyid/ckb'
export default function App() {
  const [joyidInfo, setJoyidInfo] = React.useState(null);
  const onConnect = async () => {
    try {
      const authData = await connect();
      setJoyidInfo(authData);
    } catch (error) {
      console.log(error);
    }
  };
 
  return (
    <div id="app">
      <button className="btn btn-primary" onClick={onConnect}>
        Connect JoyID
      </button>
    </div>
  );
}

Sign CKB raw transaction

You can easily sign ckb raw transaction with signRawTransaction function. We will use Omiga Inscription (opens in a new tab) as an example to show how to use joyid/ckb SDK to sign ckb raw transactions

App.tsx

import {
  CKBTransaction,
  ConnectResponseData,
  signRawTransaction,
} from '@joyid/ckb'
import {
  Aggregator,
  Collector,
  InscriptionInfo,
  JoyIDConfig,
  NoLiveCellException,
  buildDeployTx,
  buildMintTx,
  buildTransferTx,
} from 'ckb-omiga'
import { CKB_INDEXER_URL, CKB_RPC_URL, COTA_AGGREGATOR_URL } from './env'
 
const info: InscriptionInfo = {
  maxSupply: BigInt(2100_0000),
  mintLimit: BigInt(1000),
  xudtHash: '',
  mintStatus: 0,
  decimal: 8,
  name: 'CKB Fist Inscription',
  symbol: 'CKBI',
}
const collector = new Collector({
  ckbNodeUrl: CKB_RPC_URL,
  ckbIndexerUrl: CKB_INDEXER_URL,
})
const aggregator = new Aggregator(COTA_AGGREGATOR_URL)
 
export default function App() {
   const [joyidInfo, setJoyidInfo] = React.useState(null);
 
   const joyID: JoyIDConfig = {
    aggregator,
    connectData: joyidInfo as ConnectResponseData,
  }
 
  const onConnect = async () => {
    try {
      const authData = await connect();
      setJoyidInfo(authData);
    } catch (error) {
      console.log(error);
    }
  };
  
  const deploy = async () => {
    try {
      const { rawTx } = await buildDeployTx({
        collector,
        joyID,
        address: joyidInfo.address,
        info,
      })
      const signedTx = await signRawTransaction(
        rawTx as CKBTransaction,
        joyidInfo.address
      )
      const hash = await collector.getCkb().rpc.sendTransaction(signedTx)
      alert(hash)
    } catch (error) {
      console.error(error)
    }
  }
 
  return (
    <div>
      <h1>Hello JoyID!</h1>
      {joyidInfo ? null : <button onClick={onConnect}>Connect JoyID</button>}
      {joyidInfo ? (
        <div>
          <button onClick={deploy}>Deploy Inscription</button>
        </div>
      ) : null}
    </div>
  );
}

Try it out

For a complete demo, you may want to check Live Demo ↗ (opens in a new tab).

Sign Cota NFT Transaction Bitcoin SDK