From bb79d08f6dd4f07ddd333c47624408a56268d339 Mon Sep 17 00:00:00 2001 From: Gala Date: Wed, 31 Aug 2022 16:58:53 +0200 Subject: [PATCH] dynamic values and remove hard coded code --- nym-wallet/src/context/bonding.tsx | 19 +++++ nym-wallet/src/context/mocks/bonding.tsx | 12 ++++ nym-wallet/src/pages/bonding/Bonding.tsx | 22 ++---- .../general-settings/InfoSettings.tsx | 72 ++++++++----------- .../general-settings/ParametersSettings.tsx | 4 +- .../node-settings/general-settings/index.tsx | 8 ++- .../src/pages/bonding/node-settings/index.tsx | 36 ++++------ 7 files changed, 85 insertions(+), 88 deletions(-) diff --git a/nym-wallet/src/context/bonding.tsx b/nym-wallet/src/context/bonding.tsx index 9fb4a77718..663c1f65a2 100644 --- a/nym-wallet/src/context/bonding.tsx +++ b/nym-wallet/src/context/bonding.tsx @@ -39,6 +39,12 @@ export type TBondedMixnode = { delegators: number; status: MixnodeStatus; proxy?: string; + host: string; + httpApiPort: number; + mixPort: number; + profitMarginPercent: number; + verlocPort: number; + version: string; }; export interface TBondedGateway { @@ -48,6 +54,12 @@ export interface TBondedGateway { bond: DecCoin; location?: string; // TODO not yet available, only available in Network Explorer API proxy?: string; + host: string; + httpApiPort: number; + mixPort: number; + profitMarginPercent: number; + verlocPort: number; + version: string; } export type TokenPool = 'locked' | 'balance'; @@ -165,6 +177,7 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod Console.warn(`get_operator_rewards request failed: ${e}`); } if (data) { + const { mix_node } = data; const { status, stakeSaturation, numberOfDelegators } = await getAdditionalMixnodeDetails( data.mix_node.identity_key, ); @@ -182,6 +195,12 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod operatorRewards, status, stakeSaturation, + host: mix_node.host, + httpApiPort: mix_node.http_api_port, + mixPort: mix_node.mix_port, + profitMarginPercent: mix_node.profit_margin_percent, + verlocPort: mix_node.verloc_port, + version: mix_node.version, } as TBondedMixnode); } } catch (e: any) { diff --git a/nym-wallet/src/context/mocks/bonding.tsx b/nym-wallet/src/context/mocks/bonding.tsx index ef97097317..64cd4e28f8 100644 --- a/nym-wallet/src/context/mocks/bonding.tsx +++ b/nym-wallet/src/context/mocks/bonding.tsx @@ -16,6 +16,12 @@ const bondedMixnodeMock: TBondedMixnode = { operatorRewards: { denom: 'nym', amount: '1234' }, delegators: 5423, status: 'active', + host: '1.2.34.5 ', + httpApiPort: 8000, + mixPort: 1789, + profitMarginPercent: 10, + verlocPort: 1790, + version: '1.0.2', }; const bondedGatewayMock: TBondedGateway = { @@ -23,6 +29,12 @@ const bondedGatewayMock: TBondedGateway = { identityKey: 'WayM2fYbtN6kxMwp1TrmQ4VwPks3URR5pBgWPWhzT98F', ip: '112.43.234.57', bond: { denom: 'nym', amount: '1234' }, + host: '1.2.34.5 ', + httpApiPort: 8000, + mixPort: 1789, + profitMarginPercent: 10, + verlocPort: 1790, + version: '1.0.2', }; const TxResultMock: TransactionExecuteResult = { diff --git a/nym-wallet/src/pages/bonding/Bonding.tsx b/nym-wallet/src/pages/bonding/Bonding.tsx index 28e39fd6e2..8674892410 100644 --- a/nym-wallet/src/pages/bonding/Bonding.tsx +++ b/nym-wallet/src/pages/bonding/Bonding.tsx @@ -16,23 +16,9 @@ import { isGateway, isMixnode, TBondGatewayArgs, TBondMixNodeArgs } from 'src/ty import { BondedGateway } from 'src/components/Bonding/BondedGateway'; import { RedeemRewardsModal } from 'src/components/Bonding/modals/RedeemRewardsModal'; import { CompoundRewardsModal } from 'src/components/Bonding/modals/CompoundRewardsModal'; -import { PageLayout } from '../../layouts'; -import { BondingContextProvider, useBondingContext, TBondedMixnode } from '../../context'; +import { BondingContextProvider, useBondingContext } from '../../context'; import { Box } from '@mui/material'; -// TODO: remove commented code to emulate a bonded mixnode -const bondedMixnodeMock: TBondedMixnode = { - name: 'Monster node', - identityKey: '7mjM2fYbtN6kxMwp1TrmQ4VwPks3URR5pBgWPWhzT98F', - stake: { denom: 'nym', amount: '1234' }, - bond: { denom: 'nym', amount: '1234' }, - stakeSaturation: 95, - profitMargin: 15, - operatorRewards: { denom: 'nym', amount: '1234' }, - delegators: 5423, - status: 'active', -}; - const Bonding = () => { const [showModal, setShowModal] = useState< 'bond-mixnode' | 'bond-gateway' | 'bond-more' | 'unbond' | 'redeem' | 'compound' | 'node-settings' @@ -164,11 +150,11 @@ const Bonding = () => { return ( - {!bondedMixnodeMock && setShowModal('bond-mixnode')} />} + {!bondedNode && setShowModal('bond-mixnode')} />} - {bondedMixnodeMock && isMixnode(bondedMixnodeMock) && ( + {bondedNode && isMixnode(bondedNode) && ( handleBondedMixnodeAction(action)} /> 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 d512d3039f..efa04ec843 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,52 +1,40 @@ import { useEffect, useState } from 'react'; import { Box, Button, Divider, Typography, TextField, Grid } from '@mui/material'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; - +import { TBondedMixnode, TBondedGateway } from '../../../../context/bonding'; import { SimpleModal } from '../../../../components/Modals/SimpleModal'; -type TSettingItem = { - id: string; - title: string; - value: string; -}; - -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: 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 const appVersionRegex = /^\d+(?:\.\d+){2}$/gm; -const currentMixPort: TSettingItem = { id: 'mixPort', title: 'Mix port', value: '1789' }; -const currentVerlocPort: TSettingItem = { id: 'verlocPort', title: 'Verloc Port', value: '1790' }; -const currentHttpPort: TSettingItem = { id: 'httpPort', title: 'HTTP Port', value: '8000' }; -const currentHost: TSettingItem = { id: 'host', title: 'Host', value: '95.216.92.229' }; -const currentVersion: TSettingItem = { id: 'version', title: 'Version', value: '1.0.8' }; +export const InfoSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBondedGateway }) => { + const { mixPort, verlocPort, httpApiPort, host, version } = bondedNode; -export const InfoSettings = () => { const [valueChanged, setValueChanged] = useState(false); const [buttonActive, setButtonActive] = useState(false); const [openConfirmationModal, setOpenConfirmationModal] = useState(false); - const [mixPort, setMixPort] = useState(currentMixPort); - const [verloc, setVerloc] = useState(currentVerlocPort); - const [httpPort, setHttpPort] = useState(currentHttpPort); - const [host, setHost] = useState(currentHost); - const [version, setVersion] = useState(currentVersion); + const [mixPortUpdated, setMixPortUpdated] = useState(mixPort); + const [verlocPortUpdated, setVerlocPortUpdated] = useState(verlocPort); + const [httpApiPortUpdated, setHttpApiPortUpdated] = useState(httpApiPort); + const [hostUpdated, setHostUpdated] = useState(host); + const [versionUpdated, setVersionUpdated] = useState(version); useEffect(() => { if (valueChanged) { if ( - Boolean(mixPort.value.match(portRegex)) && - Boolean(verloc.value.match(portRegex)) && - Boolean(httpPort.value.match(portRegex)) && - Boolean(host.value.match(ipRegex)) && - Boolean(version.value.match(appVersionRegex)) + Boolean(mixPortUpdated.toString().length === 4) && + Boolean(verlocPortUpdated.toString().length === 4) && + Boolean(httpApiPortUpdated.toString().length === 4) && + Boolean(versionUpdated.match(appVersionRegex)) ) { setButtonActive(true); return; } } setButtonActive(false); - }, [valueChanged, mixPort, verloc, httpPort, host, version]); + }, [valueChanged, mixPortUpdated, verlocPortUpdated, httpApiPortUpdated, hostUpdated, versionUpdated]); return ( @@ -76,10 +64,10 @@ export const InfoSettings = () => { { - setMixPort({ ...mixPort, value: e.target.value }); + setMixPortUpdated(parseInt(e.target.value)); setValueChanged(true); }} fullWidth @@ -88,10 +76,10 @@ export const InfoSettings = () => { { - setVerloc({ ...verloc, value: e.target.value }); + setVerlocPortUpdated(parseInt(e.target.value)); setValueChanged(true); }} fullWidth @@ -100,10 +88,10 @@ export const InfoSettings = () => { { - setHttpPort({ ...httpPort, value: e.target.value }); + setHttpApiPortUpdated(parseInt(e.target.value)); setValueChanged(true); }} fullWidth @@ -128,10 +116,10 @@ export const InfoSettings = () => { { - setHost({ ...host, value: e.target.value }); + setHostUpdated(e.target.value); setValueChanged(true); }} fullWidth @@ -156,10 +144,10 @@ export const InfoSettings = () => { { - setVersion({ ...version, value: e.target.value }); + setVersionUpdated(e.target.value); setValueChanged(true); }} fullWidth 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 0c53d6d999..51513a21a6 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,7 +1,7 @@ import { useEffect, useState } from 'react'; import { Box, Button, Divider, Typography, TextField, InputAdornment, Grid } from '@mui/material'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; - +import { TBondedMixnode, TBondedGateway } from '../../../../context/bonding'; import { SimpleModal } from '../../../../components/Modals/SimpleModal'; type TSettingItem = { @@ -13,7 +13,7 @@ type TSettingItem = { 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 = () => { +export const ParametersSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBondedGateway }) => { const [buttonActive, setButtonActive] = useState(false); const [openConfirmationModal, setOpenConfirmationModal] = useState(false); const [profitMargin, setProfitMargin] = useState(currentProfitMargin); 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 4562f2729d..b3ad75d18e 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 @@ -1,13 +1,15 @@ import React, { useContext, useEffect, useState } from 'react'; import { Box, Button, Divider, Grid } from '@mui/material'; +import { TBondedMixnode, TBondedGateway } from '../../../../context/bonding'; import { InfoSettings } from './InfoSettings'; import { ParametersSettings } from './ParametersSettings'; const nodeGeneralNav = ['Info', 'Parameters']; -export const NodeGeneralSettings = () => { +export const NodeGeneralSettings = ({ bondedNode }: { bondedNode: TBondedMixnode | TBondedGateway }) => { const [settingsCard, setSettingsCard] = useState(nodeGeneralNav[0]); + console.log('node', bondedNode); return ( @@ -32,8 +34,8 @@ export const NodeGeneralSettings = () => { ))} - {settingsCard === nodeGeneralNav[0] && } - {settingsCard === nodeGeneralNav[1] && } + {settingsCard === nodeGeneralNav[0] && } + {settingsCard === nodeGeneralNav[1] && } ); diff --git a/nym-wallet/src/pages/bonding/node-settings/index.tsx b/nym-wallet/src/pages/bonding/node-settings/index.tsx index 8392283a0c..50d031124d 100644 --- a/nym-wallet/src/pages/bonding/node-settings/index.tsx +++ b/nym-wallet/src/pages/bonding/node-settings/index.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { FeeDetails } from '@nymproject/types'; import { Box, Typography, Stack, Toolbar, Button, Divider } from '@mui/material'; @@ -7,7 +7,7 @@ import { ConfirmationDetailProps, ConfirmationDetailsModal } from 'src/component import { Node as NodeIcon } from 'src/svg-icons/node'; import { NymCard } from '../../../components'; import { PageLayout } from '../../../layouts'; -import { useBondingContext, TBondedMixnode } from '../../../context'; +import { useBondingContext, BondingContextProvider } from '../../../context'; import { AppContext, urls } from 'src/context/main'; import { NodeGeneralSettings } from './general-settings'; @@ -15,27 +15,11 @@ import { UnbondModal } from '../../../components/Bonding/modals/UnbondModal'; const nodeSettingsNav = ['General', 'Unbond']; -// TODO: remove commented code to emulate a bonded mixnode -const bondedMixnodeMock: TBondedMixnode = { - name: 'Monster node', - identityKey: '7mjM2fYbtN6kxMwp1TrmQ4VwPks3URR5pBgWPWhzT98F', - stake: { denom: 'nym', amount: '1234' }, - bond: { denom: 'nym', amount: '1234' }, - stakeSaturation: 95, - profitMargin: 15, - operatorRewards: { denom: 'nym', amount: '1234' }, - delegators: 5423, - status: 'active', -}; - -export const NodeSettingsPage = () => { +export const NodeSettings = () => { const [settingsCard, setSettingsCard] = useState(nodeSettingsNav[0]); const [confirmationDetails, setConfirmationDetails] = useState(); - const { - network, - userBalance: { originalVesting }, - } = useContext(AppContext); + const { network } = useContext(AppContext); const { bondedNode, unbond } = useBondingContext(); @@ -119,10 +103,10 @@ export const NodeSettingsPage = () => { } > - {settingsCard === nodeSettingsNav[0] && } - {settingsCard === nodeSettingsNav[1] && bondedMixnodeMock && ( + {settingsCard === nodeSettingsNav[0] && bondedNode && } + {settingsCard === nodeSettingsNav[1] && bondedNode && ( setSettingsCard(nodeSettingsNav[0])} onConfirm={handleUnbond} onError={handleError} @@ -144,3 +128,9 @@ export const NodeSettingsPage = () => { ); }; + +export const NodeSettingsPage = () => ( + + + +);