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

feat: simplification of onboarding intro view (#20386) 

* feat: simplification of onboarding intro view

Signed-off-by: yqrashawn <namy.19@gmail.com>

* feat: new onboarding illustration

* fix: add accessibility label

* fix: wrong navigation stack

Signed-off-by: yqrashawn <namy.19@gmail.com>

* e2e: updated sign in

* fix: onboarding nav stack after flow change

---------

Signed-off-by: yqrashawn <namy.19@gmail.com>
Co-authored-by: Yevheniia Berdnyk <ie.berdnyk@gmail.com>
This commit is contained in:
yqrashawn 2024-06-25 11:03:10 +08:00 committed by GitHub
parent 9481890624
commit ead51b7e7c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 345 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/ui2/onboarding_illustration@2x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
resources/images/ui2/onboarding_illustration@3x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 2.8 MiB

5
src/quo/components/drawers/bottom_actions/style.cljs
View File

@ -20,8 +20,9 @@
{:background-color (when-not (or scroll? blur?)
(colors/theme-colors colors/white colors/neutral-95 theme))})
(def buttons-container
{:flex-direction :row
(defn buttons-container
[actions]
{:flex-direction (if (= actions :two-vertical-actions) :column :row)
:justify-content :space-around
:padding-vertical 12
:gap 12

17
src/quo/components/drawers/bottom_actions/view.cljs
View File

@ -17,9 +17,9 @@
[:catn
[:props
[:map {:closed true}
[:actions [:maybe [:enum :one-action :two-actions]]]
[:actions [:maybe [:enum :one-action :two-actions :two-vertical-actions]]]
[:description {:optional true} [:maybe [:enum :top :bottom :top-error]]]
[:description-text {:optional true} [:maybe :string]]
[:description-text {:optional true} [:maybe [:or :string :schema.common/hiccup]]]
[:description-top-text {:optional true} [:maybe :string]]
[:error-message {:optional true} [:maybe :string]]
[:role {:optional true} [:maybe [:enum :admin :member :token-master :owner]]]
@ -72,8 +72,9 @@
:context (i18n/label (keyword "t" role))}
context-tag-props)]])
[rn/view {:style style/buttons-container}
(when (= actions :two-actions)
[rn/view {:style (style/buttons-container actions)}
(when (or (= actions :two-actions)
(= actions :two-vertical-actions))
[button/button
(merge
{:size 40
@ -93,8 +94,10 @@
button-one-props)
button-one-label]]
(when (= description :bottom)
[text/text
{:size :paragraph-2
:style (style/description-bottom scroll? blur? theme)} description-text])]))
(if (string? description-text)
[text/text
{:size :paragraph-2
:style (style/description-bottom scroll? blur? theme)} description-text]
description-text))]))
(def view (schema/instrument #'view-internal ?schema))

2
src/quo/foundations/colors.cljs
View File

@ -151,7 +151,7 @@
(def black-opa-0 (alpha black 0))
(def black-opa-30 (alpha black 0.3))
(def black-opa-60 (alpha black 0.6))
(def onboarding-header-black "#000716")
(def onboarding-header-black neutral-100)
(def border-avatar-light
"Simulates a blurred, transparent border for avatars in light mode"
"#475060")

6
src/schema/common.cljs
View File

@ -33,6 +33,9 @@
[:fn {:error/message "schema.common/exception should be of type ExceptionInfo"}
(fn [v] (instance? ExceptionInfo v))])
(def ^:private ?hiccup
vector?)
(defn register-schemas
[]
(registry/register ::theme ?theme)
@ -40,4 +43,5 @@
(registry/register ::public-key ?public-key)
(registry/register ::image-source ?image-source)
(registry/register ::rpc-call ?rpc-call)
(registry/register ::exception ?exception))
(registry/register ::exception ?exception)
(registry/register ::hiccup ?hiccup))

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

