跳转至主要内容
返回示例应用

Jupiter Ultra Swap 演示

一个单页的Solana 界面，演示了使用 Jupiter Ultra API 进行代币兑换

部署图标
部署应用
GitHub 图标
查看代码库
前端框架/库：
Next.js
语言：
TypeScript
构建工具/开发服务器：
npm
示例应用预览

概述

这款Solana单页应用程序通过集成 Jupiter Ultra API，并结合Quicknode 和Solana 配器技术，支持代币兑换。该应用程序为用户提供了一个无缝的界面，可在Solana 进行代币兑换，并支持实时余额更新和交易追踪。

有关 Jupiter Ultra API 集成和实现细节的详细分步指南，请参阅配套指南：《如何使用 Jupiter Ultra API 交换代币》。


Mainnet ——真实代币与手续费

Jupiter Ultra Swap 仅在Solana mainnet提供。这意味着执行兑换操作时将交易真实的代币，并产生真实的网络手续费。您可能会因价格波动、滑点或选择错误的代币对而造成资产贬值。请先使用小额资金进行测试。

建筑​

┌─────────────────┐
│   Next.js 用户界面    │
│  (客户端)  │
└────────┬────────┘
         │
         ├─ 钱包适配器（Phantom、Backpack、Solflare）
         │
         ├─ API 路由（服务器端）
         │  ├─ /api/tokens
         │  ├─ /api/balances
         │  ├─ /api/quote
         │  ├─ /api/execute
         │  └─ /api/rpc
         │
         ├─ Jupiter Ultra API
         │  └─ 代币兑换与报价
         │
         └─Quicknode 
            └─Solana

功能​


  • 支持多种钱包：可连接 Phantom、Backpack 或 Solflare 钱包
  • 代币选择：从经过验证的Solana 全面列表中选择代币进行兑换
  • 实时余额：直接从区块链查看实时代币余额
  • 掉期报价：在执行交易前即时获取掉期报价
  • 交易执行：使用JupiterUltra的“报价 → 下单 → 签署 → 执行 → 状态”生命周期
  • 交易追踪：在Solana 监控交易状态并查看交易详情

先决条件​


  • Node.js（v18 或更高版本）
  • A Quicknode Solana endpoint
  • 用于掉期功能的Jupiter API 密钥
  • 一个mainnet Solana （Phantom、Backpack 或 Solflare）
  • 少量mainnet SOL作为交易手续费
  • 少量待兑换的代币（测试时建议使用USDC）

要获取您的Quicknode URL：

  1. 请在 Quicknode
  2. 创建一个新的Solana endpoint
  3. 复制 HTTP 提供商 URL

项目结构​

jupiter-ultra-swap/
├── app/
│   ├── api/               # 服务器端 API 路由
│   │   ├── balances/      # 代币余额查询
│   │   ├── execute/       # 交换执行
│   │   ├── quote/         # 兑换报价
│   │   ├── rpc/           # RPC 代理
│   │   └── tokens/        # 代币列表
│   ├── providers/         # React 上下文提供程序
│   ├── globals.css        # 全局样式
│   ├── layout.tsx         # 根布局
│   └── page.tsx           # 主切换界面
├── components/            # 兑换 UI 组件
├── hooks/                 # 自定义 React 钩子
│   ├── useWallet.ts       # 钱包连接逻辑
│   ├── useTokens.ts       # 代币数据管理
│   └── useSwap.ts         # 兑换协调逻辑
├── lib/                   # 工具库
│   ├── jupiter-client.ts  # Jupiter API 客户端
│   ├──solana.ts      #Solana 客户端
│   └── types.ts           # TypeScript 类型定义
└── .env.example           # 环境变量模板

入门指南​

1. 克隆仓库：

git clone https://github.com/quiknode-labs/qn-guide-examples.git
cdsolana

2. 安装依赖项：

npm 安装

3. 配置环境变量：

cp .env.example .env.local

编辑 .env.local 并添加您的Quicknode URL 和 Jupiter API 密钥。

#Quicknode Solana  endpoint
QUICKNODE=此处填写您的 Quicknode RPC 端点

# 用于交换功能的 Jupiter API 密钥
JUPITER_API_KEY=此处填写您的 Jupiter API 密钥

4. 运行开发服务器：

npm 运行 dev

5. 打开应用程序：

在浏览器中访问http://localhost:3000。

API 端点​


该应用程序包含以下服务器端 API 路由：

  • /api/tokens: 返回可用于交换的代币列表
  • /api/balances: 获取已连接钱包的代币余额
  • /api/quote: 从 Jupiter Ultra API 获取掉期报价
  • /api/execute: 执行互换交易
  • /api/rpc: 将 RPC 请求转发至Quicknode

预览

Jupiter Ultra Swap 演示预览

投稿与反馈
我们非常期待收到您的反馈，并欢迎大家为本示例应用贡献力量！
如需报告问题或提供反馈，请在 qn-guide-示例 存储库。
如需贡献，请按照以下步骤操作：
  1. 分叉该仓库
  2. 创建一个功能分支：
    git checkout -b feature/amazing-feature
  3. 提交您的更改：
    git commit -m "添加超棒的功能"
  4. 推送您的分支：
    git push origin feature/amazing-feature
  5. 提交一个拉取请求。
探索更多示例应用
Titan 元聚合交换
一个基于Titan Gateway元聚合API构建的单页Solana 界面，通过Quicknode提供服务。该界面展示了各家提供商的报价、交易路径所经过的链上交易场所，以及一个自主托管式的“构建→签名→发送flow 交易通过Quicknode flow 确认。
Titan 元聚合交换
Solana 浏览器
该应用程序利用Quicknode Solana Endpoint Solana 上检索指定钱包的代币余额、交易记录和 NFT。
Solana 浏览器
Solana 转向灯
通过此应用程序，您可以将Solana URL 解析为相应的操作，从而创建并操作Solana 。输入有效的操作 URL 以查看其详细信息，连接您的钱包以执行操作，或使用提供的结构创建新操作。
Solana 转向灯