Frontend

Resumen

El frontend es una landing page + dApp construida con Next.js 15 (App Router). Permite conectar wallet, inscribir datos y consultar el historial on-chain. Todo el texto de la UI está en inglés; la documentación del proyecto está en español.

Tecnologías

Estructura de páginas

app/layout.tsx

• Fuentes: Geist Sans + Geist Mono
• Metadata SEO y Open Graph
• Wrapper <Providers> con Wagmi + React Query
• Tema oscuro (#0a0f14)

app/page.tsx

Página única que compone todas las secciones:

Estado local:

• refreshKey — fuerza recarga del historial tras inscribir
• selectedId — ID de inscripción seleccionada
• lastTxHash — hash de la última transacción del usuario

Componentes

Header.tsx

Hero.tsx

Sección principal con:

• Badge "Open Inscription Protocol · Robinhood Chain L2"
• Título: "One Transaction. One Permanent Inscription."
• CTAs: "Start Inscribing" y "Read the Protocol"
• Stats: 1 = 1, ETH, 4663

Animaciones de entrada con Framer Motion.

InscribeForm.tsx

Formulario principal de inscripción.

Flujo:

1. Usuario escribe texto o sube archivo (mutuamente excluyentes)
2. Archivos limitados a 24 KB (validación frontend)
3. Contenido convertido a hex con textOrFileToHex()
4. writeContract({ functionName: 'inscribe', args: [data] })
5. useWaitForTransactionReceipt espera confirmación
6. Parsea inscriptionId del topics[1] del evento en el receipt
7. Llama onInscribed(id, txHash) al padre

Estados de UI:

• Signing... — wallet pendiente
• Confirming... — esperando bloque
• Mensaje de éxito con tx hash truncado
• Modo demo si NEXT_PUBLIC_REGISTRY_ADDRESS no está configurado

InscriptionHistory.tsx

Dos exportaciones:

InscriptionHistory

• Lee inscriptionCount() del contrato
• Carga las últimas 10 inscripciones
• Grid de tarjetas clicables
• Muestra: ID, tamaño, preview de datos, creator, fecha

InscriptionDetail

• Modal full-screen con animación spring
• Campos: Creator, Timestamp, Block, Size, Tx Hash (si disponible)
• Raw data en <pre> con scroll
• Link al Blockscout explorer

ProtocolSection.tsx

Documentación visual integrada en la landing:

• 4 feature cards (One Transaction, Raw Bytes, Fully On-Chain, Zero Permissions)
• Snippet del contrato
• Lista de exclusiones intencionales
• Nota sobre limitación del tx hash

Footer.tsx

Links a Blockscout y Robinhood Chain Docs.

Providers.tsx

<WagmiProvider config={wagmiConfig}>
  <QueryClientProvider client={queryClient}>
    {children}
  </QueryClientProvider>
</WagmiProvider>

Librerías (lib/)

chains.ts

Define dos cadenas con viem.defineChain:

wagmi.ts

createConfig({
  chains: [robinhoodChain, robinhoodTestnet],
  connectors: [injected()],
  transports: { ... },
  ssr: true,
})

Solo usa el connector injected (MetaMask, Rabby, Robinhood Wallet, etc.) para minimizar dependencias.

contract.ts

• INSCRIPTION_REGISTRY_ABI — ABI tipada as const
• INSCRIPTION_REGISTRY_ADDRESS — desde NEXT_PUBLIC_REGISTRY_ADDRESS
• EXPLORER_URL — Blockscout mainnet

utils.ts

Diseño visual

Paleta

Principios UI

• Dark mode nativo
• Bordes sutiles (border-white/10)
• Glassmorphism ligero (backdrop-blur)
• Gradientes en CTAs principales
• Animaciones de entrada al scroll (whileInView)
• Tipografía mono para datos on-chain

Variables de entorno

Sin esta variable, la app funciona en modo demo: muestra la UI pero no permite transacciones reales.

Scripts npm

npm run dev      # Desarrollo en localhost:3000
npm run build    # Build de producción
npm run start    # Servidor de producción
npm run lint     # Linter Next.js

Flujo de usuario completo

1. Usuario abre la landing
2. Conecta wallet (MetaMask, Robinhood Wallet, etc.)
3. Si no está en Robinhood Chain → botón "Switch Network"
4. Escribe mensaje o sube archivo pequeño
5. Clic "Inscribe On-Chain"
6. Firma transacción en wallet
7. Espera confirmación (~segundos en L2)
8. Modal de detalle se abre automáticamente
9. Historial se actualiza con la nueva inscripción

Siguiente lectura

• 06 — Instalación y desarrollo
• 07 — Despliegue