From cbe0115f01c10a92831c266302bc59afbbf509d7 Mon Sep 17 00:00:00 2001 From: Gala Date: Wed, 17 Aug 2022 11:10:10 +0200 Subject: [PATCH 01/21] wip --- .../Bonding/modals/NodeSettingsModal.tsx | 6 +++--- .../src/components/Bonding/nodeSettingsPage | 0 nym-wallet/src/pages/bonding/index.tsx | 18 +++++++++--------- 3 files changed, 12 insertions(+), 12 deletions(-) create mode 100644 nym-wallet/src/components/Bonding/nodeSettingsPage diff --git a/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx b/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx index 1a1903d205..50a677348b 100644 --- a/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx +++ b/nym-wallet/src/components/Bonding/modals/NodeSettingsModal.tsx @@ -19,13 +19,13 @@ export const NodeSettings = ({ onClose, onError, }: { - currentPm: TBondedMixnode['profitMargin']; - isVesting: boolean; + currentPm?: TBondedMixnode['profitMargin']; + isVesting?: boolean; onConfirm: (profitMargin: number, fee?: FeeDetails) => Promise; onClose: () => void; onError: (err: string) => void; }) => { - const [pm, setPm] = useState(currentPm.toString()); + const [pm, setPm] = useState(currentPm?.toString()); const [error, setError] = useState(false); const { fee, getFee, resetFeeState, isFeeLoading, feeError } = useGetFee(); diff --git a/nym-wallet/src/components/Bonding/nodeSettingsPage b/nym-wallet/src/components/Bonding/nodeSettingsPage new file mode 100644 index 0000000000..e69de29bb2 diff --git a/nym-wallet/src/pages/bonding/index.tsx b/nym-wallet/src/pages/bonding/index.tsx index 714715be39..c359fc8757 100644 --- a/nym-wallet/src/pages/bonding/index.tsx +++ b/nym-wallet/src/pages/bonding/index.tsx @@ -213,15 +213,15 @@ const Bonding = () => { /> )} - {showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && ( - setShowModal(undefined)} - onError={handleError} - /> - )} + {/* {showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && ( */} + setShowModal(undefined)} + onError={handleError} + /> + {/* )} */} {confirmationDetails && confirmationDetails.status === 'success' && ( Date: Wed, 17 Aug 2022 18:55:58 +0200 Subject: [PATCH 02/21] nodesettings page and logic to browse --- .../src/components/Bonding/nodeSettingsPage | 0 nym-wallet/src/pages/bonding/index.tsx | 27 +++++++----- nym-wallet/src/pages/index.ts | 1 + nym-wallet/src/pages/settings/index.ts | 1 + .../src/pages/settings/node-settings.tsx | 44 +++++++++++++++++++ nym-wallet/src/routes/app.tsx | 3 +- 6 files changed, 63 insertions(+), 13 deletions(-) delete mode 100644 nym-wallet/src/components/Bonding/nodeSettingsPage create mode 100644 nym-wallet/src/pages/settings/index.ts create mode 100644 nym-wallet/src/pages/settings/node-settings.tsx diff --git a/nym-wallet/src/components/Bonding/nodeSettingsPage b/nym-wallet/src/components/Bonding/nodeSettingsPage deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/nym-wallet/src/pages/bonding/index.tsx b/nym-wallet/src/pages/bonding/index.tsx index c359fc8757..519b491b20 100644 --- a/nym-wallet/src/pages/bonding/index.tsx +++ b/nym-wallet/src/pages/bonding/index.tsx @@ -1,4 +1,5 @@ -import React, { useContext, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { FeeDetails } from '@nymproject/types'; import { TPoolOption } from 'src/components'; import { Bond } from 'src/components/Bonding/Bond'; @@ -16,9 +17,8 @@ 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 } from '../../context'; -import { Box } from '@mui/material'; +import { Box, Button } from '@mui/material'; const Bonding = () => { const [showModal, setShowModal] = useState< @@ -44,6 +44,8 @@ const Bonding = () => { checkOwnership, } = useBondingContext(); + const navigate = useNavigate(); + const handleCloseModal = async () => { setShowModal(undefined); await checkOwnership(); @@ -151,6 +153,7 @@ const Bonding = () => { return ( + {!bondedNode && setShowModal('bond-mixnode')} />} {bondedNode && isMixnode(bondedNode) && ( @@ -213,15 +216,15 @@ const Bonding = () => { /> )} - {/* {showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && ( */} - setShowModal(undefined)} - onError={handleError} - /> - {/* )} */} + {showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && ( + setShowModal(undefined)} + onError={handleError} + currentPm={bondedNode.profitMargin} + isVesting={Boolean(bondedNode.proxy)} + /> + )} {confirmationDetails && confirmationDetails.status === 'success' && ( { + // const [showTransferModal, setShowTransferModal] = useState(false); + // const [showVestingCard, setShowVestingCard] = useState(false); + + const { userBalance } = useContext(AppContext); + + const navigate = useNavigate(); + + useEffect(() => { + const { originalVesting, currentVestingPeriod, tokenAllocation } = userBalance; + // if ( + // originalVesting && + // currentVestingPeriod === 'After' && + // tokenAllocation?.locked === '0' && + // tokenAllocation?.vesting === '0' && + // tokenAllocation?.spendable === '0' + // ) { + // setShowVestingCard(false); + // } else if (originalVesting) { + // setShowVestingCard(true); + // } + }, [userBalance]); + + const handleShowTransferModal = async () => { + await userBalance.refreshBalances(); + // setShowTransferModal(true); + }; + + return ( + + +

hello

+ + + + ); +}; diff --git a/nym-wallet/src/routes/app.tsx b/nym-wallet/src/routes/app.tsx index f7cafe8b89..2b0c2bd746 100644 --- a/nym-wallet/src/routes/app.tsx +++ b/nym-wallet/src/routes/app.tsx @@ -4,7 +4,7 @@ import { ApplicationLayout } from 'src/layouts'; import { Terminal } from 'src/pages/terminal'; import { Send } from 'src/components/Send'; import { Receive } from '../components/Receive'; -import { Balance, InternalDocs, Unbond, DelegationPage, Admin, BondingPage } from '../pages'; +import { Balance, InternalDocs, Unbond, DelegationPage, Admin, BondingPage, NodeSettingsPage } from '../pages'; export const AppRoutes = () => ( @@ -14,6 +14,7 @@ export const AppRoutes = () => ( } /> } /> + } /> } /> } /> } /> From 466ac1a1e010fa0c078fd2501d1997b418168b80 Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 18 Aug 2022 16:39:05 +0200 Subject: [PATCH 03/21] settings general page --- nym-wallet/src/pages/bonding/Bonding.tsx | 255 +++++++++++++++++ .../src/pages/bonding/BondingPage.stories.tsx | 2 +- nym-wallet/src/pages/bonding/index.tsx | 257 +----------------- .../general-settings/InfoSettings.tsx | 96 +++++++ .../general-settings/ParametersSettings.tsx | 62 +++++ .../node-settings/general-settings/index.tsx | 38 +++ .../src/pages/bonding/node-settings/index.tsx | 71 +++++ nym-wallet/src/pages/index.ts | 1 - nym-wallet/src/pages/settings/index.ts | 1 - .../src/pages/settings/node-settings.tsx | 44 --- 10 files changed, 525 insertions(+), 302 deletions(-) create mode 100644 nym-wallet/src/pages/bonding/Bonding.tsx create mode 100644 nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx create mode 100644 nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx create mode 100644 nym-wallet/src/pages/bonding/node-settings/general-settings/index.tsx create mode 100644 nym-wallet/src/pages/bonding/node-settings/index.tsx delete mode 100644 nym-wallet/src/pages/settings/index.ts delete mode 100644 nym-wallet/src/pages/settings/node-settings.tsx diff --git a/nym-wallet/src/pages/bonding/Bonding.tsx b/nym-wallet/src/pages/bonding/Bonding.tsx new file mode 100644 index 0000000000..519b491b20 --- /dev/null +++ b/nym-wallet/src/pages/bonding/Bonding.tsx @@ -0,0 +1,255 @@ +import React, { useContext, useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { FeeDetails } from '@nymproject/types'; +import { TPoolOption } from 'src/components'; +import { Bond } from 'src/components/Bonding/Bond'; +import { BondedMixnode } from 'src/components/Bonding/BondedMixnode'; +import { TBondedMixnodeActions } from 'src/components/Bonding/BondedMixnodeActions'; +import { BondGatewayModal } from 'src/components/Bonding/modals/BondGatewayModal'; +import { BondMixnodeModal } from 'src/components/Bonding/modals/BondMixnodeModal'; +import { ConfirmationDetailProps, ConfirmationDetailsModal } from 'src/components/Bonding/modals/ConfirmationModal'; +import { NodeSettings } from 'src/components/Bonding/modals/NodeSettingsModal'; +import { UnbondModal } from 'src/components/Bonding/modals/UnbondModal'; +import { ErrorModal } from 'src/components/Modals/ErrorModal'; +import { LoadingModal } from 'src/components/Modals/LoadingModal'; +import { AppContext, urls } from 'src/context/main'; +import { isGateway, isMixnode, TBondGatewayArgs, TBondMixNodeArgs } from 'src/types'; +import { BondedGateway } from 'src/components/Bonding/BondedGateway'; +import { RedeemRewardsModal } from 'src/components/Bonding/modals/RedeemRewardsModal'; +import { CompoundRewardsModal } from 'src/components/Bonding/modals/CompoundRewardsModal'; +import { BondingContextProvider, useBondingContext } from '../../context'; +import { Box, Button } from '@mui/material'; + +const Bonding = () => { + const [showModal, setShowModal] = useState< + 'bond-mixnode' | 'bond-gateway' | 'bond-more' | 'unbond' | 'redeem' | 'compound' | 'node-settings' + >(); + const [confirmationDetails, setConfirmationDetails] = useState(); + + const { + network, + clientDetails, + userBalance: { originalVesting }, + } = useContext(AppContext); + + const { + bondedNode, + bondMixnode, + bondGateway, + unbond, + updateMixnode, + redeemRewards, + compoundRewards, + isLoading, + checkOwnership, + } = useBondingContext(); + + const navigate = useNavigate(); + + const handleCloseModal = async () => { + setShowModal(undefined); + await checkOwnership(); + }; + + const handleError = (error: string) => { + setShowModal(undefined); + setConfirmationDetails({ + status: 'error', + title: 'An error occurred', + subtitle: error, + }); + }; + + const handleBondMixnode = async (data: TBondMixNodeArgs, tokenPool: TPoolOption) => { + setShowModal(undefined); + const tx = await bondMixnode(data, tokenPool); + setConfirmationDetails({ + status: 'success', + title: 'Bond successful', + txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, + }); + return undefined; + }; + + const handleBondGateway = async (data: TBondGatewayArgs, tokenPool: TPoolOption) => { + setShowModal(undefined); + const tx = await bondGateway(data, tokenPool); + setConfirmationDetails({ + status: 'success', + title: 'Bond successful', + txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, + }); + }; + + const handleUnbond = async (fee?: FeeDetails) => { + setShowModal(undefined); + const tx = await unbond(fee); + setConfirmationDetails({ + status: 'success', + title: 'Unbond successful', + txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, + }); + }; + + const handleUpdateProfitMargin = async (profitMargin: number, fee?: FeeDetails) => { + setShowModal(undefined); + const tx = await updateMixnode(profitMargin, fee); + setConfirmationDetails({ + status: 'success', + title: 'Profit margin update successful', + txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, + }); + }; + + const handleRedeemReward = async (fee?: FeeDetails) => { + setShowModal(undefined); + const tx = await redeemRewards(fee); + setConfirmationDetails({ + status: 'success', + title: 'Rewards redeemed successfully', + txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, + }); + }; + + const handleCompoundReward = async (fee?: FeeDetails) => { + setShowModal(undefined); + const tx = await compoundRewards(fee); + setConfirmationDetails({ + status: 'success', + title: 'Rewards compounded successfully', + txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, + }); + return undefined; + }; + + const handleBondedMixnodeAction = (action: TBondedMixnodeActions) => { + switch (action) { + case 'bondMore': { + setShowModal('bond-more'); + break; + } + case 'unbond': { + setShowModal('unbond'); + break; + } + case 'redeem': { + setShowModal('redeem'); + break; + } + case 'compound': { + setShowModal('compound'); + break; + } + case 'nodeSettings': { + setShowModal('node-settings'); + break; + } + default: { + return undefined; + } + } + return undefined; + }; + + return ( + + + {!bondedNode && setShowModal('bond-mixnode')} />} + + {bondedNode && isMixnode(bondedNode) && ( + handleBondedMixnodeAction(action)} + /> + )} + + {bondedNode && isGateway(bondedNode) && ( + + )} + {showModal === 'bond-mixnode' && ( + setShowModal('bond-gateway')} + onClose={() => setShowModal(undefined)} + onError={handleError} + /> + )} + + {showModal === 'bond-gateway' && ( + setShowModal('bond-mixnode')} + onClose={() => setShowModal(undefined)} + onError={handleError} + /> + )} + + {showModal === 'unbond' && bondedNode && ( + setShowModal(undefined)} + onConfirm={handleUnbond} + onError={handleError} + /> + )} + + {showModal === 'redeem' && bondedNode && isMixnode(bondedNode) && ( + setShowModal(undefined)} + onConfirm={handleRedeemReward} + onError={handleError} + /> + )} + + {showModal === 'compound' && bondedNode && isMixnode(bondedNode) && ( + setShowModal(undefined)} + onConfirm={handleCompoundReward} + onError={handleError} + /> + )} + + {showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && ( + setShowModal(undefined)} + onError={handleError} + currentPm={bondedNode.profitMargin} + isVesting={Boolean(bondedNode.proxy)} + /> + )} + + {confirmationDetails && confirmationDetails.status === 'success' && ( + { + setConfirmationDetails(undefined); + handleCloseModal(); + }} + /> + )} + + {confirmationDetails && confirmationDetails.status === 'error' && ( + setConfirmationDetails(undefined)} /> + )} + + {isLoading && } + + ); +}; + +export const BondingPage = () => ( + + + +); diff --git a/nym-wallet/src/pages/bonding/BondingPage.stories.tsx b/nym-wallet/src/pages/bonding/BondingPage.stories.tsx index ede7eaa20a..1a2caa1f2e 100644 --- a/nym-wallet/src/pages/bonding/BondingPage.stories.tsx +++ b/nym-wallet/src/pages/bonding/BondingPage.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { BondingPage } from './index'; +import { BondingPage } from './Bonding'; import { MockBondingContextProvider } from '../../context/mocks/bonding'; export default { diff --git a/nym-wallet/src/pages/bonding/index.tsx b/nym-wallet/src/pages/bonding/index.tsx index 519b491b20..1e98989887 100644 --- a/nym-wallet/src/pages/bonding/index.tsx +++ b/nym-wallet/src/pages/bonding/index.tsx @@ -1,255 +1,2 @@ -import React, { useContext, useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { FeeDetails } from '@nymproject/types'; -import { TPoolOption } from 'src/components'; -import { Bond } from 'src/components/Bonding/Bond'; -import { BondedMixnode } from 'src/components/Bonding/BondedMixnode'; -import { TBondedMixnodeActions } from 'src/components/Bonding/BondedMixnodeActions'; -import { BondGatewayModal } from 'src/components/Bonding/modals/BondGatewayModal'; -import { BondMixnodeModal } from 'src/components/Bonding/modals/BondMixnodeModal'; -import { ConfirmationDetailProps, ConfirmationDetailsModal } from 'src/components/Bonding/modals/ConfirmationModal'; -import { NodeSettings } from 'src/components/Bonding/modals/NodeSettingsModal'; -import { UnbondModal } from 'src/components/Bonding/modals/UnbondModal'; -import { ErrorModal } from 'src/components/Modals/ErrorModal'; -import { LoadingModal } from 'src/components/Modals/LoadingModal'; -import { AppContext, urls } from 'src/context/main'; -import { isGateway, isMixnode, TBondGatewayArgs, TBondMixNodeArgs } from 'src/types'; -import { BondedGateway } from 'src/components/Bonding/BondedGateway'; -import { RedeemRewardsModal } from 'src/components/Bonding/modals/RedeemRewardsModal'; -import { CompoundRewardsModal } from 'src/components/Bonding/modals/CompoundRewardsModal'; -import { BondingContextProvider, useBondingContext } from '../../context'; -import { Box, Button } from '@mui/material'; - -const Bonding = () => { - const [showModal, setShowModal] = useState< - 'bond-mixnode' | 'bond-gateway' | 'bond-more' | 'unbond' | 'redeem' | 'compound' | 'node-settings' - >(); - const [confirmationDetails, setConfirmationDetails] = useState(); - - const { - network, - clientDetails, - userBalance: { originalVesting }, - } = useContext(AppContext); - - const { - bondedNode, - bondMixnode, - bondGateway, - unbond, - updateMixnode, - redeemRewards, - compoundRewards, - isLoading, - checkOwnership, - } = useBondingContext(); - - const navigate = useNavigate(); - - const handleCloseModal = async () => { - setShowModal(undefined); - await checkOwnership(); - }; - - const handleError = (error: string) => { - setShowModal(undefined); - setConfirmationDetails({ - status: 'error', - title: 'An error occurred', - subtitle: error, - }); - }; - - const handleBondMixnode = async (data: TBondMixNodeArgs, tokenPool: TPoolOption) => { - setShowModal(undefined); - const tx = await bondMixnode(data, tokenPool); - setConfirmationDetails({ - status: 'success', - title: 'Bond successful', - txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, - }); - return undefined; - }; - - const handleBondGateway = async (data: TBondGatewayArgs, tokenPool: TPoolOption) => { - setShowModal(undefined); - const tx = await bondGateway(data, tokenPool); - setConfirmationDetails({ - status: 'success', - title: 'Bond successful', - txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, - }); - }; - - const handleUnbond = async (fee?: FeeDetails) => { - setShowModal(undefined); - const tx = await unbond(fee); - setConfirmationDetails({ - status: 'success', - title: 'Unbond successful', - txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, - }); - }; - - const handleUpdateProfitMargin = async (profitMargin: number, fee?: FeeDetails) => { - setShowModal(undefined); - const tx = await updateMixnode(profitMargin, fee); - setConfirmationDetails({ - status: 'success', - title: 'Profit margin update successful', - txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, - }); - }; - - const handleRedeemReward = async (fee?: FeeDetails) => { - setShowModal(undefined); - const tx = await redeemRewards(fee); - setConfirmationDetails({ - status: 'success', - title: 'Rewards redeemed successfully', - txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, - }); - }; - - const handleCompoundReward = async (fee?: FeeDetails) => { - setShowModal(undefined); - const tx = await compoundRewards(fee); - setConfirmationDetails({ - status: 'success', - title: 'Rewards compounded successfully', - txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, - }); - return undefined; - }; - - const handleBondedMixnodeAction = (action: TBondedMixnodeActions) => { - switch (action) { - case 'bondMore': { - setShowModal('bond-more'); - break; - } - case 'unbond': { - setShowModal('unbond'); - break; - } - case 'redeem': { - setShowModal('redeem'); - break; - } - case 'compound': { - setShowModal('compound'); - break; - } - case 'nodeSettings': { - setShowModal('node-settings'); - break; - } - default: { - return undefined; - } - } - return undefined; - }; - - return ( - - - {!bondedNode && setShowModal('bond-mixnode')} />} - - {bondedNode && isMixnode(bondedNode) && ( - handleBondedMixnodeAction(action)} - /> - )} - - {bondedNode && isGateway(bondedNode) && ( - - )} - {showModal === 'bond-mixnode' && ( - setShowModal('bond-gateway')} - onClose={() => setShowModal(undefined)} - onError={handleError} - /> - )} - - {showModal === 'bond-gateway' && ( - setShowModal('bond-mixnode')} - onClose={() => setShowModal(undefined)} - onError={handleError} - /> - )} - - {showModal === 'unbond' && bondedNode && ( - setShowModal(undefined)} - onConfirm={handleUnbond} - onError={handleError} - /> - )} - - {showModal === 'redeem' && bondedNode && isMixnode(bondedNode) && ( - setShowModal(undefined)} - onConfirm={handleRedeemReward} - onError={handleError} - /> - )} - - {showModal === 'compound' && bondedNode && isMixnode(bondedNode) && ( - setShowModal(undefined)} - onConfirm={handleCompoundReward} - onError={handleError} - /> - )} - - {showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && ( - setShowModal(undefined)} - onError={handleError} - currentPm={bondedNode.profitMargin} - isVesting={Boolean(bondedNode.proxy)} - /> - )} - - {confirmationDetails && confirmationDetails.status === 'success' && ( - { - setConfirmationDetails(undefined); - handleCloseModal(); - }} - /> - )} - - {confirmationDetails && confirmationDetails.status === 'error' && ( - setConfirmationDetails(undefined)} /> - )} - - {isLoading && } - - ); -}; - -export const BondingPage = () => ( - - - -); +export * from './Bonding'; +export * from './node-settings'; 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 new file mode 100644 index 0000000000..553912c52a --- /dev/null +++ b/nym-wallet/src/pages/bonding/node-settings/general-settings/InfoSettings.tsx @@ -0,0 +1,96 @@ +import React, { useContext, useEffect, useState } from 'react'; +import { Box, Button, Divider, Typography, TextField, Grid } from '@mui/material'; + +const ModifiedTextField = ({ field }: { field: { id: string; title: string; value: string } }) => { + return ( + + {field.title} + console.log(`Field ${field.id} has change`, e.target.value)} + autoFocus + fullWidth + /> + + ); +}; + +export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => { + const [valueChanged, setValueChanged] = useState(false); + const [mixPortValue, setMixPortValue] = useState('1789'); + + useEffect(() => { + console.log(Object.entries(portSettings)); + }, []); + const portSettings = [ + { id: 'mixPort', title: 'Mix port', value: '1789' }, + { id: 'verlocPort', title: 'Verloc Port', value: '1790' }, + { id: 'httpPort', title: 'HTTP Port', value: '8000' }, + ]; + + const hostSettings = [{ id: 'host', title: 'Host', value: '95.216.92.229' }]; + const versionSettings = [{ id: 'version', title: 'Version', value: '95.216.92.229' }]; + return ( + + + + + Port + Change profit margin of your node + + + {portSettings.map((item) => ( + + console.log(`Field ${item.id} has change`, e.target.value)} + autoFocus + fullWidth + /> + + ))} + + + + + + Host + Lock wallet after certain time + + + {hostSettings.map((item) => ( + + ))} + + + + + + Version + Lock wallet after certain time + + + {versionSettings.map((item) => ( + + ))} + + + + + + + ); +}; 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 new file mode 100644 index 0000000000..dcce36bf27 --- /dev/null +++ b/nym-wallet/src/pages/bonding/node-settings/general-settings/ParametersSettings.tsx @@ -0,0 +1,62 @@ +import React, { useContext, useEffect } from 'react'; +import { Alert, Grid, Typography } from '@mui/material'; +import { Link } from '@nymproject/react/link/Link'; +import { NymCard, ClientAddress } from '../../../../components'; +import { AppContext, urls } from '../../../../context/main'; + +export const ParametersSettings = ({ + onChange, + onSaveChanges, +}: { + onChange: () => void; + onSaveChanges: () => void; +}) => { + const { userBalance, clientDetails, network } = useContext(AppContext); + + useEffect(() => { + userBalance.fetchBalance(); + }, []); + + return ( + } + > + + + {userBalance.error && ( + + {userBalance.error} + + )} + {!userBalance.error && ( + (theme.palette.mode === 'light' ? '600' : '400'), + fontSize: 28, + }} + variant="h5" + > + {userBalance.balance?.printable_balance} + + )} + + {network && ( + + + + )} + + + ); +}; 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 new file mode 100644 index 0000000000..5abf66ba07 --- /dev/null +++ b/nym-wallet/src/pages/bonding/node-settings/general-settings/index.tsx @@ -0,0 +1,38 @@ +import React, { useContext, useEffect, useState } from 'react'; +import { Box, Button, Divider, Grid } from '@mui/material'; +import { InfoSettings } from './InfoSettings'; +import { ParametersSettings } from './ParametersSettings'; +import { AppContext } from '../../../../context/main'; + +const nodeGeneralNav = ['Info', 'Parameters']; + +export const NodeGeneralSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => { + const [settingsCard, setSettingsCard] = useState(nodeGeneralNav[0]); + + const { userBalance } = useContext(AppContext); + + useEffect(() => { + console.log('a'); + }, [userBalance]); + + return ( + + + + {nodeGeneralNav.map((item) => ( + + ))} + + + {settingsCard === nodeGeneralNav[0] && console.log('saving...')} />} + {settingsCard === nodeGeneralNav[1] &&

bye

} + + + ); +}; diff --git a/nym-wallet/src/pages/bonding/node-settings/index.tsx b/nym-wallet/src/pages/bonding/node-settings/index.tsx new file mode 100644 index 0000000000..18245bb6ca --- /dev/null +++ b/nym-wallet/src/pages/bonding/node-settings/index.tsx @@ -0,0 +1,71 @@ +import React, { useContext, useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { Box, Typography, Stack, IconButton, Toolbar, Button, Divider } from '@mui/material'; +import { Close } from '@mui/icons-material'; +import { Node as NodeIcon } from 'src/svg-icons/node'; +import { NymCard } from '../../../components'; +import { PageLayout } from '../../../layouts'; +// import { AppContext } from '../../context/main'; + +import { NodeGeneralSettings } from './general-settings'; +// import { NodeParametersCard } from './InfoSettings'; +// import { UnbondModal } from '../../modals'; + +const nodeSettingsNav = ['General', 'Unbond']; + +export const NodeSettingsPage = () => { + const [settingsCard, setSettingsCard] = useState(nodeSettingsNav[0]); + + const navigate = useNavigate(); + + return ( + + + + + + + Node Settings + + + navigate('/bonding')} + size="small" + sx={{ + color: 'text.primary', + }} + > + + + + + {nodeSettingsNav.map((item) => ( + + ))} + + + } + > + + {settingsCard === nodeSettingsNav[0] && ( + console.log('save changes')} /> + )} + {settingsCard === nodeSettingsNav[1] && ( + console.log('save changes')} /> + )} + + + ); +}; diff --git a/nym-wallet/src/pages/index.ts b/nym-wallet/src/pages/index.ts index 12cb6c092d..2976b7890a 100644 --- a/nym-wallet/src/pages/index.ts +++ b/nym-wallet/src/pages/index.ts @@ -5,4 +5,3 @@ export * from './bonding'; export * from './delegation'; export * from './internal-docs'; export * from './unbond'; -export * from './settings'; diff --git a/nym-wallet/src/pages/settings/index.ts b/nym-wallet/src/pages/settings/index.ts deleted file mode 100644 index 162957508f..0000000000 --- a/nym-wallet/src/pages/settings/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './node-settings'; diff --git a/nym-wallet/src/pages/settings/node-settings.tsx b/nym-wallet/src/pages/settings/node-settings.tsx deleted file mode 100644 index 9830dbc0b4..0000000000 --- a/nym-wallet/src/pages/settings/node-settings.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useContext, useEffect, useState } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { Box, Button } from '@mui/material'; -import { AppContext } from '../../context/main'; - -import { PageLayout } from '../../layouts'; - -export const NodeSettingsPage = () => { - // const [showTransferModal, setShowTransferModal] = useState(false); - // const [showVestingCard, setShowVestingCard] = useState(false); - - const { userBalance } = useContext(AppContext); - - const navigate = useNavigate(); - - useEffect(() => { - const { originalVesting, currentVestingPeriod, tokenAllocation } = userBalance; - // if ( - // originalVesting && - // currentVestingPeriod === 'After' && - // tokenAllocation?.locked === '0' && - // tokenAllocation?.vesting === '0' && - // tokenAllocation?.spendable === '0' - // ) { - // setShowVestingCard(false); - // } else if (originalVesting) { - // setShowVestingCard(true); - // } - }, [userBalance]); - - const handleShowTransferModal = async () => { - await userBalance.refreshBalances(); - // setShowTransferModal(true); - }; - - return ( - - -

hello

- - - - ); -}; From acffd496eda72efdef4854086fdf807ca80e2a10 Mon Sep 17 00:00:00 2001 From: Gala Date: Thu, 18 Aug 2022 17:07:59 +0200 Subject: [PATCH 04/21] nav styles --- .../general-settings/InfoSettings.tsx | 120 +++++++++++------- .../node-settings/general-settings/index.tsx | 12 +- 2 files changed, 81 insertions(+), 51 deletions(-) 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 553912c52a..842380a063 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,21 +1,6 @@ import React, { useContext, useEffect, useState } from 'react'; import { Box, Button, Divider, Typography, TextField, Grid } from '@mui/material'; -const ModifiedTextField = ({ field }: { field: { id: string; title: string; value: string } }) => { - return ( - - {field.title} - console.log(`Field ${field.id} has change`, e.target.value)} - autoFocus - fullWidth - /> - - ); -}; - export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => { const [valueChanged, setValueChanged] = useState(false); const [mixPortValue, setMixPortValue] = useState('1789'); @@ -34,20 +19,19 @@ export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) = return ( - + - Port - Change profit margin of your node + Port + (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'), + }} + > + Change profit margin of your node + - + {portSettings.map((item) => ( void }) = - - - Host - Lock wallet after certain time - - + + + Host + (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'), + }} + > + Lock wallet after certain time + + + {hostSettings.map((item) => ( - + + console.log(`Field ${item.id} has change`, e.target.value)} + autoFocus + fullWidth + /> + ))} - - + + - - - Version - Lock wallet after certain time - - + + + Version + (t.palette.mode === 'light' ? t.palette.nym.text.muted : 'text.primary'), + }} + > + Lock wallet after certain time + + + {versionSettings.map((item) => ( - + + console.log(`Field ${item.id} has change`, e.target.value)} + autoFocus + fullWidth + /> + ))} - - + + - + + + ); 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 5abf66ba07..34c4a8c456 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,7 +1,6 @@ import React, { useContext, useEffect, useState } from 'react'; -import { Box, Button, Divider, Grid } from '@mui/material'; +import { Box, Button, Divider, Grid, withStyles } from '@mui/material'; import { InfoSettings } from './InfoSettings'; -import { ParametersSettings } from './ParametersSettings'; import { AppContext } from '../../../../context/main'; const nodeGeneralNav = ['Info', 'Parameters']; @@ -22,7 +21,14 @@ export const NodeGeneralSettings = ({ onSaveChanges }: { onSaveChanges: () => vo {nodeGeneralNav.map((item) => ( + - + ); }; 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 34c4a8c456..3ebe4b1b98 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,6 +1,7 @@ import React, { useContext, useEffect, useState } from 'react'; import { Box, Button, Divider, Grid, withStyles } from '@mui/material'; import { InfoSettings } from './InfoSettings'; +import { ParametersSettings } from './ParametersSettings'; import { AppContext } from '../../../../context/main'; const nodeGeneralNav = ['Info', 'Parameters']; @@ -22,6 +23,7 @@ export const NodeGeneralSettings = ({ onSaveChanges }: { onSaveChanges: () => vo ))} From c6cd7879506381688ce2d5587623944e46992c64 Mon Sep 17 00:00:00 2001 From: Gala Date: Fri, 19 Aug 2022 18:06:04 +0200 Subject: [PATCH 06/21] adding unbonding modal --- .../src/components/Bonding/BondedMixnode.tsx | 6 +- nym-wallet/src/pages/bonding/Bonding.tsx | 18 ++-- .../node-settings/general-settings/index.tsx | 9 +- .../src/pages/bonding/node-settings/index.tsx | 89 +++++++++++++++---- 4 files changed, 93 insertions(+), 29 deletions(-) diff --git a/nym-wallet/src/components/Bonding/BondedMixnode.tsx b/nym-wallet/src/components/Bonding/BondedMixnode.tsx index d602eeacb8..6848c00bb7 100644 --- a/nym-wallet/src/components/Bonding/BondedMixnode.tsx +++ b/nym-wallet/src/components/Bonding/BondedMixnode.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useNavigate } from 'react-router-dom'; import { Box, Button, Stack, Typography } from '@mui/material'; import { Link } from '@nymproject/react/link/Link'; import { TBondedMixnode, urls } from 'src/context'; @@ -55,8 +56,11 @@ export const BondedMixnode = ({ network?: Network; onActionSelect: (action: TBondedMixnodeActions) => void; }) => { + const navigate = useNavigate(); + const { name, stake, bond, stakeSaturation, profitMargin, operatorRewards, delegators, status, identityKey } = mixnode; + const cells: Cell[] = [ { cell: `${stake.amount} ${stake.denom}`, @@ -117,7 +121,7 @@ export const BondedMixnode = ({ {!bondedNode && setShowModal('bond-mixnode')} />} {bondedNode && isMixnode(bondedNode) && ( 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 3ebe4b1b98..3c7879f359 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,20 +1,13 @@ import React, { useContext, useEffect, useState } from 'react'; -import { Box, Button, Divider, Grid, withStyles } from '@mui/material'; +import { Box, Button, Divider, Grid } from '@mui/material'; import { InfoSettings } from './InfoSettings'; import { ParametersSettings } from './ParametersSettings'; -import { AppContext } from '../../../../context/main'; const nodeGeneralNav = ['Info', 'Parameters']; export const NodeGeneralSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => { const [settingsCard, setSettingsCard] = useState(nodeGeneralNav[0]); - const { userBalance } = useContext(AppContext); - - useEffect(() => { - console.log('a'); - }, [userBalance]); - return ( diff --git a/nym-wallet/src/pages/bonding/node-settings/index.tsx b/nym-wallet/src/pages/bonding/node-settings/index.tsx index daaed7aec2..1ae8393016 100644 --- a/nym-wallet/src/pages/bonding/node-settings/index.tsx +++ b/nym-wallet/src/pages/bonding/node-settings/index.tsx @@ -1,23 +1,64 @@ import React, { useContext, useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { Box, Typography, Stack, IconButton, Toolbar, Button, Divider } from '@mui/material'; +import { FeeDetails } from '@nymproject/types'; +import { Box, Typography, Stack, Toolbar, Button, Divider } from '@mui/material'; import { Close } from '@mui/icons-material'; +import { ConfirmationDetailProps, ConfirmationDetailsModal } from 'src/components/Bonding/modals/ConfirmationModal'; import { Node as NodeIcon } from 'src/svg-icons/node'; import { NymCard } from '../../../components'; import { PageLayout } from '../../../layouts'; -// import { AppContext } from '../../context/main'; +import { useBondingContext, TBondedMixnode } from '../../../context'; +import { AppContext, urls } from 'src/context/main'; import { NodeGeneralSettings } from './general-settings'; -// import { NodeParametersCard } from './InfoSettings'; -// import { UnbondModal } from '../../modals'; +import { UnbondModal } from '../../../components/Bonding/modals/UnbondModal'; const nodeSettingsNav = ['General', 'Unbond']; +// 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 = () => { const [settingsCard, setSettingsCard] = useState(nodeSettingsNav[0]); + const [confirmationDetails, setConfirmationDetails] = useState(); + + const { + network, + userBalance: { originalVesting }, + } = useContext(AppContext); + + const { bondedNode, unbond } = useBondingContext(); const navigate = useNavigate(); + const handleUnbond = async (fee?: FeeDetails) => { + navigate('/bonding'); + const tx = await unbond(fee); + setConfirmationDetails({ + status: 'success', + title: 'Unbond successful', + txUrl: `${urls(network).blockExplorer}/transaction/${tx?.transaction_hash}`, + }); + }; + + const handleError = (error: string) => { + navigate('/bonding'); + setConfirmationDetails({ + status: 'error', + title: 'An error occurred', + subtitle: error, + }); + }; + return ( { Node Settings - navigate('/bonding')} - size="small" - sx={{ - color: 'text.primary', - }} - > - - {nodeSettingsNav.map((item) => ( @@ -74,13 +106,40 @@ export const NodeSettingsPage = () => { } + Action={ + + } > {settingsCard === nodeSettingsNav[0] && ( console.log('save changes')} /> )} - {settingsCard === nodeSettingsNav[1] && ( - console.log('save changes')} /> + {settingsCard === nodeSettingsNav[1] && bondedNode && ( + setSettingsCard(nodeSettingsNav[0])} + onConfirm={handleUnbond} + onError={handleError} + /> + )} + {confirmationDetails && confirmationDetails.status === 'success' && ( + { + setConfirmationDetails(undefined); + navigate('/bonding'); + }} + /> )} From 746795b7ce53d5bba98034adaa6e0208a62c9e65 Mon Sep 17 00:00:00 2001 From: Gala Date: Tue, 30 Aug 2022 12:49:50 +0200 Subject: [PATCH 07/21] mook bonded node --- nym-wallet/src/pages/bonding/Bonding.tsx | 32 ++++++++++--------- .../src/pages/bonding/node-settings/index.tsx | 1 + 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/nym-wallet/src/pages/bonding/Bonding.tsx b/nym-wallet/src/pages/bonding/Bonding.tsx index fd0b060e3b..cef7ea4460 100644 --- a/nym-wallet/src/pages/bonding/Bonding.tsx +++ b/nym-wallet/src/pages/bonding/Bonding.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useState } from 'react'; import { FeeDetails } from '@nymproject/types'; import { TPoolOption } from 'src/components'; import { Bond } from 'src/components/Bonding/Bond'; @@ -16,9 +16,23 @@ 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 { 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' @@ -43,18 +57,6 @@ const Bonding = () => { checkOwnership, } = useBondingContext(); - // 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 handleCloseModal = async () => { setShowModal(undefined); await checkOwnership(); @@ -226,11 +228,11 @@ const Bonding = () => { {showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && ( setShowModal(undefined)} onError={handleError} - currentPm={bondedNode.profitMargin} - isVesting={Boolean(bondedNode.proxy)} /> )} diff --git a/nym-wallet/src/pages/bonding/node-settings/index.tsx b/nym-wallet/src/pages/bonding/node-settings/index.tsx index 1ae8393016..3f21c49745 100644 --- a/nym-wallet/src/pages/bonding/node-settings/index.tsx +++ b/nym-wallet/src/pages/bonding/node-settings/index.tsx @@ -15,6 +15,7 @@ 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', From 9a45f15ba4e9a523778e9cacddb19f7d0c58b4a3 Mon Sep 17 00:00:00 2001 From: Gala Date: Tue, 30 Aug 2022 16:49:07 +0200 Subject: [PATCH 08/21] wip --- nym-wallet/src/pages/bonding/Bonding.tsx | 28 +++---- .../general-settings/InfoSettings.tsx | 84 +++++++++++++------ .../src/pages/bonding/node-settings/index.tsx | 28 +++---- nym-wallet/src/theme/theme.tsx | 10 +++ 4 files changed, 96 insertions(+), 54 deletions(-) diff --git a/nym-wallet/src/pages/bonding/Bonding.tsx b/nym-wallet/src/pages/bonding/Bonding.tsx index cef7ea4460..28e39fd6e2 100644 --- a/nym-wallet/src/pages/bonding/Bonding.tsx +++ b/nym-wallet/src/pages/bonding/Bonding.tsx @@ -21,17 +21,17 @@ import { BondingContextProvider, useBondingContext, TBondedMixnode } from '../.. 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 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< @@ -164,11 +164,11 @@ const Bonding = () => { return ( - {!bondedNode && setShowModal('bond-mixnode')} />} + {!bondedMixnodeMock && setShowModal('bond-mixnode')} />} - {bondedNode && isMixnode(bondedNode) && ( + {bondedMixnodeMock && isMixnode(bondedMixnodeMock) && ( 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 842380a063..2b9621cc8e 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,26 +1,61 @@ import React, { useContext, useEffect, useState } from 'react'; import { Box, Button, Divider, Typography, TextField, Grid } from '@mui/material'; -export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => { - const [valueChanged, setValueChanged] = useState(false); - const [mixPortValue, setMixPortValue] = useState('1789'); +type TSettingItem = { + id: string; + title: string; + value: string; +}; - useEffect(() => { - console.log(Object.entries(portSettings)); - }, []); - const portSettings = [ +type TDefaultSettings = { + portSettings: TSettingItem[]; + hostSettings: TSettingItem[]; + versionSettings: TSettingItem[]; +}; + +const defaultSettings: TDefaultSettings = { + portSettings: [ { id: 'mixPort', title: 'Mix port', value: '1789' }, { id: 'verlocPort', title: 'Verloc Port', value: '1790' }, { id: 'httpPort', title: 'HTTP Port', value: '8000' }, - ]; + ], + hostSettings: [{ id: 'host', title: 'Host', value: '95.216.92.229' }], + versionSettings: [{ id: 'version', title: 'Version', value: '95.216.92.229' }], +}; - const hostSettings = [{ id: 'host', title: 'Host', value: '95.216.92.229' }]; - const versionSettings = [{ id: 'version', title: 'Version', value: '95.216.92.229' }]; +export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => { + const [valueChanged, setValueChanged] = useState(false); + const [settingsValue, setSettingsValue] = useState(defaultSettings); + + const handleValueChanged = (value: string, id: string) => { + settingsValue?.portSettings?.map((item) => { + console.log(item.id === id, defaultSettings); + if (item.id === id) { + const newItem = { + id: item.id, + title: item.title, + value: value, + }; + const updatedObject = { + portSettings: newItem, + }; + console.log('settingsValue', settingsValue, item); + + setSettingsValue((settingsValue) => ({ + ...settingsValue, + ...updatedObject, + })); + // item.value = value; + } + }); + setValueChanged(true); + console.log(value, id); + }; return ( - + - + Port void }) = - {portSettings.map((item) => ( - + {settingsValue.portSettings.map((item) => ( + console.log(`Field ${item.id} has change`, e.target.value)} - autoFocus + onChange={(e) => handleValueChanged(e.target.value, item.id)} fullWidth /> @@ -48,7 +82,7 @@ export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) = - + Host void }) = - {hostSettings.map((item) => ( - + {settingsValue.hostSettings.map((item) => ( + console.log(`Field ${item.id} has change`, e.target.value)} - autoFocus + onChange={(e) => handleValueChanged(e.target.value, item.id)} fullWidth /> @@ -76,7 +109,7 @@ export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) = - + Version void }) = - {versionSettings.map((item) => ( - + {settingsValue.versionSettings.map((item) => ( + console.log(`Field ${item.id} has change`, e.target.value)} - autoFocus + onChange={(e) => handleValueChanged(e.target.value, item.id)} fullWidth /> diff --git a/nym-wallet/src/pages/bonding/node-settings/index.tsx b/nym-wallet/src/pages/bonding/node-settings/index.tsx index 3f21c49745..a36c79a24d 100644 --- a/nym-wallet/src/pages/bonding/node-settings/index.tsx +++ b/nym-wallet/src/pages/bonding/node-settings/index.tsx @@ -16,17 +16,17 @@ 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', -// }; +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 = () => { const [settingsCard, setSettingsCard] = useState(nodeSettingsNav[0]); @@ -81,7 +81,7 @@ export const NodeSettingsPage = () => { - + {nodeSettingsNav.map((item) => ( + { + await setOpenConfirmationModal(false); + }} + buttonFullWidth + sx={{ + width: '450px', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }} + headerStyles={{ + width: '100%', + mb: 1, + textAlign: 'center', + color: 'info.dark', + fontSize: 16, + textTransform: 'capitalize', + }} + subHeaderStyles={{ + width: '100%', + mb: 1, + textAlign: 'center', + color: 'main', + fontSize: 14, + 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 f4ae931f86..8e0e8fb6d0 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,6 +1,8 @@ import { useEffect, useState } from 'react'; import { Box, Button, Divider, Typography, TextField, InputAdornment, Grid } from '@mui/material'; +import { SimpleModal } from '../../../../components/Modals/SimpleModal'; + type TSettingItem = { id: string; title: string; @@ -10,8 +12,9 @@ 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 = ({ onSaveChanges }: { onSaveChanges: () => void }) => { +export const ParametersSettings = () => { const [buttonActive, setButtonActive] = useState(false); + const [openConfirmationModal, setOpenConfirmationModal] = useState(false); const [profitMargin, setProfitMargin] = useState(currentProfitMargin); const [operatorCost, setOperatorCost] = useState(currentOperatorCost); @@ -101,13 +104,43 @@ export const ParametersSettings = ({ onSaveChanges }: { onSaveChanges: () => voi size="large" variant="contained" disabled={!buttonActive} - onClick={onSaveChanges} + onClick={() => setOpenConfirmationModal(true)} sx={{ m: 3, width: '320px' }} > Save all changes + { + await setOpenConfirmationModal(false); + }} + buttonFullWidth + sx={{ + width: '320px', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }} + headerStyles={{ + width: '100%', + mb: 1, + textAlign: 'center', + color: 'info.dark', + fontSize: 16, + textTransform: 'capitalize', + }} + subHeaderStyles={{ + 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 0f08a97545..4562f2729d 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 @@ -5,7 +5,7 @@ import { ParametersSettings } from './ParametersSettings'; const nodeGeneralNav = ['Info', 'Parameters']; -export const NodeGeneralSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => { +export const NodeGeneralSettings = () => { const [settingsCard, setSettingsCard] = useState(nodeGeneralNav[0]); return ( @@ -32,8 +32,8 @@ export const NodeGeneralSettings = ({ onSaveChanges }: { onSaveChanges: () => vo ))} - {settingsCard === nodeGeneralNav[0] && console.log('saving...')} />} - {settingsCard === nodeGeneralNav[1] && console.log('saving...')} />} + {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 a36c79a24d..8392283a0c 100644 --- a/nym-wallet/src/pages/bonding/node-settings/index.tsx +++ b/nym-wallet/src/pages/bonding/node-settings/index.tsx @@ -119,9 +119,7 @@ export const NodeSettingsPage = () => { } > - {settingsCard === nodeSettingsNav[0] && ( - console.log('save changes')} /> - )} + {settingsCard === nodeSettingsNav[0] && } {settingsCard === nodeSettingsNav[1] && bondedMixnodeMock && ( {} - interface Palette extends NymPaletteAndNymWalletPalette {} - interface PaletteOptions extends NymPaletteAndNymWalletPaletteOptions {} + interface Theme extends NymTheme { } + interface ThemeOptions extends Partial { } + interface Palette extends NymPaletteAndNymWalletPalette { } + interface PaletteOptions extends NymPaletteAndNymWalletPaletteOptions { } } diff --git a/nym-wallet/src/theme/theme.tsx b/nym-wallet/src/theme/theme.tsx index db6fdb17b3..ae4b621042 100644 --- a/nym-wallet/src/theme/theme.tsx +++ b/nym-wallet/src/theme/theme.tsx @@ -23,6 +23,7 @@ const nymPalette: NymPalette = { highlight: '#FB6E4E', success: '#21D073', info: '#60D7EF', + infoDark: '#514EFB', fee: '#967FF0', background: { light: '#F4F6F8', dark: '#1D2125' }, text: { @@ -122,6 +123,7 @@ const variantToMUIPalette = (variant: NymPaletteVariant): PaletteOptions => ({ }, info: { main: nymPalette.info, + dark: nymPalette.infoDark, }, background: { default: variant.background.main, From 4304ffcf3cad2786e86db6779873d5b71575894b Mon Sep 17 00:00:00 2001 From: Gala Date: Wed, 31 Aug 2022 11:44:23 +0200 Subject: [PATCH 12/21] adding notification span --- .../node-settings/general-settings/InfoSettings.tsx | 12 +++++++++++- .../general-settings/ParametersSettings.tsx | 12 +++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) 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 bd312a5a51..d512d3039f 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,5 +1,6 @@ import { useEffect, useState } from 'react'; import { Box, Button, Divider, Typography, TextField, Grid } from '@mui/material'; +import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import { SimpleModal } from '../../../../components/Modals/SimpleModal'; @@ -48,7 +49,16 @@ export const InfoSettings = () => { }, [valueChanged, mixPort, verloc, httpPort, host, version]); return ( - + + {buttonActive && ( + + + + Your changes will be ONLY saved on the display. Remember to change + the values on your node’s config file too. + + + )} 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 8e0e8fb6d0..0c53d6d999 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 } from '@mui/material'; +import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; import { SimpleModal } from '../../../../components/Modals/SimpleModal'; @@ -25,7 +26,16 @@ export const ParametersSettings = () => { }, [profitMargin, operatorCost]); return ( - + + {buttonActive && ( + + + + Your changes will be ONLY saved on the display. Remember to change + the values on your node’s config file too. + + + )} From 414c86b5000319157ef999e2407980a4868f6a12 Mon Sep 17 00:00:00 2001 From: Gala Date: Wed, 31 Aug 2022 12:13:40 +0200 Subject: [PATCH 13/21] fix button width --- nym-wallet/src/components/Modals/SimpleModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nym-wallet/src/components/Modals/SimpleModal.tsx b/nym-wallet/src/components/Modals/SimpleModal.tsx index aefedb3239..59013d048b 100644 --- a/nym-wallet/src/components/Modals/SimpleModal.tsx +++ b/nym-wallet/src/components/Modals/SimpleModal.tsx @@ -70,7 +70,7 @@ export const SimpleModal: React.FC<{ {children} {(onOk || onBack) && ( - + {onBack && } {onOk && ( - ))} - + minWidth: 'none', + fontSize: 16, + }, + '& button:hover': { + color: theme.palette.nym.highlight, + opacity: 1, + }, + }} + tabIndicatorStyles={{ height: 4, bottom: '6px', borderRadius: '2px' }} + /> + } Action={ @@ -101,14 +107,9 @@ export const NodeSettings = () => { } > - {settingsCard === nodeSettingsNav[0] && bondedNode && } - {settingsCard === nodeSettingsNav[1] && bondedNode && ( - setSettingsCard(nodeSettingsNav[0])} - onConfirm={handleUnbond} - onError={handleError} - /> + {value === 0 && bondedNode && } + {value === 1 && bondedNode && ( + setValue(0)} onConfirm={handleUnbond} onError={handleError} /> )} {confirmationDetails && confirmationDetails.status === 'success' && (