@ -4,7 +4,7 @@
[react-native.platform :as platform]))
(def background-container
{:background-color colors/neutral-95
{:background-color colors/neutral-100
:flex-direction :row
:position :absolute
:overflow :hidden

4
src/status_im/contexts/onboarding/common/background/view.cljs
View File

@ -29,8 +29,8 @@
[rn/image
{:resize-mode :stretch
:resize-method :scale
:style {:margin-top 32
:width content-width}
:style {:top 138
:width content-width}
:source (resources/get-image :onboarding-illustration)}])
(defonce progress (atom nil))

13
src/status_im/contexts/onboarding/new_to_status/style.cljs → src/status_im/contexts/onboarding/create_or_sync_profile/style.cljs
View File

@ -1,4 +1,4 @@
(ns status-im.contexts.onboarding.new-to-status.style
(ns status-im.contexts.onboarding.create-or-sync-profile.style
(:require
[quo.foundations.colors :as colors]))
@ -24,15 +24,4 @@
(def subtitle-container
{:margin-top 24})
(def doc-main-content
{:color colors/white
:margin-bottom 4})
(def doc-subtitle
{:margin-top 20
:margin-bottom 4})
(def doc-content
{:color colors/white-opa-70})
(def space-between-suboptions {:height 12})

141
src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs Normal file
View File

@ -0,0 +1,141 @@
(ns status-im.contexts.onboarding.create-or-sync-profile.view
(:require
[quo.core :as quo]
re-frame.db
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im.common.not-implemented :as not-implemented]
[status-im.common.resources :as resources]
[status-im.config :as config]
[status-im.contexts.onboarding.create-or-sync-profile.style :as style]
[status-im.contexts.onboarding.getting-started-doc.view :as getting-started-doc]
[utils.debounce :as debounce]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn- navigate-to-create-profile
[]
(debounce/throttle-and-dispatch
[:onboarding/navigate-to-create-profile]
1000))
(defn- navigate-to-sign-in-by-syncing
[]
(debounce/throttle-and-dispatch
[:onboarding/navigate-to-sign-in-by-syncing]
1000))
(defn- navigate-to-sign-in-by-seed-phrase
[create-profile?]
(rf/dispatch [:onboarding/navigate-to-sign-in-by-seed-phrase
(if create-profile?
:screen/onboarding.new-to-status
:screen/onboarding.sync-or-recover-profile)]))
(defn- option-card-max-height
[window-height]
(- window-height
(* 2 56) ;; two other list items
(* 2 16) ;; spacing between items
220) ;; extra spacing (top bar)
)
(defn- create-profile-option-card
[window-height]
[quo/small-option-card
{:variant :main
:title (i18n/label :t/generate-keys)
:subtitle (i18n/label :t/generate-keys-subtitle)
:button-label (i18n/label :t/lets-go)
:accessibility-label :generate-key-option-card
:image (resources/get-image :generate-keys)
:max-height (option-card-max-height window-height)
:on-press navigate-to-create-profile}])
(defn- sync-profile-option-card
[window-height]
[quo/small-option-card
{:variant :main
:title (i18n/label :t/sign-in-by-syncing)
:subtitle (i18n/label :t/if-you-have-status-on-another-device)
:button-label (i18n/label :t/scan-sync-code)
:accessibility-label :scan-sync-code-option-card
:image (resources/get-image :generate-keys)
:max-height (option-card-max-height window-height)
:on-press navigate-to-sign-in-by-syncing}])
(defn sign-in-options
[sign-in-type]
(let [window-height (rf/sub [:dimensions/window-height])
create-profile? (= sign-in-type :create-profile)
nav-to-seed-phrase-with-cur-screen (rn/use-callback
#(navigate-to-sign-in-by-seed-phrase
create-profile?)
[create-profile?])
main-option-card (if create-profile?
create-profile-option-card
sync-profile-option-card)]
[rn/view {:style style/options-container}
[quo/text
{:style style/title
:size :heading-1
:weight :semi-bold}
(i18n/label (if create-profile? :t/create-profile :t/sync-or-recover-profile))]
[main-option-card window-height]
[rn/view {:style style/subtitle-container}
[quo/text
{:style style/subtitle
:size :paragraph-2
:weight :medium}
(i18n/label (if create-profile? :t/experienced-web3 :t/dont-have-statatus-on-another-device))]]
[rn/view
[quo/small-option-card
{:variant :icon
:title (i18n/label :t/use-recovery-phrase)
:subtitle (i18n/label :t/use-recovery-phrase-subtitle)
:accessibility-label :use-recovery-phrase-option-card
:image (resources/get-image :ethereum-address)
:on-press nav-to-seed-phrase-with-cur-screen}]
[rn/view {:style style/space-between-suboptions}]
(when config/show-not-implemented-features?
[quo/small-option-card
{:variant :icon
:title (i18n/label :t/use-keycard)
:subtitle (i18n/label :t/use-keycard-subtitle)
:accessibility-label :use-keycard-option-card
:image (resources/get-image :use-keycard)
:on-press status-im.common.not-implemented/alert}])]]))
(defn- navigate-back
[]
(rf/dispatch [:onboarding/overlay-dismiss])
(rf/dispatch [:navigate-back]))
(defn- navigate-to-quo-preview
[]
(rf/dispatch [:navigate-to :quo-preview]))
(defn- internal-view
[sign-in-type]
(let [{:keys [top]} (safe-area/get-insets)]
[rn/view {:style style/content-container}
[quo/page-nav
{:margin-top top
:type :no-title
:background :blur
:icon-name :i/arrow-left
:on-press navigate-back
:right-side [{:icon-name :i/info
:on-press getting-started-doc/show-as-bottom-sheet}
(when config/quo-preview-enabled?
{:icon-name :i/reveal-whitelist
:on-press navigate-to-quo-preview})]}]
[sign-in-options sign-in-type]]))
(defn create-profile
[]
[internal-view :create-profile])
(defn sync-or-recover-profile
[]
[internal-view :sync-or-recover-profile])

60
src/status_im/contexts/onboarding/events.cljs
View File

@ -15,7 +15,10 @@
[{:keys [db]} onboarding-data]
{:db (update db :onboarding/profile merge onboarding-data)
:dispatch [:navigate-to-within-stack
[:screen/onboarding.create-profile-password :screen/onboarding.new-to-status]]})
[:screen/onboarding.create-profile-password
(get db
:onboarding/navigated-to-enter-seed-phrase-from-screen
:screen/onboarding.new-to-status)]]})
(rf/defn enable-biometrics
{:events [:onboarding/enable-biometrics]}
@ -25,13 +28,24 @@
{:on-success #(rf/dispatch [:onboarding/biometrics-done])
:on-fail #(rf/dispatch [:onboarding/biometrics-fail %])}]]]})
(rf/defn navigate-to-enable-notifications
{:events [:onboarding/navigate-to-enable-notifications]}
[{:keys [db]}]
(let [key-uid (get-in db [:profile/profile :key-uid])]
{:db (dissoc db :onboarding/profile)
:dispatch [:navigate-to-within-stack
[:screen/onboarding.enable-notifications :screen/onboarding.enable-biometrics]]}))
(rf/reg-event-fx :onboarding/navigate-to-sign-in-by-seed-phrase
(fn [{:keys [db]} [from-screen]]
{:db (assoc db :onboarding/navigated-to-enter-seed-phrase-from-screen from-screen)
:fx [[:dispatch [:navigate-to-within-stack [:screen/onboarding.enter-seed-phrase from-screen]]]]}))
(rf/reg-event-fx :onboarding/navigate-to-enable-notifications-from-syncing
(fn [{:keys [db]}]
{:db (dissoc db :onboarding/profile)
:dispatch [:navigate-to-within-stack
[:screen/onboarding.enable-notifications :screen/onboarding.enable-biometrics]]}))
(rf/reg-event-fx :onboarding/navigate-to-enable-notifications
(fn [{:keys [db]}]
{:dispatch [:navigate-to-within-stack
[:screen/onboarding.enable-notifications
(get db
:onboarding/navigated-to-enter-seed-phrase-from-screen
:screen/onboarding.new-to-status)]]}))
(rf/defn biometrics-done
{:events [:onboarding/biometrics-done]}
@ -54,7 +68,10 @@
(:onboarding/profile db)]
(rf/merge cofx
{:dispatch [:navigate-to-within-stack
[:screen/onboarding.generating-keys :screen/onboarding.new-to-status]]
[:screen/onboarding.generating-keys
(get db
:onboarding/navigated-to-enter-seed-phrase-from-screen
:screen/onboarding.new-to-status)]]
:dispatch-later [{:ms constants/onboarding-generating-keys-animation-duration-ms
:dispatch [:onboarding/navigate-to-identifiers]}]
:db (-> db
@ -83,7 +100,10 @@
(assoc-in [:onboarding/profile :auth-method] constants/auth-method-password))
:dispatch (if supported-type
[:navigate-to-within-stack
[:screen/onboarding.enable-biometrics :screen/onboarding.new-to-status]]
[:screen/onboarding.enable-biometrics
(get db
:onboarding/navigated-to-enter-seed-phrase-from-screen
:screen/onboarding.new-to-status)]]
[:onboarding/create-account-and-login])}))
(rf/defn navigate-to-enable-biometrics
@ -118,7 +138,10 @@
:on-cancel #(re-frame/dispatch [:pop-to-root :multiaccounts])}}
{:db (assoc-in db [:onboarding/profile :seed-phrase] seed-phrase)
:dispatch [:navigate-to-within-stack
[:screen/onboarding.create-profile :screen/onboarding.new-to-status]]}))
[:screen/onboarding.create-profile
(get db
:onboarding/navigated-to-enter-seed-phrase-from-screen
:screen/onboarding.new-to-status)]]}))
(rf/defn navigate-to-create-profile
{:events [:onboarding/navigate-to-create-profile]}
@ -128,6 +151,13 @@
:dispatch [:navigate-to-within-stack
[:screen/onboarding.create-profile :screen/onboarding.new-to-status]]})
(rf/reg-event-fx :onboarding/navigate-to-sign-in-by-syncing
(fn [{:keys [db]}]
;; Restart the flow
{:db (dissoc db :onboarding/profile)
:dispatch [:navigate-to-within-stack
[:screen/onboarding.sign-in-intro :screen/onboarding.sync-or-recover-profile]]}))
(rf/reg-event-fx :onboarding/set-auth-method
(fn [{:keys [db]} [auth-method]]
{:db (assoc db :auth-method auth-method)}))
@ -151,7 +181,8 @@
:on-success (fn []
(rf/dispatch [:onboarding/set-auth-method auth-method])
(when syncing?
(rf/dispatch [:onboarding/navigate-to-enable-notifications])))
(rf/dispatch
[:onboarding/navigate-to-enable-notifications-from-syncing])))
:on-error #(log/error "failed to save biometrics"
{:key-uid key-uid
:error %})}))))
@ -161,6 +192,9 @@
[{:keys [db]}]
(if (:onboarding/generated-keys? db)
{:dispatch [:navigate-to-within-stack
[:screen/onboarding.identifiers :screen/onboarding.new-to-status]]}
[:screen/onboarding.identifiers
(get db
:onboarding/navigated-to-enter-seed-phrase-from-screen
:screen/onboarding.new-to-status)]]}
{:dispatch-later [{:ms constants/onboarding-generating-keys-navigation-retry-ms
:dispatch [:onboarding/navigate-to-identifiers]}]}))

