Using the useWalletInfo Hook

The useWalletInfo hook is part of the Ledger Services Kit Client for React. It allows you to fetch the wallet information associated with the connected wallet. This documentation provides a detailed explanation of how to use this hook in your application.

Introduction

useWalletInfo returns an object containing the wallet information, the time at which the data was updated, a loading state, any error that occurred during the fetching process, and a function to manually update the data.

Usage

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

2. Use the useWalletInfo hook in your component.

3. Optionally, call the updateData function to manually update the wallet information.

Example

Below is an example demonstrating how to use the useWalletInfo hook to fetch and display the wallet information.

Required permission: wallet.info

import React, { useEffect } from 'react';
import { useWalletInfo } from '@ledgerhq/wallet-api-client-react';
 
function App() {
  const { walletInfo, updatedAt, error, loading, updateData } = useWalletInfo();
 
  useEffect(() => {
    updateData();
  }, [updateData]);
 
  return (
    <div>
      <h1>Fetch Wallet Info</h1>
 
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.toString()}</p>}
      {walletInfo && (
        <div>
          <p>Wallet Info: {JSON.stringify(walletInfo)}</p>
          <p>Last Updated At: {updatedAt?.toLocaleString()}</p>
        </div>
      )}
 
      <button onClick={updateData} disabled={loading}>
        Refresh Wallet Info
      </button>
    </div>
  );
}
 
export default App;

Return Value

The useWalletInfo hook returns an object with the following properties:

• walletInfo: The wallet information object or null if not fetched.
• updatedAt: A Date object representing the last time the data was updated or null if not updated.
• loading: A boolean indicating if the fetching process is ongoing.
• error: An error object if the fetching process failed.
• updateData: A function that can be called to manually update the wallet information.

Structure of the walletInfo Object

The walletInfo object contains the following properties:

• tracking: A boolean indicating whether tracking is enabled or disabled.
• wallet: An object containing the following properties:
• name: A string representing the name of the wallet.
• version: A string representing the version of the wallet.

Example of a walletInfo object:

{
  "tracking": true,
  "wallet": {
    "name": "My Wallet",
    "version": "1.0.0"
  }
}

Manual Updating

The updateData function allows you to manually trigger the fetching process. This might be useful if you need to re-fetch the wallet information due to some user interaction or event in your application.

Error Handling

If an error occurs during the fetching process, the error property will be set with the error information. It’s good practice to always check this property and handle errors accordingly in your UI.