status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
angusiguess 2017-08-30 13:19:33 -03:00 committed by Oskar Thorén
parent 33f6ee39da
commit bc37283cb7
10 changed files with 102 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/icons/exclamation_mark.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 227 B

1
src/status_im/components/icons/vector_icons.cljs
View File

@ -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")

1
src/status_im/translations/en.cljs
View File

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

8
src/status_im/ui/screens/wallet/db.cljs
View File

@ -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.

23
src/status_im/ui/screens/wallet/events.cljs
View File

@ -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]]
(.log js/console "Unable to get balance: " err)))
(fn [db [_ 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)))

26
src/status_im/ui/screens/wallet/main/styles.cljs
View File

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

15
src/status_im/ui/screens/wallet/main/views.cljs
View File

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

4
src/status_im/ui/screens/wallet/subs.cljs
View File

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

2
test/cljs/status_im/test/runner.cljs
View File

@ -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

28
test/cljs/status_im/test/wallet/events.cljs Normal file
View File

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