status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

fixes #6492
This commit is contained in:
Khushboo Mehta 2022-07-28 22:56:44 +02:00 committed by Khushboo-dev-cpp
parent 92c1e9ce18
commit e5358bf29a
11 changed files with 146 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/modules/main/wallet_section/collectibles/collectibles/item.nim
View File

@ -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

2
src/app_service/service/collectible/dto.nim
View File

@ -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]()

8
ui/app/AppLayouts/Profile/views/wallet/AccountView.qml
View File

@ -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 {

75
ui/app/AppLayouts/Wallet/controls/CollectibleDetailsHeader.qml
View File

@ -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 {
id: collectiblesDetailHeader
height: childrenRect.height
ColumnLayout {
id: root
signal goBack()
property alias primaryText: collectibleName.text
property alias secondaryText: collectibleId.text
@ -17,68 +19,43 @@ Item {
width: 40
height: 40
}
signal hideButtonClicked()
Row {
id: collectibleRow
anchors.top: parent.top
anchors.topMargin: 63
anchors.left: parent.left
width: parent.width - sendButton.width
spacing: 8
Loader {
id: identiconLoader
anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!collectiblesDetailHeader.image.source.toString() ? roundedImage : statusLetterIdenticonCmp
StatusFlatButton {
Layout.topMargin: -Style.current.xlPadding
Layout.leftMargin: -Style.current.xlPadding
visible: root.backButtonName != ""
icon.name: "arrow-left"
icon.width: 20
icon.height: 20
text: qsTr("Assets")
size: StatusBaseButton.Size.Large
onClicked: root.goBack()
}
RowLayout {
spacing: 8
StatusSmartIdenticon {
id: identiconLoader
Layout.alignment: Qt.AlignVCenter
image: root.image
}
StatusBaseText {
id: collectibleName
width: Math.min(parent.width - identiconLoader.width - collectibleId.width - 24, implicitWidth)
anchors.verticalCenter: parent.verticalCenter
Layout.preferredWidth: Math.min(root.width - identiconLoader.width - collectibleId.width - 24, implicitWidth)
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"); }
}
}

1
ui/app/AppLayouts/Wallet/views/CollectiblesView.qml
View File

@ -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: {

29
ui/app/AppLayouts/Wallet/views/RightTabView.qml
View File

@ -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
@ -25,6 +20,13 @@ Item {
ColumnLayout {
anchors.fill: parent
StackLayout {
id: stack
Layout.fillWidth: true
Layout.preferredHeight: parent.height - footer.height
ColumnLayout {
anchors.fill: parent
WalletHeader {
Layout.fillWidth: true
Layout.leftMargin: Style.current.padding
@ -35,7 +37,6 @@ Item {
store: root.store
walletStore: RootStore
}
StatusTabBar {
id: walletTabBar
horizontalPadding: Style.current.padding
@ -57,7 +58,6 @@ Item {
text: qsTr("Activity")
}
}
StackLayout {
Layout.fillWidth: true
Layout.fillHeight: true
@ -67,13 +67,24 @@ Item {
AssetsView {
account: RootStore.currentAccount
}
CollectiblesView {}
CollectiblesView {
onCollectibleClicked: {
stack.currentIndex = 1
}
}
HistoryView {
account: RootStore.currentAccount
}
}
}
CollectibleDetailView {
anchors.fill: parent
onGoBack: stack.currentIndex = 0
}
}
WalletFooter {
id: footer
Layout.fillWidth: true
Layout.leftMargin: -root.StackView.view.anchors.leftMargin
Layout.rightMargin: -root.StackView.view.anchors.rightMargin

12
ui/app/AppLayouts/Wallet/views/collectibles/CollectibleCollectionView.qml
View File

@ -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;

194
ui/app/AppLayouts/Wallet/views/collectibles/CollectibleDetailView.qml
View File

@ -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
property var assetRankings: RootStore.collectiblesStore.rankings
property var assetProperties: RootStore.collectiblesStore.properties
property int collectionIndex: RootStore.collectiblesStore.collectionIndex
signal goBack()
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 {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
ColumnLayout {
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
width: parent.width
Layout.preferredWidth: 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 {
anchors.top: collectibleImageDetails.bottom
anchors.topMargin: 32
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
model: 3
delegate: StatusExpandableItem {
width: parent.width
height: childrenRect.height
anchors.horizontalCenter: parent.horizontalCenter
StatusTabBar {
id: collectiblesDetailsTab
Layout.fillWidth: true
Layout.topMargin: Style.current.xlPadding
visible: RootStore.collectiblesStore.properties.count > 0
primaryText: index === 0 ? qsTr("Properties") : index === 1 ? qsTr("Levels") : qsTr("Stats")
type: StatusExpandableItem.Type.Tertiary
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)
}
StatusTabButton {
leftPadding: 0
width: implicitWidth
text: qsTr("Properties")
}
}
Component {
id: properties
StackLayout {
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)
model: RootStore.collectiblesStore.properties
InformationTile {
maxWidth: parent.width
primaryText: model.traitType
secondaryText: model.value
}
}
}

2
ui/app/AppLayouts/Profile/controls/InformationTile.qml → ui/imports/shared/controls/InformationTile.qml
View File

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

1
ui/imports/shared/controls/qmldir
View File

@ -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

2
vendor/status-go vendored

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