14
src/status_im/contexts/onboarding/getting_started_doc/style.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns status-im.contexts.onboarding.getting-started-doc.style
(:require
[quo.foundations.colors :as colors]))
(def main-content
{:color colors/white
:margin-bottom 4})
(def subtitle
{:margin-top 20
:margin-bottom 4})
(def content
{:color colors/white-opa-70})

50
src/status_im/contexts/onboarding/getting_started_doc/view.cljs Normal file
View File

@ -0,0 +1,50 @@
(ns status-im.contexts.onboarding.getting-started-doc.view
(:require
[quo.core :as quo]
[status-im.contexts.onboarding.getting-started-doc.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn getting-started-doc
[]
[quo/documentation-drawers
{:title (i18n/label :t/getting-started-with-status)
:shell? true}
[:<>
[quo/text
{:size :paragraph-2
:style style/main-content}
(i18n/label :t/getting-started-description)]
[quo/text
{:size :paragraph-1
:style style/subtitle
:weight :semi-bold}
(i18n/label :t/generate-keys)]
[quo/text
{:size :paragraph-2
:style style/content}
(i18n/label :t/getting-started-generate-keys-description)]
[quo/text
{:size :paragraph-1
:style style/subtitle
:weight :semi-bold}
(i18n/label :t/getting-started-generate-keys-from-recovery-phrase)]
[quo/text
{:size :paragraph-2
:style style/content}
(i18n/label :t/getting-started-generate-keys-from-recovery-phrase-description)]
[quo/text
{:size :paragraph-1
:style style/subtitle
:weight :semi-bold}
(i18n/label :t/getting-started-generate-keys-on-keycard)]
[quo/text
{:size :paragraph-2
:style style/content}
(i18n/label :t/getting-started-generate-keys-on-keycard-description)]]])
(defn show-as-bottom-sheet
[]
(rf/dispatch [:show-bottom-sheet
{:content getting-started-doc
:shell? true}]))

8
src/status_im/contexts/onboarding/identifiers/view.cljs
View File

@ -20,6 +20,10 @@
{:text (i18n/label :t/emojihash)
:sub-text (i18n/label :t/emojihash-description)}])
(defn- navigate-to-enable-notifications
[]
(rf/dispatch [:onboarding/navigate-to-enable-notifications]))
(defn f-view
[]
(let [progress (atom nil)
@ -62,9 +66,7 @@
{:accessibility-label :skip-identifiers
:type :grey
:background :blur
:on-press #(rf/dispatch [:navigate-to-within-stack
[:screen/onboarding.enable-notifications
:screen/onboarding.new-to-status]])
:on-press navigate-to-enable-notifications
:container-style style/button}
(i18n/label :t/continue)]]]]))

