feat(@desktop/wallet2): Added Share Modal

Added new popup to share wallet account details
To-do's:
1. Rounded corners in the QR code
2. Emoji's for the account

fixes #3304
This commit is contained in:
Khushboo Mehta 2021-09-03 18:49:00 +02:00 committed by Iuri Matias
parent 8d32c1d933
commit f02d7faa41
3 changed files with 184 additions and 27 deletions

@ -1 +1 @@
Subproject commit 4a6800ed77c272cec02abcd8734dc28c23831e42 Subproject commit 3a72c3766af2cb4b52bc2bf2e0867abc62dc0d65

View File

@ -0,0 +1,137 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Popups 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
import "../../../shared"
StatusModal {
id: shareModal
QtObject {
id: internal
property var selectedAccount: walletV2Model.accountsView.currentAccount
}
anchors.centerIn: parent
implicitWidth: 454
implicitHeight: 568
// To-do Icon in header needs to be updated once emoji picker is ready
header.title: internal.selectedAccount.name
header.subTitle: qsTr("Basic address")
header.popupMenu: StatusPopupMenu {
id: accountPickerPopUp
Repeater {
id: repeaster
model: walletV2Model.accountsView.accounts
delegate: Loader {
sourceComponent: accountPickerPopUp.delegate
onLoaded: {
item.action.text = model.name
// To-do this and Icon in header needs to be updated once emoji picker is ready
item.action.iconSettings.name = "filled-account"
}
Connections {
enabled: !!item.action
target: item.action
onTriggered: {
internal.selectedAccount = { address, name, iconColor, fiatBalance }
accountPickerPopUp.dismiss()
}
}
}
}
}
Image {
id: qrCodeImage
width: 273
height: 270
anchors.top: parent.top
anchors.topMargin: 24
anchors.horizontalCenter: parent.horizontalCenter
asynchronous: true
fillMode: Image.PreserveAspectFit
mipmap: true
smooth: false
source: profileModel.qrCode(internal.selectedAccount.address)
StatusIcon {
width: 66
height: 66
anchors.centerIn: parent
icon: "snt"
}
}
Column {
id: addressColumn
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: qrCodeImage.bottom
anchors.topMargin: 25
spacing: 8
StyledText {
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("Your wallet address")
color: Theme.palette.directColor4
font.pixelSize: 13
font.weight: Font.Medium
lineHeight: 18
lineHeightMode: Text.FixedHeight
}
StyledText {
anchors.horizontalCenter: parent.horizontalCenter
text: internal.selectedAccount.address
color: Theme.palette.directColor1
font.pixelSize: 13
font.weight: Font.Medium
lineHeight: 18
lineHeightMode: Text.FixedHeight
}
}
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: addressColumn.bottom
anchors.topMargin: 25
spacing: 20
Repeater {
model: 2
Column {
spacing: 5
StatusRoundButton {
anchors.horizontalCenter: parent.horizontalCenter
icon.name: index === 0 ? "copy" : "link"
onClicked: {
if (index === 0) {
if (internal.selectedAccount.address) {
chatsModel.copyToClipboard(internal.selectedAccount.address)
}
else {
// To-do Get link functionality
}
}
}
}
StyledText {
anchors.horizontalCenter: parent.horizontalCenter
text: index === 0 ? qsTr("Copy") : qsTr("Get link")
color: Theme.palette.primaryColor1
font.pixelSize: 13
font.weight: Font.Medium
lineHeight: 18
lineHeightMode: Text.FixedHeight
}
}
}
}
}

View File

@ -21,13 +21,19 @@ Item {
Layout.fillHeight: true Layout.fillHeight: true
Layout.fillWidth: true Layout.fillWidth: true
StyledText { Row {
id: title id: accountRow
text: currentAccount.name
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 56 anchors.topMargin: 56
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 24 anchors.leftMargin: 24
spacing: 8
StyledText {
id: title
anchors.verticalCenter: parent.verticalCenter
text: currentAccount.name
font.weight: Font.Medium font.weight: Font.Medium
font.pixelSize: 28 font.pixelSize: 28
} }
@ -36,28 +42,33 @@ Item {
id: separatorDot id: separatorDot
width: 8 width: 8
height: 8 height: 8
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: 1
color: Style.current.primary color: Style.current.primary
anchors.top: title.verticalCenter
anchors.topMargin: -3
anchors.left: title.right
anchors.leftMargin: 8
radius: 50 radius: 50
} }
StyledText { StyledText {
id: walletBalance id: walletBalance
anchors.verticalCenter: parent.verticalCenter
text: currentAccount.balance.toUpperCase() text: currentAccount.balance.toUpperCase()
anchors.left: separatorDot.right
anchors.leftMargin: 8
anchors.verticalCenter: title.verticalCenter
font.pixelSize: 22 font.pixelSize: 22
} }
}
MouseArea {
anchors.fill: accountRow
cursorShape: Qt.PointingHandCursor
onClicked: {
openPopup(shareModalComponent);
}
}
StatusExpandableAddress { StatusExpandableAddress {
id: walletAddress id: walletAddress
address: currentAccount.address address: currentAccount.address
anchors.top: title.bottom anchors.top: accountRow.bottom
anchors.left: title.left anchors.left: accountRow.left
addressWidth: 180 addressWidth: 180
anchors.leftMargin: 0 anchors.leftMargin: 0
anchors.topMargin: 0 anchors.topMargin: 0
@ -140,6 +151,15 @@ Item {
} }
} }
} }
Component {
id: shareModalComponent
ShareModal {
onClosed: {
destroy();
}
}
}
} }
/*##^## /*##^##