feat(@desktop/wallet): New floating header as a drop down list

fixes #10392

src/app/modules/main/wallet_section/overview/item.nim

@@ -6,17 +6,23 @@ type
     mixedCaseAddress: string
     ens: string
     balanceLoading: bool
+    color: string
+    emoji: string
 
 proc initItem*(
   name: string = "",
   mixedCaseAddress: string = "",
   ens: string = "",
   balanceLoading: bool  = true,
+  color: string,
+  emoji: string
 ): Item =
   result.name = name
   result.mixedCaseAddress = mixedCaseAddress
   result.ens = ens
   result.balanceLoading = balanceLoading
+  result.color = color
+  result.emoji = emoji
 
 proc `$`*(self: Item): string =
   result = fmt"""OverviewItem(
@@ -24,6 +30,8 @@ proc `$`*(self: Item): string =
     mixedCaseAddress: {self.mixedCaseAddress},
     ens: {self.ens},
     balanceLoading: {self.balanceLoading},
+    color: {self.color},
+    emoji: {self.emoji},
     ]"""
 
 proc getName*(self: Item): string =
@@ -37,3 +45,10 @@ proc getEns*(self: Item): string =
 
 proc getBalanceLoading*(self: Item): bool =
   return self.balanceLoading
+
+proc getColor*(self: Item): string =
+  return self.color
+
+proc getEmoji*(self: Item): string =
+  return self.emoji
+

src/app/modules/main/wallet_section/overview/module.nim

@@ -106,6 +106,8 @@ method switchAccount*(self: Module, accountIndex: int) =
     walletAccount.mixedCaseAddress,
     walletAccount.ens,
     walletAccount.assetsLoading,
+    walletAccount.color,
+    walletAccount.emoji,
   )
 
   self.view.setData(item)

src/app/modules/main/wallet_section/overview/view.nim

@@ -14,6 +14,8 @@ QtObject:
       currencyBalance: CurrencyAmount
       ens: string
       balanceLoading: bool
+      color: string
+      emoji: string
 
   proc setup(self: View) =
     self.QObject.setup
@@ -72,6 +74,20 @@ QtObject:
       self.balanceLoading = balanceLoading
       self.balanceLoadingChanged()
 
+  proc getColor(self: View): QVariant {.slot.} =
+    return newQVariant(self.color)
+  proc colorChanged(self: View) {.signal.}
+  QtProperty[QVariant] color:
+    read = getColor
+    notify = colorChanged
+
+  proc getEmoji(self: View): QVariant {.slot.} =
+    return newQVariant(self.emoji)
+  proc emojiChanged(self: View) {.signal.}
+  QtProperty[QVariant] emoji:
+    read = getEmoji
+    notify = emojiChanged
+
   proc setData*(self: View, item: Item) =
     if(self.name != item.getName()):
       self.name = item.getName()
@@ -83,3 +99,9 @@ QtObject:
       self.ens = item.getEns()
       self.ensChanged()
     self.setBalanceLoading(item.getBalanceLoading())  
+    if(self.color != item.getColor()):
+      self.color = item.getColor()
+      self.colorChanged()
+    if(self.emoji != item.getEmoji()):
+      self.emoji = item.getEmoji()
+      self.emojiChanged()

ui/StatusQ/sandbox/controls/Popups.qml

@@ -391,51 +391,6 @@ Column {
         }
     }
 
