status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(WC-establish-connection): Fine-tune dApps button 

1. Transform the dApps button into a combo box and add badge indicator + tooltip
2. Add storybook page
3. Adding tests
4. Minor fixes - dApps popup width, ModelUtils imports
This commit is contained in:
Alex Jbanca 2024-06-19 16:13:32 +03:00
parent 5c349d1938
commit d3f8a3c093
No known key found for this signature in database
GPG Key ID: 6004079575C21C5D
9 changed files with 370 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
storybook/pages/DAppsWorkflowPage.qml
View File

@ -328,7 +328,7 @@ Item {
function startTestCase() {
d.activeTestCase = settings.testCase
if(root.visible) {
dappsWorkflow.clicked()
dappsWorkflow.popup.open()
}
}

78
storybook/pages/DappsComboBoxPage.qml Normal file
View File

@ -0,0 +1,78 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import AppLayouts.Wallet.controls 1.0
SplitView {
id: root
width: 400
height: 400
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
DappsComboBox {
id: connectedDappComboBox
anchors.centerIn: parent
model: emptyModelCheckbox.checked ? emptyModel : dappsModel
}
ListModel {
id: emptyModel
}
ListModel {
id: dappsModel
ListElement {
name: "Test dApp 1"
url: "https://dapp.test/1"
iconUrl: "https://se-sdk-dapp.vercel.app/assets/eip155:1.png"
}
ListElement {
name: "Test dApp 2"
url: "https://dapp.test/2"
iconUrl: "https://react-app.walletconnect.com/assets/eip155-1.png"
}
ListElement {
name: "Test dApp 3"
url: "https://dapp.test/3"
iconUrl: "https://react-app.walletconnect.com/assets/eip155-1.png"
}
ListElement {
name: "Test dApp 4 - very long name !!!!!!!!!!!!!!!!"
url: "https://dapp.test/4"
iconUrl: "https://react-app.walletconnect.com/assets/eip155-1.png"
}
ListElement {
name: "Test dApp 5 - very long url"
url: "https://dapp.test/very_long/url/unusual"
iconUrl: "https://react-app.walletconnect.com/assets/eip155-1.png"
}
ListElement {
name: "Test dApp 6"
url: "https://dapp.test/6"
iconUrl: "https://react-app.walletconnect.com/assets/eip155-1.png"
}
}
}
Pane {
id: controls
SplitView.preferredWidth: 300
SplitView.fillHeight: true
ColumnLayout {
CheckBox {
id: emptyModelCheckbox
text: "Empty model"
checked: false
}
}
}
}
// category: Controls
// https://www.figma.com/design/HrmZp1y4S77QJezRFRl6ku/dApp-Interactions---Milestone-1?node-id=130-31949&t=hnzB58fTnEnx2z84-0

100
storybook/qmlTests/tests/tst_DappsComboBox.qml Normal file
View File

@ -0,0 +1,100 @@
import QtQuick 2.15
import QtQml.Models 2.15
import QtTest 1.15
import AppLayouts.Wallet.controls 1.0
Item {
id: root
width: 600
height: 400
Component {
id: componentUnderTest
DappsComboBox {
anchors.centerIn: parent
model: ListModel {}
}
}
SignalSpy {
id: dappsListReadySpy
target: controlUnderTest
signalName: "dappsListReady"
}
property DappsComboBox controlUnderTest: null
TestCase {
name: "DappsComboBox"
when: windowShown
function init() {
controlUnderTest = createTemporaryObject(componentUnderTest, root)
dappsListReadySpy.clear()
}
function test_basicGeometry() {
verify(controlUnderTest.width > 0)
verify(controlUnderTest.height > 0)
}
function test_showStatusIndicator() {
const indicator = findChild(controlUnderTest, "dappBadge")
compare(indicator.visible, false)
controlUnderTest.model.append({name: "Test dApp 1", url: "https://dapp.test/1", iconUrl: "https://se-sdk-dapp.vercel.app/assets/eip155:1.png"})
compare(indicator.visible, true)
controlUnderTest.model.clear()
compare(indicator.visible, false)
}
function test_dappIcon() {
const icon = findChild(controlUnderTest, "dappIcon")
compare(icon.icon, "dapp")
compare(icon.width, 16)
compare(icon.height, 16)
compare(icon.status, Image.Ready)
}
function test_openingPopup() {
mouseClick(controlUnderTest)
const popup = findChild(controlUnderTest, "dappsListPopup")
compare(popup.visible, true)
compare(popup.x, controlUnderTest.width - popup.width)
compare(popup.y, controlUnderTest.height + 4)
compare(popup.width, 312)
verify(popup.height > 0)
compare(dappsListReadySpy.count, 1)
const background = findChild(controlUnderTest, "dappsBackground")
compare(background.active, true)
mouseClick(controlUnderTest)
compare(popup.visible, false)
compare(background.active, false)
}
function test_hoverState() {
const background = findChild(controlUnderTest, "dappsBackground")
compare(background.active, false)
mouseMove(controlUnderTest, controlUnderTest.width/2, controlUnderTest.height/2)
compare(background.active, true)
compare(controlUnderTest.hovered, true)
const dappTooltip = findChild(controlUnderTest, "dappTooltip")
wait(dappTooltip.delay + 50)
compare(dappTooltip.visible, true)
compare(dappTooltip.text, "dApp connections")
verify(dappTooltip.width > 0)
verify(dappTooltip.height > 0)
verify(dappTooltip.y > controlUnderTest.height)
mouseMove(root)
compare(background.active, false)
compare(dappTooltip.visible, false)
}
}
}