14
src/status_im/contexts/onboarding/intro/style.cljs
View File

@ -7,9 +7,10 @@
:justify-content :flex-end})
(def text-container
{:flex 1
:max-width 180
:flex-wrap :wrap})
{:flex 1
:text-align :center
:margin-top 16
:flex-wrap :wrap})
(def plain-text
{:color colors/white-opa-70})
@ -17,3 +18,10 @@
(def highlighted-text
{:flex 1
:color colors/white})
(def bottom-actions-container
{:position :absolute
:background-color colors/onboarding-header-black
:left 0
:right 0
:padding-bottom 40})

71
src/status_im/contexts/onboarding/intro/view.cljs
View File

@ -2,12 +2,10 @@
(:require
[quo.core :as quo]
[react-native.core :as rn]
[status-im.constants :as constants]
[status-im.contexts.onboarding.common.background.view :as background]
[status-im.contexts.onboarding.common.overlay.view :as overlay]
[status-im.contexts.onboarding.intro.style :as style]
[status-im.contexts.onboarding.terms.view :as terms]
[status-im.contexts.syncing.scan-sync-code.view :as scan-sync-code]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
@ -15,40 +13,37 @@
[]
[rn/view {:style style/page-container}
[background/view false]
[quo/drawer-buttons
{:on-init (fn [reset-top-animation-fn]
(reset! scan-sync-code/dismiss-animations reset-top-animation-fn))
:animations-duration constants/onboarding-modal-animation-duration
:animations-delay constants/onboarding-modal-animation-delay
:top-card {:on-press #(rf/dispatch [:open-modal
:screen/onboarding.sign-in-intro])
:heading (i18n/label :t/sign-in)
:animated-heading (i18n/label :t/sign-in-by-syncing)
:accessibility-label :already-use-status-button}
:bottom-card {:on-press (fn []
(when-let [blur-show-fn @overlay/blur-show-fn-atom]
(blur-show-fn))
(rf/dispatch
[:open-modal :screen/onboarding.new-to-status]))
:heading (i18n/label :t/new-to-status)
:accessibility-label :new-to-status-button}}
[quo/text
{:size :paragraph-2
:weight :regular
:style style/plain-text}
(i18n/label :t/you-already-use-status)]
[quo/text {:style style/text-container}
[quo/text
{:size :paragraph-2
:weight :regular
:style style/plain-text}
(i18n/label :t/by-continuing-you-accept)]
[quo/text
{:on-press #(rf/dispatch [:show-bottom-sheet
{:content (fn [] [terms/terms-of-use])
:shell? true}])
:size :paragraph-2
:weight :regular
:style style/highlighted-text}
(i18n/label :t/terms-of-service)]]]
[quo/bottom-actions
{:container-style style/bottom-actions-container
:actions :two-vertical-actions
:description :bottom
:description-text [quo/text
{:style style/text-container
:size :paragraph-2
:weight :regular}
[quo/text {:style style/plain-text}
(i18n/label :t/by-continuing-you-accept)]
[quo/text
{:on-press #(rf/dispatch [:show-bottom-sheet
{:content (fn [] [terms/terms-of-use])
:shell? true}])
:style style/highlighted-text}
(i18n/label :t/terms-of-service)]]
:button-one-label (i18n/label :t/sync-or-recover-profile)
:button-one-props {:type :dark-grey
:accessibility-label :already-use-status-button
:on-press (fn []
(when-let [blur-show-fn @overlay/blur-show-fn-atom]
(blur-show-fn))
(rf/dispatch
[:open-modal
:screen/onboarding.sync-or-recover-profile]))}
:button-two-label (i18n/label :t/create-profile)
:button-two-props {:accessibility-label :new-to-status-button
:on-press
(fn []
(when-let [blur-show-fn @overlay/blur-show-fn-atom]
(blur-show-fn))
(rf/dispatch
[:open-modal :screen/onboarding.new-to-status]))}}]
[overlay/view]])

