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

feat: onboarding transition for new to status flow (#16554) 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2023-07-24 10:17:36 -03:00 committed by GitHub
parent e33c877989
commit e672bf9163
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 371 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/keycard/recovery.cljs
View File

@ -75,7 +75,7 @@
(assoc :recovered-account? true))
:keycard/check-nfc-enabled nil}
(bottom-sheet/hide-bottom-sheet-old)
(navigation/navigate-to :keycard-recovery-intro nil)))
(navigation/navigate-to-within-stack [:keycard-recovery-intro :new-to-status])))
(rf/defn access-key-pressed
{:events [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]}

28
src/status_im2/contexts/onboarding/common/navigation_bar/view.cljs
View File

@ -4,16 +4,18 @@
[utils.re-frame :as rf]))
(defn navigation-bar
[{:keys [top right-section-buttons disable-back-button?]}]
[rn/view
{:style {:height 56
:margin-top top}}
[quo/page-nav
{:align-mid? true
:mid-section {:type :text-only :main-text ""}
:left-section {:type :blur-bg
:icon :i/arrow-left
:icon-override-theme :dark
:on-press (when-not disable-back-button?
#(rf/dispatch [:navigate-back]))}
:right-section-buttons right-section-buttons}]])
[{:keys [top right-section-buttons disable-back-button? stack-id]}]
(let [back-event (if stack-id [:navigate-back-within-stack stack-id] [:navigate-back])]
[rn/view
{:style {:height 56
:margin-top top}}
[quo/page-nav
{:align-mid? true
:mid-section {:type :text-only :main-text ""}
:left-section {:type :blur-bg
:icon :i/arrow-left
:icon-override-theme :dark
:on-press (fn []
(when-not disable-back-button?
(rf/dispatch back-event)))}
:right-section-buttons right-section-buttons}]]))

17
src/status_im2/contexts/onboarding/common/overlay/style.cljs Normal file
View File

@ -0,0 +1,17 @@
(ns status-im2.contexts.onboarding.common.overlay.style
(:require [react-native.reanimated :as reanimated]
[quo2.foundations.colors :as colors]))
(defn blur-container
[opacity]
(reanimated/apply-animations-to-style
{:opacity opacity}
{:position :absolute
:top 0
:left 0
:right 0
:bottom 0}))
(def blur-style
{:flex 1
:background-color colors/neutral-80-opa-80-blur})

72
src/status_im2/contexts/onboarding/common/overlay/view.cljs Normal file
View File

@ -0,0 +1,72 @@
(ns status-im2.contexts.onboarding.common.overlay.view
(:require [react-native.reanimated :as reanimated]
[react-native.blur :as blur]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.onboarding.common.overlay.style :as style]
[status-im2.constants :as constants]))
(def max-blur-amount 30)
(defonce timer-interval (atom nil))
(defonce blur-dismiss-fn-atom (atom nil))
(defonce blur-show-fn-atom (atom nil))
(defn blur-show
[opacity blur-amount]
(reanimated/animate opacity
1
(/ constants/onboarding-modal-animation-duration 2))
(js/clearInterval @timer-interval)
(reset! timer-interval
(js/setInterval
(fn []
(if (< @blur-amount max-blur-amount)
(swap! blur-amount + 1)
(js/clearInterval @timer-interval)))
(/ constants/onboarding-modal-animation-duration
max-blur-amount
2))))
(defn blur-dismiss
[opacity blur-amount]
(reanimated/animate-delay opacity
0
(/ constants/onboarding-modal-animation-duration 2)
(/ constants/onboarding-modal-animation-duration 2))
(reset! timer-interval
(js/setInterval
(fn []
(if (> @blur-amount 0)
(swap! blur-amount - 1)
(js/clearInterval @timer-interval)))
(/ constants/onboarding-modal-animation-duration
max-blur-amount
2))))
(defn f-view
[blur-amount]
(let [opacity (reanimated/use-shared-value 0)
blur-show-fn #(blur-show opacity blur-amount)
blur-dismiss-fn #(blur-dismiss opacity blur-amount)]
(rn/use-effect
(fn []
(reset! blur-show-fn-atom blur-show-fn)
(reset! blur-dismiss-fn-atom blur-dismiss-fn)
(fn []
(reset! blur-show-fn-atom nil)
(reset! blur-dismiss-fn-atom nil))))
[reanimated/view
{:pointer-events :none
:style (style/blur-container opacity)}
[blur/view
{:blur-amount @blur-amount
:blur-radius 25
:blur-type :transparent
:overlay-color :transparent
:style style/blur-style}]]))
(defn view
[]
(let [blur-amount (reagent/atom 0)]
[:f> f-view blur-amount]))

5
src/status_im2/contexts/onboarding/create_password/view.cljs
View File

@ -5,7 +5,6 @@
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
[status-im2.contexts.onboarding.create-password.style :as style]
[utils.i18n :as i18n]
@ -210,14 +209,14 @@
{:content create-password-doc
:shell? true}]))]
[:<>
[background/view true]
[rn/touchable-without-feedback
{:on-press rn/dismiss-keyboard!
:accessible false}
[rn/view {:style style/flex-fill}
[rn/keyboard-avoiding-view {:style style/flex-fill}
[navigation-bar/navigation-bar
{:top top
{:stack-id :new-to-status
:top top
:right-section-buttons [{:type :blur-bg
:icon :i/info
:icon-override-theme :dark

6
src/status_im2/contexts/onboarding/create_profile/view.cljs
View File

@ -8,7 +8,6 @@
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
[status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu]
[utils.re-frame :as rf]
[oops.core :as oops]
@ -99,7 +98,9 @@
name-too-short? :default
:else :success)]
[rn/view {:style style/page-container}
[navigation-bar/navigation-bar {:top navigation-bar-top}]
[navigation-bar/navigation-bar
{:stack-id :new-to-status
:top navigation-bar-top}]
[rn/scroll-view
{:content-container-style {:flexGrow 1}}
[rn/view {:style style/page-container}
@ -181,7 +182,6 @@
(let [{:keys [top]} (safe-area/get-insets)
onboarding-profile-data (rf/sub [:onboarding-2/profile])]
[:<>
[background/view true]
[:f> f-page
{:navigation-bar-top top
:onboarding-profile-data onboarding-profile-data}]]))

2
src/status_im2/contexts/onboarding/enable_biometrics/view.cljs
View File

@ -8,7 +8,6 @@
[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]
[status-im2.common.biometric.events :as biometric]))
@ -69,7 +68,6 @@
[]
(let [insets (safe-area/get-insets)]
[rn/view {:style (style/page-container insets)}
[background/view true]
(if whitelist/whitelisted?
[enable-biometrics-parallax]
[enable-biometrics-simple])

5
src/status_im2/contexts/onboarding/enable_notifications/style.cljs
View File

@ -6,9 +6,8 @@
(defn page-container
[insets]
{:flex 1
:padding-top (:top insets)
:background-color colors/neutral-80-opa-80-blur})
{:flex 1
:padding-top (:top insets)})
(def page-illustration
{:flex 1

12
src/status_im2/contexts/onboarding/enable_notifications/view.cljs
View File

@ -7,7 +7,6 @@
[react-native.platform :as platform]
[react-native.safe-area :as safe-area]
[status-im.notifications.core :as notifications]
[status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
[status-im2.contexts.onboarding.enable-notifications.style :as style]
[status-im2.contexts.shell.jump-to.utils :as shell.utils]))
@ -29,7 +28,8 @@
{:on-press (fn []
(shell.utils/change-selected-stack-id :communities-stack true nil)
(rf/dispatch [::notifications/switch true platform/ios?])
(rf/dispatch [:init-root :welcome]))
(rf/dispatch [:navigate-to-within-stack
[:welcome :enable-notifications]]))
:type :primary
:before :i/notifications
:accessibility-label :enable-notifications-button
@ -38,7 +38,8 @@
[quo/button
{:on-press (fn []
(shell.utils/change-selected-stack-id :communities-stack true nil)
(rf/dispatch [:init-root :welcome]))
(rf/dispatch [:navigate-to-within-stack
[:welcome :enable-notifications]]))
:accessibility-label :enable-notifications-later-button
:type :grey
:background :blur
@ -49,8 +50,9 @@
[]
(let [insets (safe-area/get-insets)]
[rn/view {:style (style/page-container insets)}
[background/view true]
[navigation-bar/navigation-bar {:disable-back-button? true}]
[navigation-bar/navigation-bar
{:stack-id :enable-notifications
:disable-back-button? true}]
[page-title]
[rn/view {:style style/page-illustration}
[quo/text

14
src/status_im2/contexts/onboarding/enter_seed_phrase/style.cljs
View File

@ -1,16 +1,14 @@
(ns status-im2.contexts.onboarding.enter-seed-phrase.style
(:require [quo2.foundations.colors :as colors]
[react-native.safe-area :as safe-area]))
(:require [react-native.safe-area :as safe-area]))
(def full-layout {:flex 1})
(def page-container
{:position :absolute
:top 0
:bottom 0
:left 0
:right 0
:background-color colors/neutral-80-opa-80-blur})
{:position :absolute
:top 0
:bottom 0
:left 0
:right 0})
(def form-container
{:flex 1

6
src/status_im2/contexts/onboarding/enter_seed_phrase/view.cljs
View File

@ -7,7 +7,6 @@
[reagent.core :as reagent]
[status-im.ethereum.mnemonic :as mnemonic]
[status-im2.constants :as constants]
[status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
[status-im2.contexts.onboarding.enter-seed-phrase.style :as style]
[utils.i18n :as i18n]
@ -160,7 +159,8 @@
[]
(let [{navigation-bar-top :top} (safe-area/get-insets)]
[rn/view {:style style/full-layout}
[background/view true]
[rn/keyboard-avoiding-view {:style style/page-container}
[navigation-bar/navigation-bar {:top navigation-bar-top}]
[navigation-bar/navigation-bar
{:stack-id :new-to-status
:top navigation-bar-top}]
[screen]]]))

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

@ -26,7 +26,7 @@
{:events [:onboarding-2/profile-data-set]}
[{:keys [db]} onboarding-data]
{:db (update db :onboarding-2/profile merge onboarding-data)
:dispatch [:navigate-to :create-profile-password]})
:dispatch [:navigate-to-within-stack [:create-profile-password :new-to-status]]})
(rf/defn enable-biometrics
{:events [:onboarding-2/enable-biometrics]}
@ -51,7 +51,7 @@
(let [{:keys [display-name seed-phrase password image-path color] :as profile}
(:onboarding-2/profile db)]
(rf/merge cofx
{:dispatch [:navigate-to :generating-keys]
{:dispatch [:navigate-to-within-stack [:generating-keys :new-to-status]]
:dispatch-later [{:ms constants/onboarding-generating-keys-animation-duration-ms
:dispatch [:onboarding-2/navigate-to-identifiers]}]
:db (-> db
@ -79,7 +79,7 @@
(assoc-in [:onboarding-2/profile :password] password)
(assoc-in [:onboarding-2/profile :auth-method] constants/auth-method-password))
:dispatch (if supported-type
[:navigate-to :enable-biometrics]
[:navigate-to-within-stack [:enable-biometrics :new-to-status]]
[:onboarding-2/create-account-and-login])}))
(rf/defn seed-phrase-entered
@ -105,14 +105,14 @@
[:profile/profile-selected key-uid]))
:on-cancel #(re-frame/dispatch [:pop-to-root :multiaccounts])}}
{:db (assoc-in db [:onboarding-2/profile :seed-phrase] seed-phrase)
:dispatch [:navigate-to :create-profile]}))
:dispatch [:navigate-to-within-stack [:create-profile :new-to-status]]}))
(rf/defn navigate-to-create-profile
{:events [:onboarding-2/navigate-to-create-profile]}
[{:keys [db]}]
;; Restart the flow
{:db (dissoc db :onboarding-2/profile)
:dispatch [:navigate-to :create-profile]})
:dispatch [:navigate-to-within-stack [:create-profile :new-to-status]]})
(rf/defn onboarding-new-account-finalize-setup
{:events [:onboarding-2/finalize-setup]}
@ -135,6 +135,6 @@
{:events [:onboarding-2/navigate-to-identifiers]}
[{:keys [db]}]
(if (:onboarding-2/generated-keys? db)
{:dispatch [:navigate-to :identifiers]}
{:dispatch [:navigate-to-within-stack [:identifiers :new-to-status]]}
{:dispatch-later [{:ms constants/onboarding-generating-keys-navigation-retry-ms
:dispatch [:onboarding-2/navigate-to-identifiers]}]}))

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

@ -1,12 +1,10 @@
(ns status-im2.contexts.onboarding.generating-keys.style
(:require [quo2.foundations.colors :as colors]))
(ns status-im2.contexts.onboarding.generating-keys.style)
(defn page-container
[insets]
{:flex 1
:justify-content :space-between
:padding-top (:top insets)
:background-color colors/neutral-80-opa-80-blur})
{:flex 1
:justify-content :space-between
:padding-top (:top insets)})
(defn page-illustration
[width]

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

@ -7,8 +7,7 @@
[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]))
[status-im2.common.parallax.whitelist :as whitelist]))
(defn generate-keys-title
[]
@ -143,7 +142,6 @@
[]
(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])]))

