feat: doc info boxes while onboarding (#15697)

src/quo2/components/counter/step/style.cljs

@@ -11,7 +11,7 @@
 (defn neutral-border-color
   [in-blur-view? override-theme]
   (if in-blur-view?
-    (colors/theme-colors colors/white-opa-10 colors/neutral-80-opa-5 override-theme)
+    (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-10 override-theme)
     (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)))
 
 (def active-background-color (colors/custom-color :blue 50 10))

src/status_im2/contexts/onboarding/create_password/view.cljs

@@ -184,6 +184,18 @@
                                            (security/mask-data @password)])}
             (i18n/label :t/password-creation-confirm)]]]]))))
 
+(defn create-password-doc
+  []
+  [quo/documentation-drawers
+   {:title  (i18n/label
+             :t/create-profile-password-info-box-title)
+    :shell? true}
+   [rn/view
+    [quo/text
+     {:size :paragraph-2}
+     (i18n/label
+      :t/create-profile-password-info-box-description)]]])
+
 (defn create-password
   []
   (let [scroll-view-ref  (atom nil)
@@ -201,5 +213,8 @@
             :right-section-buttons [{:type                :blur-bg
                                      :icon                :i/info
                                      :icon-override-theme :dark
-                                     :on-press            #(js/alert "Info pressed")}]}]
+                                     :on-press            #(rf/dispatch
+                                                            [:show-bottom-sheet
+                                                             {:content create-password-doc
+                                                              :shell?  true}])}]}]
           [password-form {:scroll-to-end-fn scroll-to-end-fn}]]]))))

src/status_im2/contexts/onboarding/new_to_status/view.cljs

@@ -5,9 +5,9 @@
     [react-native.safe-area :as safe-area]
     [status-im.keycard.recovery :as keycard]
     [status-im2.common.resources :as resources]
-    [status-im2.contexts.onboarding.new-to-status.style :as style]
-    [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
     [status-im2.contexts.onboarding.common.background.view :as background]
+    [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
+    [status-im2.contexts.onboarding.new-to-status.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -54,6 +54,42 @@
         :image    (resources/get-image :use-keycard)
         :on-press #(rf/dispatch [::keycard/recover-with-keycard-pressed])}]]]))
 
+(defn getting-started-doc
+  []
+  [quo/documentation-drawers
+   {:title  (i18n/label :t/getting-started-with-status)
+    :shell? true}
+   [rn/view
+    [quo/text
+     {:size  :paragraph-2
+      :style style/title}
+     (i18n/label
+      :t/getting-started-description)]
+    [quo/text
+     {:size   :paragraph-1
+      :weight :semi-bold}
+     (i18n/label :t/generate-keys)]
+    [quo/text
+     {:size  :paragraph-2
+      :style style/subtitle}
+     (i18n/label :t/getting-started-generate-keys-description)]
+    [quo/text
+     {:size   :paragraph-1
+      :weight :semi-bold}
+     (i18n/label :t/getting-started-generate-keys-from-recovery-phrase)]
+    [quo/text
+     {:size  :paragraph-2
+      :style style/subtitle}
+     (i18n/label :t/getting-started-generate-keys-from-recovery-phrase-description)]
+    [quo/text
+     {:size   :paragraph-1
+      :weight :semi-bold}
+     (i18n/label :t/getting-started-generate-keys-on-keycard)]
+    [quo/text
+     {:size  :paragraph-2
+      :style style/subtitle}
+     (i18n/label :t/getting-started-generate-keys-on-keycard-description)]]])
+
 (defn new-to-status
   []
   (let [{:keys [top]} (safe-area/get-insets)]
@@ -65,5 +101,8 @@
         :right-section-buttons [{:type                :blur-bg
                                  :icon                :i/info
                                  :icon-override-theme :dark
-                                 :on-press            #(js/alert "Info pressed")}]}]
+                                 :on-press            #(rf/dispatch
+                                                        [:show-bottom-sheet
+                                                         {:content getting-started-doc
+                                                          :shell?  true}])}]}]
       [sign-in-options]]]))

src/status_im2/contexts/onboarding/profiles/style.cljs

@@ -58,3 +58,7 @@
   []
   {:margin-bottom (if platform/android? 20 46)})
 
