> ## Documentation Index
> Fetch the complete documentation index at: https://www.helius.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# UI Swap yang Dipersonalisasi
> Gunakan toolkit AI Helius untuk membangun antarmuka swap yang dipersonalisasi di Solana.
## Pendahuluan
Panduan ini memandu Anda melalui alur pengembangan berbantuan AI untuk membangun UI swap token di Solana. Fitur unggulannya adalah panel yang menampilkan pasangan yang paling sering diperdagangkan oleh pengguna dan memungkinkan pengguna memilih salah satunya dengan sekali klik. Hal ini menciptakan pengalaman yang dipersonalisasi.
Setiap bagian menunjukkan prompt persis yang digunakan, output yang dihasilkan model, dan cara kami menggunakan [toolkit AI Helius](/docs/id/agents/overview).
Panduan ini menampilkan teknologi berikut:
* Integrasi dompet [Phantom](/docs/id/agents/skills/phantom)
* [DFlow](/docs/id/agents/skills/dflow) untuk kuotasi dan swap
* [Helius Sender](/docs/id/sending-transactions/sender) untuk pengiriman transaksi yang cepat
* [Helius Enhanced Transactions](/docs/id/enhanced-transactions/overview) untuk penguraian transaksi
## Hasil akhir
## Penyiapan
Sebelum memulai, instal [plugin Helius Claude Code](/docs/id/agents/claude-code-plugin). Di dalam Claude Code, jalankan perintah berikut sebagai dua perintah terpisah:
```
/plugin marketplace add helius-labs/core-ai
```
```
/plugin install helius@helius-labs
```
Dalam panduan ini, kami akan menggunakan Opus 4.6 sebagai model. Silakan beralih model jika diperlukan.
Panduan ini dimaksudkan sebagai demonstrasi. Output model bahasa besar (LLM) pada dasarnya bersifat acak, sehingga meskipun Anda menggunakan prompt yang sama persis seperti dalam panduan ini, hasilnya mungkin berbeda.
## Prompt awal
Gunakan prompt ini untuk menentukan seluruh UI dan perilakunya sekaligus:
Buat antarmuka swap token yang dipersonalisasi untuk Solana.
Tambahkan UI swap token dengan gaya umum: kotak di tengah dengan dua pemilih token dan tombol swap.
Di sebelah kanannya, tampilkan daftar pasangan token yang dapat dipilih langsung oleh pengguna. Tampilkan logo setiap token di samping namanya.
Untuk menghitung daftar tersebut, lakukan hal berikut: Setelah pengguna menghubungkan dompetnya, periksa riwayat swap mereka dan ambil 10 pasangan perdagangan terbaru yang mereka gunakan. Urutkan berdasarkan frekuensi swap.
Prompt ini menetapkan:
* Tata letak inti (kotak swap + panel pasangan terbaru)
* Aturan personalisasi (riwayat dompet)
* Strategi pemeringkatan (frekuensi berdasarkan penggunaan terbaru)
Dalam kasus kami, model mengusulkan hal berikut:
> Saya akan menyiapkan kerangka proyeknya. Saya akan membuat aplikasi Vite + React + TypeScript dengan koneksi dompet Phantom, swap DFlow melalui Helius Sender, dan riwayat swap dari Helius Wallet API.
Ini adalah tumpukan teknologi yang tepat:
* Vite + React + TypeScript untuk UI modern yang aman dari segi tipe
* Phantom untuk koneksi dompet dan penandatanganan
* DFlow untuk kuotasi terbaik
* API Helius untuk riwayat dompet
* Helius Sender untuk pengiriman transaksi
Model tersebut menginstruksikan kami untuk menambahkan file `.env` dengan kunci API Helius kami. Setelah melakukannya, kami menjalankan aplikasi dengan `npm run dev`:
## Pasangan terbaru yang tidak muncul
Setelah menghubungkan dompet, kami melihat bahwa beberapa pasangan perdagangan yang baru saja kami swap tidak muncul di panel pasangan terbaru. Karena itu, kami meminta agen untuk menyelidikinya:
Bonk / SOL tidak ditampilkan sebagai Pasangan Terbaru meskipun memiliki swap terbaru. Bisakah Anda memeriksa penyebabnya?
2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
Untuk menyelesaikan masalah ini, agen perlu mengetahui riwayat transaksi dompet tersebut. Karena kami hanya memberikan alamat dompet, agen memutuskan untuk langsung menggunakan dua alat [Helius MCP](/docs/id/agents/mcp) guna memperoleh informasi tersebut: `getTransactionHistory` dan `parseTransactions`.
Hal ini memungkinkannya mengidentifikasi bug dengan cepat:
> Kode hanya mengandalkan events.swap, bukan menganalisis transfer token yang sebenarnya.
> Saya akan memperbaiki ekstraksi riwayat swap agar menggunakan tokenTransfers dan
> nativeTransfers secara langsung.
Jadi, agen memperbaiki masalah tersebut dengan mengubah cara kami mendeteksi pasangan perdagangan: Sekarang kami cukup memeriksa token mana yang ditransfer masuk dan keluar dari dompet dalam suatu transaksi.
Sekarang kami dapat melihat semua pasangan perdagangan kami di aplikasi:
## Penyempurnaan UI
Meskipun desain keseluruhan aplikasi sudah baik, tata letak UI swap masih perlu disempurnakan:
Perbaiki desain kotak pemilih token:
Letakkan pemilih token di sebelah kanan.
Buat lebar kolom input jumlah menjadi fleksibel agar pas dengan rapi di dalam kotak.
Agen segera menerapkan perubahan UI ini:
## Tampilan kuotasi
Saat ini, jumlah token dalam UI swap harus ditetapkan secara manual. Artinya, pengguna tidak dapat melihat jumlah token yang akan mereka terima.
Akan berguna jika kolom jumlah token diisi secara otomatis berdasarkan kuotasi DFlow terbaru.
Saat pengguna memasukkan jumlah untuk satu token, ambil kuotasi dan tampilkan jumlah output untuk token lainnya.
Untuk menerapkan hal ini, agen menggunakan keahlian [DFlow](/docs/id/agents/skills/dflow) untuk menemukan endpoint yang tepat guna mengambil kuotasi.
UI swap kini mengambil dan menampilkan jumlah output yang dikuotasikan secara dinamis:
## Menambahkan informasi swap
Setelah swap dikonfirmasi, pengguna tidak dapat memverifikasinya secara on-chain. Mari tambahkan kemampuan tersebut ke UI:
Tampilkan tanda tangan transaksi lengkap setelah swap berhasil. Tambahkan juga tautan ke penjelajah blockchain.
Untuk pengujian, kami melakukan contoh swap:
Sekarang, informasinya ditampilkan di UI:
