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

Titan 元聚合交换

A single-page Solana swap UI built on the Titan Gateway Meta-Aggregation API

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

概述

This Solana single-page application is built on the Titan Meta-Aggregation API, served through Quicknode RPC. The app demonstrates what makes Titan's Meta-Aggregation API interesting: multiple providers competing for the best route, the onchain venues a route touches, and a self-custodial build → sign → send flow you own end to end.

For a detailed walkthrough of the Titan Meta-Aggregation API integration, see the companion guide: How to Swap Tokens With the Titan Meta-Aggregation API.


Mainnet Only

Titan Gateway is only available on Solana mainnet. Executing swaps will trade real tokens and incur real network fees. You could lose value due to price movement, slippage, or selecting the wrong token pair. Test with small amounts first.

建筑​

Both credentials stay on the server. Browser code talks to local Next.js route handlers: /api/titan/* calls the Gateway (decoding MessagePack and normalizing pubkeys), and /api/rpc proxies Solana JSON-RPC to the Quicknode endpoint. Neither the Gateway auth nor the RPC token ever reaches the client.

Browser ──> /api/titan/* ──> Titan Gateway (MessagePack decode, server-only)
        └─> /api/rpc     ──> Quicknode Solana RPC (token server-only)

Because the RPC proxy carries only HTTP JSON-RPC (no WebSocket), the app confirms transactions by polling getSignatureStatuses rather than via a signature subscription.

功能​


  • Provider race: Titan sources quotes from several providers (its own DART router plus other aggregators and RFQ venues). The UI shows every competing quote side by side, the basis points each is behind the leader, and which one Titan picks as the expected winner.
  • Composable instructions: Titan returns instructions and address lookup tables, not a sealed transaction. The app builds a v0 transaction itself, the wallet signs it, and it's submitted and confirmed through Quicknode RPC.
  • Accurate vs. Fast: A toggle that maps to Titan's simulate parameter, with the round-trip latency shown next to the results.
  • Price vs. swap endpoints: An unconnected wallet uses the lightweight /quote/price endpoint for an indicative rate; a connected wallet uses /quote/swap for the full provider race and executable instructions.

先决条件​


要获取您的Quicknode URL：

  1. 请在 Quicknode
  2. 创建一个新的Solana endpoint
  3. Enable the Titan DeFi Meta-Aggregation REST API
  4. Copy the Solana endpoint URL and Meta-Aggregation API URL

项目结构​

titan-swap/
├── app/
│   ├── api/titan/            # Server proxy: info, providers, venues, price, swap
│   ├── api/rpc/              # Server proxy: Solana JSON-RPC (hides Quicknode token)
│   ├── layout.tsx
│   ├── page.tsx              # Main swap UI
│   ├── globals.css           # Tailwind v4 + Quicknode dark design tokens
│   └── providers/WalletProvider.tsx
├── components/
│   ├── ProviderRace.tsx      # Competing-provider visualization
│   ├── VenueSplit.tsx        # Venues touched by the winning route
│   ├── SimulationToggle.tsx  # Accurate vs. Fast (simulate param)
│   ├── SlippageControl.tsx
│   ├── TokenInput.tsx / TokenSelector.tsx / SwapButton.tsx / StatusMessage.tsx
│   └── SwapCard.tsx / WalletButton.tsx
├── hooks/
│   ├── useQuote.ts           # /quote/swap (connected) or /quote/price
│   ├── useSwap.ts            # build → sign → send → confirm
│   ├── useTokenBalances.ts   # balances via Quicknode RPC
│   ├── useTokenList.ts
│   └── useTitanMeta.ts       # providers / venues / info
└── lib/
    ├── titan-server.ts       # server-only Gateway client (MessagePack)
    ├── titan.ts              # client fetchers for /api/titan/*
    ├── build-swap-tx.ts      # instructions + ALTs -> VersionedTransaction
    ├── tokens.ts             # token metadata registry
    └── types.ts

环境变量​

复制 .env.local.example 到 .env.local and fill in the values. Both URLs are server-only and are never exposed to the browser:

# https://your-endpoint.solana-mainnet.quiknode.pro/YOUR_TOKEN/
QUICKNODE_RPC_URL=your_quicknode_solana_rpc_url
TITAN_GATEWAY_URL=your_titan_gateway_addon_url
# TITAN_GATEWAY_AUTH=optional_bearer_token
变量描述
QUICKNODE_RPC_URLYour Quicknode Solana mainnet RPC endpoint URL. The browser's wallet adapter talks to the same-origin /api/rpc proxy, which forwards to this URL.
TITAN_GATEWAY_URLThe Swap API's Titan base URL shown in your Quicknode dashboard. With or without a trailing /api/v1 — the proxy normalizes it.
TITAN_GATEWAY_AUTHOptional bearer token, only if your Gateway URL doesn't already embed auth.

入门指南​

1. 克隆仓库：

git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/solana/titan-swap

2. 安装依赖项：

npm 安装

3. 配置环境变量：

cp .env.local.example .env.local

编辑 .env.local and add your Quicknode RPC URL and Swap API Titan URL.

4. 运行开发服务器：

npm 运行 dev

5. 打开应用程序：

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

API 端点​


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


  • /api/titan/info: Returns Titan Gateway metadata
  • /api/titan/providers: Lists the providers competing for routes
  • /api/titan/venues: Lists the onchain venue program ids used for route mapping
  • /api/titan/price: Indicative rate via Titan's /quote/price endpoint
  • /api/titan/swap: Full provider race and executable instructions via /quote/swap
  • /api/rpc: Proxies Solana JSON-RPC requests to Quicknode

预览

Titan Meta-Aggregation Swap Preview
投稿与反馈
我们非常期待收到您的反馈，并欢迎大家为本示例应用贡献力量！
如需报告问题或提供反馈，请在 qn-guide-示例 存储库。
如需贡献，请按照以下步骤操作：
  1. 分叉该仓库
  2. 创建一个功能分支：
    git checkout -b feature/amazing-feature
  3. 提交您的更改：
    git commit -m "添加超棒的功能"
  4. 推送您的分支：
    git push origin feature/amazing-feature
  5. 提交一个拉取请求。
探索更多示例应用
Solana 浏览器
该应用程序利用Quicknode Solana Endpoint Solana 上检索指定钱包的代币余额、交易记录和 NFT。
Solana 浏览器
Solana 转向灯
通过此应用程序，您可以将Solana URL 解析为相应的操作，从而创建并操作Solana 。输入有效的操作 URL 以查看其详细信息，连接您的钱包以执行操作，或使用提供的结构创建新操作。
Solana 转向灯
Solana 铸造工具
该应用程序允许您在Solana 创建可互换代币，并内置了对通过Quicknode IPFS 上传IPFS 的支持。
Solana 铸造工具