status-desktop/storybook/pages/ProfileDialogViewPage.qml

523 lines
24 KiB
QML

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import utils 1.0
import shared.views 1.0
import mainui 1.0
import StatusQ 0.1
import StatusQ.Core.Utils 0.1 as CoreUtils
import Storybook 1.0
import Models 1.0
SplitView {
id: root
property bool globalUtilsReady: false
property bool mainModuleReady: false
// globalUtilsInst mock
QtObject {
function getEmojiHashAsJson(publicKey) {
return JSON.stringify(["👨🏻‍🍼", "🏃🏿‍♂️", "🌇", "🤶🏿", "🏮","🤷🏻‍♂️", "🤦🏻", "📣", "🤎", "👷🏽", "😺", "🥞", "🔃", "🧝🏽‍♂️"])
}
function getColorId(publicKey) { return colorId.value }
function getCompressedPk(publicKey) { return "zx3sh" + publicKey }
function getColorHashAsJson(publicKey) {
return JSON.stringify([{colorId: 0, segmentLength: 1},
{colorId: 19, segmentLength: 2}])
}
function isCompressedPubKey(publicKey) { return true }
Component.onCompleted: {
Utils.globalUtilsInst = this
root.globalUtilsReady = true
}
Component.onDestruction: {
root.globalUtilsReady = false
Utils.globalUtilsInst = {}
}
}
// mainModuleInst mock
QtObject {
function getContactDetailsAsJson(publicKey, getVerificationRequest) {
return JSON.stringify({ displayName: displayName.text || "Mock User Name",
optionalName: optionalName.text,
displayIcon: "",
publicKey: publicKey,
name: name.text,
ensVerified: ensVerified.checked,
alias: "Mock Alias Triplet",
lastUpdated: Date.now(),
lastUpdatedLocally: Date.now(),
localNickname: localNickname.text,
thumbnailImage: "",
largeImage: userImage.checked ? Style.png("status-logo") : "",
isContact: isContact.checked,
isAdded: isAdded.checked,
isBlocked: isBlocked.checked,
removed: removed.checked,
requestReceived: hasAddedUs.checked,
hasAddedUs: hasAddedUs.checked, // same as above
isSyncing: false,
trustStatus: trustStatus.currentValue,
verificationStatus: Constants.verificationStatus.unverified,
incomingVerificationStatus: Constants.verificationStatus.unverified,
bio: bio.text,
socialLinks: JSON.stringify
([{
text: "__twitter",
url: "https://twitter.com/ethstatus",
icon: "twitter"
},
{
text: "__github",
url: "https://github.com/status-im",
icon: "github"
}])
})
}
Component.onCompleted: {
Utils.mainModuleInst = this
root.mainModuleReady = true
}
Component.onDestruction: {
root.mainModuleReady = false
Utils.mainModuleInst = {}
}
}
Logs { id: logs }
Popups {
popupParent: root
rootStore: QtObject {}
}
SplitView {
orientation: Qt.Vertical
SplitView.fillWidth: true
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
ScrollView {
width: parent.width
height: parent.height
clip: true
Loader {
active: root.globalUtilsReady && root.mainModuleReady
width: parent.availableWidth
height: parent.availableHeight
sourceComponent: ProfileDialogView {
implicitWidth: 640
publicKey: switchOwnProfile.checked ? "0xdeadbeef" : "0xrandomguy"
onCloseRequested: logs.logEvent("closeRequested()")
profileStore: QtObject {
readonly property string pubkey: "0xdeadbeef"
readonly property string ensName: name.text
function getQrCodeSource() {
return ""
}
function copyToClipboard(text) {
logs.logEvent("profileStore::copyToClipboard", ["text"], arguments)
}
}
contactsStore: QtObject {
readonly property string myPublicKey: "0xdeadbeef"
function joinPrivateChat(publicKey) {
logs.logEvent("contactsStore::joinPrivateChat", ["publicKey"], arguments)
}
function markUntrustworthy(publicKey) {
logs.logEvent("contactsStore::markUntrustworthy", ["publicKey"], arguments)
}
function removeContact(publicKey) {
logs.logEvent("contactsStore::removeContact", ["publicKey"], arguments)
}
function acceptContactRequest(publicKey) {
logs.logEvent("contactsStore::acceptContactRequest", ["publicKey"], arguments)
}
function dismissContactRequest(publicKey) {
logs.logEvent("contactsStore::dismissContactRequest", ["publicKey"], arguments)
}
function removeTrustStatus(publicKey) {
logs.logEvent("contactsStore::removeTrustStatus", ["publicKey"], arguments)
}
function removeContactRequestRejection(publicKey) {
logs.logEvent("contactsStore::removeContactRequestRejection", ["publicKey"], arguments)
}
function verifiedUntrustworthy(publicKey) {
logs.logEvent("contactsStore::verifiedUntrustworthy", ["publicKey"], arguments)
}
}
communitiesModel: ListModel {
ListElement {
name: "Not the cool gang"
amISectionAdmin: false
description: "Nothing to write home about"
color: "indigo"
image: ""
joined: true
members: [
ListElement { displayName: "Joe" }
]
}
ListElement {
name: "Awesome bunch"
amISectionAdmin: true
description: "Where the cool guys hang out & Nothing to write home about"
color: "green"
image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
joined: true
members: [
ListElement { displayName: "Alex" },
ListElement { displayName: "AlexJb" },
ListElement { displayName: "Michal" },
ListElement { displayName: "Noelia" },
ListElement { displayName: "Lukáš" }
]
}
ListElement {
name: "Invisible community (should not display!)"
amISectionAdmin: false
description: "Get outta here"
color: "red"
image: ""
joined: false
members: []
}
}
walletStore: QtObject {
function switchAccountByAddress(address) {
logs.logEvent("walletStore::switchAccountByAddress", ["address"], arguments)
}
function selectCollectible(slug, id) {
logs.logEvent("walletStore::selectCollectible", ["slug", "id"], arguments)
}
readonly property var accounts: ListModel {
ListElement {
name: "My Status Account"
address: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7420"
color: "aliceblue"
emoji: "🇨🇿"
walletType: ""
}
ListElement {
name: "testing (no emoji, colored, saved, seed)"
address: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7000"
color: "olive"
walletType: "seed"
}
ListElement {
name: "My Bro's Account"
address: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421"
color: "ghostwhite"
emoji: "🇸🇰"
walletType: "watch"
}
ListElement {
name: "Keycard"
address: "0xdeadbeef"
color: "red"
emoji: ""
walletType: "key"
}
}
function getNameForSavedWalletAddress(address) {
return CoreUtils.ModelUtils.getByKey(savedAddresses, "address", address, "name") ?? ""
}
function createOrUpdateSavedAddress(name, address, favourite) {
logs.logEvent("walletStore::createOrUpdateSavedAddress", ["name", "address", "favourite"], arguments)
savedAddresses.append({name, address, favourite, ens: false})
return "" // no error
}
readonly property var savedAddresses: ListModel {
ListElement {
name: "My Status Saved Account"
address: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7000"
favourite: true
ens: false
}
}
readonly property var currentAccount: QtObject {
readonly property var assets: ListModel {
readonly property var data: [
{
symbol: "MANA",
enabledNetworkBalance: {
amount: 301,
symbol: "MANA"
},
changePct24hour: -2.1,
visibleForNetworkWithPositiveBalance: true
},
{
symbol: "AAVE",
enabledNetworkBalance: {
amount: 23.3,
symbol: "AAVE"
},
changePct24hour: 4.56,
visibleForNetworkWithPositiveBalance: true
},
{
symbol: "POLY",
enabledNetworkBalance: {
amount: 3590,
symbol: "POLY"
},
changePct24hour: -11.6789,
visibleForNetworkWithPositiveBalance: true
},
{
symbol: "CDT",
enabledNetworkBalance: {
amount: 1000,
symbol: "CDT"
},
changePct24hour: 0,
visibleForNetworkWithPositiveBalance: true
},
{
symbol: "MKR",
enabledNetworkBalance: {
amount: 1.3,
symbol: "MKR"
},
//changePct24hour: undefined // NB 'undefined' on purpose
visibleForNetworkWithPositiveBalance: true
},
{
symbol: "InvisibleHere",
enabledNetworkBalance: {},
changePct24hour: 0,
visibleForNetworkWithPositiveBalance: false
}
]
Component.onCompleted: append(data)
}
}
readonly property var flatCollectibles: ListModel {
readonly property var data: [
{
//id: 123,
name: "Crypto Kitties",
description: "Super Crypto Kitty",
backgroundColor: "",
imageUrl: ModelsData.collectibles.cryptoKitties,
permalink: "",
isLoading: false
},
{
id: 34545656768,
name: "Kitty 1",
description: "",
backgroundColor: "green",
imageUrl: ModelsData.collectibles.kitty1Big,
permalink: "",
isLoading: false
},
{
id: 123456,
name: "Kitty 2",
description: "",
backgroundColor: "",
imageUrl: ModelsData.collectibles.kitty2Big,
permalink: "",
isLoading: false
},
{
id: 12345645459537432,
name: "",
description: "Kitty 3 description",
backgroundColor: "oink",
imageUrl: ModelsData.collectibles.kitty3Big,
permalink: "",
isLoading: false
},
{
id: 691,
name: "KILLABEAR #691",
description: "Please note that weapons are not yet reflected in the rarity stats.",
backgroundColor: "#807c56",
imageUrl: "https://assets.killabears.com/content/killabears/img/691-e81f892696a8ae700e0dbc62eb072060679a2046d1ef5eb2671bdb1fad1f68e3.png",
permalink: "https://opensea.io/assets/ethereum/0xc99c679c50033bbc5321eb88752e89a93e9e83c5/691",
isLoading: true
}
]
Component.onCompleted: append(data)
}
}
}
}
}
}
LogsAndControlsPanel {
SplitView.minimumHeight: 100
SplitView.preferredHeight: 350
logsView.logText: logs.logText
ColumnLayout {
width: parent.width
RowLayout {
Layout.fillWidth: true
Switch {
id: switchOwnProfile
text: "Own profile"
checked: false
}
}
RowLayout {
Layout.fillWidth: true
Label { text: "localNickname:" }
TextField {
id: localNickname
text: "MockNickname"
placeholderText: "Local Nickname"
}
Label { text: "displayName:" }
TextField {
id: displayName
placeholderText: "Display Name"
}
Label { text: "optionalName:" }
TextField {
id: optionalName
placeholderText: "Optional/Original Name"
text: ""
}
}
RowLayout {
CheckBox {
id: userImage
text: "User image"
checked: true
}
Label {
font.italic: true
text: "or"
}
Label {
enabled: !userImage.checked
text: "colorId"
}
SpinBox {
id: colorId
enabled: !userImage.checked
from: 0
to: 11 // Theme.palette.userCustomizationColors.length
}
}
RowLayout {
Layout.fillWidth: true
CheckBox {
id: ensVerified
checked: true
text: "ensVerified"
}
Label { text: "name:" }
TextField {
id: name
enabled: ensVerified.checked
text: ensVerified.checked ? "mock-ens-name.eth" : ""
placeholderText: "ENS name"
}
}
RowLayout {
Layout.fillWidth: true
enabled: !switchOwnProfile.checked
CheckBox {
id: isContact
enabled: false
checked: isAdded.checked && hasAddedUs.checked
text: "isContact"
}
CheckBox {
id: isAdded
checked: true
text: "isAdded"
}
CheckBox {
id: hasAddedUs
checked: true
text: "hasAddedUs"
}
CheckBox {
id: removed
text: "removed"
}
CheckBox {
id: isBlocked
text: "isBlocked"
}
}
RowLayout {
Layout.fillWidth: true
enabled: !switchOwnProfile.checked
Label { text: "trustStatus:" }
ComboBox {
id: trustStatus
textRole: "text"
valueRole: "value"
model: [
{ value: Constants.trustStatus.unknown, text: "unknown" },
{ value: Constants.trustStatus.trusted, text: "trusted" },
{ value: Constants.trustStatus.untrustworthy, text: "untrustworthy" }
]
}
}
RowLayout {
Layout.fillWidth: true
Label { text: "Bio:" }
TextField {
Layout.fillWidth: true
id: bio
selectByMouse: true
text: "Hi, I am Alex. I'm an indie developer who mainly works on web products.
I worked for several different companies and created a couple of my own products from scratch. Currently building Telescope and Prepacked.
Say hi, or find me on Twitter, GitHub, or Mastodon."
}
}
}
}
}
}