Add settings forms

frontend/src/App.tsx

@@ -44,6 +44,10 @@ const App = (): JSX.Element => {
     updateTheme();
   }, [settings]);
 
+  useEffect(() => {
+    i18n.changeLanguage(settings.language);
+  }, []);
+
   return (
     <Suspense fallback='loading language'>
       <I18nextProvider i18n={i18n}>

frontend/src/basic/Main.tsx

@@ -29,6 +29,7 @@ import {
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import SchoolIcon from '@mui/icons-material/School';
+import SettingsPage from './SettingsPage';
 
 const getWindowSize = function (fontSize: number) {
   // returns window size in EM units
@@ -39,7 +40,6 @@ const getWindowSize = function (fontSize: number) {
 };
 
 interface MainProps {
-  updateTheme: () => void;
   settings: Settings;
   setSettings: (state: Settings) => void;
 }
@@ -202,6 +202,10 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
             path='/order/:orderId'
             render={(props: any) => <OrderPage theme={theme} history={history} {...props} />}
           />
+          <Route
+            path='/settings'
+            render={(props: any) => <SettingsPage settings={settings} setSettings={setSettings} />}
+          />
         </Switch>
       </div>
       <div
@@ -212,9 +216,7 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
         }}
       >
         <NavBar
-          theme={theme}
-          windowSize={windowSize}
-          redirectTo={(location: string) => history.push(location)}
+          width={windowSize.width}
           robot={robot}
           setRobot={setRobot}
           info={info}

frontend/src/basic/MakerPage/index.tsx

@@ -74,7 +74,12 @@ const MakerPage = ({
       <Grid item>
         <Paper
           elevation={12}
-          style={{ padding: 8, width: '17.25em', maxHeight: `${maxHeight}em`, overflow: 'auto' }}
+          style={{
+            padding: '0.6em',
+            width: '17.25em',
+            maxHeight: `${maxHeight}em`,
+            overflow: 'auto',
+          }}
         >
           <MakerForm
             limits={limits}

frontend/src/basic/SettingsPage/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Paper, useTheme } from '@mui/material';
+import SettingsForm from '../../components/SettingsForm';
+import { Settings } from '../../models';
+
+interface SettingsPageProps {
+  settings: Settings;
+  setSettings: (state: Settings) => void;
+}
+
+const SettingsPage = ({ settings, setSettings }: SettingsPageProps): JSX.Element => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  return (
+    <Paper elevation={12} sx={{ padding: '0.6em', width: '12em', height: '12em' }}>
+      <SettingsForm settings={settings} setSettings={setSettings} />
+    </Paper>
+  );
+};
+
+export default SettingsPage;

frontend/src/components/BookTable/index.tsx

@@ -37,7 +37,7 @@ interface Props {
   maxHeight: number;
   fullWidth?: number;
   fullHeight?: number;
-  elevation: number;
+  elevation?: number;
   defaultFullscreen?: boolean;
   fillContainer?: boolean;
   showControls?: boolean;

frontend/src/components/SettingsForm/SelectLanguage.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Select, MenuItem, useTheme, Grid, Typography } from '@mui/material';
+import Language from '../../models/Language.model';
+
+import Flags from 'country-flag-icons/react/3x2';
+import { CataloniaFlag, BasqueCountryFlag } from '../Icons';
+
+const menuLanuguages = [
+  { name: 'English', i18nCode: 'en', flag: Flags['US'] },
+  { name: 'Español', i18nCode: 'es', flag: Flags['ES'] },
+  { name: 'Deutsch', i18nCode: 'de', flag: Flags['DE'] },
+  { name: 'Polski', i18nCode: 'pl', flag: Flags['PL'] },
+  { name: 'Français', i18nCode: 'fr', flag: Flags['FR'] },
+  { name: 'Русский', i18nCode: 'ru', flag: Flags['RU'] },
+  { name: 'Italiano', i18nCode: 'it', flag: Flags['IT'] },
+  { name: 'Português', i18nCode: 'pt', flag: Flags['BR'] },
+  { name: '简体', i18nCode: 'zh-si', flag: Flags['CN'] },
+  { name: '繁體', i18nCode: 'zh-tr', flag: Flags['CN'] },
+  { name: 'Svenska', i18nCode: 'sv', flag: Flags['SE'] },
+  { name: 'Čeština', i18nCode: 'cs', flag: Flags['CZ'] },
+  { name: 'ภาษาไทย', i18nCode: 'th', flag: Flags['TH'] },
+  { name: 'Català', i18nCode: 'ca', flag: CataloniaFlag },
+  { name: 'Euskara', i18nCode: 'eu', flag: BasqueCountryFlag },
+];
+
+interface SelectLanguageProps {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+}
+const SelectLanguage = ({ language, setLanguage }: SelectLanguageProps): JSX.Element => {
+  const theme = useTheme();
+  const { t, i18n } = useTranslation();
+
+  const flagProps = {
+    width: 1.5 * theme.typography.fontSize,
+    height: 1.5 * theme.typography.fontSize,
+  };
+
+  const handleChangeLang = function (e: any) {
+    setLanguage(e.target.value);
+    i18n.changeLanguage(e.target.value);
+  };
+
+  console.log(language);
+  return (
+    <Select
+      autoWidth={true}
+      value={language}
+      inputProps={{
+        style: { textAlign: 'center' },
+      }}
+      onChange={handleChangeLang}
+    >
+      {menuLanuguages.map((language, index) => (
+        <MenuItem key={index} value={language.i18nCode}>
+          <Grid container>
+            <Grid item style={{ width: '1.9em', position: 'relative', top: '0.15em' }}>
+              <language.flag {...flagProps} />
+            </Grid>
+            <Grid item>
+              <Typography variant='inherit'>{language.name}</Typography>
+            </Grid>
+          </Grid>
+        </MenuItem>
+      ))}
+    </Select>
+  );
+};
+
+export default SelectLanguage;

frontend/src/components/SettingsForm/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Grid, useTheme } from '@mui/material';
+import { Settings } from '../../models';
+import SelectLanguage from './SelectLanguage';
+
+interface SettingsFormProps {
+  settings: Settings;
+  setSettings: (state: Settings) => void;
+}
+
+const SettingsForm = ({ settings, setSettings }: SettingsFormProps): JSX.Element => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+
+  return (
+    <Grid container>
+      <Grid item>
+        <SelectLanguage
+          language={settings.language}
+          setLanguage={(language) => setSettings({ ...settings, language })}
+        />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default SettingsForm;

frontend/src/models/Coordinator.model.ts

@@ -0,0 +1,20 @@
+export interface Coordinator {
+  alias: string;
+  description: string | undefined;
+  coverLetter: string | undefined;
+  logo: string;
+  color: string;
+  contact: {
+    email: string | undefined;
+    telegram: string | undefined;
+    matrix: string | undefined;
+    twitter: string | undefined;
+    website: string | undefined;
+  };
+  mainnetOnion: string | undefined;
+  testnetOnion: string | undefined;
+  mainnetNodesPubkeys: string[];
+  testnetNodesPubkeys: string[];
+}
+
+export default Coordinator;

frontend/src/models/Info.model.ts

@@ -17,6 +17,7 @@ export interface Info {
   taker_fee: number;
   bond_size: number;
   current_swap_fee_rate: number;
+  network: 'mainnet' | 'testnet' | undefined;
   coordinatorVersion: string;
   clientVersion: string;
   openUpdateClient: boolean;
@@ -41,6 +42,7 @@ export const defaultInfo: Info = {
   taker_fee: 0,
   bond_size: 0,
   current_swap_fee_rate: 0,
+  network: undefined,
   coordinatorVersion: 'v?.?.?',
   clientVersion: 'v?.?.?',
   openUpdateClient: false,

frontend/src/models/Language.model.ts

@@ -0,0 +1,19 @@
+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,24 +1,14 @@
+import i18n from '../i18n/Web';
+import type Coordinator from './Coordinator.model';
+import type Language from './Language.model';
+
 export interface Settings {
   mode: 'light' | 'dark';
   fontSize: number;
-  language:
-    | 'en'
-    | 'es'
-    | 'ru'
-    | 'de'
-    | 'pl'
-    | 'fr'
-    | 'ca'
-    | 'it'
-    | 'pt'
-    | 'eu'
-    | 'cs'
-    | 'th'
-    | 'pl'
-    | 'sv'
-    | 'zh-SI'
-    | 'zh-TR';
+  language: Language;
   freezeViewports: boolean;
+  network: 'mainnet' | 'testnet' | undefined;
+  coordinator: Coordinator | undefined;
 }
 
 export const baseSettings: Settings = {
@@ -27,8 +17,10 @@ export const baseSettings: Settings = {
       ? 'dark'
       : 'light',
   fontSize: 14,
-  language: 'en',
+  language: i18n.resolvedLanguage == null ? 'en' : i18n.resolvedLanguage.substring(0, 2),
   freezeViewports: false,
+  network: undefined,
+  coordinator: undefined,
 };
 
 export default Settings;

frontend/src/models/index.ts

@@ -7,6 +7,8 @@ export type { Robot } from './Robot.model';
 export type { Info } from './Info.model';
 export type { Settings } 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/urls.py

@@ -3,9 +3,13 @@ from django.urls import path
 from .views import basic, pro
 
 urlpatterns = [
+    path("", basic),
     path("make/", basic),
+    path("robot/", basic),
+    path("ref/<refCode>", basic),
     path("book/", basic),
     path("order/<int:orderId>", basic),
+    path("settings/", basic),
     path("", basic),
     path("ref/<refCode>", basic),
     path("pro/", pro),