fix: fix seed phrase modal UI logic

Fixes #1891

ui/imports/Utils.qml

@@ -125,10 +125,10 @@ QtObject {
 
     function isMnemonic(value) {
         if(!value.match(/^([a-z\s]+)$/)){
+            console.log('allo')
             return false;
         }
-        var len = value.split(/\s|,/).length;
-        return  len >= 12 && len <= 24 && len % 3 == 0;
+        return  Utils.seedPhraseValidWordCount(value);
     }
 
     function compactAddress(addr, numberOfChars) {
@@ -428,20 +428,24 @@ QtObject {
         }
     }
 
-    function isPunct(c) {
-        return /(!|\@|#|\$|%|\^|&|\*|\(|\)|_|\+|\||-|=|\\|{|}|[|]|"|;|'|<|>|\?|,|\.|\/)/.test(c)
-    }
-
     function getTick(wordCount) {
         return (wordCount === 12 || wordCount === 15 ||
                 wordCount === 18 || wordCount === 21 || wordCount === 24)
                 ? "✓ " : "";
     }
 
+    function isValidNumberOfWords(wordCount) {
+        return !!getTick(wordCount);
+    }
+
     function countWords(text) {
         if (text.trim() === "")
             return 0;
-        return text.trim().split(" ").length;
+        return text.trim().replace(/  +/g, " ").split(" ").length;
+    }
+
+    function seedPhraseValidWordCount(text) {
+        return isValidNumberOfWords(countWords(text))
     }
 
     /**
@@ -524,4 +528,9 @@ QtObject {
     function deduplicate(array) {
         return Array.from(new Set(array))
     }
+
+    // Leave this function at the bottom of the file as QT Creator messes up the code color after this
+    function isPunct(c) {
+        return /(!|\@|#|\$|%|\^|&|\*|\(|\)|_|\+|\||-|=|\\|{|}|[|]|"|;|'|<|>|\?|,|\.|\/)/.test(c)
+    }
 }

ui/onboarding/EnterSeedPhraseModal.qml

@@ -8,6 +8,7 @@ import "../shared/status"
 ModalPopup {
     property var onConfirmSeedClick: function () {}
     property alias error: errorText.text
+    property bool correctWordCount: Utils.seedPhraseValidWordCount(mnemonicTextField.text)
     id: popup
     //% "Enter seed phrase"
     title: qsTrId("enter-seed-phrase")
@@ -39,6 +40,8 @@ ModalPopup {
         selectionColor: Style.current.secondaryBackground
         selectedTextColor: Style.current.secondaryText
 
+        Keys.onReleased: errorText.text = ""
+
         color: Style.current.textColor
 
         Keys.onReturnPressed: {
@@ -49,16 +52,18 @@ ModalPopup {
     }
 
     StyledText {
+        visible: errorText.text === ""
         text: Utils.seedPhraseWordCountText(mnemonicTextField.text)
         anchors.right: parent.right
         anchors.top: mnemonicTextField.bottom
         anchors.topMargin: Style.current.smallPadding
-        color: Style.current.secondaryText
+        color: correctWordCount ? Style.current.textColor : Style.current.secondaryText
     }
 
     StyledText {
         id: errorText
         visible: !!text && text != ""
+        wrapMode: Text.WordWrap
         color: Style.current.danger
         anchors.left: parent.left
         anchors.right: parent.right
@@ -87,7 +92,7 @@ ModalPopup {
         icon.name: "arrow-right"
         icon.width: 20
         icon.height: 16
-        enabled: mnemonicTextField.text.length > 0
+        enabled: correctWordCount
 
         onClicked : {
             if (mnemonicTextField.text === "") {

ui/onboarding/ExistingKey.qml

@@ -17,11 +17,16 @@ Item {
         onConfirmSeedClick: function (mnemonic) {
             error = "";
             
-            if(!Utils.isMnemonic(mnemonic)){
+            if (!Utils.isMnemonic(mnemonic)) {
                 //% "Invalid seed phrase"
                 error = qsTrId("custom-seed-phrase")
             } else {
                 error = onboardingModel.validateMnemonic(mnemonic)
+                const regex = new RegExp('word [a-z]+ not found in the dictionary', 'i');
+                if (regex.test(error)) {
+                    error = qsTr('Invalid seed phrase') + '. ' +
+                            qsTr("This seed phrase doesn't match our supported dictionary. Check for misspelled words.")
+                }
             }
 
             if (error === "") {