fix(@desktop/wallet): Token selector in the send modal doesn't look like design and overflows window

fixes #6499

src/app_service/common/network_constants.nim

@@ -48,7 +48,7 @@ let NETWORKS* = %* [
     "chainName": "Ropsten",
     "rpcUrl": "https://ropsten.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
     "blockExplorerUrl": "https://ropsten.etherscan.io/",
-    "iconUrl": "network/Network=Tetnet",
+    "iconUrl": "network/Network=Testnet",
     "chainColor": "#939BA1",
     "shortName": "ropEth",
     "nativeCurrencyName": "Ether",
@@ -63,7 +63,7 @@ let NETWORKS* = %* [
     "chainName": "Rinkeby",
     "rpcUrl": "https://rinkeby.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
     "blockExplorerUrl": "https://rinkeby.etherscan.io/",
-    "iconUrl": "network/Network=Tetnet",
+    "iconUrl": "network/Network=Testnet",
     "chainColor": "#939BA1",
     "shortName": "rinEth",
     "nativeCurrencyName": "Ether",
@@ -78,7 +78,7 @@ let NETWORKS* = %* [
     "chainName": "Goerli",
     "rpcUrl": "https://goerli.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
     "blockExplorerUrl": "https://goerli.etherscan.io/",
-    "iconUrl": "network/Network=Tetnet",
+    "iconUrl": "network/Network=Testnet",
     "chainColor": "#939BA1",
     "shortName": "goeEth",
     "nativeCurrencyName": "Ether",
@@ -108,7 +108,7 @@ let NETWORKS* = %* [
     "chainName": "Optimism Kovan",
     "rpcUrl": "https://optimism-kovan.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
     "blockExplorerUrl": "https://kovan-optimistic.etherscan.io",
-    "iconUrl": "network/Network=Tetnet",
+    "iconUrl": "network/Network=Testnet",
     "chainColor": "#939BA1",
     "shortName": "kovOpt",
     "nativeCurrencyName": "Ether",
@@ -138,7 +138,7 @@ let NETWORKS* = %* [
     "chainName": "Arbitrum Rinkeby",
     "rpcUrl": "https://arbitrum-rinkeby.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
     "blockExplorerUrl": " https://testnet.arbiscan.io",
-    "iconUrl": "network/Network=Tetnet",
+    "iconUrl": "network/Network=Testnet",
     "chainColor": "#939BA1",
     "shortName": "rinArb",
     "nativeCurrencyName": "Ether",
@@ -240,4 +240,4 @@ var NODE_CONFIG* = %* {
     "DataDir": DEFAULT_TORRENT_CONFIG_DATADIR,
     "TorrentDir": DEFAULT_TORRENT_CONFIG_TORRENTDIR
   }
-}
+}

ui/StatusQ

@@ -1 +1 @@
-Subproject commit 26eaeb3ad5d538e3d2601ef5d5b6062094e9db3b
+Subproject commit dbc0c1960a478bb740167275e76f56d2bef41d15

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

@@ -127,8 +127,9 @@ StatusModal {
                 id: multiChainList
                 property bool need2Columns: RootStore.enabledNetworks.count >= 9
 
-                anchors.centerIn: parent
+                anchors.left: need2Columns ? undefined: qrCodeBox.right
-                anchors.horizontalCenterOffset: need2Columns ? 0 : qrCodeBox.width/2 + Style.current.xlPadding + Style.current.halfPadding
+                anchors.leftMargin: need2Columns ?undefined : Style.current.halfPadding
+                anchors.centerIn: need2Columns ? parent : undefined
                 height: qrCodeBox.height
 
                 columnSpacing: need2Columns ? qrCodeBox.width + Style.current.bigPadding : 0

ui/imports/shared/controls/AssetAndAmountInput.qml

@@ -5,8 +5,8 @@ import QtGraphicalEffects 1.13
 
 import utils 1.0
 import shared.stores 1.0
+import shared.panels 1.0
 
-import StatusQ.Controls 0.1
 
 import "../"
 import "../panels"
@@ -161,9 +161,8 @@ Item {
 
     StatusAssetSelector {
          id: selectAsset
-         height: 28
          anchors.top: inputAmount.top
-         anchors.topMargin: Style.current.bigPadding + 14
+         anchors.topMargin: 28
          anchors.right: parent.right
          anchors.rightMargin: Style.current.smallPadding
          defaultToken: Style.png("tokens/DEFAULT-TOKEN@3x")

ui/imports/shared/panels/StatusAssetSelector.qml

@@ -0,0 +1,171 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+
+import utils 1.0
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+Item {
+    id: root
+    property var assets
+    property var selectedAsset
+    property string defaultToken
+    property string userSelectedToken
+    property var tokenAssetSourceFn: function (symbol) {
+        return ""
+    }
+    // Define this in the usage to get balance in currency selected by user
+    property var getCurrencyBalanceString: function (currencyBalance) { return "" }
+    implicitWidth: select.width
+    implicitHeight: 48
+
+    function resetInternal() {
+        assets = null
+        selectedAsset = null
+    }
+
+    onSelectedAssetChanged: {
+        if (selectedAsset && selectedAsset.symbol) {
+            iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
+            selectedTextField.text = selectedAsset.symbol.toUpperCase()
+        }
+    }
+
+    StatusSelect {
+        id: select
+        width: visualRect.width
+        model: root.assets
+        caretVisible: false
+        caretRightMargin: 0
+        bgColor: Style.current.transparent
+        bgColorHover: Theme.palette.directColor8
+        select.radius: 16
+        select.height: root.height
+        selectMenu.width: 342
+        selectMenu.height: 416
+        selectedItemComponent: Rectangle {
+            id: visualRect
+            width: row.width + Style.current.padding
+            height: parent.height
+            color: Style.current.transparent
+            border.width: 1
+            border.color: Theme.palette.directColor8
+            radius: 16
+            Row {
+                id: row
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.margins: Style.current.halfPadding
+                spacing: Style.current.halfPadding
+                StatusBaseText {
+                    id: selectedTextField
+                    anchors.verticalCenter: parent.verticalCenter
+                    font.pixelSize: 15
+                    width: Math.min(50, implicitWidth)
+                    elide: Text.ElideRight
+                    verticalAlignment: Text.AlignVCenter
+                    color: Theme.palette.directColor1
+                    font.weight: Font.Medium
+                }
+                StatusRoundedImage {
+                    id: iconImg
+                    width: 40
+                    height: 40
+                    image.onStatusChanged: {
+                        if (iconImg.image.status === Image.Error) {
+                            iconImg.image.source = defaultToken
+                        }
+                    }
+                }
+            }
+        }
+        selectMenu.delegate: menuItem
+    }
+
+    Component {
+        id: menuItem
+        MenuItem {
+            id: itemContainer
+            property bool isFirstItem: index === 0
+            property bool isLastItem: index === assets.rowCount() - 1
+
+            width: parent.width
+            height: 72
+            contentItem: Item {
+                anchors.fill: parent
+                StatusRoundedImage {
+                    id: iconImg
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16
+                    anchors.verticalCenter: parent.verticalCenter
+                    image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
+                    image.onStatusChanged: {
+                        if (iconImg.image.status === Image.Error) {
+                            iconImg.image.source = defaultToken
+                        }
+                    }
+                }
+                Column {
+                    anchors.left: iconImg.right
+                    anchors.leftMargin: 12
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    StatusBaseText {
+                        text: symbol.toUpperCase()
+                        font.pixelSize: 15
+                        color: Theme.palette.directColor1
+                    }
+
+                    StatusBaseText {
+                        text: name
+                        color: Theme.palette.baseColor1
+                        font.pixelSize: 15
+                    }
+                }
+                Column {
+                    anchors.right: parent.right
+                    anchors.rightMargin: 16
+                    anchors.verticalCenter: parent.verticalCenter
+                    StatusBaseText {
+                        font.pixelSize: 15
+                        text: parseFloat(totalBalance).toFixed(4) + " " + symbol
+                    }
+                    StatusBaseText {
+                        font.pixelSize: 15
+                        anchors.right: parent.right
+                        text: getCurrencyBalanceString(totalCurrencyBalance)
+                        color: Theme.palette.baseColor1
+                    }
+                }
+            }
+            background: Rectangle {
+                color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
+            }
+            Component.onCompleted: {
+                if(userSelectedToken === "") {
+                    if(index === 0) {
+                        selectedAsset = model
+                    }
+                } else {
+                    if(symbol === userSelectedToken) {
+                        selectedAsset = model
+                    }
+                }
+            }
+            MouseArea {
+                cursorShape: Qt.PointingHandCursor
+                anchors.fill: itemContainer
+                onClicked: {
+                    userSelectedToken = symbol
+                    selectedAsset = model
+                    select.selectMenu.close()
+                }
+            }
+        }
+    }
+}

ui/imports/shared/panels/qmldir

@@ -17,4 +17,5 @@ StyledText 1.0 StyledText.qml
 SVGImage 1.0 SVGImage.qml
 TextWithLabel 1.0 TextWithLabel.qml
 EditCroppedImagePanel 1.0 EditCroppedImagePanel.qml
-NoImageUploadedPanel 1.0 NoImageUploadedPanel.qml
+NoImageUploadedPanel 1.0 NoImageUploadedPanel.qml
+StatusAssetSelector 1.0 StatusAssetSelector.qml

ui/imports/shared/popups/SendModal.qml

@@ -7,8 +7,8 @@ import StatusQ.Controls.Validators 0.1
 
 import utils 1.0
 import shared.stores 1.0
+import shared.panels 1.0
 
-import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
 import StatusQ.Components 0.1
 import StatusQ.Core 0.1
@@ -130,6 +130,7 @@ StatusModal {
                 anchors.left: parent.left
                 anchors.leftMargin: Style.current.xlPadding
                 anchors.rightMargin: Style.current.xlPadding
+                z: 1
 
                 RowLayout {
                     spacing: 16
@@ -270,6 +271,7 @@ StatusModal {
                 anchors.top: border.bottom
                 anchors.topMargin: Style.current.halfPadding
                 anchors.left: parent.left
+                z: 0
 
                 ColumnLayout {
                     width: scrollView.availableWidth
@@ -418,8 +420,10 @@ StatusModal {
 
             TransactionSigner {
                 id: transactionSigner
-                Layout.topMargin: Style.current.smallPadding
+                anchors.left: parent.left
-                width: stack.width
+                anchors.right: parent.right
+                anchors.topMargin: Style.current.smallPadding
+                anchors.margins: 32
                 signingPhrase: popup.store.signingPhrase
             }
         }