diff --git a/storybook/figma.json b/storybook/figma.json index 405aff5d11..da0b7cba52 100644 --- 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" diff --git a/ui/app/AppLayouts/Chat/panels/communities/CommunityMintTokensSettingsPanel.qml b/ui/app/AppLayouts/Chat/panels/communities/CommunityMintTokensSettingsPanel.qml index cd4c5dd27d..3dc244de3f 100644 --- 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!") + } } } } diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityNewCollectibleView.qml index 2ffe84cadc..31386fa554 100644 --- 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 {