refactor: remove AccountSelector and replace with StatusAccountSelector

ui/app/AppLayouts/Browser/popups/BrowserConnectionModal.qml

@@ -5,7 +5,6 @@ import utils 1.0
 
 import StatusQ.Controls 0.1
 
-import "../../../../shared"
 import "../../../../shared/panels"
 import "../../../../shared/controls"
 import "../controls"

ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml

@@ -7,7 +7,6 @@ import utils 1.0
 
 import StatusQ.Controls 0.1
 
-import "../../../../shared"
 import "../../../../shared/panels"
 import "../../../../shared/controls"
 import "../../Wallet/views"
@@ -110,7 +109,7 @@ Popup {
         anchors.top: walletHeader.bottom
         anchors.topMargin: Style.current.bigPadding
 
-        AccountSelector {
+        StatusAccountSelector {
             id: accountSelector
             label: ""
             anchors.left: parent.left

ui/app/AppLayouts/Chat/popups/ChatCommandModal.qml

@@ -8,7 +8,7 @@ import utils 1.0
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Popups 0.1
-import StatusQ.Controls 0.1 as StatusQControls
+import StatusQ.Controls 0.1
 
 import "../../../../shared/panels"
 import "../../../../shared/controls"
@@ -48,7 +48,7 @@ StatusModal {
                 //% "Continue"
                 footerText: qsTrId("continue")
 
-                StatusQControls.StatusAccountSelector {
+                StatusAccountSelector {
                     id: selectFromAccount
                     accounts: root.store.walletModelInst.accountsView.accounts
                     selectedAccount: {
@@ -149,7 +149,7 @@ StatusModal {
     }
 
     leftButtons: [
-        StatusQControls.StatusRoundButton {
+        StatusRoundButton {
             visible: !stack.isFirstGroup
             icon.name: "arrow-right"
             icon.width: 20
@@ -162,7 +162,7 @@ StatusModal {
     ]
 
     rightButtons: [
-        StatusQControls.StatusButton {
+        StatusButton {
             id: btnNext
             //% "Next"
             text: qsTrId("next")

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

@@ -1,9 +1,10 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 
+import StatusQ.Controls 0.1
+
 import utils 1.0
 
-import "../../../../shared"
 import "../../../../shared/controls"
 import "../../../../shared/popups"
 import "../stores"
@@ -42,7 +43,7 @@ ModalPopup {
         }
     }
 
-    AccountSelector {
+    StatusAccountSelector {
         id: accountSelector
         label: ""
         showAccountDetails: false

ui/shared/controls/AccountSelector.qml

@@ -1,308 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Controls 2.13
-import QtQuick.Layouts 1.13
-import QtGraphicalEffects 1.13
-import QtQml.Models 2.14
-
-import utils 1.0
-import StatusQ.Controls 0.1 as StatusQ
-
-import "../../shared"
-import "../../shared/panels"
-import "."
-
-Item {
-    id: root
-    //% "Choose account"
-    property string label: qsTrId("choose-account")
-    property bool showAccountDetails: true
-    property var accounts
-    property var selectedAccount
-    property string currency: "usd"
-    property alias selectField: select
-    height: select.height +
-            (selectedAccountDetails.visible ? selectedAccountDetails.height : 0)
-    // set to asset symbol to display asset's balance top right
-    // NOTE: if this asset is not selected as a wallet token in the UI, then
-    // nothing will be displayed
-    property string showBalanceForAssetSymbol: ""
-    property var assetFound
-    property double minRequiredAssetBalance: 0
-    property int dropdownWidth: width
-    property alias dropdownAlignment: select.menuAlignment
-    property bool isValid: true
-    property bool readOnly: false
-
-    function validate() {
-        if (showBalanceForAssetSymbol == "" || minRequiredAssetBalance == 0 || !assetFound) {
-            return root.isValid
-        }
-        root.isValid = assetFound.value >= minRequiredAssetBalance
-        return root.isValid
-    }
-
-    onSelectedAccountChanged: {
-        if (!selectedAccount) {
-            return
-        }
-        if (selectedAccount.iconColor) {
-            selectedIconImgOverlay.color = Utils.getCurrentThemeAccountColor(selectedAccount.iconColor) || Style.current.accountColors[0]
-        }
-        if (selectedAccount.name) {
-            selectedTextField.text = selectedAccount.name
-        }
-        if (selectedAccount.address) {
-            textSelectedAddress.text = selectedAccount.address  + " • "
-        }
-        if (selectedAccount.fiatBalance) {
-            textSelectedAddressFiatBalance.text = selectedAccount.fiatBalance + " " + currency.toUpperCase()
-        }
-        if (selectedAccount.assets && showBalanceForAssetSymbol) {
-            assetFound = Utils.findAssetBySymbol(selectedAccount.assets, showBalanceForAssetSymbol)
-            if (!assetFound) {
-                //% "Cannot find asset '%1'. Ensure this asset has been added to the token list."
-                console.warn(qsTrId("cannot-find-asset---1---ensure-this-asset-has-been-added-to-the-token-list-").arg(showBalanceForAssetSymbol))
-            }
-        }
-        if (!selectedAccount.type) {
-            selectedAccount.type = RecipientSelector.Type.Account
-        }
-        validate()
-    }
-
-    onAssetFoundChanged: {
-        if (!assetFound) {
-            return
-        }
-        //% "Balance: "
-        txtAssetBalance.text = qsTrId("balance--") + (parseFloat(assetFound.value) === 0.0 ? "0" : Utils.stripTrailingZeros(assetFound.value))
-        txtAssetSymbol.text = " " + assetFound.symbol
-    }
-
-    StyledText {
-        id: txtAssetBalance
-        visible: root.assetFound !== undefined
-        anchors.bottom: select.top
-        anchors.bottomMargin: -18 
-        anchors.right: txtAssetSymbol.left
-        anchors.left: select.left
-        anchors.leftMargin: select.width / 2.5
-        
-        color: !root.isValid ? Style.current.danger : Style.current.secondaryText
-        elide: Text.ElideRight
-        font.pixelSize: 13
-        horizontalAlignment: Text.AlignRight
-        height: 18
-
-        StatusQ.StatusToolTip {
-            enabled: txtAssetBalance.truncated
-            id: assetTooltip
-            text: txtAssetBalance.text
-        }
-
-        MouseArea {
-            enabled: txtAssetBalance.truncated
-            anchors.fill: parent
-            hoverEnabled: enabled
-            onEntered: assetTooltip.visible = true
-            onExited: assetTooltip.visible = false
-        }
-    }
-    StyledText {
-        id: txtAssetSymbol
-        visible: txtAssetBalance.visible
-        anchors.top: txtAssetBalance.top
-        anchors.right: parent.right
-
-        color: txtAssetBalance.color
-        font.pixelSize: 13
-        height: txtAssetBalance.height
-    }
-    Select {
-        id: select
-        label: root.label
-        model: root.accounts
-        menuAlignment: Select.MenuAlignment.Left
-        menu.delegate: menuItem
-        menu.onOpened: {
-            selectedAccountDetails.visible = false
-        }
-        menu.onClosed: {
-            selectedAccountDetails.visible = root.showAccountDetails
-        }
-        menu.width: dropdownWidth
-        selectedItemView: Item {
-            anchors.fill: parent
-
-            SVGImage {
-                id: selectedIconImg
-                sourceSize.height: 12
-                sourceSize.width: 12
-                anchors.left: parent.left
-                anchors.leftMargin: Style.current.padding
-                anchors.verticalCenter: parent.verticalCenter
-                fillMode: Image.PreserveAspectFit
-                source: Style.svg("walletIcon")
-            }
-            ColorOverlay {
-                id: selectedIconImgOverlay
-                anchors.fill: selectedIconImg
-                source: selectedIconImg
-            }
-
-            StyledText {
-                id: selectedTextField
-                elide: Text.ElideRight
-                anchors.left: selectedIconImg.right
-                anchors.leftMargin: 8
-                anchors.right: parent.right
-                anchors.rightMargin: select.selectedItemRightMargin
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                verticalAlignment: Text.AlignVCenter
-                height: 22
-            }
-        }
-    }
-
-    Row {
-        id: selectedAccountDetails
-        visible: root.showAccountDetails
-        anchors.top: select.bottom
-        anchors.topMargin: 8
-        anchors.left: parent.left
-        anchors.leftMargin: 2
-
-        StyledText {
-            id: textSelectedAddress
-            font.pixelSize: 12
-            elide: Text.ElideMiddle
-            height: 16
-            width: 90
-            color: Style.current.secondaryText
-        }
-        StyledText {
-            id: textSelectedAddressFiatBalance
-            font.pixelSize: 12
-            height: 16
-            color: Style.current.secondaryText
-        }
-    }
-
-    Component {
-        id: menuItem
-        MenuItem {
-            id: itemContainer
-            visible: walletType !== Constants.watchWalletType
-            property bool isFirstItem: index === 0
-            property bool isLastItem: index === accounts.rowCount() - 1
-
-            Component.onCompleted: {
-                if (!root.selectedAccount && isFirstItem) {
-                    root.selectedAccount = { address, name, iconColor, assets, fiatBalance }
-                }
-            }
-
-            height: walletType === Constants.watchWalletType ? 0 : (accountName.height + 14 + accountAddress.height + 14)
-            SVGImage {
-                id: iconImg
-                anchors.left: parent.left
-                anchors.leftMargin: Style.current.padding
-                anchors.verticalCenter: parent.verticalCenter
-                width: 12
-                height: 12
-                sourceSize.height: height
-                sourceSize.width: width
-                fillMode: Image.PreserveAspectFit
-                source: Style.svg("walletIcon")
-            }
-            ColorOverlay {
-                anchors.fill: iconImg
-                source: iconImg
-                color: Utils.getCurrentThemeAccountColor(iconColor) || Style.current.accountColors[0]
-            }
-            Column {
-                id: column
-                anchors.left: iconImg.right
-                anchors.leftMargin: 14
-                anchors.right: txtFiatBalance.left
-                anchors.rightMargin: 8
-                anchors.verticalCenter: parent.verticalCenter
-
-                StyledText {
-                    id: accountName
-                    text: name
-                    elide: Text.ElideRight
-                    font.pixelSize: 15
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: 22
-                }
-
-                StyledText {
-                    id: accountAddress
-                    text: address
-                    elide: Text.ElideMiddle
-                    width: 80
-                    color: Style.current.secondaryText
-                    font.pixelSize: 12
-                    height: 16
-                }
-            }
-            StyledText {
-                id: txtFiatBalance
-                anchors.right: fiatCurrencySymbol.left
-                anchors.rightMargin: 4
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                height: 22
-                text: fiatBalance
-            }
-            StyledText {
-                id: fiatCurrencySymbol
-                anchors.right: parent.right
-                anchors.rightMargin: Style.current.padding
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: 15
-                height: 22
-                color: Style.current.secondaryText
-                text: root.currency.toUpperCase()
-            }
-            background: Rectangle {
-                color: itemContainer.highlighted ? Style.current.backgroundHover : Style.current.background
-                radius: Style.current.radius
-
-                // cover bottom left/right corners with square corners
-                Rectangle {
-                    visible: !isLastItem
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.bottom: parent.bottom
-                    height: parent.radius
-                    color: parent.color
-                }
-
-                // cover top left/right corners with square corners
-                Rectangle {
-                    visible: !isFirstItem
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    anchors.top: parent.top
-                    height: parent.radius
-                    color: parent.color
-                }
-            }
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: itemContainer
-                onClicked: {
-                    root.selectedAccount = { address, name, iconColor, assets, fiatBalance }
-                    select.menu.close()
-                }
-            }
-        }
-    }
-}
-
-
-

ui/shared/controls/RecipientSelector.qml

@@ -3,6 +3,8 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 
+import StatusQ.Controls 0.1
+
 import utils 1.0
 
 import "."
@@ -182,7 +184,7 @@ Item {
             onIsValidChanged: root.validate()
         }
 
-        AccountSelector {
+        StatusAccountSelector {
             id: selAccount
             accounts: root.accounts
             visible: false

ui/shared/popups/SendModal.qml

@@ -12,8 +12,6 @@ import "../controls"
 import "../views"
 import "."
 
-import StatusQ.Controls 0.1 as StatusQControls
-
 // TODO: replace with StatusModal
 ModalPopup {
     id: root
@@ -84,7 +82,7 @@ ModalPopup {
             //% "Continue"
             footerText: qsTrId("continue")
 
-            AccountSelector {
+            StatusAccountSelector {
                 id: selectFromAccount
                 accounts: walletModel.accountsView.accounts
                 selectedAccount: {
@@ -222,7 +220,7 @@ ModalPopup {
         width: parent.width
         height: btnNext.height
 
-        StatusQControls.StatusRoundButton {
+        StatusRoundButton {
             id: btnBack
             anchors.left: parent.left
             visible: !stack.isFirstGroup

ui/shared/status/StatusETHTransactionModal.qml

@@ -5,7 +5,7 @@ import QtQuick.Dialogs 1.3
 
 import utils 1.0
 
-import StatusQ.Controls 0.1 as StatusQControls
+import StatusQ.Controls 0.1
 
 import "../../shared/controls"
 import "../../shared/views"
@@ -82,7 +82,7 @@ ModalPopup {
             //% "Continue"
             footerText: qsTrId("continue")
 
-            AccountSelector {
+            StatusAccountSelector {
                 id: selectFromAccount
                 accounts: walletModel.accountsView.accounts
                 selectedAccount: {
@@ -176,7 +176,7 @@ ModalPopup {
         width: parent.width
         height: btnNext.height
 
-         StatusQControls.StatusRoundButton {
+         StatusRoundButton {
             id: btnBack
             anchors.left: parent.left
             icon.name: "arrow-right"
@@ -200,7 +200,7 @@ ModalPopup {
             }
         }
         
-        StatusQControls.StatusButton {
+        StatusButton {
             id: btnNext
             anchors.right: parent.right
             //% "Next"

ui/shared/status/StatusSNTTransactionModal.qml

@@ -5,7 +5,7 @@ import QtQuick.Dialogs 1.3
 
 import utils 1.0
 
-import StatusQ.Controls 0.1 as StatusQControls
+import StatusQ.Controls 0.1
 
 import "../../shared/views"
 import "../../shared/controls"
@@ -88,7 +88,7 @@ ModalPopup {
             //% "Continue"
             footerText: qsTrId("continue")
             showBackBtn: false
-            AccountSelector {
+            StatusAccountSelector {
                 id: selectFromAccount
                 accounts: walletModel.accountsView.accounts
                 selectedAccount: {
@@ -184,7 +184,7 @@ ModalPopup {
         width: parent.width
         height: btnNext.height
 
-        StatusQControls.StatusRoundButton {
+        StatusRoundButton {
             id: btnBack
             anchors.left: parent.left
             icon.name: "arrow-right"
@@ -208,7 +208,7 @@ ModalPopup {
             }
         }
 
-        StatusQControls.StatusButton {
+        StatusButton {
             id: btnNext
             anchors.right: parent.right
             //% "Next"