qml: Add UI Snapshot components

src/qml/components/ConnectionSettings.qml

@@ -8,7 +8,37 @@ import QtQuick.Layouts 1.15
 import "../controls"
 
 ColumnLayout {
+    property bool snapshotImported: false
+    function setSnapshotImported(imported) {
+        snapshotImported = imported
+    }
+
     spacing: 4
+    Setting {
+        id: gotoSnapshot
+        Layout.fillWidth: true
+        header: qsTr("Load snapshot")
+        description: qsTr("Instant use with background sync")
+        actionItem: Item {
+            width: 26
+            height: 26
+            CaretRightIcon {
+                anchors.centerIn: parent
+                visible: !snapshotImported
+                color: gotoSnapshot.stateColor
+            }
+            GreenCheckIcon {
+                anchors.centerIn: parent
+                visible: snapshotImported
+                color: Theme.color.transparent
+            }
+        }
+        onClicked: {
+            connectionSwipe.incrementCurrentIndex()
+            connectionSwipe.incrementCurrentIndex()
+        }
+    }
+    Separator { Layout.fillWidth: true }
     Setting {
         Layout.fillWidth: true
         header: qsTr("Enable listening")

src/qml/components/LoadedSnapshotSettings.qml

@@ -0,0 +1,97 @@
+// Copyright (c) 2024-present The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import "../controls"
+
+ColumnLayout {
+    signal snapshotImportCompleted()
+    id: columnLayout
+    width: Math.min(parent.width, 450)
+    anchors.horizontalCenter: parent.horizontalCenter
+
+    Image {
+        Layout.alignment: Qt.AlignCenter
+        source: "image://images/circle-green-check"
+
+        sourceSize.width: 60
+        sourceSize.height: 60
+    }
+
+    Header {
+        Layout.fillWidth: true
+        Layout.leftMargin: 20
+        Layout.rightMargin: 20
+        header: qsTr("Snapshot Loaded")
+        description: qsTr("It contains transactions up to January 12, 2024. Newer transactions still need to be downloaded." +
+         " The data will be verified in the background. ")
+    }
+
+    ContinueButton {
+        Layout.preferredWidth: Math.min(300, parent.width - 2 * Layout.leftMargin)
+        Layout.topMargin: 40
+        Layout.leftMargin: 20
+        Layout.rightMargin: Layout.leftMargin
+        Layout.bottomMargin: 20
+        Layout.alignment: Qt.AlignCenter
+        text: qsTr("Done")
+        onClicked: {
+            columnLayout.snapshotImportCompleted()
+            connectionSwipe.decrementCurrentIndex()
+            connectionSwipe.decrementCurrentIndex()
+            connectionSwipe.decrementCurrentIndex()
+            connectionSwipe.decrementCurrentIndex()
+        }
+    }
+
+    Setting {
+        id: viewDetails
+        Layout.alignment: Qt.AlignCenter
+        header: qsTr("View details")
+        actionItem: CaretRightIcon {
+            id: caretIcon
+            color: viewDetails.stateColor
+            rotation: viewDetails.expanded ? 90 : 0
+            Behavior on rotation { NumberAnimation { duration: 200 } }
+        }
+
+        property bool expanded: false
+
+        onClicked: {
+            expanded = !expanded
+        }
+    }
+
+    ColumnLayout {
+        id: detailsContent
+        visible: viewDetails.expanded
+        Layout.preferredWidth: Math.min(300, parent.width - 2 * Layout.leftMargin)
+        Layout.alignment: Qt.AlignCenter
+        Layout.leftMargin: 80
+        Layout.rightMargin: 80
+        Layout.topMargin: 10
+        spacing: 10
+        // TODO: make sure the block height number aligns right
+        RowLayout {
+            CoreText {
+                text: qsTr("Block Height:")
+                Layout.alignment: Qt.AlignLeft
+                font.pixelSize: 14
+            }
+            CoreText {
+                text: qsTr("200,000")
+                Layout.alignment: Qt.AlignRight
+                font.pixelSize: 14
+            }
+        }
+        Separator { Layout.fillWidth: true }
+        CoreText {
+            text: qsTr("Hash: 0x1234567890abcdef...")
+            font.pixelSize: 14
+        }
+    }
+}

src/qml/components/ProgressBarSettings.qml

@@ -0,0 +1,40 @@
+// Copyright (c) 2023-present The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import "../controls"
+
+
+ColumnLayout {
+    id: columnLayout
+    width: Math.min(parent.width, 450)
+    anchors.horizontalCenter: parent.horizontalCenter
+
+    Image {
+        Layout.alignment: Qt.AlignCenter
+        source: "image://images/circle-file"
+
+        sourceSize.width: 200
+        sourceSize.height: 200
+    }
+
+    Header {
+        Layout.fillWidth: true
+        Layout.leftMargin: 20
+        Layout.rightMargin: 20
+        header: qsTr("Loading Snapshot")
+    }
+
+    ProgressIndicator {
+        id: progressIndicator
+        width: 200
+        height: 20
+        progress: connectionSwipe.snapshotVerificationProgress
+        Layout.alignment: Qt.AlignCenter
+        progressColor: Theme.color.blue
+    }
+}

src/qml/components/SnapshotSettings.qml

@@ -0,0 +1,68 @@
+// Copyright (c) 2023-present The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import "../controls"
+
+ColumnLayout {
+    id: columnLayout
+    width: Math.min(parent.width, 450)
+    anchors.horizontalCenter: parent.horizontalCenter
+
+
+    Timer {
+        id: snapshotSimulationTimer
+        interval: 50 // Update every 50ms
+        running: false
+        repeat: true
+        onTriggered: {
+            if (connectionSwipe.snapshotVerificationProgress < 1) {
+                connectionSwipe.snapshotVerificationProgress += 0.01
+            } else {
+                connectionSwipe.snapshotVerificationCycles++
+                if (connectionSwipe.snapshotVerificationCycles < 1) {
+                    connectionSwipe.snapshotVerificationProgress = 0
+                } else {
+                    running = false
+                    connectionSwipe.snapshotVerified = true
+                    connectionSwipe.incrementCurrentIndex()
+                }
+            }
+        }
+    }
+
+    Image {
+        Layout.alignment: Qt.AlignCenter
+        source: "image://images/circle-file"
+
+        sourceSize.width: 200
+        sourceSize.height: 200
+    }
+
+    Header {
+        Layout.fillWidth: true
+        Layout.leftMargin: 20
+        Layout.rightMargin: 20
+        header: qsTr("Load Snapshot")
+        description: qsTr("You can start using the application more quickly by importing a recent transaction snapshot." +
+         " It will be automatically verified in the background.")
+    }
+
+    ContinueButton {
+        Layout.preferredWidth: Math.min(300, parent.width - 2 * Layout.leftMargin)
+        Layout.topMargin: 40
+        Layout.leftMargin: 20
+        Layout.rightMargin: Layout.leftMargin
+        Layout.bottomMargin: 20
+        Layout.alignment: Qt.AlignCenter
+        text: qsTr("Choose snapshot file")
+        onClicked: {
+            connectionSwipe.incrementCurrentIndex()
+            snapshotSimulationTimer.start()
+        }
+    }
+}