diff --git a/resources/images/ui2/generating-keys-1@2x.png b/resources/images/ui2/generating-keys-1@2x.png new file mode 100644 index 0000000000..e2103e2459 Binary files /dev/null and b/resources/images/ui2/generating-keys-1@2x.png differ diff --git a/resources/images/ui2/generating-keys-1@3x.png b/resources/images/ui2/generating-keys-1@3x.png new file mode 100644 index 0000000000..d8471ffe90 Binary files /dev/null and b/resources/images/ui2/generating-keys-1@3x.png differ diff --git a/resources/images/ui2/generating-keys-2@2x.png b/resources/images/ui2/generating-keys-2@2x.png new file mode 100644 index 0000000000..9ea6de6503 Binary files /dev/null and b/resources/images/ui2/generating-keys-2@2x.png differ diff --git a/resources/images/ui2/generating-keys-2@3x.png b/resources/images/ui2/generating-keys-2@3x.png new file mode 100644 index 0000000000..a092ca6210 Binary files /dev/null and b/resources/images/ui2/generating-keys-2@3x.png differ diff --git a/resources/images/ui2/generating-keys-3@2x.png b/resources/images/ui2/generating-keys-3@2x.png new file mode 100644 index 0000000000..db55cc4297 Binary files /dev/null and b/resources/images/ui2/generating-keys-3@2x.png differ diff --git a/resources/images/ui2/generating-keys-3@3x.png b/resources/images/ui2/generating-keys-3@3x.png new file mode 100644 index 0000000000..85a26f247f Binary files /dev/null and b/resources/images/ui2/generating-keys-3@3x.png differ diff --git a/resources/videos2/generating_keys_01.mp4 b/resources/videos2/generating_keys_01.mp4 new file mode 100644 index 0000000000..d369a3b5a4 Binary files /dev/null and b/resources/videos2/generating_keys_01.mp4 differ diff --git a/resources/videos2/generating_keys_02.mp4 b/resources/videos2/generating_keys_02.mp4 new file mode 100644 index 0000000000..15b06b9421 Binary files /dev/null and b/resources/videos2/generating_keys_02.mp4 differ diff --git a/resources/videos2/generating_keys_03.mp4 b/resources/videos2/generating_keys_03.mp4 new file mode 100644 index 0000000000..bdf6a745fa Binary files /dev/null and b/resources/videos2/generating_keys_03.mp4 differ diff --git a/src/status_im2/common/parallax/style.cljs b/src/status_im2/common/parallax/style.cljs index 98fde2cbf9..4dab35ffa6 100644 --- a/src/status_im2/common/parallax/style.cljs +++ b/src/status_im2/common/parallax/style.cljs @@ -2,12 +2,14 @@ (:require [react-native.safe-area :as safe-area] [react-native.core :as rn])) -(def outer-container - {:position :absolute - :top (if rn/small-screen? (safe-area/get-top) 0) - :left 0 - :right 0 - :bottom 0}) +(defn outer-container + [container-style] + (merge {:position :absolute + :top (if rn/small-screen? (safe-area/get-top) 0) + :left 0 + :right 0 + :bottom 0} + container-style)) (def video {:position :absolute diff --git a/src/status_im2/common/parallax/view.cljs b/src/status_im2/common/parallax/view.cljs index ea53a3a5cb..ece499fb31 100644 --- a/src/status_im2/common/parallax/view.cljs +++ b/src/status_im2/common/parallax/view.cljs @@ -32,11 +32,11 @@ [:f> f-sensor-animated-video props]) (defn f-video - [{:keys [layers disable-parallax? offset stretch] + [{:keys [layers disable-parallax? offset stretch container-style] :or {offset 50 stretch 0}}] [rn/view - {:style style/outer-container} + {:style (style/outer-container container-style)} (map-indexed (fn [idx layer] [sensor-animated-video {:key (str layer idx) diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index 4b67c09839..1ec1939933 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -15,6 +15,9 @@ :music (js/require "../resources/images/ui2/music.png") :podcasts (js/require "../resources/images/ui2/podcasts.png") :generate-keys (js/require "../resources/images/ui2/generate-keys.png") + :generate-keys1 (js/require "../resources/images/ui2/generating-keys-1.png") + :generate-keys2 (js/require "../resources/images/ui2/generating-keys-2.png") + :generate-keys3 (js/require "../resources/images/ui2/generating-keys-3.png") :ethereum-address (js/require "../resources/images/ui2/ethereum-address.png") :use-keycard (js/require "../resources/images/ui2/keycard.png") :onboarding-illustration (js/require "../resources/images/ui2/onboarding_illustration.png") @@ -84,10 +87,13 @@ :snt (js/require "../resources/images/tokens/mainnet/SNT.png")}) (def parallax-video - {:biometrics [(js/require "../resources/videos2/biometrics_01.mp4") - (js/require "../resources/videos2/biometrics_02.mp4") - (js/require "../resources/videos2/biometrics_03.mp4") - (js/require "../resources/videos2/biometrics_04.mp4")]}) + {:biometrics [(js/require "../resources/videos2/biometrics_01.mp4") + (js/require "../resources/videos2/biometrics_02.mp4") + (js/require "../resources/videos2/biometrics_03.mp4") + (js/require "../resources/videos2/biometrics_04.mp4")] + :generate-keys [(js/require "../resources/videos2/generating_keys_01.mp4") + (js/require "../resources/videos2/generating_keys_02.mp4") + (js/require "../resources/videos2/generating_keys_03.mp4")]}) (defn get-mock-image [k] diff --git a/src/status_im2/constants.cljs b/src/status_im2/constants.cljs index 26e37c2e67..04951ad412 100644 --- a/src/status_im2/constants.cljs +++ b/src/status_im2/constants.cljs @@ -333,6 +333,9 @@ (def ^:const auth-method-biometric-prepare "biometric-prepare") (def ^:const auth-method-none "none") +(def ^:const onboarding-generating-keys-animation-duration-ms 7000) +(def ^:const onboarding-generating-keys-navigation-retry-ms 3000) + (def ^:const image-description-in-lightbox? false) (def ^:const audio-max-duration-ms 120000) diff --git a/src/status_im2/contexts/onboarding/events.cljs b/src/status_im2/contexts/onboarding/events.cljs index 26eb0ef75f..7cee556378 100644 --- a/src/status_im2/contexts/onboarding/events.cljs +++ b/src/status_im2/contexts/onboarding/events.cljs @@ -51,11 +51,13 @@ (let [{:keys [display-name seed-phrase password image-path color] :as profile} (:onboarding-2/profile db)] (rf/merge cofx - {:dispatch [:navigate-to :generating-keys] - :db (-> db - (dissoc :profile/login) - (dissoc :auth-method) - (assoc :onboarding-2/new-account? true))} + {:dispatch [:navigate-to :generating-keys] + :dispatch-later [{:ms constants/onboarding-generating-keys-animation-duration-ms + :dispatch [:onboarding-2/navigate-to-identifiers]}] + :db (-> db + (dissoc :profile/login) + (dissoc :auth-method) + (assoc :onboarding-2/new-account? true))} (if seed-phrase (profile.recover/recover-profile-and-login profile) (profile.create/create-profile-and-login profile))))) @@ -116,7 +118,7 @@ key-uid (get-in db [:profile/profile :key-uid]) biometric-enabled? (= (get-in db [:onboarding-2/profile :auth-method]) constants/auth-method-biometric)] - (cond-> {:dispatch [:navigate-to :identifiers]} + (cond-> {:db (assoc db :onboarding-2/generated-keys? true)} biometric-enabled? (assoc :keychain/save-password-and-auth-method {:key-uid key-uid @@ -125,3 +127,11 @@ :on-error #(log/error "failed to save biometrics" {:key-uid key-uid :error %})})))) + +(rf/defn navigate-to-identifiers + {:events [:onboarding-2/navigate-to-identifiers]} + [{:keys [db]}] + (if (:onboarding-2/generated-keys? db) + {:dispatch [:navigate-to :identifiers]} + {:dispatch-later [{:ms constants/onboarding-generating-keys-navigation-retry-ms + :dispatch [:onboarding-2/navigate-to-identifiers]}]})) diff --git a/src/status_im2/contexts/onboarding/generating_keys/style.cljs b/src/status_im2/contexts/onboarding/generating_keys/style.cljs index 7946f96116..81e2662cfa 100644 --- a/src/status_im2/contexts/onboarding/generating_keys/style.cljs +++ b/src/status_im2/contexts/onboarding/generating_keys/style.cljs @@ -1,10 +1,14 @@ (ns status-im2.contexts.onboarding.generating-keys.style (:require [quo2.foundations.colors :as colors])) -(def page-container - {:position :absolute - :top 0 - :bottom 0 - :left 0 - :right 0 +(defn page-container + [insets] + {:flex 1 + :justify-content :space-between + :padding-top (:top insets) :background-color colors/neutral-80-opa-80-blur}) + +(defn page-illustration + [width] + {:flex 1 + :width width}) diff --git a/src/status_im2/contexts/onboarding/generating_keys/view.cljs b/src/status_im2/contexts/onboarding/generating_keys/view.cljs index b630fbc668..8d3ca159ce 100644 --- a/src/status_im2/contexts/onboarding/generating_keys/view.cljs +++ b/src/status_im2/contexts/onboarding/generating_keys/view.cljs @@ -1,27 +1,153 @@ (ns status-im2.contexts.onboarding.generating-keys.view (:require [quo2.core :as quo] - [quo2.foundations.colors :as colors] [react-native.core :as rn] + [react-native.reanimated :as reanimated] [react-native.safe-area :as safe-area] [status-im2.contexts.onboarding.generating-keys.style :as style] - [status-im2.contexts.onboarding.common.background.view :as background] - [utils.i18n :as i18n])) + [utils.i18n :as i18n] + [status-im2.common.resources :as resources] + [status-im2.common.parallax.view :as parallax] + [status-im2.common.parallax.whitelist :as whitelist] + [status-im2.contexts.onboarding.common.background.view :as background])) -(defn page - [{:keys [navigation-bar-top]}] - [rn/view {:style style/page-container} - [rn/view - {:style {:height 56 - :margin-top navigation-bar-top}}] - [rn/view {:style {:padding-horizontal 20}} - [quo/text - {:size :heading-1 - :weight :semi-bold - :style {:color colors/white}} (i18n/label :t/generating-keys)]]]) +(defn generate-keys-title + [] + [quo/title + {:title (i18n/label :t/generating-keys)}]) + +(defn saving-keys-title + [] + [quo/title + {:title (i18n/label :t/saving-keys-to-device)}]) + +(defn keys-saved-title + [] + [quo/title + {:title (i18n/label :t/keys-saved)}]) + +(def first-transition-delay-ms 2000) + +(def transition-duration-ms 500) + +(defn sequence-animation + [generate-keys-opacity saving-keys-opacity keys-saved-opacity] + (reanimated/set-shared-value generate-keys-opacity + (reanimated/with-delay + first-transition-delay-ms + (reanimated/with-timing 0 + (js-obj "duration" transition-duration-ms + "easing" (:linear + reanimated/easings))))) + (reanimated/set-shared-value + saving-keys-opacity + (reanimated/with-sequence + (reanimated/with-delay 2000 + (reanimated/with-timing 1 + (js-obj "duration" transition-duration-ms + "easing" (:linear reanimated/easings)))) + (reanimated/with-delay 1000 + (reanimated/with-timing 0 + (js-obj "duration" transition-duration-ms + "easing" (:linear reanimated/easings)))))) + (reanimated/set-shared-value keys-saved-opacity + (reanimated/with-delay + 4600 + (reanimated/with-timing 1 + (js-obj "duration" transition-duration-ms + "easing" (:linear + reanimated/easings)))))) + +(defn f-title + [insets generate-keys-opacity saving-keys-opacity keys-saved-opacity] + (let [top-insets (+ (if rn/small-screen? 62 112) (:insets insets))] + [rn/view + {:position :absolute + :top top-insets} + [reanimated/view + {:style (reanimated/apply-animations-to-style + {:opacity generate-keys-opacity} + {:position :absolute})} + [generate-keys-title]] + [reanimated/view + {:style (reanimated/apply-animations-to-style + {:opacity saving-keys-opacity} + {:position :absolute})} + [saving-keys-title]] + [reanimated/view + {:style (reanimated/apply-animations-to-style + {:opacity keys-saved-opacity} + {:position :absolute})} + [keys-saved-title]]])) + +(defn f-page-title + [insets] + (let [generate-keys-opacity (reanimated/use-shared-value 1) + saving-keys-opacity (reanimated/use-shared-value 0) + keys-saved-opacity (reanimated/use-shared-value 0)] + (sequence-animation generate-keys-opacity saving-keys-opacity keys-saved-opacity) + [:f> f-title insets generate-keys-opacity saving-keys-opacity keys-saved-opacity])) + +(defn f-simple-page-content + [generate-keys-opacity saving-keys-opacity keys-saved-opacity] + (let [width (:width (rn/get-window))] + [rn/view + {:margin-top 156} + [reanimated/view + {:style (reanimated/apply-animations-to-style + {:opacity generate-keys-opacity} + {:position :absolute})} + [rn/image + {:resize-mode :contain + :style (style/page-illustration width) + :source (resources/get-image :generate-keys1)}]] + + [reanimated/view + {:style (reanimated/apply-animations-to-style + {:opacity saving-keys-opacity} + {:position :absolute})} + [rn/image + {:resize-mode :contain + :style (style/page-illustration width) + :source (resources/get-image :generate-keys2)}]] + [reanimated/view + {:style (reanimated/apply-animations-to-style + {:opacity keys-saved-opacity} + {:position :absolute})} + [rn/image + {:resize-mode :contain + :style (style/page-illustration width) + :source (resources/get-image :generate-keys3)}]]])) + +(defn parallax-page + [insets] + [:<> + [parallax/video + {:stretch -20 + :container-style {:top 40 + :left 20} + :layers (:generate-keys resources/parallax-video) + :disable-parallax? true}] + [:f> f-page-title insets]]) + +(defn f-simple-page + [insets] + (let [generate-keys-opacity (reanimated/use-shared-value 1) + saving-keys-opacity (reanimated/use-shared-value 0) + keys-saved-opacity (reanimated/use-shared-value 0)] + (sequence-animation generate-keys-opacity saving-keys-opacity keys-saved-opacity) + [:<> + [:f> f-title insets generate-keys-opacity saving-keys-opacity keys-saved-opacity] + [:f> f-simple-page-content generate-keys-opacity saving-keys-opacity keys-saved-opacity]])) + +(defn f-generating-keys + [] + (let [insets (safe-area/get-insets)] + [rn/view {:style (style/page-container insets)} + [background/view true] + (if whitelist/whitelisted? + [parallax-page insets] + [:f> f-simple-page insets])])) (defn generating-keys [] - (let [{:keys [top]} (safe-area/get-insets)] - [rn/view {:style {:flex 1}} - [background/view true] - [page {:navigation-bar-top top}]])) + [:f> f-generating-keys]) diff --git a/src/status_im2/subs/root.cljs b/src/status_im2/subs/root.cljs index fd39e26fd3..9db5b8a268 100644 --- a/src/status_im2/subs/root.cljs +++ b/src/status_im2/subs/root.cljs @@ -275,9 +275,9 @@ (reg-root-key-sub :mediaserver/port :mediaserver/port) ; onboarding - -(reg-root-key-sub :onboarding-2/profile :onboarding-2/profile) +(reg-root-key-sub :onboarding-2/generated-keys? :onboarding-2/generated-keys?) (reg-root-key-sub :onboarding-2/new-account? :onboarding-2/new-account?) +(reg-root-key-sub :onboarding-2/profile :onboarding-2/profile) ; Testing diff --git a/translations/en.json b/translations/en.json index 5e807d1bca..9f04b8ef73 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1410,6 +1410,7 @@ "keycard-backup": "Create a backup Keycard", "keycard-backup-success-title": "Backup successful", "keycard-backup-success-body": "Backup card created successfully. You can now use it with your account just like the primary card.", + "keys-saved": "Keys saved!", "type-a-message": "Message", "ulc-enabled": "ULC enabled", "backup-enabled": "Enabled", @@ -2150,6 +2151,7 @@ "or-tap": "or tap", "tap-on": "Tap on", "and-go-to": "and go to", + "saving-keys-to-device": "Saving keys to device...", "scan-or-enter-a-sync-code": "Scan or enter a sync code", "scan-the-qr-code-or-copy-the-sync-code": "Scan the QR code or copy the sync code", "already-logged-in-on-the-other-device": "Already logged in on the other device",