Merge pull request #1570 from RoboSats/add-skeleton-while-loading-limits

Add skeleton while loading limits
This commit is contained in:
KoalaSat 2024-10-20 22:07:11 +00:00 committed by GitHub
commit 1f2d01b781
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 13 additions and 8 deletions

View File

@ -27,7 +27,7 @@ const Routes: React.FC = () => {
return (
<DomRoutes>
{['/garage/:token?', '/', ''].map((path, index) => {
{['/garage/:token?', '/garage', '/', ''].map((path, index) => {
return (
<Route
path={path}

View File

@ -15,6 +15,7 @@ import {
IconButton,
Tooltip,
styled,
Skeleton,
} from '@mui/material';
import {
DataGrid,
@ -427,8 +428,8 @@ const BookTable = ({
const currencyCode = String(currencyDict[params.row.currency.toString()]);
const coordinator = federation.getCoordinator(params.row.coordinatorShortAlias);
const premium = parseFloat(params.row.premium);
const price =
(coordinator.limits[params.row.currency.toString()]?.price ?? 1) * (1 + premium / 100);
const limitPrice = coordinator.limits[params.row.currency.toString()]?.price;
const price = (limitPrice ?? 1) * (1 + premium / 100);
return (
<div
@ -437,7 +438,11 @@ const BookTable = ({
onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
}}
>
{`${pn(Math.round(price))} ${currencyCode}/BTC`}
{limitPrice ? (
`${pn(Math.round(price))} ${currencyCode}/BTC`
) : (
<Skeleton variant='rectangular' width={200} height={20} style={{ marginTop: 15 }} />
)}
</div>
);
},

View File

@ -68,7 +68,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
useEffect(() => {
if (Object.values(federation.book).length > 0) {
const enriched = Object.values(federation.book).map((order) => {
if (order.coordinatorShortAlias != null && order.currency) {
if (order && order.coordinatorShortAlias != null && order.currency) {
const limits = federation.getCoordinator(order.coordinatorShortAlias).limits;
const originalPrice =
@ -127,12 +127,12 @@ const DepthChart: React.FC<DepthChartProps> = ({
? enrichedOrders.sort(
(order1, order2) => (order1?.base_price ?? 0) - (order2?.base_price ?? 0),
)
: enrichedOrders.sort((order1, order2) => order1.premium - order2.premium);
: enrichedOrders.sort((order1, order2) => order1?.premium - order2?.premium);
const sortedBuyOrders: PublicOrder[] = sortedOrders
.filter((order) => order.type === 0)
.filter((order) => order?.type === 0)
.reverse();
const sortedSellOrders: PublicOrder[] = sortedOrders.filter((order) => order.type === 1);
const sortedSellOrders: PublicOrder[] = sortedOrders.filter((order) => order?.type === 1);
const buySerie: Datum[] = generateSerie(sortedBuyOrders);
const sellSerie: Datum[] = generateSerie(sortedSellOrders);