status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-13 18:25:45 +00:00
Code Issues Projects Releases Wiki Activity

[ISSUE #1858] Improved wallet main screen refresh

Browse Source 
Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
This commit is contained in:
Julien Eluard 2018-02-17 10:22:52 +01:00
parent 4e413d853e
commit 1248a469a6
No known key found for this signature in database
GPG Key ID: 6FD7DB5437FCBEF6
6 changed files with 104 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/src/status_im/ui/components/react.cljs
View File

@ -43,6 +43,8 @@
(def web-view (get-class "WebView"))
(def keyboard-avoiding-view-class (get-class "KeyboardAvoidingView"))
(def refresh-control (get-class "RefreshControl"))
(def text-class (get-class "Text"))
(def text-input-class (get-class "TextInput"))
(def image (get-class "Image"))

2
src/status_im/ui/components/colors.cljs
View File

@ -11,11 +11,13 @@
(def gray-icon "#6e777e") ;; Used for forward icon in accounts
(def gray-light "#e8ebec") ;; Used as divider color
(def gray-lighter "#eef2f5") ;; Used as a background or shadow
(def gray-transparent "rgba(184, 193, 199, 0.5)") ;; Used for tabs
(def gray-border "#ececf0")
(def blue "#4360df") ;; Used as main wallet color, and ios home add button
(def red "#ff2d55") ;; Used to highlight errors or "dangerous" actions
(def red-light "#ffe5ea") ;; error tooltip
(def text-light-gray "#212121") ;; Used for labels (home items)
(def cyan "#7adcfb") ;; Used by wallet transaction filtering icon
(defn alpha [hex opacity]
(let [hex (string/replace hex #"#" "")

45
src/status_im/ui/screens/wallet/styles.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.ui.screens.wallet.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react]
[status-im.ui.components.styles :as styles]))
;; wallet
@ -57,14 +58,32 @@
:padding-vertical 15})
(def cartouche-primary-text
{:color styles/color-white})
{:color colors/white})
(def cartouche-secondary-text
{:color styles/color-white-transparent})
{:color colors/white-transparent})
;; Main section
(def main-section
{:flex 1})
(def scrollable-section
{:flex 1
:zIndex 1
:background-color colors/white})
(def scroll-top
(let [height (:height (react/get-dimensions "window"))]
{:background-color colors/blue
:zIndex -1
:position :absolute
:height height
:top (- height)
:left 0
:right 0}))
(def section
{:background-color colors/blue})
(def total-balance-container
@ -80,19 +99,20 @@
(def total-value
{:font-size 14
:color styles/color-white-transparent})
:color colors/white-transparent})
(defstyle total-balance-currency
{:font-size 37
:margin-left 9
:color styles/color-white-transparent-5
:color colors/white-lighter-transparent
:android {:letter-spacing 1.5}
:ios {:letter-spacing 1.16}})
;; Actions section
(def action-section
{:background-color colors/blue})
{:flex 1
:background-color colors/blue})
(def action
{:background-color colors/white-transparent
@ -112,12 +132,13 @@
(def asset-section
{:flex 1
:padding-vertical 16})
:padding-top 16
:background-color colors/white})
(def asset-section-title
{:font-size 14
:margin-left 16
:color styles/color-gray4})
:color colors/gray})
(def asset-item-value-container
{:flex 1
@ -127,15 +148,9 @@
(def asset-item-value
{:flex -1
:font-size 16
:color styles/color-black})
:color colors/black})
(def asset-item-currency
{:font-size 16
:color styles/color-gray4
:color colors/gray
:margin-left 6})
(def qr-code-preview
{:width 256
:height 256
:justify-content :center
:align-items :center})

