feat: check before syncing doc (#20504)

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
 

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})

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)]]]))

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]

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
+      :on-press            show-check-before-syncing
-                             [:open-modal :screen/onboarding.sign-in]
-                             1000)
       :accessibility-label :multi-profile}]]])
 
 (defn show-new-account-options

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,8 +14,15 @@
   (rf/dispatch [:navigate-back]))
 
 (defn open-setup-syncing
-  []
+  [customization-color]
-  (rf/dispatch [:open-modal :settings-setup-syncing]))
+  (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
   []
@@ -23,8 +31,13 @@
         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)
+                                                     #(if (:enabled? %)
+                                                        :paired-devices
+                                                        :unpaired-devices)
                                                      other-devices)]
     [quo/overlay {:type :shell :top-inset? true}
      [quo/page-nav
@@ -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)

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",