DeFi Solana: UI Jupiter Swap (2023)

Pendahuluan

Jupiter adalah agregator berbagai DEX dan AMM yang menemukan swap paling efisien melalui beragam bursa tersebut. Jupiter kemudian menemukan rute swap dengan harga terbaik untuk Anda di berbagai DEX dan AMM lain, sehingga Anda mendapatkan harga terbaik. Baik Anda hanya ingin melakukan swap ke stablecoin maupun berinteraksi dengan token dari game DeFi favorit Anda, interaksi dengan Jupiter sangatlah penting.

UI Jupiter Swap: Gambaran Umum

Pelajari cara berinteraksi dengan Jupiter secara terprogram melalui panduan singkat ini! Panduan ini akan memandu Anda membuat dApp yang menggunakan API Jupiter untuk mengambil kuotasi harga dan menjalankan swap SOL ke USDC berdasarkan input pengguna. Aplikasi ini menampilkan berbagai fungsi berguna, seperti pengambilan kuotasi harga secara real-time dan transaksi swap yang ditandatangani pengguna. Selama mengikuti blog ini, Anda dapat merujuk ke repositori berikut yang berisi seluruh kode yang telah selesai.

Berikut repositori lengkapnya: GitHub - Tidelaw/jup-ui

Prasyarat

Pastikan komponen berikut telah diinstal:

• Node.js
• Next.js
• Tailwind (mungkin sudah disertakan dalam Next.js)

Dependensi

Anda sangat disarankan mengikuti blog Connect Wallet agar dapat menyiapkan folder contexts dengan benar, sehingga pengguna bisa menghubungkan dompet dan menandatangani transaksi swap.

Satu-satunya dependensi tambahan yang tidak disertakan saat proyek pertama kali dibuat dan dalam blog Connect Wallet adalah paket @project-serum/anchor dan axios. Sebaiknya cukup salin package.json ini agar Anda dapat menjalankan npm i untuk menginstal semuanya sekaligus.

Swap.tsx

Pertama, kita akan mengimplementasikan fungsi kuotasi harga yang mengembalikan estimasi jumlah USDC untuk jumlah SOL yang dimasukkan. Proses ini cukup sederhana melalui Jupiter. Kita hanya perlu memberikan alamat mint input dan output token, serta jumlah yang ingin ditukar.

Variabel state diperlukan untuk menyimpan jumlah SOL yang ingin ditukar pengguna. Pertama, kita akan menyiapkan input: kode di bawah menyertakan slider DaisyUI dan input teks (keduanya sebagai tag <input>), meskipun hanya salah satunya yang diperlukan. Tag input memerlukan properti value dan onChange agar dapat terus memperbarui variabel state.

Sekarang, kita dapat membuat hook useEffect. Saat pengguna memasukkan nilai SOL baru yang akan dikonversi, kita akan mengirim permintaan ke Jupiter untuk mengambil kuotasi harga berdasarkan jumlah yang diminta pengguna.

Quote.tsx

Sekarang kita dapat beralih ke folder src/api/ dan membuat file baru bernama quote.tsx. Di sinilah kita akan mengirim permintaan ke Jupiter untuk memperoleh jumlah yang dikuotasikan. Untuk menerima permintaan secara internal, kita perlu menyiapkan fungsi handler yang hanya mengizinkan permintaan POST. Setelah menerima permintaan dari frontend yang berisi jumlah yang ingin ditukar pengguna, kita hanya perlu mengubah URL dalam config menjadi req.body.amount, lalu mengirim permintaan ke Jupiter.

Berikut contoh payload yang dikembalikan. Kita akan meneruskan objek ini kembali ke frontend agar dapat mengirimkannya ke endpoint lain untuk melakukan swap.

Perhatikan abstraksi { data } yang mengakses properti data.data. Dengan abstraksi ini, kita cukup meneruskan data secara langsung kembali ke frontend melalui res.status(200).json(data).

Sekarang, dalam fungsi return, kita akan memperbarui variabel state quoted setelah API internal merespons dengan data di atas. Setelah itu, kita dapat mengakses properti USDC yang tepat. Namun, nilainya perlu dibagi 1 juta dan dibulatkan ke 2 angka desimal agar mencerminkan jumlah USD yang benar. Ini serupa dengan cara SOL native dinyatakan dalam Lamport dan harus dibagi satu miliar.

Sekarang, kita cukup menyisipkannya ke dalam HTML dan nilainya akan ditampilkan di frontend.

UI Jupiter: Melakukan Swap

Setelah memiliki objek kuotasi simulasi, kita dapat membuat fungsi baru yang melakukan swap dan mengirim permintaan ke endpoint API.

Sekarang kita dapat membuat endpoint API untuk menerima permintaan ini, dengan path file src/api/swap . Contoh ini menggunakan alamat dompet yang diketik secara statis. Namun, Anda dapat menggunakan hook useWallet dan meneruskannya ke endpoint. Setelah kita mengirim permintaan ke endpoint swap dengan objek kuotasi, kita akan mendapatkan transaksi berseri yang hanya perlu ditandatangani di frontend. Anda dapat mengujinya dengan mencatat objek tersebut ke konsol.

Setelah menerima transaksi berseri ini dari backend, kita dapat mulai menyiapkannya untuk dikirim. Pertama, kita perlu mendapatkan buffer transaksi, lalu melakukan deserialisasi agar transaksi dapat ditandatangani. Jika sebelumnya Anda telah mengikuti Panduan Connect Wallet, Anda seharusnya dapat menandatangani transaksi ini dengan wallet.signTransaction. Setelah menandatangani transaksi, kita akan melakukan serialisasi lagi dan mengirim transaksi menggunakan fungsi sendRawTransaction.

Fungsi tambahan dapat disertakan seperti pada situs jup.ag, tempat signature transaksi ditampilkan. Namun, saat ini signature tersebut hanya dicatat di konsol browser dan masih dapat diakses oleh pengguna teknis.

Kesimpulan: Memulai dengan Helius

Panduan ini telah memandu Anda membuat dApp yang mengambil kuotasi harga dan menjalankan swap SOL ke USDC berdasarkan input pengguna dengan API Jupiter. Semoga panduan ini berguna sebagai referensi di masa mendatang. Seperti biasa, silakan ajukan pertanyaan di Discord Helius. Selain itu, Anda dapat menggunakan RPC Helius gratis untuk membuat koneksi. Untuk beberapa ide pengembangan lebih lanjut bagi proyek ini, lihat bagian berikut. Jika Anda telah memahami mekanisme pembuatan dApp yang berinteraksi dengan API Jupiter untuk kuotasi harga dan swap, langkah berikutnya adalah memanfaatkan kemampuan Helius untuk pemantauan dan analitik. Karena Jupiter merupakan agregator yang menemukan rute swap terbaik di berbagai DEX dan AMM, data yang mengalir melaluinya sangat kaya dan bernilai untuk memahami dinamika pasar.

Langkah Berikutnya

• Properti tambahan dalam payload saat mengirim objek kuotasi ke endpoint swap.ts.
• Menampilkan signature transaksi
• Menyertakan token lain atau membalik pertukaran antara USDC dan SOL
• Penanganan error/responsivitas saat dompet tidak terhubung
• Melakukan deserialisasi dan mengirim TX di backend untuk menyamarkan RPC?

Referensi yang Digunakan

• https://station.jup.ag/docs/apis/swap-api#using-the-api
• https://station.jup.ag/api-v6/post-swap

‍