# Using the `useWalletInfo` Hook

The `useWalletInfo` hook is part of the  API 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  API 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**:](https://developers.ledger.com/docs/discover/wallet-api/appendix/manifest#permissions)
`wallet.info`

```jsx
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:

```json
{
  "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.