diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml index ea3c76e1fb..8108ff52d5 100644 --- a/storybook/PagesModel.qml +++ b/storybook/PagesModel.qml @@ -33,6 +33,14 @@ ListModel { title: "JoinCommunityView" section: "Views" } + ListElement { + title: "CommunityNewCollectibleView" + section: "Views" + } + ListElement { + title: "CommunityCollectibleView" + section: "Views" + } ListElement { title: "StatusCommunityCard" section: "Panels" diff --git a/storybook/figma.json b/storybook/figma.json index 24545804af..9003ae8cd5 100644 --- a/storybook/figma.json +++ b/storybook/figma.json @@ -107,5 +107,15 @@ "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" + ], + "CommunityCollectibleView": [ + "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" + ], + "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" ] } diff --git a/storybook/pages/CommunityCollectibleViewPage.qml b/storybook/pages/CommunityCollectibleViewPage.qml new file mode 100644 index 0000000000..df20980055 --- /dev/null +++ b/storybook/pages/CommunityCollectibleViewPage.qml @@ -0,0 +1,216 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 + +import AppLayouts.Chat.views.communities 1.0 + +import Storybook 1.0 +import Models 1.0 + +SplitView { + + Logs { id: logs } + + SplitView { + orientation: Qt.Vertical + SplitView.fillWidth: true + + Item { + SplitView.fillWidth: true + SplitView.fillHeight: true + + CommunityCollectibleView { + id: view + + anchors.fill: parent + anchors.margins: 50 + holdersModel: TokenHoldersModel {} + artworkSource: ModelsData.icons.superRare + preview: previewBox.checked + deployState: mintingStateBox.checked ? 1 : 0 + name: nameText.text + symbol: symbolText.text + description: descriptionText.text + supplyText: supplyText.text + infiniteSupply: unlimitedSupplyChecker.checked + transferable: transferibleChecker.checked + selfDestruct: selfdestructChecker.checked + chainId: 1 + chainName: "Ethereum Mainnet" + chainIcon: ModelsData.networks.ethereum + + onMintCollectible: logs.logEvent("CommunityCollectibleView::mintCollectible: \n" + + "artworkSource: " + artworkSource + "\n" + + "name: " + name + "\n" + + "symbol: " + symbol + "\n" + + "description: " + description + "\n" + + "supply: " + supply + "\n" + + "infiniteSupply: " + infiniteSupply + "\n" + + "transferable: " + transferable + "\n" + + "selfDestruct: " + selfDestruct + "\n" + + "chainId: " + chainId) + } + } + + LogsAndControlsPanel { + id: logsAndControlsPanel + + SplitView.minimumHeight: 100 + SplitView.preferredHeight: 150 + + logsView.logText: logs.logText + } + } + + Pane { + SplitView.minimumWidth: 300 + SplitView.preferredWidth: 300 + + ColumnLayout { + + CheckBox { + id: previewBox + text: "Is preview view?" + checked: true + } + + CheckBox { + id: mintingStateBox + text: "Minting in progress" + checked: true + } + + 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" + } + + 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 { + 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/storybook/pages/CommunityMintTokensSettingsPanelPage.qml b/storybook/pages/CommunityMintTokensSettingsPanelPage.qml index eebd6670e6..e9de60962e 100644 --- a/storybook/pages/CommunityMintTokensSettingsPanelPage.qml +++ b/storybook/pages/CommunityMintTokensSettingsPanelPage.qml @@ -29,7 +29,7 @@ SplitView { } } communitiesStore: QtObject { - + readonly property TokenHoldersModel holdersModel: TokenHoldersModel {} property var layer1Networks: NetworksModel.layer1Networks property var layer2Networks: NetworksModel.layer2Networks property var testNetworks: NetworksModel.testNetworks @@ -39,9 +39,11 @@ SplitView { function mintCollectible(communityId, address, artworkSource, name, symbol, description, supply, infiniteSupply, transferable, selfDestruct, chainId) { - logs.logEvent("CommunityMintTokensSettingsPanel::mintCollectible") + logs.logEvent("CommunityMintTokensSettingsPanel::mintCollectible") } } + + tokensModel: ListModel {} } } @@ -52,11 +54,5 @@ SplitView { SplitView.preferredHeight: 150 logsView.logText: logs.logText - - CheckBox { - id: isOwnerCheckBox - - text: "Is owner" - } } } diff --git a/storybook/pages/CommunityNewCollectibleViewPage.qml b/storybook/pages/CommunityNewCollectibleViewPage.qml new file mode 100644 index 0000000000..8401361f58 --- /dev/null +++ b/storybook/pages/CommunityNewCollectibleViewPage.qml @@ -0,0 +1,52 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 + +import StatusQ.Core.Theme 0.1 +import StatusQ.Components 0.1 + +import AppLayouts.Chat.views.communities 1.0 + +import Storybook 1.0 +import Models 1.0 + +import utils 1.0 + +SplitView { + + Logs { id: logs } + + SplitView { + orientation: Qt.Vertical + SplitView.fillWidth: true + + Item { + SplitView.fillWidth: true + SplitView.fillHeight: true + + CommunityNewCollectibleView { + anchors.fill: parent + anchors.margins: 50 + store: QtObject { + property var layer1Networks: NetworksModel.layer1Networks + property var layer2Networks: NetworksModel.layer2Networks + property var testNetworks: NetworksModel.testNetworks + property var enabledNetworks: NetworksModel.enabledNetworks + property var allNetworks: enabledNetworks + } + + onPreviewClicked: logs.logEvent("CommunityNewCollectibleView::previewClicked") + } + } + + + LogsAndControlsPanel { + id: logsAndControlsPanel + + SplitView.minimumHeight: 100 + SplitView.preferredHeight: 150 + + logsView.logText: logs.logText + } + } +} diff --git a/storybook/src/Models/TokenHoldersModel.qml b/storybook/src/Models/TokenHoldersModel.qml new file mode 100644 index 0000000000..7e8d4ab0b8 --- /dev/null +++ b/storybook/src/Models/TokenHoldersModel.qml @@ -0,0 +1,35 @@ +import QtQuick 2.15 + +ListModel { + + readonly property string image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/ + nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" + readonly property var data: [ + { + ensName: "carmen.eth", + walletAddress: "0xb794f5450ba39494ce839613fffba74279579268", + imageSource: image, + amount: 3 + }, + { + ensName: "chris.eth", + walletAddress: "0xb794f5ea0ba39494ce839613fffba74279579268", + imageSource: image, + amount: 2 + }, + { + ensName: "emily.eth", + walletAddress: "0xb794f5ea0ba39494ce839613fffba74279579268", + imageSource: image, + amount: 2 + }, + { + ensName: "", + walletAddress: "0xb794f5ea0ba39494ce839613fffba74279579268", + imageSource: "", + amount: 1 + } + ] + + Component.onCompleted: append(data) +} diff --git a/storybook/src/Models/qmldir b/storybook/src/Models/qmldir index 13dda66f1f..e1126fc971 100644 --- a/storybook/src/Models/qmldir +++ b/storybook/src/Models/qmldir @@ -8,3 +8,4 @@ AssetsModel 1.0 AssetsModel.qml CollectiblesModel 1.0 CollectiblesModel.qml ChannelsModel 1.0 ChannelsModel.qml AssetsCollectiblesIconsModel 1.0 AssetsCollectiblesIconsModel.qml +TokenHoldersModel 1.0 TokenHoldersModel.qml