+(def forget-password-doc-container {:margin-right 16})
+(def forget-password-step-container {:flex-direction :row :margin-top 14})
+(def forget-password-step-content {:margin-left 10})
+(def forget-password-step-title {:flex-direction :row})

src/status_im2/contexts/onboarding/profiles/view.cljs

@@ -1,16 +1,16 @@
 (ns status-im2.contexts.onboarding.profiles.view
-  (:require [quo2.core :as quo]
+  (:require [native-module.core :as native-module]
+            [quo2.core :as quo]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.common.confirmation-drawer.view :as confirmation-drawer]
+            [status-im2.contexts.onboarding.common.background.view :as background]
+            [status-im2.contexts.onboarding.profiles.style :as style]
+            [taoensso.timbre :as log]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]
-            [taoensso.timbre :as log]
-            [reagent.core :as reagent]
-            [react-native.core :as rn]
-            [utils.transforms :as types]
             [utils.security.core :as security]
-            [native-module.core :as native-module]
+            [utils.transforms :as types]))
-            [status-im2.contexts.onboarding.profiles.style :as style]
-            [status-im2.common.confirmation-drawer.view :as confirmation-drawer]
-            [status-im2.contexts.onboarding.common.background.view :as background]))
 
 (def show-profiles? (reagent/atom false))
 
@@ -121,6 +121,53 @@
        :content-container-style {:padding-bottom 20}
        :render-fn               profile-card}]]))
 
