Using the useSignAndBroadcastTransaction Hook

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

Introduction

useSignAndBroadcastTransaction returns an object with a function to sign and broadcast transactions, along with the state of the process. This is useful when you want to both sign a transaction and send it to the network in a single step.

Usage

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

2. Use the useSignAndBroadcastTransaction hook in your component.

3. Call the signAndBroadcastTransaction function with the appropriate parameters.

Example

Below is an example demonstrating how to use the useSignAndBroadcastTransaction hook to sign and broadcast an Ethereum transaction.

Required permission: transaction.signAndBroadcast

import React, { useEffect, useState, useCallback } from 'react';
import {
  useSignAndBroadcastTransaction,
  useRequestAccount,
} from '@ledgerhq/wallet-api-client-react';
import BigNumber from 'bignumber.js';
 
function App() {
  const { requestAccount, account } = useRequestAccount();
  const {
    signAndBroadcastTransaction,
    pending,
    transactionHash,
    error,
  } = useSignAndBroadcastTransaction();
 
  useEffect(() => {
    requestAccount();
  }, [requestAccount]);
 
  const handleSignAndBroadcastTransaction = 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 {
      await signAndBroadcastTransaction(account.id, ethereumTransaction);
    } catch (e) {
      console.error(e);
    }
  }, [account, signAndBroadcastTransaction]);
 
  return (
    <>
      <h1>Test Live App - Services Kit</h1>
      <div className="card">
        <button
          onClick={handleSignAndBroadcastTransaction}
          disabled={pending}
        >
          Sign and Broadcast Ethereum Transaction
        </button>
 
        {pending && <p>Broadcasting...</p>}
        {error && <p>Error: {error.toString()}</p>}
        {transactionHash && (
          <p>Transaction broadcasted successfully: {transactionHash}</p>
        )}
      </div>
    </>
  );
}
 
export default App;

Parameters

The signAndBroadcastTransaction 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 useSignAndBroadcastTransaction hook returns an object with the following properties:

• signAndBroadcastTransaction: Function to call for signing and broadcasting a transaction.
• pending: Boolean indicating if the process is ongoing.
• transactionHash: The hash of the transaction once it’s successfully broadcasted.
• error: An error object if the process failed.

Error Handling

If an error occurs during the signing and broadcasting process, the `