# ★★Cara mengintegrasikan Omniston ke aplikasi React Anda

Ingin menambahkan swap yang kuat dan terdesentralisasi ke aplikasi berbasis TON Anda? Omniston membuatnya sangat mudah. Panduan ini memandu Anda melalui hal-hal penting dalam mengintegrasikan Omniston menggunakan React SDK resmi.

#### Apa Itu Omniston?

Omniston adalah protokol agregasi likuiditas terdesentralisasi yang dibangun untuk blockchain TON. Ini menghubungkan banyak DEX dan market maker ke dalam satu sistem terpadu, memastikan pengguna Anda selalu mendapatkan harga terbaik saat menukar token. Dengan mengarahkan perdagangan melalui jalur paling likuid menggunakan mekanisme Request-for-Quote (RFQ), Omniston menangani kerumitan penentuan harga — jadi Anda tidak perlu melakukannya.

<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>

#### Siapa yang Sebaiknya Mengintegrasikan Omniston?

Dari wallet hingga platform DeFi, Omniston membuka fungsionalitas, efisiensi, dan aliran pendapatan baru:

* Wallet & Aplikasi Portofolio → Pertahankan pengguna tetap di aplikasi Anda dengan swap dalam wallet dan hasilkan pendapatan referensi.
* Game & Marketplace NFT → Biarkan pemain menukar token secara native di UI, mendorong lebih banyak pembelian dan UX yang lebih mulus.
* dApps DeFi → Segera agregasikan likuiditas dan tawarkan harga optimal — tidak perlu mengelola banyak API DEX.
* Startup TON → Percepat pengembangan dan tawarkan fungsionalitas setara DeFi sejak hari pertama.

Sekarang, mari kita lihat cara membawanya ke dalam aplikasi Anda.

#### 🛠 Mulai Cepat: 6 Langkah Integrasi

**1. Instal SDK**

Mulailah dengan menambahkan SDK ke proyek Anda:

`pnpm install @ston-fi/omniston-sdk-react`

Paket ini mencakup semua React hooks dan utilitas yang Anda perlukan.

🧠 Kiat Pro: SDK ini sepenuhnya open-source — jika Anda ingin menyelami lebih dalam atau menyesuaikan logikanya,[ repo GitHub](https://github.com/ston-fi/omniston-sdk-react) adalah tempat yang bagus untuk memulai.

**2. Bungkus Aplikasi Anda dengan OmnistonProvider**

Di komponen root aplikasi Anda (mis., *\_app.tsx* atau *index.tsx*), bungkus aplikasi Anda dengan provider:

`import { OmnistonProvider } from "@ston-fi/omniston-sdk-react";`

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

&#x20; `{/* komponen aplikasi Anda */}`

`</OmnistonProvider>`

Ini menetapkan koneksi WebSocket ke backend agregasi Omniston.

🧠 Kiat Pro: Tidak perlu backend. SDK menangani komunikasi blockchain dan manajemen quote melalui WebSocket — integrasi Anda tetap ringan dan hanya frontend.

**3. Tambahkan Dukungan Wallet TON**

Anda dapat menggunakan TON Connect untuk mengintegrasikan konektivitas wallet:

`pnpm install @tonconnect/ui-react`

Lalu buat tombol "Connect Wallet" menggunakan hooks TonConnect. Ini memungkinkan pengguna menyetujui transaksi menggunakan wallet yang familiar seperti Tonkeeper atau TON Space.

**4. Minta Quote**

Gunakan hook Omniston `useRfq` untuk mengambil quote swap.

Omniston secara otomatis mengarahkan melalui token perantara jika diperlukan dan mengembalikan harga terbaik yang tersedia.

🧠 Kiat Pro: Tidak ada pool untuk pasangan token Anda? Tidak masalah. Omniston menggunakan routing cerdas untuk menemukan jalur melalui token perantara — pengguna Anda dapat menukar token apa pun yang tersedia di TON.

**5. Eksekusi Swap**

Setelah pengguna mengonfirmasi quote, gunakan hook `useOmniston` untuk mengeksekusi transaksi.&#x20;

Omniston menggunakan smart contract berbasis HTLC untuk mengeksekusi swap secara aman di on-chain.

🧠 Kiat Pro: Sistem RFQ Omniston mengunci rate sebelum pengguna menandatangani. Tidak ada kejutan slippage — pengguna mendapatkan tepat rate yang mereka setujui.

**6. Lacak Status Swap (opsional)**

Gunakan `useTrackTrade` untuk memantau progres perdagangan dan memperbarui UI Anda sesuai kebutuhan. Ini sangat bagus untuk memberikan umpan balik kepada pengguna — misalnya, Anda bisa menampilkan spinner loading sampai perdagangan dikonfirmasi di on-chain, lalu menampilkan pesan sukses setelah token ditukar.

#### 🔍 Ingin Mempelajari Lebih Lanjut?

* Aplikasi Demo:[ omniston.ston.fi](https://omniston.ston.fi)
* Panduan Quickstart: [Panduan Omniston ](https://docs.ston.fi/developer-section/quickstart/omniston)
* Repo GitHub:[ STON.fi Omniston SDK\ <br>](https://github.com/ston-fi/omniston-sdk-react)

Anda dapat melakukan fork pada contoh Replit yang live dan langsung bereksperimen di browser.

***

#### 🧠 Kiat Pro

Omniston mendukung pembagian pendapatan melalui biaya referensi. Tetapkan alamat `referrer` di permintaan swap untuk mendapatkan biaya dari setiap perdagangan yang dieksekusi melalui aplikasi Anda.

***

Omniston mengabstraksi kerumitan swap token berbasis blockchain dan menghadirkan SDK tingkat tinggi yang terasa seperti library React modern lainnya. Baik Anda membangun wallet, game, maupun aplikasi DeFi penuh — menambahkan Omniston memberi Anda likuiditas dalam yang besar dan smart routing hanya dengan beberapa baris kode.

<br>


---

# 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/id/cara-mengintegrasikan-omniston-ke-aplikasi-react-anda.md?ask=<question>
```

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.