diff --git a/storybook/figma.json b/storybook/figma.json index 41ecc9ca9f..34bdf9ce3d 100644 --- a/storybook/figma.json +++ b/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" diff --git a/storybook/pages/CommunityTokenViewPage.qml b/storybook/pages/CommunityTokenViewPage.qml index 1b234c2dbc..c61007fe6b 100644 --- a/storybook/pages/CommunityTokenViewPage.qml +++ b/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 { - - CheckBox { - id: previewBox - text: "Is preview view?" - checked: true - } + StatusScrollView { + width: parent.width + height: parent.height + contentHeight: _column.implicitHeight + contentWidth: _column.implicitWidth ColumnLayout { - Label { - text: "Minting state:" - } + id: _column - RadioButton { - 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" + CheckBox { + id: previewBox + text: "Is preview view?" checked: true - onCheckedChanged: if(checked) view.deployState = Constants.BackendProcessState.Completed } - } - CheckBox { - id: remotelyDestructStateBox - text: "Remotely destruct in progress" - 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 + CheckBox { + id: isAssetBox + text: "Is Assets View?" + checked: false } - } - RadioButton { - id: opt - text: "Optimism" - onCheckedChanged: { - view.chainName = text - view.chainIcon = ModelsData.networks.optimism - view.chainId = 2 + ColumnLayout { + Label { + text: "Minting state:" + } + + RadioButton { + 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 { - id: arb - text: "Arbitrum" - onCheckedChanged: { - view.chainName = text - view.chainIcon = ModelsData.networks.arbitrum - view.chainId = 3 + CheckBox { + id: remotelyDestructStateBox + visible: !isAssetBox.checked + text: "Remotely destruct in progress" + 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" + } + + 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 + } } } } diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityNewTokenView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityNewTokenView.qml index 2f406adde2..aca097c49d 100644 --- a/ui/app/AppLayouts/Chat/views/communities/CommunityNewTokenView.qml +++ b/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" diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityTokenView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityTokenView.qml index 03a34b2cee..2b3685186e 100644 --- a/ui/app/AppLayouts/Chat/views/communities/CommunityTokenView.qml +++ b/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 int remotelyDestructState: Constants.BackendProcessState.None - property int burnState: Constants.BackendProcessState.None + property alias chainName: chainText.text + 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.deployState === Constants.BackendProcessState.Failed) ? qsTr("Collectible minting failed") : "" + (root.isAssetView ? + 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, - root.name, - root.symbol, - root.description, - root.supplyAmount, - root.infiniteSupply, - root.transferable, - root.selfDestruct, - root.chainId, - root.accountName) + if(root.isAssetView) { + root.mintAsset(root.artworkSource, + root.name, + root.symbol, + root.description, + root.supplyAmount, + root.infiniteSupply, + root.assetDecimals, + root.chainId, + 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) + } } }