Skip to content

Commit

Permalink
feat: Connecting Ordrebook and TradeForm
Browse files Browse the repository at this point in the history
  • Loading branch information
@GyeongChan-Jang
GyeongChan-Jang committed Dec 3, 2024
1 parent 652ac1a commit 40795fc
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 72 deletions.
47 changes: 47 additions & 0 deletions app/components/TradeForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React from 'react'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

interface TradeFormProps {
type: 'buy' | 'sell'
price: string
amount: string
onPriceChange: (value: string) => void
onAmountChange: (value: string) => void
baseAsset?: string
quoteAsset?: string
}

export function TradeForm({
type,
price,
amount,
onPriceChange,
onAmountChange,
baseAsset = 'BTC',
quoteAsset = 'USDT'
}: TradeFormProps) {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
console.log(`${type} order:`, { price, amount })
}

return (
<form onSubmit={handleSubmit} className="bg-card rounded-lg p-4 border">
<h2 className="text-lg font-bold mb-4">{type === 'buy' ? `Buy ${baseAsset}` : `Sell ${baseAsset}`}</h2>
<div className="space-y-4">
<div>
<label className="text-sm text-muted-foreground">Price ({quoteAsset})</label>
<Input type="number" value={price} onChange={(e) => onPriceChange(e.target.value)} className="mt-1" />
</div>
<div>
<label className="text-sm text-muted-foreground">Amount ({baseAsset})</label>
<Input type="number" value={amount} onChange={(e) => onAmountChange(e.target.value)} className="mt-1" />
</div>
<Button type="submit" className="w-full" variant={type === 'buy' ? 'default' : 'destructive'}>
{type === 'buy' ? 'Buy' : 'Sell'} {baseAsset}
</Button>
</div>
</form>
)
}
111 changes: 42 additions & 69 deletions app/en/trade/BTCUSDT/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import React, { useState } from 'react'
import dynamic from 'next/dynamic'
import { useRouter } from 'next/navigation'
import { useCandlestickData } from '@/hooks/queries/useCandlestickData'
import { Input } from '@/components/ui/input'
import { OrderBook } from '@/components/OrderBook'
import { MarketList } from '@/components/MarketList'
import { CoinInfo } from '@/components/CoinInfo'
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { TradeForm } from '@/app/components/TradeForm'

const CandlestickChart = dynamic(() => import('@/components/charts/CandlestickChart'), { ssr: false })

