Loading history on mobile network

src/status_im/accounts/create/core.cljs

@@ -19,7 +19,8 @@
             [status-im.utils.types :as types]
             [taoensso.timbre :as log]
             [status-im.utils.fx :as fx]
-            [status-im.node.core :as node]))
+            [status-im.node.core :as node]
+            [status-im.ui.screens.mobile-network-settings.events :as mobile-network]))
 
 (defn get-signing-phrase [cofx]
   (assoc cofx :signing-phrase (signing-phrase/generate)))
@@ -80,7 +81,9 @@
                             :keycard-instance-uid   keycard-instance-uid
                             :keycard-pairing        keycard-pairing
                             :keycard-paired-on      keycard-paired-on
-                            :settings               (constants/default-account-settings)}]
+                            :settings               (constants/default-account-settings)
+                            :syncing-on-mobile-network? false
+                            :remember-syncing-choice? false}]
     (log/debug "account-created")
     (when-not (string/blank? pubkey)
       (fx/merge cofx
@@ -110,7 +113,8 @@
             ;; We set last updated as we are actually changing a field,
             ;; unlike on recovery where the name is not set
             (accounts.update/account-update {:last-updated now
-                                             :name (:name create)} {})))
+                                             :name (:name create)} {})
+            (mobile-network/on-network-status-change)))
 
 (fx/defn next-step
   [{:keys [db] :as cofx} step password password-confirm]

src/status_im/accounts/login/core.cljs

@@ -16,7 +16,8 @@
             [status-im.models.wallet :as models.wallet]
             [status-im.models.transactions :as transactions]
             [status-im.i18n :as i18n]
-            [status-im.node.core :as node]))
+            [status-im.node.core :as node]
+            [status-im.ui.screens.mobile-network-settings.events :as mobile-network]))
 
 (defn login! [address password]
   (status/login address password #(re-frame/dispatch [:accounts.login.callback/login-success %])))
@@ -87,7 +88,8 @@
         error   (:error data)
         success (empty? error)
         {:keys [address password save-password?]}
-        (accounts.db/credentials cofx)]
+        (accounts.db/credentials cofx)
+        network-type (:network/type db)]
     ;; check if logged into account
     (when address
       (if success
@@ -108,6 +110,7 @@
          (fn [_]
            (when save-password?
              {:keychain/save-user-password [address password]}))
+         (mobile-network/on-network-status-change)
          (protocol/initialize-protocol)
          (universal-links/process-stored-event)
          #(when-not platform/desktop?

src/status_im/data_store/realm/schemas/base/account.cljs

@@ -230,6 +230,12 @@
                                         {:type "string[]" :optional true}
                                         :recent-stickers
                                         {:type "string[]" :optional true}}))
+
 (def v20 (assoc-in v19
                    [:properties :last-published-contact-code]
                    {:type :int :default 0}))
+
+(def v21 (update v20 :properties merge
+                 {:syncing-on-mobile-network? {:type :bool :default false}
+                  :remember-syncing-choice?   {:type :bool :default false}}))
+

src/status_im/data_store/realm/schemas/base/core.cljs

@@ -98,6 +98,11 @@
           extension/v12
           account/v20])
 
+(def v26 [network/v1
+          bootnode/v4
+          extension/v12
+          account/v21])
+
 ;; put schemas ordered by version
 (def schemas [{:schema        v1
                :schemaVersion 1
@@ -173,4 +178,7 @@
                :migration     migrations/v24}
               {:schema        v25
                :schemaVersion 25
+               :migration     (constantly nil)}
+              {:schema        v26
+               :schemaVersion 26
                :migration     (constantly nil)}])

src/status_im/init/core.cljs

@@ -88,7 +88,7 @@
   [{{:keys      [view-id hardwallet
                  initial-props desktop/desktop
                  network-status network peers-count peers-summary device-UUID
-                 push-notifications/stored]
+                 push-notifications/stored network/type]
      :node/keys [status]
      :or        {network (get app-db :network)}} :db}]
   ;TODO remove retrieve-pairing when keycard login will be ready
@@ -102,6 +102,7 @@
                                        :peers-summary (or peers-summary [])
                                        :node/status status
                                        :network network
+                                       :network/type type
                                        :hardwallet hardwallet
                                        :device-UUID device-UUID
                                        :view-id view-id
