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

status-im · Apr 2, 2024 · 7fa3771 · 7fa3771
1 parent 4af2a97
commit 7fa3771
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 12 deletions.
diff --git a/storybook/pages/CollectibleDetailViewPage.qml b/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"),

diff --git a/storybook/src/Models/WalletCollectiblesModel.qml b/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
         }
     ]
 

diff --git a/ui/StatusQ/src/assets.qrc b/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>
diff --git a/ui/StatusQ/src/assets/img/icons/tiny/copy.svg b/ui/StatusQ/src/assets/img/icons/tiny/copy.svg
diff --git a/ui/StatusQ/src/assets/img/icons/tiny/help.svg b/ui/StatusQ/src/assets/img/icons/tiny/help.svg
diff --git a/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml b/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
-                cursorShape: root.collectionLinkEnabled ? Qt.PointingHandCursor: undefined
-                enabled: root.collectionLinkEnabled
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                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
             }
         }
 

diff --git a/ui/app/AppLayouts/Wallet/views/collectibles/CollectibleDetailView.qml b/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
-        isCollection: !!collectible.collectionName
+        communityName: !!communityDetails ? communityDetails.name : ""
+        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
-                color: !!collectible && root.isCommunityCollectible? collectible.communityColor : "transparent"
+                artwork: root.collectible.imageUrl
+                color: !!root.collectible && !!root.communityDetails ? root.communityDetails.color : "transparent"
                 isOwner: root.isOwnerTokenType
             }
 

diff --git a/ui/imports/shared/controls/InformationTag.qml b/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