feat(MintAssets): Create new asset page / flow

- Added tabs. - Updated pages with new entries. Part of #10623
2023-05-22 15:00:40 +02:00 · 2023-05-22 15:00:40 +02:00 · 6abb9f0063
parent 0862273baf
commit 6abb9f0063
3 changed files with 121 additions and 68 deletions
--- a/storybook/figma.json
+++ b/storybook/figma.json
@ -56,7 +56,10 @@
    "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=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": [
        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22253%3A486103&t=JrCIfks1zVzsk3vn-0"
--- a/ui/app/AppLayouts/Chat/panels/communities/CommunityMintTokensSettingsPanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/communities/CommunityMintTokensSettingsPanel.qml
@ -7,6 +7,7 @@ import StatusQ.Core 0.1
 import StatusQ.Components 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core.Utils 0.1
+import StatusQ.Controls 0.1

 import AppLayouts.Chat.layouts 1.0
 import AppLayouts.Chat.views.communities 1.0
@ -81,13 +82,14 @@ SettingsPageLayout {
    QtObject {
        id: d

-        readonly property string initialViewState: "WELCOME_OR_LIST_COLLECTIBLES"
-        readonly property string newCollectibleViewState: "NEW_COLLECTIBLE"
+        readonly property string initialViewState: "WELCOME_OR_LIST_TOKENS"
+        readonly property string newTokenViewState: "NEW_TOKEN"
        readonly property string previewCollectibleViewState: "PREVIEW_COLLECTIBLE"
        readonly property string collectibleViewState: "VIEW_COLLECTIBLE"

        readonly property string welcomePageTitle: qsTr("Tokens")
        readonly property string newCollectiblePageTitle: qsTr("Mint collectible")
+        readonly property string newAssetPageTitle: qsTr("Mint asset")
        readonly property string newTokenButtonText: qsTr("Mint token")
        readonly property string backButtonText: qsTr("Back")

@ -139,8 +141,7 @@ SettingsPageLayout {
            PropertyChanges {target: root; headerWidth: root.viewWidth}
        },
        State {
-            name: d.newCollectibleViewState
-            PropertyChanges {target: root; title: d.newCollectiblePageTitle}
+            name: d.newTokenViewState
            PropertyChanges {target: root; subTitle: ""}
            PropertyChanges {target: root; previousPageName: d.backButtonText}
            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 {
        id: stackManager
@ -187,38 +188,89 @@ SettingsPageLayout {
    }

    Component {
-        id: newCollectiblesView
+        id: newTokenView

-        CommunityNewCollectibleView {
-            viewWidth: root.viewWidth
-            layer1Networks: root.layer1Networks
-            layer2Networks: root.layer2Networks
-            testNetworks: root.testNetworks
-            enabledNetworks: root.testNetworks
-            allNetworks: root.allNetworks
-            accounts: root.accounts
+        ColumnLayout {
+            width: root.viewWidth
+            spacing: Style.current.padding

-            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)
+            StatusSwitchTabBar {
+                id: optionsTab
+
+                Layout.preferredWidth: root.viewWidth
+
+                StatusSwitchTabButton {
+                    id: collectiblesTab
+
+                    text: qsTr("Collectibles")
+                }
+
+                StatusSwitchTabButton {
+                    id: assetsTab
+
+                    text: qsTr("Assets")
+                }
+
+                Binding {
+                    target: root
+                    property: "title"
+                    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!")
+                }
            }
        }
    }
--- a/ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml
+++ b/ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml
@ -18,14 +18,13 @@ StatusScrollView {
    id: root

    property int viewWidth: 560 // by design
+    property bool isAssetView: false

-    // Collectible properties
+    // Token properties
    readonly property alias name: nameInput.text
    readonly property alias symbol: symbolInput.text
    readonly property alias description: descriptionInput.text
    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
    property alias artworkSource: dropAreaItem.artworkSource
    property alias artworkCropRect: dropAreaItem.artworkCropRect
@ -33,6 +32,13 @@ StatusScrollView {
    property string chainName
    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:
    property var layer1Networks
    property var layer2Networks
@ -52,12 +58,12 @@ StatusScrollView {
    QtObject {
        id: d

-        property bool isAssetView: (optionsTab.currentIndex === 1)
        readonly property bool isFullyFilled: root.artworkSource.toString().length > 0
                                              && !!root.name
                                              && !!root.symbol
                                              && !!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
@ -73,26 +79,10 @@ StatusScrollView {
        width: root.viewWidth
        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 {
            elide: Text.ElideRight
            font.pixelSize: Theme.primaryTextFontSize
-            text: qsTr("Artwork")
+            text: root.isAssetView ? qsTr("Icon") : qsTr("Artwork")
        }

        DropAndEditImagePanel {
@ -114,7 +104,7 @@ StatusScrollView {
            label: qsTr("Name")
            charLimit: 15
            placeholderText: qsTr("Name")
-            errorText: qsTr("Collectible name")
+            errorText: d.isAssetView ? qsTr("Asset name") : qsTr("Collectible name")
        }

        CustomStatusInput {
@ -122,13 +112,13 @@ StatusScrollView {

            label: qsTr("Description")
            charLimit: 280
-            placeholderText: qsTr("Describe your collectible")
+            placeholderText: root.isAssetView ? qsTr("Describe your asset") : qsTr("Describe your collectible")
            input.multiline: true
            input.verticalAlignment: Qt.AlignTop
            input.placeholder.verticalAlignment: Qt.AlignTop
            minimumHeight: 108
            maximumHeight: minimumHeight
-            errorText: qsTr("Collectible description")
+            errorText: d.isAssetView ? qsTr("Asset description") : qsTr("Collectible description")
        }

        CustomStatusInput {
@ -137,7 +127,7 @@ StatusScrollView {
            label: qsTr("Symbol")
            charLimit: 6
            placeholderText: qsTr("e.g. DOODLE")
-            errorText: qsTr("Collectible symbol")
+            errorText: d.isAssetView ? qsTr("Asset symbol") :qsTr("Collectible symbol")
            validator.regularExpression: Constants.regularExpressions.asciiPrintable
        }

@ -150,7 +140,7 @@ StatusScrollView {
        StatusEmojiAndColorComboBox {
            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
            model: root.accounts
@ -186,7 +176,8 @@ StatusScrollView {

        CustomSwitchRowComponent {
            id: transferableChecker
-            visible: (optionsTab.currentIndex === 0)
+
+            visible: !root.isAssetView
            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")
            checked: true
@ -194,17 +185,24 @@ StatusScrollView {

        CustomSwitchRowComponent {
            id: selfDestructChecker
-            visible: (optionsTab.currentIndex === 0)
+
+            visible: !root.isAssetView
            label: qsTr("Remotely destructible")
            description: qsTr("Enable to allow you to destroy tokens remotely. Useful for revoking permissions from individuals")
            checked: true
        }

        CustomStatusInput {
-            visible: (optionsTab.currentIndex === 1)
+            id: assetDecimalsInput
+
+            visible: root.isAssetView
            label: qsTr("Decimals")
-            secondaryLabel: "Max 10"
-            placeholderText: qsTr("2")
+            charLimit: 2
+            charLimitLabel: qsTr("Max 10")
+            placeholderText: "2"
+            text: "2" // Default value
+            validators: StatusIntValidator{ bottom: 1; top: 10; }
+            validationMode: StatusInput.ValidationMode.Always
        }

        StatusButton {