feat(Community/FinaliseOwnership): Created needed finalise popups

- Created finalise popup and added it into storybook.
- Decline popup created and added support in storybook.

Part of #12174
This commit is contained in:
Noelia 2023-09-25 17:03:35 +02:00 committed by Noelia
parent 7d852c3565
commit 862d4f3add
9 changed files with 693 additions and 2 deletions

View File

@ -279,5 +279,16 @@
],
"UserProfileCard": [
"https://www.figma.com/file/Mr3rqxxgKJ2zMQ06UAKiWL/💬-Chat⎜Desktop?type=design&node-id=21961-655678&mode=design&t=JiMnPfMaLPWlrFK3-0"
],
"TransferOwnershipAlertPopup": [
"https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A86828&mode=design&t=coHVo1E6fHrKNNhQ-1",
"https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A86847&mode=design&t=coHVo1E6fHrKNNhQ-1"
],
"FinaliseOwnershipPopup": [
"https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A87869&mode=design&t=olSRjSKm7CM2vv5O-1",
"https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A93588&mode=design&t=olSRjSKm7CM2vv5O-1"
],
"FinaliseOwnershipDeclinePopup": [
"https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A93540&mode=design&t=olSRjSKm7CM2vv5O-1"
]
}

View File

@ -0,0 +1,80 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Storybook 1.0
import Models 1.0
import AppLayouts.Communities.popups 1.0
import AppLayouts.Communities.helpers 1.0
SplitView {
Logs { id: logs }
SplitView {
orientation: Qt.Vertical
SplitView.fillWidth: true
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
PopupBackground {
anchors.fill: parent
}
Button {
anchors.centerIn: parent
text: "Reopen"
onClicked: dialog.open()
}
FinaliseOwnershipDeclinePopup {
id: dialog
anchors.centerIn: parent
closePolicy: Popup.NoAutoClose
visible: true
modal: false
communityName: communityNameText.text
onCancelClicked: logs.logEvent("FinaliseOwnershipDeclinePopup::onCancelClicked")
onDeclineClicked: logs.logEvent("FinaliseOwnershipDeclinePopup::onDeclineClicked")
}
}
LogsAndControlsPanel {
id: logsAndControlsPanel
SplitView.minimumHeight: 100
SplitView.preferredHeight: 150
logsView.logText: logs.logText
}
}
Pane {
SplitView.minimumWidth: 300
SplitView.preferredWidth: 300
Column {
spacing: 12
Label {
text: "Community Name"
font.bold: true
}
TextInput {
id: communityNameText
text: "Doodles"
}
}
}
}
// category: Popups

View File

