Skip to main content

Cosmos

Keystone is now integrated with the Keplr Wallet.

Connect with Keystone​

For Cosmos chains, Keystone defines the new UR type crypto-multi-accounts 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. For supported Cosmos chains, please refer here

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.parseMultiAccounts(new UR(Buffer.from(cbor, "hex"), type))
    console.log("multiAccounts: ", 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.CryptoMultiAccounts]} />
}

Here is an example of the resulting data:

{
  "device": "Keystone 3 Pro",
  "masterFingerprint": "1250b6bc",
  "keys":
    [
      {
        "chain": "ATOM",
        "path": "m/44'/118'/0'/0/0",
        "publicKey": "03ec1dcc0246dd82460d3b748d593622a33ee230815d57ca560522dd6d4d99e272",
        "name": "Account-1",
        "chainCode": ""
      },
      {
        "chain": "SCRT",
        "path": "m/44'/529'/0'/0/0",
        "publicKey": "032e7c3b11fc5419aa6c93cde3f940e551da23a520512a295432a830cddced3d31",
        "name": "Account-1",
        "chainCode": ""
      },
      {
        "chain": "CRO",
        "path": "m/44'/394'/0'/0/0",
        "publicKey": "0350a27e9cca0cde5c7d6328d05729c8aee1d43f964fece56faa98426bac5f016c",
        "name": "Account-1",
        "chainCode": ""
      },
      ...
    ]
}

Here is the type defination of the CryptoMutliAccounts:

interface MultiAccounts {
    masterFingerprint: string  // A 4 bytes hex string indicates the current mnemonic, e.g. 'f23f9fd2'
    keys: Account[]  // An array of public keys
    device?: string  // The device name, e.g. 'Keystone'
    deviceId?: string  // The device id, e.g. '28475c8d80f6c06bafbe46a7d1750f3fcf2565f7'
    deviceVersion?: String  // The device firmware version, e.g. '1.0.2'
}

interface Account {
    chain: string  // The symbol of the coin this key belongs to, e.g. 'ADA'
    path: string  // The full derivation path of current key
    publicKey: string  // Public key in hex string
    name?: string  // The address name in hardware wallet
    chainCode: string  // The chain code if exist
    extendedPublicKey?: string  // The bip32 extended public key, e.g. xpub...
    note?: string  // The note for current account
}

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

Genereate the sign request​

For cosmos, Keystone introdue the new UR type cosmos-sign-request to encode the cardano transaction data. The request can also be splited into these four types:

  • Amino
  • Direct
  • Textual
  • Message

Here is the sample data structure for cosmos-sign-request:

requestId: String // UUID for current request
signData: String // the serialized unsigned transaction data, in hex string
dataType: Enum // supported data type. Amino, Direct, Textual and Message
origin: Optional(String) // source of the request, wallet name etc
accounts: Array (
  path: String // the HD path to tell which private key should be used to sign the data
  xfp: String // master fingerprint provided by Keystone when getting accounts
  address: Optional(String) // the address for request this signing
)

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

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

let cosmosSignRequest = {
    requestId: "7AFD5E09-9267-43FB-A02E-08C4A09417EC",
    signData: "7B226163636F756E745F6E756D626572223A22323930353536222C22636861696E5F6964223A226F736D6F2D746573742D34222C22666565223A7B22616D6F756E74223A5B7B22616D6F756E74223A2231303032222C2264656E6F6D223A22756F736D6F227D5D2C22676173223A22313030313936227D2C226D656D6F223A22222C226D736773223A5B7B2274797065223A22636F736D6F732D73646B2F4D736753656E64222C2276616C7565223A7B22616D6F756E74223A5B7B22616D6F756E74223A223132303030303030222C2264656E6F6D223A22756F736D6F227D5D2C2266726F6D5F61646472657373223A226F736D6F31667334396A7867797A30306C78363436336534767A767838353667756C64756C6A7A6174366D222C22746F5F61646472657373223A226F736D6F31667334396A7867797A30306C78363436336534767A767838353667756C64756C6A7A6174366D227D7D5D2C2273657175656E6365223A2230227D",
    dataType: KeystoneCosmosSDK.DataType.amino,
    accounts: [{
        path: "m/44'/118'/0'/0/0",
        xfp: "f23f9fd2",
        address: "4c2a59190413dff36aba8e6ac130c7a691cfb79f"
    }]
}

const Cosmos = () => {
    const keystoneSDK = new KeystoneSDK({
        origin: "Keplr Extension"
    });
    const ur = keystoneSDK.cosmos.generateSignRequest(cosmosSignRequest);

    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 cosmos chain transaction into the UR type cosmos-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 cosmos-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: String // the serialized signature in hex string
    publicKey: String // the public key of private key which signed the data
)

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 Cosmos = () => {
    const keystoneSDK = new KeystoneSDK({
        origin: "Keplr Extension"
    });

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

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