Add glossary view

Fix misspelled wallet

Change glossary position in help center

Fix wrong padding on the view

Make letter transition more smooth

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>

src/status_im/ui/screens/glossary/view.cljs

@@ -0,0 +1,60 @@
+(ns status-im.ui.screens.glossary.view
+  (:require [status-im.ui.components.react :as react]
+            [status-im.ui.components.list.views :as list]
+            [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.topbar :as topbar]
+            [status-im.i18n :as i18n]))
+
+(def messages [{:title   :t/account-title
+                :content :t/account-content}
+               {:title   :t/chat-key-title
+                :content :t/chat-key-content}
+               {:title   :t/chat-name-title
+                :content :t/chat-name-content}
+               {:title   :t/ens-name-title
+                :content :t/ens-name-content}
+               {:title   :t/mailserver-title
+                :content :t/mailserver-content}
+               {:title   :t/peer-title
+                :content :t/peer-content}
+               {:title   :t/seed-phrase-title
+                :content :t/seed-phrase-content}
+               {:title   :t/wallet-key-title
+                :content :t/wallet-key-content}])
+
+(defn render-section-header [{:keys [title]}]
+  [react/view {:style {:position         "absolute"
+                       :width            24
+                       :padding-vertical 16
+                       :background-color colors/white}}
+   [react/text {:style {:color       colors/blue
+                        :font-weight "700"}}
+    title]])
+
+(defn render-element [{:keys [title content]}]
+  [react/view {:style {:margin-left 24
+                       :margin-top  16}}
+   [react/text {:style {:font-weight   "700"
+                        :margin-bottom 6}}
+    (i18n/label title)]
+   [react/text
+    (i18n/label content)]])
+
+(defn glossary []
+  (let [sections (->> messages
+                      (group-by (comp first i18n/label :title))
+                      seq
+                      (sort-by first)
+                      (map (fn [[k v]]
+                             {:title k
+                              :data  v})))]
+    [react/view {:flex             1
+                 :background-color colors/white}
+     [topbar/topbar {:title :t/glossary}]
+     [list/section-list
+      {:contentContainerStyle       {:padding-horizontal 16
+                                     :padding-bottom     16}
+       :stickySectionHeadersEnabled true
+       :sections                    sections
+       :render-fn                   render-element
+       :render-section-header-fn    render-section-header}]]))

src/status_im/ui/screens/help_center/views.cljs

@@ -16,6 +16,12 @@
                  "https://status.im/docs/FAQ-desktop.html"
                  "https://status.im/docs/FAQs.html"))
     :accessories         [:chevron]}
+   {:type                :small
+    :title               :t/glossary
+    :accessibility-label :glossary-button
+    :on-press
+    #(re-frame/dispatch [:navigate-to :glossary])
+    :accessories         [:chevron]}
    {:type                :small
     :title               :t/submit-bug
     :accessibility-label :submit-bug-button

src/status_im/ui/screens/routing/back_actions.cljs

@@ -13,6 +13,7 @@
                    :add-new-account-pin               :default
                    :about-app                         :default
                    :help-center                       :default
+                   :glossary                          :default
                    :advanced-settings                 :default
                    :sync-settings                     :default
                    :mobile-network-settings           :default

src/status_im/ui/screens/routing/profile_stack.cljs

@@ -25,6 +25,7 @@
                      :sync-settings
                      :advanced-settings
                      :help-center
+                     :glossary
                      :about-app
                      :manage-dapps-permissions
                      :network-settings

src/status_im/ui/screens/routing/screens.cljs

@@ -32,6 +32,7 @@
             [status-im.ui.screens.keycard.recovery.views :as keycard.recovery]
             [status-im.ui.screens.keycard.views :as keycard]
             [status-im.ui.screens.help-center.views :as help-center]
+            [status-im.ui.screens.glossary.view :as glossary]
             [status-im.ui.screens.home.views :as home]
             [status-im.ui.screens.intro.views :as intro]
             [status-im.ui.screens.log-level-settings.views :as log-level-settings]
@@ -164,6 +165,7 @@
    :sync-settings                                    sync-settings/sync-settings
    :advanced-settings                                advanced-settings/advanced-settings
    :help-center                                      help-center/help-center
+   :glossary                                         glossary/glossary
    :about-app                                        about-app/about-app
    :manage-dapps-permissions                         dapps-permissions/manage
    :network-settings                                 network/network-settings-view

translations/en.json

@@ -698,6 +698,23 @@
 	"name-of-token": "The name of your token",
 	"name-placeholder": "Display name",
 	"need-help": "Need help?",
+    "glossary": "Glossary",
+    "account-title": "Account",
+    "account-content": "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.",
+    "chat-key-title": "Chat Key",
+    "chat-key-content": "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.",
+    "chat-name-title": "Chat Name",
+    "chat-name-content": "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.",
+    "ens-name-title": "ENS Name",
+    "ens-name-content": "Custom alias for your chat key that you can register using the Ethereum Name Service. ENS names are decentralized usernames.",
+    "mailserver-title": "Mailserver",
+    "mailserver-content": "A node in the Status network that routes and stores messages, for up to 30 days.",
+    "peer-title": "Peer",
+    "peer-content": "A device connected to the Status chat network. Each user can represent one or more peers, depending on their number of devices.",
+    "seed-phrase-title": "Seed Phrase",
+    "seed-phrase-content": "A set of friendly-to-read words, randomly selected from the BIP39 standard list and used to recover or access your Ethereum account on other wallets and devices. Also referred to as a “mnemonic phrase,” “recovery phrase” or “wallet backup” across the crypto ecosystem. Most crypto apps use this same standard to generate accounts.",
+    "wallet-key-title": "Wallet Key",
+    "wallet-key-content": "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.”",
 	"network": "Network",
 	"network-chain": "Network chain",
 	"network-details": "Network details",