feat(MintAssets): Create new asset page / flow

- Added tabs.
- Updated pages with new entries.

Part of #10623

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"

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!")
+                }
             }
         }
     }

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 {