Configuração da Carteira

Vamos usar o Stellar Wallet Kit e configurar toda a configuração para assinar transações.

Hook Personalizado

Vamos usar um hook personalizado para gerenciar as ações de conectar e desconectar a carteira usando o Wallet Context e o 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 = () => {
  // Obter informações da carteira a partir do wallet context
  const { setWalletInfo, clearWalletInfo } = useWalletContext();

  /**
   * Conectar a uma carteira usando o Stellar Wallet Kit e definir as informações da carteira no wallet context
   */
  const connectWallet = async () => {
    await kit.openModal({
      modalTitle: "Conecte-se à sua carteira favorita",
      onWalletSelected: async (option: ISupportedWallet) => {
        kit.setWallet(option.id);

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

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

  /**
   * Desconectar da carteira usando o Stellar Wallet Kit e limpar as informações da carteira no wallet context
   */
  const disconnectWallet = async () => {
    await kit.disconnect();
    clearWalletInfo();
  };

  /**
   * Lidar com a conexão à carteira através do clique de algum botão
   */
  const handleConnect = async () => {
    try {
      await connectWallet();
    } catch (error) {
      console.error("Erro ao conectar a carteira:", error);
    }
  };

  /**
   * Lidar com a desconexão da carteira através do clique de algum botão
   */
  const handleDisconnect = async () => {
    try {
      await disconnectWallet();
    } catch (error) {
      console.error("Erro ao desconectar a carteira:", error);
    }
  };

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

As funções "handleConnect" e "handleDisconnect" você pode usar com botões para chamar o modal de conexão da carteira ou limpar seu estado.

Ajudantes

Todos os endpoints precisam da sua assinatura pela carteira. O Stellar Wallet Kit fornece essa funcionalidade, mas vamos abstraí-la em uma função auxiliar.

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

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

/**
 * Assinar uma transação
 *
 * @Fluxo:
 * 1. Assinar a transação não assinada
 * 2. Retornar a transação assinada
 */
export const signTransaction = async ({
  unsignedTransaction,
  address,
}: signTransactionProps): Promise<string> => {
  const { signedTxXdr } = await kit.signTransaction(unsignedTransaction, {
    address,
    networkPassphrase: WalletNetwork.TESTNET,
  });

  return signedTxXdr;
};