Skip to main content

​
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. Panduan ini menampilkan teknologi berikut:

​
Hasil akhir

UI swap yang dipersonalisasi dengan panel pasangan terbaru

Personalized swap UI with recent pairs panel

​
Penyiapan

Sebelum memulai, instal plugin Helius Claude Code. Di dalam Claude Code, jalankan perintah berikut sebagai dua perintah terpisah:
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:

Prompt

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:
Versi awal aplikasi

Initial version of the app

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

Prompt

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 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:
Semua pasangan perdagangan ditampilkan

All trading pairs shown

​
Penyempurnaan UI

Meskipun desain keseluruhan aplikasi sudah baik, tata letak UI swap masih perlu disempurnakan:

Prompt

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:
Tata letak baru untuk kotak pemilih token

New layout for the token selector box

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

Prompt

Saat pengguna memasukkan jumlah untuk satu token, ambil kuotasi dan tampilkan jumlah output untuk token lainnya.
Untuk menerapkan hal ini, agen menggunakan keahlian DFlow untuk menemukan endpoint yang tepat guna mengambil kuotasi. UI swap kini mengambil dan menampilkan jumlah output yang dikuotasikan secara dinamis:
Pratinjau kuotasi yang menampilkan jumlah output di kolom penerimaan

Quote preview showing the output amount in the receive field

​
Menambahkan informasi swap

Setelah swap dikonfirmasi, pengguna tidak dapat memverifikasinya secara on-chain. Mari tambahkan kemampuan tersebut ke UI:

Prompt

Tampilkan tanda tangan transaksi lengkap setelah swap berhasil. Tambahkan juga tautan ke penjelajah blockchain.
Untuk pengujian, kami melakukan contoh swap:
Popup konfirmasi dompet saat penandatanganan swap

Wallet confirmation popup during swap signing

Sekarang, informasinya ditampilkan di UI:
Output swap yang berhasil dengan tanda tangan lengkap dan tautan penjelajah

Successful swap output with full signature and explorer link