feat: add parallax to biometrics page for whitelisted devices (#16296)
This commit is contained in:
parent
79151ee85d
commit
fa698dbc30
Binary file not shown.
After Width: | Height: | Size: 593 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -13,6 +13,7 @@ which is explained in better detail in this video
|
||||||
https://www.youtube.com/watch?v=iEBoZDHCN5Y&t=2205s
|
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
|
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.
|
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) {
|
export function sensorAnimatedImage(zIndex, offset, stretch) {
|
||||||
'worklet';
|
'worklet';
|
||||||
|
|
|
@ -68,6 +68,10 @@
|
||||||
(fn []
|
(fn []
|
||||||
(js->clj (.get (.-Dimensions ^js react-native) "screen") :keywordize-keys true))))
|
(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
|
(defn hw-back-add-listener
|
||||||
[callback]
|
[callback]
|
||||||
(.addEventListener (.-BackHandler ^js react-native) "hardwareBackPress" callback))
|
(.addEventListener (.-BackHandler ^js react-native) "hardwareBackPress" callback))
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
(ns status-im2.common.parallax.style
|
(ns status-im2.common.parallax.style
|
||||||
(:require [react-native.safe-area :as safe-area]
|
(:require [react-native.safe-area :as safe-area]
|
||||||
[react-native.platform :as platform]))
|
[react-native.core :as rn]))
|
||||||
|
|
||||||
(def outer-container
|
(def outer-container
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
:top (if platform/android?
|
:top (if rn/small-screen? (safe-area/get-top) 0)
|
||||||
(+ (safe-area/get-top) (safe-area/get-bottom))
|
|
||||||
(safe-area/get-bottom))
|
|
||||||
:left 0
|
:left 0
|
||||||
:right 0
|
:right 0
|
||||||
:bottom 0})
|
:bottom 0})
|
||||||
|
|
|
@ -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)))
|
|
@ -3,6 +3,7 @@
|
||||||
|
|
||||||
(def ui
|
(def ui
|
||||||
{:add-new-contact (js/require "../resources/images/ui2/add-contact.png")
|
{: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-sign-in (js/require "../resources/images/ui2/desktop-how-to-pair-sign-in.png")
|
||||||
:desktop-how-to-pair-logged-in (js/require
|
:desktop-how-to-pair-logged-in (js/require
|
||||||
"../resources/images/ui2/desktop-how-to-pair-logged-in.png")
|
"../resources/images/ui2/desktop-how-to-pair-logged-in.png")
|
||||||
|
@ -82,6 +83,12 @@
|
||||||
:usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
|
:usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
|
||||||
:snt (js/require "../resources/images/tokens/mainnet/SNT.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
|
(defn get-mock-image
|
||||||
[k]
|
[k]
|
||||||
(get mock-images k))
|
(get mock-images k))
|
||||||
|
|
|
@ -1,24 +1,19 @@
|
||||||
(ns status-im2.contexts.onboarding.enable-biometrics.style
|
(ns status-im2.contexts.onboarding.enable-biometrics.style)
|
||||||
(:require [quo2.foundations.colors :as colors]))
|
|
||||||
|
|
||||||
(def default-margin 20)
|
(def default-margin 20)
|
||||||
|
|
||||||
(defn page-container
|
(defn page-container
|
||||||
[insets]
|
[insets]
|
||||||
{:flex 1
|
{:flex 1
|
||||||
:padding-top (:top insets)
|
:justify-content :space-between
|
||||||
:background-color colors/neutral-80-opa-80-blur})
|
:padding-top (:top insets)})
|
||||||
|
|
||||||
(def page-illustration
|
(defn page-illustration
|
||||||
{:flex 1
|
[width]
|
||||||
:background-color colors/danger-50
|
{:flex 1
|
||||||
:align-items :center
|
:width width})
|
||||||
:margin-horizontal default-margin
|
|
||||||
:border-radius 20
|
|
||||||
:margin-top default-margin
|
|
||||||
:justify-content :center})
|
|
||||||
|
|
||||||
(defn buttons
|
(defn buttons
|
||||||
[insets]
|
[insets]
|
||||||
{:margin default-margin
|
{:margin default-margin
|
||||||
:margin-bottom (+ 14 (:bottom insets))})
|
:margin-bottom (+ 12 (:bottom insets))})
|
||||||
|
|
|
@ -7,7 +7,11 @@
|
||||||
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
||||||
[status-im.multiaccounts.biometric.core :as biometric]
|
[status-im.multiaccounts.biometric.core :as biometric]
|
||||||
[utils.i18n :as i18n]
|
[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
|
(defn page-title
|
||||||
[]
|
[]
|
||||||
|
@ -19,7 +23,7 @@
|
||||||
:subtitle-accessibility-label :enable-biometrics-sub-title}])
|
:subtitle-accessibility-label :enable-biometrics-sub-title}])
|
||||||
|
|
||||||
(defn enable-biometrics-buttons
|
(defn enable-biometrics-buttons
|
||||||
[{:keys [insets]}]
|
[insets]
|
||||||
(let [supported-biometric (rf/sub [:supported-biometric-auth])
|
(let [supported-biometric (rf/sub [:supported-biometric-auth])
|
||||||
bio-type-label (biometric/get-label supported-biometric)
|
bio-type-label (biometric/get-label supported-biometric)
|
||||||
profile-color (:color (rf/sub [:onboarding-2/profile]))]
|
profile-color (:color (rf/sub [:onboarding-2/profile]))]
|
||||||
|
@ -37,13 +41,36 @@
|
||||||
:style {:margin-top 12}}
|
:style {:margin-top 12}}
|
||||||
(i18n/label :t/maybe-later)]]))
|
(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
|
(defn enable-biometrics
|
||||||
[]
|
[]
|
||||||
(let [insets (safe-area/get-insets)]
|
(let [insets (safe-area/get-insets)]
|
||||||
[rn/view {:style (style/page-container insets)}
|
[rn/view {:style (style/page-container insets)}
|
||||||
[navigation-bar/navigation-bar {:disable-back-button? true}]
|
[background/view true]
|
||||||
[page-title]
|
(if whitelist/whitelisted?
|
||||||
[rn/view {:style style/page-illustration}
|
[enable-biometrics-parallax]
|
||||||
[quo/text
|
[enable-biometrics-simple])
|
||||||
"Illustration here"]]
|
[enable-biometrics-buttons insets]]))
|
||||||
[enable-biometrics-buttons {:insets insets}]]))
|
|
||||||
|
|
Loading…
Reference in New Issue