show warning when app is syncing

src/status_im/ui/screens/subs.cljs

@@ -53,3 +53,8 @@
 (reg-sub :sync-state
   (fn [db]
     (:sync-state db)))
+
+(reg-sub :syncing?
+  :<- [:sync-state]
+  (fn [sync-state]
+    (= sync-state :syncing)))

src/status_im/ui/screens/wallet/main/views.cljs

@@ -62,10 +62,12 @@
         (str (when pos-change? "+") change "%")
         "-%")]]))
 
-(defn main-section [usd-value change error-message]
+(defn main-section [usd-value change syncing? error-message]
   [react/view {:style styles/main-section}
-   (when error-message
+   (if syncing?
-     [wallet.views/error-message-view styles/error-container styles/error-message])
+     [wallet.views/wallet-syncing styles/error-container styles/error-message]
+     (when error-message
+       [wallet.views/error-message-view styles/error-container styles/error-message]))
    [react/view {:style styles/total-balance-container}
     [react/view {:style styles/total-balance}
      [react/text {:style styles/total-balance-value} usd-value]
@@ -75,10 +77,12 @@
       (i18n/label :t/wallet-total-value)]
      [change-display change]]
     [react/view {:style (merge button.styles/buttons-container styles/buttons)}
-     [btn/button {:on-press #(rf/dispatch [:navigate-to :wallet-send-transaction])
+     [btn/button {:disabled? syncing?
+                  :on-press #(rf/dispatch [:navigate-to :wallet-send-transaction])
                   :style    (button.styles/button-bar :first) :text-style styles/main-button-text}
       (i18n/label :t/wallet-send)]
-     [btn/button {:on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])
+     [btn/button {:disabled? syncing?
+                  :on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])
                   :style (button.styles/button-bar :other) :text-style styles/main-button-text}
       (i18n/label :t/wallet-request)]
      [btn/button {:disabled? true :style (button.styles/button-bar :last) :text-style styles/main-button-text}
@@ -141,10 +145,11 @@
             portfolio-value  [:portfolio-value]
             portfolio-change [:portfolio-change]
             prices-loading?  [:prices-loading?]
+            syncing?        [:syncing?]
             balance-loading? [:wallet/balance-loading?]
             error-message    [:wallet/error-message?]]
     [react/view {:style wallet.styles/wallet-container}
      [toolbar-view]
      [react/view components.styles/flex
-      [main-section portfolio-value portfolio-change error-message]
+      [main-section portfolio-value portfolio-change syncing? error-message]
       [asset-section balance prices-loading? balance-loading?]]]))

src/status_im/ui/screens/wallet/styles.cljs

@@ -1,5 +1,5 @@
 (ns status-im.ui.screens.wallet.styles
-  (:require-macros [status-im.utils.styles :refer [defstyle]])
+  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
   (:require [status-im.components.styles :as styles]))
 
 ;; errors
@@ -12,8 +12,8 @@
    :android        {:padding-top    10
                     :padding-bottom 10}})
 
-(def error-exclamation
+(defnstyle exclamation [color]
-  {:background-color styles/color-red-2
+  {:background-color color
    :border-radius    100
    :width            16
    :height           16
@@ -21,6 +21,11 @@
    :margin-right     6
    :margin-top       2})
 
+(def error-exclamation
+  (exclamation styles/color-red-2))
+
+(def warning-exclamation
+  (exclamation :gold))
 
 ;; wallet
 
@@ -44,11 +49,10 @@
   {:margin-left 8})
 
 (defn button-container [enabled?]
-  (merge
+  (merge {:flex-direction :row
-    {:flex-direction :row
+          :align-items    :center}
-     :align-items    :center}
+         (when-not enabled?
-    (when-not enabled?
+           {:opacity 0.4})))
-      {:opacity 0.4})))
 
 (def wallet-modal-container
   {:flex             1

src/status_im/ui/screens/wallet/views.cljs

@@ -4,9 +4,15 @@
             [status-im.components.icons.vector-icons :as vector-icons]
             [status-im.i18n :as i18n]))
 
-(defn error-message-view [error-container-style error-message-style]
+(defn message-view [error-container-style error-message-style icon-container-style label]
   [react/view {:style error-container-style}
    [react/view {:style styles/error-container}
     [vector-icons/icon :icons/exclamation_mark {:color           :white
-                                                :container-style styles/error-exclamation}]
+                                                :container-style icon-container-style}]
-    [react/text {:style error-message-style} (i18n/label :t/wallet-error)]]])
+    [react/text {:style error-message-style} label]]])
+
+(defn error-message-view [error-container-style error-message-style]
+  [message-view error-container-style error-message-style styles/error-exclamation (i18n/label :t/wallet-error)])
+
+(defn wallet-syncing [error-container-style error-message-style]
+  [message-view error-container-style error-message-style styles/warning-exclamation (i18n/label :t/sync-in-progress)])