diff --git a/components/src/status_im/ui/components/react.cljs b/components/src/status_im/ui/components/react.cljs index a7ba97c170..c8f8b9d702 100644 --- a/components/src/status_im/ui/components/react.cljs +++ b/components/src/status_im/ui/components/react.cljs @@ -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")) diff --git a/src/status_im/ui/components/colors.cljs b/src/status_im/ui/components/colors.cljs index 4611344861..0c69df734e 100644 --- a/src/status_im/ui/components/colors.cljs +++ b/src/status_im/ui/components/colors.cljs @@ -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 #"#" "") diff --git a/src/status_im/ui/screens/wallet/styles.cljs b/src/status_im/ui/screens/wallet/styles.cljs index fdae2216ed..691ac33956 100644 --- a/src/status_im/ui/screens/wallet/styles.cljs +++ b/src/status_im/ui/screens/wallet/styles.cljs @@ -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}) diff --git a/src/status_im/ui/screens/wallet/transactions/styles.cljs b/src/status_im/ui/screens/wallet/transactions/styles.cljs index ab62aacb2d..6735efb694 100644 --- a/src/status_im/ui/screens/wallet/transactions/styles.cljs +++ b/src/status_im/ui/screens/wallet/transactions/styles.cljs @@ -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}) diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index da0e8d3c17..1e39ef7f8d 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -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} diff --git a/src/status_im/ui/screens/wallet/views.cljs b/src/status_im/ui/screens/wallet/views.cljs index 9426d4dcd4..066a4daaef 100644 --- a/src/status_im/ui/screens/wallet/views.cljs +++ b/src/status_im/ui/screens/wallet/views.cljs @@ -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]]])))