feat(@desktop/wallet): Main Collectible Detail View enhancements
fixes #13804
This commit is contained in:
Khushboo Mehta
Khushboo-dev-cpp
parent
611d70a3b2
commit
2f0343f0e9
|
|
@ -242,7 +242,7 @@ QtObject:
|
|||
notify = ownershipChanged
|
||||
|
||||
proc communityIdChanged*(self: CollectiblesEntry) {.signal.}
|
||||
proc getCommunityID*(self: CollectiblesEntry): string {.slot.} =
|
||||
proc getCommunityId*(self: CollectiblesEntry): string {.slot.} =
|
||||
if not self.hasCommunityData():
|
||||
return ""
|
||||
return self.getCommunityData().id
|
||||
|
|
|
|||
|
|
@ -86,12 +86,20 @@ SplitView {
|
|||
return "NAMEFOR: %1".arg(address)
|
||||
}
|
||||
|
||||
function getExplorerNameForNetwork(networkName) {
|
||||
return qsTr("%1 Explorer").arg(networkName)
|
||||
}
|
||||
|
||||
readonly property bool showAllAccounts: true
|
||||
}
|
||||
communitiesStore: QtObject {
|
||||
function getCommunityDetailsAsJson(communityId) {
|
||||
return ""
|
||||
}
|
||||
return {
|
||||
name : "Mock Community",
|
||||
image : Style.png("tokens/UNI"),
|
||||
color : "orchid"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Component.onCompleted: viewLoader.active = true
|
||||
|
|
|
|||
|
|
@ -241,6 +241,24 @@ ListModel {
|
|||
networkShortName: "OPT",
|
||||
networkColor: "red",
|
||||
networkIconUrl: ModelsData.networks.optimism
|
||||
},
|
||||
{
|
||||
uid: "ID-Community1",
|
||||
chainId: 1,
|
||||
contractAddress: "0x06",
|
||||
tokenId: "406",
|
||||
name: "Community Admin Token",
|
||||
imageUrl: ModelsData.collectibles.mana,
|
||||
backgroundColor: "transparent",
|
||||
description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
|
||||
collectionUid: "community-uid-1",
|
||||
collectionName: "",
|
||||
collectionImageUrl: "",
|
||||
traits: [],
|
||||
communityId: "community-id-1",
|
||||
networkShortName: "OPT",
|
||||
networkColor: "red",
|
||||
networkIconUrl: ModelsData.networks.optimism
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -10412,5 +10412,7 @@
|
|||
<file>assets/img/icons/caution.svg</file>
|
||||
<file>assets/img/icons/crown-off.svg</file>
|
||||
<file>assets/img/icons/xtwitter.svg</file>
|
||||
<file>assets/img/icons/tiny/folder.svg</file>
|
||||
<file>assets/img/icons/tiny/profile.svg</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.5668 13.9999C17.6713 13.9999 18.4399 14.6594 18.2834 15.4729C18.1269 16.2864 17.1046 16.9459 16 16.9459C14.8954 16.9459 14.1269 16.2864 14.2834 15.4729C14.4399 14.6594 15.4622 13.9999 16.5668 13.9999Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.51675 14.445L2.989 17.5934C3.28272 19.5514 4.96476 21 6.94475 21H17.0553C19.0352 21 20.7173 19.5514 21.011 17.5934L21.4832 14.445C21.7553 12.6312 20.3505 11 18.5164 11H5.48356C3.64946 11 2.24468 12.6312 2.51675 14.445ZM4.88662 15.7182C4.58269 15.8701 4.21896 15.6812 4.16855 15.3451L4.00016 14.2225C3.86412 13.3156 4.56651 12.5 5.48356 12.5H18.5164C19.4335 12.5 20.1359 13.3156 19.9998 14.2225L19.5276 17.3709C19.344 18.5947 18.2927 19.5 17.0553 19.5H16.0246C15.9235 19.5 15.8247 19.4693 15.7413 19.412L8.91101 14.7162C8.38614 14.3553 7.70666 14.3081 7.13696 14.593L4.88662 15.7182ZM4.63557 17.9589C4.54655 17.7443 4.6603 17.5084 4.8681 17.4045L7.80778 15.9346C7.88916 15.8939 7.98623 15.9007 8.06121 15.9522L11.895 18.588C12.2997 18.8662 12.1028 19.5 11.6118 19.5H6.94475C5.91552 19.5 5.0151 18.8737 4.63557 17.9589Z" fill="black"/>
|
||||
<path d="M4.36256 8.63874C4.43057 9.0922 4.07938 9.5 3.62085 9.5C3.24961 9.5 2.93422 9.2284 2.87915 8.86126L2.51672 6.44502C2.24464 4.63121 3.64942 3 5.48353 3H18.5164C20.3505 3 21.7553 4.63121 21.4832 6.44502L21.1208 8.86126C21.0657 9.2284 20.7503 9.5 20.3791 9.5C19.9205 9.5 19.5694 9.0922 19.6374 8.63875L19.9998 6.22251C20.1358 5.31561 19.4335 4.5 18.5164 4.5H5.48353C4.56647 4.5 3.86409 5.3156 4.00012 6.22251L4.36256 8.63874Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13C13.933 13 15.5 11.433 15.5 9.5C15.5 7.567 13.933 6 12 6C10.067 6 8.5 7.567 8.5 9.5C8.5 11.433 10.067 13 12 13ZM12 11.5C13.1046 11.5 14 10.6046 14 9.5C14 8.39543 13.1046 7.5 12 7.5C10.8954 7.5 10 8.39543 10 9.5C10 10.6046 10.8954 11.5 12 11.5Z" fill="black"/>
|
||||
<path d="M16.4465 16.2731C16.8119 16.5572 16.822 17.0954 16.4657 17.3909C16.1611 17.6435 15.723 17.6 15.4043 17.3655C14.4513 16.6643 13.2741 16.25 12.0002 16.25C10.7262 16.25 9.54901 16.6643 8.59597 17.3655C8.27728 17.6 7.83919 17.6435 7.53463 17.3909C7.17828 17.0954 7.18836 16.5572 7.55383 16.2731C8.78161 15.3185 10.3245 14.75 12.0002 14.75C13.6758 14.75 15.2187 15.3185 16.4465 16.2731Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -12,76 +12,80 @@ import shared.controls 1.0
|
|||
|
||||
ColumnLayout {
|
||||
id: root
|
||||
property alias primaryText: collectibleName.text
|
||||
property string secondaryText
|
||||
property bool isNarrowMode
|
||||
|
||||
property alias collectibleName: collectibleName.text
|
||||
property alias collectibleId: collectibleId.text
|
||||
property alias collectionTag: collectionTag
|
||||
property string isCollection
|
||||
|
||||
property string communityImage
|
||||
property string networkShortName
|
||||
property string networkColor
|
||||
property string networkIconURL
|
||||
property string networkExplorerName
|
||||
|
||||
property StatusAssetSettings asset: StatusAssetSettings {
|
||||
readonly property int size: root.isNarrowMode ? 24 : 38
|
||||
width: size
|
||||
height: size
|
||||
isImage: true
|
||||
}
|
||||
|
||||
Component {
|
||||
id: collectibleIdComponent
|
||||
StatusBaseText {
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
font.pixelSize: isNarrowMode ? 15 : 22
|
||||
lineHeight: isNarrowMode ? 22 : 30
|
||||
lineHeightMode: Text.FixedHeight
|
||||
elide: Text.ElideRight
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
signal collectionTagClicked()
|
||||
signal openCollectibleExternally()
|
||||
signal openCollectibleOnExplorer()
|
||||
|
||||
RowLayout {
|
||||
StatusSmartIdenticon {
|
||||
id: identiconLoader
|
||||
asset: root.asset
|
||||
RowLayout {
|
||||
StatusBaseText {
|
||||
id: collectibleName
|
||||
|
||||
font.pixelSize: 22
|
||||
lineHeight: 30
|
||||
lineHeightMode: Text.FixedHeight
|
||||
elide: Text.ElideRight
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
StatusBaseText {
|
||||
id: collectibleId
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
font.pixelSize: 22
|
||||
lineHeight: 30
|
||||
lineHeightMode: Text.FixedHeight
|
||||
elide: Text.ElideRight
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: collectibleName
|
||||
Item{Layout.fillWidth: true}
|
||||
|
||||
font.pixelSize: 22
|
||||
lineHeight: 30
|
||||
lineHeightMode: Text.FixedHeight
|
||||
elide: Text.ElideRight
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: collectibleIdTopRow
|
||||
sourceComponent: collectibleIdComponent
|
||||
visible: !root.isNarrowMode
|
||||
Layout.fillWidth: true
|
||||
|
||||
Binding {
|
||||
target: collectibleIdTopRow.item
|
||||
property: "text"
|
||||
value: root.secondaryText
|
||||
RowLayout {
|
||||
spacing: 12
|
||||
StatusButton {
|
||||
size: StatusBaseButton.Size.Small
|
||||
text: root.networkExplorerName
|
||||
icon.name: "external"
|
||||
asset.emoji: d.effectiveEmoji
|
||||
onClicked: root.openCollectibleOnExplorer()
|
||||
}
|
||||
StatusButton {
|
||||
size: StatusBaseButton.Size.Small
|
||||
text: "OpenSea"
|
||||
icon.name: "external"
|
||||
asset.emoji: d.effectiveEmoji
|
||||
onClicked: root.openCollectibleExternally()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.leftMargin: root.isNarrowMode ? 0 : 48
|
||||
spacing: 10
|
||||
|
||||
Loader {
|
||||
id: collectibleIdBottomRow
|
||||
sourceComponent: collectibleIdComponent
|
||||
visible: root.isNarrowMode
|
||||
Layout.maximumWidth: root.width - parent.spacing - networkTag.width
|
||||
|
||||
Binding {
|
||||
target: collectibleIdBottomRow.item
|
||||
property: "text"
|
||||
value: root.secondaryText
|
||||
InformationTag {
|
||||
id: collectionTag
|
||||
asset.name: !!root.communityImage ? root.communityImage: !sensor.containsMouse ? root.isCollection ? "tiny/folder" : "tiny/profile" : "tiny/external"
|
||||
asset.isImage: !!root.communityImage
|
||||
MouseArea {
|
||||
id: sensor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
root.collectionTagClicked()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -487,4 +487,26 @@ QtObject {
|
|||
function addressWasShown(address) {
|
||||
return root.mainModuleInst.addressWasShown(address)
|
||||
}
|
||||
|
||||
function getExplorerUrl() {
|
||||
let link = Constants.networkExplorerLinks.etherscan
|
||||
if (root.areTestNetworksEnabled) {
|
||||
if (root.isGoerliEnabled) {
|
||||
link = Constants.networkExplorerLinks.sepoliaEtherscan
|
||||
} else {
|
||||
link = Constants.networkExplorerLinks.goerliEtherscan
|
||||
}
|
||||
}
|
||||
return link
|
||||
}
|
||||
|
||||
function getExplorerNameForNetwork(networkShortName) {
|
||||
if (networkShortName === Constants.networkShortChainNames.arbiscan) {
|
||||
return qsTr("Arbiscan Explorer")
|
||||
}
|
||||
if (networkShortName === Constants.networkShortChainNames.optimism) {
|
||||
return qsTr("Optimism Explorer")
|
||||
}
|
||||
return qsTr("Etherscan Explorer")
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,26 +28,41 @@ Item {
|
|||
required property var collectible
|
||||
property var activityModel
|
||||
property bool isCollectibleLoading
|
||||
readonly property int isNarrowMode : width < 700
|
||||
|
||||
// Community related token props:
|
||||
readonly property bool isCommunityCollectible: !!collectible ? collectible.communityId !== "" : false
|
||||
readonly property bool isOwnerTokenType: !!collectible ? (collectible.communityPrivilegesLevel === Constants.TokenPrivilegesLevel.Owner) : false
|
||||
readonly property bool isTMasterTokenType: !!collectible ? (collectible.communityPrivilegesLevel === Constants.TokenPrivilegesLevel.TMaster) : false
|
||||
|
||||
readonly property var communityDetails: isCommunityCollectible ? root.communitiesStore.getCommunityDetailsAsJson(collectible.communityId) : null
|
||||
|
||||
CollectibleDetailsHeader {
|
||||
id: collectibleHeader
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
asset.name: collectible.collectionImageUrl
|
||||
asset.isImage: true
|
||||
primaryText: collectible.collectionName
|
||||
secondaryText: "#" + collectible.tokenId
|
||||
isNarrowMode: root.isNarrowMode
|
||||
collectibleName: collectible.name
|
||||
collectibleId: "#" + collectible.tokenId
|
||||
collectionTag.tagPrimaryLabel.text: !!communityDetails ? communityDetails.name : collectible.collectionName
|
||||
isCollection: !!collectible.collectionName
|
||||
communityImage: !!communityDetails ? communityDetails.image: ""
|
||||
networkShortName: collectible.networkShortName
|
||||
networkColor: collectible.networkColor
|
||||
networkIconURL: collectible.networkIconUrl
|
||||
networkExplorerName: root.walletRootStore.getExplorerNameForNetwork(collectible.networkShortName)
|
||||
onCollectionTagClicked: {
|
||||
if (root.isCommunityCollectible) {
|
||||
Global.switchToCommunity(collectible.communityId)
|
||||
}
|
||||
/* TODO for non community token link out to collection on opensea
|
||||
https://github.com/status-im/status-desktop/issues/13918 */
|
||||
|
||||
}
|
||||
onOpenCollectibleExternally: {
|
||||
/* TODO add link out to opensea
|
||||
https://github.com/status-im/status-desktop/issues/13918 */
|
||||
}
|
||||
onOpenCollectibleOnExplorer: Global.openLink("%1/nft/%2/%3".arg(root.walletRootStore.getExplorerUrl()).arg(collectible.contractAddress).arg(collectible.tokenId))
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
|
|
@ -55,7 +70,7 @@ Item {
|
|||
anchors.top: collectibleHeader.bottom
|
||||
anchors.topMargin: 25
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: root.isNarrowMode ? 0 : 52
|
||||
anchors.leftMargin: 52
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
|
|
@ -76,7 +91,7 @@ Item {
|
|||
id: privilegedCollectibleImage
|
||||
|
||||
visible: root.isCommunityCollectible && (root.isOwnerTokenType || root.isTMasterTokenType)
|
||||
size: root.isNarrowMode ? PrivilegedTokenArtworkPanel.Size.Medium : PrivilegedTokenArtworkPanel.Size.Large
|
||||
size: PrivilegedTokenArtworkPanel.Size.Large
|
||||
artwork: collectible.imageUrl
|
||||
color: !!collectible && root.isCommunityCollectible? collectible.communityColor : "transparent"
|
||||
isOwner: root.isOwnerTokenType
|
||||
|
|
@ -85,12 +100,10 @@ Item {
|
|||
StatusRoundedMedia {
|
||||
id: collectibleimage
|
||||
|
||||
readonly property int size : root.isNarrowMode ? 132 : 253
|
||||
|
||||
visible: !privilegedCollectibleImage.visible
|
||||
width: size
|
||||
height: size
|
||||
radius: 2
|
||||
width: 248
|
||||
height: width
|
||||
radius: Style.current.radius
|
||||
color: collectible.backgroundColor
|
||||
border.color: Theme.palette.directColor8
|
||||
border.width: 1
|
||||
|
|
@ -110,10 +123,11 @@ Item {
|
|||
width: parent.width
|
||||
height: 24
|
||||
|
||||
text: collectible.name
|
||||
text: root.isCommunityCollectible && !!communityDetails ? qsTr("Minted by %1").arg(root.communityDetails.name): root.collectible.collectionName
|
||||
color: Theme.palette.directColor1
|
||||
font.pixelSize: 17
|
||||
lineHeight: 24
|
||||
lineHeightMode: Text.FixedHeight
|
||||
elide: Text.ElideRight
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
|
|
@ -147,7 +161,7 @@ Item {
|
|||
StatusTabBar {
|
||||
id: collectiblesDetailsTab
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: root.isNarrowMode ? Style.current.padding : Style.current.xlPadding
|
||||
Layout.topMargin: Style.current.xlPadding
|
||||
visible: collectible.traits.count > 0
|
||||
|
||||
StatusTabButton {
|
||||
|
|
|
|||
Loading…
Reference in New Issue