@@ -188,6 +189,7 @@
                         :accounts/accounts accounts
                         :network-status network-status
                         :network network
+                        :network/type (:network/type db)
                         :chain (ethereum/network->chain-name account-network)
                         :universal-links/url url
                         :peers-summary peers-summary

src/status_im/mailserver/core.cljs

@@ -18,7 +18,8 @@
             [status-im.utils.handlers :as handlers]
             [status-im.accounts.update.core :as accounts.update]
             [status-im.ui.screens.navigation :as navigation]
-            [status-im.transport.partitioned-topic :as transport.topic]))
+            [status-im.transport.partitioned-topic :as transport.topic]
+            [status-im.ui.screens.mobile-network-settings.utils :as mobile-network-utils]))
 
 ;; How do mailserver work ?
 ;;
@@ -332,7 +333,9 @@
 
 (fx/defn process-next-messages-request
   [{:keys [db now] :as cofx}]
-  (when (and (transport.db/all-filters-added? cofx)
+  (when (and
+         (mobile-network-utils/syncing-allowed? cofx)
+         (transport.db/all-filters-added? cofx)
          (not (:mailserver/current-request db)))
     (when-let [mailserver (get-mailserver-when-ready cofx)]
       (let [request-to (or (:mailserver/request-to db)
@@ -475,7 +478,6 @@
         ;; If a cursor is returned, add cursor and fire request again
         (if (seq cursor)
           (when-let [mailserver (get-mailserver-when-ready cofx)]
-
             (let [request-with-cursor (assoc request :cursor cursor)]
               {:db (assoc db :mailserver/current-request request-with-cursor)
                :mailserver/request-messages {:web3 (:web3 db)

src/status_im/network/core.cljs

@@ -13,7 +13,7 @@
             [status-im.utils.handlers :as handlers]
             [status-im.utils.http :as http]
             [status-im.utils.types :as types]
-            [status-im.ui.components.bottom-sheet.core :as bottom-sheet]))
+            [status-im.ui.screens.mobile-network-settings.events :as mobile-network]))
 
 (def url-regex
   #"https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}(\.[a-z]{2,6})?\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)")
@@ -238,14 +238,12 @@
                           :content (not-supported-warning fleet)}})))
 
 (fx/defn handle-network-status-change
-  [cofx {:keys [type] :as data}]
+  [{:keys [db] :as cofx} {:keys [type] :as data}]
   (fx/merge
    cofx
-   {:network/notify-status-go data}
+   {:db                       (assoc db :network/type type)
-   (if (= type "cellular")
+    :network/notify-status-go data}
-     (bottom-sheet/show-bottom-sheet
+   (mobile-network/on-network-status-change)))
-      {:view :mobile-network})
-     (bottom-sheet/hide-bottom-sheet))))
 
 (re-frame/reg-fx
  :network/listen-to-network-status

src/status_im/ui/components/bottom_sheet/events.cljs

@@ -1,5 +1,6 @@
 (ns status-im.ui.components.bottom-sheet.events
-  (:require [status-im.utils.fx :as fx]))
+  (:require [status-im.utils.fx :as fx]
+            [status-im.utils.handlers :as handlers]))
 
 (fx/defn show-bottom-sheet
   [{:keys [db]} {:keys [view]}]
@@ -10,3 +11,8 @@
 (fx/defn hide-bottom-sheet
   [{:keys [db]}]
   {:db (assoc db :bottom-sheet/show? false)})
+
+(handlers/register-handler-fx
+ :bottom-sheet/hide
+ (fn [cofx]
+   (hide-bottom-sheet cofx)))

src/status_im/ui/components/bottom_sheet/view.cljs

@@ -2,7 +2,8 @@
   (:require [status-im.ui.components.react :as react]
             [status-im.ui.components.animation :as animation]
             [status-im.ui.components.bottom-sheet.styles :as styles]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [re-frame.core :as re-frame]))
 
 (def initial-animation-duration 300)
 (def release-animation-duration 150)
@@ -99,6 +100,7 @@
     :reagent-render
     (fn [{:keys [opacity-value bottom-value
                  height content on-cancel]
+          :or   {on-cancel #(re-frame/dispatch [:bottom-sheet/hide])}
           :as   opts}]
       [react/view
        (merge
@@ -142,12 +144,12 @@
                                       styles/border-radius
                                       styles/bottom-padding)
               opts'                (assoc opts :height total-content-height)]
-          (when (not= old-height new-height)
+          (when (and new-show? (not= old-height new-height))
             (animation/set-value bottom-value new-height))
           (cond (and (not old-show?) new-show?)
                 (reset! show-sheet? true)
 
-                (and old-show? (not new-show?) (true? @show-sheet?))
+                (and old-show? (false? new-show?) (true? @show-sheet?))
                 (cancel opts'))))
       :reagent-render
       (fn [{:keys [content content-height]}]

src/status_im/ui/components/connectivity/subs.cljs

@@ -1,7 +1,8 @@
 (ns status-im.ui.components.connectivity.subs
-  (:require [re-frame.core :as re-frame]
+  (:require
+   [re-frame.core :as re-frame]
    [status-im.utils.platform :as utils.platform]
-            [status-im.i18n :as i18n]))
+   [status-im.ui.screens.mobile-network-settings.utils :as mobile-network-utils]))
 
 (re-frame/reg-sub
  :connectivity/status-properties
@@ -11,8 +12,10 @@
  :<- [:mailserver/connection-error?]
  :<- [:mailserver/request-error?]
  :<- [:mailserver/fetching?]
+ :<- [:get :network/type]
+ :<- [:get :account/account]
  (fn [[offline? disconnected? mailserver-connecting? mailserver-connection-error?
-       mailserver-request-error? mailserver-fetching?]]
+       mailserver-request-error? mailserver-fetching? network-type account]]
    (let [wallet-offline? (and offline?
                               ;; There's no wallet of desktop
                               (not utils.platform/desktop?))
@@ -36,9 +39,13 @@
                        mailserver-request-error?
                        :t/mailserver-request-error-status
 
+                       (and (mobile-network-utils/cellular? network-type)
+                            (not (:syncing-on-mobile-network? account)))
+                       :mobile-network
+
                        :else nil)]
-     {:message (i18n/label (or error-label :t/connected))
+     {:message (or error-label :t/connected)
-      :connected? (nil? error-label)
+      :connected? (and (nil? error-label) (not= :mobile-network error-label))
       :connecting? (= error-label :t/connecting)
       :loading-indicator? mailserver-fetching?
       :on-press-fn #(cond
@@ -47,4 +54,9 @@
                        [:mailserver.ui/reconnect-mailserver-pressed])
                       mailserver-request-error?
                       (re-frame/dispatch
-                       [:mailserver.ui/request-error-pressed]))})))
+                       [:mailserver.ui/request-error-pressed])
+
+                      (= :mobile-network error-label)
+                      (re-frame/dispatch
+
+                       [:mobile-network/show-offline-sheet]))})))

