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

This commit is contained in:
Parvesh Monu 2024-07-26 19:31:42 +05:30 committed by GitHub
parent a45991b6dc
commit a671c70838
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 42 additions and 53 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 424 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 752 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 547 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

View File

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

View File

@ -27,7 +27,9 @@
:welcome-illustration (js/require "../resources/images/ui2/welcome_illustration.png") :welcome-illustration (js/require "../resources/images/ui2/welcome_illustration.png")
:notifications (js/require "../resources/images/ui2/notifications.png") :notifications (js/require "../resources/images/ui2/notifications.png")
:nfc-prompt (js/require "../resources/images/ui2/nfc-prompt.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 (def ui-themed
{:angry-man {:angry-man

View File

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

View File

@ -2,10 +2,9 @@
(:require (:require
[quo.core :as quo] [quo.core :as quo]
[react-native.core :as rn] [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.common.background.view :as background]
[status-im.contexts.onboarding.syncing.progress.style :as style] [status-im.contexts.onboarding.syncing.progress.style :as style]
[utils.debounce :as debounce]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
@ -27,45 +26,39 @@
:description-accessibility-label :progress-screen-sub-title}]) :description-accessibility-label :progress-screen-sub-title}])
(defn try-again-button (defn try-again-button
[profile-color in-onboarding? logged-in?] [profile-color]
[quo/button [quo/button
{:on-press (fn [] {:on-press (fn []
(rf/dispatch [:syncing/clear-states]) (rf/dispatch [:syncing/clear-states])
(cond (rf/dispatch [:navigate-back]))
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))))
:accessibility-label :try-again-later-button :accessibility-label :try-again-later-button
:customization-color profile-color :customization-color profile-color
:size 40
:container-style style/try-again-button} :container-style style/try-again-button}
(i18n/label :t/try-again)]) (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 (defn view
[in-onboarding?] [in-onboarding?]
(let [pairing-status (rf/sub [:pairing/pairing-status]) (let [pairing-status (rf/sub [:pairing/pairing-status])
profile-color (:color (rf/sub [:onboarding/profile])) pairing-progress? (pairing-progress pairing-status)
logged-in? (rf/sub [:multiaccount/logged-in?])] profile-color (or (:color (rf/sub [:onboarding/profile]))
(rf/sub [:profile/customization-color]))]
[rn/view {:style (style/page-container in-onboarding?)} [rn/view {:style (style/page-container in-onboarding?)}
(when-not in-onboarding? (when-not in-onboarding?
[rn/view {:style style/absolute-fill} [rn/view {:style style/absolute-fill}
[background/view true]]) [background/view true]])
[quo/page-nav {:type :no-title :background :blur}] [quo/page-nav {:type :no-title :background :blur}]
[page-title (pairing-progress pairing-status)] [page-title pairing-progress?]
(if config/show-not-implemented-features? [illustration pairing-progress?]
(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}])
(when-not (pairing-progress pairing-status) (when-not (pairing-progress pairing-status)
[try-again-button profile-color in-onboarding? logged-in?])])) [try-again-button profile-color])]))
(defn view-onboarding (defn view-onboarding
[] []

View File

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

View File

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