fix broken screen and navigation when syncing fails (#20887)

src/status_im/common/pairing/events.cljs

@@ -55,7 +55,7 @@
              {:dispatch (if user-in-sign-in-intro-screen?
                           [:navigate-to-within-stack
                            [:screen/onboarding.syncing-progress-intro :screen/onboarding.sign-in-intro]]
-                          [:navigate-to :screen/onboarding.syncing-progress])}
+                          [:open-modal :screen/onboarding.syncing-progress])}
 
              (and completed-pairing? sender?)
              {:dispatch [:syncing/clear-states]}

src/status_im/common/resources.cljs

@@ -27,7 +27,9 @@
    :welcome-illustration          (js/require "../resources/images/ui2/welcome_illustration.png")
    :notifications                 (js/require "../resources/images/ui2/notifications.png")
    :nfc-prompt                    (js/require "../resources/images/ui2/nfc-prompt.png")
-   :nfc-success                   (js/require "../resources/images/ui2/nfc-success.png")})
+   :nfc-success                   (js/require "../resources/images/ui2/nfc-success.png")
+   :syncing-devices               (js/require "../resources/images/ui2/syncing_devices.png")
+   :syncing-wrong                 (js/require "../resources/images/ui2/syncing_wrong.png")})
 
 (def ui-themed
   {:angry-man

src/status_im/contexts/onboarding/syncing/progress/style.cljs

@@ -20,14 +20,13 @@
    :padding-bottom   20
    :background-color (when-not in-onboarding? colors/neutral-80-opa-80-blur)})
 
-(def page-illustration
-  {:flex              1
-   :background-color  colors/danger-50
-   :align-items       :center
-   :margin-horizontal 20
-   :border-radius     20
-   :margin-top        20
-   :justify-content   :center})
+(defn page-illustration
+  [width]
+  {:flex            1
+   :width           width
+   :align-items     :center
+   :align-self      :center
+   :justify-content :center})
 
 (def try-again-button
   {:margin-top         20

src/status_im/contexts/onboarding/syncing/progress/view.cljs

@@ -2,10 +2,9 @@
   (:require
     [quo.core :as quo]
     [react-native.core :as rn]
-    [status-im.config :as config]
+    [status-im.common.resources :as resources]
     [status-im.contexts.onboarding.common.background.view :as background]
     [status-im.contexts.onboarding.syncing.progress.style :as style]
-    [utils.debounce :as debounce]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -27,45 +26,39 @@
     :description-accessibility-label :progress-screen-sub-title}])
 
 (defn try-again-button
-  [profile-color in-onboarding? logged-in?]
+  [profile-color]
   [quo/button
    {:on-press            (fn []
                            (rf/dispatch [:syncing/clear-states])
-                           (cond
-                             logged-in?     (rf/dispatch [:navigate-back])
-                             in-onboarding? (rf/dispatch [:navigate-back-to
-                                                          :screen/onboarding.sign-in-intro])
-                             :else          (do
-                                              (rf/dispatch [:navigate-back])
-                                              (debounce/throttle-and-dispatch
-                                               [:open-modal
-                                                :screen/onboarding.sign-in]
-                                               1000))))
+                           (rf/dispatch [:navigate-back]))
     :accessibility-label :try-again-later-button
     :customization-color profile-color
+    :size                40
     :container-style     style/try-again-button}
    (i18n/label :t/try-again)])
 
