feat(wallet): Update recipient data in send sign modal

storybook/pages/SendSignModalPage.qml

@@ -35,6 +35,49 @@ SplitView {
         readonly property var accountsModel: WalletAccountsModel {}
         readonly property var selectedAccount: selectedAccountEntry.item
 
+        readonly property var recipientModel: ListModel {
+            readonly property var data: [
+                {
+                    modelName: "Wallet A",
+                    name: "Hot wallet",
+                    emoji: "🚗",
+                    colorId: Constants.walletAccountColors.army,
+                    color: "#216266",
+                    ens: "",
+                    address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881",
+                },
+                {
+                    modelName: "Wallet B",
+                    name: "helloworld",
+                    emoji: "😋",
+                    colorId: Constants.walletAccountColors.primary,
+                    color: "#2A4AF5",
+                    ens: "",
+                    address: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240",
+                },
+                {
+                    modelName: "ENS",
+                    name: "Family (ens)",
+                    emoji: "🎨",
+                    colorId: Constants.walletAccountColors.magenta,
+                    color: "#EC266C",
+                    ens: "bation.eth",
+                    address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8882",
+                },
+                {
+                    modelName: "Address",
+                    name: "",
+                    emoji: "",
+                    colorId: "",
+                    color: "",
+                    ens: "",
+                    address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8883",
+                },
+            ]
+            Component.onCompleted: append(data)
+        }
+        readonly property var selectedRecipient: selectedRecipientEntry.item
+
         readonly property var networksModel: NetworksModel.flatNetworks
         readonly property var selectedNetwork: selectedNetworkEntry.item
     }
@@ -46,6 +89,13 @@ SplitView {
         value: ctrlAccount.currentValue
     }
 
