Saltar al contenido principal

Integrar Freighter con una dapp de React

Las billeteras son una parte esencial de cualquier dapp. Permiten a los usuarios interactuar con la blockchain y firmar transacciones. En esta sección, aprenderás cómo integrar la billetera Freighter en tus dapps de React.

Componente WalletData​

En la dapp de crowdfund de ejemplo, el componente WalletData juega un papel clave en la integración de la billetera. Desglosaremos el código y entenderemos su funcionalidad:

/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" />
      )}
    </>
  );
}

Aquí tienes un desglose del código:

  • La variable mounted se obtiene usando el useIsMounted hook, indicando si el componente está actualmente montado o no.
  • El useAccount hook se utiliza para obtener los datos de la cuenta del usuario, y la propiedad data se desestructura del resultado.
  • Se utiliza renderización condicional para mostrar contenido diferente según el estado de montaje del componente y la disponibilidad de datos de cuenta.
  • Si el componente está montado y los datos de la cuenta están disponibles, se muestra la información de la billetera del usuario. Esto incluye el nombre de usuario de la cuenta.
  • Si el componente no está montado o los datos de la cuenta no están disponibles, se renderiza un componente ConnectButton, permitiendo al usuario conectarse con Freighter.

Guías en esta categoría: