import QtQuick 2.13 import QtQuick.Controls 2.13 import QtGraphicalEffects 1.13 import QtQuick.Layouts 1.13 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.Controls 0.1 import StatusQ.Core.Utils 0.1 import utils 1.0 import shared.controls 1.0 import "../stores" StatusModal { id: popup property var selectedAccount property string networkPrefix: "" property string completeAddressWithNetworkPrefix onSelectedAccountChanged: { if (selectedAccount.address) { txtWalletAddress.text = selectedAccount.address } } onCompleteAddressWithNetworkPrefixChanged: { qrCodeImage.source = RootStore.getQrCode(completeAddressWithNetworkPrefix) } header.title: qsTr("Receive") contentHeight: layout.implicitHeight width: 556 showHeader: false showAdvancedHeader: true // When no network is selected reset the prefix to empty string Connections { target: RootStore.enabledNetworks function onModelReset() { if(RootStore.enabledNetworks.count === 0) popup.networkPrefix = "" } } hasFloatingButtons: true advancedHeaderComponent: StatusFloatingButtonsSelector { id: floatingHeader model: RootStore.accounts delegate: Rectangle { width: button.width height: button.height radius: 8 visible: floatingHeader.visibleIndices.includes(index) StatusButton { id: button topPadding: 8 bottomPadding: 0 implicitHeight: 32 defaultLeftPadding: 4 text: name icon.emoji: !!emoji ? emoji: "" icon.emojiSize: Emoji.size.middle icon.name: !emoji ? "filled-account": "" normalColor: "transparent" highlighted: index === floatingHeader.currentIndex onClicked: { popup.selectedAccount = model floatingHeader.currentIndex = index } Component.onCompleted: { // On startup make the preseected wallet in the floating menu if(name === popup.selectedAccount.name) floatingHeader.currentIndex = index } } } popupMenuDelegate: StatusListItem { implicitWidth: 272 title: name subTitle: currencyBalance icon.emoji: !!emoji ? emoji: "" icon.color: model.color icon.name: !emoji ? "filled-account": "" icon.letterSize: 14 icon.isLetterIdenticon: !!model.emoji icon.background.color: Theme.palette.indirectColor1 onClicked: { popup.selectedAccount = model floatingHeader.itemSelected(index) } visible: !floatingHeader.visibleIndices.includes(index) } } contentItem: Column { id: layout width: popup.width topPadding: Style.current.xlPadding spacing: Style.current.bigPadding StatusSwitchTabBar { id: tabBar anchors.horizontalCenter: parent.horizontalCenter 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 Repeater { model: RootStore.enabledNetworks delegate: Control { horizontalPadding: Style.current.halfPadding verticalPadding: 5 background: Rectangle { implicitWidth: 66 implicitHeight: 32 color: "transparent" border.width: 1 border.color: Theme.palette.baseColor2 radius: 36 } contentItem: Row { spacing: 4 // FIXME this could be StatusIcon but it can't load images from an arbitrary URL Image { anchors.verticalCenter: parent.verticalCenter width: 24 height: 24 source: Style.svg("tiny/" + model.iconUrl) } StatusBaseText { anchors.verticalCenter: parent.verticalCenter text: model.shortName color: model.chainColor font.pixelSize: Style.current.primaryTextFontSize font.weight: Font.Medium } } MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor onClicked: selectPopup.open() } } } StatusRoundButton { width: 32 height: 32 icon.name: "edit_pencil" color: Theme.palette.primaryColor3 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 } 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: qsTr("Your Address") } RowLayout { id: networksLabel spacing: -1 Repeater { model: RootStore.enabledNetworks delegate: StatusBaseText { font.pixelSize: 15 color: chainColor text: shortName + ":" Component.onCompleted: { if(index === 0) popup.networkPrefix = "" popup.networkPrefix +=text } } } } StatusAddress { id: txtWalletAddress color: Theme.palette.directColor1 font.pixelSize: 15 } } Column { id: copyButton anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: Style.current.bigPadding spacing: 5 CopyToClipBoardButton { id: copyToClipBoard store: RootStore textToCopy: txtWalletAddress.text } StatusBaseText { anchors.horizontalCenter: parent.horizontalCenter font.pixelSize: 13 color: Theme.palette.primaryColor1 text: qsTr("Copy") } } } NetworkSelectPopup { id: selectPopup x: multiChainList.x + Style.current.xlPadding + Style.current.halfPadding y: centralLayout.y layer1Networks: RootStore.layer1Networks layer2Networks: RootStore.layer2Networks testNetworks: RootStore.testNetworks closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside onToggleNetwork: { RootStore.toggleNetwork(chainId) } } 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: popup completeAddressWithNetworkPrefix: popup.selectedAccount.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: popup.networkPrefix + txtWalletAddress.text } PropertyChanges { target: popup completeAddressWithNetworkPrefix: popup.networkPrefix + popup.selectedAccount.address } } ] } }