> ## Documentation Index
> Fetch the complete documentation index at: https://developers.stellar.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrate Freighter with a React dapp

> Integrate the Freighter wallet into your React dapps

Wallets are an essential part of any dapp. They allow users to interact with the blockchain and sign transactions. In this section, you'll learn how to integrate the Freighter wallet into your React dapps.

### WalletData Component

In the [example crowdfund dapp](https://github.com/stellar/soroban-example-dapp), the `WalletData` component plays a key role in wallet integration. Let's break down the code and understand its functionality:

```tsx title="/components/moleculres/wallet-data/index.tsx" theme={"theme":{"light":"github-light","dark":"github-dark"}}
import React from "react";
import { useAccount, useIsMounted } from "../../../hooks";
import { ConnectButton } from "../../atoms";
import styles from "./style.module.css";

export function WalletData() {
  const mounted = useIsMounted();
  const account = useAccount();

  return (
    <>
      {mounted && account ? (
        <div className={styles.displayData}>
          <div className={styles.card}>{account.displayName}</div>
        </div>
      ) : (
        <ConnectButton label="Connect Wallet" />
      )}
    </>
  );
}
```

Here's a breakdown of the code:

* The `mounted` variable is obtained using the [`useIsMounted` hook](https://github.com/stellar/soroban-example-dapp/blob/main/hooks/useIsMounted.ts), indicating whether the component is currently mounted or not.
* The [`useAccount` hook](https://github.com/stellar/soroban-example-dapp/blob/main/hooks/useAccount.ts) is used to fetch the user's account data, and the `data` property is destructured from the result.
* Conditional rendering is used to display different content based on the component's mount status and the availability of account data.
* If the component is mounted and the account data is available, the user's wallet data is displayed. This includes the account's display name.
* If the component is not mounted or the account data is not available, a [`ConnectButton` component](https://github.com/stellar/soroban-example-dapp/blob/main/components/atoms/connect-button/index.tsx) is rendered, allowing the user to connect with Freighter.