status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: add skeleton flow for onboarding (#15334)

This commit is contained in:
Jamie Caprani 2023-03-17 12:19:39 +00:00 committed by GitHub
parent d608b88e26
commit f6f5dfbe03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 262 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/quo2/components/onboarding/small_option_card/view.cljs
View File

@ -49,8 +49,8 @@
(defn small-option-card
"Variants: `:main` or `:icon`"
[{:keys [variant title subtitle image max-height on-press]
:or {variant :main}}]
[{:keys [variant title subtitle image max-height on-press accessibility-label]
:or {variant :main accessibility-label :small-option-card}}]
(let [main-variant? (= variant :main)
card-component (if main-variant? main-variant icon-variant)
card-height (cond
@ -59,7 +59,7 @@
:else style/main-variant-height)]
[rn/view
[rn/touchable-highlight
{:accessibility-label :small-option-card
{:accessibility-label accessibility-label
:style style/touchable-overlay
:active-opacity 1
:underlay-color colors/white-opa-5

2
src/status_im2/contexts/onboarding/common/style.cljs → src/status_im2/contexts/onboarding/common/background/style.cljs
View File

@ -1,4 +1,4 @@
(ns status-im2.contexts.onboarding.common.style
(ns status-im2.contexts.onboarding.common.background.style
(:require [quo2.foundations.colors :as colors]))
(def background-container

7
src/status_im2/contexts/onboarding/common/background.cljs → src/status_im2/contexts/onboarding/common/background/view.cljs
View File

@ -1,19 +1,18 @@
(ns status-im2.contexts.onboarding.common.background
(ns status-im2.contexts.onboarding.common.background.view
(:require [react-native.core :as rn]
[quo2.foundations.colors :as colors]
[status-im2.common.resources :as resources]
[react-native.linear-gradient :as linear-gradient]
[status-im2.contexts.onboarding.common.style :as style]))
[status-im2.contexts.onboarding.common.background.style :as style]))
(defn view
[dark-overlay?]
[rn/view
{:style style/background-container}
;; Todo - add carousel component as background once ready
;; https://github.com/status-im/status-mobile/issues/15012
[rn/image
{:blur-radius (if dark-overlay? 13 0)
:style {:flex 1}
;; Todo - get background image from sub using carousel index on landing page
:source (resources/get-image :onboarding-bg-1)}]
[linear-gradient/linear-gradient
{:colors [(if dark-overlay? (colors/custom-color :yin 50) "#000716")

14
src/status_im2/contexts/onboarding/create_password/style.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns status-im2.contexts.onboarding.create-password.style
(:require [quo2.foundations.colors :as colors]
[react-native.platform :as platform]))
(def navigation-bar {:height 56})
(def page-container
{: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})

42
src/status_im2/contexts/onboarding/create_password/view.cljs Normal file
View File

@ -0,0 +1,42 @@
(ns status-im2.contexts.onboarding.create-password.view
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[status-im2.contexts.onboarding.create-password.style :as style]
[utils.i18n :as i18n]
[status-im2.contexts.onboarding.common.background.view :as background]
[utils.re-frame :as rf]))
(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 page
[]
[rn/view {:style style/page-container}
[navigation-bar]
[rn/view {:style {:padding-horizontal 20}}
[quo/text
{:size :heading-1
:weight :semi-bold
:style {:color colors/white}} "Create profile password"]
[quo/button
{:on-press #(rf/dispatch [:navigate-to :enable-biometrics])
:style {}} (i18n/label :t/continue)]]])
(defn create-password
[]
[rn/view {:style {:flex 1}}
[background/view true]
[page]])

15
src/status_im2/contexts/onboarding/create_profile/style.cljs Normal file
View File

@ -0,0 +1,15 @@
(ns status-im2.contexts.onboarding.create-profile.style
(:require [quo2.foundations.colors :as colors]
[react-native.platform :as platform]))
(def page-container
{: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})

38
src/status_im2/contexts/onboarding/create_profile/view.cljs Normal file
View File

@ -0,0 +1,38 @@
(ns status-im2.contexts.onboarding.create-profile.view
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[status-im2.contexts.onboarding.create-profile.style :as style]
[utils.i18n :as i18n]
[status-im2.contexts.onboarding.common.background.view :as background]
[utils.re-frame :as rf]))
(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])}}]])
(defn page
[]
[rn/view {:style style/page-container}
[navigation-bar]
[rn/view {:style {:padding-horizontal 20}}
[quo/text
{:size :heading-1
:weight :semi-bold
:style {:color colors/white}} "Create Profile"]
[quo/button
{:on-press #(rf/dispatch [:navigate-to :create-profile-password])
:style {}} (i18n/label :t/continue)]]])
(defn create-profile
[]
[rn/view {:style {:flex 1}}
[background/view true]
[page]])

14
src/status_im2/contexts/onboarding/enable_biometrics/style.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns status-im2.contexts.onboarding.enable-biometrics.style
(:require [quo2.foundations.colors :as colors]
[react-native.platform :as platform]))
(def page-container
{: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})

37
src/status_im2/contexts/onboarding/enable_biometrics/view.cljs Normal file
View File

@ -0,0 +1,37 @@
(ns status-im2.contexts.onboarding.enable-biometrics.view
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[status-im2.contexts.onboarding.enable-biometrics.style :as style]
[utils.i18n :as i18n]
[status-im2.contexts.onboarding.common.background.view :as background]
[utils.re-frame :as rf]))
(defn navigation-bar
[]
[rn/view {:style style/navigation-bar}
[quo/page-nav
{:align-mid? true
:mid-section {:type :text-only :main-text ""}
}]])
(defn page
[]
[rn/view {:style style/page-container}
[navigation-bar]
[rn/view {:style {:padding-horizontal 20}}
[quo/text
{:size :heading-1
:weight :semi-bold
:style {:color colors/white}} "Enable-biometrics"]
[quo/button
{:on-press #(rf/dispatch [:navigate-to :enable-notifications])
:type :grey
:override-theme :dark
:style {}} (i18n/label :t/continue)]]])
(defn enable-biometrics
[]
[rn/view {:style {:flex 1}}
[background/view true]
[page]])

14
src/status_im2/contexts/onboarding/enable_notifications/style.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns status-im2.contexts.onboarding.enable-notifications.style
(:require [quo2.foundations.colors :as colors]
[react-native.platform :as platform]))
(def page-container
{: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})

37
src/status_im2/contexts/onboarding/enable_notifications/view.cljs Normal file
View File

@ -0,0 +1,37 @@
(ns status-im2.contexts.onboarding.enable-notifications.view
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[status-im2.contexts.onboarding.enable-notifications.style :as style]
[utils.i18n :as i18n]
[status-im2.contexts.onboarding.common.background.view :as background]
[utils.re-frame :as rf]))
(defn navigation-bar
[]
[rn/view {:style style/navigation-bar}
[quo/page-nav
{:align-mid? true
:mid-section {:type :text-only :main-text ""}
}]])
(defn page
[]
[rn/view {:style style/page-container}
[navigation-bar]
[rn/view {:style {:padding-horizontal 20}}
[quo/text
{:size :heading-1
:weight :semi-bold
:style {:color colors/white}} "Enable-notifications"]
[quo/button
{:on-press #(rf/dispatch [:navigate-to :shell-stack])
:type :grey
:override-theme :dark
:style {}} (i18n/label :t/continue)]]])
(defn enable-notifications
[]
[rn/view {:style {:flex 1}}
[background/view true]
[page]])

