> 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/fr/comment-integrer-omniston-dans-votre-application-react.md).
# ★★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.
