diff --git a/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml b/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml
index e1fe0eaf81..41ae87034f 100644
--- a/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/HelpContainer.qml
@@ -7,33 +7,153 @@ import "../../../../shared/xss.js" as XSS
Item {
id: helpContainer
- width: 200
- height: 200
- Layout.fillHeight: true
+ height: parent.height
Layout.fillWidth: true
- StyledText {
- id: element8
- //% "Help menus: FAQ, Glossary, etc."
- text: qsTrId("help-menus:-faq,-glossary,-etc.")
- anchors.left: parent.left
- anchors.leftMargin: 24
- anchors.top: parent.top
- anchors.topMargin: 24
- font.weight: Font.Bold
- font.pixelSize: 20
+
+ ScrollView {
+ height: parent.height
+ width: parent.width
+ contentHeight: glossary.height + linksSection.height + Style.current.bigPadding * 4
+ clip: true
+ Item {
+ id: glossary
+ anchors.top: parent.top
+ anchors.topMargin: 24
+ anchors.right: parent.right
+ anchors.rightMargin: contentMargin
+ anchors.left: parent.left
+ anchors.leftMargin: contentMargin
+ height: this.childrenRect.height
+
+ StyledText {
+ id: glossaryTitle
+ text: qsTr("Glossary")
+ anchors.left: parent.left
+ anchors.top: parent.top
+ font.pixelSize: 15
+ color: Style.current.secondaryText
+ }
+
+ GlossaryEntry {
+ id: entryAccount
+ anchors.top: glossaryTitle.bottom
+ anchors.topMargin: Style.current.padding
+ name: qsTr("Account")
+ letter: qsTr("A")
+ description: qsTr("Your Status account, accessed by the seed phrase that you create or import during onboarding. A Status account can hold more than one Ethereum address, in addition to the one created during onboarding. We refer to these as additional accounts within the wallet")
+ }
+
+ GlossaryEntry {
+ id: entryChatKey
+ anchors.top: entryAccount.bottom
+ anchors.topMargin: Style.current.padding
+ name: qsTr("Chat Key")
+ letter: qsTr("C")
+ description: qsTr("Messages on the Status chat protocol are sent and received using encryption keys. The public chat key is a string of characters you share with others so they can send you messages in Status.")
+ }
+
+ GlossaryEntry {
+ id: entryChatName
+ anchors.top: entryChatKey.bottom
+ anchors.topMargin: Style.current.padding
+ name: qsTr("Chat Name")
+ description: qsTr("Three random words, derived algorithmically from your chat key and used as your default alias in chat. Chat names are completely unique; no other user can have the same three words.")
+ }
+
+ GlossaryEntry {
+ id: entryENSName
+ anchors.top: entryChatName.bottom
+ anchors.topMargin: Style.current.padding
+ name: qsTr("ENS Name")
+ letter: qsTr("E")
+ description: qsTr("Custom alias for your chat key that you can register using the Ethereum Name Service. ENS names are decentralized usernames.")
+ }
+
+ GlossaryEntry {
+ id: entryMailserver
+ letter: qsTr("M")
+ anchors.top: entryENSName.bottom
+ anchors.topMargin: Style.current.padding
+ name: qsTr("Mailserver")
+ description: qsTr("A node in the Status network that routes and stores messages, for up to 30 days.")
+ }
+
+ GlossaryEntry {
+ id: entryPeer
+ anchors.top: entryMailserver.bottom
+ anchors.topMargin: Style.current.padding
+ name: qsTr("Peer")
+ letter: qsTr("P")
+ description: qsTr("A device connected to the Status chat network. Each user can represent one or more peers, depending on their number of devices")
+ }
+
+ GlossaryEntry {
+ id: entrySeedPhrase
+ anchors.top: entryPeer.bottom
+ anchors.topMargin: Style.current.padding
+ name: qsTr("Seed Phrase")
+ letter: qsTr("S")
+ description: qsTr("A 64 character hex address based on the Ethereum standard and beginning with 0x. Public-facing, your wallet key is shared with others when you want to receive funds. Also referred to as an “Ethereum address” or “wallet address.")
+ }
+ }
+
+
+ Item {
+ id: linksSection
+ anchors.top: glossary.bottom
+ anchors.topMargin: Style.current.bigPadding * 2
+ anchors.left: parent.left
+ anchors.leftMargin: contentMargin
+ anchors.right: parent.left
+ anchors.rightMargin: contentMargin
+ height: this.childrenRect.height
+
+ StyledText {
+ id: faqLink
+ text: qsTr("Frequently asked questions")
+ font.pixelSize: 15
+ MouseArea {
+ anchors.fill: parent
+ cursorShape: Qt.PointingHandCursor
+ onClicked: {
+ mouse.accepted = false
+ Qt.openUrlExternally("https://status.im/faq/")
+ }
+ }
+ }
+
+ StyledText {
+ id: issueLink
+ text: qsTr("Submit a bug")
+ anchors.topMargin: Style.current.bigPadding
+ anchors.top: faqLink.bottom
+ font.pixelSize: 15
+ MouseArea {
+ anchors.fill: parent
+ cursorShape: Qt.PointingHandCursor
+ onClicked: {
+ mouse.accepted = false
+ Qt.openUrlExternally("https://github.com/status-im/nim-status-client/issues/new")
+ }
+ }
+ }
+
+ StyledText {
+ text: qsTr("Request a feature")
+ anchors.topMargin: Style.current.bigPadding
+ anchors.top: issueLink.bottom
+ font.pixelSize: 15
+ MouseArea {
+ anchors.fill: parent
+ cursorShape: Qt.PointingHandCursor
+ onClicked: {
+ mouse.accepted = false
+ Qt.openUrlExternally("https://discuss.status.im/c/features/51")
+ }
+ }
+ }
+ }
}
-
- // FIXME the link doesn't exist
-// StyledText {
-// anchors.centerIn: parent
-// text: Utils.linkifyAndXSS(link)
-// onLinkActivated: Qt.openUrlExternally(link)
-
-// MouseArea {
-// anchors.fill: parent
-// acceptedButtons: Qt.NoButton // we don't want to eat clicks on the Text
-// cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
-// }
-// }
}
+
diff --git a/ui/shared/GlossaryEntry.qml b/ui/shared/GlossaryEntry.qml
new file mode 100644
index 0000000000..c6c358637e
--- /dev/null
+++ b/ui/shared/GlossaryEntry.qml
@@ -0,0 +1,45 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.13
+import "../imports"
+import "../shared"
+
+Item {
+ id: root
+ property string name: ""
+ property string description: ""
+ property string letter: ""
+ height: glossaryEntryTitle.height + Style.current.smallPadding + glossaryEntryDescription.height
+ width: parent.width
+
+ GlossaryLetter {
+ id: glossaryLetter
+ text: root.letter
+ anchors.left: parent.left
+ anchors.top: glossaryEntryTitle.top
+ visible: !!root.letter
+ }
+
+ StyledText {
+ id: glossaryEntryTitle
+ text: root.name
+ font.pixelSize: 17
+ color: Style.current.textColor
+ font.weight: Font.Bold
+ anchors.left: parent.left
+ anchors.leftMargin: Style.current.bigPadding
+ }
+
+ StyledText {
+ id: glossaryEntryDescription
+ text: root.description
+ color: Style.current.textColor
+ font.pixelSize: 15
+ anchors.top: glossaryEntryTitle.bottom
+ anchors.topMargin: Style.current.smallPadding
+ anchors.left: parent.left
+ anchors.leftMargin: Style.current.bigPadding
+ anchors.right: parent.right
+ wrapMode: Text.WordWrap
+ }
+}
diff --git a/ui/shared/GlossaryLetter.qml b/ui/shared/GlossaryLetter.qml
new file mode 100644
index 0000000000..db93f5a79e
--- /dev/null
+++ b/ui/shared/GlossaryLetter.qml
@@ -0,0 +1,10 @@
+import QtQuick 2.13
+import "../imports"
+import "../shared"
+
+StyledText {
+ id: glossaryLetterA
+ font.pixelSize: 17
+ font.weight: Font.Bold
+ color: Style.current.blue
+}
diff --git a/ui/shared/qmldir b/ui/shared/qmldir
index c3696c000e..91b088be77 100644
--- a/ui/shared/qmldir
+++ b/ui/shared/qmldir
@@ -23,3 +23,5 @@ StatusSlider 1.0 StatusSlider.qml
Timer 1.0 Timer.qml
TransactionSigner 1.0 TransactionSigner.qml
StatusToolTip 1.0 StatusToolTip.qml
+GlossaryEntry 1.0 GlossaryEntry.qml
+GlossaryLetter 1.0 GlossaryLetter.qml