Signing

This walkthrough covers how to sign the transaction payload, original message, and monitor the transaction status through UKey Wallet Polkadot Provider.

---

Signature transaction payload

Transaction payload is usually generated by the Polkadot.js API, and the wallet is responsible for displaying and signing:

import { web3FromAddress } from '@polkadot/extension-dapp'

// Retrieve the injector for a specific account
const injector = await web3FromAddress(accountAddress)

// Note: Sign payload
const payload = {
  address: accountAddress,
  blockHash: '0x...',
  blockNumber: '0x...',
  era: '0x...',
  genesisHash: '0x...',
  method: '0x...',
  nonce: '0x...',
  specVersion: '0x...',
  tip: '0x...',
  transactionVersion: '0x...',
  signedExtensions: [...],
  version: 4,
}

const callResult = await provider.web3SignPayload(payload)

console.log({
  id: callResult.id,
  signature: callResult.signature, // Note: Hexadecimal signature
})

---

Sign original message

const payload = {
  address: accountAddress,
  data: "0x48656c6c6f", // Note: Hexadecimal encoded message
  type: "bytes",
};

const callResult = await provider.web3SignRaw(payload);

console.log({
  id: callResult.id,
  signature: callResult.signature,
});

---

Listen for transaction events

await tx.signAndSend(
  account.address,
  { signer: injector.signer },
  ({ status, events }) => {
    if (status.isInBlock) {
      console.log("Included at block:", status.asInBlock.toHex());
    }
    if (status.isFinalized) {
      console.log("Finalized at block:", status.asFinalized.toHex());

      events.forEach(({ event }) => {
        if (api.events.system.ExtrinsicSuccess.is(event)) {
          console.log("Transaction completed successfully");
        }
        if (api.events.system.ExtrinsicFailed.is(event)) {
          console.log("Transaction execution failed");
        }
      });
    }
  },
);

---

RPC method

Send RPC request

const requestResult = await provider.web3RpcSend({
  method: "chain_getHeader",
  requestParams: [],
});

console.log("Latest block header data:", requestResult.result);

Subscribe to RPC events

const subscriptionId = await provider.web3RpcSubscribe(
  {
    method: "chain_subscribeNewHeads",
    requestParams: [],
  },
  (response) => {
    console.log("Observed new block:", response.result);
  },
);

// Note: Unsubscribe later
await provider.web3RpcUnSubscribe();

---

Handle Errors

try {
  const callResult = await provider.web3SignPayload(payload);
} catch (error) {
  if (error.message === "Cancelled") {
    console.log("Signing was canceled by the user");
  } else {
    console.error("Signature generation failed:", error);
  }
}

---

Use in React

import { useState, useEffect } from "react";
import { web3Enable, web3Accounts } from "@polkadot/extension-dapp";

function usePolkadotAccounts() {
  const [accounts, setAccounts] = useState([]);
  const [isConnected, setIsConnected] = useState(false);

  const connect = async () => {
    const extensions = await web3Enable("UKey Wallet Demo");
    if (extensions.length > 0) {
      const allAccounts = await web3Accounts();
      setAccounts(allAccounts);
      setIsConnected(true);
    }
  };

  return { accounts, isConnected, connect };
}