From 7201b45a1bfd2d8bc13359fd07a27454fa325713 Mon Sep 17 00:00:00 2001 From: mohitejaikumar Date: Sat, 29 Jun 2024 00:27:28 +0530 Subject: [PATCH 1/5] added realtime depth --- .../app/components/MarketBar.tsx | 10 +-- .../app/components/depth/AskTable.tsx | 13 ++-- .../app/components/depth/BidTable.tsx | 9 +-- .../app/components/depth/Depth.tsx | 74 ++++++++++++++++--- .../binance-frontend-realtime/app/globals.css | 3 + .../binance-frontend-realtime/app/layout.tsx | 2 +- .../app/trade/[market]/page.tsx | 6 +- .../app/utils/SignalingManager.ts | 15 +++- 8 files changed, 96 insertions(+), 36 deletions(-) diff --git a/week-1/day-2/binance-frontend-realtime/app/components/MarketBar.tsx b/week-1/day-2/binance-frontend-realtime/app/components/MarketBar.tsx index 57a4f2e..acd150f 100644 --- a/week-1/day-2/binance-frontend-realtime/app/components/MarketBar.tsx +++ b/week-1/day-2/binance-frontend-realtime/app/components/MarketBar.tsx @@ -8,7 +8,7 @@ export const MarketBar = ({market}: {market: string}) => { const [ticker, setTicker] = useState(null); useEffect(() => { - getTicker(market).then(setTicker); + SignalingManager.getInstance().registerCallback("ticker", (data: Partial) => setTicker(prevTicker => ({ firstPrice: data?.firstPrice ?? prevTicker?.firstPrice ?? '', high: data?.high ?? prevTicker?.high ?? '', @@ -20,11 +20,11 @@ export const MarketBar = ({market}: {market: string}) => { symbol: data?.symbol ?? prevTicker?.symbol ?? '', trades: data?.trades ?? prevTicker?.trades ?? '', volume: data?.volume ?? prevTicker?.volume ?? '', - })), market); + })), `Ticker-${market}`); SignalingManager.getInstance().sendMessage({"method":"SUBSCRIBE","params":[`ticker.${market}`]} ); return () => { - SignalingManager.getInstance().deRegisterCallback("ticker", market); + SignalingManager.getInstance().deRegisterCallback("ticker", `Ticker-${market}`); SignalingManager.getInstance().sendMessage({"method":"UNSUBSCRIBE","params":[`ticker.${market}`]} ); } }, [market]) @@ -33,7 +33,7 @@ export const MarketBar = ({market}: {market: string}) => { return
- +

${ticker?.lastPrice}

@@ -63,7 +63,7 @@ export const MarketBar = ({market}: {market: string}) => { } -function Ticker({market}: {market: string}) { +function TickerComponent({market}: {market: string}) { return
SOL Logo diff --git a/week-1/day-2/binance-frontend-realtime/app/components/depth/AskTable.tsx b/week-1/day-2/binance-frontend-realtime/app/components/depth/AskTable.tsx index aaecf8e..2981f53 100644 --- a/week-1/day-2/binance-frontend-realtime/app/components/depth/AskTable.tsx +++ b/week-1/day-2/binance-frontend-realtime/app/components/depth/AskTable.tsx @@ -1,10 +1,9 @@ export const AskTable = ({ asks }: { asks: [string, string][] }) => { let currentTotal = 0; - const relevantAsks = asks.slice(0, 15); - relevantAsks.reverse(); - const asksWithTotal: [string, string, number][] = relevantAsks.map(([price, quantity]) => [price, quantity, currentTotal += Number(quantity)]); - const maxTotal = relevantAsks.reduce((acc, [_, quantity]) => acc + Number(quantity), 0); + asks.reverse(); + const asksWithTotal: [string, string, number][] = asks.map(([price, quantity]) => [price, quantity, currentTotal += Number(quantity)]); + const maxTotal = asks.reduce((acc, [_, quantity]) => acc + Number(quantity), 0); asksWithTotal.reverse(); return
@@ -18,15 +17,15 @@ function Ask({price, quantity, total, maxTotal}: {price: string, quantity: strin position: "relative", width: "100%", backgroundColor: "transparent", - overflow: "hidden", + // overflow: "hidden", }} >
{ let currentTotal = 0; - const relevantBids = bids.slice(0, 15); - const bidsWithTotal: [string, string, number][] = relevantBids.map(([price, quantity]) => [price, quantity, currentTotal += Number(quantity)]); - const maxTotal = relevantBids.reduce((acc, [_, quantity]) => acc + Number(quantity), 0); + const bidsWithTotal: [string, string, number][] = bids.map(([price, quantity]) => [price, quantity, currentTotal += Number(quantity)]); + const maxTotal = bids.reduce((acc, [_, quantity]) => acc + Number(quantity), 0); return
{bidsWithTotal?.map(([price, quantity, total]) => )} @@ -18,14 +17,14 @@ function Bid({ price, quantity, total, maxTotal }: { price: string, quantity: st position: "relative", width: "100%", backgroundColor: "transparent", - overflow: "hidden", + // overflow: "hidden", }} >
(); - const [asks, setAsks] = useState<[string, string][]>(); +export function DepthComponent({ market }: {market: string}) { + const [bids, setBids] = useState<[string, string][]>([]); + const [asks, setAsks] = useState<[string, string][]>([]); const [price, setPrice] = useState(); useEffect(() => { - getDepth(market).then(d => { - setBids(d.bids.reverse()); - setAsks(d.asks); - }); - getTicker(market).then(t => setPrice(t.lastPrice)); - getTrades(market).then(t => setPrice(t[0].price)); - // getKlines(market, "1h", 1640099200, 1640100800).then(t => setPrice(t[0].close)); - }, []) + SignalingManager.getInstance().registerCallback("depth", (data: any) => { + setBids((previousBids)=>{ + let newBids = [...previousBids]; + for(let i=0; i bid[1] !== "0.00"); + //reverse sort by pppu and take the first 15 + newBids = newBids.sort((a, b) => Number(b[0]) - Number(a[0])).slice(0,50); + return newBids; + }) + setAsks((previousAsks)=>{ + let newAsks = previousAsks; + for(let i=0; i ask[1] !== "0.00"); + // sort by ppu + newAsks = newAsks.sort((a, b) => Number(a[0]) - Number(b[0])).slice(0,50); + return newAsks; + }) + + }, `Depth-${market}`); + + + + + SignalingManager.getInstance().sendMessage({"method":"SUBSCRIBE","params":[`depth.200ms.${market}`]}); + return () => { + SignalingManager.getInstance().deRegisterCallback("depth", `Depth-${market}`); + SignalingManager.getInstance().sendMessage({"method":"UNSUBSCRIBE","params":[`depth.200ms.${market}`]} ); + } + }, [market]) - return
+ return
{asks && } {price &&
{price}
} diff --git a/week-1/day-2/binance-frontend-realtime/app/globals.css b/week-1/day-2/binance-frontend-realtime/app/globals.css index 8e3e463..26208a0 100644 --- a/week-1/day-2/binance-frontend-realtime/app/globals.css +++ b/week-1/day-2/binance-frontend-realtime/app/globals.css @@ -25,4 +25,7 @@ body { .text-balance { text-wrap: balance; } + .no-scrollbar{ + scrollbar-width: none; + } } diff --git a/week-1/day-2/binance-frontend-realtime/app/layout.tsx b/week-1/day-2/binance-frontend-realtime/app/layout.tsx index 3bbb623..5a414a2 100644 --- a/week-1/day-2/binance-frontend-realtime/app/layout.tsx +++ b/week-1/day-2/binance-frontend-realtime/app/layout.tsx @@ -17,7 +17,7 @@ export default function RootLayout({ }>) { return ( - + {children} diff --git a/week-1/day-2/binance-frontend-realtime/app/trade/[market]/page.tsx b/week-1/day-2/binance-frontend-realtime/app/trade/[market]/page.tsx index 1df8e17..13b0dec 100644 --- a/week-1/day-2/binance-frontend-realtime/app/trade/[market]/page.tsx +++ b/week-1/day-2/binance-frontend-realtime/app/trade/[market]/page.tsx @@ -2,7 +2,7 @@ import { MarketBar } from "@/app/components/MarketBar"; import { SwapUI } from "@/app/components/SwapUI"; import { TradeView } from "@/app/components/TradeView"; -import { Depth } from "@/app/components/depth/Depth"; +import { DepthComponent } from "@/app/components/depth/Depth"; import { useParams } from "next/navigation"; export default function Page() { @@ -14,8 +14,8 @@ export default function Page() {
-
- +
+
diff --git a/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts b/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts index c69ea03..2f47de7 100644 --- a/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts +++ b/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts @@ -1,4 +1,4 @@ -import { Ticker } from "./types"; +import { Depth, Ticker } from "./types"; export const BASE_URL = "wss://ws.backpack.exchange/" @@ -28,10 +28,11 @@ export class SignalingManager { this.ws.onmessage = (event) => { const message = JSON.parse(event.data); const type = message.data.e; + if (this.callbacks[type]) { this.callbacks[type].forEach(({ callback }) => { if (type === "ticker") { - callback(message.data.data); + const newTicker: Partial = { lastPrice: message.data.c, high: message.data.h, @@ -40,9 +41,17 @@ export class SignalingManager { quoteVolume: message.data.V, symbol: message.data.s, } - console.log(newTicker); + // console.log(newTicker); callback(newTicker); } + if(type === "depth"){ + const newDepth: Partial ={ + bids: message.data.b, + asks: message.data.a, + } + console.log(newDepth); + callback(newDepth); + } }); } } From 0c7dcf83b37264e62a2e2441649675229f745d72 Mon Sep 17 00:00:00 2001 From: mohitejaikumar Date: Sat, 29 Jun 2024 02:15:31 +0530 Subject: [PATCH 2/5] added kline realtime update --- .../app/components/TradeView.tsx | 39 ++++++++++--------- .../app/utils/ChartManager.ts | 9 +---- .../app/utils/SignalingManager.ts | 13 ++++++- 3 files changed, 34 insertions(+), 27 deletions(-) diff --git a/week-1/day-2/binance-frontend-realtime/app/components/TradeView.tsx b/week-1/day-2/binance-frontend-realtime/app/components/TradeView.tsx index 04b3087..1f8b29c 100644 --- a/week-1/day-2/binance-frontend-realtime/app/components/TradeView.tsx +++ b/week-1/day-2/binance-frontend-realtime/app/components/TradeView.tsx @@ -1,39 +1,28 @@ -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { ChartManager } from "../utils/ChartManager"; import { getKlines } from "../utils/httpClient"; import { KLine } from "../utils/types"; +import { SignalingManager } from "../utils/SignalingManager"; export function TradeView({ market, }: { market: string; }) { + const chartRef = useRef(null); const chartManagerRef = useRef(null); useEffect(() => { - const init = async () => { - let klineData: KLine[] = []; - try { - klineData = await getKlines(market, "1h", Math.floor((new Date().getTime() - 1000 * 60 * 60 * 24 * 7) / 1000), Math.floor(new Date().getTime() / 1000)); - } catch (e) { } - + if (chartRef) { if (chartManagerRef.current) { chartManagerRef.current.destroy(); } - console.log(klineData) + const chartManager = new ChartManager( chartRef.current, - [ - ...klineData?.map((x) => ({ - close: parseFloat(x.close), - high: parseFloat(x.high), - low: parseFloat(x.low), - open: parseFloat(x.open), - timestamp: new Date(x.end), - })), - ].sort((x, y) => (x.timestamp < y.timestamp ? -1 : 1)) || [], + [], { background: "#0e0f14", color: "white", @@ -42,8 +31,20 @@ export function TradeView({ //@ts-ignore chartManagerRef.current = chartManager; } - }; - init(); + + + SignalingManager.getInstance().registerCallback('kline', (data:any)=>{ + chartManagerRef.current?.update(data); + + }, `Kline-${market}`); + + SignalingManager.getInstance().sendMessage({"method":"SUBSCRIBE","params":[`kline.5m.${market}`]}); + + return ()=>{ + SignalingManager.getInstance().deRegisterCallback("kline", `Kline-${market}`); + SignalingManager.getInstance().sendMessage({"method":"UNSUBSCRIBE","params":[`kline.5m.${market}`]} ); + } + }, [market, chartRef]); return ( diff --git a/week-1/day-2/binance-frontend-realtime/app/utils/ChartManager.ts b/week-1/day-2/binance-frontend-realtime/app/utils/ChartManager.ts index 37e4de7..0b8d557 100644 --- a/week-1/day-2/binance-frontend-realtime/app/utils/ChartManager.ts +++ b/week-1/day-2/binance-frontend-realtime/app/utils/ChartManager.ts @@ -68,22 +68,17 @@ export class ChartManager { ); } public update(updatedPrice: any) { - if (!this.lastUpdateTime) { - this.lastUpdateTime = new Date().getTime(); - } + this.candleSeries.update({ - time: (this.lastUpdateTime / 1000) as UTCTimestamp, + time: (updatedPrice.start / 1000) as UTCTimestamp, close: updatedPrice.close, low: updatedPrice.low, high: updatedPrice.high, open: updatedPrice.open, }); - if (updatedPrice.newCandleInitiated) { - this.lastUpdateTime = updatedPrice.time; } - } public destroy() { this.chart.remove(); } diff --git a/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts b/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts index 2f47de7..b1f8378 100644 --- a/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts +++ b/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts @@ -1,4 +1,4 @@ -import { Depth, Ticker } from "./types"; +import { Depth, KLine, Ticker } from "./types"; export const BASE_URL = "wss://ws.backpack.exchange/" @@ -52,6 +52,17 @@ export class SignalingManager { console.log(newDepth); callback(newDepth); } + if(type === 'kline'){ + const newKline = { + close: parseFloat(message.data.c), + start: message.data.t, + high: parseFloat(message.data.h), + low: parseFloat(message.data.l), + open: parseFloat(message.data.o), + } + console.log(newKline); + callback(newKline); + } }); } } From daf83921c787b2067842a7470b5d7f48542043fe Mon Sep 17 00:00:00 2001 From: mohitejaikumar Date: Sat, 29 Jun 2024 12:39:57 +0530 Subject: [PATCH 3/5] styling depth bars --- .../app/components/depth/AskTable.tsx | 4 ++-- .../app/components/depth/BidTable.tsx | 1 + .../binance-frontend-realtime/app/components/depth/Depth.tsx | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/week-1/day-2/binance-frontend-realtime/app/components/depth/AskTable.tsx b/week-1/day-2/binance-frontend-realtime/app/components/depth/AskTable.tsx index 2981f53..30f032f 100644 --- a/week-1/day-2/binance-frontend-realtime/app/components/depth/AskTable.tsx +++ b/week-1/day-2/binance-frontend-realtime/app/components/depth/AskTable.tsx @@ -6,7 +6,7 @@ export const AskTable = ({ asks }: { asks: [string, string][] }) => { const maxTotal = asks.reduce((acc, [_, quantity]) => acc + Number(quantity), 0); asksWithTotal.reverse(); - return
+ return
{asksWithTotal.map(([price, quantity, total]) => )}
} @@ -15,9 +15,9 @@ function Ask({price, quantity, total, maxTotal}: {price: string, quantity: strin style={{ display: "flex", position: "relative", + marginTop:4, width: "100%", backgroundColor: "transparent", - // overflow: "hidden", }} >
+ return
{asks && } {price &&
{price}
} @@ -80,7 +80,7 @@ export function DepthComponent({ market }: {market: string}) { } function TableHeader() { - return
+ return
Price
Size
Total
From ffb5d4de4a3d51ecdce31a60cf9eb3d03bf87abc Mon Sep 17 00:00:00 2001 From: mohitejaikumar Date: Sat, 29 Jun 2024 12:47:50 +0530 Subject: [PATCH 4/5] added nice scrollbar --- .../app/components/depth/Depth.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/week-1/day-2/binance-frontend-realtime/app/components/depth/Depth.tsx b/week-1/day-2/binance-frontend-realtime/app/components/depth/Depth.tsx index 5a42abb..0882ed2 100644 --- a/week-1/day-2/binance-frontend-realtime/app/components/depth/Depth.tsx +++ b/week-1/day-2/binance-frontend-realtime/app/components/depth/Depth.tsx @@ -71,16 +71,19 @@ export function DepthComponent({ market }: {market: string}) { } }, [market]) - return
+ return
- {asks && } - {price &&
{price}
} - {bids && } +
+ {asks && } + {price &&
{price}
} + {bids && } +
+
} function TableHeader() { - return
+ return
Price
Size
Total
From 295361b592ee20a99d927e5c0a5240884358c072 Mon Sep 17 00:00:00 2001 From: mohitejaikumar Date: Sat, 29 Jun 2024 13:43:34 +0530 Subject: [PATCH 5/5] added Trade realtime update --- .../app/components/DepthAndTrade.tsx | 122 ++++++++++++++++++ .../app/components/Trades.tsx | 59 +++++++++ .../app/components/depth/Depth.tsx | 82 ++---------- .../app/trade/[market]/page.tsx | 4 +- .../app/utils/SignalingManager.ts | 14 +- 5 files changed, 207 insertions(+), 74 deletions(-) create mode 100644 week-1/day-2/binance-frontend-realtime/app/components/DepthAndTrade.tsx diff --git a/week-1/day-2/binance-frontend-realtime/app/components/DepthAndTrade.tsx b/week-1/day-2/binance-frontend-realtime/app/components/DepthAndTrade.tsx new file mode 100644 index 0000000..4933691 --- /dev/null +++ b/week-1/day-2/binance-frontend-realtime/app/components/DepthAndTrade.tsx @@ -0,0 +1,122 @@ +"use client"; +import { useEffect, useState } from "react"; +import { SignalingManager } from "@/app/utils/SignalingManager"; +import { Depth, Trade } from "@/app/utils/types"; +import { DepthComponent } from "./depth/Depth"; +import Trades from "./Trades"; + +export function DepthAndTrade({ market }: {market: string}) { + const [bids, setBids] = useState<[string, string][]>([]); + const [asks, setAsks] = useState<[string, string][]>([]); + const [price, setPrice] = useState(""); + const [trades, setTrades] = useState[]>([]); + const [type, setType] = useState<'books' | 'trades'>('books'); + + useEffect(() => { + + SignalingManager.getInstance().registerCallback("depth", (data: any) => { + setBids((previousBids)=>{ + let newBids = [...previousBids]; + for(let i=0; i bid[1] !== "0.00"); + //reverse sort by pppu and take the first 15 + newBids = newBids.sort((a, b) => Number(b[0]) - Number(a[0])).slice(0,50); + return newBids; + }) + setAsks((previousAsks)=>{ + let newAsks = previousAsks; + for(let i=0; i ask[1] !== "0.00"); + // sort by ppu + newAsks = newAsks.sort((a, b) => Number(a[0]) - Number(b[0])).slice(0,50); + return newAsks; + }) + + }, `Depth-${market}`); + SignalingManager.getInstance().registerCallback("trade", (data: Partial) => { + + setTrades((previousTrades)=>{ + let newTrades = [...previousTrades]; + newTrades = newTrades.reverse(); + newTrades.push(data); + newTrades = newTrades.reverse(); + newTrades = newTrades.slice(0,50); + return newTrades; + }) + }, `Trade-${market}`); + + + SignalingManager.getInstance().sendMessage({"method":"SUBSCRIBE","params":[`depth.200ms.${market}`]}); + SignalingManager.getInstance().sendMessage({"method":"SUBSCRIBE","params":[`trade.${market}`]}); + return () => { + SignalingManager.getInstance().deRegisterCallback("depth", `Depth-${market}`); + SignalingManager.getInstance().sendMessage({"method":"UNSUBSCRIBE","params":[`depth.200ms.${market}`]} ); + SignalingManager.getInstance().sendMessage({"method":"UNSUBSCRIBE","params":[`trade.${market}`]} ); + } + }, [market]) + + return
+ + {/*
+ {asks && } + {price &&
{price}
} + {bids && } +
*/} + {type==="trades" && } + {type==="books" && } +
+} + +function TableHeader({type, setType}: {type: string, setType: any}) { + return
+ + +
+} + +function BookButton({ type, setType }: { type: string, setType: any }) { + return
setType('books')}> +
+ Books +
+
+} + +function TradesButton({ type, setType }: { type: string, setType: any }) { + return
setType('trades')}> +
+ Trades +
+
+} \ No newline at end of file diff --git a/week-1/day-2/binance-frontend-realtime/app/components/Trades.tsx b/week-1/day-2/binance-frontend-realtime/app/components/Trades.tsx index e69de29..98a6f2e 100644 --- a/week-1/day-2/binance-frontend-realtime/app/components/Trades.tsx +++ b/week-1/day-2/binance-frontend-realtime/app/components/Trades.tsx @@ -0,0 +1,59 @@ +"use client"; + +import { Trade } from "../utils/types"; + + + +export default function Trades({ + trades, +}:{ + trades: Partial[], +}){ + return
+ +
+ { trades && trades.map((trade,index)=>{ + let timestamp = trade.timestamp!; + let date = new Date(timestamp); + // Extract hours, minutes, and seconds + let hours = date.getUTCHours(); + // Get minutes part from the timestamp + let minutes = date.getUTCMinutes(); + // Get seconds part from the timestamp + let seconds = date.getUTCSeconds(); + + // Pad hours, minutes, and seconds to ensure two digits + let formattedHours = String(hours).padStart(2, '0'); + let formattedMinutes = String(minutes).padStart(2, '0'); + let formattedSeconds = String(seconds).padStart(2, '0'); + + // Format the time as HH.MM.SS + let timeStr = `${formattedHours}.${formattedMinutes}.${formattedSeconds}`; + return ( + <> +
+
+ {trade.price} +
+
+ {trade.quantity} +
+
+ {timeStr} +
+
+ + ) + }) + } +
+
+} + +function TableHeader() { + return
+
Price
+
Qunatity
+
Time
+
+} \ No newline at end of file diff --git a/week-1/day-2/binance-frontend-realtime/app/components/depth/Depth.tsx b/week-1/day-2/binance-frontend-realtime/app/components/depth/Depth.tsx index 0882ed2..ea0796b 100644 --- a/week-1/day-2/binance-frontend-realtime/app/components/depth/Depth.tsx +++ b/week-1/day-2/binance-frontend-realtime/app/components/depth/Depth.tsx @@ -1,84 +1,26 @@ "use client"; -import { useEffect, useState } from "react"; -import { getDepth, getKlines, getTicker, getTrades } from "../../utils/httpClient"; import { BidTable } from "./BidTable"; import { AskTable } from "./AskTable"; -import { SignalingManager } from "@/app/utils/SignalingManager"; -import { Depth } from "@/app/utils/types"; -export function DepthComponent({ market }: {market: string}) { - const [bids, setBids] = useState<[string, string][]>([]); - const [asks, setAsks] = useState<[string, string][]>([]); - const [price, setPrice] = useState(); - - useEffect(() => { - - SignalingManager.getInstance().registerCallback("depth", (data: any) => { - setBids((previousBids)=>{ - let newBids = [...previousBids]; - for(let i=0; i bid[1] !== "0.00"); - //reverse sort by pppu and take the first 15 - newBids = newBids.sort((a, b) => Number(b[0]) - Number(a[0])).slice(0,50); - return newBids; - }) - setAsks((previousAsks)=>{ - let newAsks = previousAsks; - for(let i=0; i ask[1] !== "0.00"); - // sort by ppu - newAsks = newAsks.sort((a, b) => Number(a[0]) - Number(b[0])).slice(0,50); - return newAsks; - }) - - }, `Depth-${market}`); - - - - - SignalingManager.getInstance().sendMessage({"method":"SUBSCRIBE","params":[`depth.200ms.${market}`]}); - return () => { - SignalingManager.getInstance().deRegisterCallback("depth", `Depth-${market}`); - SignalingManager.getInstance().sendMessage({"method":"UNSUBSCRIBE","params":[`depth.200ms.${market}`]} ); - } - }, [market]) +export function DepthComponent({ + asks, + bids, + price, +}:{ + asks: [string, string][], + bids: [string, string][], + price: string, +}) { + - return
+ return
{asks && } {price &&
{price}
} {bids && } -
- +
} diff --git a/week-1/day-2/binance-frontend-realtime/app/trade/[market]/page.tsx b/week-1/day-2/binance-frontend-realtime/app/trade/[market]/page.tsx index 13b0dec..ed786c3 100644 --- a/week-1/day-2/binance-frontend-realtime/app/trade/[market]/page.tsx +++ b/week-1/day-2/binance-frontend-realtime/app/trade/[market]/page.tsx @@ -1,8 +1,8 @@ "use client"; +import { DepthAndTrade } from "@/app/components/DepthAndTrade"; import { MarketBar } from "@/app/components/MarketBar"; import { SwapUI } from "@/app/components/SwapUI"; import { TradeView } from "@/app/components/TradeView"; -import { DepthComponent } from "@/app/components/depth/Depth"; import { useParams } from "next/navigation"; export default function Page() { @@ -15,7 +15,7 @@ export default function Page() {
- +
diff --git a/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts b/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts index b1f8378..b8e19d3 100644 --- a/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts +++ b/week-1/day-2/binance-frontend-realtime/app/utils/SignalingManager.ts @@ -1,4 +1,4 @@ -import { Depth, KLine, Ticker } from "./types"; +import { Depth, KLine, Ticker, Trade } from "./types"; export const BASE_URL = "wss://ws.backpack.exchange/" @@ -28,7 +28,7 @@ export class SignalingManager { this.ws.onmessage = (event) => { const message = JSON.parse(event.data); const type = message.data.e; - + console.log(type); if (this.callbacks[type]) { this.callbacks[type].forEach(({ callback }) => { if (type === "ticker") { @@ -63,6 +63,16 @@ export class SignalingManager { console.log(newKline); callback(newKline); } + if(type === 'trade'){ + console.log(message.data); + const newTrade: Partial = { + price: message.data.p, + quantity: message.data.q, + timestamp: message.data.T, + } + console.log(newTrade); + callback(newTrade); + } }); } }