Fix dynamic voting balance issue - Closes #4143

i18n/locales/en/common.json

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

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);
@@ -97,11 +95,11 @@ const AddVote = ({
             <p className={styles.balanceTitle}>{t('Available balance')}</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/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>
           )
         }