From b9073919cb924f76083c6ecfdce9f175ebc6eb07 Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Fri, 10 Sep 2021 15:11:34 +0200 Subject: [PATCH] feat(@desktop/wallet2): Added traits for the opensea Assets fixes #3435 --- src/app/wallet/v2/views/asset_list.nim | 34 ++- src/app/wallet/v2/views/collection_list.nim | 6 +- src/app/wallet/v2/views/trait_list.nim | 49 +++++ ui/StatusQ | 2 +- .../AppLayouts/WalletV2/CollectiblesTab.qml | 6 +- ui/app/AppLayouts/WalletV2/LeftTab.qml | 1 + ui/app/AppLayouts/WalletV2/WalletV2Layout.qml | 20 +- .../components/CollectibleCollection.qml | 9 +- .../components/CollectibleDetailsPage.qml | 204 ++++++++++++++---- ui/app/AppLayouts/WalletV2/components/qmldir | 1 - vendor/status-go | 2 +- vendor/status-lib | 2 +- 12 files changed, 277 insertions(+), 59 deletions(-) create mode 100644 src/app/wallet/v2/views/trait_list.nim diff --git a/src/app/wallet/v2/views/asset_list.nim b/src/app/wallet/v2/views/asset_list.nim index f77410c21d..9c6654d81d 100644 --- a/src/app/wallet/v2/views/asset_list.nim +++ b/src/app/wallet/v2/views/asset_list.nim @@ -1,4 +1,5 @@ -import NimQml, Tables +import NimQml, Tables, strutils +import trait_list from status/wallet2 import OpenseaAsset type @@ -8,10 +9,17 @@ type Description = UserRole + 3, Permalink = UserRole + 4, ImageUrl = UserRole + 5, + BackgroundColor = UserRole + 6, + Properties = UserRole + 7, + Rankings = UserRole + 8, + Stats = UserRole + 9 QtObject: type AssetList* = ref object of QAbstractListModel assets*: seq[OpenseaAsset] + propertiesList*: TraitsList + rankingList*: TraitsList + statsList*: TraitsList proc setup(self: AssetList) = self.QAbstractListModel.setup @@ -22,6 +30,9 @@ QtObject: proc newAssetList*(): AssetList = new(result, delete) result.assets = @[] + result.propertiesList = newTraitsList() + result.rankingList = newTraitsList() + result.statsList = newTraitsList() result.setup proc assetsChanged*(self: AssetList) {.signal.} @@ -55,16 +66,33 @@ QtObject: of AssetRoles.Description: result = newQVariant(asset.description) of AssetRoles.Permalink: result = newQVariant(asset.permalink) of AssetRoles.ImageUrl: result = newQVariant(asset.imageUrl) + of AssetRoles.BackgroundColor: result = newQVariant(if (asset.backgroundColor == ""): "transparent" else: ("#" & asset.backgroundColor)) + of AssetRoles.Properties: + self.propertiesList.traits = @[] + self.propertiesList.traits = asset.properties + result = newQVariant(self.propertiesList) + of AssetRoles.Rankings: + self.rankingList.traits = @[] + self.rankingList.traits = asset.rankings + result = newQVariant(self.rankingList) + of AssetRoles.Stats: + self.statsList.traits = @[] + self.statsList.traits = asset.statistics + result = newQVariant(self.statsList) method roleNames(self: AssetList): Table[int, string] = { AssetRoles.Id.int:"id", AssetRoles.Name.int:"name", AssetRoles.Description.int:"description", AssetRoles.Permalink.int:"permalink", - AssetRoles.ImageUrl.int:"imageUrl"}.toTable + AssetRoles.ImageUrl.int:"imageUrl", + AssetRoles.BackgroundColor.int:"backgroundColor", + AssetRoles.Properties.int:"properties", + AssetRoles.Rankings.int:"rankings", + AssetRoles.Stats.int:"stats"}.toTable proc setData*(self: AssetList, assets: seq[OpenseaAsset]) = self.beginResetModel() self.assets = assets self.endResetModel() - self.assetsChanged() \ No newline at end of file + self.assetsChanged() diff --git a/src/app/wallet/v2/views/collection_list.nim b/src/app/wallet/v2/views/collection_list.nim index d24e0abeeb..ce2dfe5613 100644 --- a/src/app/wallet/v2/views/collection_list.nim +++ b/src/app/wallet/v2/views/collection_list.nim @@ -60,7 +60,11 @@ QtObject: CollectionRoles.ImageUrl.int:"imageUrl", CollectionRoles.OwnedAssetCount.int:"ownedAssetCount"}.toTable + proc getCollectionTraitMaxValue(self: CollectionList, index: int, traitType: string): int {.slot.} = + let collection = self.collections[index] + return int(collection.trait[traitType].max) + proc setData*(self: CollectionList, collections: seq[OpenseaCollection]) = self.beginResetModel() self.collections = collections - self.endResetModel() \ No newline at end of file + self.endResetModel() diff --git a/src/app/wallet/v2/views/trait_list.nim b/src/app/wallet/v2/views/trait_list.nim new file mode 100644 index 0000000000..340590e734 --- /dev/null +++ b/src/app/wallet/v2/views/trait_list.nim @@ -0,0 +1,49 @@ +import NimQml, Tables +from status/wallet2 import OpenseaTrait + +type + TraitRoles {.pure.} = enum + TraitType = UserRole + 1, + Value = UserRole + 2, + DisplayType = UserRole + 3, + MaxValue = UserRole + 4 + + +QtObject: + type TraitsList* = ref object of QAbstractListModel + traits*: seq[OpenseaTrait] + + proc setup(self: TraitsList) = self.QAbstractListModel.setup + + proc delete(self: TraitsList) = + self.traits = @[] + self.QAbstractListModel.delete + + proc newTraitsList*(): TraitsList = + new(result, delete) + result.traits = @[] + result.setup + + method rowCount*(self: TraitsList, index: QModelIndex = nil): int = + return self.traits.len + + method data(self: TraitsList, index: QModelIndex, role: int): QVariant = + if not index.isValid: + return + + if index.row < 0 or index.row >= self.traits.len: + return + + let trait = self.traits[index.row] + let traitRole = role.TraitRoles + case traitRole: + of TraitRoles.TraitType: result = newQVariant(trait.traitType) + of TraitRoles.Value: result = newQVariant(trait.value) + of TraitRoles.DisplayType: result = newQVariant(trait.displayType) + of TraitRoles.MaxValue: result = newQVariant(trait.maxValue) + + method roleNames(self: TraitsList): Table[int, string] = + { TraitRoles.TraitType.int:"traitType", + TraitRoles.Value.int:"value", + TraitRoles.DisplayType.int:"displayType", + TraitRoles.MaxValue.int:"maxValue"}.toTable diff --git a/ui/StatusQ b/ui/StatusQ index 718171fd7b..2bf1cae528 160000 --- a/ui/StatusQ +++ b/ui/StatusQ @@ -1 +1 @@ -Subproject commit 718171fd7b1de3e32aba06672621db75c1c5888a +Subproject commit 2bf1cae52833ae3cd8f6be8f939d53363a201452 diff --git a/ui/app/AppLayouts/WalletV2/CollectiblesTab.qml b/ui/app/AppLayouts/WalletV2/CollectiblesTab.qml index 386da6c9bb..eb8426392f 100644 --- a/ui/app/AppLayouts/WalletV2/CollectiblesTab.qml +++ b/ui/app/AppLayouts/WalletV2/CollectiblesTab.qml @@ -54,11 +54,6 @@ Item { } } - // To-do remove - CollectibleModal { - id: collectibleModalComponent - } - Component { id: loaded @@ -84,6 +79,7 @@ Item { expandableComponent: CollectibleCollection { slug: model.slug collectionImageUrl: model.imageUrl + collectionIndex: model.index } } } diff --git a/ui/app/AppLayouts/WalletV2/LeftTab.qml b/ui/app/AppLayouts/WalletV2/LeftTab.qml index d82f98022b..10efe64a24 100644 --- a/ui/app/AppLayouts/WalletV2/LeftTab.qml +++ b/ui/app/AppLayouts/WalletV2/LeftTab.qml @@ -18,6 +18,7 @@ Rectangle { } selectedAccount = newIndex walletV2Model.setCurrentAccountByIndex(newIndex) + collectiblesDetailPage.active = false } StyledText { diff --git a/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml b/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml index e24b766d8a..49a407cf74 100644 --- a/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml +++ b/ui/app/AppLayouts/WalletV2/WalletV2Layout.qml @@ -14,7 +14,8 @@ Item { property bool hideSignPhraseModal: false function openCollectibleDetailView(options) { - collectiblesDetailPage.show(options) + collectiblesDetailPage.active = true + collectiblesDetailPage.item.show(options) } function showSigningPhrasePopup(){ @@ -56,7 +57,7 @@ Item { WalletHeader { id: walletHeader changeSelectedAccount: leftTab.changeSelectedAccount - visible: !collectiblesDetailPage.visible + visible: !collectiblesDetailPage.active } RowLayout { @@ -69,7 +70,7 @@ Item { anchors.rightMargin: 0 anchors.top: walletHeader.bottom anchors.topMargin: 23 - visible: !collectiblesDetailPage.visible + visible: !collectiblesDetailPage.active Item { id: walletInfoContent @@ -124,10 +125,17 @@ Item { id: walletFooter anchors.bottom: parent.bottom } - - CollectibleDetailsPage { + + Loader { id: collectiblesDetailPage - anchors.fill: parent + anchors.bottom: walletFooter.top + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + active: false + sourceComponent: CollectibleDetailsPage { + anchors.fill: parent + } } } } diff --git a/ui/app/AppLayouts/WalletV2/components/CollectibleCollection.qml b/ui/app/AppLayouts/WalletV2/components/CollectibleCollection.qml index e62215445d..a012e854a8 100644 --- a/ui/app/AppLayouts/WalletV2/components/CollectibleCollection.qml +++ b/ui/app/AppLayouts/WalletV2/components/CollectibleCollection.qml @@ -11,6 +11,7 @@ Item { property string slug: "" property bool assetsLoaded: false property string collectionImageUrl: "" + property int collectionIndex: -1 signal clicked() @@ -69,6 +70,7 @@ Item { border.color: Theme.palette.baseColor2 border.width: 1 showLoadingIndicator: true + color: model.backgroundColor MouseArea { anchors.fill: parent onClicked: { @@ -77,7 +79,12 @@ Item { collectibleId: model.id, description: model.description, permalink: model.permalink, - imageUrl: model.imageUrl + imageUrl: model.imageUrl, + backgroundColor: model.backgroundColor, + properties: model.properties, + rankings: model.rankings, + stats: model.stats, + collectionIndex: root.collectionIndex }) } } diff --git a/ui/app/AppLayouts/WalletV2/components/CollectibleDetailsPage.qml b/ui/app/AppLayouts/WalletV2/components/CollectibleDetailsPage.qml index 48b4cd5835..a8245149bf 100644 --- a/ui/app/AppLayouts/WalletV2/components/CollectibleDetailsPage.qml +++ b/ui/app/AppLayouts/WalletV2/components/CollectibleDetailsPage.qml @@ -10,21 +10,34 @@ import StatusQ.Controls 0.1 Item { id: collectiblesDetailContainer - visible: false + property var assetProperties + property var assetRankings + property var assetStats + property int collectionIndex: -1 function show(options) { - visible = true - collectibleHeader.image.source = options.collectibleImageUrl collectibleHeader.primaryText = options.name collectibleHeader.secondaryText = options.collectibleId collectibleimage.image.source = options.imageUrl collectibleText.text = options.description + collectibleimage.color = options.backgroundColor + assetProperties = options.properties + assetRankings = options.rankings + assetStats = options.stats + collectionIndex = options.collectionIndex } function hide() { - visible = false + active = false + } + + function getCollectionMaxValue(traitType, value, maxValue) { + if(maxValue !== "") + return parseInt(value) + qsTr(" of ") + maxValue + else + return parseInt(value) + qsTr(" of ") + walletV2Model.collectiblesView.collections.getCollectionTraitMaxValue(collectionIndex, traitType).toString() } CollectibleDetailsHeader { @@ -51,7 +64,6 @@ Item { width: parent.width spacing: 24 - // To-do update color of background once design is finalized StatusRoundedImage { id: collectibleimage width: 253 @@ -76,54 +88,168 @@ Item { } } - Column { + ListView { anchors.top: collectibleImageDetails.bottom anchors.topMargin: 32 + anchors.bottom: parent.bottom + anchors.bottomMargin: 20 anchors.horizontalCenter: parent.horizontalCenter width: parent.width - StatusExpandableItem { + + clip: true + boundsBehavior: Flickable.StopAtBounds + model: 3 + delegate: StatusExpandableItem { width: parent.width + height: childrenRect.height anchors.horizontalCenter: parent.horizontalCenter - primaryText: qsTr("Properties") + primaryText: index === 0 ? qsTr("Properties") : index === 1 ? qsTr("Levels") : qsTr("Stats") type: StatusExpandableItem.Type.Tertiary - expandableComponent: notImplemented - } - StatusExpandableItem { - width: parent.width - anchors.horizontalCenter: parent.horizontalCenter - - primaryText: "Data group 2" - type: StatusExpandableItem.Type.Tertiary - expandableComponent: notImplemented - } - StatusExpandableItem { - width: parent.width - anchors.horizontalCenter: parent.horizontalCenter - - primaryText: "Data group 3" - type: StatusExpandableItem.Type.Tertiary - expandableComponent: notImplemented + expandableComponent: index === 0 ? properties : index === 1 ? rankings : stats + visible: index === 0 ? (!!assetProperties ? assetProperties.rowCount() !== 0 : false) : + index === 1 ? (!!assetRankings ? assetRankings.rowCount() !== 0 : false) : + (!!assetStats ? assetStats.rowCount() !== 0 : false) } } } Component { - id: notImplemented - Rectangle { - anchors.centerIn: parent + id: properties + + Flow { width: parent.width - height: infoText.implicitHeight - color: Theme.palette.baseColor5 - StatusBaseText { - id: infoText - anchors.centerIn: parent - color: Theme.palette.directColor4 - font.pixelSize: 15 - lineHeight: 22 - lineHeightMode: Text.FixedHeight - font.weight: Font.Medium - text: qsTr("Not Implemented") + spacing: 10 + + Repeater { + model: assetProperties + Rectangle { + id: containerRect + height: 52 + width: 147 + color: "transparent" + border.color: Theme.palette.baseColor2 + border.width: 1 + radius: 8 + Column { + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 6 + StatusBaseText { + width: containerRect.width - 12 + + color: Theme.palette.baseColor1 + font.pixelSize: 13 + lineHeight: 18 + lineHeightMode: Text.FixedHeight + elide: Text.ElideRight + horizontalAlignment: Text.AlignHCenter + text: model.traitType + font.capitalization: Font.Capitalize + } + StatusBaseText { + width: containerRect.width - 12 + + color: Theme.palette.directColor1 + font.pixelSize: 15 + lineHeight: 22 + lineHeightMode: Text.FixedHeight + horizontalAlignment: Text.AlignHCenter + elide: Text.ElideRight + text: model.value + } + } + } + } + } + } + + // To-do change to progress bar one design is finalized + Component { + id: rankings + + Column { + width: parent.width + spacing: 10 + + Repeater { + model: assetRankings + Rectangle { + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + height: 52 + color: Theme.palette.baseColor4 + StatusBaseText { + anchors.left: parent.left + anchors.leftMargin: 10 + anchors.verticalCenter: parent.verticalCenter + color: Theme.palette.baseColor1 + font.pixelSize: 15 + lineHeight: 22 + lineHeightMode: Text.FixedHeight + elide: Text.ElideRight + horizontalAlignment: Text.AlignLeft + text: model.traitType + font.capitalization: Font.Capitalize + } + StatusBaseText { + anchors.right: parent.right + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + color: Theme.palette.directColor1 + font.pixelSize: 15 + lineHeight: 22 + lineHeightMode: Text.FixedHeight + horizontalAlignment: Text.AlignLeft + elide: Text.ElideRight + text: collectiblesDetailContainer.getCollectionMaxValue(model.traitType, model.value, model.maxValue) + } + } + } + } + } + + // To-do change to progress bar one design is finalized + Component { + id: stats + + Column { + width: parent.width + spacing: 10 + + Repeater { + model: assetStats + Rectangle { + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + height: 52 + color: Theme.palette.baseColor4 + StatusBaseText { + anchors.left: parent.left + anchors.leftMargin: 10 + anchors.verticalCenter: parent.verticalCenter + color: Theme.palette.baseColor1 + font.pixelSize: 15 + lineHeight: 22 + lineHeightMode: Text.FixedHeight + elide: Text.ElideRight + horizontalAlignment: Text.AlignLeft + text: model.traitType + font.capitalization: Font.Capitalize + } + StatusBaseText { + anchors.right: parent.right + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + color: Theme.palette.directColor1 + font.pixelSize: 15 + lineHeight: 22 + lineHeightMode: Text.FixedHeight + horizontalAlignment: Text.AlignLeft + elide: Text.ElideRight + text: collectiblesDetailContainer.getCollectionMaxValue(model.traitType, model.value, model.maxValue) + } + } } } } diff --git a/ui/app/AppLayouts/WalletV2/components/qmldir b/ui/app/AppLayouts/WalletV2/components/qmldir index c603166900..291e6249e4 100644 --- a/ui/app/AppLayouts/WalletV2/components/qmldir +++ b/ui/app/AppLayouts/WalletV2/components/qmldir @@ -1,6 +1,5 @@ AddAccount 1.0 AddAccount.qml HeaderButton 1.0 HeaderButton.qml CollectibleCollection 1.0 CollectibleCollection.qml -CollectibleModal 1.0 CollectibleModal.qml AddAccountPopup 1.0 AddAccountPopup.qml CollectibleDetailsPage 1.0 CollectibleDetailsPage.qml diff --git a/vendor/status-go b/vendor/status-go index 07651d4d06..cf233861a5 160000 --- a/vendor/status-go +++ b/vendor/status-go @@ -1 +1 @@ -Subproject commit 07651d4d0696a2810666d49baaebcebc308c992a +Subproject commit cf233861a52bbe7c88b175ce5114f97cd21898f0 diff --git a/vendor/status-lib b/vendor/status-lib index 99b85d2063..12a8b59780 160000 --- a/vendor/status-lib +++ b/vendor/status-lib @@ -1 +1 @@ -Subproject commit 99b85d206381ac1654f4099d91c75640c5613c1a +Subproject commit 12a8b59780fa586663ec3414d904f5f822b63d86