Hooking Up

6. Fetching Account Information

With your environment set up, you can now start interacting with the Ledger Services Kit. Create a new file under the /hooks directory named useAccounts.tsx. This file will house a custom hook to fetch user account information using the useAccounts hook provided by Ledger.

// src/hooks/useAccounts.tsx
import { useAccounts } from "@ledgerhq/wallet-api-client-react";
 
function useUserAccounts() {
  const { accounts, loading, error } = useAccounts();
 
  return {
    accounts,
    loading,
    error,
  };
}
 
export default useUserAccounts;

Now, you can use this custom hook in your components to fetch and display user account information.

7. Creating Transaction Signing Functionality

Now that you can fetch account information, the next step is to facilitate transaction signing within your app. Create a new file under the /hooks directory named useSignTransaction.tsx. This file will contain a custom hook to sign transactions using the useSignTransaction hook provided by Ledger.

// src/hooks/useSignTransaction.tsx
import { useSignTransaction, useRequestAccount } from '@ledgerhq/wallet-api-client-react';
import { useCallback, useState, useEffect } from 'react';
import BigNumber from 'bignumber.js';
 
function useTransactionSigner() {
  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 {
    handleSignTransaction,
    pending,
    response,
    error
  };
}
 
export default useTransactionSigner;

8. Building User Interface

Now it’s time to create the UI where users will interact with your app. Create a new file named App.tsx under the /src directory.

// src/App.tsx
import React from 'react';
import useUserAccounts from './hooks/useAccounts';
import useTransactionSigner from './hooks/useSignTransaction';
 
function App() {
  const { accounts, loading, error } = useUserAccounts();
  const { handleSignTransaction, pending, response, error: signError } = useTransactionSigner();
 
  return (
    <>
      <h1>User's Crypto Accounts</h1>
 
      {loading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error: {error.message}</p>
      ) : (
        <ul>
          {(accounts ?? []).map(({ id, name, address, currency, balance }) => (
            <li key={id}>
              <p>id: {id}</p>
              <p>name: {name}</p>
              <p>address: {address}</p>
              <p>currency: {currency}</p>
              {/* Make sure to parse BigNumber */}
              <p>balance: {balance.toString()}</p>
            </li>
          ))}
        </ul>
      )}
 
      <button onClick={handleSignTransaction} disabled={pending}>
        Sign Ethereum Transaction
      </button>
 
      {pending && <p>Signing...</p>}
      {signError && <p>Error: {signError.toString()}</p>}
      {response && <p>Transaction signed successfully: {response.toString('hex')}</p>}
    </>
  );
}
 
export default App;

Configuration Import your app in Ledger Live