From f0ffe79a4a8819ae7f0f96fa78cbe2f54ed99846 Mon Sep 17 00:00:00 2001 From: Gheorghe Pinzaru Date: Fri, 10 Jan 2020 17:10:40 +0300 Subject: [PATCH] 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 --- src/status_im/ui/screens/glossary/view.cljs | 60 +++++++++++++++++++ .../ui/screens/help_center/views.cljs | 6 ++ .../ui/screens/routing/back_actions.cljs | 1 + .../ui/screens/routing/profile_stack.cljs | 1 + src/status_im/ui/screens/routing/screens.cljs | 2 + translations/en.json | 17 ++++++ 6 files changed, 87 insertions(+) create mode 100644 src/status_im/ui/screens/glossary/view.cljs diff --git a/src/status_im/ui/screens/glossary/view.cljs b/src/status_im/ui/screens/glossary/view.cljs new file mode 100644 index 0000000000..059275f8b1 --- /dev/null +++ b/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}]])) diff --git a/src/status_im/ui/screens/help_center/views.cljs b/src/status_im/ui/screens/help_center/views.cljs index c3de50bb06..b95edaf240 100644 --- a/src/status_im/ui/screens/help_center/views.cljs +++ b/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 diff --git a/src/status_im/ui/screens/routing/back_actions.cljs b/src/status_im/ui/screens/routing/back_actions.cljs index 0745737b1a..f8264e3e64 100644 --- a/src/status_im/ui/screens/routing/back_actions.cljs +++ b/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 diff --git a/src/status_im/ui/screens/routing/profile_stack.cljs b/src/status_im/ui/screens/routing/profile_stack.cljs index 9209c415aa..5db35818c3 100644 --- a/src/status_im/ui/screens/routing/profile_stack.cljs +++ b/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 diff --git a/src/status_im/ui/screens/routing/screens.cljs b/src/status_im/ui/screens/routing/screens.cljs index 6c1f964ed2..1c1fe6964d 100644 --- a/src/status_im/ui/screens/routing/screens.cljs +++ b/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 diff --git a/translations/en.json b/translations/en.json index cb234be921..4349ce0803 100644 --- a/translations/en.json +++ b/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",