feat(MintAssets): Created preview assets page

- Updated `CommunityTokenView` with assets design.
- Updated storybook to test assets design.

Part of #10624

storybook/figma.json

@@ -34,13 +34,16 @@
     "CommunityTokenView": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A481005&t=Qo2FwPRxvSxbluqB-1",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A479431&t=Qo2FwPRxvSxbluqB-1",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A479570&t=Qo2FwPRxvSxbluqB-1"
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A479570&t=Qo2FwPRxvSxbluqB-1",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?type=design&node-id=29384-568106&t=mAtmLENvQyRJqDGQ-0"
     ],
     "CommunityMintTokensSettingsPanel": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A498587&t=v2Krj5iZQaSTK7Om-1",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480877&t=v2Krj5iZQaSTK7Om-1",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22721%3A498811&t=v2Krj5iZQaSTK7Om-1",
-        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480927&t=v2Krj5iZQaSTK7Om-1"
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A480927&t=v2Krj5iZQaSTK7Om-1",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?type=design&node-id=29566-689073&t=mAtmLENvQyRJqDGQ-0",
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?type=design&node-id=29437-599353&t=mAtmLENvQyRJqDGQ-0"
     ],
     "CommunityMintedTokensView": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2934%3A479136&t=zs22ORYUVDYpqubQ-1"

storybook/pages/CommunityTokenViewPage.qml

@@ -4,6 +4,8 @@ import QtQuick.Layouts 1.14
 
 import AppLayouts.Chat.views.communities 1.0
 
+import StatusQ.Core 0.1
+
 import Storybook 1.0
 import Models 1.0
 