-    StatusModal {
-        id: floatingHeaderModal
-        anchors.centerIn: parent
-        height: 200
-        showHeader: false
-        showFooter: false
-        showAdvancedHeader: true
-        hasFloatingButtons: true
-        advancedHeaderComponent: StatusFloatingButtonsSelector {
-            id: floatingHeader
-
-            model: dummyAccountsModel
-
-            delegate: Rectangle {
-                width: button.width
-                height: button.height
-                radius: 8
-                visible: floatingHeader.visibleIndices.includes(index)
-                color: Theme.palette.statusAppLayout.backgroundColor
-                StatusButton {
-                    id: button
-                    topPadding: 8
-                    bottomPadding: 0
-                    implicitHeight: 32
-                    leftPadding: 4
-                    text: name
-                    asset.emoji: !!emoji ? emoji: ""
-                    asset.emojiSize: Emoji.size.middle
-                    asset.name: !emoji ? "filled-account": ""
-                    normalColor: "transparent"
-                    highlighted: index === floatingHeader.currentIndex
-                    onClicked: {
-                        floatingHeader.currentIndex = index
-                    }
-                }
-            }
-
-            popupMenuDelegate: StatusListItem {
-                implicitWidth: 272
-                title: name
-                onClicked: floatingHeader.selectItem(index)
-            }
-        }
-    }
-
     ListModel {
         id: dummyAccountsModel
         ListElement{name: "Account 1"; iconName: "filled-account"; emoji: "🥑" }

ui/StatusQ/src/StatusQ/Controls/StatusColorRadioButton.qml

@@ -21,6 +21,8 @@ RadioButton {
         implicitHeight: control.diameter
         radius: width/2
         color: radioButtonColor
+        border.width: 1
+        border.color: Theme.palette.directColor7
 
         Rectangle {
             anchors.centerIn: parent

ui/StatusQ/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml

@@ -1,156 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
-
-import SortFilterProxyModel 0.2
-
-/*!
-   \qmltype StatusModalFloatingButtonsSelector
-   \inherits Row
-   \inqmlmodule StatusQ.Controls
-   \since StatusQ.Controls 0.1
-   \brief The StatusModalFloatingButtonsSelector provides a template for creating a selectable buttons list
-   this list can be parially hidden and the rest of the items are shown under the more button in a popup
-
-   Example of how to use it:
-
-   \qml
-        StatusModalFloatingButtonsSelector {
-            id: floatingHeader
-            model: dummyAccountsModel
-            delegate: StatusAccountSelectorTag {
-                title: "name"
-                icon.name: "iconName"
-                isSelected: floatingHeader.currentIndex === index
-                visible: visibleIndices.includes(index)
-                onClicked: floatingHeader.currentIndex = index
-            }
-            popupMenuDelegate: StatusListItem {
-                implicitWidth: 272
-                title: "name"
-                onClicked: floatingHeader.itemSelected(index)
-                visible: !visibleIndices.includes(index)
-            }
-        }
-   \endqml
-
-   For a list of components available see StatusQ.
-*/
-Row {
-    id: root
-
-    /*!
-       \qmlproperty repeater
-        This property represents the repeater of selectable items shown to the user.
-        Can be used to assign objectName to the repeater
-        \endqml
-    */
-    readonly property alias repeater: itemSelectionRepeater
-
-    /*!
-       \qmlproperty delegate
-        This property represents the delegate of selectable items shown to the user.
-        Can be used to assign delegate to the buttons selector
-        \endqml
-    */
-    property alias delegate: itemSelectionRepeater.delegate
-    /*!
-       \qmlproperty popupMenuDelegate
-        This property represents the delegate of popupmenu fropm which items can be selected by the user.
-        Can be used to assign delegate to the popupmenu
-        \endqml
-    */
-    property alias popupMenuDelegate: popupMenuSelectionInstantiator.delegate
-
-    /*!
-       \qmlproperty model
-        This property represents the model of selectable items shown to the user.
-        Can be used to assign selectable items in the buttons selector
-        \endqml
-    */
-    property var model
-    /*!
-       \qmlproperty visibleIndices
-        This property represents the indices from the selectable items that will visible to the user
-        Can be used to set visible items in the buttons selector
-        \endqml
-    */
-    property var visibleIndices: [0,1,2]
-    /*!
-       \qmlproperty currentIndex
-        This property represents the index of the currently selected item
-        Can be used to set the currnetly selected item in the buttons selector
-        \endqml
-    */
-    property int currentIndex: 0
-
-    function selectItem(index) {
-        visibleIndices = [0, 1, visibleIndices.length + index]
-        root.currentIndex = index
-        popupMenu.close()
-    }
-
-    height: 32
-    spacing: 12
-    clip: true
-
-    SortFilterProxyModel {
-        id: menuModel
-
-        sourceModel: root.model
-
-        filters: [
-            ExpressionFilter {
-                enabled: root.visibleIndices.length > 0
-                expression: !root.visibleIndices.includes(index)
-            }
-        ]
-    }
-
-    Repeater {
-        id: itemSelectionRepeater
-        model: root.model
-    }
-
-    Rectangle {
-        width: button.width
-        height: button.height
-        radius: 8
-        visible: root.model.count > 3
-        color: Theme.palette.statusAppLayout.backgroundColor
-        StatusButton {
-            id: button
-            implicitHeight: 32
-            topPadding: 8
-            bottomPadding: 0
-            horizontalPadding: 4
-            hoverColor: Theme.palette.statusFloatingButtonHighlight
-            normalColor: Theme.palette.baseColor3
-            asset.name: "more"
-            asset.bgColor: "transparent"
-            onClicked: popupMenu.popup(parent.x + 4, y + height + 4)
-        }
-    }
-
-    // Empty item to fill up empty space
-    Item {
-        Layout.preferredHeight: parent.height
-        Layout.fillWidth: true
-    }
-
-    StatusMenu {
-        id: popupMenu
-        width: implicitWidth
-
-        StatusMenuInstantiator {
-            id: popupMenuSelectionInstantiator
-            model: menuModel
-            menu: popupMenu
-        }
-    }
-}

ui/StatusQ/src/StatusQ/Controls/qmldir

@@ -43,7 +43,6 @@ StatusWalletColorSelect 0.1 StatusWalletColorSelect.qml
 StatusColorSelectorGrid 0.1 StatusColorSelectorGrid.qml
 StatusSeedPhraseInput 0.1 StatusSeedPhraseInput.qml
 StatusImageCrop 0.1 StatusImageCrop.qml
-StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml
 StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
 StatusDropdown 0.1 StatusDropdown.qml
 StatusIconTextButton 0.1 StatusIconTextButton.qml

ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml

@@ -71,5 +71,17 @@ QtObject {
         'blueHijab': '#CDF2FB',
 
         'lightPattensBlue': '#D7DEE4',
+
+        'blackHovered': '#1D232E',
+        'blueHovered': '#364DB2',
+        'purpleHovered': '#6D62C7',
+        'cyanHovered': '#41A6C0',
+        'violetHovered': '#A965C3',
+        'redHovered': '#C85151',
+        'yellowHovered': '#CCA20C',
+        'greenHovered': '#63AE00',
+        'mossHovered': '#1E857B',
+        'brownHovered': '#6F2727',
+        'brown2Hovered': '#7C6926',
     }
 }

ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml

@@ -261,6 +261,40 @@ QtObject {
         property color emojiReactionActiveBackgroundHovered
     }
 
+    property QtObject walletAccountColors: QtObject {
+        function getHoveredColor(color) {
+            switch(color) {
+            case getColor('black'):
+                return getColor('blackHovered')
+            case getColor('grey'):
+                return getColor('grey2')
+            case getColor('white'):
+                return getColor('grey4')
+            case getColor('blue2'):
+                return getColor('blueHovered')
+            case getColor('purple'):
+                return getColor('purpleHovered')
+            case getColor('cyan'):
+                return getColor('cyanHovered')
+            case getColor('violet'):
+                return getColor('violetHovered')
+            case getColor('red2'):
+                return getColor('redHovered')
+            case getColor('yellow'):
+                return getColor('yellowHovered')
+            case getColor('green2'):
+                return getColor('greenHovered')
+            case getColor('moss'):
+                return getColor('mossHovered')
+            case getColor('brown'):
+                return getColor('brownHovered')
+            case getColor('brown2'):
+                return getColor('brown2Hovered')
+            default: return ""
+            }
+        }
+    }
+
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

ui/StatusQ/src/statusq.qrc

@@ -89,7 +89,6 @@
         <file>StatusQ/Controls/StatusDropdown.qml</file>
         <file>StatusQ/Controls/StatusFlatButton.qml</file>
         <file>StatusQ/Controls/StatusFlatRoundButton.qml</file>
-        <file>StatusQ/Controls/StatusFloatingButtonsSelector.qml</file>
         <file>StatusQ/Controls/StatusIconTabButton.qml</file>
         <file>StatusQ/Controls/StatusIconTextButton.qml</file>
         <file>StatusQ/Controls/StatusIdenticonRing.qml</file>

ui/app/AppLayouts/Wallet/panels/WalletFooter.qml

@@ -77,7 +77,6 @@ Rectangle {
     Component {
         id: receiveModalComponent
         ReceiveModal {
-            selectedAddress: walletStore.overview.mixedcaseAddress
             anchors.centerIn: parent
         }
     }

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

@@ -16,6 +16,7 @@ import utils 1.0
 import shared.controls 1.0
 import shared.popups 1.0
 
+import SortFilterProxyModel 0.2
 
 import AppLayouts.stores 1.0
 import "../stores"
@@ -23,18 +24,11 @@ import "../stores"
 StatusModal {
     id: root
 
-    property string selectedAddress: ""
+    QtObject {
-    property string networkPrefix: ""
+        id: d
+        property string selectedAccountAddress
+        property string networkPrefix
         property string completeAddressWithNetworkPrefix
-
-    onSelectedAddressChanged: {
-        if (selectedAddress) {
-            txtWalletAddress.text = selectedAddress
-        }
-    }
-
-    onCompleteAddressWithNetworkPrefixChanged: {
-        qrCodeImage.source = RootStore.getQrCode(completeAddressWithNetworkPrefix)
     }
 
     header.title: qsTr("Receive")
@@ -46,12 +40,19 @@ StatusModal {
 
     hasFloatingButtons: true
     advancedHeaderComponent: AccountsModalHeader {
-        model: RootStore.accounts
+        id: header
-        currentAddress: root.selectedAddress
+        model: SortFilterProxyModel {
-        changeSelectedAccount: function(newAccount, newIndex) {
+            sourceModel: RootStore.accounts
-            root.selectedAddress = newAccount.address
+        }
+        selectedIndex: RootStore.getUserSelectedAccountIndex(header.model)
+        onSelectedIndexChanged: selectedAccount = header.model.get(header.selectedIndex)
+        onSelectedAccountChanged: d.selectedAccountAddress = selectedAccount.address
+        Connections {
+            target: RootStore.accounts
+            function onModelReset() {
+                header.selectedAccount = header.model.get(header.selectedIndex)
+            }
         }
-        showAllWalletTypes: true
     }
 
     contentItem: Column {
@@ -162,6 +163,7 @@ StatusModal {
                     fillMode: Image.PreserveAspectFit
                     mipmap: true
                     smooth: false
+                    source: RootStore.getQrCode(d.completeAddressWithNetworkPrefix)
                 }
 
                 Rectangle {
@@ -209,9 +211,9 @@ StatusModal {
                                 visible: model.isEnabled
                                 onVisibleChanged: {
                                     if (visible) {
-                                        networkPrefix += text
+                                        d.networkPrefix += text
                                     } else {
-                                        networkPrefix = networkPrefix.replace(text, "")
+                                        d.networkPrefix = d.networkPrefix.replace(text, "")
                                     }
                                 }
                             }
@@ -222,6 +224,7 @@ StatusModal {
                     id: txtWalletAddress
                     color: Theme.palette.directColor1
                     font.pixelSize: 15
+                    text: d.selectedAccountAddress
                 }
             }
             Column {
@@ -301,8 +304,8 @@ StatusModal {
                     textToCopy: txtWalletAddress.text
                 }
                 PropertyChanges {
-                    target: root
+                    target: d
-                    completeAddressWithNetworkPrefix: root.selectedAddress
+                    completeAddressWithNetworkPrefix: d.selectedAccountAddress
                 }
             },
             State {
@@ -322,11 +325,11 @@ StatusModal {
                 }
                 PropertyChanges {
                     target: copyToClipBoard
-                    textToCopy: root.networkPrefix + txtWalletAddress.text
+                    textToCopy: d.networkPrefix + txtWalletAddress.text
                 }
                 PropertyChanges {
-                    target: root
+                    target: d
-                    completeAddressWithNetworkPrefix: root.networkPrefix + root.selectedAddress
+                    completeAddressWithNetworkPrefix: d.networkPrefix + d.selectedAccountAddress
                 }
             }
         ]

ui/app/AppLayouts/Wallet/stores/RootStore.qml

@@ -21,6 +21,7 @@ QtObject {
     property var assets: walletSectionAssets.assets
     property bool assetsLoading: walletSectionAssets.assetsLoading
     property var accounts: walletSectionAccounts.accounts
+    property var sendAccounts: walletSectionSend.accounts
     property var appSettings: localAppSettings
     property var accountSensitiveSettings: localAccountSensitiveSettings
     property bool hideSignPhraseModal: accountSensitiveSettings.hideSignPhraseModal
@@ -197,4 +198,12 @@ QtObject {
     function runEditAccountPopup(address) {
         walletSection.runEditAccountPopup(address)
     }
+
+    function getUserSelectedAccountIndex(model) {
+        for (let i = 0; i < model.count; i++) {
+            if(model.get(i).address.toUpperCase() === root.overview.mixedcaseAddress.toUpperCase()) {
+                return i
+            }
+        }
+    }
 }

ui/imports/shared/controls/SavedAddressListItem.qml

@@ -32,7 +32,7 @@ StatusListItem {
     statusListItemSubTitle.elide: Text.ElideMiddle
     statusListItemSubTitle.wrapMode: Text.NoWrap
     radius: 0
-    color: sensor.containsMouse || highlighted ? Theme.palette.statusListItem.highlightColor : "transparent"
+    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
     components: [
         ClearButton {
             width: 24

ui/imports/shared/controls/TokenBalancePerChainDelegate.qml

@@ -29,7 +29,7 @@ StatusListItem {
     tagsModel: balances.count > 0 ? balances : []
     tagsDelegate: sensor.containsMouse ? expandedItem : compactItem
     radius: sensor.containsMouse || root.highlighted ? 0 : 8
-    color: sensor.containsMouse || highlighted ? Theme.palette.statusListItem.highlightColor : "transparent"
+    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
 
     onClicked: d.selectToken()
 

ui/imports/shared/controls/WalletAccountListItem.qml

@@ -39,7 +39,7 @@ StatusListItem {
     asset.width: 40
     asset.height: 40
     radius: 0
-    color: sensor.containsMouse || highlighted ? Theme.palette.statusListItem.highlightColor : "transparent"
+    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
     components: [
         Column {
             anchors.verticalCenter: parent.verticalCenter

ui/imports/shared/panels/StatusAssetSelector.qml

@@ -22,7 +22,6 @@ Item {
     property var assets
     property var selectedAsset
     property string defaultToken
-    property string userSelectedToken
     property string currentCurrencySymbol
     property string placeholderText
     property var hoveredToken
@@ -155,7 +154,6 @@ Item {
             width: comboBox.control.popup.width
             getNetworkIcon: root.getNetworkIcon
             onTokenSelected: {
-                userSelectedToken = selectedToken.symbol
                 selectedAsset = selectedToken
                 comboBox.control.popup.close()
             }

ui/imports/shared/popups/AccountsModalHeader.qml

@@ -1,87 +1,85 @@
-import QtQuick 2.13
+import QtQuick 2.15
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-import StatusQ.Controls.Validators 0.1
-
-import utils 1.0
 
 import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
 import StatusQ.Components 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1 as StatusQUtils
 
 import "../controls"
-import "../views"
 
-StatusFloatingButtonsSelector {
+StatusComboBox {
     id: root
 
-    property string currentAddress
     property var selectedAccount
-    // Expected signature: function(newAccount)
+    property string chainShortNames
-    property var changeSelectedAccount: function(){}
+    property int selectedIndex: -1
-    property bool showAllWalletTypes: false
 
-    repeater.objectName: "accountsListFloatingHeader"
+    QtObject {
+        id: d
+        function getTextColorForWhite(color) {
+            // The grey is kept for backwards compatibility for accounts already created with grey background
+            return color === StatusColors.colors['grey'] || color === StatusColors.colors['white'] ? Theme.palette.black : Theme.palette.white
+        }
+    }
 
-    signal updatedSelectedAccount(var account)
+    control.padding: 0
+    control.spacing: 0
+    control.leftPadding: 8
+    control.rightPadding: 8
+    control.topPadding: 10
 
-    delegate: Rectangle {
+    control.popup.width: 430
-        width: button.width
+    control.indicator: null
-        height: button.height
+
+    control.background: Rectangle {
+        width: contentItem.childrenRect.width + control.leftPadding + control.rightPadding
+        height: 32
         radius: 8
-        color: Theme.palette.baseColor3
+        color: !!selectedAccount ? hoverHandler.containsMouse ?
-        StatusButton {
+                                       Theme.palette.walletAccountColors.getHoveredColor(selectedAccount.color) :
-            id: button
+                                       selectedAccount.color ?? "transparent" : "transparent"
-            size: StatusBaseButton.Size.Tiny
+        HoverHandler {
-            implicitHeight: 32
+            id: hoverHandler
-            leftPadding: 4
+            cursorShape: Qt.PointingHandCursor
-            text: name
+        }
-            objectName: name
+    }
-            asset.emoji: !!emoji ? emoji: ""
+
-            icon.name: !emoji ? "filled-account": ""
+    contentItem: Row {
-            normalColor: "transparent"
+        anchors.verticalCenter: parent.verticalCenter
-            hoverColor: Theme.palette.statusFloatingButtonHighlight
+        width: childrenRect.width
-            highlighted: index === root.currentIndex
+        spacing: 8
+        StatusEmoji {
+            anchors.verticalCenter: parent.verticalCenter
+            width: 16
+            height: 16
+            emojiId: StatusQUtils.Emoji.iconId(selectedAccount.emoji ?? "", StatusQUtils.Emoji.size.verySmall) || ""
+        }
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: selectedAccount.name ?? ""
+            font.pixelSize: 15
+            color: d.getTextColorForWhite(selectedAccount.color ?? "")
+        }
+        StatusIcon {
+            anchors.verticalCenter: parent.verticalCenter
+            width: 16
+            height: width
+            icon: "chevron-down"
+            color: d.getTextColorForWhite(selectedAccount.color ?? "")
+        }
+    }
+
+    delegate: WalletAccountListItem {
+        width: ListView.view.width
+        modelData: model
+        chainShortNames: root.chainShortNames
+        color: sensor.containsMouse || highlighted ?
+                   Theme.palette.baseColor2 :
+                   selectedAccount.name === model.name ? Theme.palette.statusListItem.highlightColor : "transparent"
         onClicked: {
-                changeSelectedAccount(model)
+            selectedIndex = index
-                root.currentIndex = index
+            control.popup.close()
-            }
-            Component.onCompleted: {
-                // on model reset, set the selected account to the one that was previously selected
-                if(!root.selectedAccount) {
-                    if(root.currentIndex === index) {
-                        changeSelectedAccount(model)
-                    }
-                    if(root.currentAddress === model.address) {
-                        root.currentIndex = index
-                        changeSelectedAccount(model)
-                    }
-                } else {
-                    // if the selectedAccount is watch only then select 0th item
-                    if(index === 0 && !!root.selectedAccount && root.selectedAccount.walletType === Constants.watchWalletType) {
-                        changeSelectedAccount(model)
-                        root.currentIndex = index
-                    }
-                }
-            }
-        }
-    }
-    popupMenuDelegate: StatusListItem {
-        implicitWidth: 272
-        title: name
-        subTitle: LocaleUtils.currencyAmountToLocaleString(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: {
-            changeSelectedAccount(model)
-            root.selectItem(index)
         }
     }
 }

ui/imports/shared/popups/SendModal.qml

@@ -95,6 +95,12 @@ StatusDialog {
             if(errorType === Constants.SendAmountExceedsBalance)
                 bestRoutes = []
         }
+
+        function setSelectedAccount() {
+            popup.selectedAccount = header.model.get(header.selectedIndex)
+            if(!!assetSelector.selectedAsset)
+                assetSelector.selectedAsset = store.getAsset(selectedAccount.assets, assetSelector.selectedAsset.symbol)
+        }
     }
 
     width: 556
@@ -149,6 +155,7 @@ StatusDialog {
     onClosed: popup.store.resetTxStoreProperties()
 
     header: AccountsModalHeader {
+        id: header
         anchors.top: parent.top
         anchors.topMargin: -height - 18
         model: SortFilterProxyModel {
@@ -159,11 +166,14 @@ StatusDialog {
                 inverted: true
             }
         }
-        currentAddress: popup.store.overview.mixedcaseAddress
+        selectedIndex: store.getUserSelectedAccountIndex(header.model)
-        changeSelectedAccount: function(newAccount) {
+        selectedAccount: !!popup.selectedAccount ? popup.selectedAccount: {}
-            popup.selectedAccount = newAccount
+        chainShortNames: store.getAllNetworksSupportedString()
-            if (assetSelector.selectedAsset) {
+        onSelectedIndexChanged: d.setSelectedAccount()
-                assetSelector.selectedAsset = store.getAsset(popup.selectedAccount.assets, assetSelector.selectedAsset.symbol)
+        Connections {
+            target: popup.store.accounts
+            function onModelReset() {
+                d.setSelectedAccount()
             }
         }
     }
@@ -248,7 +258,7 @@ StatusDialog {
                             visible: !!assetSelector.selectedAsset || !!assetSelector.hoveredToken
                             title: {
                                 if(!!assetSelector.hoveredToken) {
-                                    const balance = popup.currencyStore.formatCurrencyAmount(assetSelector.hoveredToken.totalCurrencyBalance.amount, assetSelector.hoveredToken.symbol)
+                                    const balance = popup.currencyStore.formatCurrencyAmount((amountToSendInput.inputIsFiat ? assetSelector.hoveredToken.totalCurrencyBalance.amount : assetSelector.hoveredToken.totalBalance.amount) , assetSelector.hoveredToken.symbol)
                                     return qsTr("Max: %1").arg(balance)
                                 }
                                 if (d.maxInputBalance <= 0)
@@ -278,7 +288,6 @@ StatusDialog {
                             return RootStore.getNetworkIcon(chainId)
                         }
                         onTokenSelected: {
-                            assetSelector.userSelectedToken = selectedToken.symbol
                             assetSelector.selectedAsset = selectedToken
                         }
                         onTokenHovered: {

ui/imports/shared/stores/TransactionStore.qml

@@ -307,4 +307,12 @@ QtObject {
         }
         return result
     }
+
+    function getUserSelectedAccountIndex(model) {
+        for (let i = 0; i < model.count; i++) {
+            if(model.get(i).address.toUpperCase() === root.overview.mixedcaseAddress.toUpperCase()) {
+                return i
+            }
+        }
+    }
 }

ui/imports/shared/views/NetworksSimpleRoutingView.qml

@@ -131,7 +131,7 @@ RowLayout {
                 rightPadding: 5
                 implicitWidth: 410
                 title: chainName
-                property bool tokenBalanceOnChainValid: selectedAccount && selectedAccount !== undefined && selectedAsset !== undefined
+                property bool tokenBalanceOnChainValid: selectedAccount && selectedAccount !== undefined && selectedAsset && selectedAsset !== undefined
                 property double tokenBalanceOnChain: tokenBalanceOnChainValid ? root.store.getTokenBalanceOnChain(selectedAccount, chainId, selectedAsset.symbol).amount : 0.0
                 subTitle: tokenBalanceOnChainValid ? root.formatCurrencyAmount(tokenBalanceOnChain, selectedAsset.symbol) : "N/A"
                 statusListItemSubTitle.color: Theme.palette.primaryColor1

ui/imports/shared/views/TabAddressSelectorView.qml

@@ -180,7 +180,7 @@ Item {
                     statusListItemTitle.elide: Text.ElideMiddle
                     statusListItemTitle.wrapMode: Text.NoWrap
                     radius: 0
-                    color: sensor.containsMouse || highlighted ? Theme.palette.statusListItem.highlightColor : "transparent"
+                    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
                     statusListItemComponentsSlot.spacing: 5
                     loading: loadingTransaction
                     components: [

ui/imports/utils/Constants.qml

@@ -949,8 +949,9 @@ QtObject {
     readonly property string expired: "expired"
     readonly property string failedResending: "failedResending"
 
-    readonly property var preDefinedWalletAccountColors:[ StatusColors.colors['black'],
+    readonly property var preDefinedWalletAccountColors:[
-        StatusColors.colors['grey'],
+        StatusColors.colors['black'],
+        StatusColors.colors['white'],
         StatusColors.colors['blue2'],
         StatusColors.colors['purple'],
         StatusColors.colors['cyan'],
@@ -960,7 +961,8 @@ QtObject {
         StatusColors.colors['green2'],
         StatusColors.colors['moss'],
         StatusColors.colors['brown'],
-        StatusColors.colors['brown2'] ]
+        StatusColors.colors['brown2']
+    ]
 
     readonly property QtObject appTranslatableConstants: QtObject {
         readonly property string loginAccountsListAddNewUser: "LOGIN-ACCOUNTS-LIST-ADD-NEW-USER"