feat(wallet): Handle collectibles details unknown community (#14206)

storybook/pages/CollectibleDetailViewPage.qml

@@ -86,6 +86,9 @@ SplitView {
                     }
                     communitiesStore: QtObject {
                         function getCommunityDetailsAsJson(communityId) {
+                            if (communityId.indexOf("unknown") >= 0) {
+                                return { name : "", image : "", color : "" }
+                            }
                             return {
                                 name : "Mock Community",
                                 image : Style.png("tokens/UNI"),

storybook/src/Models/WalletCollectiblesModel.qml

@@ -259,6 +259,24 @@ ListModel {
             networkShortName: "OPT",
             networkColor: "red",
             networkIconUrl: ModelsData.networks.optimism
+        },
+        {
+            uid: "ID-Community-Unknown",
+            chainId: 1,
+            contractAddress: "0x07",
+            tokenId: "407",
+            name: "Removed community token",
+            imageUrl: ModelsData.collectibles.mana,
+            backgroundColor: "transparent",
+            description: "This is unkown community community token",
+            collectionUid: "community-uid-unknown",
+            collectionName: "",
+            collectionImageUrl: "",
+            traits: [],
+            communityId: "community-id-unknown",
+            networkShortName: "OPT",
+            networkColor: "red",
+            networkIconUrl: ModelsData.networks.optimism
         }
     ]
 

ui/StatusQ/src/assets.qrc

@@ -10415,6 +10415,8 @@
         <file>assets/img/icons/xtwitter.svg</file>
         <file>assets/img/icons/frowny.svg</file>
         <file>assets/img/icons/tiny/folder.svg</file>
+        <file>assets/img/icons/tiny/help.svg</file>
+        <file>assets/img/icons/tiny/copy.svg</file>
         <file>assets/img/icons/tiny/profile.svg</file>
     </qresource>
 </RCC>

ui/StatusQ/src/assets/img/icons/tiny/copy.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.16634 7C4.44248 7 4.66634 6.77614 4.66634 6.5C4.66634 6.22386 4.44248 6 4.16634 6H3.99967C2.52692 6 1.33301 7.19391 1.33301 8.66667V12C1.33301 13.4728 2.52692 14.6667 3.99967 14.6667H7.33301C8.80577 14.6667 9.99967 13.4728 9.99967 12V11.8333C9.99967 11.5572 9.77582 11.3333 9.49967 11.3333C9.22353 11.3333 8.99967 11.5572 8.99967 11.8333V12C8.99967 12.9205 8.25348 13.6667 7.33301 13.6667H3.99967C3.0792 13.6667 2.33301 12.9205 2.33301 12V8.66667C2.33301 7.74619 3.0792 7 3.99967 7H4.16634Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99967 4C5.99967 2.52724 7.19358 1.33334 8.66634 1.33334H11.9997C13.4724 1.33334 14.6663 2.52724 14.6663 4V7.33334C14.6663 8.8061 13.4724 10 11.9997 10H8.66634C7.19358 10 5.99967 8.8061 5.99967 7.33334V4ZM8.66634 2.33334H11.9997C12.9201 2.33334 13.6663 3.07953 13.6663 4V7.33334C13.6663 8.25381 12.9201 9 11.9997 9H8.66634C7.74587 9 6.99967 8.25381 6.99967 7.33334V4C6.99967 3.07953 7.74587 2.33334 8.66634 2.33334Z" fill="black"/>
+</svg>

ui/StatusQ/src/assets/img/icons/tiny/help.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.50016 6C5.50016 4.61719 6.61735 3.5 8.00016 3.5C9.38297 3.5 10.5002 4.61719 10.5002 6C10.5002 6.49907 10.2404 6.91811 9.96344 7.22837C9.68109 7.54473 9.3286 7.80723 9.02689 8.0019C8.69537 8.21581 8.50016 8.54365 8.50016 8.86474V9.33334C8.50016 9.60948 8.27631 9.83334 8.00016 9.83334C7.72402 9.83334 7.50016 9.60948 7.50016 9.33334V8.86474C7.50016 8.13379 7.93225 7.5181 8.48473 7.16163C8.74948 6.99081 9.01917 6.78457 9.21738 6.5625C9.42103 6.33432 9.50016 6.14523 9.50016 6C9.50016 5.16948 8.83069 4.5 8.00016 4.5C7.16964 4.5 6.50016 5.16948 6.50016 6C6.50016 6.27614 6.27631 6.5 6.00016 6.5C5.72402 6.5 5.50016 6.27614 5.50016 6Z" fill="#939BA1"/>
+<path d="M8.00016 12.5C8.4604 12.5 8.8335 12.1269 8.8335 11.6667C8.8335 11.2064 8.4604 10.8333 8.00016 10.8333C7.53993 10.8333 7.16683 11.2064 7.16683 11.6667C7.16683 12.1269 7.53993 12.5 8.00016 12.5Z" fill="#939BA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.3335 8C1.3335 11.6819 4.31826 14.6667 8.00016 14.6667C11.6821 14.6667 14.6668 11.6819 14.6668 8C14.6668 4.3181 11.6821 1.33334 8.00016 1.33334C4.31826 1.33334 1.3335 4.3181 1.3335 8ZM2.3335 8C2.3335 11.1296 4.87055 13.6667 8.00016 13.6667C11.1298 13.6667 13.6668 11.1296 13.6668 8C13.6668 4.87039 11.1298 2.33334 8.00016 2.33334C4.87055 2.33334 2.3335 4.87039 2.3335 8Z" fill="#939BA1"/>
+</svg>

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

@@ -15,10 +15,13 @@ ColumnLayout {
 
     property alias collectibleName: collectibleName.text
     property alias collectibleId: collectibleId.text
-    property alias collectionTag: collectionTag
-    property string isCollection
 
+    property string collectionName
+
+    property string communityName
+    property string communityId
     property string communityImage
+
     property string networkShortName
     property string networkColor
     property string networkIconURL
@@ -80,18 +83,96 @@ ColumnLayout {
 
         InformationTag {
             id: collectionTag
-            asset.name: !!root.communityImage ? root.communityImage: !sensor.containsMouse ? root.isCollection ? "tiny/folder" : "tiny/profile" : "tiny/external"
+            readonly property bool isCollection: !!root.collectionName && !root.communityId
+            readonly property bool isUnkownCommunity: !!root.communityId && !root.communityName
+            property bool copySuccess: false
+            asset.name: {
+                if (!!root.communityImage) {
+                    return root.communityImage
+                }
+                if (sensor.containsMouse) {
+                    return "tiny/external"
+                }
+                if (root.isCollection) {
+                    return "tiny/folder"
+                }
+                return "tiny/profile"
+            }
             asset.isImage: !!root.communityImage
-            enabled: root.collectionLinkEnabled
+            enabled: root.collectionLinkEnabled || !!root.communityId
+            tagPrimaryLabel.text: !!root.communityName ? root.communityName : root.collectionName
+            backgroundColor: sensor.containsMouse ? Theme.palette.baseColor5 : Theme.palette.baseColor4
+            states: [
+                State {
+                    name: "copiedCommunity"
+                    extend: "unkownCommunityHover"
+                    when: collectionTag.copySuccess && collectionTag.isUnkownCommunity
+                    PropertyChanges {
+                        target: collectionTag
+                        asset.name: "tiny/checkmark"
+                        asset.color: Theme.palette.successColor1
+                    }
+                    PropertyChanges {
+                        target: statusToolTip
+                        text: qsTr("Community address copied")
+                    }
+                },
+                State {
+                    name: "unkownCommunityHover"
+                    when: collectionTag.isUnkownCommunity && sensor.containsMouse
+                    PropertyChanges {
+                        target: collectionTag
+                        asset.name: "tiny/copy"
+                        tagPrimaryLabel.text: qsTr("Community %1").arg(Utils.compactAddress(root.communityId, 4))
+                    }
+                    PropertyChanges {
+                        target: statusToolTip
+                        visible: true
+                        text: qsTr("Community name could not be fetched")
+                    }
+                },
+                State {
+                    name: "unkownCommunity"
+                    when: collectionTag.isUnkownCommunity
+                    PropertyChanges {
+                        target: collectionTag
+                        asset.name: "tiny/help"
+                        asset.color: Theme.palette.baseColor1
+                        tagPrimaryLabel.text: qsTr("Unknown community")
+                    }
+                }
+            ]
+
             MouseArea {
                 id: sensor
                 anchors.fill: parent
-                hoverEnabled: root.collectionLinkEnabled
+                hoverEnabled: true
-                cursorShape: root.collectionLinkEnabled ? Qt.PointingHandCursor: undefined
+                cursorShape: Qt.PointingHandCursor
-                enabled: root.collectionLinkEnabled
+                onContainsMouseChanged: {
+                    if (!containsMouse)
+                        collectionTag.copySuccess = false
+                }
                 onClicked: {
+                    if (collectionTag.isUnkownCommunity) {
+                        collectionTag.copySuccess = true
+                        debounceTimer.restart()
+                        Utils.copyToClipboard(root.communityId)
+                        return
+                    }
                     root.collectionTagClicked()
                 }
+                Timer {
+                    id: debounceTimer
+                    interval: 2000
+                    running: collectionTag.copySuccess
+                    onTriggered: collectionTag.copySuccess = false
+                }
+            }
+            StatusToolTip {
+                id: statusToolTip
+                visible: false
+                delay: 0
+                orientation: StatusToolTip.Orientation.Top
             }
         }
 

ui/app/AppLayouts/Wallet/views/collectibles/CollectibleDetailView.qml

@@ -50,8 +50,9 @@ Item {
         anchors.right: parent.right
         collectibleName: !!collectible.name ? collectible.name : qsTr("Unknown")
         collectibleId: "#" + collectible.tokenId
-        collectionTag.tagPrimaryLabel.text: !!communityDetails ? communityDetails.name : collectible.collectionName
+        communityName: !!communityDetails ? communityDetails.name : ""
-        isCollection: !!collectible.collectionName
+        communityId: collectible.communityId
+        collectionName: collectible.collectionName
         communityImage: !!communityDetails ? communityDetails.image: ""
         networkShortName: collectible.networkShortName
         networkColor: collectible.networkColor
@@ -99,8 +100,8 @@ Item {
 
                 visible: root.isCommunityCollectible && (root.isOwnerTokenType || root.isTMasterTokenType)
                 size: PrivilegedTokenArtworkPanel.Size.Large
-                artwork: collectible.imageUrl
+                artwork: root.collectible.imageUrl
-                color: !!collectible && root.isCommunityCollectible? collectible.communityColor : "transparent"
+                color: !!root.collectible && !!root.communityDetails ? root.communityDetails.color : "transparent"
                 isOwner: root.isOwnerTokenType
             }
 

ui/imports/shared/controls/InformationTag.qml

@@ -18,10 +18,11 @@ Control {
     property alias rightComponent: rightComponent.sourceComponent
     property bool loading: false
     property int secondarylabelMaxWidth: 100
+    property color backgroundColor: "transparent"
 
     property Component customBackground: Component {
         Rectangle {
-            color: "transparent"
+            color: root.backgroundColor
             border.width: 1
             border.color: Theme.palette.baseColor2
             radius: 36