@@ -28,6 +30,7 @@ SplitView {
                 anchors.margins: 50
                 artworkSource: ModelsData.icons.superRare
                 preview: previewBox.checked
+                isAssetView: isAssetBox.checked
                 remotelyDestructState: remotelyDestructStateBox.checked ? 1 /*In progress*/ : 2 /*Completed*/
                 burnState: burnDestructStateBox.checked ? 1 /*In progress*/ : 2 /*Completed*/
                 name: nameText.text
@@ -35,6 +38,7 @@ SplitView {
                 description: descriptionText.text
                 supplyAmount: parseInt(supplyText.text)
                 infiniteSupply: unlimitedSupplyChecker.checked
+                assetDecimals: parseInt(decimalText.text)
                 remainingTokens: parseInt(remainingText.text)
                 transferable: transferibleChecker.checked
                 selfDestruct: selfdestructChecker.checked
@@ -43,7 +47,7 @@ SplitView {
                 chainIcon: ModelsData.networks.ethereum
                 accountName: "helloworld"
 
-                onMintCollectible: logs.logEvent("CommunityTokenView::mintCollectible: \n"
+                onMintCollectible: logs.logEvent("CommunityTokenView::onMintCollectible: \n"
                                                  + "artworkSource: " + artworkSource + "\n"
                                                  + "name: " + name + "\n"
                                                  + "symbol: " + symbol + "\n"
@@ -52,7 +56,19 @@ SplitView {
                                                  + "infiniteSupply: " + infiniteSupply + "\n"
                                                  + "transferable: " + transferable + "\n"
                                                  + "selfDestruct: " + selfDestruct + "\n"
-                                                 + "chainId: " + chainId)
+                                                 + "chainId: " + chainId + "\n"
+                                                 + "accountName: " + accountName)
+
+                onMintAsset: logs.logEvent("CommunityTokenView::onMintAsset: \n"
+                                           + "artworkSource: " + artworkSource + "\n"
+                                           + "name: " + name + "\n"
+                                           + "symbol: " + symbol + "\n"
+                                           + "description: " + description + "\n"
+                                           + "supply: " + supply + "\n"
+                                           + "infiniteSupply: " + infiniteSupply + "\n"
+                                           + "decimals: " + decimals + "\n"
+                                           + "chainId: " + chainId + "\n"
+                                           + "accountName: " + accountName)
             }
         }
 
@@ -70,188 +86,220 @@ SplitView {
         SplitView.minimumWidth: 300
         SplitView.preferredWidth: 300
 
-        ColumnLayout {
+        StatusScrollView {
-
+            width: parent.width
-            CheckBox {
+            height: parent.height
-                id: previewBox
+            contentHeight: _column.implicitHeight
-                text: "Is preview view?"
+            contentWidth: _column.implicitWidth
-                checked: true
-            }
 
             ColumnLayout {
-                Label {
+                id: _column
-                    text: "Minting state:"
-                }
 
-                RadioButton {
+                CheckBox {
-                    id: mintingInProgress
+                    id: previewBox
-                    text: "In progress"
+                    text: "Is preview view?"
-                    onCheckedChanged: if(checked) view.deployState = Constants.BackendProcessState.InProgress
-                }
-
-                RadioButton {
-                    id: mintingFailed
-                    text: "Failed"
-                    onCheckedChanged: if(checked) view.deployState = Constants.BackendProcessState.Failed
-                }
-
-                RadioButton {
-                    id: mintingCompleted
-                    text: "Completed"
                     checked: true
-                    onCheckedChanged: if(checked) view.deployState = Constants.BackendProcessState.Completed
                 }
-            }
 
-            CheckBox {
+                CheckBox {
-                id: remotelyDestructStateBox
+                    id: isAssetBox
-                text: "Remotely destruct in progress"
+                    text: "Is Assets View?"
-                checked: false
+                    checked: false
-            }
-
-            CheckBox {
-                id: burnDestructStateBox
-                text: "Burn in progress"
-                checked: false
-            }
-
-            Label {
-                Layout.topMargin: 10
-                Layout.fillWidth: true
-                text: "Artwork"
-            }
-
-            RadioButton {
-                text: "Small"
-                checked: true
-                onCheckedChanged: view.artworkSource = ModelsData.icons.superRare
-            }
-
-            RadioButton {
-                text: "Medium"
-                onCheckedChanged: view.artworkSource = ModelsData.collectibles.kitty2Big
-            }
-
-            RadioButton {
-                text: "Large"
-                onCheckedChanged: view.artworkSource = ModelsData.banners.superRare
-            }
-
-            Label {
-                Layout.topMargin: 10
-                Layout.fillWidth: true
-                text: "Name"
-            }
-
-            TextField {
-                id: nameText
-                background: Rectangle { border.color: 'lightgrey' }
-                Layout.preferredWidth: 200
-                text: "Art work"
-            }
-
-            Label {
-                Layout.topMargin: 10
-                Layout.fillWidth: true
-                text: "Description"
-            }
-
-            TextField {
-                id: descriptionText
-                background: Rectangle { border.color: 'lightgrey' }
-                Layout.preferredWidth: 200
-                text: "Long art work description Long art work description Long art work description Long art work description Long art work description Long art work description Long art work description Long art work description Long art work description"
-            }
-
-            Label {
-                Layout.topMargin: 10
-                Layout.fillWidth: true
-                text: "Symbol"
-            }
-
-            TextField {
-                id: symbolText
-                background: Rectangle { border.color: 'lightgrey' }
-                Layout.preferredWidth: 200
-                text: "ABC"
-            }
-
-            CheckBox {
-                id: unlimitedSupplyChecker
-                Layout.topMargin: 10
-                text: "Unlimited supply"
-                checked: true
-            }
-
-            Label {
-                visible: !unlimitedSupplyChecker.checked
-                Layout.fillWidth: true
-                text: "Supply"
-            }
-
-            TextField {
-                id: supplyText
-                visible: !unlimitedSupplyChecker.checked
-                background: Rectangle { border.color: 'lightgrey' }
-                Layout.preferredWidth: 200
-                text: "123"
-            }
-
-            TextField {
-                id: remainingText
-                visible: !unlimitedSupplyChecker.checked
-                background: Rectangle { border.color: 'lightgrey' }
-                Layout.preferredWidth: 200
-                text: "123"
-            }
-
-            CheckBox {
-                id: transferibleChecker
-                Layout.topMargin: 10
-                text: "Tranferible"
-                checked: true
-            }
-
-            CheckBox {
-                id: selfdestructChecker
-                text: "Remote self-desctruct"
-                checked: true
-            }
-
-            Label {
-                Layout.topMargin: 10
-                Layout.fillWidth: true
-                text: "Network"
-            }
-
-            RadioButton {
-                id: eth
-                text: "Ethereum Mainnet"
-                checked: true
-                onCheckedChanged:  {
-                    view.chainName = text
-                    view.chainIcon = ModelsData.networks.ethereum
-                    view.chainId = 1
                 }
-            }
 
-            RadioButton {
+                ColumnLayout {
-                id: opt
+                    Label {
-                text: "Optimism"
+                        text: "Minting state:"
-                onCheckedChanged:  {
+                    }
-                    view.chainName = text
+
-                    view.chainIcon = ModelsData.networks.optimism
+                    RadioButton {
-                    view.chainId = 2
+                        id: mintingInProgress
+                        text: "In progress"
+                        onCheckedChanged: if(checked) view.deployState = Constants.BackendProcessState.InProgress
+                    }
+
+                    RadioButton {
+                        id: mintingFailed
+                        text: "Failed"
+                        onCheckedChanged: if(checked) view.deployState = Constants.BackendProcessState.Failed
+                    }
+
+                    RadioButton {
+                        id: mintingCompleted
+                        text: "Completed"
+                        checked: true
+                        onCheckedChanged: if(checked) view.deployState = Constants.BackendProcessState.Completed
+                    }
                 }
-            }
 
-            RadioButton {
+                CheckBox {
-                id: arb
+                    id: remotelyDestructStateBox
-                text: "Arbitrum"
+                    visible: !isAssetBox.checked
-                onCheckedChanged:  {
+                    text: "Remotely destruct in progress"
-                    view.chainName = text
+                    checked: false
-                    view.chainIcon = ModelsData.networks.arbitrum
+                }
-                    view.chainId = 3
+
+                CheckBox {
+                    id: burnDestructStateBox
+                    text: "Burn in progress"
+                    checked: false
+                }
+
+                Label {
+                    Layout.topMargin: 10
+                    Layout.fillWidth: true
+                    text: "Artwork"
+                }
+
+                RadioButton {
+                    text: "Small"
+                    checked: true
+                    onCheckedChanged: view.artworkSource = ModelsData.icons.superRare
+                }
+
+                RadioButton {
+                    text: "Medium"
+                    onCheckedChanged: view.artworkSource = ModelsData.collectibles.kitty2Big
+                }
+
+                RadioButton {
+                    text: "Large"
+                    onCheckedChanged: view.artworkSource = ModelsData.banners.superRare
+                }
+
+                Label {
+                    Layout.topMargin: 10
+                    Layout.fillWidth: true
+                    text: "Name"
+                }
+
+                TextField {
+                    id: nameText
+                    background: Rectangle { border.color: 'lightgrey' }
+                    Layout.preferredWidth: 200
+                    text: "Art work"
+                }
+
+                Label {
+                    Layout.topMargin: 10
+                    Layout.fillWidth: true
+                    text: "Description"
+                }
+
+                TextField {
+                    id: descriptionText
+                    background: Rectangle { border.color: 'lightgrey' }
+                    Layout.preferredWidth: 200
+                    text: "Long art work description Long art work description Long art work description Long art work description Long art work description Long art work description Long art work description Long art work description Long art work description"
+                }
+
+                Label {
+                    Layout.topMargin: 10
+                    Layout.fillWidth: true
+                    text: "Symbol"
+                }
+
+                TextField {
+                    id: symbolText
+                    background: Rectangle { border.color: 'lightgrey' }
+                    Layout.preferredWidth: 200
+                    text: "ABC"
+                }
+
+                CheckBox {
+                    id: unlimitedSupplyChecker
+                    Layout.topMargin: 10
+                    text: "Unlimited supply"
+                    checked: true
+                }
+
+                Label {
+                    visible: !unlimitedSupplyChecker.checked
+                    Layout.fillWidth: true
+                    text: "Supply"
+                }
+
+                TextField {
+                    id: supplyText
+                    visible: !unlimitedSupplyChecker.checked
+                    background: Rectangle { border.color: 'lightgrey' }
+                    Layout.preferredWidth: 200
+                    text: "123"
+                }
+
+                TextField {
+                    id: remainingText
+                    visible: !unlimitedSupplyChecker.checked
+                    background: Rectangle { border.color: 'lightgrey' }
+                    Layout.preferredWidth: 200
+                    text: "123"
+                }
+
+                Label {
+                    Layout.topMargin: 10
+                    Layout.fillWidth: true
+                    visible: isAssetBox.checked
+                    text: "Decimal"
+                }
+
+                TextField {
+                    id: decimalText
+                    Layout.preferredWidth: 200
+                    background: Rectangle { border.color: 'lightgrey' }
+                    visible: isAssetBox.checked
+                    text: "2"
+                }
+
+                CheckBox {
+                    id: transferibleChecker
+                    Layout.topMargin: 10
+                    visible: !isAssetBox.checked
+                    text: "Tranferible"
+                    checked: true
+                }
+
+                CheckBox {
+                    id: selfdestructChecker
+                    visible: !isAssetBox.checked
+                    text: "Remote self-desctruct"
+                    checked: true
+                }
+
+                Label {
+                    Layout.topMargin: 10
+                    Layout.fillWidth: true
+                    text: "Network"
+                }
+
+                RadioButton {
+                    id: eth
+                    text: "Ethereum Mainnet"
+                    checked: true
+                    onCheckedChanged:  {
+                        view.chainName = text
+                        view.chainIcon = ModelsData.networks.ethereum
+                        view.chainId = 1
+                    }
+                }
+
+                RadioButton {
+                    id: opt
+                    text: "Optimism"
+                    onCheckedChanged:  {
+                        view.chainName = text
+                        view.chainIcon = ModelsData.networks.optimism
+                        view.chainId = 2
+                    }
+                }
+
+                RadioButton {
+                    id: arb
+                    text: "Arbitrum"
+                    onCheckedChanged:  {
+                        view.chainName = text
+                        view.chainIcon = ModelsData.networks.arbitrum
+                        view.chainId = 3
+                    }
                 }
             }
         }

ui/app/AppLayouts/Chat/views/communities/CommunityNewTokenView.qml

@@ -209,7 +209,7 @@ StatusScrollView {
             id: assetDecimalsInput
 
             visible: root.isAssetView
-            label: qsTr("Decimals")
+            label: qsTr("Decimals (DP)")
             charLimit: 2
             charLimitLabel: qsTr("Max 10")
             placeholderText: "2"

ui/app/AppLayouts/Chat/views/communities/CommunityTokenView.qml

@@ -18,26 +18,35 @@ StatusScrollView {
 
     property int viewWidth: 560 // by design
     property bool preview: false
+    property bool isAssetView: false
 
-    // Collectible object properties:
+    // Token properties
     property alias artworkSource: image.source
     property rect artworkCropRect
+    property string name
     property alias symbol: symbolBox.value
     property alias description: descriptionItem.text
-    property alias chainName: chainText.text
-    property string name
     property int supplyAmount
     property int remainingTokens
     property bool infiniteSupply
-    property bool transferable
+
-    property bool selfDestruct
+    property alias accountName: accountBox.value
     property int chainId
     property string chainIcon
-    property int deployState: Constants.BackendProcessState.None
+    property alias chainName: chainText.text
-    property int remotelyDestructState: Constants.BackendProcessState.None
+
-    property int burnState: Constants.BackendProcessState.None
     property var tokenOwnersModel
-    property alias accountName: accountBox.value
+
+    property int deployState: Constants.BackendProcessState.None
+    property int burnState: Constants.BackendProcessState.None
+
+    // Collectible object properties (ERC721)
+    property bool transferable
+    property bool selfDestruct
+    property int remotelyDestructState: Constants.BackendProcessState.None
+
+    // Asset properties (ERC20)
+    property alias assetDecimals: decimalsBox.value
 
     signal mintCollectible(url artworkSource,
                            string name,
@@ -50,10 +59,20 @@ StatusScrollView {
                            int chainId,
                            string accountName)
 
+    signal mintAsset(url artworkSource,
+                     string name,
+                     string symbol,
+                     string description,
+                     int supply,
+                     bool infiniteSupply,
+                     int decimals,
+                     int chainId,
+                     string accountName)
+
     QtObject {
         id: d
 
-        readonly property int imageSelectorRectSize: 280
+        readonly property int imageSelectorRectSize: root.isAssetView ? 104 : 280
         readonly property int iconSize: 20
         readonly property string infiniteSymbol: "∞"
 
@@ -97,8 +116,10 @@ StatusScrollView {
                 elide: Text.ElideRight
                 font.pixelSize: Theme.primaryTextFontSize
                 text: (root.deployState === Constants.BackendProcessState.InProgress) ?
-                          qsTr("Collectible is being minted") :
+                          (root.isAssetView ?
-                          (root.deployState === Constants.BackendProcessState.Failed) ? qsTr("Collectible minting failed") : ""
+                               qsTr("Asset is being minted") : qsTr("Collectible is being minted")) :
+                          (root.deployState === Constants.BackendProcessState.Failed) ?
+                              (root.isAssetView ? qsTr("Asset minting failed") : qsTr("Collectible minting failed")) : ""
                 color: (root.deployState === Constants.BackendProcessState.Failed) ? Theme.palette.dangerColor1 : Theme.palette.directColor1
             }
         }
@@ -107,7 +128,7 @@ StatusScrollView {
             Layout.preferredHeight: d.imageSelectorRectSize
             Layout.preferredWidth: Layout.preferredHeight
 
-            radius: 8
+            radius: root.isAssetView ? Layout.preferredWidth / 2 : 8
             color:Theme.palette.baseColor2
             clip: true
 
@@ -231,11 +252,20 @@ StatusScrollView {
             }
 
             CustomPreviewBox {
+                id: decimalsBox
+
+                visible: root.isAssetView
+                label: qsTr("DP")
+            }
+
+            CustomPreviewBox {
+                visible: !root.isAssetView
                 label: qsTr("Transferable")
                 value: root.transferable ? qsTr("Yes") : qsTr("No")
             }
 
             CustomPreviewBox {
+                visible: !root.isAssetView
                 label: qsTr("Remotely destructible")
                 value: root.selfDestruct ? qsTr("Yes") : qsTr("No")
             }
@@ -320,16 +350,28 @@ StatusScrollView {
             text: qsTr("Mint")
 
             onClicked: {
-                root.mintCollectible(root.artworkSource,
+                if(root.isAssetView) {
-                                     root.name,
+                    root.mintAsset(root.artworkSource,
-                                     root.symbol,
+                                   root.name,
-                                     root.description,
+                                   root.symbol,
-                                     root.supplyAmount,
+                                   root.description,
-                                     root.infiniteSupply,
+                                   root.supplyAmount,
-                                     root.transferable,
+                                   root.infiniteSupply,
-                                     root.selfDestruct,
+                                   root.assetDecimals,
-                                     root.chainId,
+                                   root.chainId,
-                                     root.accountName)
+                                   root.accountName)
+                } else {
+                    root.mintCollectible(root.artworkSource,
+                                         root.name,
+                                         root.symbol,
+                                         root.description,
+                                         root.supplyAmount,
+                                         root.infiniteSupply,
+                                         root.transferable,
+                                         root.selfDestruct,
+                                         root.chainId,
+                                         root.accountName)
+                }
             }
         }