Merge pull request #4173 from LiskHQ/4143-available-voting-balance-qu…

…eue-issue

Fix dynamic voting balance issue - Closes #4143

i18n/locales/en/common.json

@@ -56,7 +56,7 @@
   "Apply filters": "Apply filters",
   "At this moment there is a connection problem with the tweets feed": "At this moment there is a connection problem with the tweets feed",
   "Auto sign out": "Auto sign out",
-  "Available balance": "Available balance",
+  "Available balance for voting": "Available balance for voting",
   "Awaiting slot": "Awaiting slot",
   "BTC address": "BTC address",
   "Back": "Back",
@@ -65,6 +65,7 @@
   "Balance reclaimed successfully": "Balance reclaimed successfully",
   "Balance to reclaim": "Balance to reclaim",
   "Balance:": "Balance:",
+  "Based on your available balance and rounded down to a multiple of 10 LSK, your total remaining balance is {{maxAmount}} LSK": "Based on your available balance and rounded down to a multiple of 10 LSK, your total remaining balance is {{maxAmount}} LSK",
   "Before you continue using Lisk, please read and accept the": "Before you continue using Lisk, please read and accept the",
   "Below are the details of your locked balances and the unlock waiting periods. From here you can submit an unlock transaction when waiting periods are over.": "Below are the details of your locked balances and the unlock waiting periods. From here you can submit an unlock transaction when waiting periods are over.",
   "Block": "Block",
@@ -481,6 +482,7 @@
   "The message signature has been canceled on your {{model}}": "The message signature has been canceled on your {{model}}",
   "The minimum required balance to register is {{minBalance}} LSK": "The minimum required balance to register is {{minBalance}} LSK",
   "The number of transactions submitted over the selected time period.": "The number of transactions submitted over the selected time period.",
+  "The provided amount is higher than available voting balance.": "The provided amount is higher than available voting balance.",
   "The signature is correct": "The signature is correct",
   "The signature is incorrect": "The signature is incorrect",
   "The statistics shown only reflects peers connected to the current Lisk Service node.": "The statistics shown only reflects peers connected to the current Lisk Service node.",

src/components/screens/editVote/editVotes.test.js

