From 4ea73b50b532b835672fdc7bf055c91d1e8eb666 Mon Sep 17 00:00:00 2001 From: Noelia Date: Thu, 4 Jul 2024 17:40:31 +0200 Subject: [PATCH] storybook(RecipientSelectorPage): Added new page for `RecipientSelector` - Added basic models. --- .../pages/RecipientSelectorPanelPage.qml | 238 ++++++++++++++++++ 1 file changed, 238 insertions(+) create mode 100644 storybook/pages/RecipientSelectorPanelPage.qml diff --git a/storybook/pages/RecipientSelectorPanelPage.qml b/storybook/pages/RecipientSelectorPanelPage.qml new file mode 100644 index 0000000000..81b2fbdcfc --- /dev/null +++ b/storybook/pages/RecipientSelectorPanelPage.qml @@ -0,0 +1,238 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import AppLayouts.Wallet 1.0 + +import shared.popups.send.panels 1.0 +import shared.stores.send 1.0 + +import StatusQ.Core.Utils 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ 0.1 + +import utils 1.0 + +import Storybook 1.0 +import Models 1.0 + +import SortFilterProxyModel 0.2 + +SplitView { + id: root + + readonly property var chainColors: ({ + eth: "#627EEA", + oeth: "#E90101", + arb1: "#939ba1" + } + ) + + ListModel { + id: savedAddressesModel + + Component.onCompleted: { + const data = [] + for (let i = 0; i < 10; i++) + data.push({ + name: "some saved addr name " + i, + ens: [], + address: "0x2B748A02e06B159C7C3E98F5064577B96E55A7b4", + chainShortNames: "eth:arb1" + }) + append(data) + } + } + + ListModel { + id: walletAccountsModel + readonly property var data: [ + { + name: "helloworld", + emoji: "😋", + colorId: Constants.walletAccountColors.primary, + color: "#2A4AF5", + address: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240", + walletType: "", + preferredSharingChainIds: "5:420:421613", + colorizedChainShortNames: WalletUtils.colorizedChainPrefixNew(chainColors, "eth:oeth:arb1:"), + currencyBalance: ({amount: 1.25, + symbol: "USD", + displayDecimals: 2, + stripTrailingZeroes: false}), + migratedToKeycard: true + }, + { + name: "Hot wallet (generated)", + emoji: "🚗", + colorId: Constants.walletAccountColors.army, + color: "#216266", + address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881", + walletType: Constants.generatedWalletType, + preferredSharingChainIds: "5:420:421613", + colorizedChainShortNames: WalletUtils.colorizedChainPrefixNew(chainColors, "eth:oeth:arb1:"), + currencyBalance: ({amount: 10, + symbol: "USD", + displayDecimals: 2, + stripTrailingZeroes: false}), + migratedToKeycard: false + }, + { + name: "Family (seed)", + emoji: "🎨", + colorId: Constants.walletAccountColors.magenta, + color: "#EC266C", + address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8882", + walletType: Constants.seedWalletType, + preferredSharingChainIds: "5:420:421613", + colorizedChainShortNames: WalletUtils.colorizedChainPrefixNew(chainColors, "eth:oeth:arb1:"), + currencyBalance: ({amount: 110.05, + symbol: "USD", + displayDecimals: 2, + stripTrailingZeroes: false}), + migratedToKeycard: false + }, + { + name: "Tag Heuer (watch)", + emoji: "⌚", + colorId: Constants.walletAccountColors.copper, + color: "#CB6256", + address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8883", + walletType: Constants.watchWalletType, + preferredSharingChainIds: "5:420:421613", + colorizedChainShortNames: WalletUtils.colorizedChainPrefixNew(chainColors, "eth:oeth:arb1:"), + currencyBalance: ({amount: 3, + symbol: "USD", + displayDecimals: 2, + stripTrailingZeroes: false}), + migratedToKeycard: false + }, + { + name: "Fab (key)", + emoji: "🔑", + colorId: Constants.walletAccountColors.camel, + color: "#C78F67", + address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8884", + walletType: Constants.keyWalletType, + preferredSharingChainIds: "5:420:421613", + colorizedChainShortNames: WalletUtils.colorizedChainPrefixNew(chainColors, "eth:oeth:arb1:"), + currencyBalance: ({amount: 999, + symbol: "USD", + displayDecimals: 2, + stripTrailingZeroes: false}), + migratedToKeycard: false + } + ] + + Component.onCompleted: append(data) + + } + + ListModel { + id: recentsModel + + readonly property var data: [ + { + activityEntry: + { + sender: "0x10bbfe4072ebb77e53aa9117c7300531d151feaf", + recipient: "0x10bbfe4072ebb77e53aa9117c7300531d151ffff", + timestamp: "1715274859", + txType: 0, + amountCurrency: { + objectName: "", + amount: 1, + symbol:"", + displayDecimals: 0, + stripTrailingZeroes: true + } + } + }, + { + activityEntry: + { + sender: "0x1bbbfe4072ebb77e53aa9117c7300531d151feaf", + recipient: "0xebfbfe4072ebb77e53aa9117c7300531d1511111", + timestamp: "1709832115", + txType: 1, + amountCurrency: { + objectName: "", + amount: 1, + symbol:"", + displayDecimals: 0, + stripTrailingZeroes: true + } + } + } + ] + + Component.onCompleted: append(data) + } + + SplitView { + SplitView.fillWidth: true + SplitView.fillHeight: true + + orientation: Qt.Vertical + + Rectangle { + SplitView.fillWidth: true + SplitView.fillHeight: true + color: Theme.palette.baseColor3 + + RecipientSelectorPanel { + anchors.centerIn: parent + height: heightSlider.value + width: widthSlider.value + savedAddressesModel: savedAddressesModel + myAccountsModel: walletAccountsModel + recentRecipientsModel: recentsModel + + onRecipientSelected: logs.logEvent("RecipientSelectorPanel::onRecipientSelected - [Type, Recipient]: [" + type + ", " + recipient + "]") + onRecentRecipientsTabSelected: logs.logEvent("RecipientSelectorPanel::onRecentRecipientsTabSelected - Recents tab selected") + } + } + + Logs { + id: logs + } + + LogsView { + clip: true + + SplitView.preferredHeight: 150 + SplitView.fillWidth: true + + logText: logs.logText + } + } + + Pane { + SplitView.preferredWidth: 300 + + ColumnLayout { + Label { + text: "Heigth:" + } + Slider { + id: heightSlider + from: 300 + to: 600 + stepSize: 1 + value: 500 + } + Label { + text: "Width:" + } + Slider { + id: widthSlider + from: 300 + to: 600 + stepSize: 1 + value: 450 + } + } + } +} + +// category: Panel