Add learn-more screens

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

@@ -1,11 +1,14 @@
 (ns status-im.ui.screens.about-app.views
-  (:require-macros [status-im.utils.views :as views])
+  (:require-macros [status-im.utils.views :as views]
+                   [status-im.utils.views :refer [defview letsubs]])
   (:require [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.status-bar.view :as status-bar]
+            [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.ui.screens.about-app.styles :as styles]
             [status-im.i18n :as i18n]
             [status-im.transport.utils :as transport.utils]
+            [status-im.ui.components.colors :as colors]
             [status-im.ui.screens.profile.components.views :as profile.components]
             [re-frame.core :as re-frame]))
 
@@ -20,6 +23,19 @@
    nil
    4))
 
+(defview learn-more-sheet []
+  (letsubs [{:keys [title content]} [:bottom-sheet/options]]
+    [react/view {:style {:padding 16}}
+     [react/view {:style {:flex-direction :row :margin-bottom 16}}
+      [vector-icons/icon :main-icons/info {:color colors/blue
+                                           :container-style {:margin-right 13}}]
+      [react/text {:style {:font-size 17 :line-height 20 :font-weight "600"}} title]]
+     [react/text {:style {:color colors/gray :font-size 15 :line-height 22}} content]]))
+
+(def learn-more
+  {:content learn-more-sheet
+   :content-height 180})
+
 (defn peer-view [{:keys [enode]}]
   (let [[enode-id ip-address port] (transport.utils/extract-url-components enode)]
     ^{:key enode}

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

@@ -242,10 +242,12 @@
                        :margin-horizontal 32}}
 
    [react/text {:style styles/wizard-title} (i18n/label (keyword (str "intro-wizard-title" step)))]
-   (cond (= step 3)
+   (cond (#{2 3} step)
          [react/nested-text {:style styles/wizard-text}
           (str (i18n/label (keyword (str "intro-wizard-text" step))) " ")
-          [{:on-press #(re-frame/dispatch [:intro-wizard/on-learn-more-pressed])
+          [{:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet :learn-more
+                                           {:title (i18n/label (if (= step 2) :t/about-names-title :t/about-key-storage-title))
+                                            :content  (i18n/label (if (= step 2) :t/about-names-content :t/about-key-storage-content))}])
             :style {:color colors/blue}}
            (i18n/label :learn-more)]]
          (not= step 5)

src/status_im/ui/screens/views.cljs

@@ -3,6 +3,7 @@
   (:require [re-frame.core :refer [dispatch]]
             [status-im.utils.platform :refer [android?]]
             [status-im.utils.universal-links.core :as utils.universal-links]
+            [status-im.ui.screens.about-app.views :as about-app]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.bottom-sheet.core :as bottom-sheet]
             [status-im.utils.navigation :as navigation]
@@ -39,6 +40,9 @@
                  (= view :public-chat-actions)
                  (merge home.sheet/public-chat-actions)
 
+                 (= view :learn-more)
+                 (merge about-app/learn-more)
+
                  (= view :private-chat-actions)
                  (merge home.sheet/private-chat-actions)
 

translations/en.json

@@ -177,6 +177,10 @@
     "this-device": "This device",
     "this-device-desc": "Your key will be encrypted and securely stored",
     "keycard-desc": "Android only. You will need to get a Keycard first",
+    "about-names-title": "About the names",
+    "about-names-content": "Your identity is secure and private by design. You get a locally generated cryptographic keypair. The name and image are a readable version of this. They are unique. Nobody can pretend to be you. Nobody sees your name unless you provide it.",
+    "about-key-storage-title": "About key storage",
+    "about-key-storage-content": "Status will never access your private key. Be sure to backup your Seed phrase. If you loose your phone it is the only way to access your keys.",
     "encrypt-with-password": "Encrypt with password",
     "not-implemented": "!not implemented",
     "new-contact": "New contact",