✨ Canvas Orderbook (#227)
* 🚧 Canvas Orderbook * 🚧 Add orderbookMap to aid in Canvas redraws * enable mine column * Merge main into canvas-orderbook-2 * 🧱 fix: Add orderbook constants file, remove console log, nits * 💄 style: orderbook canvas text 13.5px -> 12px * Updated constants and typings * loadingSpace logic was slowing down ref mount
This commit is contained in:
Jared Vu
@@ -0,0 +1,4 @@
|
||||
export * from './useCenterOrderbook';
|
||||
export * from './useSpreadRowScrollListener';
|
||||
export * from './useDrawOrderbook';
|
||||
export * from './useOrderbookValues';
|
||||
@@ -0,0 +1,22 @@
|
||||
import { useEffect, type RefObject } from 'react';
|
||||
|
||||
type Props = {
|
||||
marketId: string;
|
||||
orderbookRef: RefObject<HTMLDivElement>;
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Center Orderbook on load and market change
|
||||
* Assumed that the two sides are the same height
|
||||
*/
|
||||
export const useCenterOrderbook = ({ marketId, orderbookRef }: Props) => {
|
||||
const orderbookEl = orderbookRef.current;
|
||||
const { clientHeight, scrollHeight } = orderbookEl ?? {};
|
||||
const shouldScroll = scrollHeight && clientHeight && scrollHeight > clientHeight;
|
||||
|
||||
useEffect(() => {
|
||||
if (orderbookEl && shouldScroll) {
|
||||
orderbookEl.scrollTo({ top: (scrollHeight - clientHeight) / 2 });
|
||||
}
|
||||
}, [shouldScroll, marketId]);
|
||||
};
|
||||
@@ -0,0 +1,373 @@
|
||||
import { useEffect, useMemo, useRef } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
|
||||
import type { PerpetualMarketOrderbookLevel } from '@/constants/abacus';
|
||||
import { SMALL_USD_DECIMALS, TOKEN_DECIMALS } from '@/constants/numbers';
|
||||
|
||||
import {
|
||||
ORDERBOOK_ANIMATION_DURATION,
|
||||
ORDERBOOK_HEIGHT,
|
||||
ORDERBOOK_ROW_HEIGHT,
|
||||
ORDERBOOK_ROW_PADDING_RIGHT,
|
||||
ORDERBOOK_WIDTH,
|
||||
} from '@/constants/orderbook';
|
||||
|
||||
import { getCurrentMarketConfig, getCurrentMarketOrderbookMap } from '@/state/perpetualsSelectors';
|
||||
import { getAppTheme } from '@/state/configsSelectors';
|
||||
|
||||
import { MustBigNumber } from '@/lib/numbers';
|
||||
|
||||
import {
|
||||
getHistogramXValues,
|
||||
getRektFromIdx,
|
||||
getXByColumn,
|
||||
getYForElements,
|
||||
} from '@/lib/orderbookHelpers';
|
||||
import { useAppThemeContext } from '../useAppTheme';
|
||||
|
||||
type ElementProps = {
|
||||
data: Array<PerpetualMarketOrderbookLevel | undefined>;
|
||||
histogramRange: number;
|
||||
side: PerpetualMarketOrderbookLevel['side'];
|
||||
};
|
||||
|
||||
type StyleProps = {
|
||||
histogramSide: 'left' | 'right';
|
||||
};
|
||||
|
||||
enum OrderbookRowAnimationType {
|
||||
REMOVE,
|
||||
NEW,
|
||||
NONE,
|
||||
}
|
||||
|
||||
export const useDrawOrderbook = ({
|
||||
data,
|
||||
histogramRange,
|
||||
histogramSide,
|
||||
side,
|
||||
}: ElementProps & StyleProps) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const canvas = canvasRef.current;
|
||||
const currentOrderbookMap = useSelector(getCurrentMarketOrderbookMap, shallowEqual);
|
||||
const { stepSizeDecimals = TOKEN_DECIMALS, tickSizeDecimals = SMALL_USD_DECIMALS } =
|
||||
useSelector(getCurrentMarketConfig, shallowEqual) || {};
|
||||
const prevData = useRef<typeof data>(data);
|
||||
const theme = useAppThemeContext();
|
||||
|
||||
/**
|
||||
* Scale canvas using device pixel ratio to unblur drawn text
|
||||
* @url https://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas/65124939#65124939
|
||||
* @returns adjusted canvas width/height/rowHeight used in coordinates for drawing
|
||||
**/
|
||||
const { canvasWidth, canvasHeight, rowHeight } = useMemo(() => {
|
||||
const ratio = window.devicePixelRatio || 1;
|
||||
|
||||
if (!canvas) {
|
||||
return {
|
||||
canvasWidth: ORDERBOOK_WIDTH / devicePixelRatio,
|
||||
canvasHeight: ORDERBOOK_HEIGHT / devicePixelRatio,
|
||||
rowHeight: ORDERBOOK_ROW_HEIGHT / devicePixelRatio,
|
||||
};
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = canvas.offsetWidth * ratio;
|
||||
canvas.height = canvas.offsetHeight * ratio;
|
||||
|
||||
if (ctx) {
|
||||
ctx.scale(ratio, ratio);
|
||||
ctx.font = '12px Satoshi';
|
||||
ctx.textAlign = 'right';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.imageSmoothingQuality = 'high';
|
||||
}
|
||||
|
||||
return {
|
||||
canvasWidth: canvas.width / ratio,
|
||||
canvasHeight: canvas.height / ratio,
|
||||
rowHeight: ORDERBOOK_ROW_HEIGHT,
|
||||
};
|
||||
}, [canvas]);
|
||||
|
||||
const drawBars = ({
|
||||
barType,
|
||||
ctx,
|
||||
depthOrSizeValue,
|
||||
gradientMultiplier,
|
||||
histogramAccentColor,
|
||||
histogramSide,
|
||||
idx,
|
||||
}: {
|
||||
barType: 'depth' | 'size';
|
||||
ctx: CanvasRenderingContext2D;
|
||||
depthOrSizeValue: number;
|
||||
gradientMultiplier: number;
|
||||
histogramAccentColor: string;
|
||||
histogramSide: 'left' | 'right';
|
||||
idx: number;
|
||||
}) => {
|
||||
const { x1, x2, y1, y2 } = getRektFromIdx({
|
||||
idx,
|
||||
rowHeight,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
side,
|
||||
});
|
||||
|
||||
// X values
|
||||
const maxHistogramBarWidth = x2 - x1 - (barType === 'size' ? 8 : 2);
|
||||
const barWidth = depthOrSizeValue
|
||||
? Math.min((depthOrSizeValue / histogramRange) * maxHistogramBarWidth, maxHistogramBarWidth)
|
||||
: 0;
|
||||
|
||||
const { gradient, bar } = getHistogramXValues({
|
||||
barWidth,
|
||||
canvasWidth,
|
||||
gradientMultiplier,
|
||||
histogramSide,
|
||||
});
|
||||
|
||||
// Gradient
|
||||
let linearGradient;
|
||||
|
||||
try {
|
||||
linearGradient = ctx.createLinearGradient(gradient.x1, y1, gradient.x2, y2);
|
||||
linearGradient.addColorStop(0, histogramAccentColor);
|
||||
linearGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
|
||||
ctx.fillStyle = linearGradient;
|
||||
} catch (err) {
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0)';
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
// Bar
|
||||
const { bar: y } = getYForElements({ y: y1, rowHeight });
|
||||
|
||||
if (ctx.roundRect) {
|
||||
ctx.roundRect(
|
||||
bar.x1,
|
||||
y,
|
||||
bar.x2,
|
||||
rowHeight - 2,
|
||||
histogramSide === 'right' ? [2, 0, 0, 2] : [0, 2, 2, 0]
|
||||
);
|
||||
} else {
|
||||
ctx.rect(bar.x1, y, bar.x2, rowHeight - 2);
|
||||
}
|
||||
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
const drawText = ({
|
||||
animationType = OrderbookRowAnimationType.NONE,
|
||||
ctx,
|
||||
idx,
|
||||
mine,
|
||||
price,
|
||||
size,
|
||||
}: {
|
||||
animationType?: OrderbookRowAnimationType;
|
||||
ctx: CanvasRenderingContext2D;
|
||||
idx: number;
|
||||
mine?: number;
|
||||
price?: number;
|
||||
size?: number;
|
||||
}) => {
|
||||
const { y1 } = getRektFromIdx({
|
||||
idx,
|
||||
rowHeight,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
side,
|
||||
});
|
||||
|
||||
const { text: y } = getYForElements({ y: y1, rowHeight });
|
||||
|
||||
let textColor: string;
|
||||
let updatedTextColor: string | undefined;
|
||||
|
||||
switch (animationType) {
|
||||
case OrderbookRowAnimationType.REMOVE: {
|
||||
textColor = theme.textSecondary;
|
||||
break;
|
||||
}
|
||||
|
||||
case OrderbookRowAnimationType.NEW: {
|
||||
updatedTextColor = side === 'bid' ? theme.positive : theme.negative;
|
||||
textColor = theme.textPrimary;
|
||||
break;
|
||||
}
|
||||
|
||||
default: {
|
||||
textColor = theme.textPrimary;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Size text
|
||||
if (size) {
|
||||
ctx.fillStyle = updatedTextColor ?? textColor;
|
||||
ctx.fillText(
|
||||
MustBigNumber(size).toFixed(stepSizeDecimals ?? TOKEN_DECIMALS),
|
||||
getXByColumn({ canvasWidth, colIdx: 0 }) - ORDERBOOK_ROW_PADDING_RIGHT,
|
||||
y
|
||||
);
|
||||
}
|
||||
|
||||
// Price text
|
||||
if (price) {
|
||||
ctx.fillStyle = textColor;
|
||||
ctx.fillText(
|
||||
MustBigNumber(price).toFixed(tickSizeDecimals ?? SMALL_USD_DECIMALS),
|
||||
getXByColumn({ canvasWidth, colIdx: 1 }) - ORDERBOOK_ROW_PADDING_RIGHT,
|
||||
y
|
||||
);
|
||||
}
|
||||
|
||||
// Mine text
|
||||
if (mine) {
|
||||
ctx.fillStyle = textColor;
|
||||
ctx.fillText(
|
||||
MustBigNumber(mine).toFixed(stepSizeDecimals ?? TOKEN_DECIMALS),
|
||||
getXByColumn({ canvasWidth, colIdx: 2 }) - ORDERBOOK_ROW_PADDING_RIGHT,
|
||||
y
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const drawOrderbookRow = ({
|
||||
ctx,
|
||||
idx,
|
||||
rowToRender,
|
||||
animationType = OrderbookRowAnimationType.NONE,
|
||||
}: {
|
||||
ctx: CanvasRenderingContext2D;
|
||||
idx: number;
|
||||
rowToRender?: PerpetualMarketOrderbookLevel;
|
||||
animationType?: OrderbookRowAnimationType;
|
||||
}) => {
|
||||
if (!rowToRender) return;
|
||||
const { depth, mine, price, size } = rowToRender;
|
||||
const histogramAccentColor = side === 'bid' ? theme.positiveFaded : theme.negativeFaded;
|
||||
|
||||
// Depth Bar
|
||||
if (depth) {
|
||||
drawBars({
|
||||
barType: 'depth',
|
||||
ctx,
|
||||
depthOrSizeValue: depth,
|
||||
gradientMultiplier: 1.3,
|
||||
histogramAccentColor,
|
||||
histogramSide,
|
||||
idx,
|
||||
});
|
||||
}
|
||||
|
||||
// Size Bar
|
||||
drawBars({
|
||||
barType: 'size',
|
||||
ctx,
|
||||
depthOrSizeValue: size,
|
||||
gradientMultiplier: 5,
|
||||
histogramAccentColor,
|
||||
histogramSide,
|
||||
idx,
|
||||
});
|
||||
|
||||
// Size, Price, Mine
|
||||
drawText({
|
||||
animationType,
|
||||
ctx,
|
||||
idx,
|
||||
mine,
|
||||
price,
|
||||
size,
|
||||
});
|
||||
};
|
||||
|
||||
// Update histograms and row contents on data change
|
||||
useEffect(() => {
|
||||
const ctx = canvas?.getContext('2d');
|
||||
|
||||
if (!canvas || !ctx) return;
|
||||
|
||||
// Clear canvas before redraw
|
||||
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||
|
||||
// Animate row removal and update
|
||||
const mapOfOrderbookPriceLevels =
|
||||
side && currentOrderbookMap?.[side === 'ask' ? 'asks' : 'bids'];
|
||||
const empty: number[] = [];
|
||||
const removed: number[] = [];
|
||||
const updated: number[] = [];
|
||||
|
||||
prevData.current.forEach((row, idx) => {
|
||||
if (!row) {
|
||||
empty.push(idx);
|
||||
return;
|
||||
}
|
||||
|
||||
if (mapOfOrderbookPriceLevels?.[row.price] === 0) {
|
||||
removed.push(idx);
|
||||
drawOrderbookRow({
|
||||
ctx,
|
||||
idx,
|
||||
rowToRender: row,
|
||||
animationType: OrderbookRowAnimationType.REMOVE,
|
||||
});
|
||||
} else if (mapOfOrderbookPriceLevels?.[row.price] === row?.size) {
|
||||
drawOrderbookRow({
|
||||
ctx,
|
||||
idx,
|
||||
rowToRender: data[idx],
|
||||
animationType: OrderbookRowAnimationType.NONE,
|
||||
});
|
||||
} else {
|
||||
updated.push(idx);
|
||||
drawOrderbookRow({
|
||||
ctx,
|
||||
idx,
|
||||
rowToRender: row,
|
||||
animationType: OrderbookRowAnimationType.NEW,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
[...empty, ...removed, ...updated].forEach((idx) => {
|
||||
const { x1, y1, x2, y2 } = getRektFromIdx({
|
||||
idx,
|
||||
rowHeight,
|
||||
canvasWidth,
|
||||
canvasHeight,
|
||||
side,
|
||||
});
|
||||
|
||||
ctx.clearRect(x1, y1, x2 - x1, y2 - y1);
|
||||
drawOrderbookRow({
|
||||
ctx,
|
||||
idx,
|
||||
rowToRender: data[idx],
|
||||
});
|
||||
});
|
||||
}, ORDERBOOK_ANIMATION_DURATION);
|
||||
|
||||
prevData.current = data;
|
||||
}, [
|
||||
canvasHeight,
|
||||
canvasWidth,
|
||||
rowHeight,
|
||||
data,
|
||||
histogramRange,
|
||||
stepSizeDecimals,
|
||||
tickSizeDecimals,
|
||||
histogramSide,
|
||||
side,
|
||||
theme,
|
||||
currentOrderbookMap,
|
||||
]);
|
||||
|
||||
return { canvasRef };
|
||||
};
|
||||
@@ -0,0 +1,126 @@
|
||||
import { useMemo } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import { OrderSide } from '@dydxprotocol/v4-client-js';
|
||||
|
||||
import { type PerpetualMarketOrderbookLevel } from '@/constants/abacus';
|
||||
import { DepthChartSeries, DepthChartDatum } from '@/constants/charts';
|
||||
|
||||
import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
|
||||
import { getSubaccountOpenOrdersBySideAndPrice } from '@/state/accountSelectors';
|
||||
|
||||
import { MustBigNumber } from '@/lib/numbers';
|
||||
|
||||
export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number }) => {
|
||||
const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
|
||||
|
||||
const openOrdersBySideAndPrice =
|
||||
useSelector(getSubaccountOpenOrdersBySideAndPrice, shallowEqual) || {};
|
||||
|
||||
return useMemo(() => {
|
||||
const asks: Array<PerpetualMarketOrderbookLevel | undefined> = (
|
||||
orderbook?.asks?.toArray() ?? []
|
||||
)
|
||||
.map(
|
||||
(row, idx: number) =>
|
||||
({
|
||||
key: `ask-${idx}`,
|
||||
side: 'ask',
|
||||
mine: openOrdersBySideAndPrice[OrderSide.SELL]?.[row.price]?.size,
|
||||
...row,
|
||||
} as PerpetualMarketOrderbookLevel)
|
||||
)
|
||||
.slice(0, maxRowsPerSide);
|
||||
|
||||
const bids: Array<PerpetualMarketOrderbookLevel | undefined> = (
|
||||
orderbook?.bids?.toArray() ?? []
|
||||
)
|
||||
.map(
|
||||
(row, idx: number) =>
|
||||
({
|
||||
key: `bid-${idx}`,
|
||||
side: 'bid',
|
||||
mine: openOrdersBySideAndPrice[OrderSide.BUY]?.[row.price]?.size,
|
||||
...row,
|
||||
} as PerpetualMarketOrderbookLevel)
|
||||
)
|
||||
.slice(0, maxRowsPerSide);
|
||||
|
||||
// Prevent the bid/ask sides from crossing by using the offsets.
|
||||
// While the books are crossing...
|
||||
while (asks[0] && bids[0] && bids[0]!.price >= asks[0].price) {
|
||||
// Drop the order on the side with the lower offset.
|
||||
// The offset of the other side is higher and so supercedes.
|
||||
if (bids[0]!.offset === asks[0].offset) {
|
||||
// If offsets are the same, give precedence to the larger size. In this case,
|
||||
// one of the sizes *should* be zero, but we simply check for the larger size.
|
||||
if (bids[0]!.size > asks[0].size) {
|
||||
asks.shift();
|
||||
} else {
|
||||
bids.pop();
|
||||
}
|
||||
} else {
|
||||
// Offsets are not equal. Give precedence to the larger offset.
|
||||
if (bids[0]!.offset > asks[0].offset) {
|
||||
asks.shift();
|
||||
} else {
|
||||
bids.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const spread =
|
||||
asks[0]?.price && bids[0]?.price ? MustBigNumber(asks[0].price).minus(bids[0].price) : null;
|
||||
|
||||
const spreadPercent = orderbook?.spreadPercent;
|
||||
|
||||
const histogramRange = Math.max(
|
||||
isNaN(Number(bids[bids.length - 1]?.depth)) ? 0 : Number(bids[bids.length - 1]?.depth),
|
||||
isNaN(Number(asks[asks.length - 1]?.depth)) ? 0 : Number(asks[asks.length - 1]?.depth)
|
||||
);
|
||||
|
||||
return {
|
||||
asks,
|
||||
bids,
|
||||
spread,
|
||||
spreadPercent,
|
||||
histogramRange,
|
||||
hasOrderbook: !!orderbook,
|
||||
};
|
||||
}, [orderbook, openOrdersBySideAndPrice]);
|
||||
};
|
||||
|
||||
export const useOrderbookValuesForDepthChart = () => {
|
||||
const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
|
||||
|
||||
return useMemo(() => {
|
||||
const bids = (orderbook?.bids?.toArray() ?? [])
|
||||
.filter(Boolean)
|
||||
.map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
|
||||
|
||||
const asks = (orderbook?.asks?.toArray() ?? [])
|
||||
.filter(Boolean)
|
||||
.map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
|
||||
|
||||
const lowestBid = bids[bids.length - 1];
|
||||
const highestBid = bids[0];
|
||||
const lowestAsk = asks[0];
|
||||
const highestAsk = asks[asks.length - 1];
|
||||
|
||||
const midMarketPrice = orderbook?.midPrice;
|
||||
const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
|
||||
const spreadPercent = orderbook?.spreadPercent;
|
||||
|
||||
return {
|
||||
bids,
|
||||
asks,
|
||||
lowestBid,
|
||||
highestBid,
|
||||
lowestAsk,
|
||||
highestAsk,
|
||||
midMarketPrice,
|
||||
spread,
|
||||
spreadPercent,
|
||||
orderbook,
|
||||
};
|
||||
}, [orderbook]);
|
||||
};
|
||||
@@ -0,0 +1,39 @@
|
||||
import { type RefObject, useEffect, useState } from 'react';
|
||||
|
||||
export const useSpreadRowScrollListener = ({
|
||||
orderbookRef,
|
||||
spreadRowRef,
|
||||
}: {
|
||||
orderbookRef: RefObject<HTMLDivElement>;
|
||||
spreadRowRef: RefObject<HTMLDivElement>;
|
||||
}) => {
|
||||
const [displaySide, setDisplaySide] = useState<string>();
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => {
|
||||
if (spreadRowRef.current && orderbookRef.current) {
|
||||
const { clientHeight } = orderbookRef.current;
|
||||
const parent = orderbookRef.current.getBoundingClientRect();
|
||||
const spread = spreadRowRef.current.getBoundingClientRect();
|
||||
const spreadTop = spread.top - parent.top;
|
||||
const spreadBottom = spread.bottom - parent.top;
|
||||
|
||||
if (spreadBottom > clientHeight) {
|
||||
setDisplaySide('bottom');
|
||||
} else if (spreadTop < 0) {
|
||||
setDisplaySide('top');
|
||||
} else {
|
||||
setDisplaySide(undefined);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
orderbookRef.current?.addEventListener('scroll', onScroll, false);
|
||||
|
||||
return () => {
|
||||
orderbookRef.current?.removeEventListener('scroll', onScroll, false);
|
||||
};
|
||||
}, [orderbookRef.current, spreadRowRef.current]);
|
||||
|
||||
return displaySide;
|
||||
};
|
||||
@@ -1,44 +0,0 @@
|
||||
import { useMemo } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
|
||||
import { DepthChartSeries, DepthChartDatum } from '@/constants/charts';
|
||||
|
||||
import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
|
||||
|
||||
import { MustBigNumber } from '@/lib/numbers';
|
||||
|
||||
export const useOrderbookValuesForDepthChart = () => {
|
||||
const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
|
||||
|
||||
return useMemo(() => {
|
||||
const bids = (orderbook?.bids?.toArray() ?? [])
|
||||
.filter(Boolean)
|
||||
.map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
|
||||
|
||||
const asks = (orderbook?.asks?.toArray() ?? [])
|
||||
.filter(Boolean)
|
||||
.map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
|
||||
|
||||
const lowestBid = bids[bids.length - 1];
|
||||
const highestBid = bids[0];
|
||||
const lowestAsk = asks[0];
|
||||
const highestAsk = asks[asks.length - 1];
|
||||
|
||||
const midMarketPrice = orderbook?.midPrice;
|
||||
const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
|
||||
const spreadPercent = orderbook?.spreadPercent;
|
||||
|
||||
return {
|
||||
bids,
|
||||
asks,
|
||||
lowestBid,
|
||||
highestBid,
|
||||
lowestAsk,
|
||||
highestAsk,
|
||||
midMarketPrice,
|
||||
spread,
|
||||
spreadPercent,
|
||||
orderbook,
|
||||
};
|
||||
}, [orderbook]);
|
||||
};
|
||||
Reference in New Issue
Block a user