3
src/status_im2/contexts/onboarding/identifiers/style.cljs
View File

@ -1,7 +1,8 @@
(ns status-im2.contexts.onboarding.identifiers.style)
(def page-container
{:flex 1})
{:flex 1
:overflow :hidden})
(def content-container
{:position :absolute

5
src/status_im2/contexts/onboarding/identifiers/view.cljs
View File

@ -6,7 +6,6 @@
[quo2.core :as quo]
[status-im2.contexts.onboarding.identifiers.profile-card.view :as profile-card]
[status-im2.contexts.onboarding.identifiers.style :as style]
[status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.common.carousel.view :as carousel]
[status-im2.contexts.onboarding.common.carousel.animation :as carousel.animation]))
@ -37,7 +36,6 @@
(carousel.animation/cleanup-animation progress paused?))
[])
[:<>
[background/view true]
[rn/view {:style style/page-container}
[carousel/view
{:animate? true
@ -59,7 +57,8 @@
{:accessibility-label :skip-identifiers
:type :grey
:background :blur
:on-press #(rf/dispatch [:navigate-to :enable-notifications])
:on-press #(rf/dispatch [:navigate-to-within-stack
[:enable-notifications :new-to-status]])
:style style/button}
(i18n/label :t/skip)]]]]))

11
src/status_im2/contexts/onboarding/intro/view.cljs
View File

