Add wallet error message.

- Add wallet key to db
- Add sub for wallet error messages
- Add event handlers to set wallet values
- Cover the above with tests

Oh and add the tests

Add error view

Add exclamation mark, style error message, add message to view

Remove commented styling

Localise wallet error

Add translation

- Add an english translation for the error message
- Change error representation in db to a keyword
- Update handlers to set and clear keywords

Constrain spec, make view conditional

- The spec for error messages now takes a predefined set.
- Error message only pops on error

Fix test

Align maps

Reduce event chain size, move logging to timbre

resources/icons/exclamation_mark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16">
+    <path fill="#FFF" fill-rule="evenodd" d="M8 8.5a1 1 0 0 1-1-1v-2a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1zm0 3a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+</svg>

src/status_im/components/icons/vector_icons.cljs

@@ -45,6 +45,7 @@
             :icons/close               (slurp-svg "./resources/icons/close.svg")
             :icons/dots_horizontal     (slurp-svg "./resources/icons/dots_horizontal.svg")
             :icons/dots_vertical       (slurp-svg "./resources/icons/dots_vertical.svg")
+            :icons/exclamation_mark    (slurp-svg "./resources/icons/exclamation_mark.svg")
             :icons/forward             (slurp-svg "./resources/icons/forward.svg")
             :icons/fullscreen          (slurp-svg "./resources/icons/fullscreen.svg")
             :icons/group_big           (slurp-svg "./resources/icons/group_big.svg")

src/status_im/translations/en.cljs

@@ -335,6 +335,7 @@
    :wallets                               "Wallets"
    :your-wallets                          "Your wallets"
    :main-wallet                           "Main Wallet"
+   :wallet-error                          "Error Loading Data"
    :wallet-send                           "Send"
    :wallet-request                        "Request"
    :wallet-exchange                       "Exchange"

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

@@ -1,4 +1,10 @@
-(ns status-im.ui.screens.wallet.db)
+(ns status-im.ui.screens.wallet.db
+  (:require [cljs.spec.alpha :as spec]))
+
+;; (angusiguess) If we add more error types we can treat them as 'one-of' the following
+(spec/def :wallet/error #{:error})
+
+(spec/def :wallet/wallet (spec/keys :opt [:wallet/error]))
 
 ;; Placeholder namespace for wallet specs, which are a WIP depending on data
 ;; model we decide on for balances, prices, etc.

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

@@ -3,7 +3,8 @@
             [status-im.utils.handlers :as handlers]
             [status-im.utils.prices :as prices]
             [status-im.ui.screens.wallet.db :as wallet.db]
-            [status-im.components.status :as status]))
+            [status-im.components.status :as status]
+            [taoensso.timbre :as log]))
 
 (defn get-balance [{:keys [web3 account-id on-success on-error]}]
   (if (and web3 account-id)
@@ -57,6 +58,14 @@
      :dispatch    [:load-prices]
      :db (assoc-in db [:wallet :transactions] wallet.db/dummy-transaction-data)}))
 
+(defn set-error-message [db err]
+  (assoc-in db [:wallet :wallet/error] err))
+
+(handlers/register-handler-db
+ :wallet/clear-error-message
+ (fn [db [_]]
+   (update db :wallet dissoc :wallet/error)))
+
 (handlers/register-handler-db
   :update-balance
   (fn [db [_ balance]]
@@ -67,12 +76,14 @@
   (fn [db [_ prices]]
     (assoc db :prices prices)))
 
-(handlers/register-handler-fx
+(handlers/register-handler-db
   :update-balance-fail
-  (fn [_ [_ err]]
+  (fn [db [_ err]]
-    (.log js/console "Unable to get balance: " err)))
+    (log/debug "Unable to get balance: " err)
+    (set-error-message db :error)))
 
-(handlers/register-handler-fx
+(handlers/register-handler-db
   :update-prices-fail
   (fn [_ [_ err]]
-    (.log js/console "Unable to get prices: " err)))
+    (log/debug "Unable to get prices: " err)
+    (set-error-message db :error)))

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

@@ -7,6 +7,32 @@
   {:flex             1
    :background-color common/color-white})
 
