mirror of
https://github.com/RoboSats/robosats.git
synced 2025-07-22 15:33:32 +00:00
205 lines
6.5 KiB
TypeScript
205 lines
6.5 KiB
TypeScript
import React, { useContext, useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Tab, Tabs, Paper, CircularProgress, Grid, Typography, Box } from '@mui/material';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
|
|
import TradeBox from '../../components/TradeBox';
|
|
import OrderDetails from '../../components/OrderDetails';
|
|
|
|
import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
|
|
import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
|
|
import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext';
|
|
import { type Order } from '../../models';
|
|
import CautionDialog from './CautionDialog';
|
|
|
|
const OrderPage = (): JSX.Element => {
|
|
const { windowSize, setOpen, settings, navbarHeight, hostUrl, origin } =
|
|
useContext<UseAppStoreType>(AppContext);
|
|
const { federation } = useContext<UseFederationStoreType>(FederationContext);
|
|
const { garage, badOrder, setBadOrder } = useContext<UseGarageStoreType>(GarageContext);
|
|
const [openCoordinatorWarning, setOpenCoordinatorWarning] = useState<Boolean>(true);
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const params = useParams();
|
|
|
|
const doublePageWidth: number = 50;
|
|
const maxHeight: number = (windowSize?.height - navbarHeight) * 0.85 - 3;
|
|
|
|
const [tab, setTab] = useState<'order' | 'contract'>('contract');
|
|
const [baseUrl, setBaseUrl] = useState<string>(hostUrl);
|
|
const [currentOrder, setCurrentOrder] = useState<Order | null>(null);
|
|
const [currentOrderId, setCurrentOrderId] = useState<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
const coordinator = federation.getCoordinator(params.shortAlias ?? '');
|
|
const { url, basePath } = coordinator.getEndpoint(
|
|
settings.network,
|
|
origin,
|
|
settings.selfhostedClient,
|
|
hostUrl,
|
|
);
|
|
|
|
setBaseUrl(`${url}${basePath}`);
|
|
|
|
const orderId = Number(params.orderId);
|
|
if (Boolean(orderId) && currentOrderId !== orderId) setCurrentOrderId(orderId);
|
|
}, [params]);
|
|
|
|
useEffect(() => {
|
|
setCurrentOrder(null);
|
|
if (currentOrderId !== null) {
|
|
const coordinator = federation.getCoordinator(params.shortAlias ?? '');
|
|
const slot = garage.getSlot();
|
|
const robot = slot?.getRobot();
|
|
if (robot != null && slot?.token != null) {
|
|
void federation.fetchRobot(garage, slot.token);
|
|
coordinator
|
|
.fetchOrder(currentOrderId, robot)
|
|
.then((order) => {
|
|
if (order?.bad_request !== undefined) {
|
|
setBadOrder(order.bad_request);
|
|
} else if (Boolean(order?.id)) {
|
|
setCurrentOrder(order);
|
|
if (order?.is_participant) {
|
|
garage.updateOrder(order);
|
|
}
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
});
|
|
}
|
|
}
|
|
}, [currentOrderId]);
|
|
|
|
const onClickCoordinator = function (): void {
|
|
if (currentOrder?.shortAlias != null) {
|
|
setOpen((open) => {
|
|
return { ...open, coordinator: currentOrder?.shortAlias };
|
|
});
|
|
}
|
|
};
|
|
|
|
const startAgain = (): void => {
|
|
navigate('/robot');
|
|
};
|
|
|
|
const orderDetailsSpace = currentOrder ? (
|
|
<OrderDetails
|
|
shortAlias={String(currentOrder.shortAlias)}
|
|
currentOrder={currentOrder}
|
|
onClickCoordinator={onClickCoordinator}
|
|
baseUrl={baseUrl}
|
|
onClickGenerateRobot={() => {
|
|
navigate('/robot');
|
|
}}
|
|
/>
|
|
) : (
|
|
<></>
|
|
);
|
|
|
|
const tradeBoxSpace = currentOrder ? (
|
|
<TradeBox baseUrl={baseUrl} onStartAgain={startAgain} />
|
|
) : (
|
|
<></>
|
|
);
|
|
|
|
return (
|
|
<Box>
|
|
<CautionDialog
|
|
open={openCoordinatorWarning}
|
|
onClose={() => setOpenCoordinatorWarning(false)}
|
|
longAlias={federation.getCoordinator(params.shortAlias ?? '').longAlias}
|
|
/>
|
|
{currentOrder === null && badOrder === undefined && <CircularProgress />}
|
|
{badOrder !== undefined ? (
|
|
<Typography align='center' variant='subtitle2' color='secondary'>
|
|
{t(badOrder)}
|
|
</Typography>
|
|
) : null}
|
|
{currentOrder !== null && badOrder === undefined ? (
|
|
currentOrder.is_participant ? (
|
|
windowSize.width > doublePageWidth ? (
|
|
// DOUBLE PAPER VIEW
|
|
<Grid
|
|
container
|
|
direction='row'
|
|
justifyContent='center'
|
|
alignItems='flex-start'
|
|
spacing={2}
|
|
style={{ width: '43em' }}
|
|
>
|
|
<Grid item xs={6} style={{ width: '21em' }}>
|
|
<Paper
|
|
elevation={12}
|
|
style={{
|
|
width: '21em',
|
|
maxHeight: `${maxHeight}em`,
|
|
overflow: 'auto',
|
|
}}
|
|
>
|
|
{orderDetailsSpace}
|
|
</Paper>
|
|
</Grid>
|
|
<Grid item xs={6} style={{ width: '21em' }}>
|
|
<Paper
|
|
elevation={12}
|
|
style={{
|
|
width: '21em',
|
|
maxHeight: `${maxHeight}em`,
|
|
overflow: 'auto',
|
|
}}
|
|
>
|
|
{tradeBoxSpace}
|
|
</Paper>
|
|
</Grid>
|
|
</Grid>
|
|
) : (
|
|
// SINGLE PAPER VIEW
|
|
<Box>
|
|
<Box sx={{ borderBottom: 1, borderColor: 'divider', width: '21em' }}>
|
|
<Tabs
|
|
value={tab}
|
|
onChange={(_mouseEvent, value) => {
|
|
setTab(value);
|
|
}}
|
|
variant='fullWidth'
|
|
>
|
|
<Tab label={t('Order')} value='order' />
|
|
<Tab label={t('Contract')} value='contract' />
|
|
</Tabs>
|
|
</Box>
|
|
<Paper
|
|
elevation={12}
|
|
style={{
|
|
width: '21em',
|
|
maxHeight: `${maxHeight}em`,
|
|
overflow: 'auto',
|
|
}}
|
|
>
|
|
<div style={{ display: tab === 'order' ? '' : 'none' }}>{orderDetailsSpace}</div>
|
|
<div style={{ display: tab === 'contract' ? '' : 'none' }}>{tradeBoxSpace}</div>
|
|
</Paper>
|
|
</Box>
|
|
)
|
|
) : (
|
|
<Paper
|
|
elevation={12}
|
|
style={{
|
|
width: '21em',
|
|
maxHeight: `${maxHeight}em`,
|
|
overflow: 'auto',
|
|
}}
|
|
>
|
|
{orderDetailsSpace}
|
|
</Paper>
|
|
)
|
|
) : (
|
|
<></>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default OrderPage;
|