fix(receive) fix header alignment for ReceiveModal

Add a reusable header shared between Send and Receive modals

Updates #8180

ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.13
 import QtGraphicalEffects 1.13
 import QtQuick.Layouts 1.13
+import QtQuick.Controls 2.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@@ -13,6 +14,7 @@ import StatusQ.Core.Utils 0.1
 import utils 1.0
 
 import shared.controls 1.0
+import shared.popups 1.0
 
 import "../stores"
 
@@ -25,7 +27,7 @@ StatusModal {
 
     onSelectedAccountChanged: {
         if (selectedAccount.address) {
-            txtWalletAddress.text = selectedAccount.mixedcaseAddress
+            txtWalletAddress.text = selectedAccount.address
         }
     }
 
@@ -50,53 +52,13 @@ StatusModal {
     }
 
     hasFloatingButtons: true
-    advancedHeaderComponent: StatusFloatingButtonsSelector {
+    advancedHeaderComponent: AccountsModalHeader {
-        id: floatingHeader
         model: RootStore.accounts
-        delegate: Rectangle {
+        selectedAccount: popup.selectedAccount
-            width: button.width
+        changeSelectedAccount: function(newAccount, newIndex) {
-            height: button.height
+            popup.selectedAccount = newAccount
-            radius: 8
-            visible: floatingHeader.visibleIndices.includes(index)
-            StatusButton {
-                id: button
-                topPadding: 8
-                bottomPadding: 0
-                implicitHeight: 32
-                leftPadding: 4
-                text: name
-                asset.emoji: !!emoji ? emoji: ""
-                asset.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
-            asset.emoji: !!emoji ? emoji: ""
-            asset.color: model.color
-            asset.name: !emoji ? "filled-account": ""
-            asset.letterSize: 14
-            asset.isLetterIdenticon: !!model.emoji
-            asset.bgColor: Theme.palette.indirectColor1
-            onClicked: {
-                popup.selectedAccount =  model
-                floatingHeader.itemSelected(index)
-            }
-            visible: !floatingHeader.visibleIndices.includes(index)
         }
+        showAllWalletTypes: true
     }
 
     contentItem: Column {
@@ -286,9 +248,7 @@ StatusModal {
             testNetworks: RootStore.testNetworks
             closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
 
-            onToggleNetwork: {
+            onToggleNetwork: (chainId) => RootStore.toggleNetwork(chainId)
-                RootStore.toggleNetwork(chainId)
-            }
         }
 
         states: [

ui/imports/shared/popups/AccountsModalHeader.qml

@@ -16,10 +16,12 @@ import "../controls"
 import "../views"
 
 StatusFloatingButtonsSelector {
-    id: floatingHeader
+    id: root
 
     property var selectedAccount
+    // Expected signature: function(newAccount, newIndex)
     property var changeSelectedAccount: function(){}
+    property bool showAllWalletTypes: false
 
     repeater.objectName: "accountsListFloatingHeader"
 
@@ -28,13 +30,17 @@ StatusFloatingButtonsSelector {
     QtObject {
         id: d
         property var firstModelData: null
+
+        function isWalletTypeAccepted(walletType, index) {
+            return (root.showAllWalletTypes || walletType !== Constants.watchWalletType)
+        }
     }
 
     delegate: Rectangle {
         width: button.width
         height: button.height
         radius: 8
-        visible: floatingHeader.visibleIndices.includes(index) && walletType !== Constants.watchWalletType
+        visible: root.visibleIndices.includes(index) && d.isWalletTypeAccepted(walletType, index)
         color: Theme.palette.baseColor3
         StatusButton {
             id: button
@@ -47,10 +53,10 @@ StatusFloatingButtonsSelector {
             icon.name: !emoji ? "filled-account": ""
             normalColor: "transparent"
             hoverColor: Theme.palette.statusFloatingButtonHighlight
-            highlighted: index === floatingHeader.currentIndex
+            highlighted: index === root.currentIndex
             onClicked: {
-                changeSelectedAccount(index)
+                changeSelectedAccount(model, index)
-                floatingHeader.currentIndex = index
+                root.currentIndex = index
             }
             Component.onCompleted: {
                 // On startup make the preseected wallet in the floating menu,
@@ -59,21 +65,21 @@ StatusFloatingButtonsSelector {
                     d.firstModelData = model
                 }
 
-                if(name !== floatingHeader.selectedAccount.name) {
+                if(name !== root.selectedAccount.name) {
                     return
                 }
 
-                if(name === floatingHeader.selectedAccount.name) {
+                if(name === root.selectedAccount.name) {
-                    if(walletType !== Constants.watchWalletType) {
+                    if(d.isWalletTypeAccepted(walletType, index)) {
                         // If the selected index wont be displayed, added it to the visible indices
                         if(index > 2) {
                             visibleIndices = [0, 1, index]
                         }
-                        floatingHeader.currentIndex = index
+                        root.currentIndex = index
                     }
                     else {
-                        changeSelectedAccount(0)
+                        changeSelectedAccount(root.selectedAccount, 0)
-                        floatingHeader.currentIndex = 0
+                        root.currentIndex = 0
                     }
                 }
             }
@@ -90,10 +96,10 @@ StatusFloatingButtonsSelector {
         asset.isLetterIdenticon: !!model.emoji
         asset.bgColor: Theme.palette.indirectColor1
         onClicked: {
-            changeSelectedAccount(index)
+            changeSelectedAccount(model, index)
-            floatingHeader.itemSelected(index)
+            root.itemSelected(index)
         }
-        visible: !floatingHeader.visibleIndices.includes(index) && walletType !== Constants.watchWalletType
+        visible: !root.visibleIndices.includes(index) && d.isWalletTypeAccepted(walletType, index)
     }
 }
 

ui/imports/shared/popups/SendModal.qml

@@ -160,12 +160,12 @@ StatusDialog {
         }
     }
 
-    header: SendModalHeader {
+    header: AccountsModalHeader {
         anchors.top: parent.top
         anchors.topMargin: -height - 18
         model: popup.store.accounts
         selectedAccount: popup.selectedAccount
-        changeSelectedAccount: function(newIndex) {
+        changeSelectedAccount: function(newAccount, newIndex) {
             if (newIndex > popup.store.accounts) {
                 return
             }

ui/imports/shared/popups/qmldir

@@ -24,3 +24,4 @@ ImportCommunityPopup 1.0 ImportCommunityPopup.qml
 DisplayNamePopup 1.0 DisplayNamePopup.qml
 AddEditSavedAddressPopup 1.0 AddEditSavedAddressPopup.qml
 SendContactRequestModal 1.0 SendContactRequestModal.qml
+AccountsModalHeader 1.0 AccountsModalHeader.qml