Fixed incorrect wallet buttons styles

Make wallet list show correct amount
Wallet name should be cut if too long

src/status_im/components/button/styles.cljs

@@ -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
+                         {:font-size          14
-                          :letter-spacing     0.2}
+                          :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}))})
 

src/status_im/components/toolbar_new/styles.cljs

@@ -9,16 +9,20 @@
 (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
+(defnstyle toolbar [background-color flat?]
-  {:flex-direction     :row
+  {:flex             0
-   :align-items        :center
+   :flex-direction   :row
-   :justify-content    :space-between
+   :align-items      :center
-   :android            {:height 55}
+   :justify-content  :space-between
-   :ios                {:height 56}})
+   :background-color (or background-color toolbar-background1)
+   :elevation        (if flat? 0 2)
+   :android          {:height 55}
+   :ios              {:height 56}})
 
 (defnstyle toolbar-nav-actions-container
   [actions]
@@ -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}

src/status_im/components/toolbar_new/view.cljs

@@ -18,7 +18,7 @@
    (merge {:on-press handler}
           (when accessibility-label
             {:accessibility-label accessibility-label}))
-   [rn/view{:style style}
+   [rn/view {:style style}
     item]])
 
 (defn nav-button
@@ -102,8 +102,10 @@
     nav-item
     content-item
     action-items]
-   [rn/view {:style (merge (tst/toolbar-wrapper background-color flat?) style)}
+   ;; TODO remove extra view wen we remove sync-state-gradient
-    [rn/view {:style tst/toolbar}
+   [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])

src/status_im/translations/en.cljs

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

src/status_im/ui/screens/subs.cljs

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

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

@@ -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]
+            [status-im.utils.money :as money]))
-            [clojure.string :as string]))
 
 ;; (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]
