feat: add video and animation to generating keys page (#16415)

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
+(defn outer-container
-  {:position :absolute
+  [container-style]
+  (merge {:position :absolute
           :top      (if rn/small-screen? (safe-area/get-top) 0)
           :left     0
           :right    0
-   :bottom   0})
+          :bottom   0}
+         container-style))
 
 (def video
   {:position :absolute

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)

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")
@@ -87,7 +90,10 @@
   {: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")]})
+                   (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]

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)

src/status_im2/contexts/onboarding/events.cljs

@@ -52,6 +52,8 @@
         (:onboarding-2/profile db)]
     (rf/merge cofx
               {: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)
@@ -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]}]}))

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
+(defn page-container
-  {:position         :absolute
+  [insets]
-   :top              0
+  {:flex             1
-   :bottom           0
+   :justify-content  :space-between
-   :left             0
+   :padding-top      (:top insets)
-   :right            0
    :background-color colors/neutral-80-opa-80-blur})
+
+(defn page-illustration
+  [width]
+  {:flex  1
+   :width width})

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
+(defn generate-keys-title
-  [{:keys [navigation-bar-top]}]
+  []
-  [rn/view {:style style/page-container}
+  [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
-    {:style {:height     56
+     {:position :absolute
-             :margin-top navigation-bar-top}}]
+      :top      top-insets}
-   [rn/view {:style {:padding-horizontal 20}}
+     [reanimated/view
-    [quo/text
+      {:style (reanimated/apply-animations-to-style
-     {:size   :heading-1
+               {:opacity generate-keys-opacity}
-      :weight :semi-bold
+               {:position :absolute})}
-      :style  {:color colors/white}} (i18n/label :t/generating-keys)]]])
+      [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)]
+  [:f> f-generating-keys])
-    [rn/view {:style {:flex 1}}
-     [background/view true]
-     [page {:navigation-bar-top top}]]))

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/generated-keys? :onboarding-2/generated-keys?)
-(reg-root-key-sub :onboarding-2/profile :onboarding-2/profile)
 (reg-root-key-sub :onboarding-2/new-account? :onboarding-2/new-account?)
+(reg-root-key-sub :onboarding-2/profile :onboarding-2/profile)
 
 ; Testing
 

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",