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

Merge pull request #3885 from nymtech/update/issue-3884/delegations-page-updates

Browse Source 
Update/issue 3884/delegations page updates
This commit is contained in:
Tommy Verrall
2023-09-21 12:45:12 +02:00
committed by GitHub
parent 95e3971b9c 56ef23b7d1
commit a9a1eecfff
14 changed files with 1844 additions and 2431 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nym-connect/desktop/src/growth.tsx
+16 -14
View File
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { ErrorBoundary } from 'react-error-boundary';
import { ClientContextProvider } from './context/main';
import { ErrorFallback } from './components/Error';
@@ -7,17 +7,19 @@ import { NymShipyardTheme } from './theme';
import { TestAndEarnPopup } from './components/Growth/TestAndEarnPopup';
import { TestAndEarnContextProvider } from './components/Growth/context/TestAndEarnContext';
const root = document.getElementById('root-growth');
const elem = document.getElementById('root-growth');
ReactDOM.render(
<ErrorBoundary FallbackComponent={ErrorFallback}>
<ClientContextProvider>
<TestAndEarnContextProvider>
<NymShipyardTheme mode="dark">
<TestAndEarnPopup />
</NymShipyardTheme>
</TestAndEarnContextProvider>
</ClientContextProvider>
</ErrorBoundary>,
root,
);
if (elem) {
const root = createRoot(elem);
root.render(
<ErrorBoundary FallbackComponent={ErrorFallback}>
<ClientContextProvider>
<TestAndEarnContextProvider>
<NymShipyardTheme mode="dark">
<TestAndEarnPopup />
</NymShipyardTheme>
</TestAndEarnContextProvider>
</ClientContextProvider>
</ErrorBoundary>,
);
}
nym-connect/desktop/src/log.tsx
+6 -3
View File
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { ErrorBoundary } from 'react-error-boundary';
import { LogViewer } from './components/LogViewer';
import { ErrorFallback } from './components/ErrorFallback';
@@ -13,6 +13,9 @@ const Log = () => (
</ErrorBoundary>
);
const root = document.getElementById('root-log');
const elem = document.getElementById('root-log');
ReactDOM.render(<Log />, root);
if (elem) {
const root = createRoot(elem);
root.render(<Log />);
}
nym-wallet/package.json
+1 -1
View File
@@ -31,7 +31,7 @@
"@nymproject/mui-theme": "^1.0.0",
"@nymproject/react": "^1.0.0",
"@nymproject/types": "^1.0.0",
"@nymproject/node-tester": ">=1.2.0-rc.1 || ^1",
"@nymproject/node-tester": ">=1.2.0-rc.5",
"@storybook/react": "^6.5.15",
"@tauri-apps/api": "^1.2.0",
"@tauri-apps/tauri-forage": "^1.0.0-beta.2",
nym-wallet/src/components/Accounts/modals/MultiAccountHowTo.tsx
-1
View File
@@ -19,7 +19,6 @@ export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handle
In order to import or create account(s) you need to log in with password
</Typography>
}
bgColor="#fff"
/>
<Typography>
If you don’t have a password set for your account, go to the Settings, under Security tab create a password
nym-wallet/src/components/Bonding/modals/RedeemRewardsModal.tsx
+2 -2
View File
@@ -37,9 +37,9 @@ export const RedeemRewardsModal = ({
return (
<SimpleModal
open
header="Redeem rewards"
header="Claim rewards"
subHeader="Claim you rewards"
okLabel="Redeem"
okLabel="Claim"
okDisabled={isFeeLoading}
onOk={handleOnOK}
onClose={onClose}
nym-wallet/src/components/Delegation/DelegationActions.tsx
+4 -4
View File
@@ -46,7 +46,7 @@ export const DelegationActions: FCWithChildren<{
<Undelegate fontSize="small" />
</Button>
</Tooltip>
<Tooltip title={disableRedeemingRewards ? 'There are no rewards to redeem' : 'Redeem rewards'} arrow>
<Tooltip title={disableRedeemingRewards ? 'There are no rewards to claim' : 'Claim rewards'} arrow>
<span>
<Button
disabled={disableRedeemingRewards}
@@ -55,7 +55,7 @@ export const DelegationActions: FCWithChildren<{
color="secondary"
sx={{ maxWidth: BUTTON_SIZE, minWidth: BUTTON_SIZE, height: BUTTON_SIZE, padding: 0 }}
>
R
C
</Button>
</span>
</Tooltip>
@@ -89,9 +89,9 @@ export const DelegationsActionsMenu: FCWithChildren<{
/>
<ActionsMenuItem title="Undelegate" Icon={<Undelegate />} onClick={() => handleActionSelect('undelegate')} />
<ActionsMenuItem
title="Redeem"
title="Claim rewards"
description="Transfer your rewards to your balance"
Icon={<Typography sx={{ pl: 1, fontWeight: 700 }}>R</Typography>}
Icon={<Typography sx={{ pl: 1, fontWeight: 700 }}>C</Typography>}
onClick={() => handleActionSelect('redeem')}
disabled={disableRedeemingRewards}
/>
nym-wallet/src/components/Delegation/DelegationList.tsx
+7 -2
View File
@@ -22,7 +22,7 @@ interface EnhancedTableProps {
interface HeadCell {
id: string;
label: string;
label: string | React.ReactNode;
sortable: boolean;
disablePadding?: boolean;
align: 'left' | 'center' | 'right';
@@ -34,7 +34,12 @@ const headCells: HeadCell[] = [
{ id: 'profit_margin_percent', label: 'Profit margin', sortable: true, align: 'left' },
{ id: 'operating_cost', label: 'Operating Cost', sortable: true, align: 'left' },
{ id: 'stake_saturation', label: 'Stake saturation', sortable: true, align: 'left' },
{ id: 'delegated_on_iso_datetime', label: 'Delegated on', sortable: true, align: 'left' },
{
id: 'delegated_on_iso_datetime',
label: 'Delegated on',
sortable: true,
align: 'left',
},
{ id: 'amount', label: 'Delegation', sortable: true, align: 'left' },
{ id: 'unclaimed_rewards', label: 'Reward', sortable: true, align: 'left' },
{ id: 'uses_locked_tokens', label: '', sortable: false, align: 'left' },
nym-wallet/src/components/Rewards/RedeemModal.stories.tsx
+2 -2
View File
@@ -82,7 +82,7 @@ export const RedeemRewardForMixnode = () => {
open={open}
onClose={() => setOpen(false)}
onOk={async () => setOpen(false)}
message="Redeem rewards"
message="Claim rewards"
denom="nym"
mixId={1234}
identityKey="D88RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujaaa"
@@ -128,7 +128,7 @@ export const FeeIsMoreThanMixnodeReward = () => {
onOk={async () => setOpen(false)}
mixId={1234}
identityKey="D88RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujaaa"
message="Redeem rewards"
message="Claim rewards"
denom="nym"
amount={0.001}
{...storybookStyles(theme)}
nym-wallet/src/components/Rewards/RedeemModal.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ export const RedeemModal: FCWithChildren<{
onOk={handleOk}
header={message}
subHeader="Rewards from delegations"
okLabel="Redeem rewards"
okLabel="Claim rewards"
sx={sx}
backdropProps={backdropProps}
>
nym-wallet/src/components/Rewards/RewardsSummary.tsx
+15 -5
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { CircularProgress, Stack, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { useDelegationContext } from 'src/context/delegations';
import { InfoTooltip } from '../InfoToolTip';
export const RewardsSummary: FCWithChildren<{
@@ -9,19 +10,28 @@ export const RewardsSummary: FCWithChildren<{
totalRewards?: string;
}> = ({ isLoading, totalDelegation, totalRewards }) => {
const theme = useTheme();
const { totalDelegationsAndRewards } = useDelegationContext();
return (
<Stack direction="row" justifyContent="space-between">
<Stack direction="row" spacing={4}>
<Stack direction="row" justifyContent="space-between" marginTop={3}>
<Stack direction="row" spacing={5}>
<Stack direction="row" spacing={1} alignItems="center">
<InfoTooltip title="This is the total amount you have delegated to node(s) in the network" />
<InfoTooltip title="The total amount you have delegated to node(s) in the network. The amount also includes the rewards you have accrued since last time you claimed your rewards" />
<Typography>Total delegations:</Typography>
<Typography fontWeight={600} fontSize={16} textTransform="uppercase">
{isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalDelegationsAndRewards || '-'}
</Typography>
</Stack>
<Stack direction="row" spacing={1} alignItems="center">
<InfoTooltip title="The initial amount you delegated to the node(s)" />
<Typography>Original delegations:</Typography>
<Typography fontWeight={600} fontSize={16} textTransform="uppercase">
{isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalDelegation || '-'}
</Typography>
</Stack>
<Stack direction="row" spacing={1} alignItems="center">
<InfoTooltip title="This is the rewards you have accrued since the last time you redeemed your rewards. Rewards are automatically compounded. You can redeem your rewards at any time" />
<Typography>New rewards:</Typography>
<InfoTooltip title="The rewards you have accrued since the last time you claimed your rewards. Rewards are automatically compounded. You can claim your rewards at any time." />
<Typography>Total rewards:</Typography>
<Typography fontWeight={600} fontSize={16} textTransform="uppercase">
{isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalRewards || '-'}
</Typography>
nym-wallet/src/context/delegations.tsx
+7 -1
View File
@@ -25,6 +25,7 @@ export type TDelegationContext = {
pendingDelegations?: WrappedDelegationEvent[];
totalDelegations?: string;
totalRewards?: string;
totalDelegationsAndRewards?: string;
refresh: () => Promise<void>;
addDelegation: (
data: { mix_id: number; amount: DecCoin },
@@ -71,6 +72,7 @@ export const DelegationContextProvider: FC<{
const [delegations, setDelegations] = useState<undefined | TDelegations>();
const [totalDelegations, setTotalDelegations] = useState<undefined | string>();
const [totalRewards, setTotalRewards] = useState<undefined | string>();
const [totalDelegationsAndRewards, setTotalDelegationsAndRewards] = useState<undefined | string>();
const [pendingDelegations, setPendingDelegations] = useState<WrappedDelegationEvent[]>();
const addDelegation = async (data: { mix_id: number; amount: DecCoin }, tokenPool: TPoolOption, fee?: FeeDetails) => {
@@ -109,10 +111,13 @@ export const DelegationContextProvider: FC<{
},
}));
const delegationsAndRewards = (+data.total_delegations.amount + +data.total_rewards.amount).toFixed(6);
setPendingDelegations(pending);
setDelegations([...items, ...pendingOnNewNodes]);
setTotalDelegations(`${data.total_delegations.amount} ${data.total_delegations.denom}`);
setTotalRewards(`${data.total_rewards.amount} ${data.total_rewards.denom}`);
setTotalDelegationsAndRewards(`${delegationsAndRewards} ${data.total_delegations.denom}`);
} catch (e) {
Console.error(e);
}
@@ -130,12 +135,13 @@ export const DelegationContextProvider: FC<{
pendingDelegations,
totalDelegations,
totalRewards,
totalDelegationsAndRewards,
refresh,
addDelegation,
undelegate: undelegateFromMixnode,
undelegateVesting: vestingUndelegateFromMixnode,
}),
[isLoading, delegations, pendingDelegations, totalDelegations],
[isLoading, delegations, pendingDelegations, totalDelegations, totalRewards, totalDelegationsAndRewards],
);
return <DelegationContext.Provider value={memoizedValue}>{children}</DelegationContext.Provider>;
nym-wallet/src/log.tsx
+6 -3
View File
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { ErrorBoundary } from 'react-error-boundary';
import { LogViewer } from './components/LogViewer';
import { ErrorFallback } from './components';
@@ -13,6 +13,9 @@ const Log = () => (
</ErrorBoundary>
);
const root = document.getElementById('root-log');
const elem = document.getElementById('root-log');
ReactDOM.render(<Log />, root);
if (elem) {
const root = createRoot(elem);
root.render(<Log />);
}
nym-wallet/src/pages/delegation/index.tsx
+13 -11
View File
@@ -354,16 +354,18 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
Delegations
</Typography>
{!!delegations?.length && (
<Link
href={`${urls(network).networkExplorer}/network-components/mixnodes/`}
target="_blank"
rel="noreferrer"
text="Network Explorer"
fontSize={14}
fontWeight={theme.palette.mode === 'light' ? 400 : 600}
noIcon
marginTop={1.5}
/>
<Stack marginTop={1.5} gap={0.5} direction="row" alignItems="center">
<Typography fontSize={14}>Select nodes to delegate to using the</Typography>
<Link
href={`${urls(network).networkExplorer}/network-components/mixnodes/`}
target="_blank"
rel="noreferrer"
text="network Explorer"
fontSize={14}
fontWeight={theme.palette.mode === 'light' ? 400 : 600}
noIcon
/>
</Stack>
)}
</Box>
{!!delegations?.length && (
@@ -445,7 +447,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
open={showRedeemRewardsModal}
onClose={() => setShowRedeemRewardsModal(false)}
onOk={(mixId, identity, fee) => handleRedeem(mixId, identity, fee)}
message="Redeem rewards"
message="Claim rewards"
denom={clientDetails?.display_mix_denom || 'nym'}
mixId={currentDelegationListActionItem.mix_id}
identityKey={currentDelegationListActionItem?.node_identity}
yarn.lock
+1764 -2381
View File
File diff suppressed because it is too large Load Diff