Previzualizare live

Fiecare componentă, randată.

Randate live din exact fișierele sursă livrate în kit — apasă, tastează și comută ca să explorezi stările.

Aceste previzualizări rulează componentele reale ale kitului cu date demo. Sursa TypeScript completă, notele de design și documentația sunt în kit.

Aspect componente

OrderForm

src/OrderForm.tsx

You payBalance: 28 ETH

ETH

Slippage tolerance0.50%

Balances fill reliability against worst-case drift for most pairs.

Custom%

Expected output5,294.07 USDC≈ $5,294

Minimum received5,267.6 USDC≈ $5,268

The transaction reverts rather than fill below the minimum. That revert is your protection working, not an error.

You receive (expected)5,294.07 USDC≈ $5,294

Minimum received5,267.6 USDC≈ $5,268

Price impact0.3%

Network feeGas at 14 gwei — varies with congestion, not with trade size.$2.10(0.04%)
Liquidity provider fee$13.28(0.25%)
Protocol fee$2.66(0.05%)

Protected order — routed privately, not visible to front-runners. May take a few seconds longer to confirm.

Quote refreshes in 8sOrder valid for 30 min; if unfilled it expires and nothing moves.

FeeBreakdown

src/FeeBreakdown.tsx

Protocol fee$12.64(0.07%)
Network feeGas at 14 gwei — varies with congestion, not with trade size.$2.10(0.01%)
Liquidity provider fee$42.14(0.25%)
Expected slippage costHistorical average drift for this pair at this size.$28.40(0.17%)

Protected order — routed privately, not visible to front-runners. May take a few seconds longer to confirm.

This order routes through the public mempool and can be sandwiched. The cost would appear as a worse fill within your slippage tolerance.

SlippageControl

src/SlippageControl.tsx

Slippage tolerance0.50%

Balances fill reliability against worst-case drift for most pairs.

Custom%

Expected output16,838.15 USDC≈ $16,838

Minimum received16,753.95 USDC≈ $16,754

The transaction reverts rather than fill below the minimum. That revert is your protection working, not an error.

LeverageSelector

src/LeverageSelector.tsx

LeverageModerate risk

Est. liquidation price$54,273 (−19.5% from mark)

This asset moved ±3.8% in the last 24h.

PriceImpactWarning

src/PriceImpactWarning.tsx

impactPct={0.4}

Price impact0.4%

impactPct={1.8}

Price impact1.8%

This trade moves the market price by 1.8% because of its size against available liquidity. Unlike slippage tolerance, this is a cost you pay even if the trade executes perfectly.

impactPct={3.8}

Price impact3.8%

This trade moves the market price by 3.8% because of its size against available liquidity. Unlike slippage tolerance, this is a cost you pay even if the trade executes perfectly. Consider splitting the order or trading a deeper pool.

impactPct={6.2}

Very high price impact6.2%

This trade moves the market price by 6.2% because of its size against available liquidity. Unlike slippage tolerance, this is a cost you pay even if the trade executes perfectly. Consider splitting the order or trading a deeper pool.

Type 6.2 to confirm you accept losing ≈6.2% of this trade to price impact.

ConfirmTransactionModal

src/ConfirmTransactionModal.tsx

PositionTable

src/PositionTable.tsx

		Entry / Mark			Funding / day
SOL-USDLong 10×	350 SOL≈ $49,455	$148.20/$141.30	$134.105.1% away	−$2,415(−46.60%)	≈ −$6.30/day
ETH-USDShort 3×	12 ETH≈ $42,480	$3,610/$3,540	$4,79535.5% away	+$840.00(+5.90%)	≈ +$4.10/day
BTC-USDLong 5×	0.5 BTC≈ $33,710	$64,900/$67,420	$55,18018.2% away	+$1,260(+18.70%)	≈ −$9.20/day

SOL-USDLong 10×
PnL−$2,415(−46.60%)
Size350 SOL ≈ $49,455
Liquidation$134.105.1% away
ETH-USDShort 3×
PnL+$840.00(+5.90%)
Size12 ETH ≈ $42,480
Liquidation$4,79535.5% away
BTC-USDLong 5×
PnL+$1,260(+18.70%)
Size0.5 BTC ≈ $33,710
Liquidation$55,18018.2% away

EmptyAndErrorStates

src/EmptyAndErrorStates.tsx

Network data delayed — showing last known state (2 min ago)

No open positions

Positions appear here the moment they're opened, with liquidation distance and live PnL.

Price moved past your tolerance

The price moved more than your slippage setting allowed before the transaction confirmed, so it reverted instead of filling at a worse price. That revert is your protection working. Refresh the quote and try again.

You paid network gas; nothing else left your wallet.

Technical details

execution reverted: "UniswapV2Router: INSUFFICIENT_OUTPUT_AMOUNT"