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: Add external link to download extension plugin 

- add a local popup with selection between "Status Connector" (external
link to Chrome Store) or "Wallet Connect" (the old flow involving
inputting the WC URI)
- simplify DAppsListPopup to use StatusDropdown to reduce code
duplication
- adjust SB and QML tests

Fixes #16111
This commit is contained in:
Lukáš Tinkl 2024-09-03 14:57:07 +02:00 committed by Lukáš Tinkl
parent e2e45fec3b
commit e58ae2c213
7 changed files with 95 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
storybook/pages/DAppsWorkflowPage.qml
View File

@ -8,7 +8,6 @@ import QtQml.Models 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Backpressure 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
@ -16,7 +15,7 @@ import StatusQ.Popups.Dialog 0.1
import StatusQ.Core.Utils 0.1 as SQUtils
import Models 1.0
import Storybook 1.0
import Storybook 1.0 as StoryBook
import AppLayouts.Wallet.controls 1.0
import AppLayouts.Wallet.services.dapps 1.0
@ -79,7 +78,7 @@ Item {
StatusBaseText { text: "projectId" }
StatusBaseText {
id: projectIdText
readonly property string projectId: SystemUtils.getEnvVar("WALLET_CONNECT_PROJECT_ID")
readonly property string projectId: StoryBook.SystemUtils.getEnvVar("WALLET_CONNECT_PROJECT_ID")
text: SQUtils.Utils.elideText(projectId, 3)
font.bold: true
}
@ -410,7 +409,7 @@ Item {
}
}
walletRootStore: QObject {
walletRootStore: SQUtils.QObject {
property var filteredFlatModel: SortFilterProxyModel {
sourceModel: NetworksModel.flatNetworks
filters: ValueFilter { roleName: "isTest"; value: settings.testNetworks; }
@ -442,7 +441,7 @@ Item {
}
QObject {
SQUtils.QObject {
id: d
property int activeTestCase: noTestCase

18
storybook/pages/DappsComboBoxPage.qml
View File

@ -19,6 +19,8 @@ SplitView {
anchors.horizontalCenter: parent.horizontalCenter
model: emptyModelCheckbox.checked ? emptyModel : smallModelCheckbox.checked ? smallModel: dappsModel
popup.visible: true
onPairDapp: console.log("onPairDapp")
}
ListModel {
@ -100,16 +102,19 @@ SplitView {
SplitView.fillHeight: true
ColumnLayout {
CheckBox {
id: emptyModelCheckbox
text: "Empty model"
checked: false
RadioButton {
text: "Default model"
checked: true
}
CheckBox {
RadioButton {
id: emptyModelCheckbox
text: "Empty model"
}
RadioButton {
id: smallModelCheckbox
text: "Small model"
checked: false
}
}
}
@ -118,3 +123,4 @@ SplitView {
// category: Controls
// https://www.figma.com/design/HrmZp1y4S77QJezRFRl6ku/dApp-Interactions---Milestone-1?node-id=130-31949&t=hnzB58fTnEnx2z84-0
// https://www.figma.com/design/1OYKMzU6KTQHQAqDhojk0r/Status-connector?node-id=3216-5618&node-type=FRAME&t=CqsuoQHp1p5MOUt9-0

5
storybook/qmlTests/tests/tst_DAppsWorkflow.qml
View File

@ -807,6 +807,11 @@ Item {
verify(pairWCReadySpy.count === 0, "expected NO pairWCReady signal to be emitted")
mouseClick(connectButton)
waitForRendering(controlUnderTest)
const btnWalletConnect = findChild(controlUnderTest, "btnWalletConnect")
verify(!!btnWalletConnect)
mouseClick(btnWalletConnect)
verify(pairWCReadySpy.count === 1, "expected pairWCReady signal to be emitted")
let pairWCModal = findChild(controlUnderTest, "pairWCModal")

72
ui/app/AppLayouts/Wallet/controls/DappsComboBox.qml
View File

@ -1,8 +1,9 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 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
@ -11,9 +12,9 @@ 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
@ -71,8 +72,8 @@ ComboBox {
delegateModel: root.delegateModel
onPairWCDapp: {
root.pairDapp()
onConnectDapp: {
dappConnectSelectComponent.createObject(root).open()
this.close()
}
@ -81,6 +82,69 @@ ComboBox {
}
}
Component {
id: dappConnectSelectComponent
StatusDialog {
id: dappConnectSelect
width: 480
topPadding: Style.current.bigPadding
leftPadding: Style.current.padding
rightPadding: Style.current.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: Style.current.padding
color: Theme.palette.baseColor1
text: qsTr("How would you like to connect?")
}
StatusListItem {
title: "Status Connector"
asset.name: Style.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: Style.svg("walletconnect")
asset.isImage: true
components: [
StatusIcon {
icon: "next"
color: Theme.palette.baseColor1
}
]
onClicked: {
dappConnectSelect.close()
root.pairDapp()
}
}
}
}
}
StatusToolTip {
id: tooltip
objectName: "dappTooltip"

1
ui/imports/assets/icons/walletconnect.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" height="400" viewBox="0 0 400 400" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h400v400h-400z"/></clipPath><g clip-path="url(#a)"><circle cx="200" cy="200" fill="#3396ff" r="199.5" stroke="#66b1ff"/><path d="m122.519 148.965c42.791-41.729 112.171-41.729 154.962 0l5.15 5.022c2.14 2.086 2.14 5.469 0 7.555l-17.617 17.18c-1.07 1.043-2.804 1.043-3.874 0l-7.087-6.911c-29.853-29.111-78.253-29.111-108.106 0l-7.59 7.401c-1.07 1.043-2.804 1.043-3.874 0l-17.617-17.18c-2.14-2.086-2.14-5.469 0-7.555zm191.397 35.529 15.679 15.29c2.14 2.086 2.14 5.469 0 7.555l-70.7 68.944c-2.139 2.087-5.608 2.087-7.748 0l-50.178-48.931c-.535-.522-1.402-.522-1.937 0l-50.178 48.931c-2.139 2.087-5.608 2.087-7.748 0l-70.7015-68.945c-2.1396-2.086-2.1396-5.469 0-7.555l15.6795-15.29c2.1396-2.086 5.6085-2.086 7.7481 0l50.1789 48.932c.535.522 1.402.522 1.937 0l50.177-48.932c2.139-2.087 5.608-2.087 7.748 0l50.179 48.932c.535.522 1.402.522 1.937 0l50.179-48.931c2.139-2.087 5.608-2.087 7.748 0z" fill="#fff"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
ui/imports/shared/popups/walletconnect/ConnectDAppModal.qml
View File

@ -157,7 +157,7 @@ StatusDialog {
footer: StatusDialogFooter {
id: footer
rightButtons: ObjectModel {
StatusButton {
StatusFlatButton {
objectName: "rejectButton"
height: 44
text: qsTr("Reject")

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

@ -1,9 +1,7 @@
import QtQuick 2.15
import QtQml 2.15
import QtQuick.Controls 2.15
import QtQml.Models 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
@ -14,52 +12,19 @@ import shared.controls 1.0
import utils 1.0
Popup {
StatusDropdown {
id: root
objectName: "dappsPopup"
required property DelegateModel delegateModel
signal pairWCDapp()
signal connectDapp()
width: 312
padding: 0
modal: false
closePolicy: Popup.CloseOnEscape | Popup.CloseOnOutsideClick | Popup.CloseOnPressOutside
background: Rectangle {
id: backgroundContent
color: Theme.palette.statusMenu.backgroundColor
radius: 8
layer.enabled: true
layer.effect: DropShadow {
anchors.fill: parent
source: backgroundContent
horizontalOffset: 0
verticalOffset: 4
radius: 12
samples: 25
spread: 0.2
color: Theme.palette.dropShadow
}
}
// workaround for https://bugreports.qt.io/browse/QTBUG-87804
Binding on margins {
id: workaroundBinding
when: false
restoreMode: Binding.RestoreBindingOrValue
}
onImplicitContentHeightChanged: {
workaroundBinding.value = root.margins + 1
workaroundBinding.when = true
workaroundBinding.when = false
}
contentItem: ColumnLayout {
id: mainLayout
@ -152,10 +117,8 @@ Popup {
size: StatusButton.Size.Small
text: qsTr("Connect a dApp via WalletConnect")
onClicked: {
root.pairWCDapp()
}
text: qsTr("Connect a dApp")
onClicked: root.connectDapp()
}
}
}