diff --git a/ui/StatusQ b/ui/StatusQ index 4a6800ed77..3a72c3766a 160000 --- a/ui/StatusQ +++ b/ui/StatusQ @@ -1 +1 @@ -Subproject commit 4a6800ed77c272cec02abcd8734dc28c23831e42 +Subproject commit 3a72c3766af2cb4b52bc2bf2e0867abc62dc0d65 diff --git a/ui/app/AppLayouts/WalletV2/ShareModal.qml b/ui/app/AppLayouts/WalletV2/ShareModal.qml new file mode 100644 index 0000000000..fc8977b648 --- /dev/null +++ b/ui/app/AppLayouts/WalletV2/ShareModal.qml @@ -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 + } + } + } + } +} diff --git a/ui/app/AppLayouts/WalletV2/WalletHeader.qml b/ui/app/AppLayouts/WalletV2/WalletHeader.qml index 6ddb5e24b5..b328633947 100644 --- a/ui/app/AppLayouts/WalletV2/WalletHeader.qml +++ b/ui/app/AppLayouts/WalletV2/WalletHeader.qml @@ -21,43 +21,54 @@ Item { Layout.fillHeight: true Layout.fillWidth: true - StyledText { - id: title - text: currentAccount.name + Row { + id: accountRow anchors.top: parent.top anchors.topMargin: 56 anchors.left: parent.left anchors.leftMargin: 24 - font.weight: Font.Medium - font.pixelSize: 28 + + spacing: 8 + + StyledText { + id: title + anchors.verticalCenter: parent.verticalCenter + text: currentAccount.name + font.weight: Font.Medium + font.pixelSize: 28 + } + + Rectangle { + id: separatorDot + width: 8 + height: 8 + anchors.verticalCenter: parent.verticalCenter + anchors.verticalCenterOffset: 1 + color: Style.current.primary + radius: 50 + } + + StyledText { + id: walletBalance + anchors.verticalCenter: parent.verticalCenter + text: currentAccount.balance.toUpperCase() + font.pixelSize: 22 + } } - Rectangle { - id: separatorDot - width: 8 - height: 8 - color: Style.current.primary - anchors.top: title.verticalCenter - anchors.topMargin: -3 - anchors.left: title.right - anchors.leftMargin: 8 - radius: 50 - } - - StyledText { - id: walletBalance - text: currentAccount.balance.toUpperCase() - anchors.left: separatorDot.right - anchors.leftMargin: 8 - anchors.verticalCenter: title.verticalCenter - font.pixelSize: 22 + MouseArea { + anchors.fill: accountRow + cursorShape: Qt.PointingHandCursor + onClicked: { + openPopup(shareModalComponent); + } } StatusExpandableAddress { id: walletAddress address: currentAccount.address - anchors.top: title.bottom - anchors.left: title.left + anchors.top: accountRow.bottom + anchors.left: accountRow.left addressWidth: 180 anchors.leftMargin: 0 anchors.topMargin: 0 @@ -140,6 +151,15 @@ Item { } } } + + Component { + id: shareModalComponent + ShareModal { + onClosed: { + destroy(); + } + } + } } /*##^##