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..3ed0eeed52 --- /dev/null +++ b/src/status_im/common/check_before_syncing/style.cljs @@ -0,0 +1,24 @@ +(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 :padding-right 10}) + +(def header {:margin-bottom 8}) + +(def description {:margin-right -33}) + +(def view-container {:padding-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..3c06009c21 --- /dev/null +++ b/src/status_im/common/check_before_syncing/view.cljs @@ -0,0 +1,74 @@ +(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 customization-color description] + [rn/view {:style style/checkbox} + [quo/selectors + {:type :checkbox + :blur? true + :customization-color customization-color + :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 customization-color]}] + (let [[checked-count set-checked-count] (rn/use-state 0) + on-change (partial compute-new-checked-count set-checked-count) + render-checkbox (rn/use-callback + (partial checkbox on-change customization-color) + [customization-color]) + 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 {:style style/description} (i18n/label :t/check-before-syncing-doc-description)] + + (into + [rn/view {:style style/checkboxes-container}] + (mapv render-checkbox 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)) + :customization-color (or customization-color :blue) + :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..c30dd0719a 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,14 @@ [: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}]) + :shell? true}])) + (defn- navigate-to-sign-in-by-seed-phrase [create-profile?] (rf/dispatch [:onboarding/navigate-to-sign-in-by-seed-phrase @@ -62,7 +71,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..748907164b 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,17 @@ :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)}]) + :shell? true}])) + (defn new-account-options [] [quo/action-drawer @@ -55,9 +67,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..e1668d790e 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] @@ -13,19 +14,31 @@ (rf/dispatch [:navigate-back])) (defn open-setup-syncing - [] - (rf/dispatch [:open-modal :settings-setup-syncing])) + [customization-color] + (rf/dispatch + [:show-bottom-sheet + {:theme :dark + :shell? true + :content + (fn [] [check-before-syncing/view + {:customization-color customization-color + :on-submit #(rf/dispatch [:open-modal :settings-setup-syncing])}])}])) (defn view [] - (let [devices (rf/sub [:pairing/installations]) - devices-with-button (map #(assoc % :show-button? true) devices) - user-device (first devices-with-button) - other-devices (rest devices-with-button) - profile-color (rf/sub [:profile/customization-color]) - {:keys [paired-devices unpaired-devices]} (group-by - #(if (:enabled? %) :paired-devices :unpaired-devices) - other-devices)] + (let [devices (rf/sub [:pairing/installations]) + devices-with-button (map #(assoc % :show-button? true) devices) + user-device (first devices-with-button) + other-devices (rest devices-with-button) + profile-color (rf/sub [:profile/customization-color]) + open-setup-syncing-with-customization-color (rn/use-callback (partial open-setup-syncing + profile-color) + [profile-color]) + {:keys [paired-devices unpaired-devices]} (group-by + #(if (:enabled? %) + :paired-devices + :unpaired-devices) + other-devices)] [quo/overlay {:type :shell :top-inset? true} [quo/page-nav {:type :no-title @@ -47,7 +60,7 @@ :type :primary :customization-color profile-color :icon-only? true - :on-press open-setup-syncing} + :on-press open-setup-syncing-with-customization-color} :i/add]] [device/view (merge user-device {:this-device? true})] (when (seq paired-devices) diff --git a/translations/en.json b/translations/en.json index 211d741ce5..5d96e3ebd6 100644 --- a/translations/en.json +++ b/translations/en.json @@ -180,6 +180,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": "Connect both devices to 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 and VPN on your devices", "check-your-recovery-phrase": "Check your seed phrase", "choose-authentication-method": "Choose an authentication method", "clear": "Clear",