Skip to main content

Arweave

Keystone is now integrated with the ARConnect Wallet.

Connect with Keystone​

Unlike other blockchains, Arweave uses the RSA for signing and key managment, Keystone defines the new UR type arweave-crypto-account to expose the public keys. Software can utilize these data to generate the desired addresses. Developers can use the SDK to retrieve and parse this data from the QR Code displayed on the Keystone device. Here is a sample code snippet to scan the animated QR code and parse the data:

import KeystoneSDK, {UR, URType} from "@keystonehq/keystone-sdk"
import {AnimatedQRScanner} from "@keystonehq/animated-qr"

/**
 * Represents a component that handles the scanning of an animated QR code to retrieve
 * the crypto hdkey information from a Keystone hardware wallet.
 * 
 * The component uses the `AnimatedQRScanner` from `@keystonehq/animated-qr` to scan the QR code,
 * and the `KeystoneSDK` to parse the scanned data into a human-readable account information format.
 */

const Account = () => {

  /**
   * Callback function to handle successful QR code scans.
   * 
   * @param {Object} data - The data object containing the type and cbor encoded string.
   * @param {string} data.type - The type of the scanned data.
   * @param {string} data.cbor - The cbor encoded string representing the account information.
   */
  const onSucceed = ({type, cbor}) => {
    // Parses the arweave account from the scanned QR code data.
    const account = KeystoneSDK.arweave.parseAccount(new UR(Buffer.from(cbor, "hex"), type))
    console.log("arweave account: ", multiAccounts);
  }

  /**
   * Callback function to handle errors during QR code scanning.
   * 
   * @param {string} errorMessage - The error message describing what went wrong during scanning.
   */
  const onError = (errorMessage) => {
    console.log("error: ", errorMessage);
  }

  // Renders the AnimatedQRScanner component with the specified handlers for success and error events.
  return <AnimatedQRScanner handleScan={onSucceed} handleError={onError} urTypes={[URType.ArweaveCryptoAccount]} />
}

Here is an example of the resulting data:

{
    "masterFingerprint": "f23f9fd2",
    "keyData": "c65925b0...", // 512 bytes RSA Publick key data
    "device": "Keystone"
}

Keystone will provide the master fingerprint and the public key, allowing software wallets to select the necessary data to generate the desired addresses.

Genereate the sign request​

For arweave, Keystone introdue the new UR type arweave-sign-request to encode the arweave transaction data. Here is the sample data structure for arweave-sign-request:

requestId: String // UUID for current request
signData: String // the serialized unsigned transaction data in hex string
signType: Enum // the data type to be signed. transaction, data item and message.
saltLen: Enum // the `rsa-pss` salt length, 0 or 32, zero for deterministic signature, 0 or 32
masterFingerprint: String // master fingerprint provided by Keystone when getting accounts
account: Optional(String) // the Arweave account of the signing type for verification purpose 
origin: Optional(String) // source of the request, wallet name etc

Here is a sample code snippet demonstrating how to use the SDK to generate the sign request :

import KeystoneSDK, {KeystoneArweaveSDK}  from "@keystonehq/keystone-sdk"
import {AnimatedQRCode} from "@keystonehq/animated-qr"

let arweaveTransaction = {
    requestId: "9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d",
    signData: "7b22666f726d6174223a322c226964223a22222c226c6173745f7478223a22675448344631615059587639314a704b6b6e39495336684877515a3141597949654352793251694f654145547749454d4d5878786e466a30656b42466c713939222c226f776e6572223a22222c2274616773223a5b7b226e616d65223a2256486c775a51222c2276616c7565223a2256484a68626e4e6d5a5849227d2c7b226e616d65223a22513278705a573530222c2276616c7565223a2251584a44623235755a574e30227d2c7b226e616d65223a22513278705a5735304c565a6c636e4e70623234222c2276616c7565223a224d5334774c6a49227d5d2c22746172676574223a226b796977315934796c7279475652777454617473472d494e3965773838474d6c592d795f4c473346784741222c227175616e74697479223a2231303030303030303030222c2264617461223a22222c22646174615f73697a65223a2230222c22646174615f726f6f74223a22222c22726577617264223a2239313037353734333836222c227369676e6174757265223a22227d",
    signType: KeystoneArweaveSDK.SignType.Transaction,
    saltLen: KeystoneArweaveSDK.SaltLen.Zero,
    masterFingerprint: 'F23F9FD2',
    origin: 'arweave wallet'
}

const Arweave = () => {
    const keystoneSDK = new KeystoneSDK();
    const ur = keystoneSDK.arweave.generateSignRequest(arweaveTransaction);

    return <AnimatedQRCode type={ur.type} cbor={ur.cbor.toString("hex")}/>
}

Here is a javascript sample code snippet demonstrating how to use the Keystone SDK to encode a arweave chain transaction into the UR type arweave-sign-request and embed it into QR codes.

options={{
    size: number, // optional, QR code width and length in UI, default 180px
    capacity: number, // optional, the capacity of a single QR code, default 400 bytes per image
    interval: number // optional, the QR code change time interval in mill seconds for animated QR code, default 100ms
}}

AnimatedQRCode will decide whether the animated QR codes are needed, the option props of AnimatedQRCode component can be used to control the size, capacity and the update interval of QR code. Please avoid setting the capacity too high, as larger value can make it more difficult for Keystone to scan.

Extract signature​

After Keystone scans the QR Codes, it will verify and display the transaction details for user confirmation. Once Keystone signs the data, it generates the signature and encodes them into the QR Codes. An new UR type arweave-signature is introduced, After the signing is completed, a software wallet can scan the QR Code to retrieve the signature.

Signature (
    requestId: String // The requestId from sign request
    signature: Array(String) // An array of the serialized signatures, each in hex string
)

Here are some code samples demonstrating how to use the SDK to achieve this.

import KeystoneSDK, {UR, URType} from "@keystonehq/keystone-sdk"
import {AnimatedQRScanner} from "@keystonehq/animated-qr"

const ArweaveScanner = () => {
    const keystoneSDK = new KeystoneSDK();

    const onSucceed = ({cbor, type}) => {
        const signature = keystoneSDK.arweave.parseSignature(new UR(Buffer.from(cbor, "hex"), type))
        console.log("signature: ", signature);
    }
    const onError = (errorMessage) => {
        console.log("error: ", errorMessage);
    }

    return <AnimatedQRScanner handleScan={onSucceed} handleError={onError} urTypes={[URType.ArweaveSignature]} />
}

After getting the signature, software wallet can get the it and construct the transaction, then broadcast it.