src/status_im/ui/components/connectivity/view.cljs

@@ -108,7 +108,13 @@
                                         :margin-right 6}])
            [react/text {:style    styles/text
                         :on-press on-press-fn}
-            message]]))})))
+            (if (= message :mobile-network)
+              [react/text {}
+               (i18n/label :t/waiting-for-wifi) " "
+               [react/text
+                {:style {:text-decoration-line :underline}}
+                (i18n/label :t/waiting-for-wifi-change)]]
+              (i18n/label message))]]))})))
 
 (defview connectivity-view []
   (letsubs [status-properties [:connectivity/status-properties]

src/status_im/ui/components/lists/cell/view.cljs

@@ -3,18 +3,24 @@
             [status-im.ui.components.lists.cell.styles :as styles]
             [status-im.ui.components.icons.vector-icons :as icons]))
 
-(defn cell [{:keys [title details icon]
+(defn cell [{:keys [title details icon on-press]
              {:keys [title-color
                      icon-color
                      icon-background]} :style}]
   [react/view
    {:style styles/cell-container}
-   [react/view {:style styles/icon-container}
+   [react/touchable-highlight
-    [icons/icon icon (styles/icon icon-color icon-background)]]
+    {:style    styles/icon-container
+     :on-press on-press}
+    [react/view {}
+     [icons/icon icon (styles/icon icon-color icon-background)]]]
    [react/view {:style styles/description}
-    [react/view {:style styles/cell-text}
+    [react/touchable-highlight
+     {:style    styles/cell-text
+      :on-press on-press}
+     [react/view {}
       [react/text {:style (styles/item-title title-color)}
-      title]]
+       title]]]
     [react/view {:style styles/cell-text}
      [react/text {:style styles/item-details}
       details]]]])

src/status_im/ui/screens/mobile_network_settings/events.cljs

@@ -0,0 +1,100 @@
+(ns status-im.ui.screens.mobile-network-settings.events
+  (:require
+   [status-im.utils.handlers :as handlers]
+   [status-im.accounts.update.core :as accounts.update]
+   [status-im.utils.fx :as fx]
+   [status-im.ui.components.bottom-sheet.core :as bottom-sheet]
+   [status-im.accounts.db :as accounts.db]
+   [status-im.ui.screens.navigation :as navigation]
+   [status-im.mailserver.core :as mailserver]
+   [status-im.ui.screens.mobile-network-settings.utils :as utils]))
+
+(fx/defn sheet-defaults
+  [{:keys [db]}]
+  (let [remember-choice? (get-in db [:account/account :remember-syncing-choice?])]
+    {:db (assoc db :mobile-network/remember-choice? remember-choice?)}))
+
+(fx/defn on-network-status-change
+  [{:keys [db] :as cofx}]
+  (let [logged-in? (accounts.db/logged-in? cofx)
+        {:keys [remember-syncing-choice?]} (:account/account db)]
+    (apply
+     fx/merge
+     cofx
+     (cond
+       (and logged-in?
+            (utils/cellular? (:network/type db))
+            (not remember-syncing-choice?)
+            (not= :create-account (:view-id db)))
+
+       [(bottom-sheet/show-bottom-sheet
+         {:view :mobile-network})
+        (sheet-defaults)]
+
+       logged-in?
+       [(bottom-sheet/hide-bottom-sheet)]))))
+
+(defn apply-settings
+  ([sync?] (apply-settings sync? :default))
+  ([sync? remember?]
+   (fn [{:keys [db] :as cofx}]
+     (let [network (:network/type db)
+           remember-choice?
+           (if (not= :default remember?)
+             remember?
+             (:mobile-network/remember-choice? db))]
+       (fx/merge
+        cofx
+        (accounts.update/account-update
+         {:syncing-on-mobile-network? sync?
+          :remember-syncing-choice?   remember-choice?}
+         {})
+        (bottom-sheet/hide-bottom-sheet)
+        (when (and (utils/cellular? network) sync?)
+          (mailserver/process-next-messages-request)))))))
+
+(handlers/register-handler-fx
+ :mobile-network/continue-syncing
+ (apply-settings true))
+
+(handlers/register-handler-fx
+ :mobile-network/stop-syncing
+ (apply-settings false))
+
+(handlers/register-handler-fx
+ :mobile-network/set-syncing
+ (fn [{:keys [db] :as cofx} [_ syncing?]]
+   (let [{:keys [remember-syncing-choice?]} (:account/account db)]
+     ((apply-settings syncing? remember-syncing-choice?) cofx))))
+
+(handlers/register-handler-fx
+ :mobile-network/ask-on-mobile-network?
+ (fn [{:keys [db] :as cofx} [_ ask?]]
+   (let [{:keys [syncing-on-mobile-network?]} (:account/account db)]
+     ((apply-settings syncing-on-mobile-network? (not ask?)) cofx))))
+
+(handlers/register-handler-fx
+ :mobile-network/restore-defaults
+ (apply-settings false false))
+
+(handlers/register-handler-fx
+ :mobile-network/remember-choice?
+ (fn [{:keys [db]} [_ remember-choice?]]
+   {:db (assoc db :mobile-network/remember-choice? remember-choice?)}))
+
+(handlers/register-handler-fx
+ :mobile-network/navigate-to-settings
+ (fn [cofx]
+   (fx/merge
+    cofx
+    (bottom-sheet/hide-bottom-sheet)
+    (navigation/navigate-to-cofx :mobile-network-settings {}))))
+
+;;:mobile-network-offline
+
+(handlers/register-handler-fx
+ :mobile-network/show-offline-sheet
+ (fn [cofx]
+   (bottom-sheet/show-bottom-sheet
+    cofx
+    {:view :mobile-network-offline})))

src/status_im/ui/screens/mobile_network_settings/sheets.cljs

@@ -0,0 +1,92 @@
+(ns status-im.ui.screens.mobile-network-settings.sheets
+  (:require-macros [status-im.utils.views :as views])
+  (:require [status-im.ui.components.react :as react]
+            [status-im.ui.screens.mobile-network-settings.sheets-styles :as styles]
+            [status-im.ui.components.checkbox.view :as checkbox]
+            [status-im.i18n :as i18n]
+            [status-im.ui.components.lists.cell.view :as cell]
+            [re-frame.core :as re-frame]))
+
+(defn title [label]
+  [react/view {:style styles/title}
+   [react/text
+    {:style styles/title-text}
+    (i18n/label label)]])
+
+(defn details [label]
+  [react/view
+   {:style styles/details}
+   [react/text
+    {:style styles/details-text}
+    (i18n/label label)]])
+
+(defn separator []
+  [react/view {:style styles/separator}])
+
+(defn go-to-settings []
+  [react/view
+   {:style styles/go-to-settings-container}
+   [react/text
+    {:style styles/go-to-settings
+     :on-press #(re-frame/dispatch [:mobile-network/navigate-to-settings])}
+    (i18n/label :mobile-network-go-to-settings)]])
+
+(views/defview checkbox []
+  (views/letsubs
+    [checked? [:get :mobile-network/remember-choice?]]
+    [react/view
+     {:style styles/checkbox-line-container}
+     [checkbox/checkbox
+      {:checked?        checked?
+       :style           styles/checkbox
+       :icon-style      styles/checkbox-icon
+       :on-value-change #(re-frame/dispatch [:mobile-network/remember-choice? %])}]
+     [react/view
+      {:style styles/checkbox-text-container}
+      [react/text {:style styles/checkbox-text}
+       (i18n/label :mobile-network-sheet-remember-choice)]]]))
+
+(defn settings []
+  [react/view
+   {:style styles/settings-container}
+   [react/text
+    {:style    styles/settings-text
+     :on-press #(re-frame/dispatch [:mobile-network/navigate-to-settings])}
+    (i18n/label :mobile-network-sheet-configure)
+    [react/text {:style styles/settings-link}
+     (str " " (i18n/label :mobile-network-sheet-settings))]]])
+
+(views/defview settings-sheet []
+  [react/view {:style styles/container}
+   [title :mobile-syncing-sheet-title]
+   [details :mobile-syncing-sheet-details]
+   [cell/cell
+    {:title    (i18n/label :mobile-network-continue-syncing)
+     :details  (i18n/label :mobile-network-continue-syncing-details)
+     :icon     :main-icons/network
+     :style    styles/network-icon
+     :on-press #(re-frame/dispatch [:mobile-network/continue-syncing])}]
+   [cell/cell
+    {:title    (i18n/label :mobile-network-stop-syncing)
+     :details  (i18n/label :mobile-network-stop-syncing-details)
+     :icon     :main-icons/cancel
+     :style    styles/cancel-icon
+     :on-press #(re-frame/dispatch [:mobile-network/stop-syncing])}]
+   [separator]
+   [react/view {:flex       1
+                :align-self :stretch}
+    [checkbox]
+    [settings]]])
+
+(views/defview offline-sheet []
+  [react/view {:style styles/container}
+   [title :t/mobile-network-sheet-offline]
+   [details :t/mobile-network-sheet-offline-details]
+   [cell/cell
+    {:title    (i18n/label :mobile-network-start-syncing)
+     :details  (i18n/label :mobile-network-continue-syncing-details)
+     :icon     :main-icons/network
+     :style    styles/network-icon
+     :on-press #(re-frame/dispatch [:mobile-network/continue-syncing])}]
+   [separator]
+   [go-to-settings]])

src/status_im/ui/screens/mobile_network_settings/sheets_styles.cljs

@@ -0,0 +1,106 @@
+(ns status-im.ui.screens.mobile-network-settings.sheets-styles
+  (:require [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.styles :as common-styles]))
+
+(def container
+  {:flex        1
+   :align-items :center})
+
+(def title
+  {:height     21
+   :margin-top 8})
+
+(def title-text
+  (merge
+   common-styles/text-title-bold
+   {:color colors/black}))
+
+(def details
+  {:width         311
+   :margin-left   32
+   :margin-right  32
+   :margin-top    6
+   :margin-bottom 10})
+
+(def details-text
+  (merge
+   common-styles/text-main
+   {:color       colors/gray
+    :text-align  :center
+    :line-height 22}))
+
+(def network-icon
+  {:title-color     :blue
+   :icon-color      :blue
+   :icon-background :blue-light})
+
+(def cancel-icon
+  {:title-color     :red
+   :icon-color      :red
+   :icon-background :red-light})
+
+(def separator
+  {:background-color colors/gray-lighter
+   :margin-left      72
+   :align-self       :stretch
+   :height           1
+   :margin-top       8})
+
+(def checkbox-line-container
+  {:margin-left     71
+   :margin-top      13
+   :height          29
+   :flex-direction  :row
+   :justify-content :center})
+
+(def checkbox
+  {:padding         0
+   :justify-content :center
+   :align-items     :center
+   :width           18
+   :height          18
+   :border-radius   2
+   :margin-top      6})
+
+(def checkbox-icon
+  {:tint-color colors/white})
+
+(def checkbox-text-container
+  {:justify-content :center
+   :flex            1
+   :margin-left     13})
+
+(def checkbox-text
+  (merge
+   common-styles/text-main
+   {:color       colors/black
+    :line-height 19}))
+
+(def settings-container
+  {:margin-left 69
+   :height      44
+   :margin-top  6
+   :align-items :flex-start})
+
+(def settings-text
+  (merge
+   common-styles/text-main
+   {:color       colors/gray
+    :line-height 22}))
+
+(def settings-link
+  (merge
+   common-styles/text-main
+   {:color       colors/blue
+    :line-height 22}))
+
+(def go-to-settings-container
+  {:height          52
+   :margin-left     72
+   :justify-content :center
+   :align-self      :stretch})
+
+(def go-to-settings
+  (merge
+   common-styles/text-main
+   {:color colors/blue}))

src/status_im/ui/screens/mobile_network_settings/style.cljs

@@ -4,93 +4,36 @@
 
 (def container
   {:flex             1
-   :align-items :center})
+   :background-color colors/white})
 
-(def title
+(def switch-container
-  {:height     21
+  {:height           52
-   :margin-top 8})
+   :background-color colors/white})
-
-(def title-text
-  (merge
-   common-styles/text-title-bold
-   {:color colors/black}))
 
 (def details
-  {:height        66
+  {:margin-right     16
-   :width         311
+   :margin-left      16
-   :margin-left   32
+   :margin-top       8
-   :margin-right  32
+   :margin-bottom    16
-   :margin-top    6
+   :background-color colors/white})
-   :margin-bottom 10})
 
-(def details-text
+(def use-mobile-data-text
   (merge
    common-styles/text-main
    {:color       colors/gray
-    :text-align  :center
     :line-height 22}))
 
-(def network-icon
+(def settings-separator
-  {:title-color     :blue
+  {:align-self       :stretch
-   :icon-color      :blue
-   :icon-background :blue-light})
-
-(def cancel-icon
-  {:title-color     :red
-   :icon-color      :red
-   :icon-background :red-light})
-
-(def separator
-  {:background-color colors/gray-lighter
-   :margin-left      72
-   :align-self       :stretch
    :height           1
-   :margin-top       8})
+   :background-color colors/gray-lighter})
 
-(def checkbox-line-container
+(def defaults-container
-  {:margin-left    71
+  {:height          52
-   :margin-top     13
-   :height         29
-   :flex-direction :row
-   :justify-content :center})
-
-(def checkbox
-  {:padding         0
    :justify-content :center
-   :align-items     :center
+   :padding-left    16})
-   :width           18
-   :height          18
-   :border-radius   2
-   :margin-top      6})
 
-(def checkbox-icon
+(def defaults
-  {:tint-color colors/white})
-
-(def checkbox-text-container
-  {:justify-content  :center
-   :flex             1
-   :margin-left      13})
-
-(def checkbox-text
   (merge
    common-styles/text-main
-   {:color       colors/black
+   {:color colors/blue}))
-    :line-height 19}))
-
-(def settings-container
-  {:margin-left 69
-   :height      44
-   :margin-top  6
-   :align-items :flex-start})
-
-(def settings-text
-  (merge
-   common-styles/text-main
-   {:color       colors/gray
-    :line-height 22}))
-
-(def settings-link
-  (merge
-   common-styles/text-main
-   {:color       colors/blue
-    :line-height 22}))

src/status_im/ui/screens/mobile_network_settings/utils.cljs

@@ -0,0 +1,10 @@
+(ns status-im.ui.screens.mobile-network-settings.utils)
+
+(defn cellular? [network-type]
+  (= network-type "cellular"))
+
+(defn syncing-allowed? [{:keys [db]}]
+  (let [network (:network/type db)
+        {:keys [syncing-on-mobile-network?]} (:account/account db)]
+    (not (and (= network "cellular")
+              (not syncing-on-mobile-network?)))))

src/status_im/ui/screens/mobile_network_settings/view.cljs

@@ -2,66 +2,54 @@
   (:require-macros [status-im.utils.views :as views])
   (:require [status-im.ui.components.react :as react]
             [status-im.ui.screens.mobile-network-settings.style :as styles]
-            [status-im.ui.components.checkbox.view :as checkbox]
             [status-im.i18n :as i18n]
-            [reagent.core :as reagent]
+            [re-frame.core :as re-frame]
-            [status-im.ui.components.lists.cell.view :as cell]))
+            status-im.ui.screens.mobile-network-settings.events
+            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.components.status-bar.view :as status-bar]
+            [status-im.ui.screens.profile.components.views :as profile.components]
+            [status-im.utils.platform :as platform]
+            [status-im.ui.screens.mobile-network-settings.sheets :as sheets]))
 
-(defn title []
+(defn settings-separator []
-  [react/view {:style styles/title}
-   [react/text
-    {:style styles/title-text}
-    (i18n/label :mobile-syncing-sheet-title)]])
-
-(defn details []
   [react/view
-   {:style styles/details}
+   {:style styles/settings-separator}])
-   [react/text
-    {:style styles/details-text}
-    (i18n/label :mobile-syncing-sheet-details)]])
 
-(defn separator []
+(views/defview mobile-network-settings []
-  [react/view {:style styles/separator}])
+  (views/letsubs
-
+    [{:keys [syncing-on-mobile-network?
-(defn checkbox []
+             remember-syncing-choice?]}
-  (let [checked? (reagent/atom false)]
+     [:get :account/account]]
-    (fn []
-      [react/view
-       {:style styles/checkbox-line-container}
-       [checkbox/checkbox
-        {:checked?        @checked?
-         :style           styles/checkbox
-         :icon-style      styles/checkbox-icon
-         :on-value-change #(swap! checked? not)}]
-       [react/view
-        {:style styles/checkbox-text-container}
-        [react/text {:style styles/checkbox-text}
-         (i18n/label :mobile-network-sheet-remember-choice)]]])))
-
-(defn settings []
-  [react/view
-   {:style styles/settings-container}
-   [react/text {:style styles/settings-text}
-    (i18n/label :mobile-network-sheet-configure)
-    [react/text {:style styles/settings-link}
-     (str " " (i18n/label :mobile-network-sheet-settings))]]])
-
-(views/defview mobile-network-settings-sheet []
     [react/view {:style styles/container}
-   [title]
+     [status-bar/status-bar]
-   [details]
+     [toolbar/simple-toolbar (i18n/label :t/mobile-network-settings)]
-   [cell/cell
+     (when platform/ios?
-    {:title   (i18n/label :mobile-network-continue-syncing)
+       [settings-separator])
-     :details (i18n/label :mobile-network-continue-syncing-details)
+     [react/view {:style styles/switch-container}
-     :icon    :main-icons/network
+      [profile.components/settings-switch-item
-     :style   styles/network-icon}]
+       {:label-kw  :t/mobile-network-use-mobile
-   [cell/cell
+        :value     syncing-on-mobile-network?
-    {:title   (i18n/label :mobile-network-stop-syncing)
+        :action-fn #(re-frame/dispatch [:mobile-network/set-syncing %])}]]
-     :details (i18n/label :mobile-network-stop-syncing-details)
+     [react/view {:style styles/details}
-     :icon    :main-icons/cancel
+      [react/text {:style styles/use-mobile-data-text}
-     :style   styles/cancel-icon}]
+       (i18n/label :t/mobile-network-use-mobile-data)]]
-   [separator]
+     [react/view {:style styles/switch-container}
-   [react/view {:flex       1
+      [profile.components/settings-switch-item
-                :align-self :stretch}
+       {:label-kw  :t/mobile-network-ask-me
-    [checkbox]
+        :value     (not remember-syncing-choice?)
-    [settings]]])
+        :action-fn #(re-frame/dispatch [:mobile-network/ask-on-mobile-network? %])}]]
+     [settings-separator]
+     [react/view
+      {:style styles/defaults-container}
+      [react/text
+       {:style    styles/defaults
+        :on-press #(re-frame/dispatch [:mobile-network/restore-defaults])}
+       "Restore Defaults"]]]))
+
+(def settings-sheet
+  {:content-height 340
+   :content        sheets/settings-sheet})
+
+(def offline-sheet
+  {:content        sheets/offline-sheet
+   :content-height 180})

src/status_im/ui/screens/profile/user/views.cljs

@@ -121,6 +121,10 @@
      [profile.components/settings-item {:label-kw            :t/notifications
                                         :accessibility-label :notifications-button
                                         :action-fn           #(.openURL react/linking "app-settings://notification/status-im")}]
+     [profile.components/settings-item-separator]
+     [profile.components/settings-item {:label-kw            :t/mobile-network-settings
+                                        :accessibility-label :notifications-button
+                                        :action-fn            #(re-frame/dispatch [:navigate-to :mobile-network-settings])}]
      (when show-backup-seed?
        [profile.components/settings-item-separator])
      (when show-backup-seed?

src/status_im/ui/screens/views.cljs

@@ -343,6 +343,7 @@
                    :edit-extension             edit-extension
                    :show-extension             show-extension
                    :network-settings           network-settings
+                   :mobile-network-settings          mobile-network-settings/mobile-network-settings
                    :network-details            network-details
                    :edit-network               edit-network
                    :log-level-settings         log-level-settings
@@ -390,11 +391,13 @@
 (views/defview bottom-sheet []
   (views/letsubs [{:keys [show? view]} [:bottom-sheet]]
     (let [opts (cond-> {:show?     show?
-                        :on-cancel (fn [])}
+                        :on-cancel #(re-frame/dispatch [:bottom-sheet/hide])}
 
                  (= view :mobile-network)
-                 (merge {:content mobile-network-settings/mobile-network-settings-sheet
+                 (merge mobile-network-settings/settings-sheet)
-                         :content-height 340}))]
+
+                 (= view :mobile-network-offline)
+                 (merge mobile-network-settings/offline-sheet))]
       [bottom-sheet/bottom-sheet opts])))
 
 (defn main []

translations/en.json

@@ -923,10 +923,21 @@
     "mobile-syncing-sheet-title": "Sync using the mobile network",
     "mobile-syncing-sheet-details": "Status tends to use a lot of data when syncing chats. You can choose not to sync when on mobile network",
     "mobile-network-continue-syncing": "Continue syncing",
+    "mobile-network-start-syncing": "Start syncing",
     "mobile-network-continue-syncing-details": "You can change this later in settings",
     "mobile-network-stop-syncing": "Stop syncing",
     "mobile-network-stop-syncing-details": "Until connected to wi-fi?",
     "mobile-network-sheet-configure": "You can configure syncing in more \ndetail in",
     "mobile-network-sheet-settings": "settings",
-    "mobile-network-sheet-remember-choice": "Remember my choice"
+    "mobile-network-sheet-remember-choice": "Remember my choice",
+    "mobile-network-sheet-offline": "Offline, waiting for Wi-Fi",
+    "mobile-network-sheet-offline-details": "Syncing using mobile network is off",
+    "waiting-for-wifi": "History syncing offline, waiting for Wi-Fi.",
+    "waiting-for-wifi-change": "Change",
+    "mobile-network-settings": "Message syncing",
+    "mobile-network-use-mobile": "Use mobile data",
+    "mobile-network-use-mobile-details": "Status tends to use a lot of data when syncing chats. You can choose not to sync when on mobile network",
+    "mobile-network-ask-me": "Ask me when on mobile network",
+    "mobile-network-go-to-settings": "Go to settings",
+    "mobile-network-use-mobile-data": "Status tends to use a lot of data when syncing chats. You can choose not to sync when on mobile network"
 }