diff --git a/resources/images/ui2/biometrics@2x.png b/resources/images/ui2/biometrics@2x.png new file mode 100644 index 0000000000..b692686cf8 Binary files /dev/null and b/resources/images/ui2/biometrics@2x.png differ diff --git a/resources/images/ui2/biometrics@3x.png b/resources/images/ui2/biometrics@3x.png new file mode 100644 index 0000000000..35e175c35b Binary files /dev/null and b/resources/images/ui2/biometrics@3x.png differ diff --git a/resources/videos2/biometrics_01.mp4 b/resources/videos2/biometrics_01.mp4 new file mode 100755 index 0000000000..f8ec7d8ffa Binary files /dev/null and b/resources/videos2/biometrics_01.mp4 differ diff --git a/resources/videos2/biometrics_02.mp4 b/resources/videos2/biometrics_02.mp4 new file mode 100755 index 0000000000..10d5ce2421 Binary files /dev/null and b/resources/videos2/biometrics_02.mp4 differ diff --git a/resources/videos2/biometrics_03.mp4 b/resources/videos2/biometrics_03.mp4 new file mode 100755 index 0000000000..847606fd98 Binary files /dev/null and b/resources/videos2/biometrics_03.mp4 differ diff --git a/resources/videos2/biometrics_04.mp4 b/resources/videos2/biometrics_04.mp4 new file mode 100755 index 0000000000..3ab2f0865e Binary files /dev/null and b/resources/videos2/biometrics_04.mp4 differ diff --git a/src/js/worklets/parallax.js b/src/js/worklets/parallax.js index 64c3cf8b97..baae202845 100644 --- a/src/js/worklets/parallax.js +++ b/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'; diff --git a/src/react_native/core.cljs b/src/react_native/core.cljs index 1bf0825d7d..725a9f4dea 100644 --- a/src/react_native/core.cljs +++ b/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)) diff --git a/src/status_im2/common/parallax/style.cljs b/src/status_im2/common/parallax/style.cljs index 14ac24e6f9..98fde2cbf9 100644 --- a/src/status_im2/common/parallax/style.cljs +++ b/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}) diff --git a/src/status_im2/common/parallax/whitelist.cljs b/src/status_im2/common/parallax/whitelist.cljs new file mode 100644 index 0000000000..8dbf156d75 --- /dev/null +++ b/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))) diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index 04fac21129..4b67c09839 100644 --- a/src/status_im2/common/resources.cljs +++ b/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)) diff --git a/src/status_im2/contexts/onboarding/enable_biometrics/style.cljs b/src/status_im2/contexts/onboarding/enable_biometrics/style.cljs index ad9549ef14..5a5c73fc94 100644 --- a/src/status_im2/contexts/onboarding/enable_biometrics/style.cljs +++ b/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))}) diff --git a/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs b/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs index e4b3dc1952..800055f968 100644 --- a/src/status_im2/contexts/onboarding/enable_biometrics/view.cljs +++ b/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]]))