+(defn forget-password-doc
+  []
+  [quo/documentation-drawers
+   {:title  (i18n/label :t/forgot-your-password-info-title)
+    :shell? true}
+   [rn/view
+    {:style style/forget-password-doc-container}
+    [quo/text {:size :paragraph-2} (i18n/label :t/forgot-your-password-info-description)]
+
+    [rn/view {:style style/forget-password-step-container}
+     [quo/step {:in-blur-view? true :override-theme :dark} 1]
+     [rn/view
+      {:style style/forget-password-step-content}
+      [quo/text {:size :paragraph-2 :weight :semi-bold}
+       (i18n/label :t/forgot-your-password-info-remove-app)]
+      [quo/text {:size :paragraph-2} (i18n/label :t/forgot-your-password-info-remove-app-description)]]]
+
+    [rn/view {:style style/forget-password-step-container}
+     [quo/step {:in-blur-view? true :override-theme :dark} 2]
+     [rn/view
+      {:style style/forget-password-step-content}
+      [quo/text {:size :paragraph-2 :weight :semi-bold}
+       (i18n/label :t/forgot-your-password-info-reinstall-app)]
+      [quo/text {:size :paragraph-2}
+       (i18n/label :t/forgot-your-password-info-reinstall-app-description)]]]
+
+    [rn/view {:style style/forget-password-step-container}
+     [quo/step {:in-blur-view? true :override-theme :dark} 3]
+     [rn/view
+      {:style style/forget-password-step-content}
+      [rn/view
+       {:style style/forget-password-step-title}
+       [quo/text {:size :paragraph-2} (str (i18n/label :t/sign-up) " ")]
+       [quo/text {:size :paragraph-2 :weight :semi-bold}
+        (i18n/label :t/forgot-your-password-info-signup-with-key)]]
+      [quo/text {:size :paragraph-2}
+       (i18n/label :t/forgot-your-password-info-signup-with-key-description)]]]
+
+    [rn/view {:style style/forget-password-step-container}
+     [quo/step {:in-blur-view? true :override-theme :dark} 4]
+     [rn/view
+      {:style style/forget-password-step-content}
+      [quo/text {:size :paragraph-2 :weight :semi-bold}
+       (i18n/label :t/forgot-your-password-info-create-new-password)]
+      [quo/text {:size :paragraph-2}
+       (i18n/label :t/forgot-your-password-info-create-new-password-description)]]]]])
+
 (defn login-section
   []
   (let [{:keys [name customization-color error processing]
@@ -174,7 +221,9 @@
        :before              :i/info
        :accessibility-label :forget-password-button
        :override-theme      :dark
-       :style               style/forget-password-button}
+       :style               style/forget-password-button
+       :on-press            #(rf/dispatch [:show-bottom-sheet
+                                           {:content forget-password-doc :shell? true}])}
       (i18n/label :t/forgot-password)]
      [quo/button
       {:size                40

translations/en.json

@@ -291,6 +291,8 @@
     "counter-99-plus": "99+",
     "create": "Create",
     "create-profile": "Create profile",
+    "create-profile-password-info-box-title": "About your profile password",
+    "create-profile-password-info-box-description": "Your Status keys are the foundation of your self-sovereign identity in Web3. You have complete control over these keys, which you can use to sign transactions, access your data, and interact with Web3 services.\n\nYour keys are always securely stored on your device and protected by your Status profile password. Status doesn't know your password and can't reset it for you. If you forget your password, you may lose access to your Status profile and wallet funds.\n\nRemember your Status password and don't share it with anyone.",
     "create-a-pin": "Create a 6-digit passcode",
     "create-a-puk": "Create a 12-digit PUK",
     "create-group-chat": "Create group chat",
@@ -956,6 +958,13 @@
     "name-of-token": "The name of your token",
     "need-help": "Need help?",
     "new-to-status": "I’m new to Status",
+    "getting-started-with-status": "Getting started with Status",
+    "getting-started-description": "Status is a unique messaging app that combines decentralized technology, privacy-focused design, and Web3 capabilities to offer a unique and secure communication experience.\n\nYour Status keys are the foundation of your self-sovereign identity in Web3. They serve as a secure means of accessing and managing your personal information and identity. With Status, you own, control and manage your data and digital identity without relying on centralized organisations.\n\nChoose one of these options to create your Status profile:",
+    "getting-started-generate-keys-description": "Create a pair of cryptographic keys representing your Status identity. Unlike centralized apps, Status doesn't rely on your username or email address to identify your profile. Instead, it uses your private and public keys. This option creates a new Ethereum address.",
+    "getting-started-generate-keys-from-recovery-phrase": "Generate keys from recovery phrase",
+    "getting-started-generate-keys-from-recovery-phrase-description": "You can use your existing Ethereum address to create your Status profile. If you already use a non-custodial Ethereum wallet (like Metamask or Trust Wallet), you already have an Ethereum address and a recovery phrase.\n\nYour keys are always securely stored on your device and protected by your Status password.",
+    "getting-started-generate-keys-on-keycard": "Generate keys on a Keycard",
+    "getting-started-generate-keys-on-keycard-description": "A Keycard is a physical card (similar to a credit card) that securely stores your Status keys. Using a Keycard adds an extra layer of security to your digital assets and identity. This option creates a new Ethereum address.",
     "generate-keys": "Generate keys",
     "generate-keys-subtitle": "Your new self-sovereign identity in Status",
     "experienced-web3": "Experienced in Web3?",
@@ -1305,6 +1314,7 @@
     "sync-settings": "Sync settings",
     "sync-synced": "In sync",
     "syncing-devices": "Syncing...",
+    "sign-up": "Sign up",
     "tag-was-lost": "Tag was lost",
     "tap-card-again": "Tap the card to the back of your phone again",
     "test-networks": "Test networks",
@@ -2047,6 +2057,16 @@
     "profiles-on-device": "Profiles on device",
     "profile-password": "Profile password",
     "forgot-password": "Forgot password?",
+    "forgot-your-password-info-remove-app": "Remove the Status app",
+    "forgot-your-password-info-remove-app-description": "This will erase all your data from the device, including your password.",
+    "forgot-your-password-info-reinstall-app": "Reinstall the Status app",
+    "forgot-your-password-info-reinstall-app-description": "Re-download the app from your store.",
+    "forgot-your-password-info-signup-with-key": "with your existing keys",
+    "forgot-your-password-info-signup-with-key-description": "Access with your seed phrase or with your Keycard.",
+    "forgot-your-password-info-create-new-password": "Create a new password",
+    "forgot-your-password-info-create-new-password-description": "Enter a new password and you're all set! You will be able to use your new password.",
+    "forgot-your-password-info-title": "Forgot your password?",
+    "forgot-your-password-info-description": "To recover your password follow these steps:",
     "log-in": "Log in",
     "type-your-password": "Type your password",
     "oops-wrong-password": "Oops, wrong password!",