Skip to content

Commit

Permalink
chore(MintedTokensSettingsPanel): simplified by integrating welcome p…
Browse files Browse the repository at this point in the history 
…age into MintedTokensView

Welcome info is a placeholder when list of tokens is empty. For that
reason is hander to keep in MintedTokensView instead of in MintedTokensSettingsPanel
and maintain additional state for that.
  • Loading branch information
@micieslak
micieslak committed Jul 3, 2023
1 parent c4e68b5 commit 8a83aba
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 142 deletions.
42 changes: 4 additions & 38 deletions ui/app/AppLayouts/Communities/panels/MintTokensSettingsPanel.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,12 @@ SettingsPageLayout {
QtObject {
id: d

readonly property string initialViewState: "WELCOME_OR_LIST_TOKENS"
readonly property string initialViewState: "TOKENS_LIST"
readonly property string newTokenViewState: "NEW_TOKEN"
readonly property string previewTokenViewState: "PREVIEW_TOKEN"
readonly property string tokenViewState: "VIEW_TOKEN"

readonly property string welcomePageTitle: qsTr("Tokens")
readonly property string tokensListPageTitle: qsTr("Tokens")
readonly property string newCollectiblePageTitle: qsTr("Mint collectible")
readonly property string newAssetPageTitle: qsTr("Mint asset")
readonly property string newTokenButtonText: qsTr("Mint token")
Expand All @@ -101,29 +101,16 @@ SettingsPageLayout {

property TokenObject currentToken

readonly property var initialItem: (root.tokensModel && root.tokensModel.count > 0) ? mintedTokensView : welcomeView

signal airdropClicked()
signal remoteDestructAddressClicked(string address)
signal retryMintClicked()

function updateInitialStackView() {
if(stackManager.stackView) {
if(initialItem === welcomeView)
stackManager.stackView.replace(mintedTokensView, welcomeView, StackView.Immediate)
if(initialItem === mintedTokensView)
stackManager.stackView.replace(welcomeView, mintedTokensView, StackView.Immediate)
}
}

onInitialItemChanged: updateInitialStackView()
}

secondaryHeaderButton.type: StatusBaseButton.Type.Danger

content: StackView {
anchors.fill: parent
initialItem: d.initialItem
initialItem: mintedTokensView

Component.onCompleted: stackManager.pushInitialState(d.initialViewState)
}
Expand All @@ -132,26 +119,21 @@ SettingsPageLayout {
states: [
State {
name: d.initialViewState
PropertyChanges {target: root; title: d.welcomePageTitle}
PropertyChanges {target: root; title: d.tokensListPageTitle}
PropertyChanges {target: root; subTitle: ""}
PropertyChanges {target: root; previousPageName: ""}
PropertyChanges {target: root; primaryHeaderButton.visible: true}
PropertyChanges {target: root; primaryHeaderButton.text: d.newTokenButtonText}
PropertyChanges {target: root; secondaryHeaderButton.visible: false}
},
State {
name: d.newTokenViewState
PropertyChanges {target: root; title: d.isAssetView ? d.newAssetPageTitle : d.newCollectiblePageTitle }
PropertyChanges {target: root; subTitle: ""}
PropertyChanges {target: root; previousPageName: d.backButtonText}
PropertyChanges {target: root; primaryHeaderButton.visible: false}
PropertyChanges {target: root; secondaryHeaderButton.visible: false}
},
State {
name: d.previewTokenViewState
PropertyChanges {target: root; previousPageName: d.backButtonText}
PropertyChanges {target: root; primaryHeaderButton.visible: false}
PropertyChanges {target: root; secondaryHeaderButton.visible: false}
},
State {
name: d.tokenViewState
Expand Down Expand Up @@ -222,22 +204,6 @@ SettingsPageLayout {
}

// Mint tokens possible view contents:
Component {
id: welcomeView

WelcomeSettingsView {
viewWidth: root.viewWidth
image: Style.png("community/mint2_1")
title: qsTr("Community tokens")
subtitle: qsTr("You can mint custom tokens and import tokens for your community")
checkersModel: [
qsTr("Create remotely destructible soulbound tokens for admin permissions"),
qsTr("Reward individual members with custom tokens for their contribution"),
qsTr("Mint tokens for use with community and channel permissions")
]
}
}

Component {
id: newTokenView

Expand Down
251 changes: 147 additions & 104 deletions ui/app/AppLayouts/Communities/views/MintedTokensView.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,24 @@ import utils 1.0
import shared.controls 1.0

import AppLayouts.Wallet.views.collectibles 1.0
import AppLayouts.Communities.panels 1.0

StatusScrollView {
id: root

property int viewWidth: 560 // by design
property var model

readonly property int count: assetsModel.count + collectiblesModel.count

signal itemClicked(string tokenKey,
int chainId,
string chainName,
string accountName,
string accountAddress)

padding: 0

QtObject {
id: d

Expand All @@ -45,129 +50,167 @@ StatusScrollView {
}
}

padding: 0
SortFilterProxyModel {
id: assetsModel

ColumnLayout {
id: mainLayout
sourceModel: root.model
filters: ValueFilter {
roleName: "tokenType"
value: Constants.TokenType.ERC20
}
}

width: root.viewWidth
spacing: Style.current.halfPadding
SortFilterProxyModel {
id: collectiblesModel

StatusBaseText {
Layout.leftMargin: Style.current.padding
sourceModel: root.model
filters: ValueFilter {
roleName: "tokenType"
value: Constants.TokenType.ERC721
}
}

text: qsTr("Assets")
font.pixelSize: Theme.primaryTextFontSize
color: Theme.palette.baseColor1
Loader {
sourceComponent: root.count === 0 ? introComponent : mainLayoutComponent
}

Component {
id: introComponent

IntroPanel {
width: root.viewWidth

image: Style.png("community/mint2_1")
title: qsTr("Community tokens")
subtitle: qsTr("You can mint custom tokens and import tokens for your community")
checkersModel: [
qsTr("Create remotely destructible soulbound tokens for admin permissions"),
qsTr("Reward individual members with custom tokens for their contribution"),
qsTr("Mint tokens for use with community and channel permissions")
]
}
}

StatusListView {
id: assetsList
Component {
id: mainLayoutComponent

Layout.fillWidth: true
Layout.preferredHeight: childrenRect.height
ColumnLayout {
id: mainLayout

visible: count > 0
model: SortFilterProxyModel {
sourceModel: root.model
filters: ValueFilter {
roleName: "tokenType"
value: Constants.TokenType.ERC20
}
width: root.viewWidth
spacing: Style.current.halfPadding

StatusBaseText {
Layout.leftMargin: Style.current.padding

text: qsTr("Assets")
font.pixelSize: Theme.primaryTextFontSize
color: Theme.palette.baseColor1
}
delegate: StatusListItem {
height: 64
width: mainLayout.width
title: model.name
subTitle: model.symbol
asset.name: model.image ? model.image : ""
asset.isImage: true
components: [
StatusBaseText {
anchors.verticalCenter: parent.verticalCenter
text: d.getSubtitle(model.deployState,
model.remainingSupply,
model.supply, false,
model.infiniteSupply)
color: model.deployState === Constants.ContractTransactionStatus.Failed
? Theme.palette.dangerColor1 : Theme.palette.baseColor1
font.pixelSize: 13
},
StatusIcon {
anchors.verticalCenter: parent.verticalCenter
icon: "next"
color: Theme.palette.baseColor1
}
]
onClicked: root.itemClicked(model.contractUniqueKey,
model.chainId, model.chainName,
model.accountName, model.address)

StatusListView {
id: assetsList

Layout.fillWidth: true
Layout.preferredHeight: childrenRect.height

visible: count > 0
model: assetsModel

delegate: StatusListItem {
height: 64
width: mainLayout.width
title: model.name
subTitle: model.symbol
asset.name: model.image ? model.image : ""
asset.isImage: true
components: [
StatusBaseText {
anchors.verticalCenter: parent.verticalCenter
text: d.getSubtitle(model.deployState,
model.remainingSupply,
model.supply, false,
model.infiniteSupply)
color: model.deployState === Constants.ContractTransactionStatus.Failed
? Theme.palette.dangerColor1 : Theme.palette.baseColor1
font.pixelSize: 13
},
StatusIcon {
anchors.verticalCenter: parent.verticalCenter
icon: "next"
color: Theme.palette.baseColor1
}
]
onClicked: root.itemClicked(model.contractUniqueKey,
model.chainId, model.chainName,
model.accountName, model.address)
}
}
}

// Empty placeholder when no assets; dashed rounded rectangle
ShapeRectangle {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: parent.width - 4 // The rectangular path is rendered outside
Layout.preferredHeight: 44
visible: assetsList.count === 0
text: qsTr("You currently have no minted assets")
}
// Empty placeholder when no assets; dashed rounded rectangle
ShapeRectangle {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: parent.width - 4 // The rectangular path is rendered outside
Layout.preferredHeight: 44
visible: assetsList.count === 0
text: qsTr("You currently have no minted assets")
}

StatusBaseText {
Layout.leftMargin: Style.current.padding
Layout.topMargin: Style.current.halfPadding
StatusBaseText {
Layout.leftMargin: Style.current.padding
Layout.topMargin: Style.current.halfPadding

text: qsTr("Collectibles")
font.pixelSize: Theme.primaryTextFontSize
color: Theme.palette.baseColor1
}
text: qsTr("Collectibles")
font.pixelSize: Theme.primaryTextFontSize
color: Theme.palette.baseColor1
}

StatusGridView {
id: collectiblesGrid
StatusGridView {
id: collectiblesGrid

Layout.fillWidth: true
Layout.preferredHeight: childrenRect.height
Layout.fillWidth: true
Layout.preferredHeight: childrenRect.height

visible: count > 0
model: SortFilterProxyModel {
sourceModel: root.model
filters: ValueFilter {
roleName: "tokenType"
value: Constants.TokenType.ERC721
visible: count > 0
model: SortFilterProxyModel {
sourceModel: root.model
filters: ValueFilter {
roleName: "tokenType"
value: Constants.TokenType.ERC721
}
}
cellHeight: 229
cellWidth: 176
leftMargin: 16
delegate: CollectibleView {
height: collectiblesGrid.cellHeight
width: collectiblesGrid.cellWidth
title: model.name ? model.name : "..."
subTitle: d.getSubtitle(model.deployState,
model.remainingSupply,
model.supply, true,
model.infiniteSupply)
subTitleColor: model.deployState === Constants.ContractTransactionStatus.Failed
? Theme.palette.dangerColor1 : Theme.palette.baseColor1
fallbackImageUrl: model.image ? model.image : ""
backgroundColor: "transparent"
isLoading: false
navigationIconVisible: true

onClicked: root.itemClicked(model.contractUniqueKey,
model.chainId, model.chainName,
model.accountName, model.address)
}
}
cellHeight: 229
cellWidth: 176
leftMargin: 16
delegate: CollectibleView {
height: collectiblesGrid.cellHeight
width: collectiblesGrid.cellWidth
title: model.name ? model.name : "..."
subTitle: d.getSubtitle(model.deployState,
model.remainingSupply,
model.supply, true,
model.infiniteSupply)
subTitleColor: model.deployState === Constants.ContractTransactionStatus.Failed
? Theme.palette.dangerColor1 : Theme.palette.baseColor1
fallbackImageUrl: model.image ? model.image : ""
backgroundColor: "transparent"
isLoading: false
navigationIconVisible: true

onClicked: root.itemClicked(model.contractUniqueKey,
model.chainId, model.chainName,
model.accountName, model.address)
}
}

// Empty placeholder when no collectibles; dashed rounded rectangle
ShapeRectangle {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: parent.width - 4 // The rectangular path is rendered outside
Layout.preferredHeight: 44
visible: collectiblesGrid.count == 0
text: qsTr("You currently have no minted collectibles")
// Empty placeholder when no collectibles; dashed rounded rectangle
ShapeRectangle {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: parent.width - 4 // The rectangular path is rendered outside
Layout.preferredHeight: 44
visible: collectiblesGrid.count === 0
text: qsTr("You currently have no minted collectibles")
}
}
}
}

0 comments on commit 8a83aba

Please sign in to comment.