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,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",
@@ -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 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:",

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 }),
   });
 
+// 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,6 +131,7 @@ const EditStake = ({ history, stakeEdited, network, staking }) => {
     }
     stakeEdited([
       {
+        validator,
         address,
         amount: toRawLsk(stakeAmount.value),
         name: validator.name,
@@ -144,6 +146,7 @@ const EditStake = ({ history, stakeEdited, network, staking }) => {
   const removeVote = () => {
     stakeEdited([
       {
+        validator,
         address,
         amount: toRawLsk(0),
         name: validator.name,
@@ -182,7 +185,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' })),
@@ -80,10 +81,12 @@ describe('EditStake', () => {
     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
@@ -112,6 +115,7 @@ describe('EditStake', () => {
           address: validatorAddress,
           name: validator.name,
           amount: toRawLsk(20),
+          validator,
         },
       ]);
     });
@@ -174,6 +178,7 @@ describe('EditStake', () => {
           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,
 }) => {
@@ -71,6 +72,9 @@ const StakeRow = ({
       <span className={`${styles.oldAmountColumn} ${styles.centerContent}`}>
         {!!confirmed && <TokenAmount val={confirmed} token={token} />}
       </span>
+      <span className={`${styles.newAmountColumn} ${styles.centerContent}`}>
+          {extractValidatorCommission(commission)}%
+      </span>
       {state === componentState.notEditing ? (
         <>
           <span className={`${styles.newAmountColumn} ${styles.centerContent}`}>

src/modules/pos/validator/components/StakeForm/stakeForm.css

@@ -96,7 +96,7 @@
   flex-direction: row;
   align-items: center;
   margin-left: 16px;
-  width: calc(50% - 16px);
+  width: calc(44% - 16px);
 }
 
 .delegateInfo {
@@ -145,6 +145,10 @@
 
     margin-right: 8px;
     font-size: var(--font-size-h6);
+
+    &:last-of-type {
+      margin-left: 60px;
+    }
   }
 
   & img.editIcon {

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

@@ -5,6 +5,10 @@ const header = (t) => [
     title: t('Validator'),
     classList: styles.infoColumn,
   },
+  {
+    title: t('Commission (%)'),
+    classList: styles.amountColumn,
+  },
   {
     title: t('Stake amount'),
     classList: styles.amountColumn,

src/modules/pos/validator/components/ValidatorProfile/DetailsView.js

@@ -11,6 +11,7 @@ import { useLatestBlock } from '@block/hooks/queries/useLatestBlock';
 import DateTimeFromTimestamp from 'src/modules/common/components/timestamp';
 import TokenAmount from '@token/fungible/components/tokenAmount';
 import styles from './ValidatorProfile.css';
+import { extractValidatorCommission } from '../../utils';
 
 const DetailsView = ({ data }) => {
   const theme = useTheme();
@@ -21,6 +22,41 @@ const DetailsView = ({ data }) => {
     data: { timestamp: latestBlockTimestamp },
   } = useLatestBlock();
 
+  const onEditCommision = () => {};
+
+  const displayList = [
+    {
+      icon: 'star',
+      label: t('Rank'),
+      value: rank || '-',
+    },
+    {
+      icon: 'clockActive',
+      label: t('Round state'),
+      value: status.toLowerCase(),
+    },
+    {
+      icon: 'weight',
+      label: t('Validator weight'),
+      value: <TokenAmount val={data.totalStakeReceived} token={tokenMap.LSK.key} />,
+    },
+    {
+      icon: 'commissionsIcon',
+      label: t('Commission'),
+      value: `${extractValidatorCommission(data.commission)}%`,
+      onEdit: onEditCommision,
+    },
+    {
+      icon: 'calendar',
+      label: t('Last generated block'),
+      value: latestBlockTimestamp ? (
+        <DateTimeFromTimestamp fulltime className="date" time={latestBlockTimestamp} />
+      ) : (
+        '-'
+      ),
+    },
+  ];
+
   return (
     <Box
       className={`${grid.col} ${grid['col-xs-12']} ${grid['col-md-3']} ${styles.detailsContainer} details-container`}
@@ -29,42 +65,22 @@ const DetailsView = ({ data }) => {
         <h1 className={styles.heading}>{t('Details')}</h1>
       </BoxHeader>
       <BoxContent className={`${styles.details} details`}>
-        <div className={`${grid.row} ${styles.itemContainer}`}>
-          <Icon name="star" className={styles.icon} />
-          <div className={`${grid.col} ${styles.item}`}>
-            <div className={`${styles.title} ${theme}`}>{t('Rank')}</div>
-            <div className={styles.value}>{rank || '-'}</div>
-          </div>
-        </div>
-        <div className={`${grid.row} ${styles.itemContainer}`}>
-          <Icon name="clockActive" className={styles.icon} />
-          <div className={`${grid.col} ${styles.item}`}>
-            <div className={`${styles.title} ${theme}`}>{t('Status')}</div>
-            <div className={`${styles.value} ${styles.capitalized}`}>{status.toLowerCase()}</div>
-          </div>
-        </div>
-        <div className={`${grid.row} ${styles.itemContainer}`}>
-          <Icon name="weight" className={styles.icon} />
-          <div className={`${grid.col} ${styles.item}`}>
-            <div className={`${styles.title} ${theme}`}>{t('Validator weight')}</div>
-            <div className={styles.value}>
-              <TokenAmount val={data.totalStakeReceived} token={tokenMap.LSK.key} />
-            </div>
-          </div>
-        </div>
-        <div className={`${grid.row} ${styles.itemContainer}`}>
-          <Icon name="calendar" className={styles.icon} />
-          <div className={`${grid.col} ${styles.item}`}>
-            <div className={`${styles.title} ${theme}`}>{t('Last block forged')}</div>
-            <div className={styles.value}>
-              {latestBlockTimestamp ? (
-                <DateTimeFromTimestamp fulltime className="date" time={latestBlockTimestamp} />
-              ) : (
-                '-'
-              )}
+        {displayList.map(({ icon, label, value, onEdit }) => (
+          <div key={label} className={`${grid.row} ${styles.itemContainer}`}>
+            <Icon name={icon} className={styles.icon} />
+            <div className={`${grid.col} ${styles.item}`}>
+              <div className={`${styles.title} ${theme}`}>
+                <span>{label} </span>
+                {onEdit && typeof onEdit === 'function' && (
+                  <button onClick={onEdit} className={styles.editBtn}>
+                    <Icon name="editActiveIcon" />
+                  </button>
+                )}
+              </div>
+              <div className={styles.value}>{value}</div>
             </div>
           </div>
-        </div>
+        ))}
       </BoxContent>
     </Box>
   );