mirror of
https://github.com/Reckless-Satoshi/robosats.git
synced 2024-09-11 11:55:26 +03:00
Add settings forms
This commit is contained in:
parent
d3d0f3ee1a
commit
6dd90aa118
@ -44,6 +44,10 @@ const App = (): JSX.Element => {
|
||||
updateTheme();
|
||||
}, [settings]);
|
||||
|
||||
useEffect(() => {
|
||||
i18n.changeLanguage(settings.language);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Suspense fallback='loading language'>
|
||||
<I18nextProvider i18n={i18n}>
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -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;
|
@ -37,7 +37,7 @@ interface Props {
|
||||
maxHeight: number;
|
||||
fullWidth?: number;
|
||||
fullHeight?: number;
|
||||
elevation: number;
|
||||
elevation?: number;
|
||||
defaultFullscreen?: boolean;
|
||||
fillContainer?: boolean;
|
||||
showControls?: boolean;
|
||||
|
71
frontend/src/components/SettingsForm/SelectLanguage.tsx
Normal file
71
frontend/src/components/SettingsForm/SelectLanguage.tsx
Normal file
@ -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;
|
28
frontend/src/components/SettingsForm/index.tsx
Normal file
28
frontend/src/components/SettingsForm/index.tsx
Normal file
@ -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;
|
20
frontend/src/models/Coordinator.model.ts
Normal file
20
frontend/src/models/Coordinator.model.ts
Normal file
@ -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;
|
@ -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,
|
||||
|
19
frontend/src/models/Language.model.ts
Normal file
19
frontend/src/models/Language.model.ts
Normal file
@ -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;
|
@ -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;
|
||||
|
@ -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';
|
||||
|
@ -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),
|
||||
|
Loading…
Reference in New Issue
Block a user