DeFindex Integration Tutorial

Tutorial completo para integrar DeFindex en wallets y aplicaciones. Este repositorio contiene todo el material necesario para producir un video tutorial (~7-8 min) y demos funcionales.

---

Objetivo

Demostrar cómo integrar DeFindex usando la API REST:

• Consultar información de vaults (APY, TVL, fees)
• Obtener balances de usuarios
• Realizar depósitos y retiros
• Firmar y enviar transacciones

---

Milestones

Fase	Estado	Descripción
Pre-producción: Guion	[x] Completado	Guion de video escrito y estructura definida
Pre-producción: Código	[x] Completado	3 demos funcionales (CLI, Backend, Frontend)
Pre-producción: Assets	[x] Completado	Gráficos, videos y QR codes listos
Pre-producción: Audio	[ ] Pendiente	Música de fondo y efectos
Producción: Grabación	[ ] Pendiente	Clips de cámara y pantalla
Post-producción	[ ] Pendiente	Edición, subtítulos, export

---

Demos Funcionales

Tres demos que muestran diferentes formas de integrar DeFindex:

Demo	Stack	Estado
CLI con cURL	Bash, curl, jq	[x] Completado
Backend Node.js	TypeScript, fetch nativo	[x] Completado
Frontend React	React 19, Stellar Wallets Kit	[x] Completado

Cada demo sigue la misma estructura de 7 secciones para facilitar el aprendizaje durante el videotutorial.

---

Estructura del Proyecto

.
├── README.md                    # Este archivo
├── assets/                      # Recursos multimedia
│   ├── img/                     # Imágenes y diagramas
│   │   └── qr_codes_defindex/   # Códigos QR para CTA
│   └── vid/                     # Videos y animaciones
├── docs/                        # Documentación de producción
│   ├── checklist-produccion.md  # Checklist maestro de producción
│   ├── guion-video.md           # Guion completo del video
│   ├── recursos-multimedia.md   # Guía de estilo visual + prompts IA
│   └── opt/                     # Contenido opcional
│       ├── short-form-videos.md # Scripts TikTok/Reels
│       └── twitter-thread.md    # Hilos de Twitter
└── src/demo/                    # Código de demos
    ├── docs/                    # Documentación técnica
    │   ├── plan.md              # Plan de demos
    │   ├── notas-desarrollo.md  # Aprendizajes y errores comunes
    │   └── postman_collection.json
    ├── cli-curl/                # Demo CLI
    │   ├── README.md
    │   └── defindex.sh
    ├── backend-node/            # Demo Backend
    │   ├── README.md
    │   ├── package.json
    │   └── src/index.ts
    └── frontend-api/            # Demo Frontend
        ├── README.md
        ├── package.json
        └── src/App.tsx

---

Índice de Archivos Clave

Documentación de Producción

Archivo	Descripción
docs/checklist-produccion.md	Checklist maestro con todo lo necesario para producir el video
docs/guion-video.md	Guion completo con 13 clips, timing y transcripción
docs/recursos-multimedia.md	Paleta de colores, tipografía, prompts para IA, seguridad

Documentación Técnica

Archivo	Descripción
src/demo/docs/notas-desarrollo.md	Aprendizajes clave de la API (campos, conversiones, errores)
src/demo/docs/plan.md	Plan original y estado de cada demo
src/demo/docs/postman_collection.json	Colección Postman lista para importar

Demos

Archivo	Descripción
src/demo/cli-curl/defindex.sh	Script Bash con comandos cURL
src/demo/backend-node/src/index.ts	Backend TypeScript con CLI
src/demo/frontend-api/src/App.tsx	Frontend React con Stellar Wallets Kit

---

Conceptos Clave

Autenticación API

headers: {
  'Authorization': `Bearer ${API_KEY}`,
  'Content-Type': 'application/json'
}

Conversión de Montos

Todos los montos están en stroops (7 decimales):

const toTokens = (stroops: string) => Number(stroops) / 10_000_000;
const toStroops = (tokens: number) => Math.floor(tokens * 10_000_000);

Campos Array

Un vault puede contener múltiples tokens, por eso estos campos son arrays:

• totalManagedFunds[] - TVL por cada asset
• underlyingBalance[] - Balance del usuario por cada asset
• amounts[] - En requests de deposit/withdraw

Diferencias API vs Documentación SDK

Documentación	API Real
shares	dfTokens
underlyingBalance (número)	underlyingBalance (array)

---

Quick Start

CLI con cURL

cd src/demo/cli-curl
cp .env.example .env  # Editar con tu API key
./defindex.sh vault-info

Backend Node.js

cd src/demo/backend-node
pnpm install
cp .env.example .env  # Editar con tu API key
pnpm start vault-info

Frontend React

cd src/demo/frontend-api
pnpm install
cp .env.example .env  # Editar con tu API key
pnpm dev

---

URLs y Recursos

Recurso	URL
Documentación	https://docs.defindex.io/
API Docs	https://api.defindex.io/docs
Discord	https://discord.gg/8qHbAYmZ8g
GitHub	https://github.com/paltalabs/defindex
npm SDK	https://www.npmjs.com/package/@defindex/sdk

---

Configuración de Prueba (Testnet)

API_URL=https://api.defindex.io
VAULT_ADDRESS=CCLV4H7WTLJQ7ATLHBBQV2WW3OINF3FOY5XZ7VPHZO7NH3D2ZS4GFSF6
NETWORK=testnet

---

Contribuir

1. Las demos están diseñadas para ser educativas, no para producción
2. Cada archivo sigue la estructura de 7 secciones documentada en plan.md
3. Seguir la guía de estilo visual de recursos-multimedia.md