feat: add video and animation to generating keys page (#16415)
This commit is contained in:
parent
704b160964
commit
3fce4816dc
Binary file not shown.
After Width: | Height: | Size: 213 KiB |
Binary file not shown.
After Width: | Height: | Size: 414 KiB |
Binary file not shown.
After Width: | Height: | Size: 295 KiB |
Binary file not shown.
After Width: | Height: | Size: 540 KiB |
Binary file not shown.
After Width: | Height: | Size: 300 KiB |
Binary file not shown.
After Width: | Height: | Size: 566 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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]}]}))
|
||||
|
|
|
@ -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})
|
||||
|
|
|
@ -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])
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue