Add new onboarding screen - I'm new to status

src/quo2/components/navigation/page_nav.cljs

@@ -30,7 +30,7 @@
            {:no-color true})))
 
 (defn left-section-view
-  [{:keys [on-press icon accessibility-label type] :or {type :grey}}
+  [{:keys [on-press icon accessibility-label type icon-override-theme] :or {type :grey}}
    put-middle-section-on-left?]
   [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
    [button/button
@@ -38,7 +38,8 @@
      :icon                true
      :type                type
      :size                32
-     :accessibility-label accessibility-label}
+     :accessibility-label accessibility-label
+     :override-theme      icon-override-theme}
     icon]])
 
 (defn- mid-section-comp
@@ -148,10 +149,20 @@
                   :flex-direction  :row
                   :justify-content :flex-end)}
    (let [last-icon-index (-> right-section-buttons count dec)]
-     (map-indexed (fn [index {:keys [icon on-press type style] :or {type :grey}}]
+     (map-indexed (fn [index
+                       {:keys [icon on-press type style icon-override-theme]
+                        :or   {type :grey}}]
                     ^{:key index}
-                    [rn/view {:style (merge {:margin-right (if (not= index last-icon-index) 8 0)} style)}
-                     [button/button {:on-press on-press :icon true :type type :size 32}
+                    [rn/view
+                     {:style (assoc style
+                                    :margin-right
+                                    (if (= index last-icon-index) 0 8))}
+                     [button/button
+                      {:on-press       on-press
+                       :icon           true
+                       :type           type
+                       :size           32
+                       :override-theme icon-override-theme}
                       icon]])
                   right-section-buttons))])
 
@@ -179,16 +190,14 @@
      :left-section 
      {:type                  button-type
       :on-press              event
-      :icon                  icon 
-      :icon-color            color
-      :icon-background-color color
+      :icon                  icon
+      :icon-override-theme   :light/:dark
      }
      :right-section-buttons vector of 
       {:type                  button-type
        :on-press              event
        :icon                  icon
-       :icon-color            color 
-       :icon-background-color color
+       :icon-override-theme   :light/:dark
       }
    }
   "

src/quo2/components/onboarding/small_option_card/style.cljs

@@ -41,12 +41,10 @@
 
 (def touchable-overlay {:border-radius 16})
 
-(defn card-container
-  [main-variant?]
-  (when main-variant? {:height 343}))
-
 (defn card
   [main-variant?]
   {:background-color colors/white-opa-5
    :border-radius    16
    :height           (if main-variant? 335 56)})
+
+(def main-variant-extra-space {:height 8})

src/quo2/components/onboarding/small_option_card/view.cljs

@@ -48,19 +48,22 @@
      :source              image}]])
 
 (defn small-option-card
+  "Variants: `:main` or `:icon`"
   [{:keys [variant title subtitle image on-press]
     :or   {variant :main}}]
   (let [main-variant?  (= variant :main)
         card-component (if main-variant? main-variant icon-variant)]
-    [rn/touchable-highlight
-     {:accessibility-label :small-option-card
-      :style               style/touchable-overlay
-      :active-opacity      1
-      :underlay-color      colors/white-opa-5
-      :on-press            on-press}
-     [rn/view {:style (style/card-container main-variant?)}
+    [rn/view
+     [rn/touchable-highlight
+      {:accessibility-label :small-option-card
+       :style               style/touchable-overlay
+       :active-opacity      1
+       :underlay-color      colors/white-opa-5
+       :on-press            on-press}
       [rn/view {:style (style/card main-variant?)}
        [card-component
         {:title    title
          :subtitle subtitle
-         :image    image}]]]]))
+         :image    image}]]]
+     (when main-variant?
+       [rn/view {:style style/main-variant-extra-space}])]))

src/status_im2/common/resources.cljs

@@ -1,16 +1,20 @@
 (ns status-im2.common.resources)
 
 (def ui
-  {:add-new-contact (js/require "../resources/images/ui2/add-contact.png")
-   :intro-1         (js/require "../resources/images/ui2/intro-1.png")
-   :intro-2         (js/require "../resources/images/ui2/intro-2.png")
-   :intro-3         (js/require "../resources/images/ui2/intro-3.png")
-   :intro-4         (js/require "../resources/images/ui2/intro-4.png")
-   :lifestyle       (js/require "../resources/images/ui2/lifestyle.png")
-   :music           (js/require "../resources/images/ui2/music.png")
-   :podcasts        (js/require "../resources/images/ui2/podcasts.png")
-   :sync-device     (js/require "../resources/images/ui2/sync-new-device-cover-background.png")
-   :onboarding-bg-1 (js/require "../resources/images/ui2/onboarding-bg-1.png")})
+  {:add-new-contact    (js/require "../resources/images/ui2/add-contact.png")
+   :intro-1            (js/require "../resources/images/ui2/intro-1.png")
+   :intro-2            (js/require "../resources/images/ui2/intro-2.png")
+   :intro-3            (js/require "../resources/images/ui2/intro-3.png")
+   :intro-4            (js/require "../resources/images/ui2/intro-4.png")
+   :lifestyle          (js/require "../resources/images/ui2/lifestyle.png")
+   :music              (js/require "../resources/images/ui2/music.png")
+   :podcasts           (js/require "../resources/images/ui2/podcasts.png")
+   :sync-device        (js/require "../resources/images/ui2/sync-new-device-cover-background.png")
+   :onboarding-bg-1    (js/require "../resources/images/ui2/onboarding-bg-1.png")
+   :onboarding-blur-bg (js/require "../resources/images/ui2/onboarding_blur_bg.png")
+   :generate-keys      (js/require "../resources/images/ui2/generate_keys.png")
+   :ethereum-address   (js/require "../resources/images/ui2/ethereum_address.png")
+   :use-keycard        (js/require "../resources/images/ui2/keycard.png")})
 
 (def mock-images
   {:coinbase             (js/require "../resources/images/mock2/coinbase.png")

src/status_im2/contexts/onboarding/common/intro/view.cljs

@@ -38,10 +38,12 @@
    [quo/text
     {:style  style/carousel-text
      :weight :semi-bold
-     :size   :heading-2} (get-in carousels [index :text])]
+     :size   :heading-2}
+    (get-in carousels [index :text])]
    [quo/text
     {:style style/carousel-text
-     :size  :paragraph-1} (get-in carousels [index :sub-text])]])
+     :size  :paragraph-1}
+    (get-in carousels [index :sub-text])]])
 
 (defn set-index
   [old-index]
@@ -62,12 +64,12 @@
       :source (get-in carousels [@carousel-index :image])}]
     [quo/drawer-buttons
      {:top-card    {:on-press            (fn []
-                                           (rf/dispatch [:init-root :onboarding])
+                                           (rf/dispatch [:navigate-to :new-to-status])
                                            (rf/dispatch [:hide-terms-of-services-opt-in-screen]))
                     :heading             (i18n/label :t/sign-in)
                     :accessibility-label :already-use-status-button}
       :bottom-card {:on-press            (fn []
-                                           (rf/dispatch [:init-root :onboarding])
+                                           (rf/dispatch [:navigate-to :new-to-status])
                                            (rf/dispatch [:hide-terms-of-services-opt-in-screen]))
                     :heading             (i18n/label :t/im-new-to-status)
                     :accessibility-label :new-to-status-button}}
@@ -85,4 +87,5 @@
         :style    style/highlighted-text
         :weight   :semi-bold}
        (i18n/label :t/terms-of-service)]]]]
-   (finally (js/clearInterval interval-id))))
+   (finally
+    (js/clearInterval interval-id))))

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

