Solana DeFi: Giao diện Jupiter Swap (2023)
Giới thiệu
Jupiter là một công cụ tổng hợp nhiều DEX và AMM, giúp tìm ra các giao dịch hoán đổi hiệu quả nhất trên những sàn giao dịch này. Sau đó, Jupiter tìm các lộ trình hoán đổi có mức giá tốt nhất cho bạn trên nhiều DEX và AMM khác, bảo đảm bạn nhận được mức giá tối ưu. Dù chỉ muốn hoán đổi sang stablecoin hay tương tác với token trong trò chơi DeFi yêu thích, việc tích hợp với Jupiter là điều thiết yếu.
Giao diện Jupiter Swap: Tổng quan
Tìm hiểu cách tương tác với Jupiter bằng lập trình qua hướng dẫn ngắn này! Hướng dẫn sẽ chỉ cho bạn cách tạo một dApp sử dụng API của Jupiter để lấy báo giá và thực hiện giao dịch hoán đổi SOL sang USDC dựa trên dữ liệu người dùng nhập. Ứng dụng này minh họa các chức năng hữu ích như lấy báo giá theo thời gian thực và giao dịch hoán đổi do người dùng ký. Trong khi đọc bài viết, bạn có thể tham khảo kho mã nguồn sau đây, nơi chứa toàn bộ mã hoàn chỉnh.
Đây là kho mã nguồn hoàn chỉnh: GitHub - Tidelaw/jup-ui
Điều kiện tiên quyết
Hãy đảm bảo đã cài đặt các công cụ sau:
- Node.js
- Next.js
- Tailwind (có thể đã được tích hợp trong Next.js)
Các phần phụ thuộc
Bạn nên làm theo bài viết Connect Wallet để thiết lập chính xác thư mục contexts, cho phép người dùng kết nối ví và ký các giao dịch hoán đổi.
Các phần phụ thuộc bổ sung duy nhất không có trong quá trình khởi tạo dự án và bài viết về kết nối ví là các gói @project-serum/anchor và axios. Bạn nên sao chép package.json này để chỉ cần chạy npm i và cài đặt tất cả cùng lúc.
Swap.tsx
Trước tiên, chúng ta sẽ triển khai chức năng báo giá, trả về lượng USDC ước tính nhận được từ số SOL đã nhập. Việc này khá đơn giản với Jupiter: chúng ta chỉ cần cung cấp địa chỉ mint đầu vào và đầu ra của token, cùng số lượng muốn hoán đổi.
Cần có một biến trạng thái để lưu số SOL mà người dùng muốn hoán đổi. Trước tiên, hãy thiết lập các trường nhập liệu: đoạn mã dưới đây bao gồm cả thanh trượt DaisyUI và trường nhập văn bản (đều là thẻ <input>), nhưng chỉ cần dùng một trong hai. Thẻ input cần có thuộc tính value và onChange để liên tục cập nhật biến trạng thái.
Giờ đây, chúng ta có thể tạo một hook useEffect. Khi người dùng nhập lượng SOL mới cần chuyển đổi, hook này sẽ gửi yêu cầu đến Jupiter để lấy báo giá cho số lượng mà người dùng yêu cầu.
Quote.tsx
Bây giờ, chúng ta có thể chuyển đến thư mục src/api/ và tạo một tệp mới có tên quote.tsx. Đây là nơi gửi yêu cầu đến Jupiter để lấy số lượng được báo giá. Để tiếp nhận yêu cầu nội bộ, chúng ta cần thiết lập hàm handler và chỉ cho phép các yêu cầu POST. Sau khi nhận yêu cầu từ frontend chứa số lượng người dùng muốn hoán đổi, chúng ta chỉ cần đổi URL trong config thành req.body.amount rồi gửi yêu cầu đến Jupiter.
Đây là ví dụ về payload được trả về. Chúng ta sẽ chuyển đối tượng này trở lại frontend để gửi tiếp đến một endpoint khác, nơi giao dịch hoán đổi sẽ được thực hiện.
Lưu ý phép trừu tượng hóa { data } truy cập thuộc tính data.data. Nhờ đó, chúng ta có thể chuyển trực tiếp data trở lại frontend thông qua res.status(200).json(data).
Trong hàm trả về, chúng ta sẽ cập nhật biến trạng thái quoted sau khi API nội bộ phản hồi với dữ liệu ở trên. Sau đó, chúng ta có thể truy cập chính xác thuộc tính của USDC, nhưng cần chia giá trị này cho 1 triệu và làm tròn đến 2 chữ số thập phân để phản ánh đúng số tiền USD. Cách này tương tự như cách SOL gốc được biểu thị bằng Lamport và phải chia cho 1 tỷ.
Giờ đây, chúng ta chỉ cần chèn giá trị đó vào HTML và nó sẽ hiển thị trên frontend.
Giao diện Jupiter: Thực hiện giao dịch hoán đổi
Giờ đã có đối tượng báo giá mô phỏng, chúng ta có thể tạo một hàm mới để thực hiện giao dịch hoán đổi và gửi yêu cầu đến endpoint API.
Bây giờ, chúng ta có thể tạo một endpoint API để nhận yêu cầu này tại đường dẫn tệp src/api/swap . Ví dụ này sử dụng một địa chỉ ví được định kiểu tĩnh, nhưng bạn có thể dùng hook useWallet rồi chuyển địa chỉ đó vào endpoint. Sau khi gửi đối tượng báo giá đến endpoint swap, chúng ta nhận được một giao dịch đã tuần tự hóa và chỉ cần ký giao dịch đó trên frontend. Bạn có thể kiểm thử bằng cách ghi đối tượng vào console.
Sau khi nhận giao dịch đã tuần tự hóa này từ backend, chúng ta có thể bắt đầu chuẩn bị để gửi đi. Trước tiên, cần lấy buffer của giao dịch rồi giải tuần tự hóa để có thể ký. Nếu đã làm theo Hướng dẫn Connect Wallet trước đó, bạn chỉ cần ký giao dịch này bằng wallet.signTransaction. Sau khi ký, chúng ta sẽ tuần tự hóa lại rồi gửi giao dịch bằng hàm sendRawTransaction.
Có thể bổ sung các chức năng như trên trang jup.ag thực tế, nơi chữ ký giao dịch được hiển thị. Tuy nhiên, hiện tại chữ ký chỉ được ghi vào console của trình duyệt nhưng người dùng có kiến thức kỹ thuật vẫn có thể truy cập.
Kết luận: Bắt đầu với Helius
Hướng dẫn này đã chỉ cho bạn cách tạo một dApp sử dụng API của Jupiter để lấy báo giá và thực hiện giao dịch hoán đổi SOL sang USDC dựa trên dữ liệu người dùng nhập. Hy vọng hướng dẫn này sẽ hữu ích để bạn tham khảo sau này. Như thường lệ, bạn có thể đặt câu hỏi trong Helius Discord. Ngoài ra, bạn có thể dùng Helius RPC miễn phí để thiết lập kết nối. Hãy xem các gợi ý sau nếu muốn mở rộng dự án. Nếu đã hiểu cơ chế xây dựng một dApp tương tác với API của Jupiter để lấy báo giá và thực hiện giao dịch hoán đổi, bước tiếp theo là tận dụng sức mạnh của Helius cho hoạt động giám sát và phân tích. Bản thân Jupiter là một công cụ tổng hợp giúp tìm các lộ trình hoán đổi tốt nhất trên nhiều DEX và AMM, vì vậy dữ liệu đi qua nền tảng này vô cùng phong phú và có giá trị trong việc tìm hiểu động lực thị trường.
Các bước tiếp theo
- Thêm thuộc tính vào payload khi gửi đối tượng báo giá đến endpoint swap.ts.
- Hiển thị chữ ký giao dịch
- Hỗ trợ các token khác hoặc hoán đổi hai chiều giữa USDC và SOL
- Xử lý lỗi/khả năng phản hồi khi ví chưa được kết nối
- Giải tuần tự hóa và gửi TX trong backend để che giấu RPC?
Tài nguyên đã sử dụng
Bài viết liên quan
Đăng ký nhận tin từ Helius
Luôn cập nhật những thông tin mới nhất về phát triển Solana và nhận thông báo khi chúng tôi đăng bài