From 4164d43d2c6f4ebdba1d599cb2a6991a942aaaaa Mon Sep 17 00:00:00 2001 From: yqrashawn Date: Wed, 19 Jun 2024 10:02:37 +0800 Subject: [PATCH] feat: check before syncing doc Signed-off-by: yqrashawn --- doc/ui-guidelines.md | 4 +- .../common/check_before_syncing/style.cljs | 22 ++++++ .../common/check_before_syncing/view.cljs | 70 +++++++++++++++++++ .../create_or_sync_profile/view.cljs | 10 ++- .../contexts/profile/profiles/view.cljs | 15 +++- .../syncing/syncing_devices_list/view.cljs | 8 ++- translations/en.json | 5 ++ 7 files changed, 127 insertions(+), 7 deletions(-) create mode 100644 src/status_im/common/check_before_syncing/style.cljs create mode 100644 src/status_im/common/check_before_syncing/view.cljs diff --git a/doc/ui-guidelines.md b/doc/ui-guidelines.md index 55aaf4f861..608eebe3d0 100644 --- a/doc/ui-guidelines.md +++ b/doc/ui-guidelines.md @@ -31,7 +31,7 @@ NOW: (defn view [{:keys [on-press on-long-press icon]}] (let [[pressed? set-pressed] (rn/use-state false) - theme (theme/use-theme-value) + theme (theme/use-theme) on-press-in (rn/use-callback #(set-pressed true)) on-press-out (rn/use-callback #(set-pressed nil))] [rn/pressable @@ -47,7 +47,7 @@ NOW: - We no longer need to create an anonymous function for rendering. This removes unnecessary confusion and the need for specific knowledge on how it works and why it was needed. - `rn/use-state` is used instead of `reagent/atom` - State values no longer need to be dereferenced; they are accessible as regular symbols. This eliminates a common bug where the "@" symbol was inadvertently omitted. -- `theme/with-theme` wrapper is not needed anymore, `(theme/use-theme-value)` hook can be used directly in the components +- `theme/with-theme` wrapper is not needed anymore, `(theme/use-theme)` hook can be used directly in the components - `:f>` not needed anymore, all components are functional by default - `rn/use-callback` hook should be used for anon callback functions diff --git a/src/status_im/common/check_before_syncing/style.cljs b/src/status_im/common/check_before_syncing/style.cljs new file mode 100644 index 0000000000..c607f62d2c --- /dev/null +++ b/src/status_im/common/check_before_syncing/style.cljs @@ -0,0 +1,22 @@ +(ns status-im.common.check-before-syncing.style) + +(def buttons-container + {:flex-direction :row + :justify-content :space-between + :gap 12 + :padding-vertical 12}) + +(def button {:flex 1}) + +(def checkbox + {:margin-top 16 + :flex-direction :row + :align-items :center}) + +(def checkbox-text {:margin-left 10}) + +(def checkboxes-container {:margin-bottom 10}) + +(def header {:margin-bottom 8}) + +(def view-container {:margin-horizontal 33}) diff --git a/src/status_im/common/check_before_syncing/view.cljs b/src/status_im/common/check_before_syncing/view.cljs new file mode 100644 index 0000000000..ad561df8e1 --- /dev/null +++ b/src/status_im/common/check_before_syncing/view.cljs @@ -0,0 +1,70 @@ +(ns status-im.common.check-before-syncing.view + (:require + [quo.core :as quo] + [react-native.core :as rn] + [status-im.common.check-before-syncing.style :as style] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(def checks + [(i18n/label :t/check-before-syncing-doc-checkbox-1) + (i18n/label :t/check-before-syncing-doc-checkbox-2) + (i18n/label :t/check-before-syncing-doc-checkbox-3)]) + +(defn- checkbox + [on-change description] + [rn/view {:style style/checkbox} + [quo/selectors + {:type :checkbox + :blur? true + :on-change on-change}] + [quo/text {:style style/checkbox-text} description]]) + +(defn- compute-new-checked-count + [set-checked-count checked?] + (if checked? + (set-checked-count inc) + (set-checked-count dec))) + +(defn- hide-bottom-sheet + [] + (rf/dispatch [:hide-bottom-sheet])) + +(defn view + [{:keys [on-submit]}] + (let [[checked-count set-checked-count] (rn/use-state 0) + on-change (partial compute-new-checked-count set-checked-count) + checkbox-with-on-change (partial checkbox on-change) + on-cancel hide-bottom-sheet + on-continue (rn/use-callback + (fn [] + (hide-bottom-sheet) + (on-submit)) + [on-submit])] + [rn/view + {:style style/view-container + :accessibility-label :check-before-syncing-bottom-sheet} + [quo/text + {:weight :semi-bold + :size :heading-2 + :style style/header} (i18n/label :t/check-before-syncing)] + [quo/text (i18n/label :t/check-before-syncing-doc-description)] + + (into + [rn/view {:style style/checkboxes-container}] + (mapv checkbox-with-on-change checks)) + + [rn/view {:style style/buttons-container} + [quo/button + {:type :grey + :container-style style/button + :accessibility-label :cancel-button + :on-press on-cancel} + (i18n/label :t/cancel)] + [quo/button + {:container-style style/button + :disabled? (not= checked-count (count checks)) + :accessibility-label :continue-button + + :on-press on-continue} + (i18n/label :t/continue)]]])) diff --git a/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs b/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs index 7926c8fb1a..d9ad71d7d8 100644 --- a/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs +++ b/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs @@ -4,6 +4,7 @@ re-frame.db [react-native.core :as rn] [react-native.safe-area :as safe-area] + [status-im.common.check-before-syncing.view :as check-before-syncing] [status-im.common.not-implemented :as not-implemented] [status-im.common.resources :as resources] [status-im.config :as config] @@ -25,6 +26,13 @@ [:onboarding/navigate-to-sign-in-by-syncing] 1000)) +(defn- show-check-before-syncing + [] + (rf/dispatch + [:show-bottom-sheet + {:content (fn [] [check-before-syncing/view + {:on-submit navigate-to-sign-in-by-syncing}])}])) + (defn- navigate-to-sign-in-by-seed-phrase [create-profile?] (rf/dispatch [:onboarding/navigate-to-sign-in-by-seed-phrase @@ -62,7 +70,7 @@ :accessibility-label :scan-sync-code-option-card :image (resources/get-image :generate-keys) :max-height (option-card-max-height window-height) - :on-press navigate-to-sign-in-by-syncing}]) + :on-press show-check-before-syncing}]) (defn sign-in-options [sign-in-type] diff --git a/src/status_im/contexts/profile/profiles/view.cljs b/src/status_im/contexts/profile/profiles/view.cljs index 73371204d1..9f7b8788a8 100644 --- a/src/status_im/contexts/profile/profiles/view.cljs +++ b/src/status_im/contexts/profile/profiles/view.cljs @@ -5,6 +5,7 @@ [react-native.core :as rn] [react-native.reanimated :as reanimated] [react-native.safe-area :as safe-area] + [status-im.common.check-before-syncing.view :as check-before-syncing] [status-im.common.confirmation-drawer.view :as confirmation-drawer] [status-im.common.standard-authentication.core :as standard-authentication] [status-im.config :as config] @@ -41,6 +42,16 @@ :linear 50)) +(defn- show-check-before-syncing + [] + (rf/dispatch + [:show-bottom-sheet + {:content (fn [] [check-before-syncing/view + {:on-submit + #(debounce/throttle-and-dispatch + [:open-modal :screen/onboarding.sign-in] + 1000)}])}])) + (defn new-account-options [] [quo/action-drawer @@ -55,9 +66,7 @@ :accessibility-label :create-new-profile} {:icon :i/multi-profile :label (i18n/label :t/add-existing-status-profile) - :on-press #(debounce/throttle-and-dispatch - [:open-modal :screen/onboarding.sign-in] - 1000) + :on-press show-check-before-syncing :accessibility-label :multi-profile}]]]) (defn show-new-account-options diff --git a/src/status_im/contexts/syncing/syncing_devices_list/view.cljs b/src/status_im/contexts/syncing/syncing_devices_list/view.cljs index c4ecf84215..52b46fd986 100644 --- a/src/status_im/contexts/syncing/syncing_devices_list/view.cljs +++ b/src/status_im/contexts/syncing/syncing_devices_list/view.cljs @@ -3,6 +3,7 @@ [quo.core :as quo] [quo.foundations.colors :as colors] [react-native.core :as rn] + [status-im.common.check-before-syncing.view :as check-before-syncing] [status-im.contexts.syncing.device.view :as device] [status-im.contexts.syncing.syncing-devices-list.style :as style] [utils.i18n :as i18n] @@ -14,7 +15,12 @@ (defn open-setup-syncing [] - (rf/dispatch [:open-modal :settings-setup-syncing])) + (rf/dispatch + [:show-bottom-sheet + {:theme :dark + :content + (fn [] [check-before-syncing/view + {:on-submit #(rf/dispatch [:open-modal :settings-setup-syncing])}])}])) (defn view [] diff --git a/translations/en.json b/translations/en.json index c3702cf6ac..63e07d6fed 100644 --- a/translations/en.json +++ b/translations/en.json @@ -179,6 +179,11 @@ "chat-settings": "Chat settings", "chat-with-friends": "Chat privately with friends", "chats": "Chats", + "check-before-syncing": "Check before syncing", + "check-before-syncing-doc-description" :"To sync your devices successfully, make sure to check and complete these steps:", + "check-before-syncing-doc-checkbox-1": "Both devices are on the same network", + "check-before-syncing-doc-checkbox-2": "Make sure you are logged in on the other device", + "check-before-syncing-doc-checkbox-3": "Disable the firewall on your device", "check-your-recovery-phrase": "Check your seed phrase", "choose-authentication-method": "Choose an authentication method", "clear": "Clear",