Integrate Freighter with a React dapp

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, the WalletData component plays a key role in wallet integration. Let's break down the code and understand its functionality:

/components/moleculres/wallet-data/index.tsx

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, indicating whether the component is currently mounted or not.
• The useAccount hook 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 is rendered, allowing the user to connect with Freighter.