Squash and rebase the-federation-layer over main v0.5.0

RoboSats · Jun 6, 2023 · 024a514 · 024a514
1 parent 582a49b
commit 024a514
Show file tree

Hide file tree

Showing 63 changed files with 3,422 additions and 893 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -39,7 +39,11 @@ const loadApp = () => {
     setTimeout(loadApp, 200);
   } else {
     const root = ReactDOM.createRoot(document.getElementById('app') ?? new HTMLElement());
-    root.render(<App />);
+    root.render(
+      <StrictMode>
+        <App />
+      </StrictMode>,
+    );
   }
 };
 

diff --git a/frontend/src/basic/BookPage/index.tsx b/frontend/src/basic/BookPage/index.tsx
@@ -13,7 +13,7 @@ import { BarChart, FormatListBulleted } from '@mui/icons-material';
 import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
 
 const BookPage = (): JSX.Element => {
-  const { robot, fetchBook, windowSize, setDelay, setOrder } =
+  const { robot, fetchFederationBook, windowSize, setDelay, clearOrder } =
     useContext<UseAppStoreType>(AppContext);
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -27,18 +27,14 @@ const BookPage = (): JSX.Element => {
   const chartWidthEm = width - maxBookTableWidth;
 
   useEffect(() => {
-    fetchBook();
+    fetchFederationBook();
   }, []);
 
-  const onViewOrder = function () {
-    setOrder(undefined);
-    setDelay(10000);
-  };
-
-  const onOrderClicked = function (id: number) {
+  const onOrderClicked = function (id: number, shortAlias: string) {
     if (robot.avatarLoaded) {
-      navigate('/order/' + id);
-      onViewOrder();
+      clearOrder();
+      setDelay(10000);
+      navigate(`/order/${shortAlias}/${id}`);
     } else {
       setOpenNoRobot(true);
     }
@@ -85,7 +81,9 @@ const BookPage = (): JSX.Element => {
         onClose={() => {
           setOpenNoRobot(false);
         }}
-        onClickGenerateRobot={() => navigate('/robot')}
+        onClickGenerateRobot={() => {
+          navigate('/robot');
+        }}
       />
       {openMaker ? (
         <Dialog
@@ -99,7 +97,9 @@ const BookPage = (): JSX.Element => {
               onOrderCreated={(id) => {
                 navigate('/order/' + id);
               }}
-              onClickGenerateRobot={() => navigate('/robot')}
+              onClickGenerateRobot={() => {
+                navigate('/robot');
+              }}
             />
           </Box>
         </Dialog>

diff --git a/frontend/src/basic/Main.tsx b/frontend/src/basic/Main.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { MemoryRouter, BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Box, Slide, Typography, styled } from '@mui/material';
+import { type UseAppStoreType, AppContext, closeAll, hostUrl } from '../contexts/AppContext';
 
 import RobotPage from './RobotPage';
 import MakerPage from './MakerPage';
@@ -11,10 +12,8 @@ import NavBar from './NavBar';
 import MainDialogs from './MainDialogs';
 
 import RobotAvatar from '../components/RobotAvatar';
-
 import { useTranslation } from 'react-i18next';
 import Notifications from '../components/Notifications';
-import { type UseAppStoreType, AppContext, closeAll } from '../contexts/AppContext';
 
 const Router = window.NativeRobosats === undefined ? BrowserRouter : MemoryRouter;
 
@@ -39,7 +38,6 @@ const Main: React.FC = () => {
     settings,
     robot,
     setRobot,
-    baseUrl,
     order,
     page,
     slideDirection,
@@ -53,7 +51,7 @@ const Main: React.FC = () => {
       <RobotAvatar
         style={{ display: 'none' }}
         nickname={robot.nickname}
-        baseUrl={baseUrl}
+        baseUrl={hostUrl}
         onLoad={() => {
           setRobot((robot) => {
             return { ...robot, avatarLoaded: true };
@@ -130,7 +128,7 @@ const Main: React.FC = () => {
           />
 
           <Route
-            path='/order/:orderId'
+            path='/order/:shortAlias/:orderId'
             element={
               <Slide
                 direction={page === 'order' ? slideDirection.in : slideDirection.out}
@@ -160,7 +158,7 @@ const Main: React.FC = () => {
           />
         </Routes>
       </MainBox>
-      <NavBar width={windowSize.width} height={navbarHeight} />
+      <NavBar />
       <MainDialogs />
     </Router>
   );

diff --git a/frontend/src/basic/MainDialogs/index.tsx b/frontend/src/basic/MainDialogs/index.tsx
@@ -1,30 +1,43 @@
 import React, { useState, useContext, useEffect } from 'react';
 import {
   CommunityDialog,
-  CoordinatorSummaryDialog,
-  InfoDialog,
+  ExchangeDialog,
+  CoordinatorDialog,
+  AboutDialog,
   LearnDialog,
   ProfileDialog,
-  StatsDialog,
-  UpdateClientDialog,
+  ClientDialog,
+  UpdateDialog,
 } from '../../components/Dialogs';
 import { pn } from '../../utils';
-import { AppContext, type UseAppStoreType, closeAll } from '../../contexts/AppContext';
+import { AppContext, type UseAppStoreType, closeAll, hostUrl } from '../../contexts/AppContext';
 
 export interface OpenDialogs {
   more: boolean;
   learn: boolean;
   community: boolean;
   info: boolean;
   coordinator: boolean;
-  stats: boolean;
+  exchange: boolean;
+  client: boolean;
   update: boolean;
   profile: boolean;
 }
 
 const MainDialogs = (): JSX.Element => {
-  const { open, setOpen, info, limits, robot, setRobot, setCurrentOrder, baseUrl } =
-    useContext<UseAppStoreType>(AppContext);
+  const {
+    open,
+    setOpen,
+    limits,
+    robot,
+    setRobot,
+    setCurrentOrder,
+    settings,
+    federation,
+    clientVersion,
+    focusedCoordinator,
+    exchange,
+  } = useContext<UseAppStoreType>(AppContext);
 
   const [maxAmount, setMaxAmount] = useState<string>('...loading...');
 
@@ -34,64 +47,74 @@ const MainDialogs = (): JSX.Element => {
     }
   }, [limits.list]);
 
-  useEffect(() => {
-    if (info.openUpdateClient) {
-      setOpen({ ...closeAll, update: true });
-    }
-  }, [info]);
-
   return (
     <>
-      <UpdateClientDialog
-        open={open.update}
-        coordinatorVersion={info.coordinatorVersion}
-        clientVersion={info.clientVersion}
+      <UpdateDialog
+        coordinatorVersion={exchange.info.version}
+        clientVersion={clientVersion.semver}
         onClose={() => {
-          setOpen({ ...open, update: false });
+          setOpen((open) => {
+            return { ...open, update: false };
+          });
         }}
       />
-      <InfoDialog
+      <AboutDialog
         open={open.info}
         maxAmount={maxAmount}
         onClose={() => {
-          setOpen({ ...open, info: false });
+          setOpen((open) => {
+            return { ...open, info: false };
+          });
         }}
       />
       <LearnDialog
         open={open.learn}
         onClose={() => {
-          setOpen({ ...open, learn: false });
+          setOpen((open) => {
+            return { ...open, learn: false };
+          });
         }}
       />
       <CommunityDialog
         open={open.community}
         onClose={() => {
-          setOpen({ ...open, community: false });
+          setOpen((open) => {
+            return { ...open, community: false };
+          });
         }}
       />
-      <CoordinatorSummaryDialog
-        open={open.coordinator}
+      <ExchangeDialog
+        open={open.exchange}
         onClose={() => {
-          setOpen({ ...open, coordinator: false });
+          setOpen((open) => {
+            return { ...open, exchange: false };
+          });
         }}
-        info={info}
       />
-      <StatsDialog
-        open={open.stats}
+      <ClientDialog
+        open={open.client}
         onClose={() => {
-          setOpen({ ...open, stats: false });
+          setOpen((open) => {
+            return { ...open, client: false };
+          });
         }}
-        info={info}
       />
       <ProfileDialog
         open={open.profile}
-        baseUrl={baseUrl}
+        baseUrl={hostUrl}
         onClose={() => {
           setOpen({ ...open, profile: false });
         }}
         robot={robot}
         setRobot={setRobot}
-        setCurrentOrder={setCurrentOrder}
+      />
+      <CoordinatorDialog
+        open={open.coordinator}
+        network={settings.network}
+        onClose={() => {
+          setOpen(closeAll);
+        }}
+        coordinator={federation[focusedCoordinator]}
       />
     </>
   );

diff --git a/frontend/src/basic/MakerPage/index.tsx b/frontend/src/basic/MakerPage/index.tsx
@@ -2,7 +2,6 @@ import React, { useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Grid, Paper, Collapse, Typography } from '@mui/material';
-
 import { filterOrders } from '../../utils';
 
 import MakerForm from '../../components/MakerForm';
@@ -69,7 +68,9 @@ const MakerPage = (): JSX.Element => {
         onClose={() => {
           setOpenNoRobot(false);
         }}
-        onClickGenerateRobot={() => navigate('/robot')}
+        onClickGenerateRobot={() => {
+          navigate('/robot');
+        }}
       />
       <Grid item>
         <Collapse in={matches.length > 0 && showMatches}>
@@ -115,7 +116,9 @@ const MakerPage = (): JSX.Element => {
               setShowMatches(false);
             }}
             submitButtonLabel={matches.length > 0 && !showMatches ? 'Submit' : 'Create order'}
-            onClickGenerateRobot={() => navigate('/robot')}
+            onClickGenerateRobot={() => {
+              navigate('/robot');
+            }}
           />
         </Paper>
       </Grid>

diff --git a/frontend/src/basic/NavBar/MoreTooltip.tsx b/frontend/src/basic/NavBar/MoreTooltip.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTheme, styled, Grid, IconButton } from '@mui/material';
 import Tooltip, { type TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
-import { closeAll } from '../../contexts/AppContext';
-import { type OpenDialogs } from '../MainDialogs';
+import { closeAll, type UseAppStoreType, AppContext } from '../../contexts/AppContext';
 
 import { BubbleChart, Info, People, PriceChange, School } from '@mui/icons-material';
 
@@ -20,13 +19,13 @@ const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
 }));
 
 interface MoreTooltipProps {
-  open: OpenDialogs;
-  setOpen: (state: OpenDialogs) => void;
   children: JSX.Element;
 }
 
-const MoreTooltip = ({ open, setOpen, children }: MoreTooltipProps): JSX.Element => {
+const MoreTooltip = ({ children }: MoreTooltipProps): JSX.Element => {
   const { t } = useTranslation();
+  const { open, setOpen } = useContext<UseAppStoreType>(AppContext);
+
   const theme = useTheme();
   return (
     <StyledTooltip
@@ -89,15 +88,13 @@ const MoreTooltip = ({ open, setOpen, children }: MoreTooltipProps): JSX.Element
           </Grid>
 
           <Grid item sx={{ position: 'relative', right: '0.4em' }}>
-            <Tooltip enterTouchDelay={250} placement='left' title={t('Coordinator summary')}>
+            <Tooltip enterTouchDelay={250} placement='left' title={t('Exchange summary')}>
               <IconButton
                 sx={{
-                  color: open.coordinator
-                    ? theme.palette.primary.main
-                    : theme.palette.text.secondary,
+                  color: open.exchange ? theme.palette.primary.main : theme.palette.text.secondary,
                 }}
                 onClick={() => {
-                  setOpen({ ...closeAll, coordinator: !open.coordinator });
+                  setOpen({ ...closeAll, exchange: !open.exchange });
                 }}
               >
                 <PriceChange />
@@ -106,13 +103,13 @@ const MoreTooltip = ({ open, setOpen, children }: MoreTooltipProps): JSX.Element
           </Grid>
 
           <Grid item sx={{ position: 'relative', right: '0.4em' }}>
-            <Tooltip enterTouchDelay={250} placement='left' title={t('Stats for nerds')}>
+            <Tooltip enterTouchDelay={250} placement='left' title={t('client for nerds')}>
               <IconButton
                 sx={{
-                  color: open.stats ? theme.palette.primary.main : theme.palette.text.secondary,
+                  color: open.client ? theme.palette.primary.main : theme.palette.text.secondary,
                 }}
                 onClick={() => {
-                  setOpen({ ...closeAll, stats: !open.stats });
+                  setOpen({ ...closeAll, client: !open.client });
                 }}
               >
                 <BubbleChart />