fix(@desktop): Refactor Backupseed modal

Close #6144
2022-06-28 13:55:33 +03:00 · 2022-06-28 13:55:33 +03:00 · 6d72e19568
parent 97a553ff8c
commit 6d72e19568
11 changed files with 341 additions and 340 deletions
--- a/ui/app/AppLayouts/Chat/panels/communities/CommunityEditSettingsPanel.qml
+++ b/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;
--- a/ui/app/AppLayouts/CommunitiesPortal/popups/CreateCommunityPopup.qml
+++ b/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 {
--- a/ui/app/AppLayouts/Profile/popups/BackupSeedModal.qml
+++ b/ui/app/AppLayouts/Profile/popups/BackupSeedModal.qml
@ -14,102 +14,113 @@ import StatusQ.Core.Theme 0.1

 import "backupseed"

-StatusModal {
-    id: popup
-    width: 480
-    height: 748
-    header.title: qsTr("Back up your seed phrase")
+StatusStackModal {
+    id: root

    property var privacyStore

-    rightButtons: [
-        StatusFlatButton {
-            text: "Not Now"
-            visible: (stack.currentIndex === 0)
+    QtObject {
+        id: d
+
+        readonly property int firstRandomNo: getRandomWordNumber()
+        readonly property int secondRandomNo: {
+            var num = firstRandomNo;
+            while (num === firstRandomNo) {
+                num = getRandomWordNumber();
+            }
+            return num;
+        }
+
+        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
-            onClicked: {
-                popup.close();
-            }
-        },
-        StatusButton {
-            enabled: {
-                if (stack.currentIndex === 0) {
-                    return acknowledgment.allAccepted;
-                } else {
-                    switch (backUp.bar.currentIndex) {
-                    case 0:
-                        return !backUp.seedHidden;
-                    case 1:
-                        return backUp.validFirstSeedWord;
-                    case 2:
-                        return backUp.validSecondSeedWord;
-                    case 3:
-                        return backUp.seedStored;
-                    default:
-                        return true;
-                    }
-                }
-            }
-            text: {
-                if (stack.currentIndex === 1) {
-                    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:
-                        case 2:
-                            backUp.bar.currentIndex++;
-                            break;
-                        case 3:
-                            popup.privacyStore.removeMnemonic();
-                            popup.close();
-                            break;
-                    }
-                }
-            }
+            text: qsTr("Not Now")
+            onClicked: root.close()
        }
-    ]

-    leftButtons: [
-        StatusRoundButton {
-            visible: (stack.currentIndex === 1)
-            icon.name: "arrow-right"
-            rotation: 180
-            onClicked: {
-                if (backUp.bar.currentIndex === 0) {
-                    stack.currentIndex = 0;
-                } else {
-                    backUp.bar.currentIndex--;
-                }
-            }
+        function getRandomWordNumber() {
+            return Math.floor(Math.random() * 12);
        }
-    ]
-
-    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 }
    }
+
+    width: 480
+    header.title: qsTr("Back up your seed phrase")
+    rightButtons: [ nextButton, finishButton, d.skipButton ]
+
+    nextButton: StatusButton {
+        enabled: {
+            switch (root.currentIndex) {
+            case 0:
+                return acknowledgment.allAccepted;
+            case 1:
+                return !d.seedHidden;
+            case 2:
+                return d.validFirstSeedWord;
+            case 3:
+                return d.validSecondSeedWord;
+            default:
+                return true;
+            }
+        }
+        text: {
+            switch (root.currentIndex) {
+            case 0:
+            case 1:
+                return  qsTr("Confirm Seed Phrase");
+            case 2:
+            case 3:
+                return qsTr("Continue");;
+            default:
+                return "";
+            }
+        }
+        onClicked: root.currentIndex++
+    }
+
+    finishButton: StatusButton {
+        text: qsTr("Complete & Delete My Seed Phrase")
+        enabled: d.seedStored
+        onClicked: {
+            root.privacyStore.removeMnemonic();
+            root.close();
+        }
+    }
+
+    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
+        }
+    ]
 }
