Merge pull request #4706 from LiskHQ/4641-add-commission-rate-and-reward

Add commission rate and reward

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);
 }

src/locales/en/common.json

@@ -94,11 +94,11 @@
   "Block status": "Block status",
   "Blocks": "Blocks",
   "Blocks forged": "Blocks forged",
+  "Blocks generated": "Blocks generated",
   "Blocks overview": "Blocks overview",
   "Blog": "Blog",
   "Bookmarks": "Bookmarks",
   "Bytes counter": "Bytes counter",
-  "CMB :": "CMB :",
   "Cancel": "Cancel",
   "Caution! This validator was punished on {{punishmentStartDate}}. There is approximately {{daysLeft}} days remaining before the punishment ends.": "Caution! This validator was punished on {{punishmentStartDate}}. There is approximately {{daysLeft}} days remaining before the punishment ends.",
   "Caution! You are about to stake for the punished validator, this will result in your LSK tokens being locked for a period of {{daysLeft}} days. In addition, please note that your stake will not be counted until the {{daysLeft}} day period has expired. ": "Caution! You are about to stake for the punished validator, this will result in your LSK tokens being locked for a period of {{daysLeft}} days. In addition, please note that your stake will not be counted until the {{daysLeft}} day period has expired. ",
@@ -117,6 +117,9 @@
   "Click to see the full address": "Click to see the full address",
   "Close": "Close",
   "Collapse sidebar": "Collapse sidebar",
+  "Commission": "Commission",
+  "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",
@@ -229,13 +232,13 @@
   "Filtered results: {{results}}": "Filtered results: {{results}}",
   "Forged blocks": "Forged blocks",
   "Forging details": "Forging details",
-  "Forging time": "Forging time",
   "Forging totals": "Forging totals",
   "Found several devices, choose the one you’d like to access": "Found several devices, choose the one you’d like to access",
   "From": "From",
   "From Application": "From Application",
   "From application": "From application",
   "Generated by": "Generated by",
+  "Generation time": "Generation time",
   "Generator key": "Generator key",
   "Generator public key": "Generator public key",
   "German": "German",
@@ -296,9 +299,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 :": "Last generated :",
+  "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",
@@ -496,7 +499,7 @@
   "Returning to application...": "Returning to application...",
   "Review and sign": "Review and sign",
   "Reward": "Reward",
-  "Rewards (LSK)": "Rewards (LSK)",
+  "Rewards": "Rewards",
   "Round": "Round",
   "Round state": "Round state",
   "Round state:": "Round state:",
@@ -518,6 +521,7 @@
   "Secret recovery phrase": "Secret recovery phrase",
   "Secret recovery phrase (12-24 mnemonic phrases supported)": "Secret recovery phrase (12-24 mnemonic phrases supported)",
   "Security": "Security",
+  "See breakdown": "See breakdown",
   "Select All": "Select All",
   "Select Network": "Select Network",
   "Select all": "Select all",

src/modules/pos/validator/api/index.js

@@ -136,12 +136,30 @@ 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 }),
   });
 
