Visualización de datos en cadena

Renderiza saldos, tokens, NFTs y estado del programa en React.

Receta

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

Cuándo recurrir a esto:

• Páginas de portafolio y galerías de NFT.
• Inventario de juegos y posiciones DeFi.
• Paneles de administración.

Ejemplo funcional

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

Lo que esto demuestra:

• Esqueleto de carga mientras la RPC está en curso.
• Formatea lamports para visualización solo en el límite de la UI.
• Vuelve a buscar cuando cambia el propietario.

Inmersión profunda

Cómo funciona

• SOL: getBalance.
• Tokens SPL: ATAs + decodificadores del programa de tokens.
• NFTs: getAsset de DAS en proveedores RPC compatibles.
• Estado del programa: Ayudantes de obtención de Codama.

Trampas comunes

• Matemáticas de punto flotante en cantidades de tokens - pérdida de precisión. Solución: bigint hasta el formato final.
• Decimales de token incorrectos - errores de visualización 1000x. Solución: leer los decimales de la acuñación.
• DAS en RPC que no es DAS - método faltante. Solución: verificación de capacidad del proveedor.
• Sin estado vacío - cero o carga confusos. Solución: estados explícitos.
• Imágenes de Mainnet desde URIs no confiables - XSS a través de metadatos. Solución: sanitizar URLs.

Alternativas

Preguntas frecuentes

Relacionado

• Lecturas del lado del servidor - Obtención de RSC
• La API DAS - Metadatos NFT
• Caché y tiempo real - datos frescos

Versiones de la pila: Esta página se escribió 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 y LiteSVM 0.6.x.