--- a/ui/app/AppLayouts/Profile/popups/backupseed/Acknowledgements.qml
+++ b/ui/app/AppLayouts/Profile/popups/backupseed/Acknowledgements.qml
@ -3,89 +3,96 @@ 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 {
-    anchors.fill: parent
-    objectName: "acknowledgment"
-    property bool allAccepted: (havePen.checked && writeDown.checked && storeIt.checked)
-    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
-    }
+ColumnLayout {
+    id: root

-    StyledText {
-        id: txtTitle
-        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
-    }
+    readonly property bool allAccepted: havePen.checked && writeDown.checked && storeIt.checked

-    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.")
-    }
+    spacing: Style.current.padding
+    implicitHeight: 520

-    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>")
-    }
+    Flickable {
+        id: flick
+        clip: true
+        contentHeight: flickLayout.height
+        implicitHeight: flickLayout.implicitHeight
+        interactive: contentHeight > height
+        flickableDirection: Flickable.VerticalFlick
+        Layout.fillWidth: true
+        Layout.fillHeight: true

-    ColumnLayout {
-        anchors.topMargin: 49
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top: secondTxtDesc.bottom
-        spacing: Style.current.padding
-        StatusCheckBox {
-            id: havePen
+        ColumnLayout {
+            id: flickLayout
            width: parent.width
-            text: qsTr("I have a pen and paper")
-        }
-        StatusCheckBox {
-            id: writeDown
-            width: parent.width
-            text: qsTr("I am ready to write down my seed phrase")
-        }
-        StatusCheckBox {
-            id: storeIt
-            width: parent.width
-            text: qsTr("I know where I’ll store it")
+            spacing: Style.current.padding
+
+            Image {
+                id: keysImg
+                fillMode: Image.PreserveAspectFit
+                source: Style.png("onboarding/keys")
+                mipmap: true
+                Layout.alignment: Qt.AlignHCenter
+                Layout.preferredWidth: 120
+                Layout.preferredHeight: width
+            }
+
+            StyledText {
+                id: txtTitle
+                text: qsTr("Secure Your Assets and Funds")
+                horizontalAlignment: Text.AlignHCenter
+                wrapMode: Text.WordWrap
+                font.bold: true
+                font.pixelSize: 22
+                Layout.fillWidth: true
+            }
+
+            StyledText {
+                id: txtDesc
+                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
+                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
+            }
+
+            StatusCheckBox {
+                id: havePen
+                text: qsTr("I have a pen and paper")
+                Layout.fillWidth: true
+            }
+
+            StatusCheckBox {
+                id: writeDown
+                text: qsTr("I am ready to write down my seed phrase")
+                Layout.fillWidth: true
+            }
+
+            StatusCheckBox {
+                id: storeIt
+                text: qsTr("I know where I’ll store it")
+                Layout.fillWidth: true
+            }
        }
    }

-    Item {
-        width: parent.width
-        height: 60
-        anchors.bottom: parent.bottom
-        anchors.horizontalCenter: parent.horizontalCenter
+    Rectangle {
+        color: Theme.palette.statusModal.backgroundColor
+        Layout.fillWidth: true
+        Layout.preferredHeight: 60
+
        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
--- a/ui/app/AppLayouts/Profile/popups/backupseed/Backup.qml
+++ b/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 }
-    }
-}
--- a/ui/app/AppLayouts/Profile/popups/backupseed/BackupSeedStepBase.qml
+++ b/ui/app/AppLayouts/Profile/popups/backupseed/BackupSeedStepBase.qml
@ -1,42 +1,58 @@
 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

-    StyledText {
-        id: txtTitle
-        anchors.right: parent.right
-        anchors.left: parent.left
-        horizontalAlignment: Text.AlignHCenter
-        wrapMode: Text.WordWrap
-        font.pixelSize: Style.current.primaryTextFontSize
-    }
+    default property alias content: column.children

-    StatusInput {
-        id: inputText
-        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))
-        input.placeholderText: qsTr("Enter word")
-        validators: [
-            StatusValidator {
-                validate: function (t) { return (wordAtRandomNumber === inputText.text); }
-                errorMessage: (inputText.text.length) > 0 ? qsTr("Wrong word") : ""
-            }
-        ]
+    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
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.WordWrap
+            font.pixelSize: Style.current.primaryTextFontSize
+            Layout.fillWidth: true
+        }
+
+        StatusInput {
+            id: inputText
+            visible: (wordRandomNumber > -1)
+            implicitWidth: 448
+            input.implicitHeight: 44
+            validationMode: StatusInput.ValidationMode.Always
+            label: qsTr("Word #%1").arg(wordRandomNumber + 1)
+            input.placeholderText: qsTr("Enter word")
+            validators: [
+                StatusValidator {
+                    validate: function (t) { return (root.wordAtRandomNumber === inputText.text); }
+                    errorMessage: (inputText.text.length) > 0 ? qsTr("Wrong word") : ""
+                }
+            ]
+            Layout.fillWidth: true
+        }
    }
 }
