diff --git a/src/status_im/ui/screens/subs.cljs b/src/status_im/ui/screens/subs.cljs index 5b02c6d1f7..8862ba4294 100644 --- a/src/status_im/ui/screens/subs.cljs +++ b/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))) diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index 448b754699..58a1e5808c 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/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 - [wallet.views/error-message-view styles/error-container styles/error-message]) + (if syncing? + [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?]]])) diff --git a/src/status_im/ui/screens/wallet/styles.cljs b/src/status_im/ui/screens/wallet/styles.cljs index 0423d23865..ce8ac371c3 100644 --- a/src/status_im/ui/screens/wallet/styles.cljs +++ b/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 - {:background-color styles/color-red-2 +(defnstyle exclamation [color] + {: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 - {:flex-direction :row - :align-items :center} - (when-not enabled? - {:opacity 0.4}))) + (merge {:flex-direction :row + :align-items :center} + (when-not enabled? + {:opacity 0.4}))) (def wallet-modal-container {:flex 1 diff --git a/src/status_im/ui/screens/wallet/views.cljs b/src/status_im/ui/screens/wallet/views.cljs index e0de6c785a..ce8550346a 100644 --- a/src/status_im/ui/screens/wallet/views.cljs +++ b/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}] - [react/text {:style error-message-style} (i18n/label :t/wallet-error)]]]) + :container-style icon-container-style}] + [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)])