Add permanent settings

frontend/src/App.tsx

@@ -53,8 +53,11 @@ const App = (): JSX.Element => {
       <I18nextProvider i18n={i18n}>
         <ThemeProvider theme={theme}>
           <CssBaseline />
-          <TorConnection />
-          <UnsafeAlert className='unsafeAlert' />
+          {window.NativeRobosats === undefined ? (
+            <UnsafeAlert settings={settings} setSettings={setSettings} />
+          ) : (
+            <TorConnection />
+          )}
           <Main settings={settings} setSettings={setSettings} />
         </ThemeProvider>
       </I18nextProvider>

frontend/src/basic/Main.tsx

@@ -230,7 +230,6 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
                 <div>
                   <UserGenPage
                     setPage={setPage}
-                    currentOrder={currentOrder}
                     setCurrentOrder={setCurrentOrder}
                     match={props.match}
                     theme={theme}

frontend/src/basic/UserGenPage.js

@@ -73,12 +73,12 @@ class UserGenPage extends Component {
     requestBody.then((body) =>
       apiClient.post('/api/user/', body).then((data) => {
         this.setState({ found: data.found, bad_request: data.bad_request });
-        this.props.setOrder(
+        this.props.setCurrentOrder(
           data.active_order_id
             ? data.active_order_id
             : data.last_order_id
             ? data.last_order_id
-            : this.props.order,
+            : null,
         );
         // Add nick and token to App state (token only if not a bad request)
         data.bad_request

frontend/src/components/SettingsForm/index.tsx

@@ -24,6 +24,7 @@ import {
   SettingsOverscan,
   Link,
 } from '@mui/icons-material';
+import { systemClient } from '../../services/System';
 
 interface SettingsFormProps {
   dense?: boolean;
@@ -58,7 +59,10 @@ const SettingsForm = ({
             </ListItemIcon>
             <SelectLanguage
               language={settings.language}
-              setLanguage={(language) => setSettings({ ...settings, language })}
+              setLanguage={(language) => {
+                setSettings({ ...settings, language });
+                systemClient.setCookie('settings_language', language);
+              }}
             />
           </ListItem>
 
@@ -103,9 +107,11 @@ const SettingsForm = ({
                       <LightMode sx={{ width: '0.67em', height: '0.67em', color: '#666' }} />
                     </Paper>
                   }
-                  onChange={(e) =>
-                    setSettings({ ...settings, mode: e.target.checked ? 'dark' : 'light' })
-                  }
+                  onChange={(e) => {
+                    const mode = e.target.checked ? 'dark' : 'light';
+                    setSettings({ ...settings, mode });
+                    systemClient.setCookie('settings_mode', mode);
+                  }}
                 />
               }
             />
@@ -120,7 +126,11 @@ const SettingsForm = ({
               min={settings.frontend == 'basic' ? 12 : 10}
               max={settings.frontend == 'basic' ? 16 : 14}
               step={1}
-              onChange={(e) => setSettings({ ...settings, fontSize: e.target.value })}
+              onChange={(e) => {
+                const fontSize = e.target.value;
+                setSettings({ ...settings, fontSize });
+                systemClient.setCookie(`settings_fontsize_${settings.frontend}`, fontSize);
+              }}
               valueLabelDisplay='off'
               marks={fontSizes.map(({ label, value }) => ({
                 label: <Typography variant='caption'>{t(label)}</Typography>,
@@ -137,7 +147,7 @@ const SettingsForm = ({
               <ToggleButtonGroup
                 exclusive={true}
                 value={settings.network}
-                onChange={(e, value) => setSettings({ ...settings, network: value })}
+                onChange={(e, network) => setSettings({ ...settings, network })}
               >
                 <ToggleButton value='mainnet' color='primary'>
                   {t('Mainnet')}

frontend/src/components/UnsafeAlert.js

@@ -9,21 +9,10 @@ class UnsafeAlert extends Component {
     super(props);
     this.state = {
       show: true,
-      isSelfhosted: this.isSelfhosted(),
     };
   }
 
-  isSelfhosted() {
-    const http = new XMLHttpRequest();
-    try {
-      http.open('HEAD', `${location.protocol}//${getHost()}/selfhosted`, false);
-      http.send();
-      return http.status === 200;
-    } catch {
-      return false;
-    }
-  }
-
+  // To do. Read from Coordinators state Obj.
   safe_urls = [
     'robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion',
     'robotestagw3dcxmd66r4rgksb4nmmr43fh77bzn2ia2eucduyeafnyd.onion',
@@ -32,6 +21,26 @@ class UnsafeAlert extends Component {
     'r7r4sckft6ptmk4r2jajiuqbowqyxiwsle4iyg4fijtoordc6z7a.b32.i2p',
   ];
 
+  checkClient() {
+    const http = new XMLHttpRequest();
+    const unsafeClient = !this.safe_urls.includes(getHost());
+    try {
+      http.open('HEAD', `${location.protocol}//${getHost()}/selfhosted`, false);
+      http.send();
+      this.props.setSettings({
+        ...this.props.settings,
+        unsafeClient,
+        selfhostedClient: http.status === 200,
+      });
+    } catch {
+      this.props.setSettings({ ...this.props.settings, unsafeClient, selfhostedClient: false });
+    }
+  }
+
+  componentDidMount() {
+    this.checkClient();
+  }
+
   render() {
     const { t } = this.props;
 
@@ -41,7 +50,7 @@ class UnsafeAlert extends Component {
     }
 
     // Show selfhosted notice
-    if (this.state.isSelfhosted) {
+    else if (this.props.settings.selfhostedClient) {
       return (
         <div>
           <Paper elevation={6} className='alertUnsafe'>
@@ -65,7 +74,7 @@ class UnsafeAlert extends Component {
     }
 
     // Show unsafe alert
-    if (!window.NativeRobosats && !this.safe_urls.includes(getHost())) {
+    else if (this.props.settings.unsafeClient) {
       return (
         <div>
           <MediaQuery minWidth={800}>

frontend/src/models/Settings.default.basic.ts

@@ -1,8 +1,13 @@
+import { systemClient } from '../services/System';
 import { baseSettings, Settings } from './Settings.model';
 
+const fontSizeCookie = systemClient.getCookie('settings_fontsize_basic');
+const fontSize = fontSizeCookie !== '' ? Number(fontSizeCookie) : 14;
+
 export const defaultSettings: Settings = {
   ...baseSettings,
   frontend: 'basic',
+  fontSize: fontSize,
 };
 
 export default defaultSettings;

frontend/src/models/Settings.default.pro.ts

@@ -1,9 +1,13 @@
+import { systemClient } from '../services/System';
 import { baseSettings, Settings } from './Settings.model';
 
+const fontSizeCookie = systemClient.getCookie('settings_fontsize_pro');
+const fontSize = fontSizeCookie !== '' ? Number(fontSizeCookie) : 12;
+
 export const defaultSettings: Settings = {
   ...baseSettings,
-  fontSize: 12,
   frontend: 'pro',
+  fontSize: fontSize,
 };
 
 export default defaultSettings;

frontend/src/models/Settings.model.ts

@@ -1,4 +1,5 @@
 import i18n from '../i18n/Web';
+import { systemClient } from '../services/System';
 import type Coordinator from './Coordinator.model';
 
 export type Language =
@@ -27,20 +28,36 @@ export interface Settings {
   freezeViewports: boolean;
   network: 'mainnet' | 'testnet' | undefined;
   coordinator: Coordinator | undefined;
+  unsafeClient: boolean;
+  hostedClient: boolean;
 }
 
+const modeCookie: 'light' | 'dark' | '' = systemClient.getCookie('settings_mode');
+const mode: 'light' | 'dark' =
+  modeCookie !== ''
+    ? modeCookie
+    : window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
+
+const languageCookie = systemClient.getCookie('settings_language');
+const language: Language =
+  languageCookie !== ''
+    ? languageCookie
+    : i18n.resolvedLanguage == null
+    ? 'en'
+    : i18n.resolvedLanguage.substring(0, 2);
+
 export const baseSettings: Settings = {
   frontend: 'basic',
-  mode:
-    window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light',
+  mode: mode,
   fontSize: 14,
-  language:
-    i18n.resolvedLanguage == null ? 'en' : (i18n.resolvedLanguage.substring(0, 2) as Language),
+  language: language,
   freezeViewports: false,
   network: undefined,
   coordinator: undefined,
+  unsafeClient: false,
+  hostedClient: false,
 };
 
 export default Settings;