From 96ebe99612e9abcc00fd04e65a0f60e2af1e88fc Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Thu, 17 Aug 2023 04:23:31 -0700 Subject: [PATCH] Fix and adapt order page and navigation to federation --- frontend/src/basic/OrderPage/index.tsx | 36 ++-- .../src/components/Dialogs/Coordinator.tsx | 163 ++++++++++-------- .../src/components/OrderDetails/index.tsx | 32 +++- frontend/src/components/RobotInfo/index.tsx | 4 +- 4 files changed, 142 insertions(+), 93 deletions(-) diff --git a/frontend/src/basic/OrderPage/index.tsx b/frontend/src/basic/OrderPage/index.tsx index c8bdc77c4..df5ac5c0a 100644 --- a/frontend/src/basic/OrderPage/index.tsx +++ b/frontend/src/basic/OrderPage/index.tsx @@ -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, @@ -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(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 = { @@ -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(() => { @@ -108,9 +119,10 @@ const OrderPage = (): JSX.Element => { > { navigate('/robot'); @@ -133,7 +145,7 @@ const OrderPage = (): JSX.Element => { settings={settings} setOrder={setOrder} setBadOrder={setBadOrder} - baseUrl={hostUrl} + baseUrl={baseUrl} onRenewOrder={renewOrder} onStartAgain={startAgain} /> @@ -166,9 +178,10 @@ const OrderPage = (): JSX.Element => {
{ navigate('/robot'); @@ -182,7 +195,7 @@ const OrderPage = (): JSX.Element => { settings={settings} setOrder={setOrder} setBadOrder={setBadOrder} - baseUrl={hostUrl} + baseUrl={baseUrl} onRenewOrder={renewOrder} onStartAgain={startAgain} /> @@ -201,9 +214,10 @@ const OrderPage = (): JSX.Element => { > { navigate('/robot'); diff --git a/frontend/src/components/Dialogs/Coordinator.tsx b/frontend/src/components/Dialogs/Coordinator.tsx index 1f65dadc5..08b167146 100644 --- a/frontend/src/components/Dialogs/Coordinator.tsx +++ b/frontend/src/components/Dialogs/Coordinator.tsx @@ -237,70 +237,83 @@ const BadgesHall = ({ badges }: BadgesProps): JSX.Element => { {...tooltipProps} title={ - {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')} } > - + - {t('Development fund supporter: donates {{percent}}% to make RoboSats better.', { - percent: badges?.donatesToDevFund, - })} - - } - > - = 20 ? undefined : "grayscale(100%)"}}> - - - - - - {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')} - - } + {...tooltipProps} + title={ + + {t('Development fund supporter: donates {{percent}}% to make RoboSats better.', { + percent: badges?.donatesToDevFund, + })} + + } + > + = 20 ? undefined : 'grayscale(100%)' }} > - - - - + + + - {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')} } > - + + + + + + + {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?.hasLargeLimits === true ? t('Large limits: the coordinator has large trade limits.') : t('Does not have large trade limits.')} - - } - > - - - - + + {badges?.hasLargeLimits === true + ? t('Large limits: the coordinator has large trade limits.') + : t('Does not have large trade limits.')} + + } + > + + + + ); }; @@ -346,40 +359,40 @@ const CoordinatorDialog = ({ open = false, onClose, coordinator, network }: Prop - {['offers','order','create'].includes(page) && ( - <> - - - - - - - - - {(coordinator?.info?.maker_fee * 100).toFixed(3)}% - - + {['offers', 'order', 'create'].includes(page) && ( + <> + + + + + + + + + {(coordinator?.info?.maker_fee * 100).toFixed(3)}% + + - - - {(coordinator?.info?.taker_fee * 100).toFixed(3)}% - - + + + {(coordinator?.info?.taker_fee * 100).toFixed(3)}% + - - - - - - - - - - - )} + + + + + + + + + + + + )} diff --git a/frontend/src/components/OrderDetails/index.tsx b/frontend/src/components/OrderDetails/index.tsx index 5d42d2672..2a97ce2cb 100644 --- a/frontend/src/components/OrderDetails/index.tsx +++ b/frontend/src/components/OrderDetails/index.tsx @@ -14,6 +14,7 @@ import { useTheme, Typography, IconButton, + ListItemButton, } from '@mui/material'; import Countdown, { type CountdownRenderProps, zeroPad } from 'react-countdown'; @@ -34,14 +35,16 @@ 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; @@ -49,7 +52,8 @@ interface OrderDetailsProps { const OrderDetails = ({ order, - info, + coordinator, + onClickCoordinator = () => null, setOrder, baseUrl, hasRobot, @@ -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; @@ -228,6 +234,22 @@ const OrderDetails = ({ + { + onClickCoordinator(); + }} + > + + + + + + diff --git a/frontend/src/components/RobotInfo/index.tsx b/frontend/src/components/RobotInfo/index.tsx index 08bcd745d..df832c3de 100644 --- a/frontend/src/components/RobotInfo/index.tsx +++ b/frontend/src/components/RobotInfo/index.tsx @@ -148,7 +148,7 @@ const RobotInfo: React.FC = ({ robot, coordinator, onClose }: Props) => { {robot.activeOrderId > 0 ? ( { - navigate(`/order/${String(robot.activeOrderId)}`); + navigate(`/order/${coordinator.shortAlias}/${String(robot.activeOrderId)}`); onClose(); }} > @@ -165,7 +165,7 @@ const RobotInfo: React.FC = ({ robot, coordinator, onClose }: Props) => { ) : robot.lastOrderId > 0 ? ( { - navigate(`/order/${String(robot.lastOrderId)}`); + navigate(`/order/${coordinator.shortAlias}/${String(robot.lastOrderId)}`); onClose(); }} >