@ -7,7 +7,8 @@
[status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.constants :as constants]
[status-im2.contexts.syncing.scan-sync-code.view :as scan-sync-code]
[utils.debounce :as debounce]))
[utils.debounce :as debounce]
[status-im2.contexts.onboarding.common.overlay.view :as overlay]))
(defn view
[]
@ -24,7 +25,10 @@
:heading (i18n/label :t/sign-in)
:animated-heading (i18n/label :t/sign-in-by-syncing)
:accessibility-label :already-use-status-button}
:bottom-card {:on-press #(rf/dispatch [:navigate-to :new-to-status])
:bottom-card {:on-press (fn []
(when @overlay/blur-show-fn-atom
(@overlay/blur-show-fn-atom))
(rf/dispatch [:open-modal :new-to-status]))
:heading (i18n/label :t/new-to-status)
:accessibility-label :new-to-status-button}}
[quo/text
@ -38,4 +42,5 @@
[quo/text
{:on-press #(rf/dispatch [:open-modal :privacy-policy])
:style style/highlighted-text}
(i18n/label :t/terms-of-service)]]]])
(i18n/label :t/terms-of-service)]]]
[overlay/view]])

47
src/status_im2/contexts/onboarding/new_to_status/view.cljs
View File

@ -5,11 +5,19 @@
[react-native.safe-area :as safe-area]
[status-im.keycard.recovery :as keycard]
[status-im2.common.resources :as resources]
[status-im2.contexts.onboarding.common.background.view :as background]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
[status-im2.contexts.onboarding.new-to-status.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
[utils.re-frame :as rf]
[status-im2.contexts.onboarding.common.overlay.view :as overlay]
[status-im2.contexts.profile.profiles.view :as profiles]))
(defn navigate-back
[]
(when @overlay/blur-dismiss-fn-atom
(@overlay/blur-dismiss-fn-atom))
(when @profiles/pop-animation-fn-atom
(@profiles/pop-animation-fn-atom))
(rf/dispatch [:dismiss-modal :new-to-status]))
(defn sign-in-options
[]
@ -42,7 +50,7 @@
:title (i18n/label :t/use-recovery-phrase)
:subtitle (i18n/label :t/use-recovery-phrase-subtitle)
:image (resources/get-image :ethereum-address)
:on-press #(rf/dispatch [:navigate-to :enter-seed-phrase])}]
:on-press #(rf/dispatch [:navigate-to-within-stack [:enter-seed-phrase :new-to-status]])}]
[rn/view {:style style/space-between-suboptions}]
[quo/small-option-card
{:variant :icon
@ -89,19 +97,30 @@
:style style/doc-content}
(i18n/label :t/getting-started-generate-keys-on-keycard-description)]]])
(defn navigation-bar
[top]
[rn/view
{:style {:height 56
:margin-top top}}
[quo/page-nav
{:align-mid? true
:mid-section {:type :text-only :main-text ""}
:left-section {:type :blur-bg
:icon :i/arrow-left
:icon-override-theme :dark
:on-press navigate-back}
:right-section-buttons [{:type :blur-bg
:icon :i/info
:icon-override-theme :dark
:on-press #(rf/dispatch
[:show-bottom-sheet
{:content getting-started-doc
:shell? true}])}]}]])
(defn new-to-status
[]
(let [{:keys [top]} (safe-area/get-insets)]
[:<>
[background/view true]
[rn/view {:style style/content-container}
[navigation-bar/navigation-bar
{:top top
:right-section-buttons [{:type :blur-bg
:icon :i/info
:icon-override-theme :dark
:on-press #(rf/dispatch
[:show-bottom-sheet
{:content getting-started-doc
:shell? true}])}]}]
[navigation-bar top]
[sign-in-options]]]))

