From fa1c8727dc2e555a7b859bfc37e8a69763f5ceb3 Mon Sep 17 00:00:00 2001 From: Emil Sawicki Date: Thu, 28 Mar 2024 08:06:13 +0100 Subject: [PATCH] feat(wallet): Handle collectibles details unknown community --- storybook/pages/CollectibleDetailViewPage.qml | 3 + .../src/Models/WalletCollectiblesModel.qml | 18 ++++ ui/StatusQ/src/assets.qrc | 2 + ui/StatusQ/src/assets/img/icons/tiny/copy.svg | 4 + ui/StatusQ/src/assets/img/icons/tiny/help.svg | 5 + .../controls/CollectibleDetailsHeader.qml | 95 +++++++++++++++++-- .../collectibles/CollectibleDetailView.qml | 9 +- ui/imports/shared/controls/InformationTag.qml | 3 +- 8 files changed, 127 insertions(+), 12 deletions(-) create mode 100644 ui/StatusQ/src/assets/img/icons/tiny/copy.svg create mode 100644 ui/StatusQ/src/assets/img/icons/tiny/help.svg diff --git a/storybook/pages/CollectibleDetailViewPage.qml b/storybook/pages/CollectibleDetailViewPage.qml index e7b192693cc..8925d0927c4 100644 --- a/storybook/pages/CollectibleDetailViewPage.qml +++ b/storybook/pages/CollectibleDetailViewPage.qml @@ -94,6 +94,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 index f4537de5e42..f2096104603 100644 --- 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 index ebdb66b0fda..c89ae3e0a18 100644 --- a/ui/StatusQ/src/assets.qrc +++ b/ui/StatusQ/src/assets.qrc @@ -10413,6 +10413,8 @@ assets/img/icons/crown-off.svg assets/img/icons/xtwitter.svg assets/img/icons/tiny/folder.svg + assets/img/icons/tiny/help.svg + assets/img/icons/tiny/copy.svg assets/img/icons/tiny/profile.svg diff --git a/ui/StatusQ/src/assets/img/icons/tiny/copy.svg b/ui/StatusQ/src/assets/img/icons/tiny/copy.svg new file mode 100644 index 00000000000..6e80bad2f16 --- /dev/null +++ b/ui/StatusQ/src/assets/img/icons/tiny/copy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/StatusQ/src/assets/img/icons/tiny/help.svg b/ui/StatusQ/src/assets/img/icons/tiny/help.svg new file mode 100644 index 00000000000..2234432b1fd --- /dev/null +++ b/ui/StatusQ/src/assets/img/icons/tiny/help.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml b/ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml index acd95f744c5..025702f81ab 100644 --- 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 index 591ec4c83db..57bc94854c5 100644 --- 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 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 index b0816348013..8a4fbc5c8a3 100644 --- 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