1
ui/StatusQ/src/StatusQ/Core/Utils/ModelUtils.qml
View File

@ -2,6 +2,7 @@ pragma Singleton
import QtQuick 2.14
import StatusQ 0.1
import StatusQ.Internal 0.1 as Internal
QtObject {

27
ui/app/AppLayouts/Wallet/controls/ConnectedDappsButton.qml
View File

@ -1,27 +0,0 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import shared.controls 1.0
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
StatusButton {
id: root
implicitHeight: 38
size: StatusBaseButton.Size.Small
borderColor: Theme.palette.directColor7
normalColor: Theme.palette.transparent
hoverColor: Theme.palette.baseColor2
textPosition: StatusBaseButton.TextPosition.Left
textColor: Theme.palette.baseColor1
icon.name: "dapp"
icon.height: 16
icon.width: 16
icon.color: hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
}

178
ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml Normal file
View File

@ -0,0 +1,178 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
import shared.controls 1.0
import shared.popups.walletconnect 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.Components.private 0.1 as SQP
ComboBox {
id: root
signal dappsListReady
signal pairDapp
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 {
implicitWidth: ListView.view.width
}
popup: DAppsListPopup {
objectName: "dappsListPopup"
x: root.width - width
y: root.height + 4
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
delegateModel: root.delegateModel
onPairWCDapp: {
root.pairDapp()
this.close()
}
onOpened: {
root.dappsListReady()
}
}
StatusToolTip {
id: tooltip
objectName: "dappTooltip"
visible: root.hovered && !root.down
text: qsTr("dApp connections")
orientation: StatusToolTip.Orientation.Bottom
y: root.height + 14
}
component DAppDelegate: Item {
implicitHeight: 50
required property string name
required property string url
required property string iconUrl
RowLayout {
anchors.fill: parent
anchors.margins: 8
Item {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
StatusImage {
id: iconImage
anchors.fill: parent
source: iconUrl
visible: !fallbackImage.visible
}
StatusIcon {
id: fallbackImage
anchors.fill: parent
icon: "dapp"
color: Theme.palette.baseColor1
visible: iconImage.isLoading || iconImage.isError || !iconUrl
}
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: iconImage.width
height: iconImage.height
radius: width / 2
visible: false
}
}
}
ColumnLayout {
Layout.leftMargin: 12
Layout.rightMargin: 12
StatusBaseText {
text: name
Layout.fillWidth: true
font.pixelSize: 13
font.bold: true
elide: Text.ElideRight
clip: true
}
StatusBaseText {
text: url
Layout.fillWidth: true
font.pixelSize: 12
color: Theme.palette.baseColor1
elide: Text.ElideRight
clip: true
}
}
// TODO #14588 - Show tooltip on hover "Disconnect dApp"
StatusRoundButton {
implicitWidth: 32
implicitHeight: 32
radius: width / 2
icon.name: "disconnect"
onClicked: {
console.debug(`TODO #14755 - Disconnect ${name}`)
//root.disconnectDapp()
}
}
}
}
}

2
ui/app/AppLayouts/Wallet/controls/qmldir
View File