117
src/status_im/contexts/onboarding/new_to_status/view.cljs
View File

@ -1,117 +0,0 @@
(ns status-im.contexts.onboarding.new-to-status.view
(:require
[quo.core :as quo]
re-frame.db
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im.common.resources :as resources]
[status-im.config :as config]
[status-im.contexts.onboarding.new-to-status.style :as style]
[utils.debounce :as debounce]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn sign-in-options
[]
(let [window (rf/sub [:dimensions/window])]
[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)
:button-label (i18n/label :t/lets-go)
:image (resources/get-image :generate-keys)
:max-height (- (:height window)
(* 2 56) ;; two other list items
(* 2 16) ;; spacing between items
220) ;; extra spacing (top bar)
:on-press #(debounce/throttle-and-dispatch
[:onboarding/navigate-to-create-profile]
1000)}]
[rn/view {:style style/subtitle-container}
[quo/text
{:style style/subtitle
:size :paragraph-2
:weight :medium}
(i18n/label :t/experienced-web3)]]
[rn/view
[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 [:navigate-to-within-stack
[:screen/onboarding.enter-seed-phrase
:screen/onboarding.new-to-status]])}]
[rn/view {:style style/space-between-suboptions}]
(when config/show-not-implemented-features?
[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 #(js/alert "TODO: to be implemented")}])]]))
(defn getting-started-doc
[]
[quo/documentation-drawers
{:title (i18n/label :t/getting-started-with-status)
:shell? true}
[:<>
[quo/text
{:size :paragraph-2
:style style/doc-main-content}
(i18n/label :t/getting-started-description)]
[quo/text
{:size :paragraph-1
:style style/doc-subtitle
:weight :semi-bold}
(i18n/label :t/generate-keys)]
[quo/text
{:size :paragraph-2
:style style/doc-content}
(i18n/label :t/getting-started-generate-keys-description)]
[quo/text
{:size :paragraph-1
:style style/doc-subtitle
:weight :semi-bold}
(i18n/label :t/getting-started-generate-keys-from-recovery-phrase)]
[quo/text
{:size :paragraph-2
:style style/doc-content}
(i18n/label :t/getting-started-generate-keys-from-recovery-phrase-description)]
[quo/text
{:size :paragraph-1
:style style/doc-subtitle
:weight :semi-bold}
(i18n/label :t/getting-started-generate-keys-on-keycard)]
[quo/text
{:size :paragraph-2
:style style/doc-content}
(i18n/label :t/getting-started-generate-keys-on-keycard-description)]]])
(defn new-to-status
[]
(let [{:keys [top]} (safe-area/get-insets)]
[rn/view {:style style/content-container}
[quo/page-nav
{:margin-top top
:type :no-title
:background :blur
:icon-name :i/arrow-left
:on-press #(do
(rf/dispatch [:onboarding/overlay-dismiss])
(rf/dispatch [:navigate-back]))
:right-side [{:icon-name :i/info
:on-press #(rf/dispatch [:show-bottom-sheet
{:content getting-started-doc
:shell? true}])}
(when config/quo-preview-enabled?
{:icon-name :i/reveal-whitelist
:on-press #(rf/dispatch [:navigate-to :quo-preview])})]}]
[sign-in-options]]))

13
src/status_im/navigation/screens.cljs
View File

@ -26,6 +26,7 @@
[status-im.contexts.communities.actions.share-community.view :as share-community]
[status-im.contexts.communities.discover.view :as communities.discover]
[status-im.contexts.communities.overview.view :as communities.overview]
[status-im.contexts.onboarding.create-or-sync-profile.view :as create-or-sync-profile]
[status-im.contexts.onboarding.create-password.view :as create-password]
[status-im.contexts.onboarding.create-profile.view :as create-profile]
[status-im.contexts.onboarding.enable-biometrics.view :as enable-biometrics]
@ -33,7 +34,6 @@
[status-im.contexts.onboarding.generating-keys.view :as generating-keys]
[status-im.contexts.onboarding.identifiers.view :as identifiers]
[status-im.contexts.onboarding.intro.view :as intro]
[status-im.contexts.onboarding.new-to-status.view :as new-to-status]
[status-im.contexts.onboarding.sign-in.view :as sign-in]
[status-im.contexts.onboarding.syncing.progress.view :as syncing-devices]
[status-im.contexts.onboarding.syncing.results.view :as syncing-results]
@ -284,7 +284,16 @@
transitions/push-animations-for-transparent-background)
:popGesture false
:modalPresentationStyle :overCurrentContext}
:component new-to-status/new-to-status}
:component create-or-sync-profile/create-profile}
{:name :screen/onboarding.sync-or-recover-profile
:options {:theme :dark
:layout options/onboarding-transparent-layout
:animations (merge
transitions/new-to-status-modal-animations
transitions/push-animations-for-transparent-background)
:popGesture false
:modalPresentationStyle :overCurrentContext}
:component create-or-sync-profile/sync-or-recover-profile}
{:name :screen/onboarding.create-profile
:options {:theme :dark

1
src/utils/image_server.cljs
View File

@ -4,7 +4,6 @@
[react-native.fs :as utils.fs]
[react-native.platform :as platform]
[schema.core :as schema]
[schema.quo]
[utils.datetime :as datetime]))
(def ^:const image-server-uri-prefix "https://localhost:")

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

