🚀 Fix Drift Protocol integration - Connection now working
✅ Key fixes: - Bypass problematic SDK subscription that caused 410 Gone errors - Use direct account verification without subscription - Add fallback modes for better reliability - Switch to Helius RPC endpoint for better rate limits - Implement proper error handling and retry logic 🔧 Technical changes: - Enhanced drift-trading.ts with no-subscription approach - Added Drift API endpoints (/api/drift/login, /balance, /positions) - Created DriftAccountStatus and DriftTradingPanel components - Updated Dashboard.tsx to show Drift account status - Added comprehensive test scripts for debugging 📊 Results: - Connection Status: Connected ✅ - Account verification: Working ✅ - Balance retrieval: Working ✅ (21.94 total collateral) - Private key authentication: Working ✅ - User account: 3dG7wayp7b9NBMo92D2qL2sy1curSC4TTmskFpaGDrtA 🌐 RPC improvements: - Using Helius RPC for better reliability - Added fallback RPC options in .env - Eliminated rate limiting issues
This commit is contained in:
mindesbunister
208
components/DriftTradingPanel.tsx
Normal file
208
components/DriftTradingPanel.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
"use client"
|
||||
import React, { useState } from 'react'
|
||||
|
||||
interface TradeParams {
|
||||
symbol: string
|
||||
side: 'BUY' | 'SELL'
|
||||
amount: number
|
||||
orderType?: 'MARKET' | 'LIMIT'
|
||||
price?: number
|
||||
}
|
||||
|
||||
export default function DriftTradingPanel() {
|
||||
const [symbol, setSymbol] = useState('SOLUSD')
|
||||
const [side, setSide] = useState<'BUY' | 'SELL'>('BUY')
|
||||
const [amount, setAmount] = useState('')
|
||||
const [orderType, setOrderType] = useState<'MARKET' | 'LIMIT'>('MARKET')
|
||||
const [price, setPrice] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [result, setResult] = useState<any>(null)
|
||||
|
||||
const availableSymbols = [
|
||||
'SOLUSD', 'BTCUSD', 'ETHUSD', 'DOTUSD', 'AVAXUSD', 'ADAUSD',
|
||||
'MATICUSD', 'LINKUSD', 'ATOMUSD', 'NEARUSD', 'APTUSD', 'ORBSUSD',
|
||||
'RNDUSD', 'WIFUSD', 'JUPUSD', 'TNSUSD', 'DOGEUSD', 'PEPE1KUSD',
|
||||
'POPCATUSD', 'BOMERUSD'
|
||||
]
|
||||
|
||||
const handleTrade = async () => {
|
||||
if (!amount || parseFloat(amount) <= 0) {
|
||||
setResult({ success: false, error: 'Please enter a valid amount' })
|
||||
return
|
||||
}
|
||||
|
||||
if (orderType === 'LIMIT' && (!price || parseFloat(price) <= 0)) {
|
||||
setResult({ success: false, error: 'Please enter a valid price for limit orders' })
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setResult(null)
|
||||
|
||||
try {
|
||||
const tradeParams: TradeParams = {
|
||||
symbol,
|
||||
side,
|
||||
amount: parseFloat(amount),
|
||||
orderType,
|
||||
price: orderType === 'LIMIT' ? parseFloat(price) : undefined
|
||||
}
|
||||
|
||||
const response = await fetch('/api/trading', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(tradeParams)
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
setResult(data)
|
||||
|
||||
if (data.success) {
|
||||
// Clear form on success
|
||||
setAmount('')
|
||||
setPrice('')
|
||||
}
|
||||
} catch (error: any) {
|
||||
setResult({ success: false, error: error.message })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card card-gradient">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-lg font-bold text-white flex items-center">
|
||||
<span className="text-xl mr-2">🌊</span>
|
||||
Drift Trading
|
||||
</h2>
|
||||
<div className="flex items-center text-sm text-gray-400">
|
||||
<span className="w-2 h-2 bg-blue-400 rounded-full mr-2 animate-pulse"></span>
|
||||
Live
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Symbol Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">Symbol</label>
|
||||
<select
|
||||
value={symbol}
|
||||
onChange={(e) => setSymbol(e.target.value)}
|
||||
className="input w-full"
|
||||
>
|
||||
{availableSymbols.map(sym => (
|
||||
<option key={sym} value={sym}>{sym}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Side Selection */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">Side</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
onClick={() => setSide('BUY')}
|
||||
className={`btn ${side === 'BUY' ? 'btn-primary' : 'btn-secondary'}`}
|
||||
>
|
||||
🟢 Buy
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSide('SELL')}
|
||||
className={`btn ${side === 'SELL' ? 'btn-primary' : 'btn-secondary'}`}
|
||||
>
|
||||
🔴 Sell
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Type */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">Order Type</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
onClick={() => setOrderType('MARKET')}
|
||||
className={`btn ${orderType === 'MARKET' ? 'btn-primary' : 'btn-secondary'}`}
|
||||
>
|
||||
Market
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setOrderType('LIMIT')}
|
||||
className={`btn ${orderType === 'LIMIT' ? 'btn-primary' : 'btn-secondary'}`}
|
||||
>
|
||||
Limit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Amount */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">Amount (USD)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={amount}
|
||||
onChange={(e) => setAmount(e.target.value)}
|
||||
placeholder="100.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
className="input w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Price (only for limit orders) */}
|
||||
{orderType === 'LIMIT' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-400 mb-2">Price (USD)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={price}
|
||||
onChange={(e) => setPrice(e.target.value)}
|
||||
placeholder="0.00"
|
||||
min="0"
|
||||
step="0.01"
|
||||
className="input w-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Trade Button */}
|
||||
<button
|
||||
onClick={handleTrade}
|
||||
disabled={loading}
|
||||
className="btn btn-primary w-full"
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
||||
Executing...
|
||||
</span>
|
||||
) : (
|
||||
`${side} ${symbol}`
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Result Display */}
|
||||
{result && (
|
||||
<div className={`p-4 rounded-lg ${
|
||||
result.success
|
||||
? 'bg-green-500/20 border border-green-500/50'
|
||||
: 'bg-red-500/20 border border-red-500/50'
|
||||
}`}>
|
||||
{result.success ? (
|
||||
<div>
|
||||
<p className="text-green-400 font-medium">✅ Trade Executed Successfully!</p>
|
||||
{result.txId && (
|
||||
<p className="text-sm text-gray-400 mt-1">
|
||||
TX: {result.txId.slice(0, 8)}...{result.txId.slice(-8)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-red-400">❌ {result.error}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user