feat: add parallax to biometrics page for whitelisted devices (#16296)

src/js/worklets/parallax.js

@@ -13,6 +13,7 @@ which is explained in better detail in this video
 https://www.youtube.com/watch?v=iEBoZDHCN5Y&t=2205s
 there is a bug with the pitch and roll calculations provided directly from the sensor data so the calculation had to
 be done using the quaternions directly.
+This link is useful to understand this: https://engineering.stackexchange.com/questions/3348/calculating-pitch-yaw-and-roll-from-mag-acc-and-gyro-data
 */
 export function sensorAnimatedImage(zIndex, offset, stretch) {
   'worklet';

src/react_native/core.cljs

@@ -68,6 +68,10 @@
    (fn []
      (js->clj (.get (.-Dimensions ^js react-native) "screen") :keywordize-keys true))))
 
+(def small-screen?
+  (let [height (:height (get-screen))]
+    (< height 700)))
+
 (defn hw-back-add-listener
   [callback]
   (.addEventListener (.-BackHandler ^js react-native) "hardwareBackPress" callback))

src/status_im2/common/parallax/style.cljs

@@ -1,12 +1,10 @@
 (ns status-im2.common.parallax.style
   (:require [react-native.safe-area :as safe-area]
-            [react-native.platform :as platform]))
+            [react-native.core :as rn]))
 
 (def outer-container
   {:position :absolute
-   :top      (if platform/android?
-               (+ (safe-area/get-top) (safe-area/get-bottom))
-               (safe-area/get-bottom))
+   :top      (if rn/small-screen? (safe-area/get-top) 0)
    :left     0
    :right    0
    :bottom   0})

src/status_im2/common/parallax/whitelist.cljs

@@ -0,0 +1,12 @@
+(ns status-im2.common.parallax.whitelist
+  (:require [native-module.core :as native-module]
+            [clojure.string :as string]))
+
+(def ^:const device-id (:device-id (native-module/get-device-model-info)))
+
+;; iPhone 14 is 15 for some reason
+(def ^:const whitelist #{"iPhone11" "iPhone12" "iPhone13" "iPhone14" "iPhone15"})
+
+(def whitelisted?
+  (let [device-type (first (string/split (str device-id) ","))]
+    (whitelist device-type)))

src/status_im2/common/resources.cljs

@@ -3,6 +3,7 @@
 
 (def ui
   {:add-new-contact               (js/require "../resources/images/ui2/add-contact.png")
+   :biometrics                    (js/require "../resources/images/ui2/biometrics.png")
    :desktop-how-to-pair-sign-in   (js/require "../resources/images/ui2/desktop-how-to-pair-sign-in.png")
    :desktop-how-to-pair-logged-in (js/require
                                    "../resources/images/ui2/desktop-how-to-pair-logged-in.png")
@@ -82,6 +83,12 @@
    :usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
    :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")]})
+
 (defn get-mock-image
   [k]
   (get mock-images k))

src/status_im2/contexts/onboarding/enable_biometrics/style.cljs

@@ -1,24 +1,19 @@
-(ns status-im2.contexts.onboarding.enable-biometrics.style
-  (:require [quo2.foundations.colors :as colors]))
+(ns status-im2.contexts.onboarding.enable-biometrics.style)
 
 (def default-margin 20)
 
 (defn page-container
   [insets]
-  {:flex             1
-   :padding-top      (:top insets)
-   :background-color colors/neutral-80-opa-80-blur})
+  {:flex            1
+   :justify-content :space-between
+   :padding-top     (:top insets)})
 
-(def page-illustration
-  {:flex              1
-   :background-color  colors/danger-50
-   :align-items       :center
-   :margin-horizontal default-margin
-   :border-radius     20
-   :margin-top        default-margin
-   :justify-content   :center})
+(defn page-illustration
+  [width]
+  {:flex  1
+   :width width})
 
 (defn buttons
   [insets]
   {:margin        default-margin
-   :margin-bottom (+ 14 (:bottom insets))})
+   :margin-bottom (+ 12 (:bottom insets))})

src/status_im2/contexts/onboarding/enable_biometrics/view.cljs

@@ -7,7 +7,11 @@
             [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
             [status-im.multiaccounts.biometric.core :as biometric]
             [utils.i18n :as i18n]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [status-im2.common.resources :as resources]
+            [status-im2.common.parallax.view :as parallax]
+            [status-im2.contexts.onboarding.common.background.view :as background]
+            [status-im2.common.parallax.whitelist :as whitelist]))
 
 (defn page-title
   []
@@ -19,7 +23,7 @@
     :subtitle-accessibility-label :enable-biometrics-sub-title}])
 
 (defn enable-biometrics-buttons
-  [{:keys [insets]}]
+  [insets]
   (let [supported-biometric (rf/sub [:supported-biometric-auth])
         bio-type-label      (biometric/get-label supported-biometric)
         profile-color       (:color (rf/sub [:onboarding-2/profile]))]
@@ -37,13 +41,36 @@
        :style                     {:margin-top 12}}
       (i18n/label :t/maybe-later)]]))
 
+(defn enable-biometrics-parallax
+  []
+  (let [stretch (if rn/small-screen? 25 40)]
+    [:<>
+     [parallax/video
+      {:layers  (:biometrics resources/parallax-video)
+       :stretch stretch}]
+     [rn/view
+      [navigation-bar/navigation-bar {:disable-back-button? true}]
+      [page-title]]]))
+
+(defn enable-biometrics-simple
+  []
+  (let [width (:width (rn/get-window))]
+    [:<>
+     [rn/view {:flex 1}
+      [navigation-bar/navigation-bar {:disable-back-button? true}]
+      [page-title]
+      [rn/view {:style {:flex 1}}
+       [rn/image
+        {:resize-mode :contain
+         :style       (style/page-illustration width)
+         :source      (resources/get-image :biometrics)}]]]]))
+
 (defn enable-biometrics
   []
   (let [insets (safe-area/get-insets)]
     [rn/view {:style (style/page-container insets)}
-     [navigation-bar/navigation-bar {:disable-back-button? true}]
-     [page-title]
-     [rn/view {:style style/page-illustration}
-      [quo/text
-       "Illustration here"]]
-     [enable-biometrics-buttons {:insets insets}]]))
+     [background/view true]
+     (if whitelist/whitelisted?
+       [enable-biometrics-parallax]
+       [enable-biometrics-simple])
+     [enable-biometrics-buttons insets]]))