Extract signature

Once Keystone signs the data, it generates a signature and encodes it into a QR Code. After the signing is completed, a software wallet can scan the QR Code to retrieve the signature. Continuing with the Ethereum transaction in step 3, the KeystoneSDK offers the function parseSignature to extract and parse the signature from the QR Code. Concurrently, the AnimatedQRScanner is a React component designed specifically to scan the Keystone QR Code.

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

/**
 * Ethereum component to handle QR code scanning for Ethereum signatures.
 * Utilizes KeystoneSDK for parsing the signature from the scanned QR code.
 */

const Ethereum = () => {
    // Initialize the Keystone SDK
    const keystoneSDK = new KeystoneSDK();

    /**
     * Callback function to handle successful QR code scans.
     * Parses the Ethereum signature from the scanned data.
     * 
     * @param {Object} scanResult - The result object from the QR scan.
     * @param {string} scanResult.type - The type of the scanned data.
     * @param {string} scanResult.cbor - The CBOR encoded data from the QR code.
     */
    const onSucceed = ({type, cbor}) => {
        // Parse the signature from the CBOR data using Keystone SDK
        const signature = keystoneSDK.eth.parseSignature(new UR(Buffer.from(cbor, "hex"), type))
        console.log("signature: ", signature);
    }

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

    // Render the AnimatedQRScanner component with the specified handlers and UR types
    return <AnimatedQRScanner handleScan={onSucceed} handleError={onError} urTypes={[URType.EthSignature]} />
}

After that, the software wallet can extract the signature and construct the whole transaction.