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

Fixed incorrect wallet buttons styles 

Make wallet list show correct amount
Wallet name should be cut if too long
This commit is contained in:
Julien Eluard 2017-10-09 11:26:58 +02:00 committed by Roman Volosovskyi
parent 78d76292e1
commit fb10b580d4
16 changed files with 157 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/status_im/components/button/styles.cljs
View File

@ -36,16 +36,17 @@
(border position)))
(defnstyle button-text [disabled?]
{:font-size 15
:font-weight "normal"
{:font-weight :normal
:color styles/color-white
:padding-horizontal 16
:android (merge
{:padding-vertical 10
:letter-spacing 0.2}
{:font-size 14
:padding-vertical 10
:letter-spacing 0.5}
(when disabled? {:opacity 0.4}))
:ios (merge
{:padding-vertical 13
{:font-size 15
:padding-vertical 9
:letter-spacing -0.2}
(when disabled? {:opacity 0.6}))})

12
src/status_im/components/toolbar_new/styles.cljs
View File

@ -9,14 +9,18 @@
(def toolbar-icon-height 24)
(def toolbar-icon-spacing 24)
;; TODO remove when toolbar will be replaced by toolbar2
(defn toolbar-wrapper [background-color flat?]
{:background-color (or background-color toolbar-background1)
:elevation (if flat? 0 2)})
(defstyle toolbar
{:flex-direction :row
(defnstyle toolbar [background-color flat?]
{:flex 0
:flex-direction :row
:align-items :center
:justify-content :space-between
:background-color (or background-color toolbar-background1)
:elevation (if flat? 0 2)
:android {:height 55}
:ios {:height 56}})
@ -47,7 +51,9 @@
(def toolbar-border
(get-in p/platform-specific [:component-styles :toolbar-border]))
(def toolbar-actions {:flex-direction :row})
(def toolbar-actions
{:flex 0
:flex-direction :row})
(defn toolbar-actions-container [actions-count custom]
(merge {:flex-direction :row}

6
src/status_im/components/toolbar_new/view.cljs
View File

@ -102,8 +102,10 @@
nav-item
content-item
action-items]
[rn/view {:style (merge (tst/toolbar-wrapper background-color flat?) style)}
[rn/view {:style tst/toolbar}
;; TODO remove extra view wen we remove sync-state-gradient
[rn/view
[rn/view {:style (merge (tst/toolbar background-color flat?) style)}
;; On iOS title must be centered. Current solution is a workaround and eventually this will be sorted out using flex
(when platform/ios?
[rn/view tst/ios-content-item
content-item])

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

@ -373,7 +373,9 @@
:request-transaction "Request Transaction"
:send-request "Send request"
:share "Share"
:eth "ETH"
:currency "Currency"
:usd-currency "USD"
:transactions "Transactions"
:transaction-details "Transaction details"
:transactions-sign "Sign"

1
src/status_im/ui/screens/subs.cljs
View File

@ -12,6 +12,7 @@
status-im.ui.screens.wallet.transactions.subs
status-im.ui.screens.wallet.send.subs
status-im.ui.screens.wallet.request.subs
status-im.ui.screens.wallet.wallet-list.subs
status-im.ui.screens.network-settings.subs
status-im.bots.subs))

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

@ -1,9 +1,10 @@
(ns status-im.ui.screens.wallet.db
(:require [cljs.spec.alpha :as spec]
(:require [clojure.string :as string]
[cljs.spec.alpha :as spec]
[status-im.i18n :as i18n]
status-im.ui.screens.wallet.request.db
status-im.ui.screens.wallet.send.db
[status-im.i18n :as i18n]
[clojure.string :as string]))
[status-im.utils.money :as money]))
;; (angusiguess) If we add more error types we can treat them as 'one-of' the following
(spec/def :wallet/error #{:error})
@ -20,22 +21,19 @@
;; TODO(oskarth): spec for balance as BigNumber
;; TODO(oskarth): Spec for prices as as: {:from ETH, :to USD, :price 290.11, :last-day 304.17}
(defn get-amount-validation-error [amount web3]
(let [amount' (string/replace amount #"," ".")
amount-splited (string/split amount' #"[.]")]
(defn- empty-amount? [amount]
(or (nil? amount) (= amount "") (= amount "0") (re-matches #"0[,.]0*$" amount)))
(defn- too-precise-amount? [amount]
(let [amount-splited (string/split amount #"[.]")]
(and (= (count amount-splited) 2) (> (count (last amount-splited)) 18))))
(defn get-amount-validation-error [amount]
(when-not (empty-amount? amount)
(let [normalized-amount (money/normalize amount)]
(cond
(or (nil? amount) (= amount "") (re-matches #"0[,.]0*$" amount))
nil
(= amount "0")
(i18n/label :t/validation-amount-invalid)
(or (js/isNaN (js/parseFloat amount'))
(try (when (<= (.toWei web3 amount' "ether") 0) true)
(catch :default err true)))
(not (money/valid? normalized-amount))
(i18n/label :t/validation-amount-invalid-number)
(and (= (count amount-splited) 2) (> (count (last amount-splited)) 18))
(i18n/label :t/validation-amount-is-too-precise)
:else nil)))
(too-precise-amount? normalized-amount)
(i18n/label :t/validation-amount-is-too-precise)))))

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

@ -23,13 +23,12 @@
;; Toolbar
(def toolbar-title-container
{:flex-direction :row
:padding-left 24})
{:flex-direction :row})
(def toolbar-title-text
{:color styles/color-white
:font-size 17
:margin-right 4})
{:flex -1
:color styles/color-white
:font-size 17})
(def toolbar-icon
{:width 24
@ -107,7 +106,10 @@
(defstyle main-button-text
{:padding-vertical 13
:padding-horizontal nil
:android {:letter-spacing 0.46}})
:android {:font-size 13
:letter-spacing 0.46}
:ios {:font-size 15
:letter-spacing -0.2}})
;; Assets section

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

@ -28,7 +28,8 @@
[react/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list])}
[react/view {:style styles/toolbar-title-container}
[react/text {:style styles/toolbar-title-text
:font :toolbar-title}
:font :toolbar-title
:number-of-lines 1}
(i18n/label :t/main-wallet)]
[vi/icon
:icons/dropdown
@ -68,18 +69,19 @@
[react/view {:style styles/total-balance-container}
[react/view {:style styles/total-balance}
[react/text {:style styles/total-balance-value} usd-value]
[react/text {:style styles/total-balance-currency} "USD"]]
[react/text {:style styles/total-balance-currency} (i18n/label :t/usd-currency)]]
[react/view {:style styles/value-variation}
[react/text {:style styles/value-variation-title}
(i18n/label :t/wallet-total-value)]
[change-display change]]
[react/view {:style (merge button.styles/buttons-container styles/buttons) :button-text-style styles/main-button-text}
[react/view {:style (merge button.styles/buttons-container styles/buttons)}
[btn/button {:on-press #(rf/dispatch [:navigate-to :wallet-send-transaction])
:style (button.styles/button-bar :first)}
: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]) :style (button.styles/button-bar :other)}
[btn/button {: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)}
[btn/button {:disabled? true :style (button.styles/button-bar :last) :text-style styles/main-button-text}
(i18n/label :t/wallet-exchange)]]]])
(defn- token->image [id]

4
src/status_im/ui/screens/wallet/request/events.cljs
View File

@ -14,7 +14,7 @@
(handlers/register-handler-fx
:wallet-validate-request-amount
(fn [{{:keys [web3] :wallet/keys [request-transaction] :as db} :db} _]
(fn [{{:wallet/keys [request-transaction] :as db} :db} _]
(let [amount (:amount request-transaction)
error (wallet.db/get-amount-validation-error amount web3)]
error (wallet.db/get-amount-validation-error amount)]
{:db (assoc-in db [:wallet/request-transaction :amount-error] error)})))

12
src/status_im/ui/screens/wallet/send/events.cljs
View File

@ -34,8 +34,8 @@
(handlers/register-handler-fx
:wallet/set-and-validate-amount
(fn [{{:keys [web3] :wallet/keys [send-transaction] :as db} :db} [_ amount]]
(let [error (wallet.db/get-amount-validation-error amount web3)]
(fn [{{:wallet/keys [send-transaction] :as db} :db} [_ amount]]
(let [error (wallet.db/get-amount-validation-error amount)]
{:db (-> db
(assoc-in [:wallet/send-transaction :amount] amount)
(assoc-in [:wallet/send-transaction :amount-error] error))})))
@ -95,8 +95,7 @@
(fn [{{:keys [web3]
:wallet/keys [send-transaction]
:accounts/keys [accounts current-account-id] :as db} :db} [_ later?]]
(let [{:keys [amount transaction-id password]} send-transaction
amount-in-wei (money/to-wei (string/replace amount #"," "."))]
(let [{:keys [amount transaction-id password]} send-transaction]
(if transaction-id
{::accept-transaction {:id transaction-id
:password password
@ -109,15 +108,14 @@
::send-transaction {:web3 web3
:from (get-in accounts [current-account-id :address])
:to (:to-address send-transaction)
:value amount-in-wei}}))))
:value (money/to-wei (money/normalize amount))}}))))
(handlers/register-handler-fx
:wallet/sign-transaction-modal
(fn [{{:keys [web3]
:wallet/keys [send-transaction]
:accounts/keys [accounts current-account-id] :as db} :db} [_ later?]]
(let [{:keys [amount transaction-id password]} send-transaction
amount' (money/to-wei (string/replace amount #"," "."))]
(let [{:keys [transaction-id password]} send-transaction]
{:db (assoc-in db [:wallet/send-transaction :in-progress?] true)
::accept-transaction {:id transaction-id
:password password

10
src/status_im/ui/screens/wallet/send/views.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.ui.screens.wallet.send.views
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [clojure.string :as string]
[re-frame.core :as re-frame]
(:require [re-frame.core :as re-frame]
[status-im.components.animation :as animation]
[status-im.components.icons.vector-icons :as vector-icons]
[status-im.components.react :as react]
@ -93,8 +92,8 @@
[components/button-text (i18n/label :t/transactions-sign-transaction)]
[vector-icons/icon :icons/forward {:color :white :container-style wallet.styles/forward-icon-container}]]]]))
(defn- sufficient-funds? [amount balance]
(<= amount (money/wei->ether balance)))
(defn- sufficient-funds? [amount-in-eth balance]
(<= (money/str->float amount-in-eth) (money/wei->ether balance)))
(defn request-camera-permissions []
(when platform/android?
@ -131,8 +130,7 @@
(when-not sufficient-funds? (i18n/label :t/wallet-insufficient-funds)))
:input-options {:auto-focus true
:default-value amount
:on-change-text #(let [value (string/trim %)]
(re-frame/dispatch [:wallet/set-and-validate-amount value]))}}]
:on-change-text #(re-frame/dispatch [:wallet/set-and-validate-amount %])}}]
[react/view wallet.styles/choose-currency-container
[components/choose-currency wallet.styles/choose-currency]]]]]
[components/separator]

6
src/status_im/ui/screens/wallet/wallet_list/styles.cljs
View File

@ -41,18 +41,20 @@
;; List item ;;
;;;;;;;;;;;;;;;
(defnstyle wallet-item [color]
(defstyle wallet-item
{:flex 1
:flex-direction :row
:align-items :center
:padding 16
:background-color (get wallet-colors color)
:margin-bottom 12
:android {:border-radius 4
:padding-right 12}
:ios {:border-radius 8
:padding-right 8}})
(def active-wallet-item
{:background-color (get wallet-colors :blue-1)})
(def wallet-info
{:flex-grow 1})

13
src/status_im/ui/screens/wallet/wallet_list/subs.cljs Normal file
View File

@ -0,0 +1,13 @@
(ns status-im.ui.screens.wallet.wallet-list.subs
(:require [re-frame.core :as re-frame]))
;; TODO(jeluard) update when adding multiple wallet support. This will probably require changes to app-db
(re-frame/reg-sub
:wallet.list/all
:<- [:portfolio-value]
(fn [portfolio-value]
[{:name "Main wallet"
:assets []
:amount portfolio-value
:active? true}]))

66
src/status_im/ui/screens/wallet/wallet_list/views.cljs
View File

@ -1,59 +1,51 @@
(ns status-im.ui.screens.wallet.wallet-list.views
(:require-macros [status-im.utils.views :refer [defview]])
(:require [clojure.string :as string]
[re-frame.core :as rf]
[re-frame.core :as re-frame]
[status-im.components.list.views :as list]
[status-im.components.react :as rn]
[status-im.components.react :as react]
[status-im.components.status-bar :as status-bar]
[status-im.components.toolbar-new.view :as toolbar]
[status-im.components.toolbar-new.actions :as act]
[status-im.components.toolbar-new.actions :as actions]
[status-im.i18n :as i18n]
[status-im.ui.screens.wallet.wallet-list.styles :as st]
[status-im.utils.utils :as utils]
[status-im.utils.platform :as platform]))
[status-im.ui.screens.wallet.wallet-list.styles :as styles]
[status-im.utils.utils :as utils]))
(defn toolbar-view [transactions]
[toolbar/toolbar2 {:style st/toolbar}
[toolbar/nav-clear-text (i18n/label :t/done) #(rf/dispatch [:navigate-back])]
(defn- toolbar-view [transactions]
[toolbar/toolbar2 {:style styles/toolbar}
[toolbar/nav-clear-text (i18n/label :t/done) #(re-frame/dispatch [:navigate-back])]
[toolbar/content-title (i18n/label :t/wallets)]
[toolbar/actions
[(act/add-wallet #(utils/show-popup "TODO" "Not implemented!"))]]])
[(actions/add-wallet #(utils/show-popup "TODO" "Not implemented!"))]]])
(defn- select-wallet []
(utils/show-popup "TODO" "Not implemented!"))
(defn wallet-list-item [{:keys [name currency amount assets color]}]
(let [asset-list (string/join " " assets)]
[rn/touchable-highlight {:on-press select-wallet}
[rn/view {:style (st/wallet-item (keyword color))}
[rn/view {:style st/wallet-info}
[rn/text {:style st/wallet-name} name]
[rn/view {:style st/total-balance}
[rn/text {:style st/total-balance-value} amount]
[rn/text {:style st/total-balance-currency} currency]]
[rn/text {:style st/asset-list} asset-list]]
[rn/icon :forward_gray st/select-wallet-icon]]]))
(defn- wallet-list-item [{:keys [name amount assets active?]}]
(let [asset-list (string/join " " (concat [(i18n/label :t/eth)] assets))]
[react/touchable-highlight {:on-press select-wallet}
[react/view {:style (merge styles/wallet-item (if active? styles/active-wallet-item))}
[react/view {:style styles/wallet-info}
[react/text {:style styles/wallet-name} name]
[react/view {:style styles/total-balance}
[react/text {:style styles/total-balance-value} amount]
[react/text {:style styles/total-balance-currency} (i18n/label :t/usd-currency)]]
[react/text {:style styles/asset-list} asset-list]]
[react/icon :forward_gray styles/select-wallet-icon]]]))
(def dummy-wallet-data
[{:name "Main wallet"
:currency "USD"
:amount 0
:assets []
:color "blue-1"}])
;; TODO hook real data
(defn wallet-list []
[rn/scroll-view {:style st/wallet-list-screen}
[rn/text {:style st/wallet-list-title} (i18n/label :t/your-wallets)]
[list/flat-list {:data dummy-wallet-data
(defview wallet-list []
(letsubs [wallets [:wallet.list/all]]
[react/scroll-view {:style styles/wallet-list-screen}
[react/text {:style styles/wallet-list-title}
(i18n/label :t/your-wallets)]
[list/flat-list {:data wallets
:render-fn wallet-list-item
:style st/wallet-list
:scrollEnabled false}]])
:style styles/wallet-list
:scrollEnabled false}]]))
(defview wallet-list-screen []
[]
[rn/view {:style st/screen-container}
[react/view {:style styles/screen-container}
[status-bar/status-bar]
[toolbar-view]
[wallet-list]])

20
src/status_im/utils/money.cljs
View File

@ -1,6 +1,6 @@
(ns status-im.utils.money
(:require [status-im.js-dependencies :as dependencies]
[clojure.string :as string]))
(:require [clojure.string :as string]
[status-im.js-dependencies :as dependencies]))
;; The BigNumber version included in web3 sometimes hangs when dividing large
;; numbers Hence we want to use these functions instead of fromWei etc, which
@ -20,9 +20,25 @@
;; matters:
;; (str 111122223333441239) => "111122223333441230"
(defn normalize
"A normalized string representation of an amount"
[str]
{:pre [(or (nil? str) (string? str))]}
(when str
(string/replace (string/trim str) #"," ".")))
(defn bignumber [n]
(dependencies/Web3.prototype.toBigNumber (str n)))
(defn str->float [str]
(when str
(.toNumber (bignumber (normalize str)))))
(defn valid? [str]
(try (> (str->float str) 0)
(catch :default err false)))
(defn to-wei [str]
(dependencies/Web3.prototype.toWei str "ether"))

20
test/cljs/status_im/test/utils/money.cljs
View File

@ -10,3 +10,23 @@
(is (= (str (money/wei->ether "111122223333441239"))
"0.111122223333441239"))))
(deftest valid?
(is (false? (money/valid? nil)))
(is (false? (money/valid? "a")))
(is (false? (money/valid? "-1")))
(is (false? (money/valid? "1a")))
(is (true? (money/valid? "1")))
(is (true? (money/valid? "1.1")))
(is (true? (money/valid? "1,1"))))
(deftest normalize
(is (= nil (money/normalize nil)))
(is (= "1" (money/normalize " 1 ")))
(is (= "1.1" (money/normalize "1.1")))
(is (= "1.1" (money/normalize "1,1"))))
(deftest str->float
(is (= nil (money/str->float nil)))
(is (= 1 (money/str->float " 1 ")))
(is (= 1.1 (money/str->float "1.1")))
(is (= 1.1 (money/str->float "1,1"))))