status-desktop/storybook/pages/ConnectDAppModalPage.qml
Stefan ee72ec7aee feat(dapps) add DAppsService component and ConnectDAppModal
Implement the initial Pairing user workflow and disconnect option for
the first session.

Also

- rename pairing modal accordingly (`PairWCModal.qml`) to make room for the proper
`ConnectDAppModal.qml`
- basic tests for service helpers
- update storybook to reflect the new user workflows

Closes #14607
2024-05-20 15:09:57 +02:00

127 lines
2.9 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml 2.15
import Qt.labs.settings 1.0
import QtTest 1.15
import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Popups.Dialog 0.1
import Models 1.0
import Storybook 1.0
import shared.popups.walletconnect 1.0
import SortFilterProxyModel 0.2
import AppLayouts.Wallet.panels 1.0
import utils 1.0
import shared.stores 1.0
Item {
id: root
function openModal() {
modal.openWithFilter([1, 42161], JSON.parse(`{
"metadata": {
"description": "React App for WalletConnect",
"icons": [
"https://avatars.githubusercontent.com/u/37784886"
],
"name": "React App",
"url": "https://react-app.walletconnect.com",
"verifyUrl": "https://verify.walletconnect.com"
},
"publicKey": "300a6a1df4cb0cd73eb652f11845f35a318541eb18ab369860be85c0c2ada54a"
}`))
if (pairedCheckbox.checked) {
pairedResultTimer.restart()
}
}
// qml Splitter
SplitView {
anchors.fill: parent
ColumnLayout {
SplitView.fillWidth: true
Component.onCompleted: root.openModal()
StatusButton {
id: openButton
Layout.alignment: Qt.AlignHCenter
Layout.margins: 20
text: "Open ConnectDAppModal"
onClicked: root.openModal()
}
ConnectDAppModal {
id: modal
anchors.centerIn: parent
spacing: 8
accounts: WalletAccountsModel{
}
flatNetworks: SortFilterProxyModel {
sourceModel: NetworksModel.flatNetworks
filters: ValueFilter { roleName: "isTest"; value: false; }
}
}
ColumnLayout {}
}
ColumnLayout {
id: optionsSpace
CheckBox {
id: pairedCheckbox
text: "Report Paired"
checked: true
}
CheckBox {
id: pairedStatusCheckbox
text: "Paired Successful"
checked: true
}
Item { Layout.fillHeight: true }
}
}
Timer {
id: pairedResultTimer
interval: 1000
running: false
repeat: false
onTriggered: {
if (pairedCheckbox.checked) {
if (pairedStatusCheckbox.checked) {
modal.pairSuccessful(null)
} else {
modal.pairFailed(null, "Pairing failed")
}
}
}
}
}
// category: Wallet