--- a/ui/app/AppLayouts/Profile/popups/backupseed/ConfirmSeedPhrasePanel.qml
+++ b/ui/app/AppLayouts/Profile/popups/backupseed/ConfirmSeedPhrasePanel.qml
@ -1,69 +1,72 @@
 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")

-    GridView {
-        id: grid
-        width: parent.width
-        height: 304
-        anchors.left: parent.left
-        anchors.leftMargin: 2
-        anchors.top: parent.top
-        anchors.topMargin: 88
-        flow: GridView.FlowTopToBottom
-        cellWidth: 208
-        cellHeight: 48
-        interactive: false
-        model: 12
-        property var wordIndex: ["1", "3", "5", "7", "9", "11", "2", "4", "6", "8", "10", "12"]
-        delegate: StatusSeedPhraseInput {
-            id: seedWordInput
-            width: (grid.cellWidth - 4)
-            height: (grid.cellHeight - 4)
-            textEdit.input.edit.enabled: false
-            text: root.seedPhrase[parseInt(leftComponentText)-1]
-            leftComponentText: grid.wordIndex[index]
+    Item {
+        implicitHeight: 304
+        Layout.fillWidth: true
+
+        GridView {
+            id: grid
+            anchors.fill: parent
+            visible: !hideSeed
+            flow: GridView.FlowTopToBottom
+            cellWidth: 208
+            cellHeight: 48
+            interactive: false
+            model: 12
+            property var wordIndex: ["1", "3", "5", "7", "9", "11", "2", "4", "6", "8", "10", "12"]
+            delegate: StatusSeedPhraseInput {
+                id: seedWordInput
+                width: (grid.cellWidth - 4)
+                height: (grid.cellHeight - 4)
+                textEdit.input.edit.enabled: false
+                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]
+            }
        }
-    }

-    GaussianBlur {
-        id: blur
-        anchors.fill: grid
-        visible: hideSeed
-        source: grid
-        radius: 16
-        samples: 16
-    }
+        GaussianBlur {
+            id: blur
+            anchors.fill: grid
+            visible: hideSeed
+            source: grid
+            radius: 16
+            samples: 16
+        }

-    StatusButton {
-        anchors.centerIn: grid
-        visible: hideSeed
-        icon.name: "view"
-        text: qsTr("Reveal seed phrase")
-        onClicked: {
-            hideSeed = false;
+        StatusButton {
+            anchors.centerIn: parent
+            visible: hideSeed
+            icon.name: "view"
+            text: qsTr("Reveal seed phrase")
+            onClicked: {
+                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
    }
 }
--- a/ui/app/AppLayouts/Profile/popups/backupseed/ConfirmStoringSeedPhrasePanel.qml
+++ b/ui/app/AppLayouts/Profile/popups/backupseed/ConfirmStoringSeedPhrasePanel.qml
@ -1,54 +1,49 @@
 import QtQuick 2.12
-import utils 1.0
-import shared.panels 1.0
+import QtQuick.Layouts 1.12
+
 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
    }
 }
--- a/ui/app/AppLayouts/Profile/popups/backupseed/SubheaderTabBar.qml
+++ b/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}
+        }
+    }
+}
--- a/ui/app/AppLayouts/Profile/popups/backupseed/SubheaderTabButton.qml
+++ b/ui/app/AppLayouts/Profile/popups/backupseed/SubheaderTabButton.qml
--- a/ui/app/mainui/AppMain.qml
+++ b/ui/app/mainui/AppMain.qml
@ -100,10 +100,7 @@ Item {
            var popup = changeProfilePicComponent.createObject(appMain);
            popup.chooseImageToCrop();
        }
-        onOpenBackUpSeedPopup: {
-            var popup = backupSeedModalComponent.createObject(appMain)
-            popup.open()
-        }
+        onOpenBackUpSeedPopup: Global.openPopup(backupSeedModalComponent)
        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 {