Enter seed phrase component refactored according to new design

storybook/pages/BackupSeedModalPage.qml

@@ -14,7 +14,7 @@ Item {
 
     BackupSeedModal {
         id: popup
-        mnemonic: "apple banana cat cow catalog catch category cattle dog elephant fish grape"
+        mnemonic: "apple banana cat country catalog catch category cattle dog elephant fish grape"
         visible: true
         closePolicy: Popup.NoAutoClose
         onBackupSeedphraseFinished: function(removeSeedphrase) {

storybook/pages/EnterSeedPhrasePage.qml

@@ -1,50 +1,94 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
+import QtQml
 
-import shared.panels
+import StatusQ
+import StatusQ.Core
+import StatusQ.Core.Utils
+import StatusQ.Controls
+import StatusQ.Components
+import StatusQ.Core.Theme
 
+import Models
 import Storybook
 
+import SortFilterProxyModel
+import QtModelsToolkit
+
+import shared
+import shared.panels
+import utils
+
 Item {
-    QtObject {
-        id: mockDriver
+    id: root
 
-        readonly property var seedWords: ["apple", "banana", "cat", "cow", "catalog", "catch", "category", "cattle", "dog", "elephant", "fish", "grape"]
+    MouseArea {
+        anchors.fill: parent
 
-        function isSeedPhraseValid(mnemonic: string) {
-            return mnemonic === seedWords.join(" ")
-        }
+        onClicked: root.focus = true
+    }
+
+    function isValid(mnemonic) {
+        return mnemonic === sampleValidPhrase
     }
 
-    EnterSeedPhrase {
-        id: panel
-        anchors.centerIn: parent
-        isSeedPhraseValid: mockDriver.isSeedPhraseValid
+    readonly property string sampleValidPhrase:
+        "abandon baby cat dad eager fabric gadget habit ice jacket kangaroo lab"
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.margins: 150
+        border.width: 1
+        color: "transparent"
+
+        StatusScrollView {
+            id: scrollView
+
+            anchors.fill: parent
+            contentWidth: availableWidth
+
+            EnterSeedPhrase {
+                id: enterSeedPhrase
+
+                property var validSeedPhrase: []
+
+                flickable: scrollView.flickable
+
+                width: scrollView.availableWidth
+                dictionary: BIP39_en {}
+
+                onSeedPhraseProvided: seedPhrase => {
+                    const valid = seedPhrase.join(" ") === sampleValidPhrase
+                    setError(valid ? "" : "Invalid seed phrase!")
+                }
+
+                onSeedPhraseAccepted: validSeedPhrase = seedPhrase
+            }
+        }
     }
 
-    Row {
+    ColumnLayout {
         anchors.bottom: parent.bottom
-        anchors.right: parent.right
-        anchors.margins: 10
-        spacing: 8
+
+        Button {
+            text: "Copy valid seed phrase to keyboard: " + root.sampleValidPhrase
+
+            onClicked: ClipboardUtils.setText(root.sampleValidPhrase)
+        }
 
         Label {
-            anchors.verticalCenter: parent.verticalCenter
-            text: "Valid: %1".arg(panel.seedPhraseIsValid ? "yes" : "no")
+            text: "is seedphrase valid: " + enterSeedPhrase.seedPhraseIsValid
         }
-        Button {
-            text: "Paste seed phrase"
-            focusPolicy: Qt.NoFocus
-            onClicked: {
-                for (let i = 1;; i++) {
-                    const input = StorybookUtils.findChild(panel, `enterSeedPhraseInputField${i}`)
 
-                    if (input === null)
-                        break
+        Label {
+            text: "valid seed phrase provided: " + enterSeedPhrase.validSeedPhrase.toString()
+        }
 
-                    input.text = mockDriver.seedWords[i-1]
-                }
-            }
+        Label {
+            text: JSON.stringify(enterSeedPhrase.seedPhrase)
+
+            Layout.bottomMargin: 20
         }
     }
 }

storybook/pages/OnboardingLayoutPage.qml

@@ -29,7 +29,7 @@ SplitView {
     QtObject {
         id: mockDriver
 
-        readonly property string mnemonic: "apple banana cat cow catalog catch category cattle dog elephant fish grape"
+        readonly property string mnemonic: "apple banana cat country catalog catch category cattle dog elephant fish cat"
         readonly property string pin: "111111"
         readonly property string puk: "111111111111"
         readonly property string password: "somepassword"
@@ -105,7 +105,7 @@ SplitView {
                 }
             }
 
-            function setPuk(puk: string) { // -> bool
+            function setPuk(puk: string): bool {
                 logs.logEvent("OnboardingStore.setPuk", ["puk"], arguments)
                 const valid = puk === mockDriver.puk
                 if (!valid)
@@ -125,11 +125,11 @@ SplitView {
                     authorizationState = Onboarding.AuthorizationState.WrongPin
             }
 
-            function loadMnemonic(mnemonic: string) { // -> void
+            function loadMnemonic(mnemonic: string) {
                 logs.logEvent("OnboardingStore.loadMnemonic", ["mnemonic"], arguments)
             }
 
-            function exportRecoverKeys() { // -> void
+            function exportRecoverKeys() {
                 logs.logEvent("OnboardingStore.exportRecoverKeys")
             }
 
@@ -143,33 +143,33 @@ SplitView {
             }
 
             // password
-            function getPasswordStrengthScore(password: string) { // -> int
+            function getPasswordStrengthScore(password: string): int {
                 logs.logEvent("OnboardingStore.getPasswordStrengthScore", ["password"], arguments)
                 return Math.min(password.length-1, 4)
             }
 
             // seedphrase/mnemonic
-            function validMnemonic(mnemonic: string) { // -> bool
+            function validMnemonic(mnemonic: string): bool {
                 logs.logEvent("OnboardingStore.validMnemonic", ["mnemonic"], arguments)
                 return mnemonic === mockDriver.mnemonic
             }
 
-            function isMnemonicDuplicate(mnemonic: string) { // -> bool
+            function isMnemonicDuplicate(mnemonic: string): bool {
                 logs.logEvent("OnboardingStore.isMnemonicDuplicate", ["mnemonic"], arguments)
                 return false
             }
 
-            function generateMnemonic() { // -> string
+            function generateMnemonic(): string {
                 logs.logEvent("OnboardingStore.generateMnemonic()")
                 return mockDriver.mnemonic
             }
 
-            function validateLocalPairingConnectionString(connectionString: string) { // -> bool
+            function validateLocalPairingConnectionString(connectionString: string): bool {
                 logs.logEvent("OnboardingStore.validateLocalPairingConnectionString", ["connectionString"], arguments)
                 return !Number.isNaN(parseInt(connectionString))
             }
 
-            function inputConnectionStringForBootstrapping(connectionString: string) { // -> void
+            function inputConnectionStringForBootstrapping(connectionString: string) {
                 logs.logEvent("OnboardingStore.inputConnectionStringForBootstrapping", ["connectionString"], arguments)
             }
 
@@ -271,7 +271,7 @@ SplitView {
         }
 
         Button {
-            text: "Paste seed phrase"
+            text: "Copy seed phrase to keyboard"
             focusPolicy: Qt.NoFocus
 
             anchors.bottom: parent.bottom
@@ -280,20 +280,7 @@ SplitView {
 
             visible: onboarding.focusedObjectName.startsWith("enterSeedPhraseInputField")
 
-            onClicked: {
-                const words = Utils.splitWords(mockDriver.mnemonic)
-
-                for (let i = 1;; i++) {
-                    const input = StorybookUtils.findChild(
-                                    onboarding.currentPage,
-                                    `enterSeedPhraseInputField${i}`)
-
-                    if (input === null)
-                        break
-
-                    input.text = words[i - 1]
-                }
-            }
+            onClicked: ClipboardUtils.setText(mockDriver.mnemonic)
         }
 
         Button {