# ★★Cómo integrar Omniston en tu app de React ¿Quieres añadir swaps potentes y descentralizados a tu app basada en TON? Omniston lo hace sorprendentemente fácil. Esta guía te lleva por lo esencial de integrar Omniston usando el SDK oficial de React. #### ¿Qué es Omniston? Omniston es un protocolo descentralizado de agregación de liquidez creado para la blockchain TON. Conecta múltiples DEX y creadores de mercado en un sistema unificado, garantizando que tus usuarios siempre obtengan el mejor precio posible al intercambiar tokens. Al enrutar las operaciones a través de las rutas más líquidas mediante un mecanismo de Request-for-Quote (RFQ), se encarga de la complejidad del descubrimiento de precios, para que tú no tengas que hacerlo.
#### ¿Quién debería integrar Omniston? Desde wallets hasta plataformas DeFi, Omniston desbloquea funcionalidad, eficiencia y nuevas fuentes de ingresos: * Wallets y apps de portafolio → Mantén a los usuarios en tu app con swaps dentro de la wallet y genera ingresos por referidos. * Juegos y marketplaces de NFT → Permite que los jugadores conviertan tokens de forma nativa en la interfaz, impulsando más compras y una UX más fluida. * dApps DeFi → Agrega liquidez al instante y ofrece precios óptimos; no es necesario gestionar múltiples APIs de DEX. * Startups de TON → Acelera el desarrollo y ofrece funcionalidad de nivel DeFi desde el primer día. Ahora, veamos cómo llevarlo a tu app. #### 🛠 Inicio rápido: 6 pasos para la integración **1. Instala el SDK** Empieza añadiendo el SDK a tu proyecto: `pnpm install @ston-fi/omniston-sdk-react` Este paquete incluye todos los hooks y utilidades de React que necesitarás. 🧠 Consejo profesional: el SDK es completamente de código abierto; si quieres profundizar más o personalizar la lógica, el[ repositorio de GitHub](https://github.com/ston-fi/omniston-sdk-react) es un gran lugar para empezar. **2. Envuelve tu app con OmnistonProvider** En el componente raíz de tu app (por ejemplo, *\_app.tsx* o *index.tsx*), envuelve tu aplicación con el provider: `import { OmnistonProvider } from "@ston-fi/omniston-sdk-react";` `` `{/* componentes de tu app */}` `` Esto establece la conexión WebSocket con el backend de agregación de Omniston. 🧠 Consejo profesional: no se necesita backend. El SDK gestiona la comunicación con la blockchain y la administración de cotizaciones mediante WebSocket; tu integración se mantiene ligera y solo en frontend. **3. Añade soporte para wallets de TON** Puedes usar TON Connect para integrar la conectividad con la wallet: `pnpm install @tonconnect/ui-react` Luego crea un botón "Conectar wallet" usando los hooks de TonConnect. Esto permite a los usuarios aprobar transacciones usando wallets conocidas como Tonkeeper o TON Space. **4. Solicita una cotización** Usa el hook de Omniston `useRfq` para obtener cotizaciones de swap. Omniston enruta automáticamente a través de tokens intermedios si es necesario y devuelve el mejor precio disponible. 🧠 Consejo profesional: ¿no hay pool para tu par de tokens? No hay problema. Omniston usa enrutamiento inteligente para encontrar rutas a través de tokens intermediarios; tus usuarios pueden intercambiar cualquier token disponible en TON. **5. Ejecuta el swap** Una vez que el usuario confirma la cotización, usa el hook `useOmniston` para ejecutar la transacción. Omniston utiliza contratos inteligentes basados en HTLC para ejecutar swaps de forma segura en la cadena. 🧠 Consejo profesional: el sistema RFQ de Omniston fija la tasa antes de que el usuario firme. Sin sorpresas de slippage; los usuarios obtienen exactamente la tasa que aceptaron. **6. Rastrea el estado del swap (opcional)** Usa `useTrackTrade` para supervisar el progreso de la operación y actualizar tu interfaz en consecuencia. Esto es ideal para dar feedback al usuario; por ejemplo, podrías mostrar un indicador de carga hasta que la operación se confirme en la cadena y luego mostrar un mensaje de éxito una vez que los tokens se hayan intercambiado. #### 🔍 ¿Quieres saber más? * App de demostración:[ omniston.ston.fi](https://omniston.ston.fi) * Guía de inicio rápido: [Guía de Omniston ](https://docs.ston.fi/developer-section/quickstart/omniston) * Repositorio de GitHub:[ SDK de STON.fi Omniston\
](https://github.com/ston-fi/omniston-sdk-react) Puedes forkar el ejemplo en vivo de Replit y experimentar al instante en el navegador. *** #### 🧠 Consejo profesional Omniston admite el reparto de ingresos mediante comisiones por referidos. Establece una `dirección del referidor` en la solicitud de swap para ganar una comisión por cada operación ejecutada a través de tu app. *** Omniston abstrae la complejidad de los swaps de tokens basados en blockchain y ofrece un SDK de alto nivel que se siente como cualquier biblioteca moderna de React. Tanto si estás creando una wallet, un juego o una app DeFi completa, añadir Omniston pone liquidez profunda y enrutamiento inteligente en tus manos con solo unas pocas líneas de código.
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://guide.ston.fi/en/es/como-integrar-omniston-en-tu-app-de-react.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.