+(def wallet-error-container
+  {:align-self       :center
+   :justify-content  :center
+   :border-radius    20
+   :flex-direction   :row
+   :background-color common/color-blue5})
+
+(def wallet-exclamation-container
+  {:background-color common/color-red2
+   :justify-content  :center
+   :margin-top       5
+   :margin-left      10
+   :margin-right     7
+   :margin-bottom    5
+   :border-radius    100})
+
+(defstyle wallet-error-exclamation
+  {:width  16
+   :height 16})
+
+(def wallet-error-message
+  {:color         common/color-white
+   :padding-top   3
+   :padding-right 10
+   :font-size     13})
+
 (def toolbar
   {:background-color common/color-blue5
    :elevation        0})

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

@@ -48,9 +48,17 @@
                     :custom-content [toolbar-title]
                     :custom-action  [toolbar-buttons]}])
 
+(defn error-message-view [error-message]
+  [rn/view {:style st/wallet-error-container}
+   [rn/view {:style st/wallet-exclamation-container}
+    [vi/icon :icons/exclamation_mark {:color           :white
+                                      :container-style st/wallet-error-exclamation}]]
+   [rn/text {:style st/wallet-error-message} (i18n/label :t/wallet-error)]])
+
 ;; TODO(oskarth): Whatever triggers the "in progress" animation should also trigger wallet-init or load-prices event.
-(defn main-section [usd-value change]
+(defn main-section [usd-value change error-message]
   [rn/view {:style st/main-section}
+   (when error-message [error-message-view error-message])
    [rn/view {:style st/total-balance-container}
     [rn/view {:style st/total-balance}
      [rn/text {:style st/total-balance-value} usd-value]
@@ -91,9 +99,10 @@
 (defview wallet []
   (letsubs [eth-balance [:eth-balance]
             portfolio-value [:portfolio-value]
-            portfolio-change [:portfolio-change]]
+            portfolio-change [:portfolio-change]
+            error-message [:wallet/error-message]]
     [rn/view {:style st/wallet-container}
      [toolbar-view]
      [rn/scroll-view
-      [main-section portfolio-value portfolio-change]
+      [main-section portfolio-value portfolio-change error-message]
       [asset-section eth-balance]]]))

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

@@ -14,6 +14,10 @@
   (fn [db]
     (get-in db [:prices :last-day])))
 
+(reg-sub :wallet/error-message
+  (fn [db]
+    (get-in db [:wallet :wallet/error])))
+
 (reg-sub :eth-balance
   :<- [:balance]
   (fn [balance]

test/cljs/status_im/test/runner.cljs

@@ -2,6 +2,7 @@
   (:require [doo.runner :refer-macros [doo-tests]]
             [status-im.test.contacts.events]
             [status-im.test.accounts.events]
+            [status-im.test.wallet.events]
             [status-im.test.profile.events]
             [status-im.test.chat.models.input]
             [status-im.test.components.main-tabs]
@@ -26,6 +27,7 @@
   'status-im.test.accounts.events
   'status-im.test.contacts.events
   'status-im.test.profile.events
+  'status-im.test.wallet.events
   'status-im.test.chat.models.input
   'status-im.test.components.main-tabs
   'status-im.test.handlers

test/cljs/status_im/test/wallet/events.cljs

@@ -0,0 +1,28 @@
+(ns status-im.test.wallet.events
+  (:require [cljs.test :refer [deftest is testing]]
+            reagent.core
+            [re-frame.core :as re-frame]
+            [day8.re-frame.test :refer [run-test-sync]]
+            status-im.ui.screens.db
+            status-im.ui.screens.subs
+            [status-im.ui.screens.events :as events]
+            [status-im.ui.screens.wallet.events :as wallet-events]))
+
+(deftest wallet-events
+  "update-balance-fail
+   update-prices-fail
+   clear-error"
+  (run-test-sync
+   (re-frame/reg-fx ::events/init-store #())
+   (re-frame/dispatch [:initialize-db])
+   (let [error (re-frame/subscribe [:wallet/error-message])
+         message :error]
+     (re-frame/dispatch [:update-balance-fail message])
+     (is (= message @error)))
+   (let [error (re-frame/subscribe [:wallet/error-message])
+         message :error]
+     (re-frame/dispatch [:update-prices-fail message])
+     (is (= message @error)))
+   (let [error (re-frame/subscribe [:wallet/error-message])]
+     (re-frame/dispatch [:wallet/clear-error-message])
+     (is (nil? @error)))))