status-desktop/storybook/pages/DAppsMetricsPage.qml

355 lines
12 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ 0.1
import StatusQ.Components 0.1
import Models 1.0
import Storybook 1.0
import utils 1.0
import shared.stores 1.0
import AppLayouts.Wallet.services.dapps 1.0
import AppLayouts.Wallet.controls 1.0
Item {
id: root
property string mixpanelToken: ""
component MethodsPicker: StatusListPicker {
id: methodsPicker
multiSelection: true
inputList: ListModel {
ListElement {
key: 0
name: "personal_sign"
shortName: "personal_sign"
category: ""
selected: true
}
ListElement {
key: 1
name: "eth_signTypedData"
shortName: "eth_signTypedData"
category: ""
selected: false
}
ListElement {
key: 2
name: "eth_sign"
shortName: "eth_sign"
category: ""
selected: false
}
ListElement {
key: 3
name: "eth_sendTransaction"
shortName: "eth_sendTransaction"
category: ""
selected: false
}
}
function getSelection() {
var selection = []
for (var i = 0; i < inputList.count; i++) {
if (inputList.get(i).selected) {
selection.push(inputList.get(i).name)
}
}
return selection
}
}
DAppsMetrics {
id: metrics
metricsStore: MetricsStore {
id: metricsStore
function addCentralizedMetricIfEnabled(eventName, eventValue = null) {
if (root.mixpanelToken !== "") {
var http = new XMLHttpRequest()
var url = "https://api.mixpanel.com/track";
eventValue.token = root.mixpanelToken
const strEvent = JSON.stringify(eventValue)
var event = `[{"properties":${strEvent},"event":"${eventName}"}]`
http.open("POST", url, true);
// Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/json");
http.setRequestHeader("accept", "text/plain");
http.onreadystatechange = function() { // Call a function when the state changes.
if (http.readyState == 4) {
if (http.status == 200) {
console.log("ok")
} else {
console.log("error: " + http.status)
}
}
}
logs.logEvent("Sending Mixpanel event", ["eventName", "eventValue"], arguments)
http.send(event);
return
}
logs.logEvent("Mixpanel simulated event", ["eventName", "eventValue"], arguments)
}
}
}
Logs { id: logs }
ColumnLayout {
anchors.fill: parent
ColumnLayout {
z: 10
spacing: 10
Pane {
Layout.fillWidth: true
background: Rectangle {
border.width: 2
border.color: "black"
}
ColumnLayout {
Label {
text: "Warning! Configuring the mixpanel token will send the events to Mixpanel"
font.bold: true
}
RowLayout {
Label {
text: "Mixpanel Config"
}
TextField {
id: mixpanelToken
placeholderText: "Mixpanel Token"
}
Button {
text: "Set Mixpanel Token"
onClicked: root.mixpanelToken = mixpanelToken.text
}
Button {
text: "Remove Mixpanel Token"
onClicked: root.mixpanelToken = ""
}
}
}
}
Pane {
Layout.fillWidth: true
background: Rectangle {
border.width: 2
border.color: "black"
}
ColumnLayout {
Label {
text: "DApps Health Events"
}
RowLayout {
spacing: 10
Button {
id: logHealthEvent
text: "Log Health Event"
onClicked: metrics.logHealthEvent(healthState.currentIndex, error.text)
}
ComboBox {
id: healthState
model: ["WC Available", "WC Unavailable", "Chains Down", "Network Down", "Pair Error", "Connect Error", "Sign Error", "undefined"]
}
TextField {
id: error
placeholderText: "Error"
}
}
}
}
Pane {
Layout.fillWidth: true
background: Rectangle {
border.width: 2
border.color: "black"
}
ColumnLayout {
Label {
text: "DApps Navigation Events"
}
RowLayout {
spacing: 10
Button {
id: logNavigation
text: "Log Navigation Event"
onClicked: metrics.logNavigationEvent(navigationAction.currentIndex, connector.currentIndex)
}
ComboBox {
id: navigationAction
Layout.fillWidth: true
model: ["DApp List Opened", "DApp Connect Initiated", "DApp Disconnect Initiated", "DApp Pair Initiated", "undefined"]
}
ComboBox {
id: connector
currentIndex: 1
model: ["undefined", "WalletConnect", "BrowserConnect"]
}
}
}
}
Pane {
id: connectionProposal
z: 10
Layout.fillWidth: true
background: Rectangle {
border.width: 2
border.color: "black"
}
ColumnLayout {
Label {
text: "Connection Proposal"
}
RowLayout {
spacing: 10
z: 10
TextField {
id: dappProposal
text: "https://dapp.com"
}
ComboBox {
id: proposalConnector
currentIndex: 1
model: ["undefined", "WalletConnect", "BrowserConnect"]
}
NetworkFilter {
id: networkFilter
flatNetworks: NetworksModel.flatNetworks
}
MethodsPicker {
id: methodsPicker
}
}
RowLayout {
spacing: 10
Button {
id: logConnectionProposal
text: "Log Connection Proposal"
onClicked: metrics.logConnectionProposal(networkFilter.selection.map(String), methodsPicker.getSelection(), dappProposal.text, proposalConnector.currentIndex)
}
Button {
text: "Log SIWE Connection rejected"
onClicked: metrics.logSiweConnectionProposal(networkFilter.selection.map(String), dappProposal.text, proposalConnector.currentIndex)
}
Button {
text: "Log Connection accepted"
onClicked: metrics.logConnectionProposalAccepted(dappProposal.text, networkFilter.selection.map(String), proposalConnector.currentIndex)
}
Button {
text: "Log Connection rejected"
onClicked: metrics.logConnectionProposalRejected(dappProposal.text, proposalConnector.currentIndex)
}
Button {
text: "Log dapp connected"
onClicked: metrics.logDAppConnected(dappProposal.text, proposalConnector.currentIndex)
}
Button {
text: "Log dapp disconnected"
onClicked: metrics.logDAppDisconnected(dappProposal.text, proposalConnector.currentIndex)
}
}
}
}
Pane {
Layout.fillWidth: true
background: Rectangle {
border.width: 2
border.color: "black"
}
ColumnLayout {
Label {
text: "DApps Sign Events"
}
RowLayout {
spacing: 10
TextField {
id: dappSign
text: "https://dapp.com"
}
ComboBox {
id: connectorSign
currentIndex: 1
model: ["undefined", "WalletConnect", "BrowserConnect"]
}
NetworkFilter {
id: networkFilterSign
flatNetworks: NetworksModel.flatNetworks
multiSelection: false
}
MethodsPicker {
id: methodsPickerSign
multiSelection: false
}
}
RowLayout {
spacing: 10
Button {
id: logSignEvent
text: "Log Sign Event"
onClicked: metrics.logSignRequestReceived(connectorSign.currentIndex, methodsPickerSign.getSelection()[0], networkFilterSign.singleSelectionItemData.chainId, dappSign.text)
}
Button {
text: "Log Sign Request Accepted"
onClicked: metrics.logSignRequestAccepted(connectorSign.currentIndex, methodsPickerSign.getSelection()[0], networkFilterSign.singleSelectionItemData.chainId, dappSign.text)
}
Button {
text: "Log Sign Request Rejected"
onClicked: metrics.logSignRequestRejected(connectorSign.currentIndex, methodsPickerSign.getSelection()[0], networkFilterSign.singleSelectionItemData.chainId, dappSign.text)
}
}
}
}
}
Pane {
Layout.fillWidth: true
Layout.fillHeight: true
background: Rectangle {
border.width: 2
border.color: "black"
}
LogsView {
id: logsAndControlsPanel
anchors.fill: parent
logText: logs.logText
}
}
}
}
// category: Wallet