> For the complete documentation index, see [llms.txt](https://guide.ston.fi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.ston.fi/guides/es/como-integrar-omniston-en-tu-app-de-react.md).

# ★★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.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdveSq1KFhLJ2dxrOl_oaZ48MPvYiUvSvki2M1b-jeH6rCw5I8kNeiaKI7ZdvgkHJ_VcoSyuF2AbE7wOZrKRif-DFlA-OIWvYYjp6Hukb5CojE7HGo6AYCyIIy6rgxoNmtk5aw2nQ?key=BVHWJ_biPGWttmm0y5ElMXkT" alt="" width="375"><figcaption></figcaption></figure>

#### ¿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";`

`<OmnistonProvider apiUrl="wss://omni-ws.ston.fi">`

&#x20; `{/* componentes de tu app */}`

`</OmnistonProvider>`

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.&#x20;

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\ <br>](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.

<br>