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 {

71
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
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
Loader {
StatusSmartIdenticon {
id: identiconLoader
anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!collectiblesDetailHeader.image.source.toString() ? roundedImage : statusLetterIdenticonCmp
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: {

107
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
@ -23,57 +18,73 @@ Item {
property var sendModal
ColumnLayout {
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")
}
}
anchors.fill: parent
StackLayout {
id: stack
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: Style.current.padding
currentIndex: walletTabBar.currentIndex
Layout.preferredHeight: parent.height - footer.height
AssetsView {
account: RootStore.currentAccount
ColumnLayout {
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 {}
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;

208
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 {
StatusTabBar {
id: collectiblesDetailsTab
Layout.fillWidth: true
Layout.topMargin: Style.current.xlPadding
visible: RootStore.collectiblesStore.properties.count > 0
StatusTabButton {
leftPadding: 0
width: implicitWidth
text: qsTr("Properties")
}
}
StackLayout {
Flow {
width: parent.width
height: childrenRect.height
anchors.horizontalCenter: parent.horizontalCenter
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)
}
}
}
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)
spacing: 10
Repeater {
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