Configuración de la cartera

Vamos a usar el Stellar Wallet Kit y configurar toda la configuración para firmar transacciones.

Hook Personalizado

Vamos a usar un hook personalizado para gestionar las acciones de conectar y desconectar la cartera usando el Wallet Context y el wallet kit.

import { kit } from "@/config/wallet-kit";
import { useWalletContext } from "@/providers/wallet.provider";
import { ISupportedWallet } from "@creit.tech/stellar-wallets-kit";

export const useWallet = () => {
  // Obtener información de la cartera desde el wallet context
  const { setWalletInfo, clearWalletInfo } = useWalletContext();

  /**
   * Conectar a una cartera usando el Stellar Wallet Kit y establecer la información de la cartera en el wallet context
   */
  const connectWallet = async () => {
    await kit.openModal({
      modalTitle: "Conéctate a tu cartera favorita",
      onWalletSelected: async (option: ISupportedWallet) => {
        kit.setWallet(option.id);

        const { address } = await kit.getAddress();
        const { name } = option;

        setWalletInfo(address, name);
      },
    });
  };

  /**
   * Desconectar de la cartera usando el Stellar Wallet Kit y limpiar la información de la cartera en el wallet context
   */
  const disconnectWallet = async () => {
    await kit.disconnect();
    clearWalletInfo();
  };

  /**
   * Manejar la conexión a la cartera mediante el clic de algún botón
   */
  const handleConnect = async () => {
    try {
      await connectWallet();
    } catch (error) {
      console.error("Error connecting wallet:", error);
    }
  };

  /**
   * Manejar la desconexión de la cartera mediante el clic de algún botón
   */
  const handleDisconnect = async () => {
    try {
      await disconnectWallet();
    } catch (error) {
      console.error("Error disconnecting wallet:", error);
    }
  };

  return {
    connectWallet,
    disconnectWallet,
    handleConnect,
    handleDisconnect,
  };
};

Las funciones "handleConnect" y "handleDisconnect" puedes usarlas con botones para abrir el modal de conexión de la cartera o vaciar su estado.

Ayudantes

Todos los endpoints necesitan tu firma por cartera. El Stellar Wallet Kit proporciona esa funcionalidad, pero la abstraeremos en una función helper.

import { kit } from "@/config/wallet-kit";
import { WalletNetwork } from "@creit.tech/stellar-wallets-kit";

interface signTransactionProps {
  unsignedTransaction: string;
  address: string;
}

/**
 * Firmar una transacción
 *
 * @Flow:
 * 1. Firmar la transacción sin firmar
 * 2. Devolver la transacción firmada
 */
export const signTransaction = async ({
  unsignedTransaction,
  address,
}: signTransactionProps): Promise<string> => {
  const { signedTxXdr } = await kit.signTransaction(unsignedTransaction, {
    address,
    networkPassphrase: WalletNetwork.TESTNET,
  });

  return signedTxXdr;
};