Refactor contexts and models (#921)

* Add SVG icons for map pins

* Add federation basis and new coordinator form (#793)

* Add new coordinator entry issue form

* Add Federation basis

* Fix eslint errors from F2F and fix languages

* Redo eslint @typescript-eslint/strict-boolean-expressions

* Robot Page working

* Contexts Working

* Garage Working

* CurrentOrder working

* Federation model working

---------

Co-authored-by: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Co-authored-by: Reckless_Satoshi <90936742+Reckless-Satoshi@users.noreply.github.com>

Author: KoalaSat

.github/workflows/js-linter.yml

@@ -8,7 +8,7 @@ on:
       - main
     paths:
       - frontend
-  pull_request:
+  pull_request_target:
     branches:
       - main
     paths:
@@ -41,7 +41,5 @@ jobs:
         with:
           prettier: true
           prettier_dir: frontend
-
-          ## Disabled due to error
-          # eslint: true
-          # eslint_dir: frontend
+          eslint: true
+          eslint_dir: frontend

docker-compose.yml

@@ -61,6 +61,7 @@ services:
     volumes:
       - ./nodeapp/:/usr/src/robosats/
       - ./nodeapp/nginx.conf:/etc/nginx/nginx.conf
+      - ./nodeapp/coordinators/:/etc/nginx/conf.d/
       - ./frontend/static:/usr/src/robosats/static
 
   clean-orders:

federation.md

@@ -92,9 +92,15 @@ Each RoboSats coordinator has a profile in the RoboSats app. The profile contain
 - Large Limits -  Can host orders with large limits.
 - DevFund donator - Donates to the DevFund the default amount or more.
 
+<<<<<<< HEAD
 Some of these badges can be objectively measured and awarded. Other badges rely on the subjectivity of the development team. These will be generously awarded and only taken away after a warning.
 
 We also envision more badges in the future, for example milestones by number of trades coordinated (200, 1K, 5K, 25K, 100K, etc).
+=======
+Some of these badges can be objectively measured and therefore awarded. Others badges rely on the subjectivity by the development team. These will be generously awarded and only taken away after a warning.
+
+We also envision more badges in the future. For example milestones of number of trades coordinated (200, 1K, 5K, 25K, 100K, etc).
+>>>>>>> 2254fa60 (Add federation basis and new coordinator form (#793))
 
 ## Timeline
 

frontend/.eslintrc.json

@@ -19,12 +19,21 @@
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
+  "ignorePatterns": ["index.js", "**/PaymentMethods/Icons/code/code.js"],
   "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
   "rules": {
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/exhaustive-deps": "off",
     "react/prop-types": "off",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        "selector": "variableLike",
+        "format": ["camelCase", "snake_case", "PascalCase", "UPPER_CASE"],
+        "leadingUnderscore": "allow"
+      }
+    ]
   },
   "settings": {
     "import/resolver": {

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { StrictMode, Suspense } from 'react';
+import React, { StrictMode, Suspense, useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import Main from './basic/Main';
 import { CssBaseline, ThemeProvider } from '@mui/material';
@@ -11,20 +11,29 @@ import i18n from './i18n/Web';
 
 import { systemClient } from './services/System';
 import ErrorBoundary from './components/ErrorBoundary';
+import { GarageContext, useGarageStore } from './contexts/GarageContext';
+import { FederationContext, useFederationStore } from './contexts/FederationContext';
 
 const App = (): JSX.Element => {
-  const store = useAppStore();
+  const appStore = useAppStore();
+  const garageStore = useGarageStore();
+  const federationStore = useFederationStore();
+
   return (
     <StrictMode>
       <ErrorBoundary>
         <Suspense fallback='loading'>
           <I18nextProvider i18n={i18n}>
-            <AppContext.Provider value={store}>
-              <ThemeProvider theme={store.theme}>
-                <CssBaseline />
-                {window.NativeRobosats === undefined ? <HostAlert /> : <TorConnectionBadge />}
-                <Main />
-              </ThemeProvider>
+            <AppContext.Provider value={appStore}>
+              <GarageContext.Provider value={garageStore}>
+                <FederationContext.Provider value={federationStore}>
+                  <ThemeProvider theme={appStore.theme}>
+                    <CssBaseline />
+                    {window.NativeRobosats === undefined ? <HostAlert /> : <TorConnectionBadge />}
+                    <Main />
+                  </ThemeProvider>
+                </FederationContext.Provider>
+              </GarageContext.Provider>
             </AppContext.Provider>
           </I18nextProvider>
         </Suspense>
@@ -33,7 +42,7 @@ const App = (): JSX.Element => {
   );
 };
 
-const loadApp = () => {
+const loadApp = (): void => {
   // waits until the environment is ready for the Android WebView app
   if (systemClient.loading) {
     setTimeout(loadApp, 200);

frontend/src/basic/BookPage/index.tsx

@@ -12,10 +12,13 @@ import BookTable from '../../components/BookTable';
 import { BarChart, FormatListBulleted, Map } from '@mui/icons-material';
 import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
 import MapChart from '../../components/Charts/MapChart';
+import { FederationContext, UseFederationStoreType } from '../../contexts/FederationContext';
+import { GarageContext, UseGarageStoreType } from '../../contexts/GarageContext';
 
 const BookPage = (): JSX.Element => {
-  const { robot, fetchBook, windowSize, setDelay, setOrder } =
-    useContext<UseAppStoreType>(AppContext);
+  const { windowSize } = useContext<UseAppStoreType>(AppContext);
+  const { setDelay } = useContext<UseFederationStoreType>(FederationContext);
+  const { garage, clearOrder } = useContext<UseGarageStoreType>(GarageContext);
   const { t } = useTranslation();
   const navigate = useNavigate();
   const [view, setView] = useState<'list' | 'depth' | 'map'>('list');
@@ -27,25 +30,17 @@ const BookPage = (): JSX.Element => {
   const maxBookTableWidth = 85;
   const chartWidthEm = width - maxBookTableWidth;
 
-  useEffect(() => {
-    fetchBook();
-  }, []);
-
-  const onViewOrder = function () {
-    setOrder(undefined);
-    setDelay(10000);
-  };
-
-  const onOrderClicked = function (id: number) {
-    if (robot.avatarLoaded) {
-      navigate('/order/' + id);
-      onViewOrder();
+  const onOrderClicked = function (id: number, shortAlias: string): void {
+    if (garage.getRobot().avatarLoaded) {
+      clearOrder();
+      setDelay(10000);
+      navigate(`/order/${shortAlias}/${id}`);
     } else {
       setOpenNoRobot(true);
     }
   };
 
-  const NavButtons = function () {
+  const NavButtons = function (): JSX.Element {
     return (
       <ButtonGroup variant='contained' color='inherit'>
         <Button
@@ -60,13 +55,25 @@ const BookPage = (): JSX.Element => {
           <></>
         ) : (
           <>
-            <Button onClick={() => setView('list')}>
+            <Button
+              onClick={() => {
+                setView('list');
+              }}
+            >
               <FormatListBulleted /> {t('List')}
             </Button>
-            <Button onClick={() => setView('depth')}>
+            <Button
+              onClick={() => {
+                setView('depth');
+              }}
+            >
               <BarChart /> {t('Chart')}
             </Button>
-            <Button onClick={() => setView('map')}>
+            <Button
+              onClick={() => {
+                setView('map');
+              }}
+            >
               <Map /> {t('Map')}
             </Button>
           </>
@@ -82,7 +89,9 @@ const BookPage = (): JSX.Element => {
         onClose={() => {
           setOpenNoRobot(false);
         }}
-        onClickGenerateRobot={() => navigate('/robot')}
+        onClickGenerateRobot={() => {
+          navigate('/robot');
+        }}
       />
       {openMaker ? (
         <Dialog
@@ -94,9 +103,11 @@ const BookPage = (): JSX.Element => {
           <Box sx={{ maxWidth: '18em', padding: '0.5em' }}>
             <MakerForm
               onOrderCreated={(id) => {
-                navigate('/order/' + id);
+                navigate(`/order/${id}`);
+              }}
+              onClickGenerateRobot={() => {
+                navigate('/robot');
               }}
-              onClickGenerateRobot={() => navigate('/robot')}
             />
           </Box>
         </Dialog>

frontend/src/basic/Main.tsx

@@ -1,20 +1,15 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { MemoryRouter, BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Box, Slide, Typography, styled } from '@mui/material';
+import { type UseAppStoreType, AppContext, closeAll } from '../contexts/AppContext';
 
-import RobotPage from './RobotPage';
-import MakerPage from './MakerPage';
-import BookPage from './BookPage';
-import OrderPage from './OrderPage';
-import SettingsPage from './SettingsPage';
-import NavBar from './NavBar';
-import MainDialogs from './MainDialogs';
-
+import { RobotPage, MakerPage, BookPage, OrderPage, SettingsPage, NavBar, MainDialogs } from './';
 import RobotAvatar from '../components/RobotAvatar';
+import Notifications from '../components/Notifications';
 
 import { useTranslation } from 'react-i18next';
-import Notifications from '../components/Notifications';
-import { type UseAppStoreType, AppContext, closeAll } from '../contexts/AppContext';
+import { FederationContext, UseFederationStoreType } from '../contexts/FederationContext';
+import { GarageContext, UseGarageStoreType } from '../contexts/GarageContext';
 
 const Router = window.NativeRobosats === undefined ? BrowserRouter : MemoryRouter;
 
@@ -35,39 +30,31 @@ const MainBox = styled(Box)<MainBoxProps>((props) => ({
 
 const Main: React.FC = () => {
   const { t } = useTranslation();
-  const {
-    settings,
-    robot,
-    setRobot,
-    baseUrl,
-    order,
-    page,
-    slideDirection,
-    setOpen,
-    windowSize,
-    navbarHeight,
-  } = useContext<UseAppStoreType>(AppContext);
+  const { settings, page, slideDirection, setOpen, windowSize, navbarHeight, hostUrl, origin } =
+    useContext<UseAppStoreType>(AppContext);
+  const { federation, sortedCoordinators } = useContext<UseFederationStoreType>(FederationContext);
+  const { garage } = useContext<UseGarageStoreType>(GarageContext);
+  const [avatarBaseUrl, setAvatarBaseUrl] = useState<string>(hostUrl);
+
+  useEffect(() => {
+    setAvatarBaseUrl(federation.getCoordinator(sortedCoordinators[0]).getBaseUrl());
+  }, [settings.network, settings.selfhostedClient, federation, sortedCoordinators]);
 
   return (
     <Router>
       <RobotAvatar
         style={{ display: 'none' }}
-        nickname={robot.nickname}
-        baseUrl={baseUrl}
-        onLoad={() => {
-          setRobot((robot) => {
-            return { ...robot, avatarLoaded: true };
-          });
-        }}
+        nickname={garage.getRobot().nickname}
+        baseUrl={federation.getCoordinator(sortedCoordinators[0]).getBaseUrl()}
+        onLoad={() => garage.updateRobot({ avatarLoaded: true })}
       />
       <Notifications
-        order={order}
         page={page}
         openProfile={() => {
           setOpen({ ...closeAll, profile: true });
         }}
-        rewards={robot.earnedRewards}
-        windowWidth={windowSize.width}
+        rewards={garage.getRobot().earnedRewards}
+        windowWidth={windowSize?.width}
       />
       {settings.network === 'testnet' ? (
         <TestnetTypography color='secondary' align='center'>
@@ -87,10 +74,10 @@ const Main: React.FC = () => {
                   <Slide
                     direction={page === 'robot' ? slideDirection.in : slideDirection.out}
                     in={page === 'robot'}
-                    appear={slideDirection.in != undefined}
+                    appear={slideDirection.in !== undefined}
                   >
                     <div>
-                      <RobotPage />
+                      <RobotPage avatarBaseUrl={avatarBaseUrl} />
                     </div>
                   </Slide>
                 }
@@ -105,7 +92,7 @@ const Main: React.FC = () => {
               <Slide
                 direction={page === 'offers' ? slideDirection.in : slideDirection.out}
                 in={page === 'offers'}
-                appear={slideDirection.in != undefined}
+                appear={slideDirection.in !== undefined}
               >
                 <div>
                   <BookPage />
@@ -120,7 +107,7 @@ const Main: React.FC = () => {
               <Slide
                 direction={page === 'create' ? slideDirection.in : slideDirection.out}
                 in={page === 'create'}
-                appear={slideDirection.in != undefined}
+                appear={slideDirection.in !== undefined}
               >
                 <div>
                   <MakerPage />
@@ -130,12 +117,12 @@ const Main: React.FC = () => {
           />
 
           <Route
-            path='/order/:orderId'
+            path='/order/:shortAlias/:orderId'
             element={
               <Slide
                 direction={page === 'order' ? slideDirection.in : slideDirection.out}
                 in={page === 'order'}
-                appear={slideDirection.in != undefined}
+                appear={slideDirection.in !== undefined}
               >
                 <div>
                   <OrderPage />
@@ -150,7 +137,7 @@ const Main: React.FC = () => {
               <Slide
                 direction={page === 'settings' ? slideDirection.in : slideDirection.out}
                 in={page === 'settings'}
-                appear={slideDirection.in != undefined}
+                appear={slideDirection.in !== undefined}
               >
                 <div>
                   <SettingsPage />
@@ -160,7 +147,7 @@ const Main: React.FC = () => {
           />
         </Routes>
       </MainBox>
-      <NavBar width={windowSize.width} height={navbarHeight} />
+      <NavBar />
       <MainDialogs />
     </Router>
   );