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

315 lines
11 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 shared.popups.send.controls 1.0
import AppLayouts.stores 1.0
import ".."
import "../stores"
StatusModal {
id: root
property var accounts
property var selectedAccount
property bool switchingAccounsEnabled: true
property bool changingPreferredChainsEnabled: true
signal selectedAccountIndexChanged(int selectedIndex)
signal updatePreferredChains(string address, string preferredChains)
onSelectedAccountChanged: {
d.preferredChainIdsArray = root.selectedAccount.preferredSharingChainIds.split(":").filter(Boolean)
}
width: 556
contentHeight: content.implicitHeight + d.advanceFooterHeight
hasFloatingButtons: true
showHeader: false
showAdvancedHeader: hasFloatingButtons
advancedHeaderComponent: AccountsModalHeader {
control.enabled: root.switchingAccounsEnabled && model.count > 1
model: SortFilterProxyModel {
sourceModel: root.accounts
sorters: RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
}
selectedAccount: root.selectedAccount
getNetworkShortNames: RootStore.getNetworkShortNames
onSelectedIndexChanged: {
root.selectedAccountIndexChanged(selectedIndex)
}
}
showFooter: false
showAdvancedFooter: true
advancedFooterComponent: Rectangle {
width: parent.width
height: d.advanceFooterHeight
color: Theme.palette.baseColor4
radius: 16
Rectangle {
anchors.left: parent.left
anchors.top: parent.top
width: parent.width
height: parent.radius
color: parent.color
}
Rectangle {
anchors.left: parent.left
anchors.top: parent.top
width: parent.width
height: 1
color: Theme.palette.baseColor2
}
StatusBaseText {
anchors.left: parent.left
anchors.leftMargin: Style.current.bigPadding
anchors.verticalCenter: parent.verticalCenter
text: WalletUtils.colorizedChainPrefix(d.preferredChainShortNames) + root.selectedAccount.address
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusRoundButton {
width: 32
height: 32
anchors.right: parent.right
anchors.rightMargin: Style.current.bigPadding
anchors.verticalCenter: parent.verticalCenter
icon.name: "copy"
type: StatusRoundButton.Type.Tertiary
onClicked: RootStore.copyToClipboard(d.visibleAddress)
}
}
onOpened: {
RootStore.addressWasShown(root.selectedAccount.address)
}
QtObject {
id: d
readonly property bool multiChainView: tabBar.currentIndex === 1
readonly property int advanceFooterHeight: 88
property var preferredChainIdsArray: root.selectedAccount.preferredSharingChainIds.split(":").filter(Boolean)
property var preferredChainIds: d.preferredChainIdsArray.join(":")
readonly property string preferredChainShortNames: d.multiChainView? RootStore.getNetworkShortNames(d.preferredChainIds) : ""
readonly property string visibleAddress: "%1%2".arg(d.preferredChainShortNames).arg(root.selectedAccount.address)
readonly property var networkProxies: [layer1NetworksClone, layer2NetworksClone]
}
Column {
id: content
width: parent.width
height: childrenRect.height
topPadding: Style.current.xlPadding
bottomPadding: 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 {
id: qrCode
height: 320
width: 320
anchors.horizontalCenter: parent.horizontalCenter
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Item {
width: qrCode.width
height: qrCode.height
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
width: qrCode.width
height: qrCode.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.visibleAddress)
}
Rectangle {
anchors.centerIn: qrCodeImage
width: 78
height: 78
color: "white"
StatusSmartIdenticon {
anchors.centerIn: parent
anchors.margins: 2
width: 78
height: 78
name: root.selectedAccount.name
asset {
width: 78
height: 78
name: !root.selectedAccount.name && !root.selectedAccount.emoji? "status-logo-icon" : ""
color: !root.selectedAccount.name && !root.selectedAccount.emoji? "transparent" : Utils.getColorForId(root.selectedAccount.colorId)
emoji: root.selectedAccount.emoji
charactersLen: {
let parts = root.selectedAccount.name.split(" ")
if (parts.length > 1) {
return 2
}
return 1
}
isLetterIdenticon: root.selectedAccount.name && !root.selectedAccount.emoji
useAcronymForLetterIdenticon: root.selectedAccount.name && !root.selectedAccount.emoji
}
}
}
}
Item {
width: parent.width
height: Math.max(flow.height, editButton.height)
anchors.horizontalCenter: parent.horizontalCenter
visible: d.multiChainView && (d.preferredChainIdsArray.length > 0 || root.changingPreferredChainsEnabled)
Flow {
id: flow
anchors.horizontalCenter: parent.horizontalCenter
spacing: 5
Repeater {
model: d.networkProxies.length
delegate: Repeater {
model: d.networkProxies[index]
delegate: InformationTag {
tagPrimaryLabel.text: model.shortName
tagPrimaryLabel.color: model.chainColor
image.source: Style.svg("tiny/" + model.iconUrl)
visible: d.preferredChainIdsArray.includes(model.chainId.toString())
}
}
}
}
StatusRoundButton {
id: editButton
width: 32
height: 32
anchors.right: parent.right
anchors.rightMargin: Style.current.bigPadding
anchors.verticalCenter: parent.verticalCenter
icon.name: "edit_pencil"
type: StatusRoundButton.Type.Tertiary
visible: root.changingPreferredChainsEnabled
highlighted: selectPopup.visible
onClicked: selectPopup.open()
NetworkSelectPopup {
id: selectPopup
x: editButton.width - width
y: editButton.height + 8
layer1Networks: layer1NetworksClone
layer2Networks: layer2NetworksClone
preferredNetworksMode: true
preferredSharingNetworks: d.preferredChainIdsArray
useEnabledRole: false
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
onToggleNetwork: (network, networkModel, index) => {
d.preferredChainIdsArray = RootStore.processPreferredSharingNetworkToggle(d.preferredChainIdsArray, network)
}
onClosed: {
root.updatePreferredChains(root.selectedAccount.address, d.preferredChainIds)
}
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
}
}
}
}
}
}