+    ModelEntry {
+        id: selectedRecipientEntry
+        sourceModel: priv.recipientModel
+        key: "address"
+        value: ctrlRecipient.currentValue
+    }
+
     ModelEntry {
         id: selectedNetworkEntry
         sourceModel: priv.networksModel
@@ -87,7 +137,11 @@ SplitView {
                     accountEmoji: priv.selectedAccount.emoji
                     accountColor: Utils.getColorForId(priv.selectedAccount.colorId)
 
-                    recipientAddress: ctrlRecipient.text
+                    recipientAddress: priv.selectedRecipient.address
+                    recipientName: priv.selectedRecipient.name
+                    recipientEns: priv.selectedRecipient.ens
+                    recipientEmoji: priv.selectedRecipient.emoji
+                    recipientWalletColor: Utils.getColorForId(priv.selectedRecipient.colorId)
 
                     networkShortName: priv.selectedNetwork.shortName
                     networkName: priv.selectedNetwork.chainName
@@ -189,11 +243,15 @@ SplitView {
                 currentIndex: 0
             }
 
-            TextField {
-                Layout.fillWidth: true
+            Text {
+                text: "Selected Recipient"
+            }
+            ComboBox {
                 id: ctrlRecipient
-                text: "0xA858DDc0445d8131daC4d1DE01f834ffcbA52Ef1"
-                placeholderText: "Selected recipient"
+                textRole: "modelName"
+                valueRole: "address"
+                model: priv.recipientModel
+                currentIndex: 0
             }
 
             Text {

storybook/qmlTests/tests/tst_RecipientViewDelegate.qml

@@ -166,5 +166,28 @@ Item {
             compare(delegate.subTitle, "0xC5E4…4e40")
             compare(delegate.asset.color, Theme.palette.directColor1)
         }
+
+        function test_elideAddressInTitle() {
+            const delegate = createTemporaryObject(testComponent, root, {
+                                                       address: "0xC5E457F6b85EaE1Fc807081Cc325E482268e4e40",
+                                                       name: "Adam"
+                                                   })
+            verify(delegate)
+            verify(!delegate.elideAddressInTitle, "Default is disabled")
+
+            compare(delegate.title, "Adam")
+            compare(delegate.subTitle, "0xC5E4…4e40")
+
+            delegate.elideAddressInTitle = true
+
+            compare(delegate.title, "Adam", "Elide property doesn't affect title until it is an address")
+            compare(delegate.subTitle, "0xC5E4…4e40")
+
+            delegate.name = ""
+            compare(delegate.title, "0xC5E4…4e40")
+            delegate.elideAddressInTitle = false
+            compare(delegate.title, "0xC5E457F6b85EaE1Fc807081Cc325E482268e4e40")
+
+        }
     }
 }

storybook/qmlTests/tests/tst_SendSignModal.qml

@@ -34,6 +34,10 @@ Item {
             accountColor: Utils.getColorForId(Constants.walletAccountColors.primary)
 
             recipientAddress: "0xA858DDc0445d8131daC4d1DE01f834ffcbA52Ef1"
+            recipientName: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8882"
+            recipientEmoji: "😋"
+            recipientEns: ""
+            recipientWalletColor: Utils.getColorForId(Constants.walletAccountColors.secondary)
 
             networkShortName: Constants.networkShortChainNames.mainnet
             networkName: "Mainnet"
@@ -340,11 +344,30 @@ Item {
             const recipientBox = findChild(controlUnderTest.contentItem, "recipientBox")
             verify(!!recipientBox)
 
+            const delegate = findChild(recipientBox, "recipientDelegate")
+            verify(!!delegate)
+
             compare(recipientBox.caption, qsTr("To"))
-            compare(recipientBox.primaryText, controlUnderTest.recipientAddress)
-            compare(recipientBox.asset.name, "address")
-            verify(!recipientBox.asset.isLetterIdenticon)
-            verify(!recipientBox.asset.isImage)
+            compare(recipientBox.address, controlUnderTest.recipientAddress)
+            compare(recipientBox.name, controlUnderTest.recipientName)
+            compare(recipientBox.ens, controlUnderTest.recipientEns)
+            compare(recipientBox.emoji, controlUnderTest.recipientEmoji)
+            compare(recipientBox.walletColor, controlUnderTest.recipientWalletColor)
+
+            compare(delegate.title, controlUnderTest.recipientName)
+            compare(delegate.subTitle, SQUtils.Utils.elideText(controlUnderTest.recipientAddress, 6, 4))
+            compare(delegate.asset.color, controlUnderTest.recipientWalletColor)
+            compare(delegate.asset.emoji, controlUnderTest.recipientEmoji)
+
+            controlUnderTest.recipientEns = "1234.eth"
+            compare(delegate.title, controlUnderTest.recipientName)
+            compare(delegate.subTitle, "1234.eth")
+
+            controlUnderTest.recipientEns = ""
+            controlUnderTest.recipientName = ""
+
+            compare(delegate.title, SQUtils.Utils.elideText(controlUnderTest.recipientAddress, 6, 4))
+            compare(delegate.subTitle, "")
         }
 
         function test_recpientContextMenu() {
@@ -396,11 +419,19 @@ Item {
             const accountBox = findChild(controlUnderTest.contentItem, "accountBox")
             verify(!!accountBox)
 
-            compare(accountBox.caption, qsTr("From"))
-            compare(accountBox.primaryText, controlUnderTest.accountName)
-            compare(accountBox.secondaryText, SQUtils.Utils.elideAndFormatWalletAddress(controlUnderTest.accountAddress))
-            compare(accountBox.asset.emoji, controlUnderTest.accountEmoji)
-            compare(accountBox.asset.color, controlUnderTest.accountColor)
+            const delegate = findChild(accountBox, "recipientDelegate")
+            verify(!!delegate)
+
+            compare(accountBox.caption, qsTr("From"))          
+            compare(accountBox.address, controlUnderTest.accountAddress)
+            compare(accountBox.name, controlUnderTest.accountName)
+            compare(accountBox.emoji, controlUnderTest.accountEmoji)
+            compare(accountBox.walletColor, controlUnderTest.accountColor)
+
+            compare(delegate.title, controlUnderTest.accountName)
+            compare(delegate.subTitle, SQUtils.Utils.elideText(controlUnderTest.accountAddress, 6, 4))
+            compare(delegate.asset.color, controlUnderTest.accountColor)
+            compare(delegate.asset.emoji, controlUnderTest.accountEmoji)
         }
 
         function test_networkInfo() {

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -36,6 +36,7 @@ Rectangle {
     property Component tagsDelegate
     property var inlineTagModel: []
     property Component inlineTagDelegate
+    property bool forceDefaultCursor: false
     property bool loading: false
     property bool loadingSubTitle: loading
     property bool errorMode: false
@@ -155,7 +156,7 @@ Rectangle {
 
         objectName: root.objectName + "_sensor"
         anchors.fill: parent
-        cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
+        cursorShape: !root.forceDefaultCursor && containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
         acceptedButtons: Qt.NoButton
         hoverEnabled: true
 
@@ -254,7 +255,7 @@ Rectangle {
                     id: statusListItemTitleMouseArea
                     anchors.fill: parent
                     enabled: root.enabled
-                    cursorShape: sensor.enabled && containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    cursorShape: !root.forceDefaultCursor && sensor.enabled && containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
                     hoverEnabled: true
                     propagateComposedEvents: root.propagateTitleClicks
                     onClicked: {

ui/app/AppLayouts/Wallet/adaptors/SignSendAdaptor.qml

@@ -18,6 +18,8 @@ QObject {
     required property string tokenKey
     /** amount selected in send modal for sending **/
     required property string selectedAmountInBaseUnit
+    /** recipient address selected in send modal for sending **/
+    required property string selectedRecipientAddress
     /**
       Expected model structure:
 
@@ -44,6 +46,18 @@ QObject {
     **/
     required property var tokenBySymbolModel
 
+    /**
+      Expected model structure:
+
+        address               [string] - address of recipient
+        name                  [string] - name of recipient
+        ens                   [string] - ens of recipient
+        emoji                 [string] - emoji of recipient wallet
+        color                 [string] - color of recipient wallet
+        colorId               [string] - colorId of recipient wallet
+    **/
+    required property var recipientModel
+
     /** output property of the account selected **/
     readonly property var selectedAccount: selectedAccountEntry.item
     /** output property of the network selected **/
@@ -67,6 +81,29 @@ QObject {
                                                            !!selectedAssetContractEntry.item ?
                                                                selectedAssetContractEntry.item.address: ""
 
+    /** output property of the selected recipient address **/
+    readonly property string recipientAddress: selectedRecipientEntry.available ? selectedRecipientEntry.item.address : selectedRecipientAddress
+    /** output property of the selected recipient name **/
+    readonly property string recipientName: selectedRecipientEntry.available ? selectedRecipientEntry.item.name : ""
+    /** output property of the selected recipient ens **/
+    readonly property string recipientEns: selectedRecipientEntry.available ? selectedRecipientEntry.item.ens : ""
+    /** output property of the selected recipient emoji **/
+    readonly property string recipientEmoji: selectedRecipientEntry.available ? selectedRecipientEntry.item.emoji : ""
+    /** output property of the selected recipient color **/
+    readonly property string recipientWalletColor: {
+        if (!selectedRecipientEntry.available)
+            return ""
+        const color = selectedRecipientEntry.item.color
+        if (!!color) {
+            return color
+        }
+        const colorId = selectedRecipientEntry.item.colorId
+        if (!!colorId) {
+            return Utils.getColorForId(colorId)
+        }
+        return ""
+    }
+
     ModelEntry {
         id: selectedAccountEntry
         sourceModel: root.accountsModel
@@ -96,4 +133,11 @@ QObject {
         value: root.chainId
         key: "chainId"
     }
+
+    ModelEntry {
+        id: selectedRecipientEntry
+        sourceModel: root.recipientModel
+        key: "address"
+        value: root.selectedRecipientAddress
+    }
 }

ui/app/AppLayouts/Wallet/controls/RecipientViewDelegate.qml

@@ -11,6 +11,7 @@ StatusListItem {
     id: root
 
     property bool useAddressAsLetterIdenticon: false
+    property bool elideAddressInTitle: false
 
     property string name
     property string address
@@ -42,7 +43,7 @@ StatusListItem {
     objectName: root.name
 
     implicitHeight: 64
-    title: !!root.name ? root.name : d.getSubtitle(false)
+    title: !!root.name ? root.name : d.getSubtitle(root.elideAddressInTitle)
     rightPadding: Theme.halfPadding
     subTitle: !!root.name ? d.getSubtitle(true) : ""
 
@@ -71,7 +72,7 @@ StatusListItem {
     asset.charactersLen: 2
     asset.isLetterIdenticon: true
     asset.useAcronymForLetterIdenticon: statusListItemIcon.name !== root.address
-    asset.letterIdenticonBgWithAlpha: true
+    asset.letterIdenticonBgWithAlpha: !root.emoji
     asset.bgColor: Theme.palette.indirectColor1
     asset.width: 40
     asset.height: 40

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

@@ -0,0 +1,60 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import AppLayouts.Wallet.controls 1.0
+
+import utils 1.0
+
+ColumnLayout {
+    id: root
+
+    property string caption
+
+    property alias components: delegate.components
+    property alias highlighted: delegate.highlighted
+    property int listItemHeight: 76
+
+    required property string address
+    property string name
+    property string ens
+    property string emoji
+    property string walletColor
+
+    StatusBaseText {
+        text: root.caption
+        font.pixelSize: Theme.additionalTextSize
+    }
+    RecipientViewDelegate {
+        id: delegate
+        objectName: "recipientDelegate"
+
+        Layout.fillWidth: true
+        Layout.preferredHeight: root.listItemHeight
+
+        address: root.address
+        name: root.name
+        ens: root.ens
+        emoji: root.emoji
+        walletColor: root.walletColor
+
+        elideAddressInTitle: true
+        useAddressAsLetterIdenticon: !root.name && !root.ens
+
+        sensor.enabled: false
+
+        statusListItemSubTitle.font.pixelSize: Theme.additionalTextSize
+        statusListItemTitle.customColor: Theme.palette.directColor1
+        statusListItemTitle.font.pixelSize: Theme.additionalTextSize
+        statusListItemTitle.elide: Text.ElideMiddle
+        border.width: 1
+        border.color: Theme.palette.baseColor2
+
+        asset.bgWidth: 40
+        asset.bgHeight: 40
+        rightPadding: Theme.padding
+    }
+}

ui/app/AppLayouts/Wallet/panels/qmldir

@@ -17,4 +17,5 @@ StickySendModalHeader 1.0 StickySendModalHeader.qml
 RecipientSelectorPanel 1.0 RecipientSelectorPanel.qml
 SimpleTransactionsFees 1.0 SimpleTransactionsFees.qml
 RecipientInfoButtonWithMenu 1.0 RecipientInfoButtonWithMenu.qml
+SignAccountInfoBox 1.0 SignAccountInfoBox.qml
 SignCollectibleInfoBox 1.0 SignCollectibleInfoBox.qml