settings general page
This commit is contained in:
Gala
@@ -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<ConfirmationDetailProps>();
|
||||
|
||||
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 (
|
||||
<Box sx={{ mt: 4 }}>
|
||||
<Button onClick={() => navigate('/bonding/node-settings')}>Open Settings</Button>
|
||||
{!bondedNode && <Bond disabled={isLoading} onBond={() => setShowModal('bond-mixnode')} />}
|
||||
|
||||
{bondedNode && isMixnode(bondedNode) && (
|
||||
<BondedMixnode
|
||||
mixnode={bondedNode}
|
||||
network={network}
|
||||
onActionSelect={(action) => handleBondedMixnodeAction(action)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{bondedNode && isGateway(bondedNode) && (
|
||||
<BondedGateway gateway={bondedNode} onActionSelect={handleBondedMixnodeAction} network={network} />
|
||||
)}
|
||||
{showModal === 'bond-mixnode' && (
|
||||
<BondMixnodeModal
|
||||
denom={clientDetails?.display_mix_denom || 'nym'}
|
||||
hasVestingTokens={Boolean(originalVesting)}
|
||||
onBondMixnode={handleBondMixnode}
|
||||
onSelectNodeType={() => setShowModal('bond-gateway')}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'bond-gateway' && (
|
||||
<BondGatewayModal
|
||||
denom={clientDetails?.display_mix_denom || 'nym'}
|
||||
hasVestingTokens={Boolean(originalVesting)}
|
||||
onBondGateway={handleBondGateway}
|
||||
onSelectNodeType={() => setShowModal('bond-mixnode')}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'unbond' && bondedNode && (
|
||||
<UnbondModal
|
||||
node={bondedNode}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onConfirm={handleUnbond}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'redeem' && bondedNode && isMixnode(bondedNode) && (
|
||||
<RedeemRewardsModal
|
||||
node={bondedNode}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onConfirm={handleRedeemReward}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'compound' && bondedNode && isMixnode(bondedNode) && (
|
||||
<CompoundRewardsModal
|
||||
node={bondedNode}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onConfirm={handleCompoundReward}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && (
|
||||
<NodeSettings
|
||||
onConfirm={handleUpdateProfitMargin}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onError={handleError}
|
||||
currentPm={bondedNode.profitMargin}
|
||||
isVesting={Boolean(bondedNode.proxy)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{confirmationDetails && confirmationDetails.status === 'success' && (
|
||||
<ConfirmationDetailsModal
|
||||
title={confirmationDetails.title}
|
||||
subtitle={confirmationDetails.subtitle || 'This operation can take up to one hour to process'}
|
||||
status={confirmationDetails.status}
|
||||
txUrl={confirmationDetails.txUrl}
|
||||
onClose={() => {
|
||||
setConfirmationDetails(undefined);
|
||||
handleCloseModal();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{confirmationDetails && confirmationDetails.status === 'error' && (
|
||||
<ErrorModal open message={confirmationDetails.subtitle} onClose={() => setConfirmationDetails(undefined)} />
|
||||
)}
|
||||
|
||||
{isLoading && <LoadingModal />}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const BondingPage = () => (
|
||||
<BondingContextProvider>
|
||||
<Bonding />
|
||||
</BondingContextProvider>
|
||||
);
|
||||
@@ -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 {
|
||||
|
||||
@@ -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<ConfirmationDetailProps>();
|
||||
|
||||
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 (
|
||||
<Box sx={{ mt: 4 }}>
|
||||
<Button onClick={() => navigate('/bonding/node-settings')}>Open Settings</Button>
|
||||
{!bondedNode && <Bond disabled={isLoading} onBond={() => setShowModal('bond-mixnode')} />}
|
||||
|
||||
{bondedNode && isMixnode(bondedNode) && (
|
||||
<BondedMixnode
|
||||
mixnode={bondedNode}
|
||||
network={network}
|
||||
onActionSelect={(action) => handleBondedMixnodeAction(action)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{bondedNode && isGateway(bondedNode) && (
|
||||
<BondedGateway gateway={bondedNode} onActionSelect={handleBondedMixnodeAction} network={network} />
|
||||
)}
|
||||
{showModal === 'bond-mixnode' && (
|
||||
<BondMixnodeModal
|
||||
denom={clientDetails?.display_mix_denom || 'nym'}
|
||||
hasVestingTokens={Boolean(originalVesting)}
|
||||
onBondMixnode={handleBondMixnode}
|
||||
onSelectNodeType={() => setShowModal('bond-gateway')}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'bond-gateway' && (
|
||||
<BondGatewayModal
|
||||
denom={clientDetails?.display_mix_denom || 'nym'}
|
||||
hasVestingTokens={Boolean(originalVesting)}
|
||||
onBondGateway={handleBondGateway}
|
||||
onSelectNodeType={() => setShowModal('bond-mixnode')}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'unbond' && bondedNode && (
|
||||
<UnbondModal
|
||||
node={bondedNode}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onConfirm={handleUnbond}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'redeem' && bondedNode && isMixnode(bondedNode) && (
|
||||
<RedeemRewardsModal
|
||||
node={bondedNode}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onConfirm={handleRedeemReward}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'compound' && bondedNode && isMixnode(bondedNode) && (
|
||||
<CompoundRewardsModal
|
||||
node={bondedNode}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onConfirm={handleCompoundReward}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showModal === 'node-settings' && bondedNode && isMixnode(bondedNode) && (
|
||||
<NodeSettings
|
||||
onConfirm={handleUpdateProfitMargin}
|
||||
onClose={() => setShowModal(undefined)}
|
||||
onError={handleError}
|
||||
currentPm={bondedNode.profitMargin}
|
||||
isVesting={Boolean(bondedNode.proxy)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{confirmationDetails && confirmationDetails.status === 'success' && (
|
||||
<ConfirmationDetailsModal
|
||||
title={confirmationDetails.title}
|
||||
subtitle={confirmationDetails.subtitle || 'This operation can take up to one hour to process'}
|
||||
status={confirmationDetails.status}
|
||||
txUrl={confirmationDetails.txUrl}
|
||||
onClose={() => {
|
||||
setConfirmationDetails(undefined);
|
||||
handleCloseModal();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{confirmationDetails && confirmationDetails.status === 'error' && (
|
||||
<ErrorModal open message={confirmationDetails.subtitle} onClose={() => setConfirmationDetails(undefined)} />
|
||||
)}
|
||||
|
||||
{isLoading && <LoadingModal />}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const BondingPage = () => (
|
||||
<BondingContextProvider>
|
||||
<Bonding />
|
||||
</BondingContextProvider>
|
||||
);
|
||||
export * from './Bonding';
|
||||
export * from './node-settings';
|
||||
|
||||
@@ -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 (
|
||||
<Box>
|
||||
<Typography>{field.title}</Typography>
|
||||
<TextField
|
||||
type="input"
|
||||
value={field.value}
|
||||
onChange={(e) => console.log(`Field ${field.id} has change`, e.target.value)}
|
||||
autoFocus
|
||||
fullWidth
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const InfoSettings = ({ onSaveChanges }: { onSaveChanges: () => void }) => {
|
||||
const [valueChanged, setValueChanged] = useState<boolean>(false);
|
||||
const [mixPortValue, setMixPortValue] = useState<string>('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 (
|
||||
<Box sx={{ width: 0.78 }}>
|
||||
<Grid container direction="column">
|
||||
<Grid
|
||||
item
|
||||
container
|
||||
direction="row"
|
||||
alignItems="left"
|
||||
justifyContent="space-between"
|
||||
flexWrap="nowrap"
|
||||
padding={3}
|
||||
>
|
||||
<Grid item direction="column">
|
||||
<Typography>Port</Typography>
|
||||
<Typography>Change profit margin of your node</Typography>
|
||||
</Grid>
|
||||
<Grid spacing={3} item container alignItems="center" maxWidth="320px">
|
||||
{portSettings.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>
|
||||
</Grid>
|
||||
<Divider flexItem />
|
||||
<Box display="flex">
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Typography>Host</Typography>
|
||||
<Typography>Lock wallet after certain time</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
{hostSettings.map((item) => (
|
||||
<ModifiedTextField field={item} />
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Divider flexItem />
|
||||
<Box display="flex">
|
||||
<Box display="flex" flexDirection="column">
|
||||
<Typography>Version</Typography>
|
||||
<Typography>Lock wallet after certain time</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
{versionSettings.map((item) => (
|
||||
<ModifiedTextField field={item} />
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Divider flexItem />
|
||||
<Button variant="contained" disabled={!valueChanged} onClick={onSaveChanges}>
|
||||
Save all changes
|
||||
</Button>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -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 (
|
||||
<NymCard
|
||||
title="Balance"
|
||||
data-testid="check-balance"
|
||||
borderless
|
||||
Action={<ClientAddress withCopy showEntireAddress />}
|
||||
>
|
||||
<Grid container direction="column" spacing={2}>
|
||||
<Grid item>
|
||||
{userBalance.error && (
|
||||
<Alert severity="error" data-testid="error-refresh" sx={{ p: 2 }}>
|
||||
{userBalance.error}
|
||||
</Alert>
|
||||
)}
|
||||
{!userBalance.error && (
|
||||
<Typography
|
||||
data-testid="refresh-success"
|
||||
sx={{
|
||||
color: 'text.primary',
|
||||
textTransform: 'uppercase',
|
||||
fontWeight: (theme) => (theme.palette.mode === 'light' ? '600' : '400'),
|
||||
fontSize: 28,
|
||||
}}
|
||||
variant="h5"
|
||||
>
|
||||
{userBalance.balance?.printable_balance}
|
||||
</Typography>
|
||||
)}
|
||||
</Grid>
|
||||
{network && (
|
||||
<Grid item>
|
||||
<Link
|
||||
href={`${urls(network).blockExplorer}/account/${clientDetails?.client_address}`}
|
||||
target="_blank"
|
||||
text="Last transactions"
|
||||
fontSize={14}
|
||||
/>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</NymCard>
|
||||
);
|
||||
};
|
||||
@@ -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<string>(nodeGeneralNav[0]);
|
||||
|
||||
const { userBalance } = useContext(AppContext);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('a');
|
||||
}, [userBalance]);
|
||||
|
||||
return (
|
||||
<Box sx={{ pl: 3, pt: 3 }}>
|
||||
<Grid container direction="row" spacing={3}>
|
||||
<Grid item container direction="column" width={0.2}>
|
||||
{nodeGeneralNav.map((item) => (
|
||||
<Button
|
||||
size="small"
|
||||
sx={{ p: 0, mr: 2, color: 'inherit', justifyContent: 'start' }}
|
||||
onClick={() => setSettingsCard(item)}
|
||||
>
|
||||
{item}
|
||||
</Button>
|
||||
))}
|
||||
</Grid>
|
||||
<Divider orientation="vertical" flexItem />
|
||||
{settingsCard === nodeGeneralNav[0] && <InfoSettings onSaveChanges={() => console.log('saving...')} />}
|
||||
{settingsCard === nodeGeneralNav[1] && <h1>bye</h1>}
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -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<string>(nodeSettingsNav[0]);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<PageLayout>
|
||||
<NymCard
|
||||
borderless
|
||||
noPadding
|
||||
title={
|
||||
<Stack gap={2} sx={{ py: 0 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<NodeIcon />
|
||||
<Typography variant="h6" fontWeight={600}>
|
||||
Node Settings
|
||||
</Typography>
|
||||
</Box>
|
||||
<IconButton
|
||||
onClick={() => navigate('/bonding')}
|
||||
size="small"
|
||||
sx={{
|
||||
color: 'text.primary',
|
||||
}}
|
||||
>
|
||||
<Close />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Toolbar disableGutters sx={{ height: '30px' }}>
|
||||
{nodeSettingsNav.map((item) => (
|
||||
<Button size="small" sx={{ p: 0, mr: 2, color: 'inherit' }} onClick={() => setSettingsCard(item)}>
|
||||
{item}
|
||||
</Button>
|
||||
))}
|
||||
</Toolbar>
|
||||
</Stack>
|
||||
}
|
||||
>
|
||||
<Divider />
|
||||
{settingsCard === nodeSettingsNav[0] && (
|
||||
<NodeGeneralSettings onSaveChanges={() => console.log('save changes')} />
|
||||
)}
|
||||
{settingsCard === nodeSettingsNav[1] && (
|
||||
<NodeGeneralSettings onSaveChanges={() => console.log('save changes')} />
|
||||
)}
|
||||
</NymCard>
|
||||
</PageLayout>
|
||||
);
|
||||
};
|
||||
@@ -5,4 +5,3 @@ export * from './bonding';
|
||||
export * from './delegation';
|
||||
export * from './internal-docs';
|
||||
export * from './unbond';
|
||||
export * from './settings';
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export * from './node-settings';
|
||||
@@ -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 (
|
||||
<PageLayout>
|
||||
<Box display="flex" flexDirection="column" gap={2}>
|
||||
<h1>hello</h1>
|
||||
<Button onClick={() => navigate('/bonding')}>exit</Button>
|
||||
</Box>
|
||||
</PageLayout>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user