@@ -149,7 +149,7 @@ describe('EditVote', () => {
     amountField = wrapper.find('input[name="vote"]').at(0);
 
     expect(amountField.find('.error')).toHaveClassName('error');
-    expect(wrapper.find('.amount Feedback')).toHaveText('Provided amount is higher than your current balance.');
+    expect(wrapper.find('.amount Feedback')).toHaveText('The provided amount is higher than available voting balance.');
   });
 
   it('should display error when voting if called with amount that is zero or negative', () => {

src/components/screens/editVote/index.js

@@ -7,7 +7,6 @@ import { compose } from 'redux';
 import { selectSearchParamValue, removeSearchParamsFromUrl } from '@utils/searchParams';
 import { tokenMap } from '@constants';
 import { voteEdited } from '@actions';
-import { selectAccountBalance } from '@store/selectors';
 import { toRawLsk, fromRawLsk } from '@utils/lsk';
 import Dialog from '@toolbox/dialog/dialog';
 import Box from '@toolbox/box';
@@ -50,7 +49,6 @@ const AddVote = ({
   const start = selectSearchParamValue(history.location.search, 'start');
   const end = selectSearchParamValue(history.location.search, 'end');
   const existingVote = useSelector(state => state.voting[address || host]);
-  const balance = useSelector(selectAccountBalance);
   const [voteAmount, setVoteAmount] = useVoteAmountField(existingVote ? fromRawLsk(existingVote.unconfirmed) : '');
   const mode = existingVote ? 'edit' : 'add';
   const [maxAmount, setMaxAmount] = useState(0);
@@ -94,14 +92,14 @@ const AddVote = ({
             <span>{titles.description}</span>
           </BoxInfoText>
           <BoxInfoText className={styles.accountInfo}>
-            <p className={styles.balanceTitle}>{t('Available balance')}</p>
+            <p className={styles.balanceTitle}>{t('Available balance for voting')}</p>
             <div className={styles.balanceDetails}>
               <span className={styles.lskValue}>
-                <LiskAmount val={balance} token={tokenMap.LSK.key} />
+                <LiskAmount val={maxAmount} token={tokenMap.LSK.key} />
               </span>
               <Converter
                 className={styles.fiatValue}
-                value={fromRawLsk(balance)}
+                value={fromRawLsk(maxAmount)}
                 error=""
               />
             </div>
@@ -119,6 +117,7 @@ const AddVote = ({
               maxAmount={{ value: maxAmount }}
               displayConverter
               label={t('Vote amount (LSK)')}
+              labelClassname={`${styles.fieldLabel}`}
               placeholder={t('Insert vote amount')}
               useMaxLabel={t('Use maximum amount')}
               useMaxWarning={t('Caution! You are about to send the majority of your balance')}

src/components/screens/editVote/useVoteAmountField.js

@@ -24,7 +24,7 @@ const getAmountFeedbackAndError = (value, balance, minValue, inputValue) => {
     value,
     token: tokenMap.LSK.key,
     funds: parseInt(balance, 10),
-    checklist: ['NEGATIVE_VOTE', 'ZERO', 'VOTE_10X', 'INSUFFICIENT_FUNDS', 'MIN_BALANCE', 'FORMAT'],
+    checklist: ['NEGATIVE_VOTE', 'ZERO', 'VOTE_10X', 'INSUFFICIENT_VOTE_FUNDS', 'MIN_BALANCE', 'FORMAT'],
     minValue,
     inputValue,
   });

src/components/shared/amountField/amountField.css

@@ -10,6 +10,10 @@
   }
 }
 
+.customAmountFieldHeader {
+  justify-content: normal !important;
+}
+
 .amountField {
   align-items: center;
   display: flex;
@@ -46,6 +50,18 @@
   margin-bottom: 8px;
 }
 
+.customFieldLabel {
+  height: 32px;
+  margin-bottom: 0 !important;
+  margin-right: 16px;
+}
+
+.tooltipContainer {
+  white-space: normal;
+  width: 200px;
+  word-wrap: break-word;
+}
+
 .entireBalanceWarning {
   display: flex;
   justify-content: flex-start;

src/components/shared/amountField/index.js

@@ -6,6 +6,7 @@ import { fromRawLsk } from '@utils/lsk';
 import { Input } from '@toolbox/inputs';
 import { TertiaryButton } from '@toolbox/buttons';
 import Icon from '@toolbox/icon';
+import Tooltip from '@toolbox/tooltip/tooltip';
 import Converter from '../converter';
 import styles from './amountField.css';
 
@@ -23,11 +24,13 @@ const MaxAmountWarning = ({ resetInput, message }) => {
   );
 };
 
+// eslint-disable-next-line complexity
 const AmountField = ({
   amount, maxAmount, onChange, className,
-  label, useMaxLabel, placeholder, name,
+  label, labelClassname, useMaxLabel, placeholder, name,
   displayConverter, useMaxWarning,
 }) => {
+  const { t } = useTranslation();
   const [showEntireBalanceWarning, setShowEntireBalanceWarning] = useState(false);
   const setEntireBalance = (e) => {
     e.preventDefault();
@@ -57,8 +60,8 @@ const AmountField = ({
 
   return (
     <label className={`${styles.fieldGroup} ${amount.error ? styles.error : ''} ${className}`}>
-      <div className={`${styles.amountFieldHeader}`} onClick={ignoreClicks}>
-        { label && <span className={`${styles.fieldLabel}`}>{label}</span> }
+      <div className={labelClassname ? `${styles.customAmountFieldHeader} ${styles.amountFieldHeader}` : `${styles.amountFieldHeader}`} onClick={ignoreClicks}>
+        { label && <span className={labelClassname ? `${styles.customFieldLabel} ${styles.fieldLabel} label` : `${styles.fieldLabel}`}>{label}</span> }
         {
           useMaxLabel && (
             <TertiaryButton
@@ -67,6 +70,12 @@ const AmountField = ({
               size="xs"
             >
               {useMaxLabel}
+              <Tooltip
+                position="bottom"
+                tooltipClassName={`${styles.tooltipContainer}`}
+              >
+                <span>{t('Based on your available balance and rounded down to a multiple of 10 LSK, your total remaining balance is {{maxAmount}} LSK', { maxAmount: fromRawLsk(maxAmount.value) })}</span>
+              </Tooltip>
             </TertiaryButton>
           )
         }

src/utils/validators.js

@@ -129,6 +129,10 @@ export const validateAmountFormat = ({
       message: i18n.t('Provided amount is higher than your current balance.'),
       fn: () => funds < toRawLsk(numeral(value).value()),
     },
+    INSUFFICIENT_VOTE_FUNDS: {
+      message: i18n.t('The provided amount is higher than available voting balance.'),
+      fn: () => funds < toRawLsk(numeral(value).value()),
+    },
     MIN_BALANCE: {
       message: i18n.t('Provided amount will result in a wallet with less than the minimum balance.'),
       fn: () => {