status-desktop/storybook/pages/ConnectDAppModalPage.qml
Alex Jbanca 2f050a025f feat(WalletConnect): Fine-tune connect dApp modal
Changes:
1. Align dialog with Figma design
2. Add new components for round image with badge and connection status tag
3. Add tests
4. Dapps service will now receive wallet `RootStore` as input and reuse existing models with account balance and other necessary info for account selection and chain selection
5. Minor updates in stores
6. Minor updates in WC toast messages to display app domain instead of app url
2024-07-05 01:03:23 +03:00

126 lines
2.7 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
// qml Splitter
SplitView {
anchors.fill: parent
PopupBackground {
SplitView.fillWidth: true
Button {
text: "Open"
onClicked: modal.open()
anchors.centerIn: parent
}
ConnectDAppModal {
id: modal
anchors.centerIn: parent
modal: false
closePolicy: Popup.NoAutoClose
visible: true
spacing: 8
accounts: WalletAccountsModel {}
flatNetworks: SortFilterProxyModel {
sourceModel: NetworksModel.flatNetworks
filters: ValueFilter { roleName: "isTest"; value: false; }
}
dAppUrl: dAppUrlField.text
dAppName: dAppNameField.text
dAppIconUrl: hasIconCheckbox.checked ? "https://avatars.githubusercontent.com/u/37784886" : ""
connectionStatus: pairedCheckbox.checked ? pairedStatusCheckbox.checked ? connectionSuccessfulStatus : connectionFailedStatus : notConnectedStatus
}
}
ColumnLayout {
id: optionsSpace
CheckBox {
id: pairedCheckbox
text: "Report Paired"
checked: true
}
CheckBox {
id: pairedStatusCheckbox
text: "Paired Successful"
checked: true
}
CheckBox {
id: hasIconCheckbox
text: "Has Icon"
checked: true
}
Label {
text: "DappName"
}
TextField {
id: dAppNameField
text: "React App"
}
Label {
text: "DApp URL"
}
TextField {
id: dAppUrlField
text: "https://react-app.walletconnect.com"
}
Item { Layout.fillHeight: true }
}
}
Timer {
id: pairedResultTimer
interval: 1000
running: false
repeat: false
onTriggered: {
}
}
}
// category: Wallet