64
src/status_im/ui/screens/wallet/transactions/styles.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.ui.screens.wallet.transactions.styles
(:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as styles]
[status-im.ui.screens.main-tabs.styles :as tabs.styles]))
(defnstyle tab [active?]
@ -9,10 +8,11 @@
:height tabs.styles/tab-height
:justify-content :center
:align-items :center
:padding-bottom (if active? 0 1)
:border-bottom-width (if active? 2 1)
:border-bottom-color (if active?
styles/color-blue4
styles/color-gray10-transparent)})
colors/blue
colors/gray-transparent)})
(def tabs-container
{:flex-direction :row
@ -23,15 +23,19 @@
:android {:font-size 14}
:text-align :center
:color (if active?
styles/color-blue4
styles/color-black)})
colors/blue
colors/black)})
(def transactions
{:flex 1
:background-color :white})
(def tab-unsigned-transactions-count
(merge (tab-title false)
{:color styles/color-gray10}))
{:color colors/gray}))
(def forward
{:color styles/color-gray7})
{:color colors/gray})
(def empty-text
{:text-align :center
@ -53,10 +57,10 @@
:font-size 17})
(def tx-time
{:flex-grow 1
:font-size 14
:text-align :right
:color styles/color-gray4})
{:flex-grow 1
:font-size 14
:text-align :right
:color colors/blue})
(def address-row
{:flex-direction :row
@ -66,7 +70,7 @@
(def address-item
{:font-size 16
:color styles/color-gray4})
:color colors/gray})
(def address-label
(merge address-item
@ -74,7 +78,7 @@
(def address-contact
(merge address-item
{:color styles/color-black
{:color colors/black
:margin-right 5}))
(def address-hash
@ -87,14 +91,14 @@
:padding-vertical 12})
(def sign-all-view
{:flex 1
:flex-direction :column
:justify-content :center
:background-color styles/color-gray-transparent})
{:flex 1
:flex-direction :column
:justify-content :center
:background-color colors/gray-transparent})
(def sign-all-popup
{:align-self :flex-start
:background-color styles/color-white
:background-color colors/white
:margin-horizontal 12
:border-radius 8})
@ -137,7 +141,7 @@
(def details-item-label
{:flex 1
:margin-right 10
:color styles/color-gray4
:color colors/gray
:font-size 14})
(def details-item-value-wrapper
@ -145,11 +149,11 @@
(def details-item-value
{:font-size 14
:color styles/color-black})
:color colors/black})
(def details-item-extra-value
{:font-size 14
:color styles/color-gray4})
:color colors/gray})
(def details-header
{:margin-horizontal 16
@ -167,11 +171,11 @@
(def details-header-value
{:font-size 16
:color styles/color-black})
:color colors/black})
(def details-header-date
{:font-size 14
:color styles/color-gray4})
:color colors/gray})
(def details-block
{:margin-horizontal 16})
@ -183,25 +187,25 @@
(defn progress-bar-done [done]
{:flex done
:background-color styles/color-blue2})
:background-color colors/blue})
(defn progress-bar-todo [todo]
{:flex todo
:background-color styles/color-blue2
:background-color colors/blue
:opacity 0.30})
(def details-confirmations-count
{:color styles/color-black
{:color colors/black
:font-size 15
:margin-vertical 2})
(def details-confirmations-helper-text
{:color styles/color-gray4
{:color colors/gray
:font-size 14
:margin-vertical 2})
(def details-separator
{:background-color styles/color-light-gray3
{:background-color colors/gray-light
:height 1
:margin-vertical 10})
@ -212,11 +216,11 @@
:width 4
:height 4
:border-radius 2
:background-color styles/color-cyan})
:background-color colors/cyan})
(def filter-container
{:flex 1})
(def transacions-view
(def transactions-view
{:flex 1
:background-color :white})

11
src/status_im/ui/screens/wallet/transactions/views.cljs
View File

@ -114,19 +114,15 @@
(defview history-list []
(letsubs [transactions-history-list [:wallet.transactions/transactions-history-list]
transactions-loading? [:wallet.transactions/transactions-loading?]
error-message? [:wallet.transactions/error-message?]
filter-data [:wallet.transactions/filters]]
[react/view components.styles/flex
(when error-message?
(re-frame/dispatch [:wallet/show-error]))
[list/section-list {:sections (map #(update-transactions % filter-data) transactions-history-list)
:key-fn :hash
:render-fn render-transaction
:empty-component [react/text {:style styles/empty-text}
(i18n/label :t/transactions-history-empty)]
:on-refresh #(re-frame/dispatch [:update-transactions])
:refreshing (boolean transactions-loading?)}]]))
:refreshing false}]]))
(defview unsigned-list []
(letsubs [transactions [:wallet.transactions/unsigned-transactions-list]]
@ -174,7 +170,7 @@
(i18n/label :t/transactions-filter-select-all)]]
[react/view {:style (merge {:background-color :white} components.styles/flex)}
[list/section-list {:sections (wrap-filter-data filter-data)
:key-fn :id}]]]))
:key-fn (comp str :id)}]]]))
(defn history-tab [active?]
[react/text {:force-uppercase? true
@ -215,7 +211,7 @@
(defview transactions []
(letsubs [current-tab [:get :view-id]
filter-data [:wallet.transactions/filters]]
[react/view styles/transacions-view
[react/view styles/transactions-view
[status-bar/status-bar]
[toolbar-view current-tab filter-data]
[tabs current-tab]
@ -235,7 +231,6 @@
(->> amount (money/wei-> token) money/to-fixed str))
"...")))
(defn details-header [{:keys [value date type symbol]}]
[react/view {:style styles/details-header}
[react/view {:style styles/details-header-icon}

68
src/status_im/ui/screens/wallet/views.cljs
View File

@ -1,30 +1,29 @@
(ns status-im.ui.screens.wallet.views
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [re-frame.core :as re-frame]
(:require-macros [status-im.utils.views :as views])
(:require [reagent.core :as reagent]
[re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[status-im.ui.components.toolbar.actions :as act]
[status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.wallet.styles :as styles]
[status-im.ui.screens.wallet.utils :as wallet.utils]
[status-im.utils.ethereum.core :as ethereum]
[status-im.utils.ethereum.tokens :as tokens]
[status-im.utils.platform :as platform]))
[status-im.utils.ethereum.tokens :as tokens]))
(defn toolbar-view []
[toolbar/toolbar {:style styles/toolbar :flat? true}
nil
[toolbar/content-wrapper]
[toolbar/actions
[(assoc (act/opts [{:label (i18n/label :t/wallet-manage-assets)
:action #(re-frame/dispatch [:navigate-to-modal :wallet-settings-assets])}])
:icon-opts {:color :white
:accessibility-label :options-menu-button})]]])
[{:icon :icons/options
:icon-opts {:color :white
:accessibility-label :options-menu-button}
:options [{:label (i18n/label :t/wallet-manage-assets)
:action #(re-frame/dispatch [:navigate-to-modal :wallet-settings-assets])}]}]]])
(defn- total-section [usd-value]
[react/view {:style styles/main-section}
[react/view styles/section
[react/view {:style styles/total-balance-container}
[react/view {:style styles/total-balance}
[react/text {:style styles/total-balance-value
@ -67,35 +66,34 @@
(defn current-tokens [visible-tokens network]
(filter #(contains? visible-tokens (:symbol %)) (tokens/tokens-for (ethereum/network->chain-keyword network))))
(defn- asset-section [network balance visible-tokens refreshing?]
(defn- asset-section [network balance visible-tokens]
(let [tokens (current-tokens visible-tokens network)
assets (map #(assoc % :amount (get balance (:symbol %))) (concat [tokens/ethereum] tokens))]
[react/view styles/asset-section
[react/text {:style styles/asset-section-title} (i18n/label :t/wallet-assets)]
[list/flat-list
{:default-separator? true
:data assets
:scroll-enabled false
:key-fn (comp str :symbol)
:render-fn render-asset
:on-refresh #(re-frame/dispatch [:update-wallet (map :symbol tokens)])
:refreshing refreshing?}]]))
:data assets
:render-fn render-asset}]]))
(defview wallet []
(letsubs [network [:network]
balance [:balance]
visible-tokens [:wallet.settings/visible-tokens]
portfolio-value [:portfolio-value]
prices-loading? [:prices-loading?]
balance-loading? [:wallet/balance-loading?]
error-message? [:wallet/error-message?]]
[react/view {:style components.styles/flex}
(when error-message?
(re-frame/dispatch [:wallet/show-error]))
[toolbar-view]
[react/view components.styles/flex
[total-section portfolio-value]
[list/action-list actions
{:container-style styles/action-section}]
[asset-section network balance visible-tokens
(and (or prices-loading? balance-loading?)
(not error-message?))]]]))
(views/defview wallet []
(views/letsubs [network [:network]
balance [:balance]
visible-tokens [:wallet.settings/visible-tokens]
portfolio-value [:portfolio-value]]
(let [symbols (map :symbol (current-tokens visible-tokens network))]
[react/view styles/main-section
[toolbar-view]
[react/scroll-view {:content-container-style styles/scrollable-section
:refresh-control
(reagent/as-element
[react/refresh-control {:on-refresh #(re-frame/dispatch [:update-wallet symbols])
:tint-color :white
:refreshing false}])}
[react/view {:style styles/scroll-top}] ;; Hack to allow different colors for top / bottom scroll view]
[total-section portfolio-value]
[list/action-list actions
{:container-style styles/action-section}]
[asset-section network balance visible-tokens]]])))