+// @TODO: we need to refactor this function when service has made modifications to this endpoint
+/**
+ * Retrieves validators by address
+ *
+ * @param {Object} data
+ * @param {String?} data.params.addresses - account addresses
+ * @param {String?} data.baseUrl - Lisk Service API url to override the
+ * existing ServiceUrl on the network param. We may use this to retrieve
+ * the details of an archived transaction.
+ * @param {Object} data.network - Network setting from Redux store
+ * @returns {Promise} http call
+ */
+export const getValidatorList = ({ params = {} }) =>
+  client.rest({
+    url: httpPaths.validators,
+    params: { addresses: params.addresses.join(',') },
+  });
+
 /**
  * Retrieves list of votes given for a given validator.
  *

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);
     });
   });
 

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);
+      }
     }
   }
 

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';
 import { useStakesRetrieved } from '../../store/actions/staking';
 
 const getTitles = (t) => ({
@@ -130,9 +131,8 @@ const EditStake = ({ history, stakeEdited, network, staking }) => {
     }
     stakeEdited([
       {
-        address,
+        validator,
         amount: toRawLsk(stakeAmount.value),
-        name: validator.name,
       },
     ]);
 
@@ -144,9 +144,8 @@ const EditStake = ({ history, stakeEdited, network, staking }) => {
   const removeVote = () => {
     stakeEdited([
       {
-        address,
+        validator,
         amount: toRawLsk(0),
-        name: validator.name,
       },
     ]);
     removeSearchParamsFromUrl(history, ['modal']);
@@ -182,7 +181,10 @@ const EditStake = ({ history, stakeEdited, network, staking }) => {
               <BoxInfoText className={styles.accountInfo}>
                 <WalletVisual size={40} address={address} />
                 <p>{validator.name}</p>
-                <p>{address}</p>
+                <p>{validator.address}</p>
+                <p>
+                  Commission: <span>{extractValidatorCommission(validator.commission)}%</span>
+                </p>
               </BoxInfoText>
               <label className={styles.fieldGroup}>
                 <p className={styles.availableBalance}>

src/modules/pos/validator/components/EditStake/index.test.js

@@ -13,6 +13,7 @@ import { mockAuth } from 'src/modules/auth/__fixtures__';
 import EditStake from './index';
 import { useValidators, useSentStakes, usePosConstants } from '../../hooks/queries';
 import { mockPosConstants } from '../../__fixtures__/mockPosConstants';
+import { extractValidatorCommission } from '../../utils';
 
 jest.mock('@transaction/api', () => ({
   getTransactionFee: jest.fn().mockImplementation(() => Promise.resolve({ value: '0.046' })),
@@ -39,17 +40,17 @@ jest.mock('@auth/hooks/queries');
 describe('EditStake', () => {
   const validatorAddress = 'lskjq7jh2k7q332wgkz3bxogb8bj5zc3fcnb9ya53';
   const stakingStoreValue = {
-    'lskn3kjdanry8v272fyqky8nx7nc358sedo8rzmw2': {
+    lskn3kjdanry8v272fyqky8nx7nc358sedo8rzmw2: {
       confirmed: 1000000000,
-      name: "genesis_66",
+      name: 'genesis_66',
       unconfirmed: 3000000000,
     },
-    'lsknm4djcs98mpu87m9cjsawy7eqp8cpk4v7u8gdz': {
+    lsknm4djcs98mpu87m9cjsawy7eqp8cpk4v7u8gdz: {
       confirmed: 2000000000,
-      name: "genesis_8",
+      name: 'genesis_8',
       unconfirmed: 4000000000,
-    }
-  }
+    },
+  };
   const props = {
     history: { location: { search: `?address=${validatorAddress}` }, push: jest.fn() },
     stakeEdited: jest.fn(),
@@ -77,16 +78,19 @@ describe('EditStake', () => {
     const validator = mockValidators.data[0];
     const token = mockTokensBalance.data[0];
 
-    renderWithRouterAndStore(EditStake, updatedProps, { staking: stakingStoreValue, });
+    renderWithRouterAndStore(EditStake, updatedProps, { staking: stakingStoreValue });
 
     expect(screen.getByText('Add to staking queue')).toBeTruthy();
-    expect(screen.getByText(address)).toBeTruthy();
+    expect(screen.getByText(validator.address)).toBeTruthy();
     expect(screen.getByText(validator.name)).toBeTruthy();
     expect(screen.getByTestId(`wallet-visual-${address}`)).toBeTruthy();
     expect(screen.getByText('Available balance:')).toBeTruthy();
+    expect(screen.getByText('Commission:')).toBeTruthy();
+    expect(screen.getByText(`${extractValidatorCommission(validator.commission)}%`)).toBeTruthy();
     expect(
       screen.getByText(
-        `${numeral(fromRawLsk(token.availableBalance)).format('0,0.[0000000000000]')} ${token.symbol
+        `${numeral(fromRawLsk(token.availableBalance)).format('0,0.[0000000000000]')} ${
+          token.symbol
         }`
       )
     ).toBeTruthy();
@@ -109,9 +113,8 @@ describe('EditStake', () => {
     await waitFor(() => {
       expect(props.stakeEdited).toHaveBeenCalledWith([
         {
-          address: validatorAddress,
-          name: validator.name,
           amount: toRawLsk(20),
+          validator,
         },
       ]);
     });
@@ -171,9 +174,8 @@ describe('EditStake', () => {
     await waitFor(() => {
       expect(props.stakeEdited).toHaveBeenCalledWith([
         {
-          address: validatorAddress,
-          name: validator.name,
           amount: toRawLsk(20),
+          validator,
         },
       ]);
     });

src/modules/pos/validator/components/StakeForm/StakeRow.js

@@ -14,13 +14,14 @@ import TokenAmount from '@token/fungible/components/tokenAmount';
 import AmountField from 'src/modules/common/components/amountField';
 import useStakeAmountField from '../../hooks/useStakeAmountField';
 import styles from './stakeForm.css';
+import { extractValidatorCommission } from '../../utils';
 
 const componentState = Object.freeze({ editing: 1, notEditing: 2 });
 const token = tokenMap.LSK.key;
 
 const StakeRow = ({
   t = (s) => s,
-  data: { address, username, confirmed, unconfirmed },
+  data: { address, commission, username, confirmed, unconfirmed },
   index,
   history,
 }) => {
@@ -68,12 +69,17 @@ const StakeRow = ({
           <span className={styles.validatorAddress}>{truncatedAddress}</span>
         </div>
       </div>
-      <span className={`${styles.oldAmountColumn} ${styles.centerContent}`}>
-        {!!confirmed && <TokenAmount val={confirmed} token={token} />}
+      <span className={`${styles.commissionsColumn} ${styles.centerContent}`}>
+        {extractValidatorCommission(commission)}%
       </span>
       {state === componentState.notEditing ? (
         <>
           <span className={`${styles.newAmountColumn} ${styles.centerContent}`}>
+            {!!confirmed && (
+              <span className={`${styles.oldAmountColumn}`}>
+                <TokenAmount val={confirmed} token={token} />
+              </span>
+            )}
             {!!unconfirmed && <TokenAmount val={unconfirmed} token={token} />}
           </span>
           <div className={`${styles.editIconsContainer} ${styles.centerContent}`}>