概覽
This Solana-based single-page application facilitates token exchanges through Jupiter Ultra API integration, paired with Quicknode RPC and Solana Wallet Adapter technologies. The application provides a seamless interface for users to swap tokens on the Solana blockchain with real-time balance updates and transaction tracking.
For a detailed walkthrough of the Jupiter Ultra API integration and implementation details, see the companion guide: How to Swap Tokens With Jupiter Ultra API.
Jupiter Ultra Swap is only available on Solana mainnet-beta. This means 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.
建築
┌─────────────────┐
│ Next.js UI │
│ (Client Side) │
└────────┬────────┘
│
├─ Wallet Adapter (Phantom, Backpack, Solflare)
│
├─ API Routes (Server Side)
│ ├─ /api/tokens
│ ├─ /api/balances
│ ├─ /api/quote
│ ├─ /api/execute
│ └─ /api/rpc
│
├─ Jupiter Ultra API
│ └─ Token swaps & quotes
│
└─ Quicknode RPC
└─ Solana blockchain interactions
特色
- Multi-Wallet Support: Connect with Phantom, Backpack, or Solflare wallets
- Token Selection: Choose from a comprehensive list of verified Solana tokens for swap
- Real-Time Balances: View live token balances directly from the blockchain
- Swap Quotes: Get instant swap quotes before executing transactions
- Transaction Execution: Use Jupiter Ultra's Quote → Order → Sign → Execute → Status lifecycle
- Transaction Tracking: Monitor swap status and view transaction details on Solana Explorer
先決條件
- Node.js (v18 or higher)
- A Quicknode Solana endpoint
- A Jupiter API key for swap functionality
- A Solana wallet (Phantom, Backpack, or Solflare) with mainnet access
- A small amount of mainnet-beta SOL for transaction fees
- 少量代幣可供兌換（建議使用 USDC 進行測試）
要取得您的Quicknode RPC URL：
- 請於以下連結註冊： Quicknode
- 建立一個新的Solana endpoint
- Copy the HTTP Provider URL
專案架構
jupiter-ultra-swap/
├── app/
│ ├── api/ # Server-side API routes
│ │ ├── balances/ # Token balance queries
│ │ ├── execute/ # Swap execution
│ │ ├── quote/ # Swap quotes
│ │ ├── rpc/ # RPC proxy
│ │ └── tokens/ # Token list
│ ├── providers/ # React context providers
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main swap interface
├── components/ # Swap UI components
├── hooks/ # Custom React hooks
│ ├── useWallet.ts # Wallet connection logic
│ ├── useTokens.ts # Token data management
│ └── useSwap.ts # Swap orchestration
├── lib/ # Utility libraries
│ ├── jupiter-client.ts # Jupiter API client
│ ├── solana-kit.ts # Solana RPC client
│ └── types.ts # TypeScript definitions
└── .env.example # Environment variables template
開始使用
1. 複製儲存庫：
git clone https://github.com/quiknode-labs/qn-guide-examples.git
cd qn-guide-examples/solana/jupiter-ultra-swap
2. 安裝依賴項：
npm 安裝
3. 設定環境變數：
cp .env.example .env.local
編輯 .env.local and add your Quicknode RPC URL and Jupiter API key.
# Quicknode Solana RPC endpoint
QUICKNODE_RPC_URL=your_quicknode_rpc_endpoint_here
# Jupiter API key for swap functionality
JUPITER_API_KEY=your_jupiter_api_key_here
4. 執行開發伺服器：
npm 執行 dev
5. 開啟應用程式：
請在瀏覽器中瀏覽至http://localhost:3000。
API 端點
該應用程式包含以下伺服器端 API 路徑：
/api/tokens: Returns the list of available tokens for swapping/api/balances: Fetches token balances for a connected wallet/api/quote: Gets swap quotes from Jupiter Ultra API/api/execute: Executes the swap transaction/api/rpc: Proxies RPC requests to Quicknode
預覽
- 分叉此儲存庫
- 建立功能分支：git checkout -b feature/amazing-feature
- 將您的變更提交：git commit -m "新增超棒的功能"
- 推送您的分支：git push origin feature/amazing-feature
- 開啟一個 Pull Request。
