feat(dapps): Implemented hovering and proper image color for dapps item delegate. (#15408)

Enabled walletconnect qml tests.
Closes #14760

storybook/qmlTests/tests/tst_DappsComboBox.qml

@@ -97,4 +97,4 @@ Item {
             compare(dappTooltip.visible, false)
         }
     }
-}
+}

ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml

@@ -5,6 +5,7 @@ import QtGraphicalEffects 1.15
 
 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

ui/imports/shared/popups/walletconnect/ConnectDAppModal.qml

@@ -17,6 +17,7 @@ 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
 
@@ -98,6 +99,13 @@ StatusDialog {
         DAppCard {
             id: dappCard
 
+            afterTwoSecondsFromStatus: d.afterTwoSecondsFromStatus
+
+            isConnectedSuccessfully: d.connectionStatus === root.connectionSuccessfulStatus
+            isConnectionFailed: d.connectionStatus === root.connectionFailedStatus
+            isConnectionStarted: d.connectionStatus !== root.notConnectedStatus
+            isConnectionFailedOrDisconnected: d.connectionStatus !== root.connectionSuccessfulStatus
+
             Layout.alignment: Qt.AlignHCenter
             Layout.leftMargin: 12
             Layout.rightMargin: Layout.leftMargin
@@ -107,6 +115,11 @@ StatusDialog {
 
         ContextCard {
             Layout.fillWidth: true
+            accountsProxy: d.accountsProxy
+            selectedAccount: d.selectedAccount
+            selectedChains: d.selectedChains
+            filteredChains: d.filteredChains
+            notConnected: d.connectionStatus === root.notConnectedStatus
         }
 
         PermissionsCard {
@@ -156,221 +169,6 @@ StatusDialog {
         }
     }
 
-    component ContextCard: Rectangle {
-        id: contextCard
-
-        implicitWidth: contextLayout.implicitWidth
-        implicitHeight: contextLayout.implicitHeight
-
-        radius: 8
-        // TODO: the color matched the design color (grey4); It is also matching the intention or we should add some another color to the theme? (e.g. sectionBorder)?
-        border.color: Theme.palette.baseColor2
-        border.width: 1
-        color: "transparent"
-
-        ColumnLayout {
-            id: contextLayout
-
-            anchors.fill: parent
-
-            RowLayout {
-                Layout.margins: 16
-
-                StatusBaseText {
-                    text: qsTr("Connect with")
-
-                    Layout.fillWidth: true
-                }
-
-                AccountSelector {
-                    id: accountsDropdown
-
-                    Layout.preferredWidth: 204
-
-                    control.enabled: d.connectionStatus === root.notConnectedStatus && count > 1
-                    model: d.accountsProxy
-                    onCurrentAccountChanged: d.selectedAccount = currentAccount
-                }
-            }
-
-            Rectangle {
-                Layout.fillWidth: true
-                height: 1
-                color: contextCard.border.color
-            }
-
-            RowLayout {
-                Layout.margins: 16
-
-                StatusBaseText {
-                    text: qsTr("On")
-
-                    Layout.fillWidth: true
-                }
-
-                NetworkFilter {
-                    id: networkFilter
-                    Layout.preferredWidth: accountsDropdown.Layout.preferredWidth
-
-                    flatNetworks: d.filteredChains
-                    showTitle: true
-                    multiSelection: true
-                    selectionAllowed: d.connectionStatus === root.notConnectedStatus && d.allChainIdsAggregator.value.length > 1
-                    selection: d.selectedChains
-
-                    onSelectionChanged: {
-                        if (d.selectedChains !== networkFilter.selection) {
-                            d.selectedChains = networkFilter.selection
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    component DAppCard: ColumnLayout {
-        property alias name: appNameText.text
-        property alias url: appUrlText.text
-        property string iconUrl: ""
-
-        Rectangle {
-            Layout.alignment: Qt.AlignHCenter
-            Layout.preferredWidth: 72
-            Layout.preferredHeight: Layout.preferredWidth
-
-            radius: width / 2
-            color: Theme.palette.primaryColor3
-
-            StatusRoundedImage {
-                id: iconDisplay
-
-                anchors.fill: parent
-
-                visible: !fallbackImage.visible
-
-                image.source: iconUrl
-            }
-
-            StatusIcon {
-                id: fallbackImage
-
-                anchors.centerIn: parent
-
-                width: 40
-                height: 40
-
-                icon: "dapp"
-                color: Theme.palette.primaryColor1
-
-                visible: iconDisplay.image.isLoading || iconDisplay.image.isError || !iconUrl
-            }
-        }
-
-        StatusBaseText {
-            id: appNameText
-
-            Layout.alignment: Qt.AlignHCenter
-            Layout.bottomMargin: 4
-
-            font.bold: true
-            font.pixelSize: 17
-        }
-
-        // TODO replace with the proper URL control
-        StatusLinkText {
-            id: appUrlText
-
-            Layout.alignment: Qt.AlignHCenter
-            font.pixelSize: 15
-        }
-
-        Rectangle {
-            Layout.preferredWidth: pairingStatusLayout.implicitWidth + 32
-            Layout.preferredHeight: pairingStatusLayout.implicitHeight + 14
-
-            Layout.alignment: Qt.AlignHCenter
-            Layout.topMargin: 16
-
-            visible: d.connectionStatus !== root.notConnectedStatus
-
-            color: d.connectionStatus === root.connectionSuccessfulStatus
-                        ? d.afterTwoSecondsFromStatus
-                            ? Theme.palette.successColor2
-                            : Theme.palette.successColor3
-                        : d.afterTwoSecondsFromStatus
-                            ? "transparent"
-                            : Theme.palette.dangerColor3
-            border.color: d.connectionStatus === root.connectionSuccessfulStatus
-                                ? Theme.palette.successColor2
-                                : Theme.palette.dangerColor2
-            border.width: 1
-            radius: height / 2
-
-            RowLayout {
-                id: pairingStatusLayout
-
-                anchors.centerIn: parent
-
-                spacing: 8
-
-                Rectangle {
-                    width: 6
-                    height: 6
-                    radius: width / 2
-
-                    visible: d.connectionStatus === root.connectionSuccessfulStatus
-                    color: Theme.palette.successColor1
-                }
-
-                StatusIcon {
-                    Layout.preferredWidth: 16
-                    Layout.preferredHeight: 16
-
-                    visible: d.connectionStatus !== root.connectionSuccessfulStatus
-
-                    color: Theme.palette.dangerColor1
-                    icon: "warning"
-                }
-
-                StatusBaseText {
-                    text: {
-                        if (d.connectionStatus === root.connectionSuccessfulStatus)
-                            return qsTr("Connected. You can now go back to the dApp.")
-                        else if (d.connectionStatus === root.connectionFailedStatus)
-                            return qsTr("Error connecting to dApp. Close and try again")
-                        return ""
-                    }
-
-                    font.pixelSize: 12
-                    color: d.connectionStatus === root.connectionSuccessfulStatus ? Theme.palette.directColor1 : Theme.palette.dangerColor1
-                }
-            }
-        }
-    }
-
-    component PermissionsCard: ColumnLayout {
-        spacing: 8
-
-        StatusBaseText {
-            text: qsTr("Uniswap Interface will be able to:")
-
-            font.pixelSize: 13
-            color: Theme.palette.baseColor1
-        }
-
-        StatusBaseText {
-            text: qsTr("Check your account balance and activity")
-
-            font.pixelSize: 13
-        }
-
-        StatusBaseText {
-            text: qsTr("Request transactions and message signing")
-
-            font.pixelSize: 13
-        }
-    }
-
     QtObject {
         id: d
 

ui/imports/shared/popups/walletconnect/DAppRequestModal.qml

@@ -9,6 +9,7 @@ import StatusQ.Components 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1 as StatusQ
 
+import shared.popups.walletconnect.panels 1.0
 import utils 1.0
 
 import AppLayouts.Wallet.services.dapps.types 1.0
@@ -59,11 +60,15 @@ StatusDialog {
                 dappName: root.dappName
                 dappIcon: root.dappIcon
                 account: root.account
+
+                userDisplayNaming: d.userDisplayNaming
             }
 
             ContentPanel {
                 Layout.fillWidth: true
                 Layout.maximumHeight: 340
+
+                payloadToDisplay: d.payloadToDisplay
             }
 
             // TODO: externalize as a TargetPanel
@@ -268,11 +273,14 @@ StatusDialog {
 
         leftButtons: ObjectModel {
             MaxFeesDisplay {
+                maxFeesText: root.maxFeesText
+                feesTextColor: root.enoughFunds ? Theme.palette.directColor1 : Theme.palette.dangerColor1
             }
             Item {
                 width: 20
             }
             EstimatedTimeDisplay {
+                estimatedTimeText: root.estimatedTimeText
                 visible: !!root.estimatedTimeText
             }
         }
@@ -299,191 +307,6 @@ StatusDialog {
         }
     }
 
-    component MaxFeesDisplay: ColumnLayout {
-        StatusBaseText {
-            text: qsTr("Max fees:")
-
-            font.pixelSize: 12
-            color: Theme.palette.directColor1
-        }
-        StatusBaseText {
-            id: maxFeesDisplay
-            text: root.maxFeesText
-
-            visible: !!root.maxFeesText
-
-            font.pixelSize: 16
-            color: root.enoughFunds ? Theme.palette.directColor1 : Theme.palette.dangerColor1
-        }
-        StatusBaseText {
-            text: qsTr("No fees")
-
-            visible: !maxFeesDisplay.visible
-
-            font.pixelSize: maxFeesDisplay.font.pixelSize
-            font.weight: maxFeesDisplay.font.weight
-        }
-    }
-
-    component EstimatedTimeDisplay: ColumnLayout {
-        StatusBaseText {
-            text: qsTr("Est. time:")
-            font.pixelSize: 12
-            color: Theme.palette.directColor1
-        }
-        StatusBaseText {
-            text: root.estimatedTimeText
-            font.pixelSize: 16
-        }
-    }
-
-    component IntentionPanel: ColumnLayout {
-        spacing: 8
-
-        required property string dappName
-        required property url dappIcon
-        required property var account
-
-        // Icons
-        Item {
-            Layout.fillWidth: true
-            Layout.preferredHeight: 40
-            Layout.alignment: Qt.AlignHCenter
-            Layout.bottomMargin: 8
-
-            StatusRoundedImage {
-                id: dappIconComponent
-
-                width: height
-                height: parent.height
-
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.horizontalCenterOffset: -16
-                anchors.verticalCenter: parent.verticalCenter
-
-                image.source: root.dappIcon
-            }
-            StatusRoundIcon {
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.horizontalCenterOffset: 16
-                anchors.verticalCenter: parent.verticalCenter
-
-                asset: StatusAssetSettings {
-                    width: 24
-                    height: 24
-                    color: Theme.palette.primaryColor1
-                    bgWidth: 40
-                    bgHeight: 40
-                    bgColor: Theme.palette.desktopBlue10
-                    bgRadius: bgWidth / 2
-                    bgBorderWidth: 2
-                    bgBorderColor: Theme.palette.statusAppLayout.backgroundColor
-                    source: "assets/sign.svg"
-                }
-            }
-        }
-
-        // Names and intentions
-        StatusBaseText {
-            text: qsTr("%1 wants you to %2 with %3").arg(dappName).arg(d.userDisplayNaming).arg(account.name)
-
-            Layout.preferredWidth: 400
-            Layout.alignment: Qt.AlignHCenter
-
-            font.pixelSize: 15
-            font.weight: Font.DemiBold
-
-            wrapMode: Text.WordWrap
-            horizontalAlignment: Text.AlignHCenter
-        }
-
-        // TODO #14762: externalize as a InfoPill and merge base implementation with
-        // the existing IssuePill reusable component
-        Rectangle {
-            Layout.preferredWidth: operationStatusLayout.implicitWidth + 24
-            Layout.preferredHeight: operationStatusLayout.implicitHeight + 14
-
-            Layout.alignment: Qt.AlignHCenter
-
-            visible: true
-
-            border.color: Theme.palette.successColor2
-            border.width: 1
-            color: "transparent"
-            radius: height / 2
-
-            RowLayout {
-                id: operationStatusLayout
-
-                spacing: 8
-
-                anchors.centerIn: parent
-
-                StatusIcon {
-                    Layout.preferredWidth: 16
-                    Layout.preferredHeight: 16
-
-                    visible: true
-
-                    color: Theme.palette.directColor1
-                    icon: "info"
-                }
-
-                StatusBaseText {
-                    text: qsTr("Only sign if you trust the dApp")
-
-                    font.pixelSize: 12
-                    color: Theme.palette.directColor1
-                }
-            }
-        }
-    }
-
-    component ContentPanel: Rectangle {
-        id: contentPanelRect
-        border.width: 1
-        border.color: Theme.palette.baseColor2
-        color: "transparent"
-        radius: 8
-
-        implicitHeight: contentScrollView.implicitHeight + (2 * contentText.anchors.margins)
-
-        MouseArea {
-            anchors.fill: parent
-            cursorShape: contentScrollView.enabled || !enabled ? undefined : Qt.PointingHandCursor
-            enabled: contentScrollView.height < contentScrollView.contentHeight
-
-            onClicked: {
-                contentScrollView.enabled = !contentScrollView.enabled
-            }
-            z: contentScrollView.z + 1
-        }
-
-        StatusScrollView {
-            id: contentScrollView
-            anchors.fill: parent
-
-            contentWidth: availableWidth
-            contentHeight: contentText.contentHeight
-
-            padding: 0
-
-            enabled: false
-
-            StatusBaseText {
-                id: contentText
-                anchors.fill: parent
-                anchors.margins: 20
-
-                width: contentScrollView.availableWidth
-
-                text: d.payloadToDisplay
-
-                wrapMode: Text.WrapAnywhere
-            }
-        }
-    }
-
     QtObject {
         id: d
 

ui/imports/shared/popups/walletconnect/controls/ContextCard.qml

@@ -0,0 +1,88 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import AppLayouts.Wallet.controls 1.0
+
+import shared.controls 1.0
+
+Rectangle {
+    id: root
+
+    property var accountsProxy
+    property var selectedAccount
+    property var selectedChains
+    property var filteredChains
+    property bool notConnected: true
+
+    implicitWidth: contextLayout.implicitWidth
+    implicitHeight: contextLayout.implicitHeight
+
+    radius: 8
+    // TODO: the color matched the design color (grey4); It is also matching the intention or we should add some another color to the theme? (e.g. sectionBorder)?
+    border.color: Theme.palette.baseColor2
+    border.width: 1
+    color: "transparent"
+
+    ColumnLayout {
+        id: contextLayout
+
+        anchors.fill: parent
+
+        RowLayout {
+            Layout.margins: 16
+
+            StatusBaseText {
+                text: qsTr("Connect with")
+
+                Layout.fillWidth: true
+            }
+
+            AccountSelector {
+                id: accountsDropdown
+
+                Layout.preferredWidth: 204
+
+                control.enabled: root.notConnected && count > 1
+                model: accountsProxy
+                onCurrentAccountChanged: root.selectedAccount = currentAccount
+            }
+        }
+
+        Rectangle {
+            Layout.fillWidth: true
+            height: 1
+            color: root.border.color
+        }
+
+        RowLayout {
+            Layout.margins: 16
+
+            StatusBaseText {
+                text: qsTr("On")
+
+                Layout.fillWidth: true
+            }
+
+            NetworkFilter {
+                id: networkFilter
+                Layout.preferredWidth: accountsDropdown.Layout.preferredWidth
+
+                flatNetworks: root.filteredChains
+                showTitle: true
+                multiSelection: true
+                selectionAllowed: notConnected && root.selectedChains.length > 1
+                selection: root.selectedChains
+
+                onSelectionChanged: {
+                    if (root.selectedChains !== networkFilter.selection) {
+                        root.selectedChains = networkFilter.selection
+                    }
+                }
+            }
+        }
+    }
+}

ui/imports/shared/popups/walletconnect/controls/DAppCard.qml

@@ -0,0 +1,137 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+ColumnLayout {
+    id: root
+
+    property alias name: appNameText.text
+    property alias url: appUrlText.text
+    property string iconUrl: ""
+
+    property bool afterTwoSecondsFromStatus
+    property bool isConnectedSuccessfully: false
+    property bool isConnectionFailed: true
+    property bool isConnectionStarted: false
+    property bool isConnectionFailedOrDisconnected: true
+
+    Rectangle {
+        Layout.alignment: Qt.AlignHCenter
+        Layout.preferredWidth: 72
+        Layout.preferredHeight: Layout.preferredWidth
+
+        radius: width / 2
+        color: Theme.palette.primaryColor3
+
+        StatusRoundedImage {
+            id: iconDisplay
+
+            anchors.fill: parent
+
+            visible: !fallbackImage.visible
+
+            image.source: iconUrl
+        }
+
+        StatusIcon {
+            id: fallbackImage
+
+            anchors.centerIn: parent
+
+            width: 40
+            height: 40
+
+            icon: "dapp"
+            color: Theme.palette.primaryColor1
+
+            visible: iconDisplay.image.isLoading || iconDisplay.image.isError || !iconUrl
+        }
+    }
+
+    StatusBaseText {
+        id: appNameText
+
+        Layout.alignment: Qt.AlignHCenter
+        Layout.bottomMargin: 4
+
+        font.bold: true
+        font.pixelSize: 17
+    }
+
+    // TODO replace with the proper URL control
+    StatusLinkText {
+        id: appUrlText
+
+        Layout.alignment: Qt.AlignHCenter
+        font.pixelSize: 15
+    }
+
+    Rectangle {
+        Layout.preferredWidth: pairingStatusLayout.implicitWidth + 32
+        Layout.preferredHeight: pairingStatusLayout.implicitHeight + 14
+
+        Layout.alignment: Qt.AlignHCenter
+        Layout.topMargin: 16
+
+        visible: root.isConnectionStarted
+
+        color: root.isConnectedSuccessfully
+               ? root.afterTwoSecondsFromStatus
+                 ? Theme.palette.successColor2
+                 : Theme.palette.successColor3
+        : root.afterTwoSecondsFromStatus
+        ? "transparent"
+        : Theme.palette.dangerColor3
+        border.color: root.isConnectedSuccessfully
+                      ? Theme.palette.successColor2
+                      : Theme.palette.dangerColor2
+        border.width: 1
+        radius: height / 2
+
+        RowLayout {
+            id: pairingStatusLayout
+
+            anchors.centerIn: parent
+
+            spacing: 8
+
+            Rectangle {
+                width: 6
+                height: 6
+                radius: width / 2
+
+                visible: root.isConnectedSuccessfully
+                color: Theme.palette.successColor1
+            }
+
+            StatusIcon {
+                Layout.preferredWidth: 16
+                Layout.preferredHeight: 16
+
+                visible: root.isConnectionFailedOrDisconnected
+
+                color: Theme.palette.dangerColor1
+                icon: "warning"
+            }
+
+            StatusBaseText {
+                text: {
+                    if (root.isConnectedSuccessfully)
+                        return qsTr("Connected. You can now go back to the dApp.")
+                    else if (root.isConnectionFailed)
+                        return qsTr("Error connecting to dApp. Close and try again")
+                    return ""
+                }
+
+                font.pixelSize: 12
+                color: root.isConnectedSuccessfully ? Theme.palette.directColor1 : Theme.palette.dangerColor1
+            }
+        }
+    }
+}

ui/imports/shared/popups/walletconnect/controls/DAppDelegate.qml

@@ -1,106 +1,106 @@
-import QtQuick 2.15
+import QtQuick 2.15
-import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
-import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
-import QtGraphicalEffects 1.15
+
-
+import StatusQ.Core 0.1
-import StatusQ 0.1
+import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
-import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
-import StatusQ.Core 0.1
+
-import StatusQ.Core.Theme 0.1
+MouseArea {
-
+    id: root
-
+    implicitHeight: 50
-Item {
+
-    id: root
+    hoverEnabled: true
-    implicitHeight: 50
+
-
+    required property string name
-    required property string name
+    required property string url
-    required property string url
+    required property string iconUrl
-    required property string iconUrl
+
-
+    signal disconnectDapp()
-    signal disconnectDapp()
+
-
+    RowLayout {
-    RowLayout {
+        anchors.fill: parent
-        anchors.fill: parent
+        anchors.margins: 8
-        anchors.margins: 8
+
-
+        Item {
-        Item {
+            Layout.preferredWidth: 32
-            Layout.preferredWidth: 32
+            Layout.preferredHeight: 32
-            Layout.preferredHeight: 32
+
-
+            StatusImage {
-            StatusImage {
+                id: iconImage
-                id: iconImage
+
-
+                anchors.fill: parent
-                anchors.fill: parent
+
-
+                source: root.iconUrl
-                source: iconUrl
+                visible: !fallbackImage.visible
-                visible: !fallbackImage.visible
+            }
-            }
+
-
+            StatusIcon {
-            StatusIcon {
+                id: fallbackImage
-                id: fallbackImage
+
-
+                anchors.fill: parent
-                anchors.fill: parent
+
-
+                icon: "dapp"
-                icon: "dapp"
+                color: Theme.palette.baseColor1
-                color: Theme.palette.baseColor1
+
-
+                visible: iconImage.isLoading || iconImage.isError || !root.iconUrl
-                visible: iconImage.isLoading || iconImage.isError || !iconUrl
+            }
-            }
+
-
+            layer.enabled: true
-            layer.enabled: true
+            layer.effect: OpacityMask {
-            layer.effect: OpacityMask {
+                maskSource: Rectangle {
-                maskSource: Rectangle {
+                    width: iconImage.width
-                    width: iconImage.width
+                    height: iconImage.height
-                    height: iconImage.height
+                    radius: width / 2
-                    radius: width / 2
+                    visible: false
-                    visible: false
+                }
-                }
+            }
-            }
+        }
-        }
+
-
+        ColumnLayout {
-        ColumnLayout {
+            Layout.leftMargin: 12
-            Layout.leftMargin: 12
+            Layout.rightMargin: 12
-            Layout.rightMargin: 12
+
-
+            StatusBaseText {
-            StatusBaseText {
+                text: root.name
-                text: name
+
-
+                Layout.fillWidth: true
-                Layout.fillWidth: true
+
-
+                font.pixelSize: 13
-                font.pixelSize: 13
+                font.bold: true
-                font.bold: true
+
-
+                elide: Text.ElideRight
-                elide: Text.ElideRight
+
-
+                clip: true
-                clip: true
+            }
-            }
+            StatusBaseText {
-            StatusBaseText {
+                text: root.url
-                text: url
+
-
+                Layout.fillWidth: true
-                Layout.fillWidth: true
+
-
+                font.pixelSize: 12
-                font.pixelSize: 12
+                color: Theme.palette.baseColor1
-                color: Theme.palette.baseColor1
+
-
+                elide: Text.ElideRight
-                elide: Text.ElideRight
+
-
+                clip: true
-                clip: true
+            }
-            }
+        }
-        }
+
-
+        StatusFlatButton {
-        // TODO #14588 - Show tooltip on hover "Disconnect dApp"
+            size: StatusBaseButton.Size.Large
-        StatusRoundButton {
+
-            implicitWidth: 32
+            asset.color: root.containsMouse ? Theme.palette.directColor1
-            implicitHeight: 32
+                                            : Theme.palette.baseColor1
-            radius: width / 2
+
-
+            icon.name: "disconnect"
-            icon.name: "disconnect"
+            tooltip.text: qsTr("Disconnect dApp")
-
+
-            onClicked: {
+            onClicked: {
-                console.debug(`TODO #14755 - Disconnect ${name}`)
+                console.debug(`TODO #14755 - Disconnect ${root.name}`)
-                //root.disconnectDapp()
+                // root.disconnectDapp()
-            }
+            }
-        }
+        }
-    }
+    }
-}
+}

ui/imports/shared/popups/walletconnect/controls/PermissionsCard.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+ColumnLayout {
+    spacing: 8
+
+    StatusBaseText {
+        text: qsTr("Uniswap Interface will be able to:")
+
+        font.pixelSize: 13
+        color: Theme.palette.baseColor1
+    }
+
+    StatusBaseText {
+        text: qsTr("Check your account balance and activity")
+
+        font.pixelSize: 13
+    }
+
+    StatusBaseText {
+        text: qsTr("Request transactions and message signing")
+
+        font.pixelSize: 13
+    }
+}

ui/imports/shared/popups/walletconnect/controls/qmldir

@@ -0,0 +1,4 @@
+DAppCard 1.0 DAppCard.qml
+DAppDelegate 1.0 DAppDelegate.qml
+ContextCard 1.0 ContextCard.qml
+PermissionsCard 1.0 PermissionsCard.qml

ui/imports/shared/popups/walletconnect/panels/ContentPanel.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Rectangle {
+    id: root
+
+    property alias payloadToDisplay: contentText.text
+
+    border.width: 1
+    border.color: Theme.palette.baseColor2
+    color: "transparent"
+    radius: 8
+
+    implicitHeight: contentScrollView.implicitHeight + (2 * contentText.anchors.margins)
+
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: contentScrollView.enabled || !enabled ? undefined : Qt.PointingHandCursor
+        enabled: contentScrollView.height < contentScrollView.contentHeight
+
+        onClicked: {
+            contentScrollView.enabled = !contentScrollView.enabled
+        }
+        z: contentScrollView.z + 1
+    }
+
+    StatusScrollView {
+        id: contentScrollView
+        anchors.fill: parent
+
+        contentWidth: availableWidth
+        contentHeight: contentText.contentHeight
+
+        padding: 0
+
+        enabled: false
+
+        StatusBaseText {
+            id: contentText
+            anchors.fill: parent
+            anchors.margins: 20
+
+            width: contentScrollView.availableWidth
+
+            text: root.payloadToDisplay
+
+            wrapMode: Text.WrapAnywhere
+        }
+    }
+}

ui/imports/shared/popups/walletconnect/panels/EstimatedTimeDisplay.qml

@@ -0,0 +1,23 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+ColumnLayout {
+    id: root
+
+    property alias estimatedTimeText: contentText.text
+
+    StatusBaseText {
+        text: qsTr("Est. time:")
+        font.pixelSize: 12
+        color: Theme.palette.directColor1
+    }
+    StatusBaseText {
+        id: contentText
+
+        font.pixelSize: 16
+        font.weight: Font.DemiBold
+    }
+}

ui/imports/shared/popups/walletconnect/panels/IntentionPanel.qml

@@ -0,0 +1,110 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Components 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+ColumnLayout {
+    id: root
+
+    spacing: 8
+
+    required property string dappName
+    required property url dappIcon
+    required property var account
+
+    property string userDisplayNaming
+
+    // Icons
+    Item {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 40
+        Layout.alignment: Qt.AlignHCenter
+        Layout.bottomMargin: 8
+
+        StatusRoundedImage {
+            width: height
+            height: parent.height
+
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.horizontalCenterOffset: -16
+            anchors.verticalCenter: parent.verticalCenter
+
+            image.source: root.dappIcon
+        }
+        StatusRoundIcon {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.horizontalCenterOffset: 16
+            anchors.verticalCenter: parent.verticalCenter
+
+            asset: StatusAssetSettings {
+                width: 24
+                height: 24
+                color: Theme.palette.primaryColor1
+                bgWidth: 40
+                bgHeight: 40
+                bgColor: Theme.palette.desktopBlue10
+                bgRadius: bgWidth / 2
+                bgBorderWidth: 2
+                bgBorderColor: Theme.palette.statusAppLayout.backgroundColor
+                source: "assets/sign.svg"
+            }
+        }
+    }
+
+    // Names and intentions
+    StatusBaseText {
+        text: qsTr("%1 wants you to %2 with %3").arg(dappName).arg(root.userDisplayNaming).arg(account.name)
+
+        Layout.preferredWidth: 400
+        Layout.alignment: Qt.AlignHCenter
+
+        font.pixelSize: 15
+        font.weight: Font.DemiBold
+
+        wrapMode: Text.WordWrap
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    // TODO #14762: externalize as a InfoPill and merge base implementation with
+    // the existing IssuePill reusable component
+    Rectangle {
+        Layout.preferredWidth: operationStatusLayout.implicitWidth + 24
+        Layout.preferredHeight: operationStatusLayout.implicitHeight + 14
+
+        Layout.alignment: Qt.AlignHCenter
+
+        visible: true
+
+        border.color: Theme.palette.successColor2
+        border.width: 1
+        color: "transparent"
+        radius: height / 2
+
+        RowLayout {
+            id: operationStatusLayout
+
+            spacing: 8
+
+            anchors.centerIn: parent
+
+            StatusIcon {
+                Layout.preferredWidth: 16
+                Layout.preferredHeight: 16
+
+                visible: true
+
+                color: Theme.palette.directColor1
+                icon: "info"
+            }
+
+            StatusBaseText {
+                text: qsTr("Only sign if you trust the dApp")
+
+                font.pixelSize: 12
+                color: Theme.palette.directColor1
+            }
+        }
+    }
+}

ui/imports/shared/popups/walletconnect/panels/MaxFeesDisplay.qml

@@ -0,0 +1,35 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+ColumnLayout {
+    id: root
+
+    property alias maxFeesText: maxFeesDisplay.text
+    property alias feesTextColor: maxFeesDisplay.color
+
+    StatusBaseText {
+        text: qsTr("Max fees:")
+
+        font.pixelSize: 12
+        color: Theme.palette.directColor1
+    }
+    StatusBaseText {
+        id: maxFeesDisplay
+        text: root.maxFeesText
+
+        visible: !!text
+
+        font.pixelSize: 16
+    }
+    StatusBaseText {
+        text: qsTr("No fees")
+
+        visible: !maxFeesDisplay.visible
+
+        font.pixelSize: maxFeesDisplay.font.pixelSize
+        font.weight: maxFeesDisplay.font.weight
+    }
+}

ui/imports/shared/popups/walletconnect/panels/qmldir

@@ -0,0 +1,4 @@
+MaxFeesDisplay 1.0 MaxFeesDisplay.qml
+EstimatedTimeDisplay 1.0 EstimatedTimeDisplay.qml
+IntentionPanel 1.0 IntentionPanel.qml
+ContentPanel 1.0 ContentPanel.qml