feat(MintAssets): Created preview assets page

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

Part of #10624
This commit is contained in:
Noelia 2023-05-25 12:31:32 +02:00 committed by Noelia
parent 00bdb0ff15
commit 775a93e82c
4 changed files with 293 additions and 200 deletions

View File

@ -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"

View File

@ -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
}
}
}
}

View File

@ -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"

View File

@ -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)
}
}
}