Using the useSignTransaction hook

The useSignTransaction hook is part of the Ledger Services Kit Client for React. It allows the user to sign a transaction without broadcasting it using the connected wallet. This documentation provides a detailed explanation of how to use this hook in your application.

Introduction

useSignTransaction returns an object with a function to sign transactions, along with the state of the signature process. This is useful when you want to sign a transaction programmatically without sending it to the network.

Usage

1. Import the required dependencies and hooks from the Ledger Services Kit Client.

2. Use the useSignTransaction hook in your component.

3. Call the signTransaction function with the appropriate parameters.

Example

Below is an example demonstrating how to use the useSignTransaction hook to sign an Ethereum transaction.

Required permission: transaction.sign

import React, { useEffect, useState, useCallback } from 'react';
import {
  useSignTransaction,
  useRequestAccount,
} from '@ledgerhq/wallet-api-client-react';
import BigNumber from 'bignumber.js';
 
function App() {
  const { requestAccount, account } = useRequestAccount();
  const { signTransaction, pending, signature, error } = useSignTransaction();
 
  const [response, setResponse] = useState(null);
 
  useEffect(() => {
    requestAccount();
  }, [requestAccount]);
 
  const handleSignTransaction = useCallback(async () => {
    if (!account) return;
 
    const ethereumTransaction = {
      family: 'ethereum',
      amount: new BigNumber(1000000000000000), // 0.001 ETH in wei
      recipient: '0xRecipientAddressHere',
      gasPrice: new BigNumber(20000000000), // 20 Gwei
      gasLimit: new BigNumber(21000),
      nonce: 0, // Replace with the correct nonce
    };
 
    try {
      const signature = await signTransaction(account.id, ethereumTransaction);
      setResponse(signature);
    } catch (e) {
      console.error(e);
    }
  }, [account, signTransaction]);
 
  return (
    <>
      <h1>Test Live App - Services Kit</h1>
      <div className="card">
        <button onClick={handleSignTransaction} disabled={pending}>
          Sign Ethereum Transaction
        </button>
 
        {pending && <p>Signing...</p>}
        {error && <p>Error: {error.toString()}</p>}
        {response && <p>Transaction signed successfully: {response.toString('hex')}</p>}
      </div>
    </>
  );
}
 
export default App;

Parameters

The signTransaction function takes three parameters:

• accountId: The ID of the account you want to sign the transaction with.
• transaction: The transaction object in the currency family-specific format.
• options (optional): Extra parameters that may be required by certain blockchain implementations.

In the example above, accountId is obtained through the useRequestAccount hook, and transaction is an object representing an Ethereum transaction.

Return Value

The useSignTransaction hook returns an object with the following properties:

• signTransaction: Function to call for signing a transaction.
• pending: Boolean indicating if the signing process is ongoing.
• signature: The raw signed transaction as a Buffer, if successful.
• error: An error object if the signing process failed.

Error Handling

If an error occurs during the signing process, the error property will be set with the error information