11
src/status_im2/contexts/onboarding/syncing/results/style.cljs
View File

@ -1,5 +1,6 @@
(ns status-im2.contexts.onboarding.syncing.results.style
(:require [quo2.foundations.colors :as colors]))
(:require [quo2.foundations.colors :as colors]
[react-native.reanimated :as reanimated]))
(defn page-container
[top]
@ -13,6 +14,14 @@
:padding-bottom 20
:background-color colors/neutral-80-opa-80-blur})
(defn content
[translate-x]
(reanimated/apply-animations-to-style
{:transform [{:translate-x translate-x}]}
{:margin-top 56
:margin-bottom 26
:flex 1}))
(def current-device
{:margin-bottom 19})

34
src/status_im2/contexts/onboarding/syncing/results/view.cljs
View File

@ -7,7 +7,9 @@
[utils.re-frame :as rf]
[status-im2.contexts.onboarding.syncing.results.style :as style]
[status-im2.contexts.syncing.device.view :as device]
[status-im2.contexts.onboarding.common.background.view :as background]))
[status-im2.contexts.onboarding.common.background.view :as background]
[react-native.reanimated :as reanimated]
[status-im2.constants :as constants]))
(defn page-title
[]
@ -44,24 +46,36 @@
:render-fn device/view}]]))
(defn continue-button
[]
[on-press]
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
[quo/button
{:on-press #(rf/dispatch [:init-root :enable-notifications])
{:on-press (fn []
(when on-press
(on-press))
(rf/dispatch [:open-modal :enable-notifications]))
:accessibility-label :continue-button
:customization0color profile-color
:style style/continue-button}
(i18n/label :t/continue)]))
(defn view
(defn- f-view
[]
(let [top (safe-area/get-top)]
(let [top (safe-area/get-top)
translate-x (reanimated/use-shared-value 0)
window-width (:width (rn/get-window))]
[rn/view {:style (style/page-container top)}
[background/view true]
[rn/view
{:style {:margin-top 56
:margin-bottom 26
:flex 1}}
[reanimated/view
{:style (style/content translate-x)}
[page-title]
[devices-list]
[continue-button]]]))
[continue-button
#(reanimated/animate-shared-value-with-delay translate-x
(- window-width)
constants/onboarding-modal-animation-duration
:linear
200)]]]))
(defn view
[]
[:f> f-view])

