Exibindo Dados On-Chain

Renderize saldos, tokens, NFTs e estado de programa em React.

Receita

import { createSolanaRpc, address, lamports } from "@solana/kit";
import { fetchMaybeTokenAccount } from "@solana-program/token";

Quando usar:

• Páginas de portfólio e galerias NFT.
• Inventário de jogo e posições DeFi.
• Dashboards admin.

Exemplo Prático

"use client";
import { useEffect, useState } from "react";
import { createSolanaRpc, address } from "@solana/kit";
 
export function SolBalance({ owner }: { owner: string }) {
  const [sol, setSol] = useState<number | null>(null);
  useEffect(() => {
    const rpc = createSolanaRpc(process.env.NEXT_PUBLIC_RPC_URL!);
    rpc.getBalance(address(owner)).send().then(({ value }) => setSol(Number(value) / 1e9));
  }, [owner]);
  if (sol === null) return <span>…</span>;
  return <span>{sol.toFixed(4)} SOL</span>;
}

O que isso demonstra:

• Skeleton de loading enquanto RPC em voo.
• Formate lamports para exibição apenas na borda da UI.
• Refetch quando owner muda.

Aprofundamento

Como Funciona

• SOL: getBalance.
• Tokens SPL: ATAs + decoders do token program.
• NFTs: DAS getAsset em providers RPC compatíveis.
• Estado de programa: helpers fetch Codama.

Erros Comuns

• Matemática float em valores de token - perda de precisão. Correção: bigint até formatação final.
• Decimals de token errados - bugs de exibição 1000x. Correção: leia decimals do mint.
• DAS em RPC sem DAS - método ausente. Correção: verifique capacidade do provider.
• Sem estado vazio - zero confuso vs loading. Correção: estados explícitos.
• Imagens mainnet de URIs não confiáveis - XSS via metadata. Correção: sanitize URLs.

Alternativas

FAQs

Relacionado

• Leituras no Lado do Servidor - fetch RSC
• A API DAS - metadata NFT
• Cache e Tempo Real - dados frescos

Versões da stack: Esta página foi escrita para Agave 4.1.1, Solana CLI 3.0.10, Anchor 0.32.1, anchor-lang 0.32.1, Rust 1.91.1, @solana/kit 7.0.0, Surfpool 0.12.0 e LiteSVM 0.6.x.