Merge pull request #5491 from LiskHQ/5487-fix-crash-on-edit-fee

Fix crash on edit fee

e2e/features/requestToken/RequestToken.feature

@@ -43,16 +43,16 @@ Feature: Request Token
     Then button with text "Copy link" should be enabled
     And Element 'qrContainer' should not contain class 'disabled'
     Given I click on a button with text "Add message (Optional)"
-    And I type "hello&(&*#(@))*!#@$^%#@&@)world!@&$^#message*@)#*)@$$@&^!(@#)~~@!@#" in "reference-field"
-    Then I should possibly see "-3 bytes left"
+    And I type "hello(*#(@))*!#@$^%#@@)world!@$^#message*@)#*)@$$@^!(@#)~~@!@#tester12334" in "reference-field"
+    Then I should possibly see "-9 bytes left"
     And Element 'qrContainer' should contain class 'disabled'
 
   Scenario: Request token should generate a copy link if message is within 64 characters
     Given I type "10" in "amount"
     Then button with text "Copy link" should be enabled
     And Element 'qrContainer' should not contain class 'disabled'
     Given I click on a button with text "Add message (Optional)"
-    And I type "hello&(&*#(@))*!#@$^%#@&@)world!@&$^#message*@)#*)@$$@&^!(@#)~~@" in "reference-field"
+    And I type "hello(*#(@))*!#@$^%#@@)world!@$^#message*@)#*)@$$@^!(@#)~~@test1" in "reference-field"
     Then I should possibly see "0 bytes left"
     And I click on a button with text "Copy link"
-    Then Clipboard should contain "lisk://wallet?modal=send&recipient=lskm9syv4wrjcjczpegz65zqxhk2cp9dkejs5wbjb&amount=10&reference=hello%26(%26*%23(%40))*!%23%40%24%5E%25%23%40%26%40)world!%40%26%24%5E%23message*%40)%23*)%40%24%24%40%26%5E!(%40%23)~~%40&token=0400000000000000&recipientChain=04000000"
+    Then Clipboard should contain "lisk://wallet?modal=send&recipient=lskm9syv4wrjcjczpegz65zqxhk2cp9dkejs5wbjb&amount=10&reference=hello(*%23(%40))*!%23%40%24%5E%25%23%40%40)world!%40%24%5E%23message*%40)%23*)%40%24%24%40%5E!(%40%23)~~%40test1&token=0400000000000000&recipientChain=04000000"

src/locales/en/common.json

@@ -5,7 +5,6 @@
   "\"Lisk\" will be the default mainchain application, please enter your custom network to be added to the wallet.": "\"Lisk\" will be the default mainchain application, please enter your custom network to be added to the wallet.",
   "\"{{username}}\" is already taken.": "\"{{username}}\" is already taken.",
   "(12-24 mnemonic phrases supported)": "(12-24 mnemonic phrases supported)",
-  "64 bytes left": "64 bytes left",
   "A bit more. Make sure to type at least 3 characters.": "A bit more. Make sure to type at least 3 characters.",
   "A new management feature allows you to seamlessly add and switch between applications. The dedicated application tab provides a comprehensive overview of registered, active, and terminated blockchain applications, and statistics.": "A new management feature allows you to seamlessly add and switch between applications. The dedicated application tab provides a comprehensive overview of registered, active, and terminated blockchain applications, and statistics.",
   "A required signatory account": "A required signatory account",

src/modules/pos/validator/components/SentStakes/SentStakes.css

@@ -50,10 +50,6 @@
 
   & button {
     padding: 0px 45px !important;
-
-    &:first-child:hover {
-      color: var(--color-black);
-    }
   }
 }
 

src/modules/token/fungible/components/MessageField/MessageField.js

