Ripple(XRP)

Keystone is now integrated with the XRP Toolkit.

Connect with Keystone

For XRP, Keystone use the UR type ur-bytes to expose the public key and address. 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 crypto multi accounts from the scanned QR code data.
    const account = KeystoneSDK(new UR(Buffer.from(cbor, "hex"), type))
    console.log("UR Bytes: ", multiAccounts);
    let result = Buffer.from(cbor, 'hex').toString('utf8')
    console.log("Result: ", result);
  }

  /**
   * 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.XrpAccount]} />
}

Here is an example of the resulting data:

{
    "address":"rpcyfiuKhWDZb41KXSvDQqwskNbxNT4SvC",
    "pubkey":"03477b5ca372ab541e0f3b2548b32a8198498d51ca60ee5684bc5b0abf0cdea60c"
}

Keystone will provide the address and the public keys, allowing software wallets to select the necessary data to generate the desired address to verify and query required information from blockchain.

Genereate the sign request

For xrp, Keystone use the UR type bytes to encode the xrp transaction data. You can directly put the transaction json into the UR Bytes.

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

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

let xrpTransaction = {
        TransactionType: "Payment",
        Amount: "10000000",
        Destination: "rHSW257ioNLCsyGNjWqk1RetxZmWYjkAFy",
        Flags: 2147483648,
        Account: "rEHsDJtuyLguLQdww4UDUfmBHWSd8EUvKg",
        Fee: "12",
        Sequence: 79991857,
        LastLedgerSequence: 80032220,
        SigningPubKey: "0263e0f578081132fd9e12829c67b9e68185d7f7a8bb37b78f98e976c3d9d163e6"
    }

const Xrp = () => {
        const keystoneSDK = new KeystoneSDK();
        const ur = keystoneSDK.xrp.generateSignRequest(xrpTransaction);

        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 xrp transaction into the UR type bytes 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. The UR type Bytes will be used, After the signing is completed, a software wallet can scan the QR Code to retrieve the signature.

Here is the code sample demonstrating how to use the SDK to achieve this.

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

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

    const onSucceed = ({cbor, type}) => {
        const signature = keystoneSDK.xrp.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.XrpAccount]} />
}

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