@ -14,8 +14,8 @@ MaxSendButton 1.0 MaxSendButton.qml
InformationTileAssetDetails 1.0 InformationTileAssetDetails.qml
StatusNetworkListItemTag 1.0 StatusNetworkListItemTag.qml
CollectibleBalanceTag 1.0 CollectibleBalanceTag.qml
ConnectedDappsButton 1.0 ConnectedDappsButton.qml
CollectibleLinksTags 1.0 CollectibleLinksTags.qml
DappsComboBox 1.0 DappsComboBox.qml
SwapExchangeButton 1.0 SwapExchangeButton.qml
EditSlippagePanel 1.0 EditSlippagePanel.qml
TokenSelector 1.0 TokenSelector.qml

39
ui/app/AppLayouts/Wallet/panels/DAppsWorkflow.qml
View File

@ -11,19 +11,18 @@ import AppLayouts.Wallet.services.dapps.types 1.0
import shared.stores 1.0
import utils 1.0
ConnectedDappsButton {
DappsComboBox {
id: root
required property WalletConnectService wcService
signal dappsListReady()
signal pairWCReady()
onClicked: {
dappsListLoader.active = true
}
model: root.wcService.dappsModel
highlighted: dappsListLoader.active
onPairDapp: {
pairWCLoader.active = true
}
Loader {
id: pairWCLoader
@ -47,34 +46,6 @@ ConnectedDappsButton {
}
}
Loader {
id: dappsListLoader
active: false
onLoaded: {
item.open()
root.dappsListReady()
}
sourceComponent: DAppsListPopup {
visible: true
model: root.wcService.dappsModel
onPairWCDapp: {
pairWCLoader.active = true
this.close()
}
onOpened: {
this.x = root.width - this.contentWidth - 2 * this.padding
this.y = root.height + 4
}
onClosed: dappsListLoader.active = false
}
}
Loader {
id: connectDappLoader

107
ui/imports/shared/popups/walletconnect/DAppsListPopup.qml
View File

@ -1,5 +1,6 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQml.Models 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
@ -15,10 +16,12 @@ Popup {
objectName: "dappsPopup"
required property var model
required property DelegateModel delegateModel
signal pairWCDapp()
implicitWidth: 312
modal: false
padding: 8
closePolicy: Popup.CloseOnEscape | Popup.CloseOnOutsideClick | Popup.CloseOnPressOutside
@ -41,11 +44,9 @@ Popup {
}
}
ColumnLayout {
contentItem: ColumnLayout {
id: mainLayout
implicitWidth: 280
spacing: 8
ShapeRectangle {
@ -84,13 +85,9 @@ Popup {
Layout.preferredHeight: contentHeight
Layout.maximumHeight: 280
model: root.model
model: root.delegateModel
visible: !listPlaceholder.visible
delegate: DAppDelegate {
implicitWidth: listView.width
}
ScrollBar.vertical: null
}
@ -105,96 +102,4 @@ Popup {
}
}
}
component DAppDelegate: Item {
implicitHeight: 50
required property string name
required property string url
required property string iconUrl
RowLayout {
anchors.fill: parent
anchors.margins: 8
Item {
Layout.preferredWidth: 32
Layout.preferredHeight: 32
StatusImage {
id: iconImage
anchors.fill: parent
source: iconUrl
visible: !fallbackImage.visible
}
StatusIcon {
id: fallbackImage
anchors.fill: parent
icon: "dapp"
color: Theme.palette.baseColor1
visible: iconImage.isLoading || iconImage.isError || !iconUrl
}
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: iconImage.width
height: iconImage.height
radius: width / 2
visible: false
}
}
}
ColumnLayout {
Layout.leftMargin: 12
Layout.rightMargin: 12
StatusBaseText {
text: name
Layout.fillWidth: true
font.pixelSize: 13
font.bold: true
elide: Text.ElideRight
clip: true
}
StatusBaseText {
text: url
Layout.fillWidth: true
font.pixelSize: 12
color: Theme.palette.baseColor1
elide: Text.ElideRight
clip: true
}
}
// TODO #14588 - Show tooltip on hover "Disconnect dApp"
StatusRoundButton {
implicitWidth: 32
implicitHeight: 32
radius: width / 2
icon.name: "disconnect"
onClicked: {
console.debug(`TODO #14755 - Disconnect ${name}`)
//root.disconnectDapp()
}
}
}
}
}