fix for enable notifications / welcome to web3 screen transitions

src/status_im2/contexts/onboarding/enable_notifications/view.cljs

@@ -29,7 +29,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 +39,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
        :override-background-color colors/white-opa-5
        :style                     {:margin-top 12}}
@@ -48,7 +50,9 @@
   []
   (let [insets (safe-area/get-insets)]
     [rn/view {:style (style/page-container insets)}
-     [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

src/status_im2/contexts/onboarding/syncing/results/style.cljs

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

src/status_im2/contexts/onboarding/syncing/results/view.cljs

@@ -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
       :override-background-color (colors/custom-color profile-color 60)
       :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])

src/status_im2/contexts/onboarding/welcome/style.cljs

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

src/status_im2/contexts/onboarding/welcome/view.cljs

@@ -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
   []
@@ -25,7 +24,7 @@
 
 
 (defn navigation-bar
-  [root]
+  []
   [quo/page-nav
    {:horizontal-description? false
     :one-icon-align-left?    true
@@ -34,7 +33,8 @@
     :left-section            {:icon                  :i/arrow-left
                               :icon-background-color colors/white-opa-5
                               :type                  :shell
-                              :on-press              #(rf/dispatch [:init-root root])}}])
+                              :on-press              #(rf/dispatch [:navigate-back-within-stack
+                                                                    :enable-notifications])}}])
 
 (defn dispatch-visibility-status-update
   [status-type]
@@ -49,7 +49,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}

src/status_im2/navigation/screens.cljs

@@ -205,12 +205,14 @@
      :component enter-seed-phrase/enter-seed-phrase}
 
     {:name      :enable-notifications
-     :options   {:theme              :dark
-                 :layout             options/onboarding-transparent-layout
-                 :animations         push-animations-for-transparent-background
-                 :popGesture         false
-                 :hardwareBackButton {:dismissModalOnPress false
-                                      :popStackOnPress     false}}
+     :options   {:theme                  :dark
+                 :layout                 options/onboarding-transparent-layout
+                 :animations             (merge new-to-status-modal-animations
+                                                push-animations-for-transparent-background)
+                 :modalPresentationStyle :overCurrentContext
+                 :popGesture             false
+                 :hardwareBackButton     {:dismissModalOnPress false
+                                          :popStackOnPress     false}}
      :component enable-notifications/enable-notifications}
 
     {:name      :identifiers
@@ -261,8 +263,9 @@
      :component syncing-results/view}
 
     {:name      :welcome
-     :options   {:theme  :dark
-                 :layout options/onboarding-layout}
+     :options   {:theme      :dark
+                 :layout     options/onboarding-transparent-layout
+                 :animations push-animations-for-transparent-background}
      :component welcome/view}]
 
    (when config/quo-preview-enabled?