Add The Federation Layer

.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

@@ -58,6 +58,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/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/package.json

@@ -1,14 +1,14 @@
 {
   "name": "frontend",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "dev": "node --max-old-space-size=4096 ./node_modules/.bin/webpack --watch --progress --mode development",
     "test": "jest",
     "build": "webpack --mode production",
-    "lint": "eslint src/**/*.{js,ts,tsx}",
-    "lint:fix": "eslint --fix 'src/**/*.{js,ts,tsx}'",
+    "lint": "eslint src/**/*.{js,ts,tsx} --quiet",
+    "lint:fix": "eslint --fix 'src/**/*.{js,ts,tsx}' --quiet",
     "format": "prettier --write '**/**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
   },
   "keywords": [],

frontend/src/App.tsx

@@ -33,13 +33,17 @@ 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);
   } else {
     const root = ReactDOM.createRoot(document.getElementById('app') ?? new HTMLElement());
-    root.render(<App />);
+    root.render(
+      <StrictMode>
+        <App />
+      </StrictMode>,
+    );
   }
 };
 

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,24 +27,20 @@ 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): void {
     if (robot.avatarLoaded) {
-      navigate('/order/' + id);
-      onViewOrder();
+      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
@@ -63,7 +59,7 @@ const BookPage = (): JSX.Element => {
               setView(view === 'depth' ? 'list' : 'depth');
             }}
           >
-            {view == 'depth' ? (
+            {view === 'depth' ? (
               <>
                 <FormatListBulleted /> {t('List')}
               </>
@@ -85,7 +81,9 @@ const BookPage = (): JSX.Element => {
         onClose={() => {
           setOpenNoRobot(false);
         }}
-        onClickGenerateRobot={() => navigate('/robot')}
+        onClickGenerateRobot={() => {
+          navigate('/robot');
+        }}
       />
       {openMaker ? (
         <Dialog
@@ -97,9 +95,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,20 @@
-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,
+  hostUrl,
+  origin,
+} 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 { getEndpoint } from '../models/Coordinator.model';
 
 const Router = window.NativeRobosats === undefined ? BrowserRouter : MemoryRouter;
 
@@ -39,21 +39,36 @@ const Main: React.FC = () => {
     settings,
     robot,
     setRobot,
-    baseUrl,
     order,
     page,
     slideDirection,
+    federation,
+    sortedCoordinators,
     setOpen,
     windowSize,
     navbarHeight,
   } = useContext<UseAppStoreType>(AppContext);
 
+  const [avatarBaseUrl, setAvatarBaseUrl] = useState<string>(hostUrl);
+
+  useEffect(() => {
+    const { url, basePath } = getEndpoint({
+      network: settings.network,
+      coordinator: federation[sortedCoordinators[0]],
+      origin,
+      selfHosted: settings.selfhostedClient,
+      hostUrl,
+    });
+    setAvatarBaseUrl(url + basePath);
+    console.log(url + basePath);
+  }, [settings.network, settings.selfhostedClient, federation, sortedCoordinators]);
+
   return (
     <Router>
       <RobotAvatar
         style={{ display: 'none' }}
         nickname={robot.nickname}
-        baseUrl={baseUrl}
+        baseUrl={avatarBaseUrl}
         onLoad={() => {
           setRobot((robot) => {
             return { ...robot, avatarLoaded: true };
@@ -87,10 +102,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 +120,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 +135,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 +145,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 +165,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 +175,7 @@ const Main: React.FC = () => {
           />
         </Routes>
       </MainBox>
-      <NavBar width={windowSize.width} height={navbarHeight} />
+      <NavBar />
       <MainDialogs />
     </Router>
   );