status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Jamie Caprani 2023-07-11 15:26:40 +01:00 committed by GitHub
parent 704b160964
commit 3fce4816dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 197 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/ui2/generating-keys-1@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 KiB

BIN
resources/images/ui2/generating-keys-1@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 414 KiB

BIN
resources/images/ui2/generating-keys-2@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 295 KiB

BIN
resources/images/ui2/generating-keys-2@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 540 KiB

BIN
resources/images/ui2/generating-keys-3@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 300 KiB

BIN
resources/images/ui2/generating-keys-3@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 566 KiB

BIN
resources/videos2/generating_keys_01.mp4 Normal file
View File

Binary file not shown.

BIN
resources/videos2/generating_keys_02.mp4 Normal file
View File

Binary file not shown.

BIN
resources/videos2/generating_keys_03.mp4 Normal file
View File

Binary file not shown.

8
src/status_im2/common/parallax/style.cljs
View File

@ -2,12 +2,14 @@
(:require [react-native.safe-area :as safe-area]
[react-native.core :as rn]))
(def outer-container
{:position :absolute
(defn outer-container
[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

4
src/status_im2/common/parallax/view.cljs
View File

@ -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)

8
src/status_im2/common/resources.cljs
View File

@ -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]

3
src/status_im2/constants.cljs
View File

@ -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)

12
src/status_im2/contexts/onboarding/events.cljs
View File

@ -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]}]}))

16
src/status_im2/contexts/onboarding/generating_keys/style.cljs
View File

@ -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})

160
src/status_im2/contexts/onboarding/generating_keys/view.cljs
View File

@ -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}
(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
{: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)]]])
{: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])

4
src/status_im2/subs/root.cljs
View File

@ -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

2
translations/en.json
View File

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