status-desktop/ui/imports/shared/popups/walletconnect/ConnectDAppModal.qml

225 lines
7.8 KiB
QML
Raw Normal View History

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml.Models 2.15
import SortFilterProxyModel 0.2
import StatusQ 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Popups.Dialog 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import shared.controls 1.0
// TODO extract the components to StatusQ
import shared.popups.send.controls 1.0
import shared.popups.walletconnect.controls 1.0
import AppLayouts.Wallet.controls 1.0
import utils 1.0
import shared.popups.walletconnect.private 1.0
StatusDialog {
id: root
/*
Accounts model
Expected model structure:
name [string] - account name e.g. "Piggy Bank"
address [string] - wallet account address e.g. "0x1234567890"
colorizedChainPrefixes [string] - chain prefixes with rich text colors e.g. "<font color=\"red\">eth:</font><font color=\"blue\">oeth:</font><font color=\"green\">arb:</font>"
emoji [string] - emoji for account e.g. "🐷"
colorId [string] - color id for account e.g. "1"
currencyBalance [var] - fiat currency balance
amount [number] - amount of currency e.g. 1234
symbol [string] - currency symbol e.g. "USD"
optDisplayDecimals [number] - optional number of decimals to display
stripTrailingZeroes [bool] - strip trailing zeroes
walletType [string] - wallet type e.g. Constants.watchWalletType. See `Constants` for possible values
migratedToKeycard [bool] - whether account is migrated to keycard
accountBalance [var] - account balance for a specific network
formattedBalance [string] - formatted balance e.g. "1234.56B"
balance [string] - balance e.g. "123456000000"
iconUrl [string] - icon url e.g. "network/Network=Hermez"
chainColor [string] - chain color e.g. "#FF0000"
*/
required property var accounts
/*
Networks model
Expected model structure:
chainName [string] - chain long name. e.g. "Ethereum" or "Optimism"
chainId [int] - chain unique identifier
iconUrl [string] - SVG icon name. e.g. "network/Network=Ethereum"
layer [int] - chain layer. e.g. 1 or 2
isTest [bool] - true if the chain is a testnet
*/
required property var flatNetworks
property alias dAppUrl: dappCard.dAppUrl
property alias dAppName: dappCard.name
property alias dAppIconUrl: dappCard.iconUrl
property alias connectionStatus: d.connectionStatus
/*
Selected account address holds the initial account address selection for the account selector.
It is used to preselect the account in the account selector.
*/
property string selectedAccountAddress: contextCard.selectedAccount.address ?? ""
property bool multipleChainSelection: true
readonly property alias selectedAccount: contextCard.selectedAccount
readonly property alias selectedChains: d.selectedChains
readonly property int notConnectedStatus: 0
readonly property int connectionSuccessfulStatus: 1
readonly property int connectionFailedStatus: 2
refactor: Remove business logic from WC ui components This commit brings a separation of concerns for the UI components involved in dApp interactions. Issue: The UI components depend on the WalletConnectService and also on its dependencies like DAppsRequestHAndler. As a result the UI components have a hard dependency on the WalletConnect specifics and are incompatible with BC. This results in duplication of logic. Issue: The UI components operate on WalletConnect specific JSON object. E.g. session objects, session proposal etc. As a result the UI is built around the WalletConnect message format. Issue: The UI components operate on ListModel items received through functions and stored internally. Any change in the model would result in a crash. Solution: Remove the WalletConnectService dependency from DAppsWorkflow. The DAppsWorkflow now operates with models, signals and functions. This is the first step in the broader refactoring. Moving the logic into the service itself will allow us to further refactor the WC and BC. How does it work now: Dependencies - The UI components have a dependency on models. SessionRequestsModel and DAppsModel. Pairing - The pairing is initiated in the UI. On user input a pairingValidationRequested signal is emitted and the result is received as a function pairingValidated. If the url is valid the UI requests a pairingRequested. When the WalletConnectService is refactored we can go further and request only pairingRequested and to receive a pairingResult call as a function with the result. In the current implementation on pairingRequested we'll receive a connectDApp request. Connecting dApps - The flow is initiated with connectDApp function. This call currently contains all the needed info as args. In the next step it could be replaced with a ConnectionRequests model. The connectDApp call triggered a connection popup if we're not currently showing one to the user. If we're currently showing one it will be queued (corner case). The connection can be accepted with connectionAccepted and rejected with connectionDeclined. Once the connection is accepted we're expecting a result connectionSuccessful or connectionFailed. The connectionSuccessful also expects a new id for the established connection. Signing - The signing flow orbits around the SessionRequestsModel. Each item from the model will generate a popup showing the sign details to the user. Sign can be accepted or rejected using signRequestAccepted or signRequestRejected. No response is currently expected. The model is expected to remove the sign request item.
2024-10-03 18:15:24 +00:00
function pairSuccessful() {
d.connectionStatus = root.connectionSuccessfulStatus
}
refactor: Remove business logic from WC ui components This commit brings a separation of concerns for the UI components involved in dApp interactions. Issue: The UI components depend on the WalletConnectService and also on its dependencies like DAppsRequestHAndler. As a result the UI components have a hard dependency on the WalletConnect specifics and are incompatible with BC. This results in duplication of logic. Issue: The UI components operate on WalletConnect specific JSON object. E.g. session objects, session proposal etc. As a result the UI is built around the WalletConnect message format. Issue: The UI components operate on ListModel items received through functions and stored internally. Any change in the model would result in a crash. Solution: Remove the WalletConnectService dependency from DAppsWorkflow. The DAppsWorkflow now operates with models, signals and functions. This is the first step in the broader refactoring. Moving the logic into the service itself will allow us to further refactor the WC and BC. How does it work now: Dependencies - The UI components have a dependency on models. SessionRequestsModel and DAppsModel. Pairing - The pairing is initiated in the UI. On user input a pairingValidationRequested signal is emitted and the result is received as a function pairingValidated. If the url is valid the UI requests a pairingRequested. When the WalletConnectService is refactored we can go further and request only pairingRequested and to receive a pairingResult call as a function with the result. In the current implementation on pairingRequested we'll receive a connectDApp request. Connecting dApps - The flow is initiated with connectDApp function. This call currently contains all the needed info as args. In the next step it could be replaced with a ConnectionRequests model. The connectDApp call triggered a connection popup if we're not currently showing one to the user. If we're currently showing one it will be queued (corner case). The connection can be accepted with connectionAccepted and rejected with connectionDeclined. Once the connection is accepted we're expecting a result connectionSuccessful or connectionFailed. The connectionSuccessful also expects a new id for the established connection. Signing - The signing flow orbits around the SessionRequestsModel. Each item from the model will generate a popup showing the sign details to the user. Sign can be accepted or rejected using signRequestAccepted or signRequestRejected. No response is currently expected. The model is expected to remove the sign request item.
2024-10-03 18:15:24 +00:00
function pairFailed() {
d.connectionStatus = root.connectionFailedStatus
}
signal connect()
signal decline()
signal disconnect()
width: 480
title: d.connectionSuccessful ? qsTr("dApp connected") :
qsTr("Connection request")
padding: 0
StatusScrollView {
id: scrollView
anchors.fill: parent
contentWidth: availableWidth
topPadding: 0
bottomPadding: 0
ColumnLayout {
spacing: 20
anchors.left: parent.left
anchors.leftMargin: 4
anchors.right: parent.right
anchors.rightMargin: 4
DAppCard {
id: dappCard
Layout.maximumWidth: scrollView.availableWidth - Layout.leftMargin * 2
Layout.leftMargin: 12
Layout.rightMargin: Layout.leftMargin
Layout.topMargin: 14
Layout.bottomMargin: Layout.topMargin
connectionSuccessful: d.connectionSuccessful
connectionAttempted: d.connectionAttempted
}
ContextCard {
id: contextCard
Layout.maximumWidth: scrollView.availableWidth
Layout.fillWidth: true
multipleChainSelection: root.multipleChainSelection
selectedAccountAddress: root.selectedAccountAddress
connectionAttempted: d.connectionAttempted
accountsModel: d.accountsProxy
chainsModel: root.flatNetworks
chainSelection: d.selectedChains
onChainSelectionChanged: {
if (d.selectedChains !== chainSelection) {
d.selectedChains = chainSelection
}
}
}
PermissionsCard {
Layout.maximumWidth: scrollView.availableWidth
Layout.fillWidth: true
Layout.leftMargin: 16
Layout.rightMargin: Layout.leftMargin
Layout.topMargin: 12
Layout.bottomMargin: Layout.topMargin
dappName: dappCard.name
}
}
}
footer: StatusDialogFooter {
id: footer
rightButtons: ObjectModel {
StatusFlatButton {
objectName: "rejectButton"
height: 44
text: qsTr("Reject")
visible: !d.connectionAttempted
onClicked: root.decline()
}
StatusFlatButton {
objectName: "disconnectButton"
height: 44
text: qsTr("Disconnect")
visible: d.connectionSuccessful
type: StatusBaseButton.Type.Danger
onClicked: root.disconnect()
}
StatusButton {
objectName: "primaryActionButton"
height: 44
text: d.connectionAttempted ? qsTr("Close") : qsTr("Connect")
enabled: {
if (!d.connectionAttempted)
return root.selectedChains.length > 0
return true
}
onClicked: {
if (!d.connectionAttempted)
root.connect()
else
root.close()
}
}
}
}
QtObject {
id: d
property SortFilterProxyModel accountsProxy: SortFilterProxyModel {
sourceModel: root.accounts
sorters: RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
}
property var selectedChains: allChainIdsAggregator.value
readonly property FunctionAggregator allChainIdsAggregator: FunctionAggregator {
model: root.flatNetworks
initialValue: []
roleName: "chainId"
aggregateFunction: (aggr, value) => [...aggr, value]
}
property int connectionStatus: root.notConnectedStatus
readonly property bool connectionSuccessful: d.connectionStatus === root.connectionSuccessfulStatus
readonly property bool connectionFailed: d.connectionStatus === root.connectionFailedStatus
readonly property bool connectionAttempted: d.connectionStatus !== root.notConnectedStatus
}
}