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

feat(@desktop/wallet2): Added new Tab to display Collectibles 

New features added :
1. Tab which displays the collection
2. Page which display the details of the NFT

fixes #3306
This commit is contained in:
Khushboo Mehta 2021-09-08 11:14:02 +02:00 committed by Iuri Matias
parent 1db9e1b151
commit 06d7dbed95
6 changed files with 324 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui/app/AppLayouts/WalletV2/CollectiblesTab.qml
View File

@ -6,8 +6,10 @@ import "../../../shared"
import "../../../shared/status/core"
import "./components"
import StatusQ.Components 0.1
Item {
id: root
id: collectiblesTab
Loader {
id: contentLoader
@ -52,6 +54,7 @@ Item {
}
}
// To-do remove
CollectibleModal {
id: collectibleModalComponent
}
@ -65,32 +68,26 @@ Item {
Column {
id: collectiblesSection
spacing: Style.current.halfPadding
width: root.width
width: collectiblesTab.width
Repeater {
id: collectionsRepeater
model: walletV2Model.collectiblesView.collections
CollectibleCollection {
name: model.name
imageUrl: model.imageUrl
ownedAssetCount: model.ownedAssetCount
slug: model.slug
collectibleModal: collectibleModalComponent
anchors.left: parent.left
anchors.leftMargin: Style.current.bigPadding
anchors.right: parent.right
anchors.rightMargin: Style.current.bigPadding
StatusExpandableItem {
width: parent.width - 156
anchors.horizontalCenter: parent.horizontalCenter
primaryText: model.name
image.source: model.imageUrl
type: StatusExpandableItem.Type.Secondary
expandableComponent: CollectibleCollection {
slug: model.slug
collectionImageUrl: model.imageUrl
}
}
}
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;formeditorColor:"#ffffff";height:480;width:640}
}
##^##*/

12
ui/app/AppLayouts/WalletV2/WalletV2Layout.qml
View File

@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13
import "../../../imports"
import "../../../shared"
import "."
import "./components"
import StatusQ.Layout 0.1
@ -12,6 +13,10 @@ Item {
property bool hideSignPhraseModal: false
function openCollectibleDetailView(options) {
collectiblesDetailPage.show(options)
}
function showSigningPhrasePopup(){
if(!hideSignPhraseModal && !appSettings.hideSignPhraseModal){
signPhrasePopup.open();
@ -51,6 +56,7 @@ Item {
WalletHeader {
id: walletHeader
changeSelectedAccount: leftTab.changeSelectedAccount
visible: !collectiblesDetailPage.visible
}
RowLayout {
@ -63,6 +69,7 @@ Item {
anchors.rightMargin: 0
anchors.top: walletHeader.bottom
anchors.topMargin: 23
visible: !collectiblesDetailPage.visible
Item {
id: walletInfoContent
@ -117,6 +124,11 @@ Item {
id: walletFooter
anchors.bottom: parent.bottom
}
CollectibleDetailsPage {
id: collectiblesDetailPage
anchors.fill: parent
}
}
}
}

193
ui/app/AppLayouts/WalletV2/components/CollectibleCollection.qml
View File

@ -1,38 +1,21 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status/core"
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
Item {
id: root
property string imageUrl: ""
property string name: "CryptoKitties"
property string slug: "cryptokitties"
property int ownedAssetCount: 0
property var collectibleModal
property bool isOpened: false
property string slug: ""
property bool assetsLoaded: false
property string collectionImageUrl: ""
signal clicked()
width: parent.width
height: {
if (!isOpened) {
return header.height
}
return header.height + contentLoader.height
}
function toggleCollection() {
if (root.isOpened) {
root.isOpened = false
return
}
walletV2Model.collectiblesView.loadAssets(walletV2Model.accountsView.currentAccount.address, root.slug)
root.isOpened = true
}
height: contentLoader.height
Connections {
target: walletV2Model.collectiblesView.getAssetsList(root.slug)
@ -41,157 +24,69 @@ Item {
}
}
Rectangle {
id: header
property bool hovered: false
height: 64
width: parent.width
color: hovered ? Style.current.backgroundHover : Style.current.transparent
border.width: 0
radius: Style.current.radius
Image {
id: image
source: root.imageUrl
width: 40
height: 40
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
text: root.name
anchors.left: image.right
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 17
}
Item {
anchors.right: header.right
anchors.rightMargin: Style.current.padding
anchors.verticalCenter: header.verticalCenter
width: childrenRect.width
height: count.height
StyledText {
id: count
color: Style.current.secondaryText
text: root.ownedAssetCount
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
SVGImage {
id: caretImg
anchors.verticalCenter: parent.verticalCenter
source: "../../../img/caret.svg"
width: 11
anchors.left: count.right
anchors.leftMargin: Style.current.padding
fillMode: Image.PreserveAspectFit
}
ColorOverlay {
anchors.fill: caretImg
source: caretImg
color: Style.current.black
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
header.hovered = true
}
onExited: {
header.hovered = false
}
onClicked: {
root.toggleCollection()
}
}
}
Loader {
id: contentLoader
active: root.isOpened
width: parent.width
anchors.top: header.bottom
anchors.topMargin: Style.current.halfPadding
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
sourceComponent: root.assetsLoaded ? loaded : loading
}
Component {
id: loading
Item {
id: loadingIndicator
height: 164
StatusLoadingIndicator {
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
width: 20
height: 20
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
Component {
id: loaded
ScrollView {
height: contentRow.height
Flow {
width: parent.width
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
ScrollBar.horizontal.policy: ScrollBar.AsNeeded
clip: true
Row {
id: contentRow
bottomPadding: Style.current.padding
spacing: Style.current.padding
bottomPadding: 16
spacing: 24
Repeater {
model: walletV2Model.collectiblesView.getAssetsList(root.slug)
Item {
width: image.width
height: image.height
clip: true
RoundedImage {
id: image
width: 164
height: 164
border.width: 1
border.color: Style.current.border
radius: 16
source: model.imageUrl
fillMode: Image.PreserveAspectCrop
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
onClicked: {
collectibleModal.openModal({
name: model.name,
collectibleId: model.id,
description: model.description,
permalink: model.permalink,
imageUrl: model.imageUrl
})
}
Repeater {
model: walletV2Model.collectiblesView.getAssetsList(root.slug)
StatusRoundedImage {
id: image
width: 146
height: 146
radius: 16
image.source: model.imageUrl
border.color: Theme.palette.baseColor2
border.width: 1
showLoadingIndicator: true
MouseArea {
anchors.fill: parent
onClicked: {
openCollectibleDetailView({collectibleImageUrl:collectionImageUrl,
name: model.name,
collectibleId: model.id,
description: model.description,
permalink: model.permalink,
imageUrl: model.imageUrl
})
}
}
}
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:480;width:640}
Component.onCompleted: {
walletV2Model.collectiblesView.loadAssets(walletV2Model.accountsView.currentAccount.address, root.slug)
}
}
##^##*/

121
ui/app/AppLayouts/WalletV2/components/CollectibleDetailsHeader.qml Normal file
View File

@ -0,0 +1,121 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
Item {
id: collectiblesDetailHeader
property alias primaryText: collectibleName.text
property alias secondaryText: collectibleId.text
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
}
height: childrenRect.height
Layout.fillHeight: true
Layout.fillWidth: true
Row {
id: backButtonRow
anchors.top: parent.top
anchors.topMargin: 19
anchors.left: parent.left
spacing: 8
StatusIcon {
id: arrowIcon
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: -1
icon: "chevron-up"
rotation: 270
color: Theme.palette.primaryColor1
}
StatusBaseText {
anchors.verticalCenter: parent.verticalCenter
id: collectiblesText
font.weight: Font.Medium
font.pixelSize: 15
lineHeight: 22
lineHeightMode: Text.FixedHeight
color: Theme.palette.primaryColor1
text: qsTr("Collectibles")
}
}
MouseArea {
anchors.fill: backButtonRow
onClicked: {
hide()
}
}
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
}
StatusBaseText {
id: collectibleName
width: Math.min(parent.width - identiconLoader.width - collectibleId.width - 24, implicitWidth)
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 28
lineHeight: 38
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
color: Theme.palette.directColor1
}
StatusBaseText {
id: collectibleId
anchors.verticalCenter: collectibleName.verticalCenter
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");
}
}

130
ui/app/AppLayouts/WalletV2/components/CollectibleDetailsPage.qml Normal file
View File

@ -0,0 +1,130 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
Item {
id: collectiblesDetailContainer
visible: false
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
}
function hide() {
visible = false
}
CollectibleDetailsHeader {
id: collectibleHeader
anchors.right: parent.right
anchors.rightMargin: 79
anchors.left: parent.left
anchors.leftMargin: 79
anchors.top: parent.top
}
Item {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.leftMargin: 83
anchors.right: parent.right
anchors.rightMargin: 78
anchors.top: collectibleHeader.bottom
anchors.topMargin: 46
Row {
id: collectibleImageDetails
anchors.top: parent.top
width: parent.width
spacing: 24
// To-do update color of background once design is finalized
StatusRoundedImage {
id: collectibleimage
width: 253
height: 253
radius: 2
color: "transparent"
border.color: Theme.palette.directColor8
border.width: 1
}
StatusBaseText {
id: collectibleText
width: parent.width - collectibleimage.width - 24
height: collectibleimage.height
text: qsTr("Collectibles")
color: Theme.palette.directColor1
font.pixelSize: 15
lineHeight: 22
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
wrapMode: Text.Wrap
}
}
Column {
anchors.top: collectibleImageDetails.bottom
anchors.topMargin: 32
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
StatusExpandableItem {
width: parent.width
anchors.horizontalCenter: parent.horizontalCenter
primaryText: qsTr("Properties")
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
}
}
}
Component {
id: notImplemented
Rectangle {
anchors.centerIn: parent
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")
}
}
}
}

1
ui/app/AppLayouts/WalletV2/components/qmldir
View File

@ -3,3 +3,4 @@ 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