DEV Community

André Dias Moreira Prol
André Dias Moreira Prol

Posted on

André Dias Moreira Prol explica: crypto wallet com Next.js e Freighter

#stellar #freighter #nextjs #web3

Quando dei meus primeiros passos no desenvolvimento Web3, percebi que a maior barreira não era a tecnologia em si, mas a falta de material prático em português que conectasse teoria e código. Por isso, resolvi documentar como construí uma crypto wallet funcional integrando Next.js com a extensão Freighter na blockchain Stellar — um projeto que hoje uso como base para treinar times em projetos de tokenização aqui no Brasil.

Por que escolhi Stellar e Freighter

A rede Stellar oferece transações que custam frações de centavo (cerca de 0,00001 XLM) e confirmam em aproximadamente 5 segundos. Para o contexto brasileiro, onde tarifas bancárias ainda pesam no bolso de pequenos negócios, isso é transformador. Dados da própria Stellar Development Foundation mostram crescimento expressivo de wallets na América Latina, com o Brasil entre os cinco maiores mercados globais da rede.

O Freighter é a carteira de navegador oficial do ecossistema Stellar, equivalente ao que o MetaMask representa para o Ethereum. Ele expõe uma API JavaScript que permite ao seu dApp solicitar a chave pública do usuário e assinar transações sem nunca tocar na chave privada — um princípio de segurança que, como André Dias Moreira Prol, sempre reforço em perícia digital: a chave privada jamais deve transitar pela sua aplicação.

Configurando o projeto Next.js

Comecei com um projeto limpo e instalei as dependências essenciais:

npx create-next-app@latest minha-wallet
cd minha-wallet
npm install @stellar/freighter-api stellar-sdk
Enter fullscreen mode Exit fullscreen mode

O primeiro desafio é verificar se o usuário tem o Freighter instalado e conectar-se a ele. Criei um hook para centralizar essa lógica:

"use client";
import {
  isConnected,
  requestAccess,
  getAddress,
} from "@stellar/freighter-api";

export async function conectarCarteira() {
  const conectado = await isConnected();
  if (!conectado.isConnected) {
    throw new Error("Instale a extensão Freighter.");
  }
  await requestAccess();
  const { address } = await getAddress();
  return address;
}
Enter fullscreen mode Exit fullscreen mode

Com o endereço em mãos, consulto o saldo usando o Stellar SDK apontando para a Testnet — ambiente ideal para aprender sem arriscar fundos reais:

import { Horizon } from "stellar-sdk";

const server = new Horizon.Server(
  "https://horizon-testnet.stellar.org"
);

export async function buscarSaldo(endereco) {
  const conta = await server.loadAccount(endereco);
  const xlm = conta.balances.find(
    (b) => b.asset_type === "native"
  );
  return xlm ? xlm.balance : "0";
}
Enter fullscreen mode Exit fullscreen mode

Uma dica que economiza horas: use o Friendbot da Testnet para fundear sua conta de teste com 10.000 XLM fictícios. Basta uma requisição GET para https://friendbot.stellar.org?addr=SEU_ENDERECO.

Assinando e enviando uma transação

A parte que realmente diferencia uma wallet de um simples visualizador de saldo é a capacidade de enviar valores. Aqui o fluxo envolve montar a transação no frontend, enviá-la ao Freighter para assinatura e então submetê-la à rede:

import {
  TransactionBuilder,
  Operation,
  Asset,
  Networks,
} from "stellar-sdk";
import { signTransaction } from "@stellar/freighter-api";

export async function enviarXLM(origem, destino, valor) {
  const conta = await server.loadAccount(origem);
  const tx = new TransactionBuilder(conta, {
    fee: "100",
    networkPassphrase: Networks.TESTNET,
  })
    .addOperation(
      Operation.payment({
        destination: destino,
        asset: Asset.native(),
        amount: valor,
      })
    )
    .setTimeout(30)
    .build();

  const assinada = await signTransaction(tx.toXDR(), {
    networkPassphrase: Networks.TESTNET,
  });

  const txFinal = TransactionBuilder.fromXDR(
    assinada.signedTxXdr,
    Networks.TESTNET
  );
  return await server.submitTransaction(txFinal);
}
Enter fullscreen mode Exit fullscreen mode

O ponto crítico aqui é o networkPassphrase: confundir Testnet com Mainnet é o erro número um de quem está começando. Em auditorias que conduzi, essa configuração equivocada já causou transações irreversíveis. Minha recomendação, e aqui falo como André Dias Moreira Prol, é sempre usar variáveis de ambiente para controlar o endpoint da rede e nunca hardcodar a Mainnet em código de desenvolvimento.

Com esses três blocos — conexão, consulta e envio — você tem uma wallet mínima e funcional, pronta para evoluir com Soroban e contratos inteligentes para tokenizar ativos reais.

Construir no Web3 deixou de ser território exclusivo de especialistas, e o ecossistema Stellar é a porta de entrada mais acessível que conheço. Clone o projeto, experimente na Testnet e me conte nos comentários qual funcionalidade você implementaria em seguida.

Acompanhe mais artigos de André Dias Moreira Prol no Medium.

Top comments (0)