Skip to content

Commit

Permalink
Fix and adapt order page and navigation to federation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Reckless-Satoshi
Reckless-Satoshi committed Aug 17, 2023
1 parent 882bd38 commit 96ebe99
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 93 deletions.
36 changes: 25 additions & 11 deletions frontend/src/basic/OrderPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ import TradeBox from '../../components/TradeBox';
import OrderDetails from '../../components/OrderDetails';

import { apiClient } from '../../services/api';
import { AppContext, hostUrl, type UseAppStoreType } from '../../contexts/AppContext';
import { AppContext, hostUrl, origin, type UseAppStoreType } from '../../contexts/AppContext';

const OrderPage = (): JSX.Element => {
const {
windowSize,
info,
setFocusedCoordinator,
setOpen,
federation,
order,
robot,
settings,
Expand All @@ -32,15 +34,24 @@ const OrderPage = (): JSX.Element => {
const maxHeight: number = (windowSize.height - navbarHeight) * 0.85 - 3;

const [tab, setTab] = useState<'order' | 'contract'>('contract');
const [baseUrl, setBaseUrl] = useState<string>(hostUrl);

useEffect(() => {
const newOrder = { shortAlias: params.shortAlias, id: Number(params.orderId) };
setBaseUrl(federation[newOrder.shortAlias][settings.network][origin]);
if (currentOrder !== newOrder) {
clearOrder();
setCurrentOrder(newOrder);
}
}, [params.orderId]);

const onClickCoordinator = function (): void {
setFocusedCoordinator(currentOrder.shortAlias);
setOpen((open) => {
return { ...open, coordinator: true };
});
};

const renewOrder = function (): void {
if (order !== undefined) {
const body = {
Expand All @@ -59,12 +70,12 @@ const OrderPage = (): JSX.Element => {
bond_size: order.bond_size,
};
apiClient
.post(hostUrl, '/api/make/', body, { tokenSHA256: robot.tokenSHA256 })
.post(baseUrl, '/api/make/', body, { tokenSHA256: robot.tokenSHA256 })
.then((data: any) => {
if (data.bad_request !== undefined) {
setBadOrder(data.bad_request);
} else if (data.id !== undefined) {
navigate(`/order/${String(data.id)}`);
navigate(`/order/${String(currentOrder.shortAlias)}/${String(data.id)}`);
}
})
.catch(() => {
Expand Down Expand Up @@ -108,9 +119,10 @@ const OrderPage = (): JSX.Element => {
>
<OrderDetails
order={order}
coordinator={federation[String(currentOrder.shortAlias)]}
onClickCoordinator={onClickCoordinator}
setOrder={setOrder}
baseUrl={hostUrl}
info={info}
baseUrl={baseUrl}
hasRobot={robot.avatarLoaded}
onClickGenerateRobot={() => {
navigate('/robot');
Expand All @@ -133,7 +145,7 @@ const OrderPage = (): JSX.Element => {
settings={settings}
setOrder={setOrder}
setBadOrder={setBadOrder}
baseUrl={hostUrl}
baseUrl={baseUrl}
onRenewOrder={renewOrder}
onStartAgain={startAgain}
/>
Expand Down Expand Up @@ -166,9 +178,10 @@ const OrderPage = (): JSX.Element => {
<div style={{ display: tab === 'order' ? '' : 'none' }}>
<OrderDetails
order={order}
coordinator={federation[String(currentOrder.shortAlias)]}
onClickCoordinator={onClickCoordinator}
setOrder={setOrder}
baseUrl={hostUrl}
info={info}
baseUrl={baseUrl}
hasRobot={robot.avatarLoaded}
onClickGenerateRobot={() => {
navigate('/robot');
Expand All @@ -182,7 +195,7 @@ const OrderPage = (): JSX.Element => {
settings={settings}
setOrder={setOrder}
setBadOrder={setBadOrder}
baseUrl={hostUrl}
baseUrl={baseUrl}
onRenewOrder={renewOrder}
onStartAgain={startAgain}
/>
Expand All @@ -201,9 +214,10 @@ const OrderPage = (): JSX.Element => {
>
<OrderDetails
order={order}
coordinator={federation[String(currentOrder.shortAlias)]}
onClickCoordinator={onClickCoordinator}
setOrder={setOrder}
baseUrl={hostUrl}
info={info}
hasRobot={robot.avatarLoaded}
onClickGenerateRobot={() => {
navigate('/robot');
Expand Down
163 changes: 88 additions & 75 deletions frontend/src/components/Dialogs/Coordinator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,70 +237,83 @@ const BadgesHall = ({ badges }: BadgesProps): JSX.Element => {
{...tooltipProps}
title={
<Typography align='center' variant='body2'>
{badges?.isFounder ? t('Founder: coordinating trades since the testnet federation.') : t('Not a federation founder')}
{badges?.isFounder === true
? t('Founder: coordinating trades since the testnet federation.')
: t('Not a federation founder')}
</Typography>
}
>
<Grid item sx={{filter: badges?.isFounder !== true ? "grayscale(100%)" : undefined }}>
<Grid item sx={{ filter: badges?.isFounder !== true ? 'grayscale(100%)' : undefined }}>
<BadgeFounder sx={sxProps} />
</Grid>
</Tooltip>

<Tooltip
{...tooltipProps}
title={
<Typography align='center' variant='body2'>
{t('Development fund supporter: donates {{percent}}% to make RoboSats better.', {
percent: badges?.donatesToDevFund,
})}
</Typography>
}
>
<Grid item sx={{filter: Number(badges?.donatesToDevFund) >= 20 ? undefined : "grayscale(100%)"}}>
<BadgeDevFund sx={sxProps} />
</Grid>
</Tooltip>

<Tooltip
{...tooltipProps}
title={
<Typography align='center' variant='body2'>
{badges?.hasGoodOpSec === true ? t(
'Good OpSec: the coordinator follows best practices to protect his and your privacy.',
): t('The privacy practices of this coordinator could improve')}
</Typography>
}
{...tooltipProps}
title={
<Typography align='center' variant='body2'>
{t('Development fund supporter: donates {{percent}}% to make RoboSats better.', {
percent: badges?.donatesToDevFund,
})}
</Typography>
}
>
<Grid
item
sx={{ filter: Number(badges?.donatesToDevFund) >= 20 ? undefined : 'grayscale(100%)' }}
>
<Grid item sx={{filter: badges?.hasGoodOpSec === true ? undefined : "grayscale(100%)"}}>
<BadgePrivacy sx={sxProps} />
</Grid>
</Tooltip>
<BadgeDevFund sx={sxProps} />
</Grid>
</Tooltip>

<Tooltip
{...tooltipProps}
title={
<Typography align='center' variant='body2'>
{badges?.robotsLove === true ? t('Loved by robots: receives positive comments by robots over the internet.') : t('The coordinator does not seem to receive exceptional love from robots over the internet')}
{badges?.hasGoodOpSec === true
? t(
'Good OpSec: the coordinator follows best practices to protect his and your privacy.',
)
: t('The privacy practices of this coordinator could improve')}
</Typography>
}
>
<Grid item sx={{filter: badges?.robotsLove === true ? undefined : "grayscale(100%)"}}>
<Grid item sx={{ filter: badges?.hasGoodOpSec === true ? undefined : 'grayscale(100%)' }}>
<BadgePrivacy sx={sxProps} />
</Grid>
</Tooltip>

<Tooltip
{...tooltipProps}
title={
<Typography align='center' variant='body2'>
{badges?.robotsLove === true
? t('Loved by robots: receives positive comments by robots over the internet.')
: t(
'The coordinator does not seem to receive exceptional love from robots over the internet',
)}
</Typography>
}
>
<Grid item sx={{ filter: badges?.robotsLove === true ? undefined : 'grayscale(100%)' }}>
<BadgeLoved sx={sxProps} />
</Grid>
</Tooltip>

<Tooltip
{...tooltipProps}
title={
<Typography align='center' variant='body2'>
{badges?.hasLargeLimits === true ? t('Large limits: the coordinator has large trade limits.') : t('Does not have large trade limits.')}
</Typography>
}
>
<Grid item sx={{filter: badges?.hasLargeLimits === true ? undefined : "grayscale(100%)"}}>
<BadgeLimits sx={sxProps} />
</Grid>
</Tooltip>
<Tooltip
{...tooltipProps}
title={
<Typography align='center' variant='body2'>
{badges?.hasLargeLimits === true
? t('Large limits: the coordinator has large trade limits.')
: t('Does not have large trade limits.')}
</Typography>
}
>
<Grid item sx={{ filter: badges?.hasLargeLimits === true ? undefined : 'grayscale(100%)' }}>
<BadgeLimits sx={sxProps} />
</Grid>
</Tooltip>
</Grid>
);
};
Expand Down Expand Up @@ -346,40 +359,40 @@ const CoordinatorDialog = ({ open = false, onClose, coordinator, network }: Prop
</Grid>
</ListItem>

{['offers','order','create'].includes(page) && (
<>
<ListItem {...listItemProps}>
<ListItemIcon>
<Percent />
</ListItemIcon>

<Grid container>
<Grid item xs={6}>
<ListItemText secondary={t('Maker fee')}>
{(coordinator?.info?.maker_fee * 100).toFixed(3)}%
</ListItemText>
</Grid>
{['offers', 'order', 'create'].includes(page) && (
<>
<ListItem {...listItemProps}>
<ListItemIcon>
<Percent />
</ListItemIcon>

<Grid container>
<Grid item xs={6}>
<ListItemText secondary={t('Maker fee')}>
{(coordinator?.info?.maker_fee * 100).toFixed(3)}%
</ListItemText>
</Grid>

<Grid item xs={6}>
<ListItemText secondary={t('Taker fee')}>
{(coordinator?.info?.taker_fee * 100).toFixed(3)}%
</ListItemText>
</Grid>
<Grid item xs={6}>
<ListItemText secondary={t('Taker fee')}>
{(coordinator?.info?.taker_fee * 100).toFixed(3)}%
</ListItemText>
</Grid>
</ListItem>

<ListItem {...listItemProps}>
<ListItemIcon>
<LinkIcon />
</ListItemIcon>

<ListItemText
primary={`${coordinator?.info?.current_swap_fee_rate.toPrecision(3)}%`}
secondary={t('Current onchain payout fee')}
/>
</ListItem>
</>
)}
</Grid>
</ListItem>

<ListItem {...listItemProps}>
<ListItemIcon>
<LinkIcon />
</ListItemIcon>

<ListItemText
primary={`${String(coordinator?.info?.current_swap_fee_rate.toPrecision(3))}%`}
secondary={t('Current onchain payout fee')}
/>
</ListItem>
</>
)}
<ListItem>
<BadgesHall badges={coordinator?.badges} />
</ListItem>
Expand Down
32 changes: 27 additions & 5 deletions frontend/src/components/OrderDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
useTheme,
Typography,
IconButton,
ListItemButton,
} from '@mui/material';

import Countdown, { type CountdownRenderProps, zeroPad } from 'react-countdown';
Expand All @@ -34,22 +35,25 @@ import { PaymentStringAsIcons } from '../../components/PaymentMethods';
import { FlagWithProps, SendReceiveIcon } from '../Icons';
import LinearDeterminate from './LinearDeterminate';

import { type Order, type Info } from '../../models';
import type { Order, Coordinator } from '../../models';
import { statusBadgeColor, pn, amountToString, computeSats } from '../../utils';
import TakeButton from './TakeButton';
import { hostUrl } from '../../contexts/AppContext';

interface OrderDetailsProps {
order: Order;
coordinator: Coordinator;
onClickCoordinator?: () => void;
setOrder: (state: Order) => void;
info: Info;
baseUrl: string;
hasRobot: boolean;
onClickGenerateRobot?: () => void;
}

const OrderDetails = ({
order,
info,
coordinator,
onClickCoordinator = () => null,
setOrder,
baseUrl,
hasRobot,
Expand Down Expand Up @@ -159,7 +163,9 @@ const OrderDetails = ({
let sats: string = '';

const isBuyer = (order.type === 0 && order.is_maker) || (order.type === 1 && !order.is_maker);
const tradeFee = order.is_maker ? info?.maker_fee ?? 0 : info?.taker_fee ?? 0;
const tradeFee = order.is_maker
? coordinator.info?.maker_fee ?? 0
: coordinator.info?.taker_fee ?? 0;
const defaultRoutingBudget = 0.001;
const btc_now = order.satoshis_now / 100000000;
const rate = order.amount > 0 ? order.amount / btc_now : Number(order.max_amount) / btc_now;
Expand Down Expand Up @@ -228,6 +234,22 @@ const OrderDetails = ({
<Grid container spacing={0}>
<Grid item xs={12}>
<List dense={true}>
<ListItemButton
onClick={() => {
onClickCoordinator();
}}
>
<ListItemAvatar>
<RobotAvatar
nickname={coordinator.shortAlias}
coordinator={true}
baseUrl={hostUrl}
small={true}
/>
</ListItemAvatar>
<ListItemText primary={coordinator.longAlias} secondary={t('Order host')} />
</ListItemButton>

<ListItem>
<ListItemAvatar sx={{ width: '4em', height: '4em' }}>
<RobotAvatar
Expand Down Expand Up @@ -453,7 +475,7 @@ const OrderDetails = ({
setOrder={setOrder}
baseUrl={baseUrl}
hasRobot={hasRobot}
info={info}
info={coordinator.info}
onClickGenerateRobot={onClickGenerateRobot}
/>
</Grid>
Expand Down
Loading

0 comments on commit 96ebe99

Please sign in to comment.