From 796d885c311bb6c4c1370b6dee856e11f356e61c Mon Sep 17 00:00:00 2001 From: eniolam1000752 Date: Tue, 10 Jan 2023 23:44:03 +0100 Subject: [PATCH 1/8] fix: added edit commission and commission percent to staking --- setup/react/app/variables.css | 4 + .../assets/images/icons/arrow-blue-right.svg | 3 + .../react/assets/images/icons/commissions.svg | 17 ++++ src/locales/en/common.json | 9 +- src/modules/pos/validator/api/index.js | 2 +- src/modules/pos/validator/api/index.test.js | 2 +- .../components/EditStake/editStake.css | 19 +++- .../validator/components/EditStake/index.js | 6 ++ .../components/StakeForm/StakeRow.js | 6 +- .../components/StakeForm/stakeForm.css | 6 +- .../components/StakeForm/tableHeader.js | 4 + .../ValidatorProfile/DetailsView.js | 84 ++++++++++------- .../ValidatorProfile/PerformanceView.js | 19 +++- .../ValidatorProfile/ValidatorProfile.css | 93 +++++++++++++++++-- .../ValidatorProfile/ValidatorStakesView.js | 14 ++- .../pos/validator/consts/validators.js | 1 + .../validator/hooks/queries/useSentStakes.js | 4 +- .../pos/validator/store/actions/staking.js | 6 +- .../validator/store/actions/staking.test.js | 2 +- .../pos/validator/store/reducers/voting.js | 2 + .../validator/utils/getValidatorCommission.js | 3 + src/modules/pos/validator/utils/index.js | 1 + src/modules/wallet/components/stakes/index.js | 4 +- src/theme/Icon/index.js | 6 ++ 24 files changed, 243 insertions(+), 74 deletions(-) create mode 100644 setup/react/assets/images/icons/arrow-blue-right.svg create mode 100644 setup/react/assets/images/icons/commissions.svg create mode 100644 src/modules/pos/validator/utils/getValidatorCommission.js diff --git a/setup/react/app/variables.css b/setup/react/app/variables.css index 0fd913dd6e..60188742da 100644 --- a/setup/react/app/variables.css +++ b/setup/react/app/variables.css @@ -198,6 +198,8 @@ or "warn/action" ineastd of "red/green" --color-token-card-shadow: #eaeaea5c; --color-stakes-available: #4070f41a; --color-search-bar-background: #2e3855; + --color-edit-button-background: var(--color-ghost-white); + --color-edit-button-border: var(--color-very-light-gray); /************************* Box @@ -297,4 +299,6 @@ or "warn/action" ineastd of "red/green" --color-tx-fail-status-text: var(--color-red); --color-tx-fail-status-bg: var(--color-red-semitransparent); --color-token-card-shadow: transparent; + --color-edit-button-background: var(--color-body-bg); + --color-edit-button-border: var(--color-mystic); } diff --git a/setup/react/assets/images/icons/arrow-blue-right.svg b/setup/react/assets/images/icons/arrow-blue-right.svg new file mode 100644 index 0000000000..657b95c9f7 --- /dev/null +++ b/setup/react/assets/images/icons/arrow-blue-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/setup/react/assets/images/icons/commissions.svg b/setup/react/assets/images/icons/commissions.svg new file mode 100644 index 0000000000..4fc484d481 --- /dev/null +++ b/setup/react/assets/images/icons/commissions.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/locales/en/common.json b/src/locales/en/common.json index d484b17446..fa6e6fc158 100644 --- a/src/locales/en/common.json +++ b/src/locales/en/common.json @@ -94,6 +94,7 @@ "Block status": "Block status", "Blocks": "Blocks", "Blocks forged": "Blocks forged", + "Blocks generated": "Blocks generated", "Blocks overview": "Blocks overview", "Blog": "Blog", "Bookmarks": "Bookmarks", @@ -117,6 +118,8 @@ "Click to see the full address": "Click to see the full address", "Close": "Close", "Collapse sidebar": "Collapse sidebar", + "Commission": "Commission", + "Commission (%)": "Commission (%)", "Community is key. Stake for validators, or register as one yourself. Feel like a feature is missing? Request it directly from the Lisk.": "Community is key. Stake for validators, or register as one yourself. Feel like a feature is missing? Request it directly from the Lisk.", "Configure account": "Configure account", "Confirm": "Confirm", @@ -294,9 +297,9 @@ "Label is too long.": "Label is too long.", "Last Certificate Height": "Last Certificate Height", "Last Update": "Last Update", - "Last block forged": "Last block forged", "Last forged :": "Last forged :", - "Last forged block": "Last forged block", + "Last generated block": "Last generated block", + "Last generated block height": "Last generated block height", "Last {{num}} blocks": "Last {{num}} blocks", "Latest stakes": "Latest stakes", "Less filters": "Less filters", @@ -485,7 +488,7 @@ "Restore your encrypted secret recovery phrase.": "Restore your encrypted secret recovery phrase.", "Review and sign": "Review and sign", "Reward": "Reward", - "Rewards (LSK)": "Rewards (LSK)", + "Rewards": "Rewards", "Round": "Round", "Round state": "Round state", "Round state:": "Round state:", diff --git a/src/modules/pos/validator/api/index.js b/src/modules/pos/validator/api/index.js index 5dfe69f854..b81dc866a4 100644 --- a/src/modules/pos/validator/api/index.js +++ b/src/modules/pos/validator/api/index.js @@ -136,7 +136,7 @@ export const getValidators = ({ network, params = {}, baseUrl }) => { * @param {Object} data.network - Network setting from Redux store * @returns {Promise} http call */ -export const getVotes = ({ params = {} }) => +export const getStakes = ({ params = {} }) => client.rest({ url: httpPaths.votesSent, params: getValidatorProps({ address: params.address, publicKey: params.publicKey }), diff --git a/src/modules/pos/validator/api/index.test.js b/src/modules/pos/validator/api/index.test.js index 4811c0a121..1bebda2413 100644 --- a/src/modules/pos/validator/api/index.test.js +++ b/src/modules/pos/validator/api/index.test.js @@ -226,7 +226,7 @@ describe('API: LSK Delegates', () => { meta: { ...mockSentStakes.meta, count: 20 }, }; setApiResponseData(expectedResponse, client.rest); - await expect(validator.getVotes({ params, network })).resolves.toEqual(expectedResponse); + await expect(validator.getStakes({ params, network })).resolves.toEqual(expectedResponse); }); }); diff --git a/src/modules/pos/validator/components/EditStake/editStake.css b/src/modules/pos/validator/components/EditStake/editStake.css index acf740d2ba..abb562e6a1 100644 --- a/src/modules/pos/validator/components/EditStake/editStake.css +++ b/src/modules/pos/validator/components/EditStake/editStake.css @@ -71,11 +71,22 @@ color: var(--color-content-light); } - & > p:nth-child(2) ~ p { - @mixin contentNormal; - - margin-top: -3px; + & > p:nth-child(3) { color: var(--color-blue-gray) !important; + margin-top: -3px; + + &, + & ~ p { + @mixin contentNormal; + } + } + + & > p:nth-child(4) { + margin-top: -5px; + + & > span { + color: var(--color-content-light); + } } } diff --git a/src/modules/pos/validator/components/EditStake/index.js b/src/modules/pos/validator/components/EditStake/index.js index ec62e6199d..f40f6f948b 100644 --- a/src/modules/pos/validator/components/EditStake/index.js +++ b/src/modules/pos/validator/components/EditStake/index.js @@ -30,6 +30,7 @@ import getMaxAmount from '../../utils/getMaxAmount'; import styles from './editStake.css'; import { useValidators, usePosConstants, useSentStakes } from '../../hooks/queries'; import { NUMBER_OF_BLOCKS_PER_DAY } from '../../consts'; +import { extractValidatorCommission } from '../../utils'; const getTitles = (t) => ({ edit: { @@ -133,6 +134,7 @@ const EditStake = ({ history, stakeEdited, network, voting, stakesRetrieved }) = } stakeEdited([ { + validator, address: validatorAddress, amount: toRawLsk(voteAmount.value), name: validator.name, @@ -147,6 +149,7 @@ const EditStake = ({ history, stakeEdited, network, voting, stakesRetrieved }) = const removeVote = () => { stakeEdited([ { + validator, name: validator.name, address: validatorAddress, amount: 0, @@ -186,6 +189,9 @@ const EditStake = ({ history, stakeEdited, network, voting, stakesRetrieved }) =

{validator.name}

{validatorAddress}

+

+ Commission: {extractValidatorCommission(validator.commission)}% +