fix(@desktop/wallet): Implements basic collectible view

fixes #6492

src/app/modules/main/wallet_section/collectibles/collectibles/item.nim

@@ -27,7 +27,9 @@ proc initTrait*(
 type
   Item* = object
     id: int
-    name, imageUrl, backgroundColor: string
+    name: string
+    imageUrl: string
+    backgroundColor: string
     description: string
     permalink: string
     properties: seq[Trait]
@@ -49,6 +51,7 @@ proc initItem*(
   result.name = name
   result.imageUrl = imageUrl
   result.backgroundColor = if (backgroundColor == ""): "transparent" else: ("#" & backgroundColor)
+  result.description = description
   result.permalink = permalink
   result.properties = properties
   result.rankings = rankings

src/app_service/service/collectible/dto.nim

@@ -33,7 +33,7 @@ proc `$`*(self: CollectionDto): string =
   return fmt"CollectionDto(name:{self.name}, slug:{self.slug}, owned asset count:{self.ownedAssetCount})"
 
 proc `$`*(self: CollectibleDto): string =
-  return fmt"CollectibleDto(id:{self.id}, name:{self.name}, address:{self.address}, imageUrl: {self.imageUrl}, imageThumbnailUrl: {self.imageThumbnailUrl}, backgroundColor: {self.backgroundColor})"
+  return fmt"CollectibleDto(id:{self.id}, name:{self.name}, description:{self.description}, permalink:{self.permalink}, address:{self.address}, imageUrl: {self.imageUrl}, imageThumbnailUrl: {self.imageThumbnailUrl}, backgroundColor: {self.backgroundColor})"
 
 proc getCollectionTraits*(jsonCollection: JsonNode): Table[string, CollectionTrait] =
     var traitList: Table[string, CollectionTrait] = initTable[string, CollectionTrait]()

ui/app/AppLayouts/Profile/views/wallet/AccountView.qml

@@ -1,16 +1,18 @@
 import QtQuick 2.13
 
-import shared.status 1.0
+
-import shared.popups 1.0
 import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
 import StatusQ.Components 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1
+
 import utils 1.0
+import shared.status 1.0
+import shared.popups 1.0
+import shared.controls 1.0
 
 import "../../stores"
-import "../../controls"
 import "../../popups"
 
 Item {

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

@@ -1,15 +1,17 @@
 import QtQuick 2.13
-import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
+import utils 1.0
+
 import StatusQ.Components 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core 0.1
 import StatusQ.Controls 0.1
 
-Item {
+ColumnLayout {
-    id: collectiblesDetailHeader
+    id: root
-    height: childrenRect.height
+
+    signal goBack()
 
     property alias primaryText: collectibleName.text
     property alias secondaryText: collectibleId.text
@@ -17,68 +19,43 @@ Item {
         width: 40
         height: 40
     }
-    signal hideButtonClicked()
 
-    Row {
+    StatusFlatButton {
-        id: collectibleRow
+        Layout.topMargin: -Style.current.xlPadding
-        anchors.top: parent.top
+        Layout.leftMargin: -Style.current.xlPadding
-        anchors.topMargin: 63
+        visible: root.backButtonName != ""
-        anchors.left: parent.left
+        icon.name: "arrow-left"
-        width: parent.width - sendButton.width
+        icon.width: 20
+        icon.height: 20
+        text: qsTr("Assets")
+        size: StatusBaseButton.Size.Large
+        onClicked: root.goBack()
+    }
 
+    RowLayout {
         spacing: 8
-
+        StatusSmartIdenticon {
-        Loader {
             id: identiconLoader
-            anchors.verticalCenter: parent.verticalCenter
+            Layout.alignment: Qt.AlignVCenter
-            sourceComponent: !!collectiblesDetailHeader.image.source.toString() ? roundedImage : statusLetterIdenticonCmp
+            image: root.image
         }
-
         StatusBaseText {
             id: collectibleName
-            width: Math.min(parent.width - identiconLoader.width - collectibleId.width - 24, implicitWidth)
+            Layout.preferredWidth: Math.min(root.width - identiconLoader.width - collectibleId.width - 24, implicitWidth)
-            anchors.verticalCenter: parent.verticalCenter
+            Layout.alignment: Qt.AlignVCenter
             font.pixelSize: 28
             lineHeight: 38
             lineHeightMode: Text.FixedHeight
             elide: Text.ElideRight
             color: Theme.palette.directColor1
         }
-
         StatusBaseText {
             id: collectibleId
-            anchors.verticalCenter: collectibleName.verticalCenter
+            Layout.alignment: Qt.AlignVCenter
             font.pixelSize: 28
             lineHeight: 38
             lineHeightMode: Text.FixedHeight
             color: Theme.palette.baseColor1
         }
     }
-
-    Component {
-        id: roundedImage
-        StatusRoundedImage {
-            image.source: collectiblesDetailHeader.image.source
-        }
-    }
-
-    Component {
-        id: statusLetterIdenticonCmp
-        StatusLetterIdenticon {
-            width: 40
-            height: 40
-            letterSize: 20
-            color: Theme.palette.miscColor5
-            name: collectibleName.text
-        }
-    }
-
-    StatusButton {
-        id: sendButton
-        anchors.bottom: collectibleRow.bottom
-        anchors.right: parent.right
-        icon.name: "send"
-        text: qsTr("Send")
-        onClicked: { console.log("TODO"); }
-    }
 }

ui/app/AppLayouts/Wallet/views/CollectiblesView.qml

@@ -65,6 +65,7 @@ Item {
                         type: StatusExpandableItem.Type.Secondary
                         expandableComponent:  CollectibleCollectionView {
                             slug: model.slug
+                            collectionImageUrl: model.imageUrl
                             anchors.left: parent.left
                             anchors.right: parent.right
                             onCollectibleClicked: {

ui/app/AppLayouts/Wallet/views/RightTabView.qml

@@ -1,19 +1,14 @@
 import QtQuick 2.13
-import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import StatusQ.Controls 0.1
 
 import utils 1.0
-
-import shared 1.0
-import shared.controls 1.0
 import shared.views 1.0
 
-import "../controls"
 import "../stores"
-import "../views"
 import "../panels"
+import "../views/collectibles"
 
 Item {
     id: root
@@ -23,57 +18,73 @@ Item {
     property var sendModal
 
     ColumnLayout {
-       anchors.fill: parent
+        anchors.fill: parent
-
-        WalletHeader {
-            Layout.fillWidth: true
-            Layout.leftMargin: Style.current.padding
-            Layout.rightMargin: Style.current.padding
-            locale: RootStore.locale
-            currency: RootStore.currentCurrency
-            currentAccount: RootStore.currentAccount
-            store: root.store
-            walletStore: RootStore
-        }
-
-        StatusTabBar {
-            id: walletTabBar
-            horizontalPadding: Style.current.padding
-            Layout.fillWidth: true
-            Layout.topMargin: Style.current.padding
-
-            StatusTabButton {
-                leftPadding: 0
-                width: implicitWidth
-                text: qsTr("Assets")
-            }
-            StatusTabButton {
-                width: implicitWidth
-                text: qsTr("Collectibles")
-            }
-            StatusTabButton {
-                rightPadding: 0
-                width: implicitWidth
-                text: qsTr("Activity")
-            }
-        }
 
         StackLayout {
+            id: stack
             Layout.fillWidth: true
-            Layout.fillHeight: true
+            Layout.preferredHeight: parent.height - footer.height
-            Layout.margins: Style.current.padding
-            currentIndex: walletTabBar.currentIndex
 
-            AssetsView {
+            ColumnLayout {
-                account: RootStore.currentAccount
+                anchors.fill: parent
+                WalletHeader {
+                    Layout.fillWidth: true
+                    Layout.leftMargin: Style.current.padding
+                    Layout.rightMargin: Style.current.padding
+                    locale: RootStore.locale
+                    currency: RootStore.currentCurrency
+                    currentAccount: RootStore.currentAccount
+                    store: root.store
+                    walletStore: RootStore
+                }
+                StatusTabBar {
+                    id: walletTabBar
+                    horizontalPadding: Style.current.padding
+                    Layout.fillWidth: true
+                    Layout.topMargin: Style.current.padding
+
+                    StatusTabButton {
+                        leftPadding: 0
+                        width: implicitWidth
+                        text: qsTr("Assets")
+                    }
+                    StatusTabButton {
+                        width: implicitWidth
+                        text: qsTr("Collectibles")
+                    }
+                    StatusTabButton {
+                        rightPadding: 0
+                        width: implicitWidth
+                        text: qsTr("Activity")
+                    }
+                }
+                StackLayout {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    Layout.margins: Style.current.padding
+                    currentIndex: walletTabBar.currentIndex
+
+                    AssetsView {
+                        account: RootStore.currentAccount
+                    }
+                    CollectiblesView {
+                        onCollectibleClicked: {
+                            stack.currentIndex = 1
+                        }
+                    }
+                    HistoryView {
+                        account: RootStore.currentAccount
+                    }
+                }
             }
-            CollectiblesView {}
+            CollectibleDetailView {
-            HistoryView {
+                anchors.fill: parent
-                account: RootStore.currentAccount
+                onGoBack: stack.currentIndex = 0
             }
         }
 
         WalletFooter {
+            id: footer
             Layout.fillWidth: true
             Layout.leftMargin: -root.StackView.view.anchors.leftMargin
             Layout.rightMargin: -root.StackView.view.anchors.rightMargin

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

@@ -98,8 +98,20 @@ Item {
                     border.width: 1
                     showLoadingIndicator: true
                     color: model.backgroundColor
+                    Rectangle {
+                        anchors.centerIn: parent
+                        width: image.width
+                        height: image.height
+                        radius: image.radius
+                        border.width: 1
+                        border.color: Theme.palette.primaryColor1
+                        color: Theme.palette.indirectColor3
+                        visible: mouse.containsMouse
+                    }
                     MouseArea {
+                        id: mouse
                         anchors.fill: parent
+                        hoverEnabled: true
                         onClicked: {
                             RootStore.collectiblesStore.collectibleImageUrl = collectionImageUrl;
                             RootStore.collectiblesStore.name =  model.name;

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

@@ -1,5 +1,4 @@
 import QtQuick 2.13
-import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
 import StatusQ.Components 0.1
@@ -7,39 +6,40 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Core 0.1
 import StatusQ.Controls 0.1
 
-import "../"
+import utils 1.0
+import shared.controls 1.0
+
 import "../../stores"
 import "../../controls"
 
-StackDetailBase {
+Item {
     id: root
-    backButtonText: "Collectibles"
 
-    property var assetStats: RootStore.collectiblesStore.stats
+    signal goBack()
-    property var assetRankings: RootStore.collectiblesStore.rankings
-    property var assetProperties: RootStore.collectiblesStore.properties
-    property int collectionIndex: RootStore.collectiblesStore.collectionIndex
 
     CollectibleDetailsHeader {
         id: collectibleHeader
+        anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
         image.source: RootStore.collectiblesStore.collectibleImageUrl
         primaryText: RootStore.collectiblesStore.name
         secondaryText: RootStore.collectiblesStore.collectibleId
+        onGoBack: root.goBack()
     }
 
-    Item {
+    ColumnLayout {
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
         anchors.top: collectibleHeader.bottom
         anchors.topMargin: 46
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+
+        spacing: Style.current.padding
 
         Row {
             id: collectibleImageDetails
-            anchors.top: parent.top
+            Layout.preferredWidth: parent.width
-            width: parent.width
             spacing: 24
 
             StatusRoundedImage {
@@ -54,7 +54,7 @@ StackDetailBase {
             }
             StatusBaseText {
                 id: collectibleText
-                width: parent.width - collectibleimage.width - 24
+                width: parent.width - collectibleimage.width - Style.current.bigPadding
                 height: collectibleimage.height
 
                 text: RootStore.collectiblesStore.description
@@ -67,163 +67,29 @@ StackDetailBase {
             }
         }
 
-        StatusListView {
+        StatusTabBar {
-            anchors.top: collectibleImageDetails.bottom
+            id: collectiblesDetailsTab
-            anchors.topMargin: 32
+            Layout.fillWidth: true
-            anchors.bottom: parent.bottom
+            Layout.topMargin: Style.current.xlPadding
-            anchors.bottomMargin: 20
+            visible: RootStore.collectiblesStore.properties.count > 0
-            anchors.horizontalCenter: parent.horizontalCenter
+
-            width: parent.width
+            StatusTabButton {
-            model: 3
+                leftPadding: 0
-            delegate: StatusExpandableItem {
+                width: implicitWidth
+                text: qsTr("Properties")
+            }
+        }
+
+        StackLayout {
+            Flow {
                 width: parent.width
-                height: childrenRect.height
+                spacing: 10
-                anchors.horizontalCenter: parent.horizontalCenter
+                Repeater {
-
+                    model: RootStore.collectiblesStore.properties
-                primaryText: index === 0 ? qsTr("Properties") : index === 1 ? qsTr("Levels") : qsTr("Stats")
+                    InformationTile {
-                type: StatusExpandableItem.Type.Tertiary
+                        maxWidth: parent.width
-                expandableComponent: index === 0 ? properties : index === 1 ? rankings : stats
+                        primaryText: model.traitType
-                visible: index === 0 ? (!!assetProperties ? assetProperties.rowCount() !== 0 : false) :
+                        secondaryText: model.value
-                         index === 1 ? (!!assetRankings ? assetRankings.rowCount() !== 0 : false) :
-                                       (!!assetStats ? assetStats.rowCount() !== 0 : false)
-            }
-        }
-    }
-
-    Component {
-        id: properties
-
-        Flow {
-            width: parent.width
-            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: RootStore.getCollectionMaxValue(model.traitType, model.value, model.maxValue, collectionIndex)
-                    }
-                }
-            }
-        }
-    }
-
-    // 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: RootStore.getCollectionMaxValue(model.traitType, model.value, model.maxValue, collectionIndex)
                     }
                 }
             }

ui/imports/shared/controls/InformationTile.qml

@@ -25,7 +25,7 @@ Rectangle {
 
     ColumnLayout {
         id: layout
-        spacing: -1
+        spacing: 0
         anchors.centerIn: parent
         StatusBaseText {
             id: primaryText

ui/imports/shared/controls/qmldir

@@ -25,3 +25,4 @@ Timer 1.0 Timer.qml
 TransactionDelegate 1.0 TransactionDelegate.qml
 TransactionFormGroup 1.0 TransactionFormGroup.qml
 EmojiHash 1.0 EmojiHash.qml
+InformationTile 1.0 InformationTile.qml

vendor/status-go

@@ -1 +1 @@
-Subproject commit 19807ce338d7e5965f4faa068821995da6f0c34d
+Subproject commit 6967732a06596dfdbd2c198d3d71647bc50664d8