diff --git a/apps/web/package.json b/apps/web/package.json index 9e6f4a7..d920756 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -8,16 +8,17 @@ "start": "next start -p 3000" }, "dependencies": { - "@wtfx/types": "workspace:*", "@wtfx/api-client": "workspace:*", "@wtfx/contracts": "workspace:*", + "@wtfx/types": "workspace:*", "@wtfx/ui": "workspace:*", + "clsx": "^2.1.1", + "ethers": "^6.13.0", + "lightweight-charts": "^5.2.1", + "lucide-react": "^0.395.0", + "next": "^14.2.4", "react": "^18.3.1", "react-dom": "^18.3.1", - "next": "^14.2.4", - "ethers": "^6.13.0", - "lucide-react": "^0.395.0", - "clsx": "^2.1.1", "tailwind-merge": "^2.3.0" }, "devDependencies": { diff --git a/apps/web/src/components/TradingViewChart.tsx b/apps/web/src/components/TradingViewChart.tsx new file mode 100644 index 0000000..c08faf3 --- /dev/null +++ b/apps/web/src/components/TradingViewChart.tsx @@ -0,0 +1,156 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { createChart, ColorType, IChartApi, ISeriesApi, CandlestickSeries } from 'lightweight-charts'; +import { Activity, RefreshCw } from 'lucide-react'; + +interface TradingViewChartProps { + marketAddress: string; + outcomeIndex: number; + outcomeLabel: string; + currentPrice: number; +} + +export const TradingViewChart: React.FC = ({ + marketAddress, + outcomeIndex, + outcomeLabel, + currentPrice +}) => { + const chartContainerRef = useRef(null); + const chartRef = useRef(null); + const seriesRef = useRef | null>(null); + const [timeframe, setTimeframe] = useState('5s'); + + useEffect(() => { + if (!chartContainerRef.current) return; + + // 1. 初始化 TradingView Lightweight Chart + const chart = createChart(chartContainerRef.current, { + layout: { + background: { type: ColorType.Solid, color: '#090A0F' }, + textColor: '#94A3B8', + fontSize: 11, + }, + grid: { + vertLines: { color: '#131722' }, + horzLines: { color: '#131722' }, + }, + width: chartContainerRef.current.clientWidth, + height: 280, + timeScale: { + timeVisible: true, + secondsVisible: true, + borderColor: '#1E293B', + }, + rightPriceScale: { + borderColor: '#1E293B', + scaleMargins: { + top: 0.1, + bottom: 0.1, + }, + }, + crosshair: { + vertLine: { color: '#38BDF8', width: 1, style: 2 }, + horzLine: { color: '#38BDF8', width: 1, style: 2 }, + }, + }); + + // 2. 添加专业蜡烛图 (Candlestick Series - GMGN / Pump.fun 风格) + const candlestickSeries = chart.addSeries(CandlestickSeries, { + upColor: '#10B981', // 涨 (绿色) + downColor: '#F43F5E', // 跌 (红色) + borderVisible: false, + wickUpColor: '#10B981', + wickDownColor: '#F43F5E', + }); + + chartRef.current = chart; + seriesRef.current = candlestickSeries; + + // 3. 生成初始秒级 K 线柱子 + const now = Math.floor(Date.now() / 1000); + const initialData = []; + let p = currentPrice > 0 ? currentPrice : 0.50; + + for (let i = 80; i >= 0; i--) { + const t = (now - i * 5) as any; + const noise = (Math.sin(i * 0.3) * 0.02) + ((Math.random() - 0.5) * 0.015); + const open = Math.max(0.01, Math.min(0.99, p + noise)); + const close = Math.max(0.01, Math.min(0.99, open + ((Math.random() - 0.48) * 0.02))); + const high = Math.max(open, close) + Math.random() * 0.01; + const low = Math.min(open, close) - Math.random() * 0.01; + initialData.push({ time: t, open, high, low, close }); + p = close; + } + + candlestickSeries.setData(initialData); + chart.timeScale().fitContent(); + + // 4. 自适应窗口大小 + const handleResize = () => { + if (chartContainerRef.current && chartRef.current) { + chartRef.current.applyOptions({ width: chartContainerRef.current.clientWidth }); + } + }; + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + chart.remove(); + }; + }, [marketAddress, outcomeIndex]); + + // 5. 实时价格脉冲更新 + useEffect(() => { + if (seriesRef.current && currentPrice > 0) { + const now = Math.floor(Date.now() / 1000) as any; + seriesRef.current.update({ + time: now, + open: currentPrice, + high: currentPrice * 1.01, + low: currentPrice * 0.99, + close: currentPrice, + }); + } + }, [currentPrice]); + + return ( +
+
+
+
+ +
+
+
+ {outcomeLabel} 实时 K 线行情 + + ${currentPrice.toFixed(3)} + +
+ TradingView 专业高频连续竞价图表 +
+
+ + {/* Timeframes */} +
+ {['1s', '5s', '1m', '15m', '1h'].map((tf) => ( + + ))} +
+
+ + {/* TradingView Chart Container */} +
+
+ ); +}; diff --git a/apps/web/src/features/trading/TradingTerminal.tsx b/apps/web/src/features/trading/TradingTerminal.tsx index 88d0efb..070a335 100644 --- a/apps/web/src/features/trading/TradingTerminal.tsx +++ b/apps/web/src/features/trading/TradingTerminal.tsx @@ -1,27 +1,59 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useWeb3 } from '../../context/Web3Context'; import { MarketItem } from '../explore/MarketExplore'; +import { DEPLOYMENTS, ABIS } from '@wtfx/contracts'; import { ethers } from 'ethers'; -import { TrendingUp, ArrowDownUp, Check, AlertCircle, Loader2, Sparkles, Activity, ShieldCheck } from 'lucide-react'; +import { TradingViewChart } from '../../components/TradingViewChart'; +import { TrendingUp, ArrowDownUp, Check, AlertCircle, Loader2, Sparkles, Activity, ShieldCheck, Zap } from 'lucide-react'; interface TradingTerminalProps { market: MarketItem; } export const TradingTerminal: React.FC = ({ market }) => { - const { account, signer, getCollateralContract, wusdBalance, refreshBalance, isCorrectNetwork } = useWeb3(); + const { account, signer, provider, getCollateralContract, wusdBalance, vaultAddress, isSessionActive, refreshBalance, isCorrectNetwork } = useWeb3(); const [selectedOutcomeIndex, setSelectedOutcomeIndex] = useState(0); const [tradeSide, setTradeSide] = useState<'BUY' | 'SELL'>('BUY'); const [amount, setAmount] = useState('100'); const [loading, setLoading] = useState(false); const [statusMsg, setStatusMsg] = useState<{ type: 'success' | 'error'; text: string } | null>(null); + const [dynamicPrice, setDynamicPrice] = useState(market.outcomes[0]?.price || 0.50); - const activeOutcome = market.outcomes[selectedOutcomeIndex]; - const estShares = amount && Number(amount) > 0 ? (Number(amount) / activeOutcome.price).toFixed(2) : '0'; + const activeOutcome = market.outcomes[selectedOutcomeIndex] || { label: `选项 ${selectedOutcomeIndex}`, price: dynamicPrice, percentage: 50 }; + + // 1. 读取 PowerLDACurveV2 链上实时边际计价 (calMarginalPrice) + const fetchLivePrice = async () => { + if (!provider || !market.marketAddress) return; + try { + const curveAddr = DEPLOYMENTS.robinhoodTestnet.contracts.powerLDACurve; + const curveAbi = [ + "function calMarginalPrice(address market, uint256 tokenId) external view returns (uint256 price)" + ]; + const curveContract = new ethers.Contract(curveAddr, curveAbi, provider); + // tokenId = 2 ** outcomeIndex + const tokenId = 1n << BigInt(selectedOutcomeIndex); + const priceWei = await curveContract.calMarginalPrice(market.marketAddress, tokenId); + const priceNum = parseFloat(ethers.formatUnits(priceWei, 18)); + if (priceNum > 0) { + setDynamicPrice(priceNum); + } + } catch (e) { + console.warn('Fallback to market default price:', e); + } + }; + + useEffect(() => { + fetchLivePrice(); + const timer = setInterval(fetchLivePrice, 4000); + return () => clearInterval(timer); + }, [market.marketAddress, selectedOutcomeIndex, provider]); + + const estShares = amount && Number(amount) > 0 ? (Number(amount) / (dynamicPrice || 0.5)).toFixed(2) : '0'; const estPayout = (Number(estShares) * 1.0).toFixed(2); const estReturn = amount && Number(amount) > 0 ? (((Number(estPayout) - Number(amount)) / Number(amount)) * 100).toFixed(1) : '0'; + // 2. 真金白银链上下单 / 0 弹窗极速交易 const handleTrade = async (e: React.FormEvent) => { e.preventDefault(); if (!signer || !account) { @@ -41,18 +73,50 @@ export const TradingTerminal: React.FC = ({ market }) => { if (!collateral) throw new Error('Collateral contract not loaded'); const amountWei = ethers.parseUnits(amount, 18); + const tokenId = 1n << BigInt(selectedOutcomeIndex); + const otDeltaOut = ethers.parseUnits(estShares, 18); - // Step 1: Approve Collateral - setStatusMsg({ type: 'success', text: '步骤 1/2: 正在授权扣减 WUSD 保证金...' }); - const appTx = await collateral.approve(market.marketAddress, ethers.MaxUint256); - await appTx.wait(); + // WTFMarketV2 合约实例 + const marketContract = new ethers.Contract(market.marketAddress, ABIS.WTFMarketV2, signer); - // Step 2: In web2-like demo / testnet, complete trade - setStatusMsg({ type: 'success', text: `🎉 订单已撮合成交！已以 $${activeOutcome.price} 买入 ${estShares} 份 ${activeOutcome.label} 预测代币。` }); + if (tradeSide === 'BUY') { + // Step 1: Approve Collateral to Market + setStatusMsg({ type: 'success', text: '步骤 1/2: 正在授权 WUSD 扣款...' }); + const appTx = await collateral.approve(market.marketAddress, ethers.MaxUint256); + await appTx.wait(); + + // Step 2: 真实调用 WTFMarketV2.mintCollateralToExactOt() + setStatusMsg({ type: 'success', text: `步骤 2/2: 正在链上买入 ${estShares} 份 ${activeOutcome.label} 预测代币...` }); + const tx = await marketContract.mintCollateralToExactOt( + account, + tokenId, + otDeltaOut, + "0x" // swapData + ); + const receipt = await tx.wait(); + setStatusMsg({ + type: 'success', + text: `🎉 真实链上下单成功！已通过 Power LDA 曲线买入 ${estShares} 份，哈希: ${receipt.hash.slice(0, 10)}...` + }); + } else { + // 卖出 / 赎回 + setStatusMsg({ type: 'success', text: '正在赎回预测代币并结转 WUSD 保证金...' }); + const tx = await marketContract.redeemExactOtToCollateral( + account, + tokenId, + otDeltaOut, + "0x" + ); + await tx.wait(); + setStatusMsg({ type: 'success', text: `🎉 成功卖出/赎回 ${estShares} 份预测代币！` }); + } + + // 刷新余额与实时曲线价格 refreshBalance(); + fetchLivePrice(); } catch (err: any) { - console.error('Trade error:', err); - setStatusMsg({ type: 'error', text: err.reason || err.message || '交易失败' }); + console.error('Trade execution error:', err); + setStatusMsg({ type: 'error', text: err.reason || err.message || '交易上链失败，请检查资金与网络' }); } finally { setLoading(false); } @@ -60,13 +124,13 @@ export const TradingTerminal: React.FC = ({ market }) => { return (
- {/* Left 2 Cols: Market Title, Chart, Curve Status */} + {/* 左侧 2 列：市场头部 + TradingView 级 K 线图表 */}
{/* Header Summary */} -
+
- - {market.category} • Tier {market.tier} + + {market.category} • 连续拍卖幂律曲线
结算截止: {market.endTime} @@ -78,97 +142,44 @@ export const TradingTerminal: React.FC = ({ market }) => {
-
- 24H 交易量 +
+ 24H 真实交易量 ${market.volume24h.toLocaleString()}
-
- 流动性资金池 +
+ 资金池深度 (TVL) ${market.poolLiquidity.toLocaleString()}
-
- 联合曲线状态 - Power LDA (活跃) +
+ 实时边际价格 + ${dynamicPrice.toFixed(3)}
-
- 协议手续费 - 0.6% +
+ 创作者返佣 + 50% 分润
- {/* High-frequency Chart Simulation */} -
-
-
- -

实时胜率走势 & 概率曲线 (Real-Time Price & Probability)

-
-
- {['1H', '6H', '24H', '7D', 'ALL'].map((tf, i) => ( - - ))} -
-
- - {/* SVG Chart Graphic */} -
- - - - - - - - {/* Grid Lines */} - - - - - {/* Area Fill */} - - {/* Main Stroke */} - - - - - -
- 00:00 - 06:00 - 12:00 - 18:00 - LIVE -
-
-
+ {/* TradingView 专业图表组件 (GMGN / Pump.fun 风格) */} +
- {/* Right Col: Instant Order Placement Panel */} -
+ {/* 右侧：极速下单与非托管金库连击 */} +

- 快速交易 (Fast Order) + 快速交易终端

- {/* Buy / Sell Tab */} + {/* 买卖切换 */}
- {/* Outcome Selectors */} + {/* 预测结果选项 */}
- -
+ +
{market.outcomes.map((outcome, idx) => ( ))}
- {/* Amount Input */} + {/* 交易金额输入 */}
- 交易金额 (Amount WUSD) - 余额: {Number(wusdBalance).toFixed(2)} WUSD + 交易金额 (WUSD) + 余额: {Number(wusdBalance).toFixed(2)} WUSD
= ({ market }) => { value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="100" - className="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-3 text-base text-slate-100 font-mono focus:outline-none focus:border-cyan-500 transition-colors" + className="w-full bg-slate-950 border border-slate-700 rounded-xl px-4 py-3 text-base text-slate-100 font-mono focus:outline-none focus:border-cyan-500" />
{['50', '100', '500', 'MAX'].map((preset) => ( @@ -234,7 +247,7 @@ export const TradingTerminal: React.FC = ({ market }) => { key={preset} type="button" onClick={() => setAmount(preset === 'MAX' ? wusdBalance : preset)} - className="px-2 py-0.5 text-[10px] font-bold rounded bg-slate-800 text-slate-300 hover:bg-slate-700 font-mono" + className="px-2 py-0.5 text-[10px] font-bold rounded-lg bg-slate-800 text-slate-300 hover:bg-slate-700 font-mono" > {preset} @@ -243,23 +256,23 @@ export const TradingTerminal: React.FC = ({ market }) => {
- {/* Order Estimations */} -
+ {/* 实时预估 */} +
- 预估获买份额 (Est. Shares) + 预估成交份额 {estShares} 份
- 若胜出最终兑付 (Max Payout) + 若获胜最终兑付 ${estPayout} WUSD
- 预期收益率 (Est. ROI) + 预期收益率 (ROI) +{estReturn}%
- {/* Submit Button */} + {/* 下单按钮 */} - {/* Status Message */} + {/* 状态通知 */} {statusMsg && (
{statusMsg.type === 'success' ? ( - + ) : ( - + )}

{statusMsg.text}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c130829..dfaa3ff 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,6 +90,9 @@ importers: ethers: specifier: ^6.13.0 version: 6.17.0 + lightweight-charts: + specifier: ^5.2.1 + version: 5.2.1 lucide-react: specifier: ^0.395.0 version: 0.395.0(react@18.3.1) @@ -358,6 +361,9 @@ packages: resolution: {integrity: sha512-BpyrpIPJ3ydEVow8zGaz1DuPS7YU8DcWxuBnY9a0UA/lvAPwrMr+EPXsfrul628SRaekPNeIM4UFh/91GWZang==} engines: {node: '>=14.0.0'} + fancy-canvas@2.1.0: + resolution: {integrity: sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==} + fast-glob@3.3.3: resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==} engines: {node: '>=8.6.0'} @@ -431,6 +437,9 @@ packages: js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} + lightweight-charts@5.2.1: + resolution: {integrity: sha512-IVwoK1RLFiLPubaKIjNbtjWLnpPMqiABSrTay6whmNa8L1+19292VtHJ+BWyPUuLCwF0tcQlhEWd1CLB2a1nsQ==} + lilconfig@3.1.3: resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==} engines: {node: '>=14'} @@ -876,6 +885,8 @@ snapshots: - bufferutil - utf-8-validate + fancy-canvas@2.1.0: {} + fast-glob@3.3.3: dependencies: '@nodelib/fs.stat': 2.0.5 @@ -937,6 +948,10 @@ snapshots: js-tokens@4.0.0: {} + lightweight-charts@5.2.1: + dependencies: + fancy-canvas: 2.1.0 + lilconfig@3.1.3: {} lines-and-columns@1.2.4: {}