wip work on federation settings

frontend/src/App.tsx

@@ -42,7 +42,7 @@ const App = (): JSX.Element => {
 
   useEffect(() => {
     updateTheme();
-  }, [settings]);
+  }, [settings.fontSize, settings.mode]);
 
   useEffect(() => {
     i18n.changeLanguage(settings.language);

frontend/src/basic/Main.tsx

@@ -10,9 +10,7 @@ import SettingsPage from './SettingsPage';
 import NavBar, { Page } from './NavBar';
 import MainDialogs, { OpenDialogs } from './MainDialogs';
 
-import { apiClient } from '../services/api';
+import RobotAvatar from '../components/RobotAvatar';
-import { checkVer } from '../utils';
-
 import {
   Book,
   LimitList,
@@ -24,9 +22,14 @@ import {
   defaultMaker,
   defaultRobot,
   defaultInfo,
+  Coordinator,
 } from '../models';
+
+import { apiClient } from '../services/api';
+import { checkVer } from '../utils';
 import { sha256 } from 'js-sha256';
-import RobotAvatar from '../components/RobotAvatar';
+
+import defaultCoordinators from '../../static/federation.json';
 
 const getWindowSize = function (fontSize: number) {
   // returns window size in EM units
@@ -56,6 +59,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   const [robot, setRobot] = useState<Robot>(defaultRobot);
   const [maker, setMaker] = useState<Maker>(defaultMaker);
   const [info, setInfo] = useState<Info>(defaultInfo);
+  const [coordinators, setCoordinators] = useState<Coordinator[]>(defaultCoordinators);
   const [fav, setFav] = useState<Favorites>({ type: null, currency: 0 });
 
   const theme = useTheme();
@@ -133,7 +137,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
   };
 
   const fetchInfo = function () {
-    apiClient.get('/api/info/').then((data: any) => {
+    apiClient.get('/api/info/').then((data: Info) => {
       const versionInfo: any = checkVer(data.version.major, data.version.minor, data.version.patch);
       setInfo({
         ...data,
@@ -141,6 +145,10 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         coordinatorVersion: versionInfo.coordinatorVersion,
         clientVersion: versionInfo.clientVersion,
       });
+      setSettings({
+        ...settings,
+        network: data.network,
+      });
     });
   };
 

frontend/src/components/Charts/DepthChart/index.tsx

@@ -215,62 +215,60 @@ const DepthChart: React.FC<DepthChartProps> = ({
     />
   );
 
-  // Unkown Bug. Temporarily silenced until cause is found.
+  const generateTooltip: React.FunctionComponent<PointTooltipProps> = (
-
+    pointTooltip: PointTooltipProps,
-  // const generateTooltip: React.FunctionComponent<PointTooltipProps> = (
+  ) => {
-  //   pointTooltip: PointTooltipProps,
+    const order: Order = pointTooltip.point.data.order;
-  // ) => {
+    return order ? (
-  //   const order: Order = pointTooltip.point.data.order;
+      <Paper elevation={12} style={{ padding: 10, width: 250 }}>
-  //   return order ? (
+        <Grid container justifyContent='space-between'>
-  //     <Paper elevation={12} style={{ padding: 10, width: 250 }}>
+          <Grid item xs={3}>
-  //       <Grid container justifyContent='space-between'>
+            <Grid container justifyContent='center' alignItems='center'>
-  //         <Grid item xs={3}>
+              <RobotAvatar
-  //           <Grid container justifyContent='center' alignItems='center'>
+                nickname={order.maker_nick}
-  //             <RobotAvatar
+                orderType={order.type}
-  //               nickname={order.maker_nick}
+                statusColor={statusBadgeColor(order.maker_status)}
-  //               orderType={order.type}
+                tooltip={t(order.maker_status)}
-  //               statusColor={statusBadgeColor(order.maker_status)}
+              />
-  //               tooltip={t(order.maker_status)}
+            </Grid>
-  //             />
+          </Grid>
-  //           </Grid>
+          <Grid item xs={8}>
-  //         </Grid>
+            <Grid container direction='column' justifyContent='center' alignItems='flex-start'>
-  //         <Grid item xs={8}>
+              <Box>{order.maker_nick}</Box>
-  //           <Grid container direction='column' justifyContent='center' alignItems='flex-start'>
+              <Box>
-  //             <Box>{order.maker_nick}</Box>
+                <Grid
-  //             <Box>
+                  container
-  //               <Grid
+                  direction='column'
-  //                 container
+                  justifyContent='flex-start'
-  //                 direction='column'
+                  alignItems='flex-start'
-  //                 justifyContent='flex-start'
+                >
-  //                 alignItems='flex-start'
+                  <Grid item xs={12}>
-  //               >
+                    {amountToString(
-  //                 <Grid item xs={12}>
+                      order.amount,
-  //                   {amountToString(
+                      order.has_range,
-  //                     order.amount,
+                      order.min_amount,
-  //                     order.has_range,
+                      order.max_amount,
-  //                     order.min_amount,
+                    )}{' '}
-  //                     order.max_amount,
+                    {currencyDict[order.currency]}
-  //                   )}{' '}
+                  </Grid>
-  //                   {currencyDict[order.currency]}
+                  <Grid item xs={12}>
-  //                 </Grid>
+                    <PaymentStringAsIcons
-  //                 <Grid item xs={12}>
+                      othersText={t('Others')}
-  //                   <PaymentStringAsIcons
+                      verbose={true}
-  //                     othersText={t('Others')}
+                      size={20}
-  //                     verbose={true}
+                      text={order.payment_method}
-  //                     size={20}
+                    />
-  //                     text={order.payment_method}
+                  </Grid>
-  //                   />
+                </Grid>
-  //                 </Grid>
+              </Box>
-  //               </Grid>
+            </Grid>
-  //             </Box>
+          </Grid>
-  //           </Grid>
+        </Grid>
-  //         </Grid>
+      </Paper>
-  //       </Grid>
+    ) : (
-  //     </Paper>
+      <></>
-  //   ) : (
+    );
-  //     <></>
+  };
-  //   );
-  // };
 
   const formatAxisX = (value: number): string => {
     if (xType === 'base_amount') {
@@ -362,7 +360,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
                 useMesh={true}
                 animate={false}
                 crosshairType='cross'
-                // tooltip={generateTooltip}
+                tooltip={generateTooltip}
                 onClick={handleOnClick}
                 axisLeft={{
                   tickSize: 5,

frontend/src/components/SettingsForm/index.tsx

@@ -11,10 +11,19 @@ import {
   ListItemIcon,
   Slider,
   Typography,
+  ToggleButtonGroup,
+  ToggleButton,
 } from '@mui/material';
 import { Settings } from '../../models';
 import SelectLanguage from './SelectLanguage';
-import { Language, Palette, LightMode, DarkMode, SettingsOverscan } from '@mui/icons-material';
+import {
+  Translate,
+  Palette,
+  LightMode,
+  DarkMode,
+  SettingsOverscan,
+  Link,
+} from '@mui/icons-material';
 
 interface SettingsFormProps {
   dense?: boolean;
@@ -22,21 +31,6 @@ interface SettingsFormProps {
   setSettings: (state: Settings) => void;
 }
 
-const fontSizesBasic = [
-  { label: 'XS', value: 12 },
-  { label: 'S', value: 13 },
-  { label: 'M', value: 14 },
-  { label: 'L', value: 15 },
-  { label: 'XL', value: 16 },
-];
-const fontSizesPro = [
-  { label: 'XS', value: 10 },
-  { label: 'S', value: 11 },
-  { label: 'M', value: 12 },
-  { label: 'L', value: 13 },
-  { label: 'XL', value: 14 },
-];
-
 const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProps): JSX.Element => {
   const theme = useTheme();
   const { t } = useTranslation();
@@ -54,7 +48,7 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
         <List dense={dense}>
           <ListItem>
             <ListItemIcon>
-              <Language />
+              <Translate />
             </ListItemIcon>
             <SelectLanguage
               language={settings.language}
@@ -129,6 +123,24 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
               track={false}
             />
           </ListItem>
+
+          <ListItem>
+            <ListItemIcon>
+              <Link />
+            </ListItemIcon>
+            <ToggleButtonGroup
+              exclusive={true}
+              value={settings.network}
+              onChange={(e, value) => setSettings({ ...settings, network: value })}
+            >
+              <ToggleButton value='mainnet' color='primary'>
+                {t('Mainnet')}
+              </ToggleButton>
+              <ToggleButton value='testnet' color='secondary'>
+                {t('Testnet')}
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </ListItem>
         </List>
       </Grid>
     </Grid>

frontend/src/models/Coordinator.model.ts

@@ -12,7 +12,9 @@ export interface Coordinator {
     website: string | undefined;
   };
   mainnetOnion: string | undefined;
+  mainnetClearnet: string | undefined;
   testnetOnion: string | undefined;
+  testnetClearnet: string | undefined;
   mainnetNodesPubkeys: string[];
   testnetNodesPubkeys: string[];
 }

frontend/src/models/Language.model.ts

@@ -1,19 +0,0 @@
-export type Language =
-  | 'en'
-  | 'es'
-  | 'ru'
-  | 'de'
-  | 'pl'
-  | 'fr'
-  | 'ca'
-  | 'it'
-  | 'pt'
-  | 'eu'
-  | 'cs'
-  | 'th'
-  | 'pl'
-  | 'sv'
-  | 'zh-SI'
-  | 'zh-TR';
-
-export default Language;

frontend/src/models/Settings.model.ts

@@ -1,6 +1,23 @@
 import i18n from '../i18n/Web';
 import type Coordinator from './Coordinator.model';
-import type Language from './Language.model';
+
+export type Language =
+  | 'en'
+  | 'es'
+  | 'ru'
+  | 'de'
+  | 'pl'
+  | 'fr'
+  | 'ca'
+  | 'it'
+  | 'pt'
+  | 'eu'
+  | 'cs'
+  | 'th'
+  | 'pl'
+  | 'sv'
+  | 'zh-SI'
+  | 'zh-TR';
 
 export interface Settings {
   frontend: 'basic' | 'pro';

frontend/src/models/index.ts

@@ -6,9 +6,9 @@ export type { Book } from './Book.model';
 export type { Robot } from './Robot.model';
 export type { Info } from './Info.model';
 export type { Settings } from './Settings.model';
+export type { Language } from './Settings.model';
 export type { Favorites } from './Favorites.model';
 export type { Coordinator } from './Coordinator.model';
-export type { Language } from './Coordinator.model';
 
 export { defaultMaker } from './Maker.model';
 export { defaultRobot } from './Robot.model';

frontend/static/federation.json

@@ -1,21 +1,22 @@
+[
   {
-  "coordinator_1": {
+    "alias": "Inception",
-    "alias": "Maximalist",
+    "description": "RoboSats original and experimental coordinator",
-    "description": "Maximalist Robots. P2P for freedom. No trade limits, low fees.",
+    "coverLetter": "N/A",
-    "cover_letter": "Hi! I am Mike. I'm a freedom activist based in TorLand. I have been running LN infrastructure since early 2019, long time FOSS contributor....",
     "contact_methods": {
-      "email": "maximalist@bitcoin.p2p",
+      "email": "robosats@protonmail.com",
-      "telegram": "maximalist_robot",
+      "telegram": "@robosats",
-      ".....": "...."
+      "twitter": "@robosats",
+      "matrix": "#robosats:matrix.org",
+      "website": "learn.robosats.com"
     },
-    "color": "#FFFFFF",
+    "color": "#9C27B0",
-    "mainnet_onion": "robomaxim......onion",
+    "mainnetOnion": "robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion",
-    "testnet_onion": null,
+    "mainnetClearnet": "unsafe.robosats.com",
-    "mainnet_ln_nodes_pubkeys": ["03e96as....", "02aaecc...."],
+    "testnetOnion": "robotestagw3dcxmd66r4rgksb4nmmr43fh77bzn2ia2eucduyeafnyd.onion",
-    "testnet_ln_nodes_pubkeys": ["0284ff2...."],
+    "testnetClearnet": "unsafe.testnet.robosats.com",
-    "logo_svg_200x200": "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"120\" height=\"120\"> <rect x=\"14\" y=\"23\" width=\"200\" height=\"50\" fill=\"lime\" stroke=\"black\" /> </svg>"
+    "mainnetNodesPubkeys": ["0282eb467bc073833a039940392592bf10cf338a830ba4e392c1667d7697654c7e"],
-  },
+    "testnetNodesPubkeys": ["03ecb271b3e2e36f2b91c92c65bab665e5165f8cdfdada1b5f46cfdd3248c87fd6"],
-  "coordinator_2": {
+    "logo": "/static/federation/inception.svg"
-    "...": "..."
-  }
   }
+]