@@ -0,0 +1,43 @@
+(ns status-im2.contexts.onboarding.new-to-status.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
+
+(def full-screen {:flex 1})
+
+(def image-background
+  {:height "100%"
+   :width  "100%"})
+
+(def layer-background
+  {:padding-top      (if platform/ios? 44 0)
+   :position         :absolute
+   :top              0
+   :bottom           0
+   :left             0
+   :right            0
+   :background-color colors/neutral-80-opa-80-blur})
+
+(def navigation-bar {:height 56})
+
+(def options-container
+  {:padding-top        12
+   :padding-horizontal 20})
+
+(def title
+  {:color         colors/white
+   :margin-bottom 20})
+
+(def subtitle-container
+  {:height         42
+   :padding-top    16
+   :padding-bottom 8})
+
+(def subtitle
+  {:color         colors/white-opa-70
+   :margin-bottom 20})
+
+(def suboptions
+  {:padding-top    4
+   :padding-bottom 8})
+
+(def space-between-suboptions {:height 12})

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

@@ -0,0 +1,77 @@
+(ns status-im2.contexts.onboarding.new-to-status.view
+  (:require [quo2.core :as quo]
+            [react-native.core :as rn]
+            [status-im.keycard.recovery :as keycard]
+            [status-im.multiaccounts.recover.core :as multiaccounts.recover]
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.onboarding.new-to-status.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn background-image
+  []
+  [rn/image
+   {:style       style/image-background
+    :blur-radius 13
+    :source      (resources/get-image :onboarding-blur-bg)}])
+
+(defn navigation-bar
+  []
+  [rn/view {:style style/navigation-bar}
+   [quo/page-nav
+    {:align-mid?            true
+     :mid-section           {:type :text-only :main-text ""}
+     :left-section          {:type                :blur-bg
+                             :icon                :i/arrow-left
+                             :icon-override-theme :dark
+                             :on-press            #(rf/dispatch [:navigate-back])}
+     :right-section-buttons [{:type                :blur-bg
+                              :icon                :i/info
+                              :icon-override-theme :dark
+                              :on-press            #(js/alert "Pending")}]}]])
+
+(defn sign-in-options
+  []
+  [rn/view {:style style/options-container}
+   [quo/text
+    {:style  style/title
+     :size   :heading-1
+     :weight :semi-bold}
+    (i18n/label :t/new-to-status)]
+
+   [quo/small-option-card
+    {:variant  :main
+     :title    (i18n/label :t/generate-keys)
+     :subtitle (i18n/label :t/generate-keys-subtitle)
+     :image    (resources/get-image :generate-keys)
+     :on-press #(rf/dispatch [:generate-and-derive-addresses])}]
+
+   [rn/view {:style style/subtitle-container}
+    [quo/text
+     {:style  style/subtitle
+      :size   :paragraph-2
+      :weight :medium}
+     (i18n/label :t/experienced-web3)]]
+
+   [rn/view {:style style/suboptions}
+    [quo/small-option-card
+     {:variant  :icon
+      :title    (i18n/label :t/use-recovery-phrase)
+      :subtitle (i18n/label :t/use-recovery-phrase-subtitle)
+      :image    (resources/get-image :ethereum-address)
+      :on-press #(rf/dispatch [::multiaccounts.recover/enter-phrase-pressed])}]
+    [rn/view {:style style/space-between-suboptions}]
+    [quo/small-option-card
+     {:variant  :icon
+      :title    (i18n/label :t/use-keycard)
+      :subtitle (i18n/label :t/use-keycard-subtitle)
+      :image    (resources/get-image :use-keycard)
+      :on-press #(rf/dispatch [::keycard/recover-with-keycard-pressed])}]]])
+
+(defn new-to-status
+  []
+  [rn/view {:style style/full-screen}
+   [background-image]
+   [rn/view {:style style/layer-background}
+    [navigation-bar]
+    [sign-in-options]]])

src/status_im2/navigation/roots.cljs

@@ -141,14 +141,12 @@
   (merge (old-roots)
          ;;INTRO (onboarding carousel)
          {:intro-stack
-          {:root {:stack {:id       :intro
-                          :children [{:component {:name :intro
-                                                  :id :intro
-                                                  :options
-                                                  {:statusBar (merge
-                                                               (status-bar-options)
-                                                               {:style :light})
-                                                   :topBar    {:visible false}}}}]}}}}
+          {:root
+           {:stack {:id       :intro
+                    :children [{:component {:name    :intro
+                                            :id      :intro
+                                            :options {:statusBar {:style :light}
+                                                      :topBar    {:visible false}}}}]}}}}
          {:shell-stack
           {:root
            {:stack {:id       :shell-stack

src/status_im2/navigation/screens.cljs

@@ -1,22 +1,23 @@
 (ns status-im2.navigation.screens
   (:require [utils.i18n :as i18n] ;; TODO remove when not used anymore
+            [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]
             [status-im.ui.screens.screens :as old-screens]
-            [status-im2.contexts.onboarding.common.intro.view :as intro]
+            [status-im2.config :as config]
             [status-im2.contexts.activity-center.view :as activity-center]
-            [status-im2.contexts.chat.messages.view :as chat]
             [status-im2.contexts.add-new-contact.views :as add-new-contact]
+            [status-im2.contexts.chat.lightbox.view :as lightbox]
+            [status-im2.contexts.chat.messages.view :as chat]
+            [status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector]
+            [status-im2.contexts.chat.photo-selector.view :as photo-selector]
             [status-im2.contexts.communities.discover.view :as communities.discover]
             [status-im2.contexts.communities.overview.view :as communities.overview]
+            [status-im2.contexts.onboarding.common.intro.view :as intro]
+            [status-im2.contexts.onboarding.new-to-status.view :as new-to-status]
+            [status-im2.contexts.onboarding.profiles.view :as profiles]
             [status-im2.contexts.quo-preview.main :as quo.preview]
             [status-im2.contexts.shell.view :as shell]
-            [status-im2.contexts.syncing.view :as settings-syncing]
-            [status-im2.contexts.chat.lightbox.view :as lightbox]
-            [status-im2.config :as config]
-            [quo2.foundations.colors :as colors]
-            [status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector]
-            [react-native.platform :as platform]
-            [status-im2.contexts.chat.photo-selector.view :as photo-selector]
-            [status-im2.contexts.onboarding.profiles.view :as profiles]))
+            [status-im2.contexts.syncing.view :as settings-syncing]))
 
 (def components
   [])
@@ -103,7 +104,15 @@
     ;; Onboarding
     {:name      :profiles
      :insets    {:top false}
-     :component profiles/views}]
+     :component profiles/views}
+
+    ;; Onboarding - new to Status
+    {:name      :new-to-status
+     :options   {:statusBar     {:style :light}
+                 :topBar        {:visible false}
+                 :navigationBar {:backgroundColor colors/black}}
+     :insets    {:top false}
+     :component new-to-status/new-to-status}]
 
    (when config/quo-preview-enabled?
      quo.preview/screens)

translations/en.json

@@ -938,6 +938,15 @@
     "name": "Name",
     "name-of-token": "The name of your token",
     "need-help": "Need help?",
+    "new-to-status": "I'm new to Status",
+    "generate-keys": "Generate keys",
+    "generate-keys-subtitle": "Your new self-sovereign identity in Status",
+    "experienced-web3": "Experienced in Web3?",
+    "use-recovery-phrase": "Use recovery phrase",
+    "use-recovery-phrase-subtitle": "If you already have an Ethereum address",
+    "use-keycard": "Use Keycard",
+    "use-keycard-subtitle": "Keys will be stored on your Keycard",
+
     "glossary": "Glossary",
     "account-title": "Account",
     "account-content": "You can compare accounts in Status to bank accounts. Like a bank account, an account typically has an address and a balance; You use this account to transact on Ethereum. You can have multiple accounts in your wallet. All accessed by unlocking Status.",