GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding validation to parameters settings

Browse Source
This commit is contained in:
Gala
2022-08-31 10:10:37 +02:00
parent 6473ef13c6
commit 52703583f0
3 changed files with 72 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx
+7 -7
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { Box, Button, Divider, Typography, TextField, Grid } from '@mui/material';
type TSettingItem = {
@@ -10,6 +10,7 @@ type TSettingItem = {
const portRegex = /^\d{4}$/;
const ipRegex =
/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
// TODO: only accept valid nym wallet versions
const appVersionRegex = /^\d+(?:\.\d+){2}$/gm;
const currentMixPort: TSettingItem = { id: 'mixPort', title: 'Mix port', value: '1789' };
@@ -28,7 +29,6 @@ export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) =
const [version, setVersion] = useState<TSettingItem>(currentVersion);
useEffect(() => {
console.log('host.value.match(ipRegex)', Boolean(host.value.match(ipRegex)));
if (valueChanged) {
if (
Boolean(mixPort.value.match(portRegex)) &&
@@ -60,7 +60,7 @@ export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) =
</Typography>
</Grid>
<Grid spacing={3} item container alignItems="center" maxWidth="348px">
<Grid item width={1} spacing={3}>
<Grid item width={1}>
<TextField
type="input"
label={mixPort.title}
@@ -72,7 +72,7 @@ export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) =
fullWidth
/>
</Grid>
<Grid item width={1} spacing={3}>
<Grid item width={1}>
<TextField
type="input"
label={verloc.title}
@@ -84,7 +84,7 @@ export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) =
fullWidth
/>
</Grid>
<Grid item width={1} spacing={3}>
<Grid item width={1}>
<TextField
type="input"
label={httpPort.title}
@@ -112,7 +112,7 @@ export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) =
</Typography>
</Grid>
<Grid spacing={3} item container alignItems="center" maxWidth="348px">
<Grid item width={1} spacing={3}>
<Grid item width={1}>
<TextField
type="input"
label={host.title}
@@ -140,7 +140,7 @@ export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) =
</Typography>
</Grid>
<Grid spacing={3} item container alignItems="center" maxWidth="348px">
<Grid item width={1} spacing={3}>
<Grid item width={1}>
<TextField
type="input"
label={version.title}
nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx
+64 -35
View File
@@ -1,69 +1,98 @@
import React, { useContext, useEffect, useState } from 'react';
import { Box, Button, Divider, Typography, TextField, Grid } from '@mui/material';
import { useEffect, useState } from 'react';
import { Box, Button, Divider, Typography, TextField, InputAdornment, Grid } from '@mui/material';
type TSettingItem = {
id: string;
title: string;
value: number | string;
};
const currentProfitMargin: TSettingItem = { id: 'profit-margin', title: 'Profit margin', value: 10 };
const currentOperatorCost: TSettingItem = { id: 'operator-cost', title: 'Operator cost', value: 40 };
export const ParametersSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => {
const [valueChanged, setValueChanged] = useState<boolean>(false);
const [mixPortValue, setMixPortValue] = useState<string>('1789');
const [buttonActive, setButtonActive] = useState<boolean>(false);
const [profitMargin, setProfitMargin] = useState<TSettingItem>(currentProfitMargin);
const [operatorCost, setOperatorCost] = useState<TSettingItem>(currentOperatorCost);
const profitMarginSettings = [{ id: 'profit-margin', title: 'Profit margin', value: '10%' }];
const operatorCostSettings = [{ id: 'operator-cost', title: 'Operator cost', value: '40 NYM' }];
useEffect(() => {
if (!profitMargin.value || !operatorCost.value) {
setButtonActive(false);
}
}, [profitMargin, operatorCost]);
return (
<Box sx={{ width: 0.78, minHeight: '' }}>
<Grid container direction="column">
<Grid item container direction="row" alignItems="left" justifyContent="space-between" padding={3}>
<Grid item direction="column">
<Typography sx={{ fontSize: 16, fontWeight: 600, mb: 1 }}>Port</Typography>
<Typography sx={{ fontSize: 16, fontWeight: 600, mb: 1 }}>Profit Margin</Typography>
<Typography
sx={{
fontSize: 14,
color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
}}
>
Change profit margin of your node
Profit margin can be changed once a month
</Typography>
</Grid>
<Grid spacing={3} item container alignItems="center" maxWidth="348px">
{profitMarginSettings.map((item) => (
<Grid item width={1} spacing={3}>
<TextField
type="input"
label={item.title}
value={item.value}
onChange={(e) => console.log(`Field ${item.id} has change`, e.target.value)}
autoFocus
fullWidth
/>
</Grid>
))}
<Grid item width={1} spacing={3}>
<TextField
type="input"
label={profitMargin.title}
value={profitMargin.value}
onChange={(e) => {
console.log('parseInt(e.target.value)', { ...profitMargin, value: parseInt(e.target.value) });
setProfitMargin({ ...profitMargin, value: parseInt(e.target.value) || '' });
setButtonActive(true);
}}
fullWidth
InputProps={{
endAdornment: (
<InputAdornment position="end">
<span>NYM</span>
</InputAdornment>
),
}}
/>
</Grid>
</Grid>
</Grid>
<Divider flexItem />
<Grid item container direction="row" alignItems="left" justifyContent="space-between" padding={3}>
<Grid item direction="column">
<Typography sx={{ fontSize: 16, fontWeight: 600, mb: 1 }}>Host</Typography>
<Typography sx={{ fontSize: 16, fontWeight: 600, mb: 1 }}>Operator cost</Typography>
<Typography
sx={{
fontSize: 14,
color: (t) => (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'),
}}
>
Lock wallet after certain time
Lock Wallet after a certain time
</Typography>
</Grid>
<Grid spacing={3} item container alignItems="center" maxWidth="348px">
{operatorCostSettings.map((item) => (
<Grid item width={1} spacing={3}>
<TextField
type="input"
label={item.title}
value={item.value}
onChange={(e) => console.log(`Field ${item.id} has change`, e.target.value)}
autoFocus
fullWidth
/>
</Grid>
))}
<Grid item width={1} spacing={3}>
<TextField
type="input"
label={operatorCost.title}
value={operatorCost.value}
onChange={(e) => {
console.log('nym', { ...operatorCost, value: parseInt(e.target.value) });
setOperatorCost({ ...operatorCost, value: parseInt(e.target.value) || '' });
setButtonActive(true);
}}
fullWidth
InputProps={{
endAdornment: (
<InputAdornment position="end">
<span>%</span>
</InputAdornment>
),
}}
/>
</Grid>
</Grid>
</Grid>
<Divider flexItem />
@@ -71,7 +100,7 @@ export const ParametersSettings = ({ onSaveChanges }: { onSaveChanges: () => voi
<Button
size="large"
variant="contained"
disabled={!valueChanged}
disabled={!buttonActive}
onClick={onSaveChanges}
sx={{ m: 3, width: '320px' }}
>
nym-wallet/src/pages/bonding/node-settings/general-settings/index.tsx
+1
View File
@@ -24,6 +24,7 @@ export const NodeGeneralSettings = ({ onSaveChanges }: { onSaveChanges: () => vo
color: 'primary.main',
},
}}
key={item}
onClick={() => setSettingsCard(item)}
>
{item}