# ★★Comment intégrer Omniston dans votre application React
Vous voulez ajouter des swaps puissants et décentralisés à votre application basée sur TON ? Omniston le rend étonnamment simple. Ce guide vous accompagne à travers les éléments essentiels de l’intégration d’Omniston à l’aide du SDK React officiel.
#### Qu’est-ce qu’Omniston ?
Omniston est un protocole décentralisé d’agrégation de liquidité conçu pour la blockchain TON. Il relie plusieurs DEX et teneurs de marché en un système unifié, garantissant à vos utilisateurs le meilleur prix possible lors de l’échange de jetons. En acheminant les transactions via les voies les plus liquides à l’aide d’un mécanisme Request-for-Quote (RFQ), il prend en charge la complexité de la découverte des prix — vous n’avez donc pas à le faire.
#### Qui devrait intégrer Omniston ?
Des portefeuilles aux plateformes DeFi, Omniston débloque des fonctionnalités, de l’efficacité et de nouvelles sources de revenus :
* Portefeuilles et applications de portefeuille → Gardez les utilisateurs dans votre application avec des swaps intégrés au portefeuille et générez des revenus de parrainage.
* Jeux et places de marché NFT → Permettez aux joueurs de convertir des jetons nativement dans l’interface, ce qui stimule les achats et améliore l’expérience utilisateur.
* dApps DeFi → Agrégez instantanément la liquidité et proposez des prix optimaux — inutile de gérer plusieurs API de DEX.
* Startups TON → Accélérez le développement et proposez des fonctionnalités de niveau DeFi dès le premier jour.
Voyons maintenant comment l’intégrer à votre application.
#### 🛠 Démarrage rapide : 6 étapes pour l’intégration
**1. Installer le SDK**
Commencez par ajouter le SDK à votre projet :
`pnpm install @ston-fi/omniston-sdk-react`
Ce package inclut tous les hooks et utilitaires React dont vous aurez besoin.
🧠 Astuce de pro : le SDK est entièrement open source — si vous souhaitez approfondir ou personnaliser la logique, le[ dépôt GitHub](https://github.com/ston-fi/omniston-sdk-react) est un excellent point de départ.
**2. Enveloppez votre application avec OmnistonProvider**
Dans le composant racine de votre application (par ex. *\_app.tsx* ou *index.tsx*), enveloppez votre application avec le provider :
`import { OmnistonProvider } from "@ston-fi/omniston-sdk-react";`
``
`{/* vos composants d’application */}`
``
Cela établit la connexion WebSocket avec le backend d’agrégation d’Omniston.
🧠 Astuce de pro : aucun backend n’est nécessaire. Le SDK gère les communications blockchain et la gestion des devis via WebSocket — votre intégration reste légère et côté frontend uniquement.
**3. Ajouter la prise en charge du portefeuille TON**
Vous pouvez utiliser TON Connect pour intégrer la connectivité du portefeuille :
`pnpm install @tonconnect/ui-react`
Créez ensuite un bouton « Connecter le portefeuille » à l’aide des hooks de TonConnect. Cela permet aux utilisateurs d’approuver les transactions avec des portefeuilles familiers comme Tonkeeper ou TON Space.
**4. Demander un devis**
Utilisez le hook d’Omniston `useRfq` pour récupérer des devis d’échange.
Omniston s’achemine automatiquement via des jetons intermédiaires si nécessaire et renvoie le meilleur prix disponible.
🧠 Astuce de pro : pas de pool pour votre paire de jetons ? Aucun problème. Omniston utilise un routage intelligent pour trouver des chemins via des jetons intermédiaires — vos utilisateurs peuvent échanger n’importe quels jetons disponibles sur TON.
**5. Exécuter le swap**
Une fois que l’utilisateur confirme le devis, utilisez le hook `useOmniston` pour exécuter la transaction.
Omniston utilise des contrats intelligents basés sur HTLC pour exécuter les swaps de manière sécurisée sur la chaîne.
🧠 Astuce de pro : le système RFQ d’Omniston verrouille le taux avant la signature de l’utilisateur. Aucune mauvaise surprise de slippage — les utilisateurs obtiennent exactement le taux qu’ils ont accepté.
**6. Suivre l’état du swap (facultatif)**
Utilisez `useTrackTrade` pour surveiller la progression de la transaction et mettre à jour votre interface en conséquence. C’est idéal pour fournir un retour à l’utilisateur — par exemple, vous pouvez afficher une icône de chargement jusqu’à ce que la transaction soit confirmée sur la chaîne, puis afficher un संदेश de succès une fois les jetons échangés.
#### 🔍 Vous voulez en savoir plus ?
* Application de démonstration :[ omniston.ston.fi](https://omniston.ston.fi)
* Guide de démarrage rapide : [Guide Omniston ](https://docs.ston.fi/developer-section/quickstart/omniston)
* Dépôt GitHub :[ SDK Omniston de STON.fi\ ](https://github.com/ston-fi/omniston-sdk-react)
Vous pouvez forker l’exemple Replit en direct et expérimenter instantanément dans le navigateur.
***
#### 🧠 Astuce de pro
Omniston prend en charge le partage des revenus via des frais de parrainage. Définissez une adresse de `parrain` dans la requête de swap pour gagner des frais sur chaque transaction exécutée via votre application.
***
Omniston abstrait la complexité des swaps de jetons sur blockchain et fournit un SDK de haut niveau qui ressemble à n’importe quelle bibliothèque React moderne. Que vous construisiez un portefeuille, un jeu ou une application DeFi complète — ajouter Omniston met une liquidité profonde et un routage intelligent entre vos mains avec seulement quelques lignes de code.
---
# 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/fr/comment-integrer-omniston-dans-votre-application-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.