@ -0,0 +1,198 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Storybook 1.0
import Models 1.0
import AppLayouts.Communities.popups 1.0
import AppLayouts.Communities.helpers 1.0
SplitView {
Logs { id: logs }
SplitView {
orientation: Qt.Vertical
SplitView.fillWidth: true
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
PopupBackground {
anchors.fill: parent
}
Button {
anchors.centerIn: parent
text: "Reopen"
onClicked: dialog.open()
}
FinaliseOwnershipPopup {
id: dialog
anchors.centerIn: parent
closePolicy: Popup.NoAutoClose
visible: true
modal: false
communityName: communityNameText.text
communityLogo: ModelsData.collectibles.doodles
communityColor: color1.checked ? "#FFC4E9" : "#f44336"
tokenSymbol: communitySymbolText.text
tokenChainName: tokenChainText.text
accounts: ListModel {
ListElement {
name: "Test account"
emoji: "😋"
address: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
color: "red"
}
ListElement {
name: "Another account - generated"
emoji: "🚗"
address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8888"
color: "blue"
}
}
feeText: !feesErrorChecker.checked ? "13.34 USD (0.0072 ETH)" : ""
isFeeLoading: feesLoadingChecker.checked
feeErrorText: feesErrorChecker.checked ? "Error getting fees" : ""
onRejectClicked: logs.logEvent("FinaliseOwnershipPopup::onRejectClicked")
onFinaliseOwnershipClicked: logs.logEvent("FinaliseOwnershipPopup::onFinaliseOwnershipClicked")
onVisitCommunityClicked: logs.logEvent("FinaliseOwnershipPopup::onVisitCommunityClicked")
onOpenControlNodeDocClicked: logs.logEvent("FinaliseOwnershipPopup::onOpenControlNodeDocClicked --> " + link)
}
}
LogsAndControlsPanel {
id: logsAndControlsPanel
SplitView.minimumHeight: 100
SplitView.preferredHeight: 150
logsView.logText: logs.logText
}
}
Pane {
SplitView.minimumWidth: 300
SplitView.preferredWidth: 300
Column {
spacing: 12
Label {
text: "Community Name"
font.bold: true
}
TextInput {
id: communityNameText
text: "Doodles"
}
Label {
text: "Community Symbol"
font.bold: true
}
TextInput {
id: communitySymbolText
text: "OWNDOO"
}
Label {
text: "Token chain name"
font.bold: true
}
TextInput {
id: tokenChainText
text: "Optimism"
}
Label {
text: "Community Logo"
font.bold: true
}
Column {
RadioButton {
id: doodleLogo
text: "Doodle"
checked: true
onCheckedChanged: dialog.communityLogo = ModelsData.collectibles.doodles
}
RadioButton {
id: manaLogo
text: "Mana"
onCheckedChanged: dialog.communityLogo = ModelsData.collectibles.mana
}
RadioButton {
id: superRareLogo
text: "Status"
onCheckedChanged: dialog.communityLogo = ModelsData.collectibles.custom
}
}
Label {
text: "Community Color"
font.bold: true
}
RowLayout {
RadioButton {
id: color1
text: "Light pink"
checked: true
}
RadioButton {
text: "Orange"
}
}
Label {
text: "Fees"
font.bold: true
}
Switch {
id: feesErrorChecker
text: "Is there fees error?"
checked: false
}
Switch {
id: feesLoadingChecker
text: "Is fees loading?"
checked: false
}
}
}
}
// category: Popups

View File