@@ -82,7 +82,7 @@ function MessageField({
           }`}
         >
           {feedback}
-          {!!feedback && (
+          {!!feedback && !error && (
             <Tooltip position="right" title={t('Bytes counter')}>
               <p className={styles.tooltipText}>
                 {t(`Lisk counts your message in bytes, so keep in mind

src/modules/token/fungible/hooks/useMessageField.js

@@ -3,22 +3,27 @@ import { useTranslation } from 'react-i18next';
 import { maxMessageLength } from '@transaction/configuration/transactions';
 import { sizeOfString } from 'src/utils/helpers';
 
+const getBytesLeftMessage = (value, t) => {
+  const byteCount = sizeOfString(value);
+  return t('{{length}} bytes left', { length: maxMessageLength - byteCount });
+};
+
 const useMessageField = (initialValue) => {
   const { t } = useTranslation();
   const [messageField, setMessage] = useState({
     error: false,
     value: initialValue,
-    feedback: t('64 bytes left'),
+    feedback: getBytesLeftMessage(initialValue, t),
     byteCount: sizeOfString(initialValue),
   });
 
   const onMessageInputChange = ({ target: { value } }) => {
     const byteCount = sizeOfString(value);
     setMessage({
       byteCount,
-      error: byteCount > maxMessageLength,
       value,
-      feedback: t('{{length}} bytes left', { length: maxMessageLength - byteCount }),
+      error: byteCount > maxMessageLength,
+      feedback: getBytesLeftMessage(value, t),
     });
   };
 

src/modules/transaction/components/TransactionPriority/FeeViewer.js

@@ -118,10 +118,9 @@ const FeesViewer = ({
     }));
 
     setCustomFee((state) => ({
-      value: {
-        ...state.value,
-        [label]: customFeeInput,
-      },
+      ...(!customFeeStatus && {
+        value: { ...state.value, [label]: customFeeInput },
+      }),
       feedback: { ...state.feedback, [label]: customFeeStatus },
       error: { ...state.error, [label]: !!customFeeStatus },
     }));

src/modules/wallet/components/request/request.js

@@ -23,6 +23,7 @@ import RequestWrapper from './requestWrapper';
 import styles from './request.css';
 import WalletVisual from '../walletVisual';
 
+const restrictedCharacters = ['&'];
 const requestInitState = {
   amount: {
     error: false,
@@ -90,7 +91,6 @@ const Request = () => {
   const networkSupportedTokens = useNetworkSupportedTokens(state.recipientChain.value);
   const { recipientChain, token, amount, reference } = state;
   const selectedToken = networkSupportedTokens.data?.find(({ tokenID }) => tokenID === token.value);
-
   const shareLink = useMemo(
     () =>
       Object.keys(state).reduce((link, fieldName) => {
@@ -104,7 +104,6 @@ const Request = () => {
       }, `lisk://wallet?modal=send&recipient=${address}`),
     [address, state]
   );
-
   const mainChainApplication = useMemo(
     () => applications.find(({ chainID }) => /0{4}$/.test(chainID)),
     [applications]
@@ -119,7 +118,7 @@ const Request = () => {
 
   const handleFieldChange = ({ target }) => {
     const byteCount = sizeOfString(target.value);
-    const error =
+    let error =
       target.name === 'amount'
         ? validateAmount({
             amount: target.value,
@@ -135,16 +134,27 @@ const Request = () => {
       target.value = leadingPoint.test(target.value) ? `0${target.value}` : target.value;
       feedback = error || feedback;
     } else if (target.name === 'reference' && byteCount > 0) {
-      feedback = t('{{length}} bytes left', { length: maxMessageLength - byteCount });
+      const hasRestirctedChar = restrictedCharacters.some((character) =>
+        target.value?.includes(character)
+      );
+
+      if (hasRestirctedChar) {
+        error = true;
+        feedback = `${restrictedCharacters.join(',')} ${
+          restrictedCharacters.length > 1 ? 'are' : 'is a'
+        } restricted characters`;
+      } else {
+        feedback = t('{{length}} bytes left', { length: maxMessageLength - byteCount });
+      }
     }
 
     dispatch({
       [target.name]: {
         ...state[target.name],
         feedback,
         error: !!error,
-        value: target.value,
         loading: false,
+        value: target.value,
       },
     });
   };

src/theme/buttons/css/base.css

@@ -66,10 +66,6 @@
   &:disabled {
     opacity: 0.58;
     cursor: default;
-
-    &:hover {
-      color: initial;
-    }
   }
 }