feat(MintAssets): Create new asset page / flow
- Added tabs. - Updated pages with new entries. Part of #10623
This commit is contained in:
parent
0862273baf
commit
6abb9f0063
|
@ -56,7 +56,10 @@
|
||||||
"CommunityNewCollectibleView": [
|
"CommunityNewCollectibleView": [
|
||||||
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480877&t=Qo2FwPRxvSxbluqB-1",
|
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480877&t=Qo2FwPRxvSxbluqB-1",
|
||||||
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=26601%3A518245&t=Qo2FwPRxvSxbluqB-1",
|
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=26601%3A518245&t=Qo2FwPRxvSxbluqB-1",
|
||||||
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A498811&t=Qo2FwPRxvSxbluqB-1"
|
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A498811&t=Qo2FwPRxvSxbluqB-1",
|
||||||
|
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?type=design&node-id=29384%3A563759&t=g40TADKO0p93G4r0-1",
|
||||||
|
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?type=design&node-id=29423%3A593514&t=g40TADKO0p93G4r0-1"
|
||||||
|
|
||||||
],
|
],
|
||||||
"CommunityNewPermissionView": [
|
"CommunityNewPermissionView": [
|
||||||
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22253%3A486103&t=JrCIfks1zVzsk3vn-0"
|
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22253%3A486103&t=JrCIfks1zVzsk3vn-0"
|
||||||
|
|
|
@ -7,6 +7,7 @@ import StatusQ.Core 0.1
|
||||||
import StatusQ.Components 0.1
|
import StatusQ.Components 0.1
|
||||||
import StatusQ.Core.Theme 0.1
|
import StatusQ.Core.Theme 0.1
|
||||||
import StatusQ.Core.Utils 0.1
|
import StatusQ.Core.Utils 0.1
|
||||||
|
import StatusQ.Controls 0.1
|
||||||
|
|
||||||
import AppLayouts.Chat.layouts 1.0
|
import AppLayouts.Chat.layouts 1.0
|
||||||
import AppLayouts.Chat.views.communities 1.0
|
import AppLayouts.Chat.views.communities 1.0
|
||||||
|
@ -81,13 +82,14 @@ SettingsPageLayout {
|
||||||
QtObject {
|
QtObject {
|
||||||
id: d
|
id: d
|
||||||
|
|
||||||
readonly property string initialViewState: "WELCOME_OR_LIST_COLLECTIBLES"
|
readonly property string initialViewState: "WELCOME_OR_LIST_TOKENS"
|
||||||
readonly property string newCollectibleViewState: "NEW_COLLECTIBLE"
|
readonly property string newTokenViewState: "NEW_TOKEN"
|
||||||
readonly property string previewCollectibleViewState: "PREVIEW_COLLECTIBLE"
|
readonly property string previewCollectibleViewState: "PREVIEW_COLLECTIBLE"
|
||||||
readonly property string collectibleViewState: "VIEW_COLLECTIBLE"
|
readonly property string collectibleViewState: "VIEW_COLLECTIBLE"
|
||||||
|
|
||||||
readonly property string welcomePageTitle: qsTr("Tokens")
|
readonly property string welcomePageTitle: qsTr("Tokens")
|
||||||
readonly property string newCollectiblePageTitle: qsTr("Mint collectible")
|
readonly property string newCollectiblePageTitle: qsTr("Mint collectible")
|
||||||
|
readonly property string newAssetPageTitle: qsTr("Mint asset")
|
||||||
readonly property string newTokenButtonText: qsTr("Mint token")
|
readonly property string newTokenButtonText: qsTr("Mint token")
|
||||||
readonly property string backButtonText: qsTr("Back")
|
readonly property string backButtonText: qsTr("Back")
|
||||||
|
|
||||||
|
@ -139,8 +141,7 @@ SettingsPageLayout {
|
||||||
PropertyChanges {target: root; headerWidth: root.viewWidth}
|
PropertyChanges {target: root; headerWidth: root.viewWidth}
|
||||||
},
|
},
|
||||||
State {
|
State {
|
||||||
name: d.newCollectibleViewState
|
name: d.newTokenViewState
|
||||||
PropertyChanges {target: root; title: d.newCollectiblePageTitle}
|
|
||||||
PropertyChanges {target: root; subTitle: ""}
|
PropertyChanges {target: root; subTitle: ""}
|
||||||
PropertyChanges {target: root; previousPageName: d.backButtonText}
|
PropertyChanges {target: root; previousPageName: d.backButtonText}
|
||||||
PropertyChanges {target: root; headerButtonVisible: false}
|
PropertyChanges {target: root; headerButtonVisible: false}
|
||||||
|
@ -161,7 +162,7 @@ SettingsPageLayout {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
onHeaderButtonClicked: stackManager.push(d.newCollectibleViewState, newCollectiblesView, null, StackView.Immediate)
|
onHeaderButtonClicked: stackManager.push(d.newTokenViewState, newTokenView, null, StackView.Immediate)
|
||||||
|
|
||||||
StackViewStates {
|
StackViewStates {
|
||||||
id: stackManager
|
id: stackManager
|
||||||
|
@ -187,38 +188,89 @@ SettingsPageLayout {
|
||||||
}
|
}
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: newCollectiblesView
|
id: newTokenView
|
||||||
|
|
||||||
CommunityNewCollectibleView {
|
ColumnLayout {
|
||||||
viewWidth: root.viewWidth
|
width: root.viewWidth
|
||||||
layer1Networks: root.layer1Networks
|
spacing: Style.current.padding
|
||||||
layer2Networks: root.layer2Networks
|
|
||||||
testNetworks: root.testNetworks
|
|
||||||
enabledNetworks: root.testNetworks
|
|
||||||
allNetworks: root.allNetworks
|
|
||||||
accounts: root.accounts
|
|
||||||
|
|
||||||
onPreviewClicked: {
|
StatusSwitchTabBar {
|
||||||
d.accountAddress = accountAddress
|
id: optionsTab
|
||||||
stackManager.push(d.previewCollectibleViewState,
|
|
||||||
previewCollectibleView,
|
Layout.preferredWidth: root.viewWidth
|
||||||
{
|
|
||||||
preview: true,
|
StatusSwitchTabButton {
|
||||||
name,
|
id: collectiblesTab
|
||||||
artworkSource,
|
|
||||||
artworkCropRect,
|
text: qsTr("Collectibles")
|
||||||
symbol,
|
}
|
||||||
description,
|
|
||||||
supplyAmount,
|
StatusSwitchTabButton {
|
||||||
infiniteSupply,
|
id: assetsTab
|
||||||
transferable: !notTransferable,
|
|
||||||
selfDestruct,
|
text: qsTr("Assets")
|
||||||
chainId,
|
}
|
||||||
chainName,
|
|
||||||
chainIcon,
|
Binding {
|
||||||
accountName
|
target: root
|
||||||
},
|
property: "title"
|
||||||
StackView.Immediate)
|
value: optionsTab.currentItem == collectiblesTab ? d.newCollectiblePageTitle : d.newAssetPageTitle
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StackLayout {
|
||||||
|
Layout.preferredWidth: root.viewWidth
|
||||||
|
Layout.fillHeight: true
|
||||||
|
|
||||||
|
currentIndex: optionsTab.currentItem == collectiblesTab ? 0 : 1
|
||||||
|
|
||||||
|
CommunityNewCollectibleView {
|
||||||
|
viewWidth: root.viewWidth
|
||||||
|
layer1Networks: root.layer1Networks
|
||||||
|
layer2Networks: root.layer2Networks
|
||||||
|
testNetworks: root.testNetworks
|
||||||
|
enabledNetworks: root.testNetworks
|
||||||
|
allNetworks: root.allNetworks
|
||||||
|
accounts: root.accounts
|
||||||
|
tokensModel: root.tokensModel
|
||||||
|
|
||||||
|
onPreviewClicked: {
|
||||||
|
d.accountAddress = accountAddress
|
||||||
|
stackManager.push(d.previewCollectibleViewState,
|
||||||
|
previewCollectibleView,
|
||||||
|
{
|
||||||
|
preview: true,
|
||||||
|
name,
|
||||||
|
artworkSource,
|
||||||
|
artworkCropRect,
|
||||||
|
symbol,
|
||||||
|
description,
|
||||||
|
supplyAmount,
|
||||||
|
infiniteSupply,
|
||||||
|
transferable: !notTransferable,
|
||||||
|
selfDestruct,
|
||||||
|
chainId,
|
||||||
|
chainName,
|
||||||
|
chainIcon,
|
||||||
|
accountName
|
||||||
|
},
|
||||||
|
StackView.Immediate)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
CommunityNewCollectibleView {
|
||||||
|
viewWidth: root.viewWidth
|
||||||
|
layer1Networks: root.layer1Networks
|
||||||
|
layer2Networks: root.layer2Networks
|
||||||
|
testNetworks: root.testNetworks
|
||||||
|
enabledNetworks: root.testNetworks
|
||||||
|
allNetworks: root.allNetworks
|
||||||
|
accounts: root.accounts
|
||||||
|
tokensModel: root.tokensModel
|
||||||
|
isAssetView: true
|
||||||
|
|
||||||
|
onPreviewClicked: console.log("TODO: Assets preview!")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,14 +18,13 @@ StatusScrollView {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
property int viewWidth: 560 // by design
|
property int viewWidth: 560 // by design
|
||||||
|
property bool isAssetView: false
|
||||||
|
|
||||||
// Collectible properties
|
// Token properties
|
||||||
readonly property alias name: nameInput.text
|
readonly property alias name: nameInput.text
|
||||||
readonly property alias symbol: symbolInput.text
|
readonly property alias symbol: symbolInput.text
|
||||||
readonly property alias description: descriptionInput.text
|
readonly property alias description: descriptionInput.text
|
||||||
readonly property alias infiniteSupply: unlimitedSupplyChecker.checked
|
readonly property alias infiniteSupply: unlimitedSupplyChecker.checked
|
||||||
readonly property alias notTransferable: transferableChecker.checked
|
|
||||||
readonly property alias selfDestruct: selfDestructChecker.checked
|
|
||||||
readonly property int supplyAmount: supplyInput.text ? parseInt(supplyInput.text) : 0
|
readonly property int supplyAmount: supplyInput.text ? parseInt(supplyInput.text) : 0
|
||||||
property alias artworkSource: dropAreaItem.artworkSource
|
property alias artworkSource: dropAreaItem.artworkSource
|
||||||
property alias artworkCropRect: dropAreaItem.artworkCropRect
|
property alias artworkCropRect: dropAreaItem.artworkCropRect
|
||||||
|
@ -33,6 +32,13 @@ StatusScrollView {
|
||||||
property string chainName
|
property string chainName
|
||||||
property string chainIcon
|
property string chainIcon
|
||||||
|
|
||||||
|
// Collectible properties
|
||||||
|
readonly property alias notTransferable: transferableChecker.checked
|
||||||
|
readonly property alias selfDestruct: selfDestructChecker.checked
|
||||||
|
|
||||||
|
// Asset properties
|
||||||
|
readonly property int assetDecimals: assetDecimalsInput.text ? parseInt(assetDecimalsInput.text) : 0
|
||||||
|
|
||||||
// Network related properties:
|
// Network related properties:
|
||||||
property var layer1Networks
|
property var layer1Networks
|
||||||
property var layer2Networks
|
property var layer2Networks
|
||||||
|
@ -52,12 +58,12 @@ StatusScrollView {
|
||||||
QtObject {
|
QtObject {
|
||||||
id: d
|
id: d
|
||||||
|
|
||||||
property bool isAssetView: (optionsTab.currentIndex === 1)
|
|
||||||
readonly property bool isFullyFilled: root.artworkSource.toString().length > 0
|
readonly property bool isFullyFilled: root.artworkSource.toString().length > 0
|
||||||
&& !!root.name
|
&& !!root.name
|
||||||
&& !!root.symbol
|
&& !!root.symbol
|
||||||
&& !!root.description
|
&& !!root.description
|
||||||
&& (root.infiniteSupply || (!root.infiniteSupply && root.supplyAmount > 0))
|
&& (root.infiniteSupply || (!root.infiniteSupply && root.supplyAmount > 0)
|
||||||
|
&& (d.isAssetView && assetDecimalsInput.valid))
|
||||||
|
|
||||||
|
|
||||||
readonly property int imageSelectorRectWidth: d.isAssetView ? 128 : 290
|
readonly property int imageSelectorRectWidth: d.isAssetView ? 128 : 290
|
||||||
|
@ -73,26 +79,10 @@ StatusScrollView {
|
||||||
width: root.viewWidth
|
width: root.viewWidth
|
||||||
spacing: Style.current.padding
|
spacing: Style.current.padding
|
||||||
|
|
||||||
StatusTabBar {
|
|
||||||
//TODO replace with tab bar from design when this
|
|
||||||
//https://github.com/status-im/status-desktop/issues/10623 is done
|
|
||||||
id: optionsTab
|
|
||||||
StatusTabButton {
|
|
||||||
id: assetBtn
|
|
||||||
width: implicitWidth
|
|
||||||
text: qsTr("Collectibles")
|
|
||||||
}
|
|
||||||
StatusTabButton {
|
|
||||||
id: collectiblesBtn
|
|
||||||
width: implicitWidth
|
|
||||||
text: qsTr("Assets")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StatusBaseText {
|
StatusBaseText {
|
||||||
elide: Text.ElideRight
|
elide: Text.ElideRight
|
||||||
font.pixelSize: Theme.primaryTextFontSize
|
font.pixelSize: Theme.primaryTextFontSize
|
||||||
text: qsTr("Artwork")
|
text: root.isAssetView ? qsTr("Icon") : qsTr("Artwork")
|
||||||
}
|
}
|
||||||
|
|
||||||
DropAndEditImagePanel {
|
DropAndEditImagePanel {
|
||||||
|
@ -114,7 +104,7 @@ StatusScrollView {
|
||||||
label: qsTr("Name")
|
label: qsTr("Name")
|
||||||
charLimit: 15
|
charLimit: 15
|
||||||
placeholderText: qsTr("Name")
|
placeholderText: qsTr("Name")
|
||||||
errorText: qsTr("Collectible name")
|
errorText: d.isAssetView ? qsTr("Asset name") : qsTr("Collectible name")
|
||||||
}
|
}
|
||||||
|
|
||||||
CustomStatusInput {
|
CustomStatusInput {
|
||||||
|
@ -122,13 +112,13 @@ StatusScrollView {
|
||||||
|
|
||||||
label: qsTr("Description")
|
label: qsTr("Description")
|
||||||
charLimit: 280
|
charLimit: 280
|
||||||
placeholderText: qsTr("Describe your collectible")
|
placeholderText: root.isAssetView ? qsTr("Describe your asset") : qsTr("Describe your collectible")
|
||||||
input.multiline: true
|
input.multiline: true
|
||||||
input.verticalAlignment: Qt.AlignTop
|
input.verticalAlignment: Qt.AlignTop
|
||||||
input.placeholder.verticalAlignment: Qt.AlignTop
|
input.placeholder.verticalAlignment: Qt.AlignTop
|
||||||
minimumHeight: 108
|
minimumHeight: 108
|
||||||
maximumHeight: minimumHeight
|
maximumHeight: minimumHeight
|
||||||
errorText: qsTr("Collectible description")
|
errorText: d.isAssetView ? qsTr("Asset description") : qsTr("Collectible description")
|
||||||
}
|
}
|
||||||
|
|
||||||
CustomStatusInput {
|
CustomStatusInput {
|
||||||
|
@ -137,7 +127,7 @@ StatusScrollView {
|
||||||
label: qsTr("Symbol")
|
label: qsTr("Symbol")
|
||||||
charLimit: 6
|
charLimit: 6
|
||||||
placeholderText: qsTr("e.g. DOODLE")
|
placeholderText: qsTr("e.g. DOODLE")
|
||||||
errorText: qsTr("Collectible symbol")
|
errorText: d.isAssetView ? qsTr("Asset symbol") :qsTr("Collectible symbol")
|
||||||
validator.regularExpression: Constants.regularExpressions.asciiPrintable
|
validator.regularExpression: Constants.regularExpressions.asciiPrintable
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -150,7 +140,7 @@ StatusScrollView {
|
||||||
StatusEmojiAndColorComboBox {
|
StatusEmojiAndColorComboBox {
|
||||||
id: accountsComboBox
|
id: accountsComboBox
|
||||||
|
|
||||||
readonly property string address: ModelUtils.get(root.accounts, currentIndex, "address")
|
readonly property string address: SQUtils.ModelUtils.get(root.accounts, currentIndex, "address")
|
||||||
|
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
model: root.accounts
|
model: root.accounts
|
||||||
|
@ -186,7 +176,8 @@ StatusScrollView {
|
||||||
|
|
||||||
CustomSwitchRowComponent {
|
CustomSwitchRowComponent {
|
||||||
id: transferableChecker
|
id: transferableChecker
|
||||||
visible: (optionsTab.currentIndex === 0)
|
|
||||||
|
visible: !root.isAssetView
|
||||||
label: checked ? qsTr("Not transferable (Soulbound)") : qsTr("Transferable")
|
label: checked ? qsTr("Not transferable (Soulbound)") : qsTr("Transferable")
|
||||||
description: qsTr("If enabled, the token is locked to the first address it is sent to and can never be transferred to another address. Useful for tokens that represent Admin permissions")
|
description: qsTr("If enabled, the token is locked to the first address it is sent to and can never be transferred to another address. Useful for tokens that represent Admin permissions")
|
||||||
checked: true
|
checked: true
|
||||||
|
@ -194,17 +185,24 @@ StatusScrollView {
|
||||||
|
|
||||||
CustomSwitchRowComponent {
|
CustomSwitchRowComponent {
|
||||||
id: selfDestructChecker
|
id: selfDestructChecker
|
||||||
visible: (optionsTab.currentIndex === 0)
|
|
||||||
|
visible: !root.isAssetView
|
||||||
label: qsTr("Remotely destructible")
|
label: qsTr("Remotely destructible")
|
||||||
description: qsTr("Enable to allow you to destroy tokens remotely. Useful for revoking permissions from individuals")
|
description: qsTr("Enable to allow you to destroy tokens remotely. Useful for revoking permissions from individuals")
|
||||||
checked: true
|
checked: true
|
||||||
}
|
}
|
||||||
|
|
||||||
CustomStatusInput {
|
CustomStatusInput {
|
||||||
visible: (optionsTab.currentIndex === 1)
|
id: assetDecimalsInput
|
||||||
|
|
||||||
|
visible: root.isAssetView
|
||||||
label: qsTr("Decimals")
|
label: qsTr("Decimals")
|
||||||
secondaryLabel: "Max 10"
|
charLimit: 2
|
||||||
placeholderText: qsTr("2")
|
charLimitLabel: qsTr("Max 10")
|
||||||
|
placeholderText: "2"
|
||||||
|
text: "2" // Default value
|
||||||
|
validators: StatusIntValidator{ bottom: 1; top: 10; }
|
||||||
|
validationMode: StatusInput.ValidationMode.Always
|
||||||
}
|
}
|
||||||
|
|
||||||
StatusButton {
|
StatusButton {
|
||||||
|
|
Loading…
Reference in New Issue