@ -33,7 +33,10 @@ SplitView {
TransferOwnershipAlertPopup {
id: dialog
anchors.centerIn: parent
anchors.centerIn: parent
closePolicy: Popup.NoAutoClose
visible: true
modal: false
communityName: communityNameText.text
communityLogo: ModelsData.collectibles.doodles

View File

@ -21,6 +21,8 @@ Control {
property alias accountErrorText: accountErrorText.text
required property string accountSelectorText
component Separator: Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 1
@ -73,7 +75,7 @@ Control {
Layout.fillWidth: true
visible: accountSelector.visible
text: qsTr("Select account to pay gas fees from")
text: root.accountSelectorText
color: Theme.palette.baseColor1
font.pixelSize: Theme.primaryTextFontSize
lineHeight: 1.2

View File

@ -30,6 +30,8 @@ StatusGroupBox {
property alias generalErrorText: footer.generalErrorText
property alias accountErrorText: footer.accountErrorText
property string accountSelectorText: qsTr("Select account to pay gas fees from")
FeesPanel {
id: feesBox
@ -50,6 +52,7 @@ StatusGroupBox {
|| root.generalErrorText)
showTotal: feesBox.count > 1
accountSelectorText: root.accountSelectorText
}
}
}

View File

@ -0,0 +1,57 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQml.Models 2.15
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups.Dialog 0.1
import StatusQ.Core.Theme 0.1
import utils 1.0
StatusDialog {
id: root
// Community related props:
required property string communityName
signal cancelClicked
signal declineClicked
width: 480 // by design
padding: Style.current.padding
contentItem: StatusBaseText {
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
text: qsTr("If you dont want to be the owner of the %1 Community it is important that you let the previous owner know so they can organise another owner to take over. You will have to send the Owner token back to them or on to the next designated owner.").arg(root.communityName)
lineHeight: 1.2
}
header: StatusDialogHeader {
headline.title: qsTr("Are you sure you dont want to be the owner?")
actions.closeButton.onClicked: root.close()
}
footer: StatusDialogFooter {
spacing: Style.current.padding
rightButtons: ObjectModel {
StatusFlatButton {
text: qsTr("Cancel")
onClicked: {
root.cancelClicked()
close()
}
}
StatusButton {
text: qsTr("I don't want to be the owner")
type: StatusBaseButton.Type.Danger
onClicked: {
root.declineClicked()
close()
}
}
}
}
}

View File

@ -0,0 +1,335 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQml.Models 2.15
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups.Dialog 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
import AppLayouts.Communities.panels 1.0
import utils 1.0
StatusDialog {
id: root
// Community related props:
required property string communityName
required property string communityLogo
required property string communityColor
// Owner token related props:
required property string tokenSymbol
required property string tokenChainName
// Fees calculation props:
property string feeText
property string feeErrorText
property bool isFeeLoading
property string feeLabel: qsTr("Update %1 Community smart contract on %2").arg(root.communityName).arg(root.tokenChainName)
// Account expected roles: address, name, color, emoji, walletType
property var accounts
signal finaliseOwnershipClicked
signal rejectClicked
signal visitCommunityClicked
signal openControlNodeDocClicked(string link)
QtObject {
id: d
readonly property string controlNodeLink: "https://help.status.im/en/status-communities/about-the-control-node-in-status-communities/"
readonly property int init: 0
readonly property int finalise: 1
property bool ackCheck: false
// Fees related props:
property string accountAddress: ""
property string accountName: ""
}
width: 640 // by design
padding: 0
component CustomText : StatusBaseText {
Layout.fillWidth: true
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
lineHeight: 1.2
}
contentItem: StatusScrollView {
id: scrollView
contentWidth: availableWidth
contentHeight: loader.item.height
padding: Style.current.padding
Loader {
id: loader
width: scrollView.availableWidth
sourceComponent: initialPanel
state: d.init
states: [
State {
name: d.init
PropertyChanges { target: loader; sourceComponent: initialPanel }
PropertyChanges {
target: acceptBtn
text: qsTr("Finalise %1 ownership").arg(root.communityName)
enabled: true
onClicked: loader.state = d.finalise
}
PropertyChanges {
target: rejectBtn
visible: true
onClicked: root.rejectClicked()
}
PropertyChanges { target: backButton; visible: false }
},
State {
name: d.finalise
PropertyChanges { target: loader; sourceComponent: finalisePanel }
PropertyChanges {
target: acceptBtn
text: qsTr("Make this device the control node and update smart contract")
enabled: d.ackCheck && !root.isFeeLoading && root.feeErrorText === ""
onClicked: {
root.finaliseOwnershipClicked()
close()
}
}
PropertyChanges { target: rejectBtn; visible: false }
PropertyChanges {
target: backButton
visible: true
onClicked: loader.state = d.init
}
}
]
}
}
header: StatusDialogHeader {
headline.title: qsTr("Finalise %1 ownership").arg(root.communityName)
actions.closeButton.onClicked: root.close()
leftComponent: StatusSmartIdenticon {
asset.name: root.communityLogo
asset.isImage: !!asset.name
}
}
footer: StatusDialogFooter {
spacing: Style.current.padding
rightButtons: ObjectModel {
StatusFlatButton {
id: rejectBtn
text: qsTr("I don't want to be the owner")
onClicked: {
root.rejectClicked()
close()
}
}
StatusButton {
id: acceptBtn
type: StatusBaseButton.Type.Normal
}
}
leftButtons: ObjectModel {
StatusBackButton { id: backButton }
}
}
Component {
id: initialPanel
ColumnLayout {
spacing: Style.current.padding
CustomText {
text: qsTr("Congratulations! You have been sent the %1 Community Owner token.").arg(root.communityName)
font.bold: true
}
CustomText {
textFormat: Text.RichText
text: qsTr("To finalise your ownership and assume ultimate admin rights for the %1 Community, you need to make your device the Community's <a style=\"color: inherit;\" href=\"%2\">control node</a><a style=\"color: inherit;text-decoration: none\" href=\"%2\">↗</a>. You will also need to sign a small transaction to update the %1 Community smart contract to make you the official signatory for all Community changes.").arg(root.communityName).arg(d.controlNodeLink)
onLinkActivated: root.openControlNodeDocClicked(link)
}
PrivilegedTokenArtworkPanel {
id: tokenPanel
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Style.current.padding
isOwner: true
artwork: root.communityLogo
color: root.communityColor
size: PrivilegedTokenArtworkPanel.Size.Large
}
Rectangle {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: tokenPanel.width
Layout.preferredHeight: boxContent.implicitHeight + Style.current.padding
Layout.bottomMargin: Style.current.padding
radius: 8
border.color: Theme.palette.baseColor2
ColumnLayout {
id: boxContent
anchors.verticalCenter: parent.verticalCenter
spacing: 2
StatusBaseText {
Layout.leftMargin: Style.current.padding
text: qsTr("Symbol")
elide: Text.ElideRight
font.pixelSize: Style.current.additionalTextSize
color: Theme.palette.baseColor1
}
StatusBaseText {
Layout.leftMargin: Style.current.padding
text: root.tokenSymbol
elide: Text.ElideRight
font.pixelSize: Theme.primaryTextFontSize
color: Theme.palette.directColor1
}
}
}
StatusListItem {
Layout.fillWidth: true
Layout.bottomMargin: Style.current.padding
title: root.communityName
border.color: Theme.palette.baseColor2
asset.name: root.communityLogo
asset.isImage: true
asset.isLetterIdenticon: !asset.name
components: [
RowLayout {
StatusIcon {
Layout.alignment: Qt.AlignVCenter
icon: "arrow-right"
color: Theme.palette.primaryColor1
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: Style.current.padding
text: qsTr("Visit Community")
font.pixelSize: Style.current.additionalTextSize
color: Theme.palette.primaryColor1
}
}
]
onClicked: {
close()
root.visitCommunityClicked()
}
}
}
}
Component {
id: finalisePanel
ColumnLayout {
spacing: Style.current.padding
CustomText {
text: qsTr("Finalising your ownership of the %1 Community requires you to:").arg(root.communityName)
}
CustomText {
text: qsTr("1. Make this device the control node for the Community")
font.bold: true
}
CustomText {
Layout.topMargin: -Style.current.halfPadding
text: qsTr("It is vital to keep your device online and running Status in order for the Community to operate effectively. Login with this account via another synced desktop device if you think it might be better suited for this purpose.")
}
CustomText {
text: qsTr("2. Update the %1 Community smart contract").arg(root.communityName)
font.bold: true
}
CustomText {
Layout.topMargin: -Style.current.halfPadding
text: qsTr("This transaction updates the %1 Community smart contract, making you the %1 Community owner.").arg(root.communityName)
}
FeesBox {
Layout.fillWidth: true
implicitWidth: 0
accountsSelector.model: root.accounts
accountErrorText: root.feeErrorText
accountSelectorText: qsTr("Gas fees will be paid from")
model: QtObject {
id: singleFeeModel
readonly property string title: root.feeLabel
readonly property string feeText: root.isFeeLoading ? "" : root.feeText
readonly property bool error: root.feeErrorText !== ""
}
accountsSelector.onCurrentIndexChanged: {
if (accountsSelector.currentIndex < 0)
return
const item = ModelUtils.get(accountsSelector.model,
accountsSelector.currentIndex)
d.accountAddress = item.address
d.accountName = item.name
}
}
StatusCheckBox {
Layout.topMargin: -Style.current.halfPadding
Layout.fillWidth: true
checked: d.ackCheck
font.pixelSize: Style.current.primaryTextFontSize
text: qsTr("I acknowledge that I must keep this device online and running Status as much of the time as possible for the %1 Community to operate effectively").arg(root.communityName)
onCheckStateChanged: d.ackCheck = checked
}
}
}
}

View File

@ -7,6 +7,8 @@ CreateCommunityPopup 1.0 CreateCommunityPopup.qml
DiscordImportProgressDialog 1.0 DiscordImportProgressDialog.qml
EnableShardingPopup 1.0 EnableShardingPopup.qml
ExportControlNodePopup 1.0 ExportControlNodePopup.qml
FinaliseOwnershipDeclinePopup 1.0 FinaliseOwnershipDeclinePopup.qml
FinaliseOwnershipPopup 1.0 FinaliseOwnershipPopup.qml
HoldingsDropdown 1.0 HoldingsDropdown.qml
ImportControlNodePopup 1.0 ImportControlNodePopup.qml
InDropdown 1.0 InDropdown.qml