status-desktop/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml

349 lines
12 KiB
QML

import QtQuick 2.13
import QtGraphicalEffects 1.13
import QtQuick.Layouts 1.13
import QtQuick.Controls 2.14
import SortFilterProxyModel 0.2
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Utils 0.1
import utils 1.0
import shared.controls 1.0
import shared.popups 1.0
import AppLayouts.stores 1.0
import "../stores"
StatusModal {
id: root
property string address: RootStore.selectedReceiveAccount.address
property string chainShortNames: ""
property string description: qsTr("Your Address")
property bool readOnly: false
QtObject {
id: d
property string completeAddressWithNetworkPrefix
property var preferredSharingNetworksArray: !!RootStore.selectedReceiveAccount ? RootStore.selectedReceiveAccount.preferredSharingChainIds.split(":").filter(Boolean): []
}
headerSettings.title: qsTr("Receive")
contentHeight: layout.implicitHeight
width: 556
showHeader: false
showAdvancedHeader: true
hasFloatingButtons: true
advancedHeaderComponent: AccountsModalHeader {
model: SortFilterProxyModel {
sourceModel: RootStore.receiveAccounts
sorters: RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
}
selectedAccount: RootStore.selectedReceiveAccount
getNetworkShortNames: RootStore.getNetworkShortNames
onSelectedIndexChanged: RootStore.switchReceiveAccount(selectedIndex)
}
contentItem: Column {
id: layout
width: root.width
topPadding: Style.current.xlPadding
spacing: Style.current.bigPadding
StatusSwitchTabBar {
id: tabBar
anchors.horizontalCenter: parent.horizontalCenter
currentIndex: 1
StatusSwitchTabButton {
text: qsTr("Legacy")
}
StatusSwitchTabButton {
text: qsTr("Multichain")
}
}
Item {
width: parent.width
height: qrCodeBox.height
id: centralLayout
Grid {
id: multiChainList
property bool need2Columns: RootStore.enabledNetworks.count >= 9
anchors.left: need2Columns ? undefined: qrCodeBox.right
anchors.leftMargin: need2Columns ?undefined : Style.current.halfPadding
anchors.centerIn: need2Columns ? parent : undefined
height: qrCodeBox.height
columnSpacing: need2Columns ? qrCodeBox.width + Style.current.bigPadding : 0
flow: Grid.TopToBottom
columns: need2Columns ? 2 : 1
spacing: 5
property var networkProxies: [layer1NetworksClone, layer2NetworksClone]
Repeater {
model: multiChainList.networkProxies.length
delegate: Repeater {
model: multiChainList.networkProxies[index]
delegate: InformationTag {
tagPrimaryLabel.text: model.shortName
tagPrimaryLabel.color: model.chainColor
image.source: Style.svg("tiny/" + model.iconUrl)
visible: d.preferredSharingNetworksArray.includes(model.chainId.toString())
MouseArea {
anchors.fill: parent
cursorShape: root.readOnly ? Qt.ArrowCursor : Qt.PointingHandCursor
enabled: !root.readOnly
onClicked: selectPopup.open()
}
}
}
}
StatusRoundButton {
id: editButton
width: 32
height: 32
icon.name: "edit_pencil"
color: Theme.palette.primaryColor3
visible: !root.readOnly
onClicked: selectPopup.open()
}
}
Rectangle {
id: qrCodeBox
height: 339
width: 339
anchors.centerIn: parent
anchors.horizontalCenter: parent.horizontalCenter
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Item {
width: qrCodeBox.width
height: qrCodeBox.height
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
width: qrCodeBox.width
height: qrCodeBox.height
radius: Style.current.bigPadding
border.width: 1
border.color: Style.current.border
}
Rectangle {
anchors.top: parent.top
anchors.right: parent.right
width: Style.current.bigPadding
height: Style.current.bigPadding
}
Rectangle {
anchors.bottom: parent.bottom
anchors.left: parent.left
width: Style.current.bigPadding
height: Style.current.bigPadding
}
}
}
Image {
id: qrCodeImage
anchors.centerIn: parent
height: parent.height
width: parent.width
asynchronous: true
fillMode: Image.PreserveAspectFit
mipmap: true
smooth: false
source: RootStore.getQrCode(d.completeAddressWithNetworkPrefix)
}
Rectangle {
anchors.centerIn: qrCodeImage
width: 78
height: 78
color: "white"
StatusIcon {
anchors.centerIn: parent
anchors.margins: 2
width: 78
height: 78
icon: "status-logo-icon"
}
}
}
}
Item {
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
height: addressLabel.height + copyButton.height
Column {
id: addressLabel
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: Style.current.bigPadding
StatusBaseText {
id: contactsLabel
font.pixelSize: 15
color: Theme.palette.baseColor1
text: root.description
}
RowLayout {
id: networksLabel
spacing: -1
Repeater {
model: multiChainList.networkProxies.length
delegate: Repeater {
model: multiChainList.networkProxies[index]
delegate: StatusBaseText {
font.pixelSize: 15
color: chainColor
text: shortName + ":"
visible: d.preferredSharingNetworksArray.includes(model.chainId.toString())
onVisibleChanged: {
if (root.readOnly)
return
if (visible) {
root.chainShortNames += text
} else {
root.chainShortNames = root.chainShortNames.replace(text, "")
}
}
}
}
}
}
StatusAddress {
id: txtWalletAddress
color: Theme.palette.directColor1
font.pixelSize: 15
text: root.address
}
}
Column {
id: copyButton
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Style.current.bigPadding
spacing: 5
CopyToClipBoardButton {
id: copyToClipBoard
textToCopy: txtWalletAddress.text
onCopyClicked: RootStore.copyToClipboard(textToCopy)
}
StatusBaseText {
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 13
color: Theme.palette.primaryColor1
text: qsTr("Copy")
}
}
}
NetworkSelectPopup {
id: selectPopup
x: multiChainList.x + editButton.width + 9
y: tabBar.y + tabBar.height
layer1Networks: layer1NetworksClone
layer2Networks: layer2NetworksClone
preferredNetworksMode: true
preferredSharingNetworks: d.preferredSharingNetworksArray
useEnabledRole: false
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
onToggleNetwork: (network, networkModel, index) => {
d.preferredSharingNetworksArray = RootStore.processPreferredSharingNetworkToggle( d.preferredSharingNetworksArray, network)
}
onClosed: RootStore.updateWalletAccountPreferredChains(root.address, d.preferredSharingNetworksArray.join(":"))
CloneModel {
id: layer1NetworksClone
sourceModel: RootStore.layer1Networks
roles: ["layer", "chainId", "chainColor", "chainName","shortName", "iconUrl", "isEnabled"]
// rowData used to clone returns string. Convert it to bool for bool arithmetics
rolesOverride: [{
role: "isEnabled",
transform: (modelData) => root.readOnly ? root.chainShortNames.includes(modelData.shortName) : Boolean(modelData.isEnabled)
}]
}
CloneModel {
id: layer2NetworksClone
sourceModel: RootStore.layer2Networks
roles: layer1NetworksClone.roles
rolesOverride: layer1NetworksClone.rolesOverride
}
}
states: [
State {
name: "legacy"
when: tabBar.currentIndex === 0
PropertyChanges {
target: multiChainList
visible: false
}
PropertyChanges {
target: contactsLabel
visible: true
}
PropertyChanges {
target: networksLabel
visible: false
}
PropertyChanges {
target: copyToClipBoard
textToCopy: txtWalletAddress.text
}
PropertyChanges {
target: d
completeAddressWithNetworkPrefix: root.address
}
},
State {
name: "multichain"
when: tabBar.currentIndex === 1
PropertyChanges {
target: multiChainList
visible: true
}
PropertyChanges {
target: contactsLabel
visible: false
}
PropertyChanges {
target: networksLabel
visible: true
}
PropertyChanges {
target: copyToClipBoard
textToCopy: root.chainShortNames + txtWalletAddress.text
}
PropertyChanges {
target: d
completeAddressWithNetworkPrefix: root.chainShortNames + root.address
}
}
]
}
}