+(defn- illustration
+  [pairing-progress?]
+  [rn/image
+   {:resize-mode :contain
+    :style       (style/page-illustration (:width (rn/get-window)))
+    :source      (resources/get-image (if pairing-progress? :syncing-devices :syncing-wrong))}])
+
 (defn view
   [in-onboarding?]
-  (let [pairing-status (rf/sub [:pairing/pairing-status])
-        profile-color  (:color (rf/sub [:onboarding/profile]))
-        logged-in?     (rf/sub [:multiaccount/logged-in?])]
+  (let [pairing-status    (rf/sub [:pairing/pairing-status])
+        pairing-progress? (pairing-progress pairing-status)
+        profile-color     (or (:color (rf/sub [:onboarding/profile]))
+                              (rf/sub [:profile/customization-color]))]
     [rn/view {:style (style/page-container in-onboarding?)}
      (when-not in-onboarding?
        [rn/view {:style style/absolute-fill}
         [background/view true]])
      [quo/page-nav {:type :no-title :background :blur}]
-     [page-title (pairing-progress pairing-status)]
-     (if config/show-not-implemented-features?
-       (if (pairing-progress pairing-status)
-         [rn/view {:style style/page-illustration}
-          [quo/text "[Success here]"]]
-         [rn/view {:style style/page-illustration}
-          [quo/text "[Error here]"]])
-       [rn/view {:flex 1}])
+     [page-title pairing-progress?]
+     [illustration pairing-progress?]
      (when-not (pairing-progress pairing-status)
-       [try-again-button profile-color in-onboarding? logged-in?])]))
+       [try-again-button profile-color])]))
 
 (defn view-onboarding
   []

src/status_im/navigation/options.cljs

@@ -82,10 +82,11 @@
                              {})})
 
 (def dark-screen
-  {:theme  :dark
-   :layout {:componentBackgroundColor colors/neutral-95
-            :orientation              ["portrait"]
-            :backgroundColor          colors/neutral-95}})
+  {:theme                  :dark
+   :modalPresentationStyle :overCurrentContext
+   :layout                 {:componentBackgroundColor colors/neutral-95
+                            :orientation              ["portrait"]
+                            :backgroundColor          colors/neutral-95}})
 
 (def lightbox
   {:topBar        {:visible false}

src/status_im/navigation/screens.cljs

@@ -147,7 +147,7 @@
      :component shell/shell-stack}
 
     {:name      :shell-qr-reader
-     :options   (assoc options/dark-screen :modalPresentationStyle :overCurrentContext)
+     :options   options/dark-screen
      :component shell-qr-reader/view}
 
     {:name      :chat
@@ -369,7 +369,7 @@
                                       :popStackOnPress     false}}}
 
     {:name      :scan-sync-code-page
-     :options   options/dark-screen
+     :options   options/transparent-modal-screen-options
      :component scan-sync-code-page/view}
 
     {:name      :screen/onboarding.sign-in-intro
@@ -387,9 +387,9 @@
      :component sign-in/view}
 
     {:name      :screen/onboarding.syncing-progress
-     :options   {:theme      :dark
-                 :layout     options/onboarding-layout
-                 :popGesture false}
+     :options   (assoc options/dark-screen
+                       :popGesture
+                       false)
      :component syncing-devices/view}
 
     {:name      :screen/onboarding.syncing-progress-intro
@@ -513,9 +513,7 @@
      :component wallet-transaction-progress/view}
 
     {:name      :screen/wallet.scan-address
-     :options   (merge
-                 options/dark-screen
-                 {:modalPresentationStyle :overCurrentContext})
+     :options   options/dark-screen
      :component wallet-scan-address/view}
 
     {:name      :screen/wallet.swap-select-asset-to-pay
@@ -536,9 +534,7 @@
      :component wallet-swap-set-spending-cap/view}
 
     {:name      :scan-profile-qr-code
-     :options   (merge
-                 options/dark-screen
-                 {:modalPresentationStyle :overCurrentContext})
+     :options   options/dark-screen
      :component scan-profile-qr-page/view}
 
     {:name      :invite-people-community
@@ -564,9 +560,7 @@
      :component wallet-connected-dapps/view}
 
     {:name      :screen/wallet.scan-dapp
-     :options   (merge
-                 options/dark-screen
-                 {:modalPresentationStyle :overCurrentContext})
+     :options   options/dark-screen
      :component wallet-scan-dapp/view}
 
     ;; Settings