From c809c7733ddf8a14be1ee29ac342ff9a97d6a398 Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 1 Sep 2022 15:06:23 +0200 Subject: [PATCH] logic refactor --- .../src/components/Modals/SimpleModal.tsx | 2 +- nym-wallet/src/context/bonding.tsx | 2 +- .../general-settings/InfoSettings.tsx | 129 ++++++++++++------ .../general-settings/ParametersSettings.tsx | 71 ++++++---- .../node-settings/general-settings/index.tsx | 2 +- nym-wallet/src/theme/mui-theme.d.ts | 2 +- nym-wallet/src/theme/theme.tsx | 4 +- 7 files changed, 137 insertions(+), 75 deletions(-) diff --git a/nym-wallet/src/components/Modals/SimpleModal.tsx b/nym-wallet/src/components/Modals/SimpleModal.tsx index 59013d048b..27aa325b9b 100644 --- a/nym-wallet/src/components/Modals/SimpleModal.tsx +++ b/nym-wallet/src/components/Modals/SimpleModal.tsx @@ -45,7 +45,7 @@ export const SimpleModal: React.FC<{ {displayErrorIcon && } - {displayInfoIcon && } + {displayInfoIcon && theme.palette.nym.nymWallet.text.blue }} />} {typeof header === 'string' ? ( diff --git a/nym-wallet/src/context/bonding.tsx b/nym-wallet/src/context/bonding.tsx index 663c1f65a2..292592b733 100644 --- a/nym-wallet/src/context/bonding.tsx +++ b/nym-wallet/src/context/bonding.tsx @@ -195,7 +195,7 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod operatorRewards, status, stakeSaturation, - host: mix_node.host, + host: mix_node.host.replace(/\s/g, ''), httpApiPort: mix_node.http_api_port, mixPort: mix_node.mix_port, profitMarginPercent: mix_node.profit_margin_percent, diff --git a/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx index 1ff5e52142..8678280352 100644 --- a/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx +++ b/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx @@ -1,8 +1,13 @@ import { useEffect, useState } from 'react'; -import { Box, Button, Divider, Typography, TextField, Grid, Alert } from '@mui/material'; +import { Button, Divider, Typography, TextField, Grid, Alert } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; import { TBondedMixnode, TBondedGateway } from '../../../../context/bonding'; import { SimpleModal } from '../../../../components/Modals/SimpleModal'; +const getNumberlength = (number: number) => { + return number.toString().length; +}; + // TODO: adding ip regex that works well const ipRegex = /^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/; // TODO: only accept valid nym wallet versions @@ -11,7 +16,6 @@ const appVersionRegex = /^\d+(?:\.\d+){2}$/gm; export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBondedGateway }) => { const { mixPort, verlocPort, httpApiPort, host, version } = bondedNode; - const [valueChanged, setValueChanged] = useState(false); const [buttonActive, setButtonActive] = useState(false); const [openConfirmationModal, setOpenConfirmationModal] = useState(false); const [mixPortUpdated, setMixPortUpdated] = useState(mixPort); @@ -20,23 +24,53 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon const [hostUpdated, setHostUpdated] = useState(host); const [versionUpdated, setVersionUpdated] = useState(version); + const theme = useTheme(); + useEffect(() => { - if (valueChanged) { - if ( - Boolean(mixPortUpdated.toString().length === 4) && - Boolean(verlocPortUpdated.toString().length === 4) && - Boolean(httpApiPortUpdated.toString().length === 4) && - Boolean(versionUpdated.match(appVersionRegex)) - ) { - setButtonActive(true); - return; - } + setButtonActive(true); + if ( + mixPortUpdated === mixPort && + verlocPortUpdated === verlocPort && + httpApiPortUpdated === httpApiPort && + hostUpdated === host && + versionUpdated === version + ) { + setButtonActive(false); } - setButtonActive(false); - }, [valueChanged, mixPortUpdated, verlocPortUpdated, httpApiPortUpdated, hostUpdated, versionUpdated]); + if ( + getNumberlength(mixPortUpdated) !== 4 || + getNumberlength(verlocPortUpdated) !== 4 || + getNumberlength(httpApiPortUpdated) !== 4 || + !versionUpdated.match(appVersionRegex) + ) { + setButtonActive(false); + } + }, [mixPortUpdated, verlocPortUpdated, httpApiPortUpdated, hostUpdated, versionUpdated]); + + const handleChange = (e: React.ChangeEvent) => { + const { value, id } = e.target; + const numNewValue = parseInt(value) || 0; + + switch (id) { + case 'mixPort': + setMixPortUpdated(numNewValue); + break; + case 'verlocPort': + setVerlocPortUpdated(numNewValue); + break; + case 'httpApiPort': + setHttpApiPortUpdated(numNewValue); + break; + case 'host': + setHostUpdated(value); + break; + case 'version': + setVersionUpdated(value); + } + }; return ( - + {buttonActive && ( theme.palette.nym.nymWallet.text.blue, + '& .MuiAlert-icon': { color: (theme) => theme.palette.nym.nymWallet.text.blue }, }} > Your changes will be ONLY saved on the display. Remember to change the values on your node’s @@ -55,50 +89,51 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon - Port + + Port + (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'), }} > Change profit margin of your node - + { - setMixPortUpdated(parseInt(e.target.value)); - setValueChanged(true); - }} + onChange={(e) => handleChange(e)} + inputProps={{ maxLength: 4 }} fullWidth /> { - setVerlocPortUpdated(parseInt(e.target.value)); - setValueChanged(true); - }} + onChange={(e) => handleChange(e)} + inputProps={{ maxLength: 4 }} fullWidth /> { - setHttpApiPortUpdated(parseInt(e.target.value)); - setValueChanged(true); - }} + onChange={(e) => handleChange(e)} + inputProps={{ maxLength: 4 }} fullWidth /> @@ -107,26 +142,28 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon - Host + + Host + (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'), }} > Lock wallet after certain time - + { - setHostUpdated(e.target.value); - setValueChanged(true); - }} + onChange={(e) => handleChange(e)} fullWidth /> @@ -135,26 +172,28 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon - Version + + Version + (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'), }} > Lock wallet after certain time - + { - setVersionUpdated(e.target.value); - setValueChanged(true); - }} + onChange={(e) => handleChange(e)} fullWidth /> @@ -196,7 +235,7 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon width: '100%', mb: 1, textAlign: 'center', - color: 'info.dark', + color: theme.palette.nym.nymWallet.text.blue, fontSize: 16, textTransform: 'capitalize', }} @@ -209,6 +248,6 @@ export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBon textTransform: 'capitalize', }} /> - + ); }; diff --git a/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx b/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx index 9d32f93270..73b8219459 100644 --- a/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx +++ b/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx @@ -1,5 +1,6 @@ -import { useEffect, useState } from 'react'; -import { Box, Button, Divider, Typography, TextField, InputAdornment, Grid, Alert } from '@mui/material'; +import { useState, useEffect } from 'react'; +import { Button, Divider, Typography, TextField, InputAdornment, Grid, Alert } from '@mui/material'; +import { useTheme } from '@mui/material/styles'; import { TBondedMixnode, TBondedGateway } from '../../../../context/bonding'; import { SimpleModal } from '../../../../components/Modals/SimpleModal'; @@ -8,54 +9,74 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode const [buttonActive, setButtonActive] = useState(false); const [openConfirmationModal, setOpenConfirmationModal] = useState(false); - const [profitMargin, setProfitMargin] = useState(profitMarginPercent); - const [operatorCost, setOperatorCost] = useState(bond.amount); + const [profitMargin, setProfitMargin] = useState(profitMarginPercent); + const [operatorCost, setOperatorCost] = useState(parseInt(bond.amount)); + + const theme = useTheme(); useEffect(() => { - if (!profitMargin || !operatorCost || 0 >= profitMargin || 100 < profitMargin) { + if (profitMargin === profitMarginPercent && operatorCost === parseInt(bond.amount)) { setButtonActive(false); + } else { + setButtonActive(true); } }, [profitMargin, operatorCost]); + const handleChange = (e: React.ChangeEvent) => { + const { value, id } = e.target; + const numNewValue = parseInt(value) || 0; + switch (id) { + case 'profitMargin': + setProfitMargin(numNewValue); + break; + case 'operatorCost': + setOperatorCost(numNewValue); + break; + } + }; + return ( - + {buttonActive && ( theme.palette.nym.nymWallet.text.blue, + '& .MuiAlert-icon': { color: (theme) => theme.palette.nym.nymWallet.text.blue }, }} > Profit margin can be changed once a month, your changes will be applied in the next interval )} - + - Profit Margin + + Profit Margin + (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'), }} > Profit margin can be changed once a month - + { - setProfitMargin(parseInt(e.target.value) || ''); - setButtonActive(true); - }} + onChange={(e) => handleChange(e)} fullWidth InputProps={{ endAdornment: ( @@ -69,28 +90,30 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode - + - Operator cost + + Operator cost + (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'), }} > Lock Wallet after a certain time - + { - setOperatorCost(e.target.value); - setButtonActive(true); - }} + onChange={(e) => handleChange(e)} fullWidth InputProps={{ endAdornment: ( @@ -138,7 +161,7 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode width: '100%', mb: 1, textAlign: 'center', - color: 'info.dark', + color: theme.palette.nym.nymWallet.text.blue, fontSize: 16, textTransform: 'capitalize', }} @@ -146,6 +169,6 @@ export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode m: 0, }} /> - + ); }; diff --git a/nym-wallet/src/pages/bonding/node-settings/general-settings/index.tsx b/nym-wallet/src/pages/bonding/node-settings/general-settings/index.tsx index 83249b85dc..caf8c121f7 100644 --- a/nym-wallet/src/pages/bonding/node-settings/general-settings/index.tsx +++ b/nym-wallet/src/pages/bonding/node-settings/general-settings/index.tsx @@ -12,7 +12,7 @@ export const NodeGeneralSettings = ({ bondedNode }: { bondedNode: TBondedMixnode return ( - + {nodeGeneralNav.map((item) => (