10
src/status_im2/contexts/onboarding/new_to_status/view.cljs
View File

@ -49,7 +49,7 @@
(* 2 56) ;; two other list items
(* 2 16) ;; spacing between items
220) ;; extra spacing (top bar)
:on-press #(rf/dispatch [:generate-and-derive-addresses])}]
:on-press #(rf/dispatch [:navigate-to :create-profile])}]
[rn/view {:style style/subtitle-container}
[quo/text
@ -59,6 +59,14 @@
(i18n/label :t/experienced-web3)]]
[rn/view {:style style/suboptions}
[quo/small-option-card
{:variant :icon
:title "Temporary (old) generate keys flow"
:subtitle "generate keys"
:image (resources/get-image :use-keycard)
:accessibility-label :generate-old-key
:on-press #(rf/dispatch [:generate-and-derive-addresses])}]
[rn/view {:style style/space-between-suboptions}]
[quo/small-option-card
{:variant :icon
:title (i18n/label :t/use-recovery-phrase)

2
src/status_im2/contexts/onboarding/profiles/view.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.onboarding.profiles.view
(:require [status-im2.contexts.onboarding.common.background :as background]))
(:require [status-im2.contexts.onboarding.common.background.view :as background]))
(defn views
[]

34
src/status_im2/navigation/screens.cljs
View File

@ -13,6 +13,10 @@
[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.create-password.view :as create-password]
[status-im2.contexts.onboarding.create-profile.view :as create-profile]
[status-im2.contexts.onboarding.enable-biometrics.view :as enable-biometrics]
[status-im2.contexts.onboarding.enable-notifications.view :as enable-notifications]
[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]
@ -116,7 +120,35 @@
:topBar {:visible false}
:navigationBar {:backgroundColor colors/black}}
:insets {:top false}
:component new-to-status/new-to-status}]
:component new-to-status/new-to-status}
{:name :create-profile
:options {:statusBar {:style :light}
:topBar {:visible false}
:navigationBar {:backgroundColor colors/black}}
:insets {:top false}
:component create-profile/create-profile}
{:name :create-profile-password
:options {:statusBar {:style :light}
:topBar {:visible false}
:navigationBar {:backgroundColor colors/black}}
:insets {:top false}
:component create-password/create-password}
{:name :enable-biometrics
:options {:statusBar {:style :light}
:topBar {:visible false}
:navigationBar {:backgroundColor colors/black}}
:insets {:top false}
:component enable-biometrics/enable-biometrics}
{:name :enable-notifications
:options {:statusBar {:style :light}
:topBar {:visible false}
:navigationBar {:backgroundColor colors/black}}
:insets {:top false}
:component enable-notifications/enable-notifications}]
(when config/quo-preview-enabled?
quo.preview/screens)

2
test/appium/views/sign_in_view.py
View File

@ -133,7 +133,7 @@ class SignInView(BaseView):
self.migration_password_input = EditBox(self.driver, accessibility_id="enter-password-input")
self.sign_in_button = SignInButton(self.driver)
self.access_key_button = AccessKeyButton(self.driver)
self.generate_key_button = Button(self.driver, translation_id="generate-new-key")
self.generate_key_button = Button(self.driver, accessibility_id="generate-old-key")
self.your_keys_more_icon = Button(self.driver, xpath="//androidx.appcompat.widget.LinearLayoutCompat")
self.generate_new_key_button = Button(self.driver, accessibility_id="generate-a-new-key")
self.create_password_input = EditBox(self.driver,