Skip to main content

​
Giới thiệu

Hướng dẫn này trình bày quy trình phát triển có AI hỗ trợ để xây dựng giao diện hoán đổi token trên Solana. Tính năng nổi bật là một bảng hiển thị các cặp giao dịch thường xuyên nhất của người dùng và cho phép họ chọn một cặp chỉ bằng một lần nhấp. Điều này tạo ra trải nghiệm được cá nhân hóa. Mỗi phần đều hiển thị chính xác các prompt đã sử dụng, kết quả do mô hình tạo ra và cách chúng tôi sử dụng bộ công cụ Helius AI. Hướng dẫn này giới thiệu các công nghệ sau:

​
Kết quả cuối cùng

Giao diện hoán đổi được cá nhân hóa với bảng các cặp gần đây

Personalized swap UI with recent pairs panel

​
Thiết lập

Trước khi bắt đầu, hãy cài đặt plugin Helius Claude Code. Trong Claude Code, hãy chạy hai lệnh sau dưới dạng hai lệnh riêng biệt:
Trong hướng dẫn này, chúng tôi sẽ sử dụng Opus 4.6 làm mô hình. Hãy chuyển đổi nếu cần.
Hướng dẫn này chỉ nhằm mục đích minh họa. Kết quả của mô hình ngôn ngữ lớn (LLM) vốn mang tính ngẫu nhiên, vì vậy ngay cả khi sử dụng chính xác các prompt giống như trong hướng dẫn này, kết quả của bạn vẫn có thể khác.

​
Prompt ban đầu

Sử dụng prompt này để xác định toàn bộ giao diện và hành vi trong một lần:

Prompt

Xây dựng giao diện hoán đổi token được cá nhân hóa cho Solana.Thêm giao diện hoán đổi token theo phong cách thông thường: một hộp nằm giữa với hai bộ chọn token và một nút hoán đổi.Ở bên phải, hiển thị danh sách các cặp token mà người dùng có thể chọn trực tiếp. Hiển thị logo của từng token bên cạnh tên của token đó.Để tính toán danh sách, hãy làm như sau: Sau khi người dùng kết nối ví, hãy xem lịch sử hoán đổi của họ và trích xuất 10 cặp giao dịch gần đây nhất mà họ đã sử dụng. Sắp xếp các cặp theo tần suất hoán đổi.
Prompt này xác định:
  • Bố cục cốt lõi (hộp hoán đổi + thanh các cặp gần đây)
  • Quy tắc cá nhân hóa (lịch sử ví)
  • Chiến lược xếp hạng (tần suất sử dụng gần đây)
Trong trường hợp của chúng tôi, mô hình đề xuất như sau:
Hãy để tôi dựng khung dự án. Tôi sẽ tạo một ứng dụng Vite + React + TypeScript có kết nối ví Phantom, thực hiện hoán đổi qua DFlow bằng Helius Sender và lấy lịch sử hoán đổi từ Helius Wallet API.
Đây là một bộ công nghệ hợp lý:
  • Vite + React + TypeScript cho giao diện hiện đại, an toàn về kiểu dữ liệu
  • Phantom để kết nối ví và ký
  • DFlow để có báo giá tốt nhất
  • Các API Helius để lấy lịch sử ví
  • Helius Sender để gửi giao dịch
Mô hình hướng dẫn chúng tôi thêm tệp .env chứa khóa API Helius. Sau đó, chúng tôi khởi động ứng dụng bằng npm run dev:
Phiên bản ban đầu của ứng dụng

Initial version of the app

​
Thiếu các cặp gần đây

Sau khi kết nối ví, chúng tôi nhận thấy bảng các cặp gần đây thiếu một số cặp giao dịch mà chúng tôi vừa hoán đổi. Vì vậy, chúng tôi yêu cầu tác nhân điều tra:

Prompt

Bonk / SOL không xuất hiện dưới dạng Cặp gần đây mặc dù có các giao dịch hoán đổi gần đây. Bạn có thể kiểm tra lý do không?2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
Để giải quyết vấn đề này, tác nhân cần biết lịch sử giao dịch của ví đã cho. Vì chúng tôi chỉ cung cấp địa chỉ ví, tác nhân quyết định sử dụng trực tiếp hai công cụ Helius MCP để lấy thông tin đó: getTransactionHistory và parseTransactions. Điều này cho phép tác nhân nhanh chóng xác định lỗi:
Mã chỉ dựa vào events.swap thay vì phân tích các giao dịch chuyển token thực tế.
Hãy để tôi sửa logic trích xuất lịch sử hoán đổi để sử dụng trực tiếp tokenTransfers và nativeTransfers.
Vì vậy, tác nhân đã khắc phục vấn đề bằng cách thay đổi cách phát hiện các cặp giao dịch: Giờ đây, chúng tôi chỉ cần kiểm tra những token nào được chuyển vào và ra khỏi ví trong một giao dịch. Giờ đây, chúng tôi thấy tất cả các cặp giao dịch của mình trong ứng dụng:
Hiển thị tất cả các cặp giao dịch

All trading pairs shown

​
Tinh chỉnh giao diện

Mặc dù thiết kế tổng thể của ứng dụng đã tốt, bố cục của giao diện hoán đổi vẫn cần được tinh chỉnh:

Prompt

Sửa thiết kế của hộp chọn token:Đặt bộ chọn token ở bên phải.Điều chỉnh linh hoạt chiều rộng của trường nhập số lượng để trường này vừa vặn trong hộp.
Tác nhân đã nhanh chóng triển khai các thay đổi giao diện này:
Bố cục mới cho hộp chọn token

New layout for the token selector box

​
Hiển thị báo giá

Hiện tại, số lượng token trong giao diện hoán đổi phải được đặt thủ công. Điều này có nghĩa là người dùng không biết họ sẽ nhận lại bao nhiêu token. Sẽ hữu ích hơn nếu tự động điền trường số lượng token bằng báo giá DFlow mới nhất.

Prompt

Khi người dùng đã nhập số lượng cho một token, hãy lấy báo giá và hiển thị số lượng đầu ra cho token còn lại.
Để triển khai tính năng này, tác nhân đã sử dụng kỹ năng DFlow để tìm endpoint phù hợp cho việc lấy báo giá. Giao diện hoán đổi giờ đây tự động lấy và hiển thị số lượng đầu ra theo báo giá:
Bản xem trước báo giá hiển thị số lượng đầu ra trong trường nhận

Quote preview showing the output amount in the receive field

​
Thêm thông tin hoán đổi

Sau khi giao dịch hoán đổi được ghi nhận, người dùng không có cách nào xác minh giao dịch đó trên chuỗi. Hãy thêm tính năng này vào giao diện:

Prompt

Vui lòng hiển thị chữ ký giao dịch đầy đủ sau khi hoán đổi thành công. Đồng thời, hãy liên kết chữ ký đó với một trình khám phá blockchain.
Để kiểm thử, chúng tôi thực hiện một giao dịch hoán đổi mẫu:
Cửa sổ bật lên xác nhận ví trong khi ký giao dịch hoán đổi

Wallet confirmation popup during swap signing

Giờ đây, thông tin được hiển thị trong giao diện:
Kết quả hoán đổi thành công với chữ ký đầy đủ và liên kết đến trình khám phá blockchain

Successful swap output with full signature and explorer link