diff --git a/resources/images/ui2/syncing_devices@2x.png b/resources/images/ui2/syncing_devices@2x.png new file mode 100644 index 0000000000..d7114f97ec Binary files /dev/null and b/resources/images/ui2/syncing_devices@2x.png differ diff --git a/resources/images/ui2/syncing_devices@3x.png b/resources/images/ui2/syncing_devices@3x.png new file mode 100644 index 0000000000..16696156b7 Binary files /dev/null and b/resources/images/ui2/syncing_devices@3x.png differ diff --git a/resources/images/ui2/syncing_wrong@2x.png b/resources/images/ui2/syncing_wrong@2x.png new file mode 100644 index 0000000000..693fc2a8ff Binary files /dev/null and b/resources/images/ui2/syncing_wrong@2x.png differ diff --git a/resources/images/ui2/syncing_wrong@3x.png b/resources/images/ui2/syncing_wrong@3x.png new file mode 100644 index 0000000000..ef5e847139 Binary files /dev/null and b/resources/images/ui2/syncing_wrong@3x.png differ diff --git a/src/status_im/common/pairing/events.cljs b/src/status_im/common/pairing/events.cljs index a7791b99d1..10fb284760 100644 --- a/src/status_im/common/pairing/events.cljs +++ b/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]} diff --git a/src/status_im/common/resources.cljs b/src/status_im/common/resources.cljs index 14eacd856d..ae5e6f6f48 100644 --- a/src/status_im/common/resources.cljs +++ b/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 diff --git a/src/status_im/contexts/onboarding/syncing/progress/style.cljs b/src/status_im/contexts/onboarding/syncing/progress/style.cljs index 9cc9a652b5..60f168c5f1 100644 --- a/src/status_im/contexts/onboarding/syncing/progress/style.cljs +++ b/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 diff --git a/src/status_im/contexts/onboarding/syncing/progress/view.cljs b/src/status_im/contexts/onboarding/syncing/progress/view.cljs index 4bd3de32b0..c32a0f98b5 100644 --- a/src/status_im/contexts/onboarding/syncing/progress/view.cljs +++ b/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 [] diff --git a/src/status_im/navigation/options.cljs b/src/status_im/navigation/options.cljs index f79645ded6..1d7f3faee9 100644 --- a/src/status_im/navigation/options.cljs +++ b/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} diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index 4b8f0708bd..0f1fb06971 100644 --- a/src/status_im/navigation/screens.cljs +++ b/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