mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-28 14:53:57 +03:00
Try out to revert depth chart
This commit is contained in:
parent
ef73c980a8
commit
78a8ab799d
@ -193,7 +193,7 @@ const BookPage = ({
|
|||||||
orders={book.orders}
|
orders={book.orders}
|
||||||
lastDayPremium={lastDayPremium}
|
lastDayPremium={lastDayPremium}
|
||||||
currency={fav.currency}
|
currency={fav.currency}
|
||||||
limitList={limits.list}
|
limits={limits.list}
|
||||||
maxWidth={chartWidthEm} // EM units
|
maxWidth={chartWidthEm} // EM units
|
||||||
maxHeight={windowSize.height * 0.825 - 5} // EM units
|
maxHeight={windowSize.height * 0.825 - 5} // EM units
|
||||||
/>
|
/>
|
||||||
@ -204,7 +204,7 @@ const BookPage = ({
|
|||||||
orders={book.orders}
|
orders={book.orders}
|
||||||
lastDayPremium={lastDayPremium}
|
lastDayPremium={lastDayPremium}
|
||||||
currency={fav.currency}
|
currency={fav.currency}
|
||||||
limitList={limits.list}
|
limits={limits.list}
|
||||||
maxWidth={windowSize.width * 0.8} // EM units
|
maxWidth={windowSize.width * 0.8} // EM units
|
||||||
maxHeight={windowSize.height * 0.825 - 5} // EM units
|
maxHeight={windowSize.height * 0.825 - 5} // EM units
|
||||||
/>
|
/>
|
||||||
|
@ -34,7 +34,7 @@ interface DepthChartProps {
|
|||||||
orders: Order[];
|
orders: Order[];
|
||||||
lastDayPremium: number | undefined;
|
lastDayPremium: number | undefined;
|
||||||
currency: number;
|
currency: number;
|
||||||
limitList: LimitList;
|
limits: LimitList;
|
||||||
maxWidth: number;
|
maxWidth: number;
|
||||||
maxHeight: number;
|
maxHeight: number;
|
||||||
}
|
}
|
||||||
@ -43,7 +43,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
|
|||||||
orders,
|
orders,
|
||||||
lastDayPremium,
|
lastDayPremium,
|
||||||
currency,
|
currency,
|
||||||
limitList,
|
limits,
|
||||||
maxWidth,
|
maxWidth,
|
||||||
maxHeight,
|
maxHeight,
|
||||||
}) => {
|
}) => {
|
||||||
@ -55,25 +55,29 @@ const DepthChart: React.FC<DepthChartProps> = ({
|
|||||||
const [rangeSteps, setRangeSteps] = useState<number>(8);
|
const [rangeSteps, setRangeSteps] = useState<number>(8);
|
||||||
const [xRange, setXRange] = useState<number>(8);
|
const [xRange, setXRange] = useState<number>(8);
|
||||||
const [xType, setXType] = useState<string>('premium');
|
const [xType, setXType] = useState<string>('premium');
|
||||||
|
const [currencyCode, setCurrencyCode] = useState<number>(1);
|
||||||
const [center, setCenter] = useState<number>();
|
const [center, setCenter] = useState<number>();
|
||||||
|
|
||||||
const height = maxHeight < 20 ? 20 : maxHeight;
|
const height = maxHeight < 20 ? 20 : maxHeight;
|
||||||
const width = maxWidth < 20 ? 20 : maxWidth > 72.8 ? 72.8 : maxWidth;
|
const width = maxWidth < 20 ? 20 : maxWidth > 72.8 ? 72.8 : maxWidth;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (Object.keys(limitList).length > 0) {
|
setCurrencyCode(currency === 0 ? 1 : currency);
|
||||||
|
}, [currency]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (Object.keys(limits).length > 0) {
|
||||||
const enriched = orders.map((order) => {
|
const enriched = orders.map((order) => {
|
||||||
// We need to transform all currencies to the same base (ex. USD), we don't have the exchange rate
|
// We need to transform all currencies to the same base (ex. USD), we don't have the exchange rate
|
||||||
// for EUR -> USD, but we know the rate of both to BTC, so we get advantage of it and apply a
|
// for EUR -> USD, but we know the rate of both to BTC, so we get advantage of it and apply a
|
||||||
// simple rule of three
|
// simple rule of three
|
||||||
order.base_amount =
|
order.base_amount =
|
||||||
(order.price * limitList[currency === 0 ? 1 : currency].price) /
|
(order.price * limits[currencyCode].price) / limits[order.currency].price;
|
||||||
limitList[order.currency].price;
|
|
||||||
return order;
|
return order;
|
||||||
});
|
});
|
||||||
setEnrichedOrders(enriched);
|
setEnrichedOrders(enriched);
|
||||||
}
|
}
|
||||||
}, [limitList, orders, currency]);
|
}, [limits, orders, currencyCode]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (enrichedOrders.length > 0) {
|
if (enrichedOrders.length > 0) {
|
||||||
@ -98,7 +102,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
|
|||||||
setXRange(8);
|
setXRange(8);
|
||||||
setRangeSteps(0.5);
|
setRangeSteps(0.5);
|
||||||
}
|
}
|
||||||
}, [enrichedOrders, xType, lastDayPremium, currency]);
|
}, [enrichedOrders, xType, lastDayPremium, currencyCode]);
|
||||||
|
|
||||||
const generateSeries: () => void = () => {
|
const generateSeries: () => void = () => {
|
||||||
const sortedOrders: Order[] =
|
const sortedOrders: Order[] =
|
||||||
@ -323,7 +327,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
|
|||||||
<Grid item>
|
<Grid item>
|
||||||
<Box justifyContent='center'>
|
<Box justifyContent='center'>
|
||||||
{xType === 'base_amount'
|
{xType === 'base_amount'
|
||||||
? `${center} ${currencyDict[currency === 0 ? 1 : currency]}`
|
? `${center} ${currencyDict[currencyCode]}`
|
||||||
: `${center}%`}
|
: `${center}%`}
|
||||||
</Box>
|
</Box>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
Loading…
Reference in New Issue
Block a user