fix(@desktop): Refactor Backupseed modal

Close #6144

ui/app/AppLayouts/Chat/panels/communities/CommunityEditSettingsPanel.qml

@@ -91,6 +91,7 @@ Flickable {
 
                 StatusStackModal {
                     anchors.centerIn: parent
+                    width: 640
                     replaceItem: CommunityColorPanel {
                         Component.onCompleted: color = colorPicker.color
                         onAccepted: {
@@ -113,6 +114,7 @@ Flickable {
 
                 StatusStackModal {
                     anchors.centerIn: parent
+                    width: 640
                     replaceItem: CommunityTagsPanel {
                         Component.onCompleted: {
                             tags = tagsPicker.tags;

ui/app/AppLayouts/CommunitiesPortal/popups/CreateCommunityPopup.qml

@@ -26,6 +26,13 @@ StatusStackModal {
     property var store
 
     stackTitle: qsTr("Create New Community")
+    width: 640
+
+    nextButton: StatusButton {
+        text: qsTr("Next")
+        enabled:  nameInput.valid && descriptionTextInput.valid
+        onClicked: currentIndex++
+    }
 
     finishButton: StatusButton {
         text: qsTr("Create Community")
@@ -36,9 +43,6 @@ StatusStackModal {
     stackItems: [
         Flickable {
             id: generalView
-
-            readonly property bool canGoNext: nameInput.valid && descriptionTextInput.valid
-
             clip: true
             contentHeight: generalViewLayout.height
             implicitHeight: generalViewLayout.implicitHeight
@@ -125,7 +129,6 @@ StatusStackModal {
         },
         ColumnLayout {
             id: introOutroMessageView
-
             spacing: 12
 
             CommunityIntroMessageInput {

ui/app/AppLayouts/Profile/popups/BackupSeedModal.qml

@@ -14,102 +14,113 @@ import StatusQ.Core.Theme 0.1
 
 import "backupseed"
 
-StatusModal {
+StatusStackModal {
-    id: popup
+    id: root
-    width: 480
-    height: 748
-    header.title: qsTr("Back up your seed phrase")
 
     property var privacyStore
 
-    rightButtons: [
+    QtObject {
-        StatusFlatButton {
+        id: d
-            text: "Not Now"
+
-            visible: (stack.currentIndex === 0)
+        readonly property int firstRandomNo: getRandomWordNumber()
-            border.color: Theme.palette.baseColor2
+        readonly property int secondRandomNo: {
-            onClicked: {
+            var num = firstRandomNo;
-                popup.close();
+            while (num === firstRandomNo) {
+                num = getRandomWordNumber();
             }
-        },
+            return num;
-        StatusButton {
+        }
+
+        property alias seedHidden: confirmSeedPhrase.hideSeed
+        property alias seedStored: confirmStoringSeedPhrase.seedStored
+
+        property alias validFirstSeedWord: confirmFirstWord.inputValid
+        property alias validSecondSeedWord: confirmSecondWord.inputValid
+
+        property Item skipButton: StatusButton {
+            visible: currentIndex === 0
+            border.color: Theme.palette.baseColor2
+            text: qsTr("Not Now")
+            onClicked: root.close()
+        }
+
+        function getRandomWordNumber() {
+            return Math.floor(Math.random() * 12);
+        }
+    }
+
+    width: 480
+    header.title: qsTr("Back up your seed phrase")
+    rightButtons: [ nextButton, finishButton, d.skipButton ]
+
+    nextButton: StatusButton {
         enabled: {
-                if (stack.currentIndex === 0) {
+            switch (root.currentIndex) {
-                    return acknowledgment.allAccepted;
-                } else {
-                    switch (backUp.bar.currentIndex) {
             case 0:
-                        return !backUp.seedHidden;
+                return acknowledgment.allAccepted;
             case 1:
-                        return backUp.validFirstSeedWord;
+                return !d.seedHidden;
             case 2:
-                        return backUp.validSecondSeedWord;
+                return d.validFirstSeedWord;
             case 3:
-                        return backUp.seedStored;
+                return d.validSecondSeedWord;
             default:
                 return true;
             }
         }
-            }
         text: {
-                if (stack.currentIndex === 1) {
+            switch (root.currentIndex) {
-                    if (backUp.bar.currentIndex === 0) {
-                        return qsTr("Confirm Seed Phrase");
-                    } else if (backUp.bar.currentIndex === 1 ||
-                               backUp.bar.currentIndex === 2) {
-                        return qsTr("Continue");
-                    } else {
-                        return qsTr("Complete & Delete My Seed Phrase");
-                    }
-                } else {
-                    return qsTr("Confirm Seed Phrase");
-                }
-            }
-            onClicked: {
-                if (stack.currentIndex === 0) {
-                    stack.currentIndex = 1;
-                } else {
-                    switch (backUp.bar.currentIndex) {
             case 0:
             case 1:
+                return  qsTr("Confirm Seed Phrase");
             case 2:
-                            backUp.bar.currentIndex++;
-                            break;
             case 3:
-                            popup.privacyStore.removeMnemonic();
+                return qsTr("Continue");;
-                            popup.close();
+            default:
-                            break;
+                return "";
             }
         }
+        onClicked: root.currentIndex++
     }
-        }
-    ]
 
-    leftButtons: [
+    finishButton: StatusButton {
-        StatusRoundButton {
+        text: qsTr("Complete & Delete My Seed Phrase")
-            visible: (stack.currentIndex === 1)
+        enabled: d.seedStored
-            icon.name: "arrow-right"
-            rotation: 180
         onClicked: {
-                if (backUp.bar.currentIndex === 0) {
+            root.privacyStore.removeMnemonic();
-                    stack.currentIndex = 0;
+            root.close();
-                } else {
-                    backUp.bar.currentIndex--;
         }
     }
+
+    subHeaderItem: SubheaderTabBar {
+        // Count without Acknowledgements
+        steps: root.itemsCount - 1
+        currentIndex: root.currentIndex - 1
+        visible: root.currentIndex > 0
+    }
+
+    stackItems: [
+        Acknowledgements {
+            id: acknowledgment
+        },
+        ConfirmSeedPhrasePanel {
+            id: confirmSeedPhrase
+            seedPhrase: root.privacyStore.getMnemonic().split(" ")
+        },
+        BackupSeedStepBase {
+            id: confirmFirstWord
+            titleText: qsTr("Confirm word #%1 of your seed phrase").arg(d.firstRandomNo + 1)
+            wordRandomNumber: d.firstRandomNo
+            wordAtRandomNumber: root.privacyStore.getMnemonicWordAtIndex(d.firstRandomNo)
+        },
+        BackupSeedStepBase {
+            id: confirmSecondWord
+            titleText: qsTr("Confirm word #%1 of your seed phrase").arg(d.secondRandomNo + 1)
+            wordRandomNumber: d.secondRandomNo
+            wordAtRandomNumber: root.privacyStore.getMnemonicWordAtIndex(d.secondRandomNo)
+        },
+        ConfirmStoringSeedPhrasePanel {
+            id: confirmStoringSeedPhrase
         }
     ]
-
-    contentItem: StackLayout {
-        id: stack
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.padding
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        anchors.top: parent.top
-        anchors.topMargin: 80
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: 88
-        Acknowledgements { id: acknowledgment }
-        Backup { id: backUp; privacyStore: popup.privacyStore }
-    }
 }

ui/app/AppLayouts/Profile/popups/backupseed/Acknowledgements.qml

@@ -3,22 +3,41 @@ import QtQuick.Layouts 1.12
 
 import StatusQ.Controls 0.1
 import StatusQ.Core.Theme 0.1
+
 import shared.panels 1.0
 import utils 1.0
 
-Item {
+ColumnLayout {
-    anchors.fill: parent
+    id: root
-    objectName: "acknowledgment"
+
-    property bool allAccepted: (havePen.checked && writeDown.checked && storeIt.checked)
+    readonly property bool allAccepted: havePen.checked && writeDown.checked && storeIt.checked
+
+    spacing: Style.current.padding
+    implicitHeight: 520
+
+    Flickable {
+        id: flick
+        clip: true
+        contentHeight: flickLayout.height
+        implicitHeight: flickLayout.implicitHeight
+        interactive: contentHeight > height
+        flickableDirection: Flickable.VerticalFlick
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        ColumnLayout {
+            id: flickLayout
+            width: parent.width
+            spacing: Style.current.padding
+
             Image {
                 id: keysImg
-        width: 120
-        height: 120
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top: parent.top
                 fillMode: Image.PreserveAspectFit
                 source: Style.png("onboarding/keys")
                 mipmap: true
+                Layout.alignment: Qt.AlignHCenter
+                Layout.preferredWidth: 120
+                Layout.preferredHeight: width
             }
 
             StyledText {
@@ -26,66 +45,54 @@ Item {
                 text: qsTr("Secure Your Assets and Funds")
                 horizontalAlignment: Text.AlignHCenter
                 wrapMode: Text.WordWrap
-        anchors.right: parent.right
-        anchors.left: parent.left
                 font.bold: true
-        anchors.top: keysImg.bottom
-        anchors.topMargin: Style.current.padding
                 font.pixelSize: 22
+                Layout.fillWidth: true
             }
 
             StyledText {
                 id: txtDesc
-        anchors.top: txtTitle.bottom
-        anchors.topMargin: Style.current.padding
-        anchors.horizontalCenter: parent.horizontalCenter
                 font.pixelSize: Style.current.primaryTextFontSize
                 font.letterSpacing: -0.2
                 text: qsTr("Your seed phrase is a 12-word passcode to your funds.")
+                Layout.fillWidth: true
             }
 
             StyledText {
                 id: secondTxtDesc
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        anchors.leftMargin: Style.current.padding
-        anchors.left: parent.left
-        anchors.top: txtDesc.bottom
-        anchors.topMargin: Style.current.bigPadding
                 horizontalAlignment: Text.AlignHCenter
                 wrapMode: Text.WordWrap
                 textFormat: Text.RichText
                 font.pixelSize: Style.current.primaryTextFontSize
                 text: qsTr("Your seed phrase cannot be recovered if lost. Therefore, you <b>must</b> back it up. The simplest way is to <b>write it down offline and store it somewhere secure.</b>")
+                Layout.fillWidth: true
             }
 
-    ColumnLayout {
-        anchors.topMargin: 49
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top: secondTxtDesc.bottom
-        spacing: Style.current.padding
             StatusCheckBox {
                 id: havePen
-            width: parent.width
                 text: qsTr("I have a pen and paper")
+                Layout.fillWidth: true
             }
+
             StatusCheckBox {
                 id: writeDown
-            width: parent.width
                 text: qsTr("I am ready to write down my seed phrase")
+                Layout.fillWidth: true
             }
+
             StatusCheckBox {
                 id: storeIt
-            width: parent.width
                 text: qsTr("I know where I’ll store it")
+                Layout.fillWidth: true
+            }
         }
     }
 
-    Item {
+    Rectangle {
-        width: parent.width
+        color: Theme.palette.statusModal.backgroundColor
-        height: 60
+        Layout.fillWidth: true
-        anchors.bottom: parent.bottom
+        Layout.preferredHeight: 60
-        anchors.horizontalCenter: parent.horizontalCenter
+
         StyledText {
             anchors.fill: parent
             anchors.margins: Style.current.halfPadding
@@ -96,6 +103,7 @@ Item {
             color: Theme.palette.dangerColor1
             text: qsTr("You can only complete this process once. Status will not store your seed phrase and can never help you recover it.")
         }
+
         Rectangle {
             anchors.fill: parent
             radius: 8

ui/app/AppLayouts/Profile/popups/backupseed/Backup.qml

@@ -1,79 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Layouts 1.12
-import QtQuick.Controls 2.12
-import StatusQ.Core.Theme 0.1
-
-import shared.panels 1.0
-import utils 1.0
-
-Item {
-    id: root
-    property var privacyStore
-    property alias bar: bar
-    property alias seedHidden: confirmSeedPhrase.hideSeed
-    property alias seedStored: confirmStoringSeedPhrase.seedStored
-    property int firstRandomNo: Math.floor(Math.random() * 12)
-    property alias validFirstSeedWord: confirmFirstWord.inputValid
-    property alias validSecondSeedWord: confirmSecondWord.inputValid
-    property int secondRandomNo: {
-        var num = Math.floor(Math.random() * 12);
-        return (num === firstRandomNo) ? Math.floor(Math.random() * 12) : num;
-    }
-
-    anchors.fill: parent
-
-    StyledText {
-        id: txtDesc
-        anchors.right: parent.right
-        anchors.left: parent.left
-        horizontalAlignment: Text.AlignHCenter
-        wrapMode: Text.WordWrap
-        font.pixelSize: Style.current.additionalTextSize
-        color: Style.current.secondaryText
-        text: qsTr("Step " + (bar.currentIndex+1) + " of " + bar.count)
-    }
-
-    TabBar {
-        id: bar
-        width: (59 * count)
-        height: 4
-        anchors.top: txtDesc.bottom
-        anchors.topMargin: Style.current.halfPadding
-        anchors.horizontalCenter: parent.horizontalCenter
-        spacing: 2
-        background: null
-        TabBarButton { index: 0; currentIndex: bar.currentIndex }
-        TabBarButton { index: 1; currentIndex: bar.currentIndex }
-        TabBarButton { index: 2; currentIndex: bar.currentIndex }
-        TabBarButton { index: 3; currentIndex: bar.currentIndex }
-    }
-
-    StackLayout {
-        id: stack
-        anchors.top: bar.bottom
-        anchors.topMargin: Style.current.halfPadding
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.leftMargin: Style.current.padding
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        currentIndex: bar.currentIndex
-        ConfirmSeedPhrasePanel {
-            id: confirmSeedPhrase
-            seedPhrase: root.privacyStore.getMnemonic().split(" ")
-        }
-        BackupSeedStepBase {
-            id: confirmFirstWord
-            titleText: qsTr("Confirm word #" + (root.firstRandomNo+1) + " of your seed phrase")
-            wordRandomNumber: root.firstRandomNo
-            wordAtRandomNumber: root.privacyStore.getMnemonicWordAtIndex(root.firstRandomNo)
-        }
-        BackupSeedStepBase {
-            id: confirmSecondWord
-            titleText: qsTr("Confirm word #" + (root.secondRandomNo+1) + " of your seed phrase")
-            wordRandomNumber: root.secondRandomNo
-            wordAtRandomNumber: root.privacyStore.getMnemonicWordAtIndex(root.secondRandomNo)
-        }
-        ConfirmStoringSeedPhrasePanel { id: confirmStoringSeedPhrase }
-    }
-}

ui/app/AppLayouts/Profile/popups/backupseed/BackupSeedStepBase.qml

@@ -1,24 +1,41 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
 import StatusQ.Controls 0.1
-import shared.panels 1.0
 import StatusQ.Controls.Validators 0.1
+
+import shared.panels 1.0
 import utils 1.0
 
-Item {
+Flickable {
+    id: root
+
     property int wordRandomNumber: -1
     property string wordAtRandomNumber
     property bool secondWordValid: true
     property alias titleText: txtTitle.text
     property alias inputValid: inputText.valid
 
+    default property alias content: column.children
+
+    clip: true
+    contentHeight: column.height
+    implicitHeight: 520
+    interactive: contentHeight > height
+    flickableDirection: Flickable.VerticalFlick
+
+    ColumnLayout {
+        id: column
+        width: parent.width
+        spacing: Style.current.padding
+
         StyledText {
             id: txtTitle
-        anchors.right: parent.right
-        anchors.left: parent.left
             horizontalAlignment: Text.AlignHCenter
             wrapMode: Text.WordWrap
             font.pixelSize: Style.current.primaryTextFontSize
+            Layout.fillWidth: true
         }
 
         StatusInput {
@@ -26,17 +43,16 @@ Item {
             visible: (wordRandomNumber > -1)
             implicitWidth: 448
             input.implicitHeight: 44
-        anchors.top: parent.top
-        anchors.topMargin: 40
-        anchors.horizontalCenter: parent.horizontalCenter
             validationMode: StatusInput.ValidationMode.Always
-        label: qsTr("Word #" + (wordRandomNumber+1))
+            label: qsTr("Word #%1").arg(wordRandomNumber + 1)
             input.placeholderText: qsTr("Enter word")
             validators: [
                 StatusValidator {
-                validate: function (t) { return (wordAtRandomNumber === inputText.text); }
+                    validate: function (t) { return (root.wordAtRandomNumber === inputText.text); }
                     errorMessage: (inputText.text.length) > 0 ? qsTr("Wrong word") : ""
                 }
             ]
+            Layout.fillWidth: true
+        }
     }
 }

ui/app/AppLayouts/Profile/popups/backupseed/ConfirmSeedPhrasePanel.qml

@@ -1,26 +1,29 @@
 import QtQuick 2.12
-import StatusQ.Controls 0.1
+import QtQuick.Layouts 1.12
 import QtGraphicalEffects 1.13
+
 import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
 
 import shared.panels 1.0
 import utils 1.0
 
 BackupSeedStepBase {
     id: root
-    property var seedPhrase
+
+    property var seedPhrase: []
     property bool hideSeed: true
 
     titleText: qsTr("Write down your 12-word seed phrase to keep offline")
 
+    Item {
+        implicitHeight: 304
+        Layout.fillWidth: true
+
         GridView {
             id: grid
-        width: parent.width
+            anchors.fill: parent
-        height: 304
+            visible: !hideSeed
-        anchors.left: parent.left
-        anchors.leftMargin: 2
-        anchors.top: parent.top
-        anchors.topMargin: 88
             flow: GridView.FlowTopToBottom
             cellWidth: 208
             cellHeight: 48
@@ -32,7 +35,12 @@ BackupSeedStepBase {
                 width: (grid.cellWidth - 4)
                 height: (grid.cellHeight - 4)
                 textEdit.input.edit.enabled: false
-            text: root.seedPhrase[parseInt(leftComponentText)-1]
+                text: {
+                    var index = parseInt(leftComponentText) - 1;
+                    if (!root.seedPhrase || index < 0 || index > root.seedPhrase.length - 1)
+                        return "";
+                    return root.seedPhrase[index];
+                }
                 leftComponentText: grid.wordIndex[index]
             }
         }
@@ -47,7 +55,7 @@ BackupSeedStepBase {
         }
 
         StatusButton {
-        anchors.centerIn: grid
+            anchors.centerIn: parent
             visible: hideSeed
             icon.name: "view"
             text: qsTr("Reveal seed phrase")
@@ -55,15 +63,10 @@ BackupSeedStepBase {
                 hideSeed = false;
             }
         }
+    }
 
     StyledText {
         id: text
-        anchors.left: parent.left
-        //anchors.leftMargin: Style.current.bigPadding
-        anchors.right: parent.right
-        //anchors.rightMargin: Style.current.bigPadding
-        anchors.top: grid.bottom
-        anchors.topMargin: 36
         visible: hideSeed
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
@@ -72,5 +75,6 @@ BackupSeedStepBase {
         textFormat: Text.RichText
         color: Theme.palette.dangerColor1
         text: qsTr("The next screen contains your seed phrase.\n<b>Anyone</b> who sees it can use it to access to your funds.")
+        Layout.fillWidth: true
     }
 }

ui/app/AppLayouts/Profile/popups/backupseed/ConfirmStoringSeedPhrasePanel.qml

@@ -1,54 +1,49 @@
 import QtQuick 2.12
-import utils 1.0
+import QtQuick.Layouts 1.12
-import shared.panels 1.0
+
 import StatusQ.Controls 0.1
 
+import utils 1.0
+import shared.panels 1.0
+
 BackupSeedStepBase {
-    titleText: qsTr("Complete back up")
+    id: root
+
     property bool seedStored: storeCheck.checked
 
+    titleText: qsTr("Complete back up")
+
     StyledText {
         id: txtTitle
-        anchors.top: parent.top
-        anchors.topMargin: 40
-        anchors.right: parent.right
-        anchors.left: parent.left
         horizontalAlignment: Text.AlignHCenter
         wrapMode: Text.WordWrap
         font.bold: true
         font.pixelSize: 17
         text: qsTr("Store Your Phrase Offline and Complete Your Back Up")
+        Layout.fillWidth: true
     }
 
     StyledText {
         id: txtDesc
-        anchors.top: txtTitle.bottom
-        anchors.topMargin: Style.current.padding
-        anchors.right: parent.right
-        anchors.left: parent.left
         horizontalAlignment: Text.AlignHCenter
         wrapMode: Text.WordWrap
         font.pixelSize: Style.current.primaryTextFontSize
         text: qsTr("By completing this process, you will remove your seed phrase from this application’s storage. This makes your funds more secure.")
+        Layout.fillWidth: true
     }
 
     StyledText {
         id: secondTxtDesc
-        anchors.right: parent.right
-        anchors.left: parent.left
-        anchors.top: txtDesc.bottom
-        anchors.topMargin: Style.current.bigPadding
         horizontalAlignment: Text.AlignHCenter
         wrapMode: Text.WordWrap
         font.pixelSize: Style.current.primaryTextFontSize
         text: qsTr("You will remain logged in, and your seed phrase will be entirely in your hands.")
+        Layout.fillWidth: true
     }
 
     StatusCheckBox {
         id: storeCheck
-        width: parent.width
-        anchors.top: secondTxtDesc.bottom
-        anchors.topMargin: 48
         text: qsTr("I aknowledge that Status will not be able to show me my seed phrase again.")
+        Layout.fillWidth: true
     }
 }

ui/app/AppLayouts/Profile/popups/backupseed/SubheaderTabBar.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core 0.1
+
+import shared.panels 1.0
+import utils 1.0
+
+ColumnLayout {
+    id: root
+
+    property int steps: 4
+    property int currentIndex: 0
+
+    spacing: Style.current.halfPadding
+
+    StyledText {
+        id: txtDesc
+        horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.WordWrap
+        font.pixelSize: Style.current.additionalTextSize
+        color: Style.current.secondaryText
+        text: qsTr("Step %1 of %2").arg(root.currentIndex + 1).arg(steps)
+        Layout.fillWidth: true
+    }
+
+    TabBar {
+        id: bar
+        height: 4
+        spacing: 2
+        background: null
+        Layout.alignment: Qt.AlignHCenter
+        Layout.preferredWidth: 59 * steps
+
+        Repeater {
+            model: steps
+
+            SubheaderTabButton { index: modelData; currentIndex: root.currentIndex}
+        }
+    }
+}

ui/app/mainui/AppMain.qml

@@ -100,10 +100,7 @@ Item {
             var popup = changeProfilePicComponent.createObject(appMain);
             popup.chooseImageToCrop();
         }
-        onOpenBackUpSeedPopup: {
+        onOpenBackUpSeedPopup: Global.openPopup(backupSeedModalComponent)
-            var popup = backupSeedModalComponent.createObject(appMain)
-            popup.open()
-        }
         onDisplayToastMessage: {
             appMain.rootStore.mainModuleInst.displayEphemeralNotification(title, subTitle, icon, loading, ephNotifType, url);
         }
@@ -153,6 +150,7 @@ Item {
         id: backupSeedModal
         anchors.centerIn: parent
         privacyStore: appMain.rootStore.profileSectionStore.privacyStore
+        onClosed: destroy()
     }
 
     property Component displayNamePopupComponent: DisplayNamePopup {