@ -147,9 +147,11 @@ class SignInView(BaseView):
self.driver = driver
# intro screen
self.sign_in_intro_button = Button(self.driver, accessibility_id="already-use-status-button")
self.i_m_new_in_status_button = Button(self.driver, accessibility_id="new-to-status-button")
self.create_profile_button = Button(self.driver, accessibility_id='new-to-status-button')
self.sync_or_recover_profile_button = Button(self.driver, accessibility_id='already-use-status-button')
self.migration_password_input = EditBox(self.driver, accessibility_id="enter-password-input")
self.access_key_button = AccessKeyButton(self.driver)
self.generate_key_button = Button(self.driver, accessibility_id="generate-old-key")
@ -195,7 +197,7 @@ class SignInView(BaseView):
self.cancel_custom_seed_phrase_button = Button(self.driver, accessibility_id="cancel-custom-seed-phrase")
# New onboarding
self.generate_keys_button = Button(self.driver, translation_id="lets-go")
self.generate_keys_button = Button(self.driver, accessibility_id="generate-key-option-card")
self.profile_title_input = EditBox(self.driver, accessibility_id="profile-title-input")
self.profile_continue_button = Button(self.driver, accessibility_id="submit-create-profile-button")
self.profile_password_edit_box = EditBox(self.driver, translation_id="password-creation-placeholder-1")
@ -206,7 +208,7 @@ class SignInView(BaseView):
self.enable_notifications_button = Button(self.driver, accessibility_id="enable-notifications-button")
self.maybe_later_button = Button(self.driver, accessibility_id="enable-notifications-later-button")
self.start_button = Button(self.driver, accessibility_id="welcome-button")
self.use_recovery_phrase_button = Button(self.driver, translation_id="use-recovery-phrase")
self.use_recovery_phrase_button = Button(self.driver, accessibility_id="use-recovery-phrase-option-card")
self.passphrase_edit_box = EditBox(self.driver, accessibility_id="passphrase-input")
self.show_profiles_button = Button(self.driver, accessibility_id="show-profiles")
self.plus_profiles_button = Button(self.driver, accessibility_id="show-new-account-options")
@ -232,10 +234,8 @@ class SignInView(BaseView):
username="test user", first_user=True):
self.driver.info("## Creating new multiaccount (password:'%s', keycard:'%s', enable_notification: '%s')" %
(password, str(keycard), str(enable_notifications)), device=False)
if self.element_by_text('CONTINUE').is_element_displayed(5):
self.element_by_text('CONTINUE').click()
if first_user:
self.i_m_new_in_status_button.click_until_presence_of_element(self.generate_keys_button)
self.create_profile_button.click_until_presence_of_element(self.generate_keys_button)
else:
if self.show_profiles_button.is_element_displayed(20):
self.show_profiles_button.click()
@ -273,7 +273,7 @@ class SignInView(BaseView):
self.driver.info("## Recover access(password:%s, keycard:%s)" % (password, str(keycard)), device=False)
if not second_user:
self.i_m_new_in_status_button.click_until_presence_of_element(self.generate_keys_button)
self.sync_or_recover_profile_button.click_until_presence_of_element(self.generate_keys_button)
else:
self.show_profiles_button.wait_and_click(20)
self.plus_profiles_button.click()

3
translations/en.json
View File

@ -719,6 +719,7 @@
"identicon-ring": "Identicon ring",
"identicon-ring-explanation": "This multicoloured ring around your profile picture represents your chat key.",
"if-you-cancel": "If you cancel, you can request to join this community at any point.",
"if-you-have-status-on-another-device": "If you have Status on another device",
"image-remove-current": "Remove current photo",
"image-source-gallery": "Select from gallery",
"image-source-make-photo": "Capture",
@ -1396,6 +1397,7 @@
"symbol": "Symbol",
"sync-all-devices": "Sync all devices",
"sync-in-progress": "Syncing...",
"sync-or-recover-profile": "Sync or recover profile",
"sync-settings": "Sync settings",
"sync-synced": "In sync",
"syncing-devices": "Syncing...",
@ -2361,6 +2363,7 @@
"read-more": "Read more",
"token-gated-communities-info": "Here will be something relevant about this topic. This will help the user get more context and therefore have a better understanding of it.",
"dont-yell-at-me": "Don’t yell at me",
"dont-have-statatus-on-another-device": "Don't have Status on another device?",
"unmute-channel": "Unmute channel",
"all-messages": "All messages",
"muted-until": "Muted until {{duration}}",