Robosats/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-08-01 22:51:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Add skeleton while loading limits
This commit is contained in:
KoalaSat
2024-10-20 22:07:11 +00:00
committed by GitHub
parent 72cd7a8e05 60f2d1774a
commit 1f2d01b781
3 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/basic/Routes.tsx
View File

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

11
frontend/src/components/BookTable/index.tsx
View File

@ -15,6 +15,7 @@ import {
IconButton, IconButton,
Tooltip, Tooltip,
styled, styled,
Skeleton,
} from '@mui/material'; } from '@mui/material';
import { import {
DataGrid, DataGrid,
@ -427,8 +428,8 @@ const BookTable = ({
const currencyCode = String(currencyDict[params.row.currency.toString()]); const currencyCode = String(currencyDict[params.row.currency.toString()]);
const coordinator = federation.getCoordinator(params.row.coordinatorShortAlias); const coordinator = federation.getCoordinator(params.row.coordinatorShortAlias);
const premium = parseFloat(params.row.premium); const premium = parseFloat(params.row.premium);
const price = const limitPrice = coordinator.limits[params.row.currency.toString()]?.price;
(coordinator.limits[params.row.currency.toString()]?.price ?? 1) * (1 + premium / 100); const price = (limitPrice ?? 1) * (1 + premium / 100);
return ( return (
<div <div
@ -437,7 +438,11 @@ const BookTable = ({
onOrderClicked(params.row.id, params.row.coordinatorShortAlias); 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> </div>
); );
}, },

8
frontend/src/components/Charts/DepthChart/index.tsx
View File

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