Expand All @@ -27,10 +27,14 @@ export default function TradePage() {
const { data, isLoading, isWebSocketConnected } = useCandlestickData('BTCUSDT', interval)
const [buyPrice, setBuyPrice] = useState('')
const [sellPrice, setSellPrice] = useState('')
const [buyAmount, setBuyAmount] = useState('')
const [sellAmount, setSellAmount] = useState('')

const handlePriceSelect = (price: number) => {
const handlePriceSelect = (price: number, amount: number) => {
setBuyPrice(price.toString())
setSellPrice(price.toString())
setBuyAmount(amount.toString())
setSellAmount(amount.toString())
}

const handleMarketSelect = (symbol: string) => {
Expand Down Expand Up @@ -95,42 +99,24 @@ export default function TradePage() {

{/* 거래 영역 - 태블릿/데스크톱 */}
<div className="hidden md:grid grid-cols-2 gap-4 md:order-3">
<div className="bg-card rounded-lg p-4 border">
<h2 className="text-lg font-bold mb-4">Buy BTC</h2>
<div className="space-y-4">
<div>
<label className="text-sm text-muted-foreground">Price (USDT)</label>
<Input
type="number"
value={buyPrice}
onChange={(e) => setBuyPrice(e.target.value)}
className="mt-1"
/>
</div>
<div>
<label className="text-sm text-muted-foreground">Amount (BTC)</label>
<Input type="number" className="mt-1" />
</div>
</div>
</div>
<div className="bg-card rounded-lg p-4 border">
<h2 className="text-lg font-bold mb-4">Sell BTC</h2>
<div className="space-y-4">
<div>
<label className="text-sm text-muted-foreground">Price (USDT)</label>
<Input
type="number"
value={sellPrice}
onChange={(e) => setSellPrice(e.target.value)}
className="mt-1"
/>
</div>
<div>
<label className="text-sm text-muted-foreground">Amount (BTC)</label>
<Input type="number" className="mt-1" />
</div>
</div>
</div>
<TradeForm
type="buy"
price={buyPrice}
amount={buyAmount}
onPriceChange={setBuyPrice}
onAmountChange={setBuyAmount}
baseAsset="BTC"
quoteAsset="USDT"
/>
<TradeForm
type="sell"
price={sellPrice}
amount={sellAmount}
onPriceChange={setSellPrice}
onAmountChange={setSellAmount}
baseAsset="BTC"
quoteAsset="USDT"
/>
</div>
</main>

Expand All @@ -152,37 +138,24 @@ export default function TradePage() {

{/* 거래 영역 - 모바일 */}
<div className="md:hidden grid grid-cols-1 gap-4 order-5">
<div className="bg-card rounded-lg p-4 border">
<h2 className="text-lg font-bold mb-4">Buy BTC</h2>
<div className="space-y-4">
<div>
<label className="text-sm text-muted-foreground">Price (USDT)</label>
<Input type="number" value={buyPrice} onChange={(e) => setBuyPrice(e.target.value)} className="mt-1" />
</div>
<div>
<label className="text-sm text-muted-foreground">Amount (BTC)</label>
<Input type="number" className="mt-1" />
</div>
</div>
</div>
<div className="bg-card rounded-lg p-4 border">
<h2 className="text-lg font-bold mb-4">Sell BTC</h2>
<div className="space-y-4">
<div>
<label className="text-sm text-muted-foreground">Price (USDT)</label>
<Input
type="number"
value={sellPrice}
onChange={(e) => setSellPrice(e.target.value)}
className="mt-1"
/>
</div>
<div>
<label className="text-sm text-muted-foreground">Amount (BTC)</label>
<Input type="number" className="mt-1" />
</div>
</div>
</div>
<TradeForm
type="buy"
price={buyPrice}
amount={buyAmount}
onPriceChange={setBuyPrice}
onAmountChange={setBuyAmount}
baseAsset="BTC"
quoteAsset="USDT"
/>
<TradeForm
type="sell"
price={sellPrice}
amount={sellAmount}
onPriceChange={setSellPrice}
onAmountChange={setSellAmount}
baseAsset="BTC"
quoteAsset="USDT"
/>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions components/OrderBook.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'

interface OrderBookProps {
symbol: string
onPriceSelect: (price: number) => void
onPriceSelect: (price: number, amount: number) => void
}

export const OrderBook = ({ symbol, onPriceSelect }: OrderBookProps) => {
Expand Down Expand Up @@ -68,7 +68,7 @@ export const OrderBook = ({ symbol, onPriceSelect }: OrderBookProps) => {
<tr
key={i}
className="relative hover:bg-accent/50 cursor-pointer"
onClick={() => onPriceSelect(ask.price)}
onClick={() => onPriceSelect(ask.price, ask.quantity)}
>
<td className="p-1 text-red-500 relative z-10 w-[30%]">{formatPrice(ask.price)}</td>
<td className="p-1 text-right relative z-10 w-[40%]">{formatAmount(ask.quantity)}</td>
Expand Down Expand Up @@ -100,7 +100,7 @@ export const OrderBook = ({ symbol, onPriceSelect }: OrderBookProps) => {
<tr
key={i}
className="relative hover:bg-accent/50 cursor-pointer"
onClick={() => onPriceSelect(bid.price)}
onClick={() => onPriceSelect(bid.price, bid.quantity)}
>
<td className="p-1 text-green-500 relative z-10 w-[30%]">{formatPrice(bid.price)}</td>
<td className="p-1 text-right relative z-10 w-[40%]">{formatAmount(bid.quantity)}</td>
Expand Down

0 comments on commit 40795fc

Please sign in to comment.