diff --git a/resources/images/ui2/onboarding_illustration@2x.png b/resources/images/ui2/onboarding_illustration@2x.png index 94fbf2c172..366e6e8489 100644 Binary files a/resources/images/ui2/onboarding_illustration@2x.png and b/resources/images/ui2/onboarding_illustration@2x.png differ diff --git a/resources/images/ui2/onboarding_illustration@3x.png b/resources/images/ui2/onboarding_illustration@3x.png index d944255431..f670d77c60 100644 Binary files a/resources/images/ui2/onboarding_illustration@3x.png and b/resources/images/ui2/onboarding_illustration@3x.png differ diff --git a/src/quo/components/drawers/bottom_actions/style.cljs b/src/quo/components/drawers/bottom_actions/style.cljs index ab0be43032..9eacbacf7b 100644 --- a/src/quo/components/drawers/bottom_actions/style.cljs +++ b/src/quo/components/drawers/bottom_actions/style.cljs @@ -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 diff --git a/src/quo/components/drawers/bottom_actions/view.cljs b/src/quo/components/drawers/bottom_actions/view.cljs index c731091050..cbcc3c34bf 100644 --- a/src/quo/components/drawers/bottom_actions/view.cljs +++ b/src/quo/components/drawers/bottom_actions/view.cljs @@ -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)) diff --git a/src/quo/foundations/colors.cljs b/src/quo/foundations/colors.cljs index 4ba5ee0c4e..b58bc56a6d 100644 --- a/src/quo/foundations/colors.cljs +++ b/src/quo/foundations/colors.cljs @@ -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") diff --git a/src/schema/common.cljs b/src/schema/common.cljs index fac8d6c883..7945b1fa25 100644 --- a/src/schema/common.cljs +++ b/src/schema/common.cljs @@ -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)) diff --git a/src/status_im/contexts/onboarding/common/background/style.cljs b/src/status_im/contexts/onboarding/common/background/style.cljs index 53ae855b34..cbde25567f 100644 --- a/src/status_im/contexts/onboarding/common/background/style.cljs +++ b/src/status_im/contexts/onboarding/common/background/style.cljs @@ -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 diff --git a/src/status_im/contexts/onboarding/common/background/view.cljs b/src/status_im/contexts/onboarding/common/background/view.cljs index a894172c9e..dd88ea842d 100644 --- a/src/status_im/contexts/onboarding/common/background/view.cljs +++ b/src/status_im/contexts/onboarding/common/background/view.cljs @@ -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)) diff --git a/src/status_im/contexts/onboarding/new_to_status/style.cljs b/src/status_im/contexts/onboarding/create_or_sync_profile/style.cljs similarity index 66% rename from src/status_im/contexts/onboarding/new_to_status/style.cljs rename to src/status_im/contexts/onboarding/create_or_sync_profile/style.cljs index 722aeb0b22..4b82753b00 100644 --- a/src/status_im/contexts/onboarding/new_to_status/style.cljs +++ b/src/status_im/contexts/onboarding/create_or_sync_profile/style.cljs @@ -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}) diff --git a/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs b/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs new file mode 100644 index 0000000000..7926c8fb1a --- /dev/null +++ b/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs @@ -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]) diff --git a/src/status_im/contexts/onboarding/events.cljs b/src/status_im/contexts/onboarding/events.cljs index b2bfc22b36..b4b66db725 100644 --- a/src/status_im/contexts/onboarding/events.cljs +++ b/src/status_im/contexts/onboarding/events.cljs @@ -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]}]})) diff --git a/src/status_im/contexts/onboarding/getting_started_doc/style.cljs b/src/status_im/contexts/onboarding/getting_started_doc/style.cljs new file mode 100644 index 0000000000..b9e04f33e6 --- /dev/null +++ b/src/status_im/contexts/onboarding/getting_started_doc/style.cljs @@ -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}) diff --git a/src/status_im/contexts/onboarding/getting_started_doc/view.cljs b/src/status_im/contexts/onboarding/getting_started_doc/view.cljs new file mode 100644 index 0000000000..d062baa59d --- /dev/null +++ b/src/status_im/contexts/onboarding/getting_started_doc/view.cljs @@ -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}])) diff --git a/src/status_im/contexts/onboarding/identifiers/view.cljs b/src/status_im/contexts/onboarding/identifiers/view.cljs index e82c7bffa1..949c79325d 100644 --- a/src/status_im/contexts/onboarding/identifiers/view.cljs +++ b/src/status_im/contexts/onboarding/identifiers/view.cljs @@ -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)]]]])) diff --git a/src/status_im/contexts/onboarding/intro/style.cljs b/src/status_im/contexts/onboarding/intro/style.cljs index a41aef5c7f..c5b813dcd6 100644 --- a/src/status_im/contexts/onboarding/intro/style.cljs +++ b/src/status_im/contexts/onboarding/intro/style.cljs @@ -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}) diff --git a/src/status_im/contexts/onboarding/intro/view.cljs b/src/status_im/contexts/onboarding/intro/view.cljs index d379946574..79107d8468 100644 --- a/src/status_im/contexts/onboarding/intro/view.cljs +++ b/src/status_im/contexts/onboarding/intro/view.cljs @@ -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]]) diff --git a/src/status_im/contexts/onboarding/new_to_status/view.cljs b/src/status_im/contexts/onboarding/new_to_status/view.cljs deleted file mode 100644 index b838025e4f..0000000000 --- a/src/status_im/contexts/onboarding/new_to_status/view.cljs +++ /dev/null @@ -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]])) diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index 4be18c3014..363de5202f 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -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 diff --git a/src/utils/image_server.cljs b/src/utils/image_server.cljs index a1f24f53a1..5a5f58fd9a 100644 --- a/src/utils/image_server.cljs +++ b/src/utils/image_server.cljs @@ -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:") diff --git a/test/appium/views/sign_in_view.py b/test/appium/views/sign_in_view.py index ec2ad9b7fd..a88f169048 100644 --- a/test/appium/views/sign_in_view.py +++ b/test/appium/views/sign_in_view.py @@ -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() diff --git a/translations/en.json b/translations/en.json index 49e5a90dc8..27b727e98b 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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}}",