Connect with keystone

The initial phase of integrating a software wallet with Keystone involves establishing a connection between the two. During this process, Keystone will expose the extended public key or a set of public keys specific to various blockchain networks. Upon receiving this critical data, the software wallet can generate the necessary addresses and configure the corresponding wallet within its own application logic.

Let's take evm chain as a example. Here is an QR Code image generated on a Keystone device. You can use the following code to decode the QR Code data and obtain the extended public key, the master fingerprint, and the derivation path.

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
 * a cryptographic account 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 HD key from the scanned QR code data.
    const account = KeystoneSDK.parseHDKey(new UR(Buffer.from(cbor, "hex"), type))
    console.log("account: ", account);
  }

  

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

The data in the QR Code image is the following json string.

{
    "chain": "ETH",
    "path": "m/44'/60'/0'",
    "publicKey": "02cc6d7834204653ff10e0047a2395343cc6df081e76c88d5eee83f346f0b21cb7",
    "name": "Keystone",
    "xfp": "f23f9fd2",
    "chainCode": "712a9187e5c60c573a5acce855445376e1b74c240e417fe8cb2a8fdfd78d2d9d",
    "extendedPublicKey": "xpub6CBZfsQuZgVnvTcScAAXSxtX5jdMHtX5LdRuygnTScMBbKyjsxznd8XMEqDntdY1jigmjunwRwHsQs3xusYQBVFbvLdN4YLzH8caLSSiAoV"
}