feat(onboarding): Added SplashScreen

- Added SplashScreen as initial screen before
onboard as per new designs.
- Also moved all onboarding related code from
main to onboarding section and switched to
import this and all other sections as
qml modules, exposing this way only
necessary files.
- Cleaned up unecessary qmldir files and
imports.

Closes #4954

src-cpp/main.cpp

@@ -63,6 +63,7 @@ int main(int argc, char* argv[])
 
     Global::Singleton::instance()->engine()->addImportPath("qrc:/./StatusQ/src");
     Global::Singleton::instance()->engine()->addImportPath("qrc:/./imports");
+    Global::Singleton::instance()->engine()->addImportPath("qrc:/./app");
 
     const QUrl url(QStringLiteral("qrc:/main.qml"));
     QObject::connect(

src/nim_status_client.nim

@@ -104,6 +104,7 @@ proc mainProc() =
 
   singletonInstance.engine.addImportPath("qrc:/./StatusQ/src")
   singletonInstance.engine.addImportPath("qrc:/./imports")
+  singletonInstance.engine.addImportPath("qrc:/./app");
   singletonInstance.engine.setNetworkAccessManagerFactory(networkAccessFactory)
   singletonInstance.engine.setRootContextProperty("uiScaleFilePath", newQVariant(uiScaleFilePath))
   singletonInstance.engine.setRootContextProperty("singleInstance", newQVariant(singleInstance))

ui/app/AppLayouts/Browser/qmldir

@@ -0,0 +1 @@
+BrowserLayout 1.0 BrowserLayout.qml

ui/app/AppLayouts/Chat/controls/qmldir

@@ -0,0 +1 @@
+Contact 1.0 Contact.qml

ui/app/AppLayouts/Chat/panels/qmldir

@@ -0,0 +1 @@
+SuggestionBoxPanel 1.0 SuggestionBoxPanel.qml

ui/app/AppLayouts/Chat/popups/qmldir

@@ -0,0 +1,5 @@
+PinnedMessagesPopup 1.0 PinnedMessagesPopup.qml
+ChooseBrowserPopup 1.0 ChooseBrowserPopup.qml
+InviteFriendsToCommunityPopup 1.0 community/InviteFriendsToCommunityPopup.qml
+CommunityProfilePopup 1.0 community/CommunityProfilePopup.qml
+CreateCommunityPopup 1.0 community/CreateCommunityPopup.qml

ui/app/AppLayouts/Chat/qmldir

@@ -0,0 +1 @@
+ChatLayout 1.0 ChatLayout.qml

ui/app/AppLayouts/Chat/stores/qmldir

@@ -0,0 +1,2 @@
+StickerData 1.0 StickerData.qml
+StickerPackData 1.0 StickerPackData.qml

ui/app/AppLayouts/Node/qmldir

@@ -0,0 +1 @@
+NodeLayout 1.0 NodeLayout.qml

ui/app/AppLayouts/Onboarding/OnboardingLayout.qml

@@ -0,0 +1,183 @@
+import QtQuick 2.12
+import QtQml.StateMachine 1.14 as DSM
+import utils 1.0
+
+import "views"
+import "stores"
+
+QtObject {
+    id: root
+    property bool hasAccounts
+    signal loadApp()
+    signal onBoardingStepChanged(var view)
+
+    property var stateMachine: DSM.StateMachine {
+        id: stateMachine
+        initialState: onboardingState
+        running: true
+
+        DSM.State {
+            id: onboardingState
+            initialState: root.hasAccounts ? stateLogin : keysMainState
+
+            DSM.State {
+                id: keysMainState
+                onEntered: { onBoardingStepChanged(keysMain); }
+
+                DSM.SignalTransition {
+                    targetState: genKeyState
+                    signal: Global.applicationWindow.navigateTo
+                    guard: path === "GenKey"
+                }
+            }
+
+            DSM.State {
+                id: existingKeyState
+                onEntered: { onBoardingStepChanged(existingKey); }
+
+                DSM.SignalTransition {
+                    targetState: appState
+                    signal: startupModule.appStateChanged
+                    guard: state === Constants.appState.main
+                }
+            }
+
+            DSM.State {
+                id: genKeyState
+                onEntered: { onBoardingStepChanged(genKey); }
+
+                DSM.SignalTransition {
+                    targetState: appState
+                    signal: startupModule.appStateChanged
+                    guard: state === Constants.appState.main
+                }
+            }
+
+            DSM.State {
+                id: keycardState
+                onEntered: { onBoardingStepChanged(keycardFlowSelection); }
+
+                DSM.SignalTransition {
+                    targetState: appState
+                    signal: startupModule.appStateChanged
+                    guard: state === Constants.appState.main
+                }
+            }
+
+            DSM.State {
+                id: stateLogin
+                onEntered: { onBoardingStepChanged(login); }
+
+                DSM.SignalTransition {
+                    targetState: appState
+                    signal: startupModule.appStateChanged
+                    guard: state === Constants.appState.main
+                }
+
+                DSM.SignalTransition {
+                    targetState: genKeyState
+                    signal: Global.applicationWindow.navigateTo
+                    guard: path === "GenKey"
+                }
+            }
+
+            DSM.SignalTransition {
+                targetState: root.hasAccounts ? stateLogin : keysMainState
+                signal: Global.applicationWindow.navigateTo
+                guard: path === "InitialState"
+            }
+
+            DSM.SignalTransition {
+                targetState: existingKeyState
+                signal: Global.applicationWindow.navigateTo
+                guard: path === "ExistingKey"
+            }
+
+            DSM.SignalTransition {
+                targetState: keysMainState
+                signal: Global.applicationWindow.navigateTo
+                guard: path === "KeysMain"
+            }
+
+            DSM.SignalTransition {
+                targetState: keycardState
+                signal: Global.applicationWindow.navigateTo
+                guard: path === "KeycardFlowSelection"
+            }
+
+            DSM.FinalState {
+                id: onboardingDoneState
+            }
+        }
+
+        DSM.State {
+            id: appState
+            onEntered: loadApp();
+
+            DSM.SignalTransition {
+                targetState: stateLogin
+                signal: startupModule.logOut
+            }
+        }
+    }
+
+    property var keysMainComponent: Component {
+        id: keysMain
+        KeysMainView {
+            btnGenKey.onClicked: Global.applicationWindow.navigateTo("GenKey")
+            btnExistingKey.onClicked: Global.applicationWindow.navigateTo("ExistingKey")
+            btnKeycard.onClicked: Global.applicationWindow.navigateTo("KeycardFlowSelection")
+        }
+    }
+
+    property var existingKeyComponent: Component {
+        id: existingKey
+        ExistingKeyView {
+            onClosed: function () {
+                if (root.hasAccounts) {
+                    Global.applicationWindow.navigateTo("InitialState")
+                } else {
+                    Global.applicationWindow.navigateTo("KeysMain")
+                }
+            }
+        }
+    }
+
+    property var genKeyComponent: Component {
+        id: genKey
+        GenKeyView {
+            onClosed: function () {
+                if (root.hasAccounts) {
+                    Global.applicationWindow.navigateTo("InitialState")
+                } else {
+                    Global.applicationWindow.navigateTo("KeysMain")
+                }
+            }
+        }
+    }
+
+    property var keycardFlowSelectionComponent: Component {
+        id: keycardFlowSelection
+        KeycardFlowSelectionView {
+            onClosed: function () {
+                if (root.hasAccounts) {
+                    Global.applicationWindow.navigateTo("InitialState")
+                } else {
+                    Global.applicationWindow.navigateTo("KeysMain")
+                }
+            }
+        }
+    }
+
+    property var loginComponent: Component {
+        id: login
+        LoginView {
+            onGenKeyClicked: function () {
+                Global.applicationWindow.navigateTo("GenKey")
+            }
+            onExistingKeyClicked: function () {
+                Global.applicationWindow.navigateTo("ExistingKey")
+            }
+        }
+    }
+}

ui/app/AppLayouts/Onboarding/qmldir

@@ -0,0 +1 @@
+OnboardingLayout 1.0 OnboardingLayout.qml

ui/app/AppLayouts/Profile/popups/qmldir

@@ -0,0 +1,2 @@
+ChangeProfilePicModal 1.0 ChangeProfilePicModal.qml
+BackupSeedModal 1.0 BackupSeedModal.qml

ui/app/AppLayouts/Profile/qmldir

@@ -1 +1 @@
-LeftTab 1.0 LeftTab.qml
+ProfileLayout 1.0 ProfileLayout.qml

ui/app/AppLayouts/Wallet/qmldir

@@ -2,3 +2,4 @@ LeftTabView 1.0 LeftTabView.qml
 WalletHeader 1.0 WalletHeader.qml
 AssetsView 1.0 AssetsView.qml
 CollectiblesView 1.0 CollectiblesView.qml
+WalletLayout 1.0 WalletLayout.qml

ui/app/AppLayouts/qmldir

@@ -1,6 +0,0 @@
-BrowserLayout 1.0 Browser/BrowserLayout.qml
-ChatLayout 1.0 Chat/ChatLayout.qml
-NodeLayout 1.0 Node/NodeLayout.qml
-ProfileLayout 1.0 Profile/ProfileLayout.qml
-WalletLayout 1.0 Wallet/WalletLayout.qml
-UIComponents 1.0 UIComponents/UIComponents.qml

ui/app/AppLayouts/stores/qmldir

@@ -0,0 +1 @@
+RootStore 1.0 RootStore.qml

ui/app/mainui/AppMain.qml

@@ -3,22 +3,22 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtMultimedia 5.13
 import Qt.labs.qmlmodels 1.0
+import Qt.labs.platform 1.1
+import Qt.labs.settings 1.0
+
+import applayouts.Wallet 1.0
+import applayouts.Node 1.0
+import applayouts.Browser 1.0
+import applayouts.Chat 1.0
+import applayouts.Chat.popups 1.0
+import applayouts.Profile 1.0
+import applayouts.Profile.popups 1.0
 
 import utils 1.0
 import shared 1.0
 import shared.panels 1.0
 import shared.popups 1.0
 import shared.status 1.0
-import "./AppLayouts"
-import "./AppLayouts/Wallet"
-import "./AppLayouts/Chat/popups"
-import "./AppLayouts/Chat/popups/community"
-import "./AppLayouts/Profile/popups"
-import "./AppLayouts/stores"
-import "./AppLayouts/Browser/stores" as BrowserStores
-
-import Qt.labs.platform 1.1
-import Qt.labs.settings 1.0
 
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
@@ -27,6 +27,8 @@ import StatusQ.Layout 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Core 0.1
 
+import applayouts.stores 1.0
+
 Item {
     id: appMain
     anchors.fill: parent

ui/app/mainui/SplashScreen.qml

@@ -0,0 +1,40 @@
+import QtQuick 2.12
+
+import utils 1.0
+import Qt.labs.lottieqt 1.0
+
+Item {
+    id: root
+    anchors.fill: parent
+    visible: (opacity > 0.0001)
+    Behavior on opacity { NumberAnimation { duration: 250 }}
+
+    Timer {
+        running: true
+        interval: 2000
+        onTriggered: {
+            root.opacity = 0.0;
+        }
+    }
+
+    Image {
+        width: 150
+        height: 150
+        fillMode: Image.PreserveAspectFit
+        anchors.centerIn: parent
+        source: Style.svg("status-logo-circle")
+    }
+
+    LottieAnimation {
+        anchors.centerIn: parent
+        autoPlay: false
+        loops: LottieAnimation.Infinite
+        quality: LottieAnimation.MediumQuality
+        source: Style.lottie("status_splash")
+        onStatusChanged: {
+            if (status === LottieAnimation.Ready) {
+                start();
+            }
+        }
+    }
+}

ui/app/mainui/qmldir

@@ -0,0 +1,2 @@
+AppMain 1.0 AppMain.qml
+SplashScreen 1.0 SplashScreen.qml

ui/app/qmldir

@@ -1 +0,0 @@
-AppMain 1.0 AppMain.qml

ui/imports/shared/popups/SignTransactionModal.qml

@@ -12,7 +12,7 @@ import StatusQ.Controls 0.1
 import shared.views 1.0
 import shared.panels 1.0
 import shared.popups 1.0
-import "../../../app/AppLayouts/Wallet"
+import applayouts.Wallet 1.0
 
 StatusModal {
     id: root

ui/imports/shared/status/StatusChatInput.qml

@@ -14,7 +14,7 @@ import shared.popups 1.0
 import shared.stores 1.0
 
 //TODO remove this dependency
-import "../../../app/AppLayouts/Chat/panels"
+import applayouts.Chat.panels 1.0
 import "./emojiList.js" as EmojiJSON
 
 import StatusQ.Core.Theme 0.1

ui/imports/shared/status/StatusStickerMarket.qml

@@ -9,7 +9,7 @@ import shared.panels 1.0
 import shared.popups 1.0
 import shared.status 1.0
 //TODO remove this dependency!
-import "../../../app/AppLayouts/Chat/stores"
+import applayouts.Chat.stores 1.0
 
 Item {
     id: root

ui/imports/shared/status/StatusStickerPackClickPopup.qml

@@ -7,8 +7,6 @@ import utils 1.0
 import shared 1.0
 import shared.popups 1.0
 import shared.status 1.0
-//TODO remove this dependency!
-import "../../../app/AppLayouts/Chat/stores"
 
 // TODO: replace with StatusModal
 ModalPopup {

ui/imports/shared/status/StatusStickersPopup.qml

@@ -9,7 +9,7 @@ import shared.panels 1.0
 import StatusQ.Controls 0.1 as StatusQControls
 import StatusQ.Components 0.1
 //TODO improve this!
-import "../../../app/AppLayouts/Chat/stores"
+import applayouts.Chat.stores 1.0
 
 Popup {
     id: root

ui/imports/shared/views/ExistingContacts.qml

@@ -6,7 +6,7 @@ import utils 1.0
 import shared.status 1.0
 import shared.stores 1.0
 // TODO move Contact into shared to get rid of that import
-import "../../../app/AppLayouts/Chat/controls"
+import applayouts.Chat.controls 1.0
 
 Item {
     id: root

ui/imports/shared/views/SearchResults.qml

@@ -10,8 +10,6 @@ import StatusQ.Controls 0.1
 import "../"
 import "../status"
 import "../panels"
-// TODO move Contact into shared to get rid of that import
-import "../../../app/AppLayouts/Chat/controls"
 import "./"
 
 import StatusQ.Components 0.1

ui/imports/utils/Global.qml

@@ -1,7 +1,7 @@
 pragma Singleton
 
 import QtQuick 2.13
-import "../../app/AppLayouts/Chat/popups"
+import applayouts.Chat.popups 1.0
 
 QtObject {
     id: root

ui/imports/utils/Style.qml

@@ -52,4 +52,7 @@ QtObject {
     function emoji(name) {
         return assetPath + "twemoji/" +name + ".png";
     }
+    function lottie(name) {
+        return assetPath + "lottie/" +name + ".json";
+    }
 }

ui/main.qml

@@ -2,7 +2,6 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import Qt.labs.platform 1.1
-import QtQml.StateMachine 1.14 as DSM
 import Qt.labs.settings 1.0
 import QtQuick.Window 2.12
 import QtQml 2.13
@@ -16,8 +15,8 @@ import shared 1.0
 import shared.panels 1.0
 import shared.popups 1.0
 
-import "./app/AppLayouts/Onboarding/views"
+import mainui 1.0
-import "./app"
+import applayouts.Onboarding 1.0
 
 StatusWindow {
     property bool hasAccounts: startupModule.appState !== Constants.appState.onboarding
@@ -298,119 +297,13 @@ StatusWindow {
         }
     }
 
-    DSM.StateMachine {
-        id: stateMachine
-        initialState: onboardingState
-        running: true
-
-        DSM.State {
-            id: onboardingState
-            initialState: hasAccounts ? stateLogin : keysMainState
-
-            DSM.State {
-                id: keysMainState
-                onEntered: loader.sourceComponent = keysMain
-
-                DSM.SignalTransition {
-                    targetState: genKeyState
-                    signal: applicationWindow.navigateTo
-                    guard: path === "GenKey"
-                }
-            }
-
-            DSM.State {
-                id: existingKeyState
-                onEntered: loader.sourceComponent = existingKey
-
-                DSM.SignalTransition {
-                    targetState: appState
-                    signal: startupModule.appStateChanged
-                    guard: state == Constants.appState.main
-                }
-            }
-
-            DSM.State {
-                id: genKeyState
-                onEntered: loader.sourceComponent = genKey
-
-                DSM.SignalTransition {
-                    targetState: appState
-                    signal: startupModule.appStateChanged
-                    guard: state == Constants.appState.main
-                }
-            }
-
-            DSM.State {
-                id: keycardState
-                onEntered: loader.sourceComponent = keycardFlowSelection
-
-                DSM.SignalTransition {
-                    targetState: appState
-                    signal: startupModule.appStateChanged
-                    guard: state == Constants.appState.main
-                }
-            }
-
-            DSM.State {
-                id: stateLogin
-                onEntered: loader.sourceComponent = login
-
-                DSM.SignalTransition {
-                    targetState: appState
-                    signal: startupModule.appStateChanged
-                    guard: state == Constants.appState.main
-                }
-
-                DSM.SignalTransition {
-                    targetState: genKeyState
-                    signal: applicationWindow.navigateTo
-                    guard: path === "GenKey"
-                }
-            }
-
-            DSM.SignalTransition {
-                targetState: hasAccounts ? stateLogin : keysMainState
-                signal: applicationWindow.navigateTo
-                guard: path === "InitialState"
-            }
-
-            DSM.SignalTransition {
-                targetState: existingKeyState
-                signal: applicationWindow.navigateTo
-                guard: path === "ExistingKey"
-            }
-
-            DSM.SignalTransition {
-                targetState: keysMainState
-                signal: applicationWindow.navigateTo
-                guard: path === "KeysMain"
-            }
-
-            DSM.SignalTransition {
-                targetState: keycardState
-                signal: applicationWindow.navigateTo
-                guard: path === "KeycardFlowSelection"
-            }
-
-            DSM.FinalState {
-                id: onboardingDoneState
-            }
-        }
-
-        DSM.State {
-            id: appState
-            onEntered: loader.sourceComponent = app
-
-            DSM.SignalTransition {
-                targetState: stateLogin
-                signal: startupModule.logOut
-            }
-        }
-    }
-
     Loader {
         id: loader
         anchors.fill: parent
+        opacity: active ? 1.0 : 0.0
+        visible: (opacity > 0.0001)
+        Behavior on opacity { NumberAnimation { duration: 120 }}
+        active: !splashScreen.visible
     }
 
     Component {
@@ -420,63 +313,14 @@ StatusWindow {
         }
     }
 
-    Component {
+    OnboardingLayout {
-        id: keysMain
+        hasAccounts: applicationWindow.hasAccounts
-        KeysMainView {
+        onLoadApp: {
-            btnGenKey.onClicked: applicationWindow.navigateTo("GenKey")
+            loader.sourceComponent = app;
-            btnExistingKey.onClicked: applicationWindow.navigateTo("ExistingKey")
-            btnKeycard.onClicked: applicationWindow.navigateTo("KeycardFlowSelection")
         }
-    }
 
-    Component {
+        onOnBoardingStepChanged: {
-        id: existingKey
+            loader.sourceComponent = view;
-        ExistingKeyView {
-            onClosed: function () {
-                if (hasAccounts) {
-                    applicationWindow.navigateTo("InitialState")
-                } else {
-                    applicationWindow.navigateTo("KeysMain")
-                }
-            }
-        }
-    }
-
-    Component {
-        id: genKey
-        GenKeyView {
-            onClosed: function () {
-                if (hasAccounts) {
-                    applicationWindow.navigateTo("InitialState")
-                } else {
-                    applicationWindow.navigateTo("KeysMain")
-                }
-            }
-        }
-    }
-
-    Component {
-        id: keycardFlowSelection
-        KeycardFlowSelectionView {
-            onClosed: function () {
-                if (hasAccounts) {
-                    applicationWindow.navigateTo("InitialState")
-                } else {
-                    applicationWindow.navigateTo("KeysMain")
-                }
-            }
-        }
-    }
-
-    Component {
-        id: login
-        LoginView {
-            onGenKeyClicked: function () {
-                applicationWindow.navigateTo("GenKey")
-            }
-            onExistingKeyClicked: function () {
-                applicationWindow.navigateTo("ExistingKey")
-            }
         }
     }
 
@@ -513,6 +357,10 @@ StatusWindow {
             applicationWindow.toggleFullScreen()
         }
     }
+
+    SplashScreen {
+        id: splashScreen
+    }
 }
 
 /*##^##