status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

storybook(RecipientSelectorPage): Added new page for `RecipientSelector` 

- Added basic models.
This commit is contained in:
Noelia 2024-07-04 17:40:31 +02:00 committed by Noelia
parent bc74724672
commit 4ea73b50b5
1 changed files with 238 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

238
storybook/pages/RecipientSelectorPanelPage.qml Normal file
View File

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