status-desktop/ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml

157 lines
4.3 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml.Models 2.15
import utils 1.0
import shared.controls 1.0
import shared.popups.walletconnect 1.0
import shared.popups.walletconnect.controls 1.0
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Popups.Dialog 0.1
import StatusQ.Components.private 0.1 as SQP
ComboBox {
id: root
signal dappsListReady
signal pairDapp
signal disconnectDapp(string dappUrl)
implicitHeight: 38
implicitWidth: 38
background: SQP.StatusComboboxBackground {
objectName: "dappsBackground"
active: root.down || root.hovered
}
indicator: null
contentItem: Item {
objectName: "dappsContentItem"
StatusBadge {
objectName: "dappBadge"
anchors.top: parent.top
anchors.right: parent.right
anchors.margins: 5
width: 6
height: 6
visible: root.delegateModel.count > 0
}
StatusIcon {
objectName: "dappIcon"
anchors.centerIn: parent
width: 16
height: 16
icon: "dapp"
color: Theme.palette.baseColor1
}
}
delegate: DAppDelegate {
width: ListView.view.width
onDisconnectDapp: (dappUrl) => {
root.disconnectDapp(dappUrl)
}
}
popup: DAppsListPopup {
objectName: "dappsListPopup"
x: root.width - width
y: root.height + 4
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
delegateModel: root.delegateModel
onConnectDapp: {
dappConnectSelectComponent.createObject(root).open()
this.close()
}
onOpened: {
root.dappsListReady()
}
}
Component {
id: dappConnectSelectComponent
StatusDialog {
id: dappConnectSelect
width: 480
topPadding: Theme.bigPadding
leftPadding: Theme.padding
rightPadding: Theme.padding
bottomPadding: 4
destroyOnClose: true
title: qsTr("Connect a dApp")
footer: StatusDialogFooter {
rightButtons: ObjectModel {
StatusButton {
text: qsTr("Cancel")
onClicked: dappConnectSelect.close()
}
}
}
contentItem: ColumnLayout {
StatusBaseText {
Layout.fillWidth: true
Layout.leftMargin: Theme.padding
color: Theme.palette.baseColor1
text: qsTr("How would you like to connect?")
}
StatusListItem {
title: "Status Connector"
asset.name: Theme.png("status-logo")
asset.isImage: true
components: [
StatusIcon {
icon: "external-link"
color: Theme.palette.baseColor1
}
]
onClicked: {
dappConnectSelect.close()
Global.openLink("https://chromewebstore.google.com/detail/a-wallet-connector-by-sta/kahehnbpamjplefhpkhafinaodkkenpg")
}
}
StatusListItem {
objectName: "btnWalletConnect"
title: "Wallet Connect"
asset.name: Theme.svg("walletconnect")
asset.isImage: true
components: [
StatusIcon {
icon: "next"
color: Theme.palette.baseColor1
}
]
onClicked: {
dappConnectSelect.close()
root.pairDapp()
}
}
}
}
}
StatusToolTip {
id: tooltip
objectName: "dappTooltip"
visible: root.hovered && !root.down
text: qsTr("dApp connections")
orientation: StatusToolTip.Orientation.Bottom
y: root.height + 14
}
}