+(defn- empty-amount? [amount]
-  (let [amount' (string/replace amount #"," ".")
+  (or (nil? amount) (= amount "") (= amount "0") (re-matches #"0[,.]0*$" amount)))
-        amount-splited (string/split amount' #"[.]")]
-    (cond
-      (or (nil? amount) (= amount "") (re-matches #"0[,.]0*$" amount))
-      nil
 
-      (= amount "0")
+(defn- too-precise-amount? [amount]
-      (i18n/label :t/validation-amount-invalid)
+  (let [amount-splited (string/split amount #"[.]")]
+    (and (= (count amount-splited) 2) (> (count (last amount-splited)) 18))))
 
-      (or (js/isNaN (js/parseFloat amount'))
+(defn get-amount-validation-error [amount]
-          (try (when (<= (.toWei web3 amount' "ether") 0) true)
+  (when-not (empty-amount? amount)
-               (catch :default err true)))
+    (let [normalized-amount (money/normalize amount)]
-      (i18n/label :t/validation-amount-invalid-number)
+      (cond
+        (not (money/valid? normalized-amount))
+        (i18n/label :t/validation-amount-invalid-number)
 
-      (and (= (count amount-splited) 2) (> (count (last amount-splited)) 18))
+        (too-precise-amount? normalized-amount)
-      (i18n/label :t/validation-amount-is-too-precise)
+        (i18n/label :t/validation-amount-is-too-precise)))))
-
-      :else nil)))

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

@@ -23,13 +23,12 @@
 ;; Toolbar
 
 (def toolbar-title-container
-  {:flex-direction :row
+  {:flex-direction :row})
-   :padding-left   24})
 
 (def toolbar-title-text
-  {:color        styles/color-white
+  {:flex      -1
-   :font-size    17
+   :color     styles/color-white
-   :margin-right 4})
+   :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
 

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

@@ -27,8 +27,9 @@
 (defn toolbar-title []
   [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
+    [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]

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

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

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

@@ -34,8 +34,8 @@
 
 (handlers/register-handler-fx
   :wallet/set-and-validate-amount
-  (fn [{{:keys [web3] :wallet/keys [send-transaction] :as db} :db} [_ amount]]
+  (fn [{{:wallet/keys [send-transaction] :as db} :db} [_ amount]]
-    (let [error (wallet.db/get-amount-validation-error amount web3)]
+    (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
+    (let [{:keys [amount transaction-id password]} send-transaction]
-          amount-in-wei (money/to-wei (string/replace amount #"," "."))]
       (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
+    (let [{:keys [transaction-id password]} send-transaction]
-          amount' (money/to-wei (string/replace amount #"," "."))]
       {:db (assoc-in db [:wallet/send-transaction :in-progress?] true)
        ::accept-transaction {:id           transaction-id
                              :password     password

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

@@ -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]
+  (:require [re-frame.core :as re-frame]
-            [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]
+(defn- sufficient-funds? [amount-in-eth balance]
-  (<= amount (money/wei->ether 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 %)]
+                             :on-change-text #(re-frame/dispatch [:wallet/set-and-validate-amount %])}}]
-                                                (re-frame/dispatch [:wallet/set-and-validate-amount value]))}}]
            [react/view wallet.styles/choose-currency-container
             [components/choose-currency wallet.styles/choose-currency]]]]]
         [components/separator]

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

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

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

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

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

@@ -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.ui.screens.wallet.wallet-list.styles :as styles]
-            [status-im.utils.utils :as utils]
+            [status-im.utils.utils :as utils]))
-            [status-im.utils.platform :as platform]))
 
-(defn toolbar-view [transactions]
+(defn- toolbar-view [transactions]
-  [toolbar/toolbar2 {:style st/toolbar}
+  [toolbar/toolbar2 {:style styles/toolbar}
-   [toolbar/nav-clear-text (i18n/label :t/done) #(rf/dispatch [:navigate-back])]
+   [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]}]
+(defn- wallet-list-item [{:keys [name amount assets active?]}]
-  (let [asset-list (string/join "  " assets)]
+  (let [asset-list (string/join "  " (concat [(i18n/label :t/eth)] assets))]
-    [rn/touchable-highlight {:on-press select-wallet}
+    [react/touchable-highlight {:on-press select-wallet}
-     [rn/view {:style (st/wallet-item (keyword color))}
+     [react/view {:style (merge styles/wallet-item (if active? styles/active-wallet-item))}
-      [rn/view {:style st/wallet-info}
+      [react/view {:style styles/wallet-info}
-       [rn/text {:style st/wallet-name} name]
+       [react/text {:style styles/wallet-name} name]
-       [rn/view {:style st/total-balance}
+       [react/view {:style styles/total-balance}
-        [rn/text {:style st/total-balance-value} amount]
+        [react/text {:style styles/total-balance-value} amount]
-        [rn/text {:style st/total-balance-currency} currency]]
+        [react/text {:style styles/total-balance-currency} (i18n/label :t/usd-currency)]]
-       [rn/text {:style st/asset-list} asset-list]]
+       [react/text {:style styles/asset-list} asset-list]]
-      [rn/icon :forward_gray st/select-wallet-icon]]]))
+      [react/icon :forward_gray styles/select-wallet-icon]]]))
 
-(def dummy-wallet-data
+(defview wallet-list []
-  [{:name     "Main wallet"
+  (letsubs [wallets [:wallet.list/all]]
-    :currency "USD"
+    [react/scroll-view {:style styles/wallet-list-screen}
-    :amount   0
+     [react/text {:style styles/wallet-list-title}
-    :assets   []
+      (i18n/label :t/your-wallets)]
-    :color    "blue-1"}])
+     [list/flat-list {:data          wallets
-
+                      :render-fn     wallet-list-item
-;; TODO hook real data
+                      :style         styles/wallet-list
-
+                      :scrollEnabled false}]]))
-(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
-                    :render-fn     wallet-list-item
-                    :style         st/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]])

src/status_im/utils/money.cljs

@@ -1,6 +1,6 @@
 (ns status-im.utils.money
-  (:require [status-im.js-dependencies :as dependencies]
+  (:require [clojure.string :as string]
-            [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"))
 

test/cljs/status_im/test/utils/money.cljs

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