5
src/status_im2/contexts/onboarding/welcome/style.cljs
View File

@ -6,9 +6,8 @@
(defn page-container
[insets]
{:flex 1
:padding-top (:top insets)
:background-color colors/neutral-80-opa-80-blur})
{:flex 1
:padding-top (:top insets)})
(def page-illustration
{:flex 1

7
src/status_im2/contexts/onboarding/welcome/view.cljs
View File

@ -8,8 +8,7 @@
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im2.constants :as constants]
[status-im2.contexts.onboarding.welcome.style :as style]
[status-im2.contexts.onboarding.common.background.view :as background]))
[status-im2.contexts.onboarding.welcome.style :as style]))
(defn page-title
[]
@ -36,7 +35,8 @@
; should be type:grey, and page nav can use background instead.
:icon-background-color colors/white-opa-5
:type :grey
:on-press #(rf/dispatch [:init-root root])}}])
:on-press #(rf/dispatch [:navigate-back-within-stack
root])}}])
(defn dispatch-visibility-status-update
[status-type]
@ -51,7 +51,6 @@
[rn/view {:style (style/page-container insets)}
(when (nil? status-type)
(dispatch-visibility-status-update constants/visibility-status-automatic))
[background/view true]
[navigation-bar :enable-notifications]
[page-title]
[rn/view {:style style/page-illustration}

18
src/status_im2/contexts/profile/profiles/style.cljs
View File

@ -1,5 +1,6 @@
(ns status-im2.contexts.profile.profiles.style
(:require [quo2.foundations.colors :as colors]))
(:require [quo2.foundations.colors :as colors]
[react-native.reanimated :as reanimated]))
;; Profiles Section
@ -13,12 +14,15 @@
{:padding-horizontal 20
:margin-bottom (when-not last-item? -24)})
(def profiles-container
{:position :absolute
:left 0
:top 0
:bottom 0
:right 0})
(defn profiles-container
[translate-x]
(reanimated/apply-animations-to-style
{:transform [{:translate-x translate-x}]}
{:position :absolute
:left 0
:top 0
:bottom 0
:right 0}))
(def profiles-header
{:flex-direction :row

48
src/status_im2/contexts/profile/profiles/view.cljs
View File

@ -13,14 +13,39 @@
[utils.transforms :as types]
[quo2.foundations.colors :as colors]
[react-native.safe-area :as safe-area]
[clojure.string :as string]))
[clojure.string :as string]
[react-native.reanimated :as reanimated]
[status-im2.constants :as constants]))
(defonce push-animation-fn-atom (atom nil))
(defonce pop-animation-fn-atom (atom nil))
(defn push-animation
[translate-x]
(let [window-width (:width (rn/get-window))]
(reanimated/animate-shared-value-with-delay translate-x
(- window-width)
constants/onboarding-modal-animation-duration
:linear
100)))
(defn pop-animation
[translate-x]
(reanimated/animate-shared-value-with-delay translate-x
0
constants/onboarding-modal-animation-duration
:linear
50))
(defn new-account-options
[]
[quo/action-drawer
[[{:icon :i/profile
:label (i18n/label :t/create-new-profile)
:on-press #(rf/dispatch [:navigate-to :new-to-status])
:on-press (fn []
(when @push-animation-fn-atom
(@push-animation-fn-atom))
(rf/dispatch [:open-modal :new-to-status]))
:accessibility-label :create-new-profile}
{:icon :i/multi-profile
:label (i18n/label :t/add-existing-status-profile)
@ -97,11 +122,18 @@
[:profile/profile-selected key-uid])
(when-not keycard-pairing (set-hide-profiles)))}]))
(defn profiles-section
(defn- f-profiles-section
[{:keys [set-hide-profiles]}]
(let [profiles (vals (rf/sub [:profile/profiles-overview]))]
[rn/view
{:style style/profiles-container}
(let [profiles (vals (rf/sub [:profile/profiles-overview]))
translate-x (reanimated/use-shared-value 0)]
(rn/use-effect (fn []
(reset! push-animation-fn-atom #(push-animation translate-x))
(reset! pop-animation-fn-atom #(pop-animation translate-x))
(fn []
(reset! push-animation-fn-atom nil)
(reset! pop-animation-fn-atom nil))))
[reanimated/view
{:style (style/profiles-container translate-x)}
[rn/view
{:style style/profiles-header}
[quo/text
@ -125,6 +157,10 @@
:set-hide-profiles set-hide-profiles}
:render-fn profile-card}]]))
(defn profiles-section
[props]
[:f> f-profiles-section props])
(defn forget-password-doc
[]
[quo/documentation-drawers

4
src/status_im2/navigation/core.cljs
View File

@ -132,6 +132,10 @@
(fn [comp-id]
(navigation/pop-to (name comp-id))))
(re-frame/reg-fx :dismiss-modal
(fn [comp-id]
(dissmissModal (name comp-id))))
(defn pop-to-root
[root-id]
(navigation/pop-to-root root-id)

111
src/status_im2/navigation/screens.cljs
View File

@ -36,36 +36,7 @@
[status-im2.contexts.onboarding.syncing.results.view :as syncing-results]
[status-im2.contexts.onboarding.syncing.progress.view :as syncing-devices]
[status-im2.contexts.chat.new-chat.view :as new-chat]
[react-native.core :as rn]
[status-im2.constants :as constants]))
(def sign-in-modal-animations
{:showModal {:translationY {:from (:height (rn/get-window))
:to 0
:duration constants/onboarding-modal-animation-duration}
:alpha {:from 1
:to 1
:duration 0}}
:dismissModal {:translationY {:from 0
:to (:height (rn/get-window))
:duration constants/onboarding-modal-animation-duration}
:alpha {:from 1
:to 0
:duration constants/onboarding-modal-animation-duration}}})
(def push-animations-for-transparent-background
{:push {:content {:enter {:translationX {:from (:width (rn/get-window))
:to 0
:duration constants/onboarding-modal-animation-duration}}
:exit {:translationX {:from 0
:to (- (:width (rn/get-window)))
:duration constants/onboarding-modal-animation-duration}}}}
:pop {:content {:exit {:translationX {:from 0
:to (:width (rn/get-window))
:duration constants/onboarding-modal-animation-duration}}
:enter {:translationX {:from (- (:width (rn/get-window)))
:to 0
:duration constants/onboarding-modal-animation-duration}}}}})
[status-im2.navigation.transitions :as transitions]))
(defn screens
[]
@ -150,52 +121,73 @@
:layout options/onboarding-layout}
:component profiles/view}
{:name :new-to-status
:options {:theme :dark
:layout options/onboarding-layout}
:component new-to-status/new-to-status}
{:name :new-to-status
:options {:theme :dark
:layout options/onboarding-transparent-layout
:animations (merge
transitions/new-to-status-modal-animations
transitions/push-animations-for-transparent-background)
:popGesture false
:modalPresentationStyle :overCurrentContext
:hardwareBackButton {:dismissModalOnPress false
:popStackOnPress false}}
:hardware-back-button-handler new-to-status/navigate-back
:component new-to-status/new-to-status}
{:name :create-profile
:options {:theme :dark
:layout options/onboarding-layout}
:options {:theme :dark
:layout options/onboarding-transparent-layout
:animations transitions/push-animations-for-transparent-background
:popGesture false}
:component create-profile/create-profile}
{:name :create-profile-password
:options {:theme :dark
:insets {:top false}
:layout options/onboarding-layout}
:options {:theme :dark
:insets {:top false}
:layout options/onboarding-transparent-layout
:animations transitions/push-animations-for-transparent-background
:popGesture false}
:component create-password/create-password}
{:name :enable-biometrics
:options {:theme :dark
:layout options/onboarding-layout}
:options {:theme :dark
:layout options/onboarding-transparent-layout
:animations transitions/push-animations-for-transparent-background
:popGesture false}
:component enable-biometrics/enable-biometrics}
{:name :generating-keys
:options {:theme :dark
:layout options/onboarding-layout
:layout options/onboarding-transparent-layout
:animations transitions/push-animations-for-transparent-background
:popGesture false
:hardwareBackButton {:dismissModalOnPress false
:popStackOnPress false}}
:component generating-keys/generating-keys}
{:name :enter-seed-phrase
:options {:theme :dark
:layout options/onboarding-layout}
:options {:theme :dark
:layout options/onboarding-transparent-layout
:animations transitions/push-animations-for-transparent-background
:popGesture false}
:component enter-seed-phrase/enter-seed-phrase}
{:name :enable-notifications
:options {:theme :dark
:layout options/onboarding-layout
:popGesture false
:hardwareBackButton {:dismissModalOnPress false
:popStackOnPress false}}
:options {:theme :dark
:layout options/onboarding-transparent-layout
:animations (merge transitions/new-to-status-modal-animations
transitions/push-animations-for-transparent-background)
:modalPresentationStyle :overCurrentContext
:popGesture false
:hardwareBackButton {:dismissModalOnPress false
:popStackOnPress false}}
:component enable-notifications/enable-notifications}
{:name :identifiers
:component identifiers/view
:options {:theme :dark
:layout options/onboarding-layout
:layout options/onboarding-transparent-layout
:animations transitions/push-animations-for-transparent-background
:popGesture false
:hardwareBackButton {:dismissModalOnPress false
:popStackOnPress false}}}
@ -205,13 +197,13 @@
:component scan-sync-code-page/view}
{:name :sign-in-intro
:options {:layout options/onboarding-transparent-layout
:animations (merge
sign-in-modal-animations
push-animations-for-transparent-background)
:options {:layout options/onboarding-transparent-layout
:animations (merge
transitions/sign-in-modal-animations
transitions/push-animations-for-transparent-background)
:modalPresentationStyle :overCurrentContext
:hardwareBackButton {:dismissModalOnPress false
:popStackOnPress false}}
:hardwareBackButton {:dismissModalOnPress false
:popStackOnPress false}}
:hardware-back-button-handler sign-in/navigate-back
:component sign-in/animated-view}
@ -230,7 +222,7 @@
{:name :syncing-progress-intro
:options {:theme :dark
:layout options/onboarding-transparent-layout
:animations push-animations-for-transparent-background
:animations transitions/push-animations-for-transparent-background
:popGesture false}
:component syncing-devices/view-onboarding}
@ -239,8 +231,9 @@
:component syncing-results/view}
{:name :welcome
:options {:theme :dark
:layout options/onboarding-layout}
:options {:theme :dark
:layout options/onboarding-transparent-layout
:animations transitions/push-animations-for-transparent-background}
:component welcome/view}]
(when config/quo-preview-enabled?

39
src/status_im2/navigation/transitions.cljs Normal file
View File

@ -0,0 +1,39 @@
(ns status-im2.navigation.transitions
(:require [react-native.core :as rn]
[status-im2.constants :as constants]))
(def sign-in-modal-animations
{:showModal {:translationY {:from (:height (rn/get-window))
:to 0
:duration constants/onboarding-modal-animation-duration}
:alpha {:from 1
:to 1
:duration 0}}
:dismissModal {:translationY {:from 0
:to (:height (rn/get-window))
:duration constants/onboarding-modal-animation-duration}
:alpha {:from 1
:to 0
:duration constants/onboarding-modal-animation-duration}}})
(def push-animations-for-transparent-background
{:push {:content {:enter {:translationX {:from (:width (rn/get-window))
:to 0
:duration constants/onboarding-modal-animation-duration}}
:exit {:translationX {:from 0
:to (- (:width (rn/get-window)))
:duration constants/onboarding-modal-animation-duration}}}}
:pop {:content {:exit {:translationX {:from 0
:to (:width (rn/get-window))
:duration constants/onboarding-modal-animation-duration}}
:enter {:translationX {:from (- (:width (rn/get-window)))
:to 0
:duration constants/onboarding-modal-animation-duration}}}}})
(def new-to-status-modal-animations
{:showModal {:translationX {:from (:width (rn/get-window))
:to 0
:duration constants/onboarding-modal-animation-duration}}
:dismissModal {:translationX {:from 0
:to (:width (rn/get-window))
:duration constants/onboarding-modal-animation-duration}}})