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 various wallet UI inconsistencies

This commit is contained in:
Julien Eluard 2017-09-10 15:50:36 +02:00 committed by Roman Volosovskyi
parent 175832b2b4
commit 9cda6806e3
15 changed files with 186 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/status_im/components/list/styles.cljs
View File

@ -1,10 +1,10 @@
(ns status-im.components.list.styles (ns status-im.components.list.styles
(:require [status-im.components.styles :as st] (:require-macros [status-im.utils.styles :refer [defstyle]])
[status-im.utils.platform :as p])) (:require [status-im.components.styles :as styles]
[status-im.utils.platform :as platform]))
(def item (def item
{:flex 1 {:flex-direction :row})
:flex-direction :row})
(def item-text-view (def item-text-view
{:flex 1 {:flex 1
@ -12,11 +12,11 @@
(def primary-text-base (def primary-text-base
{:font-size 17 {:font-size 17
:color st/color-black}) :color styles/color-black})
(def primary-text (def primary-text
(merge primary-text-base (merge primary-text-base
{:padding-top 12})) {:padding-top (if platform/ios? 13 14)}))
(def primary-text-only (def primary-text-only
(merge primary-text-base (merge primary-text-base
@ -24,19 +24,26 @@
(def secondary-text (def secondary-text
{:font-size 16 {:font-size 16
:color st/color-gray4 :color styles/color-gray4
:padding-top 4}) :padding-top 4})
(def item-image (def item-image
{:width 40 {:width 40
:height 40}) :height 40})
(def item-image-wrapper (def item-icon
{:width 24
:height 24})
(def left-item-wrapper
{:margin 14}) {:margin 14})
(def right-item-wrapper
{:margin 16})
(def base-separator (def base-separator
{:height 1 {:height 1
:background-color st/color-gray5 :background-color styles/color-gray5
:opacity 0.5 :opacity 0.5
:margin-top 12 :margin-top 12
:margin-bottom 16}) :margin-bottom 16})
@ -48,8 +55,11 @@
(def section-separator base-separator) (def section-separator base-separator)
(def section-header (defstyle section-header
{:font-size 14 {:font-size 14
:margin-vertical 2 :color styles/color-gray4
:margin-top 16 :margin-left 16
:margin-left 16}) :android {:margin-top 11
:margin-bottom 3}
:ios {:margin-top 10
:margin-bottom 2}})

11
src/status_im/components/list/views.cljs
View File

@ -30,9 +30,11 @@
([left-action content] (item left-action content nil)) ([left-action content] (item left-action content nil))
([left-action content right-action] ([left-action content right-action]
[rn/view {:style lst/item} [rn/view {:style lst/item}
left-action [rn/view {:style lst/left-item-wrapper}
left-action]
content content
right-action])) [rn/view {:style lst/right-item-wrapper}
right-action]]))
(defn touchable-item [handler item] (defn touchable-item [handler item]
[rn/touchable-highlight {:on-press handler} [rn/touchable-highlight {:on-press handler}
@ -40,14 +42,13 @@
(defn item-icon (defn item-icon
[{:keys [icon style icon-opts]}] [{:keys [icon style icon-opts]}]
[rn/view {:style lst/item-image-wrapper}
[rn/view {:style style} [rn/view {:style style}
[vi/icon icon (merge icon-opts {:style lst/item-image})]]]) [vi/icon icon (merge icon-opts {:style lst/item-icon})]])
(defn item-image (defn item-image
([source] (item-image source nil)) ([source] (item-image source nil))
([source style] ([source style]
[rn/view {:style (merge lst/item-image-wrapper style)} [rn/view {:style style}
[rn/image {:source source [rn/image {:source source
:style lst/item-image}]])) :style lst/item-image}]]))

4
src/status_im/components/styles.cljs
View File

@ -12,6 +12,8 @@
(def color-purple "#a187d5") (def color-purple "#a187d5")
(def color-gray-transparent-light "rgba(0, 0, 0, 0.1)") (def color-gray-transparent-light "rgba(0, 0, 0, 0.1)")
(def color-gray-transparent "rgba(0, 0, 0, 0.4)") (def color-gray-transparent "rgba(0, 0, 0, 0.4)")
(def color-gray4-transparent "rgba(147, 155, 161, 0.2)")
(def color-gray10-transparent "rgba(184, 193, 199, 0.5)")
(def color-gray "#838c93de") (def color-gray "#838c93de")
(def color-gray2 "#8f838c93") (def color-gray2 "#8f838c93")
(def color-gray3 "#00000040") (def color-gray3 "#00000040")
@ -46,6 +48,8 @@
(def color-light-red2 "#f47979") (def color-light-red2 "#f47979")
(def color-green-1 "#a8f4d4") (def color-green-1 "#a8f4d4")
(def color-green-2 "#448469") (def color-green-2 "#448469")
(def color-green-3 "#44d058")
(def color-green-3-light "rgba(68, 208, 88, 0.2)")
(def color-cyan "#7adcfb") (def color-cyan "#7adcfb")
(def color-separator "#D6D6D6") (def color-separator "#D6D6D6")

18
src/status_im/components/tabs/styles.cljs
View File

@ -30,16 +30,18 @@
(def tab (def tab
{:flex 1 {:flex 1
:height tab-height :height tab-height
:justifyContent :center :justify-content :center
:alignItems :center}) :align-items :center
:border-bottom-width 2
:border-bottom-color styles/color-white})
(defnstyle tab-title [active?] (defnstyle tab-title [active? text-only?]
{:ios {:font-size 11} {:ios {:font-size (if text-only? 15 11)}
:android {:font-size 12} :android {:font-size (if text-only? 14 12)}
:margin-top 3 :margin-top 3
:min-width 60 :min-width 60
:text-align :center :text-align :center
:color (if active? styles/color-blue4 styles/color-gray8)}) :color (if active? styles/color-blue4 styles/color-black)})
(defn tab-icon [active?] (defn tab-icon [active?]
{:color (if active? styles/color-blue4 styles/color-gray4)}) {:color (if active? styles/color-blue4 styles/color-gray4)})
@ -47,8 +49,8 @@
(def tab-container (def tab-container
{:flex 1 {:flex 1
:height tab-height :height tab-height
:justifyContent :center :justify-content :center
:alignItems :center}) :align-items :center})
(def swiper (def swiper
{:shows-pagination false}) {:shows-pagination false})

25
src/status_im/components/tabs/views.cljs
View File

@ -9,9 +9,10 @@
[status-im.components.tabs.styles :as styles] [status-im.components.tabs.styles :as styles]
[status-im.utils.platform :as p])) [status-im.utils.platform :as p]))
(defn- tab [{:keys [view-id title icon-active icon-inactive selected-view-id on-press]}] (defn- tab [{:keys [view-id title icon-active icon-inactive style-active selected-view-id on-press]}]
(let [active? (= view-id selected-view-id)] (let [active? (= view-id selected-view-id)
[react/touchable-highlight {:style styles/tab text-only? (nil? icon-active)]
[react/touchable-highlight {:style (merge styles/tab (if (and active? style-active) style-active))
:disabled active? :disabled active?
:on-press #(if on-press (on-press view-id) (dispatch [:navigate-to-tab view-id]))} :on-press #(if on-press (on-press view-id) (dispatch [:navigate-to-tab view-id]))}
[react/view {:style styles/tab-container} [react/view {:style styles/tab-container}
@ -19,29 +20,29 @@
[react/view [react/view
[vi/icon icon (styles/tab-icon active?)]]) [vi/icon icon (styles/tab-icon active?)]])
[react/view [react/view
[react/text (merge (if-not icon-active {:uppercase? (get-in p/platform-specific [:uppercase?])}) [react/text (merge (if text-only? {:uppercase? (get-in p/platform-specific [:uppercase?])})
{:style (styles/tab-title active?)}) {:style (styles/tab-title active? text-only?)})
title]]]])) title]]]]))
(defn- create-tab [index data selected-view-id on-press] (defn- create-tab [index data selected-view-id on-press style-active]
(let [data (merge data {:key index (let [data (merge data {:key index
:index index :index index
:style-active style-active
:selected-view-id selected-view-id :selected-view-id selected-view-id
:on-press on-press})] :on-press on-press})]
[tab data])) [tab data]))
(defview tabs-container [style children] (defview tabs-container [style children]
(letsubs [tabs-hidden? [:tabs-hidden?]] (letsubs [tabs-hidden? [:tabs-hidden?]]
[react/animated-view {:style (merge style [react/animated-view {:style style
styles/tabs-container-line)
:pointer-events (if tabs-hidden? :none :auto)} :pointer-events (if tabs-hidden? :none :auto)}
children])) children]))
(defn tabs [{:keys [style tab-list selected-view-id on-press]}] (defn tabs [{:keys [style style-tab-active tab-list selected-view-id on-press]}]
[tabs-container style [tabs-container style
(into (into
[react/view styles/tabs-inner-container] [react/view styles/tabs-inner-container]
(map-indexed #(create-tab %1 %2 selected-view-id on-press) tab-list))]) (map-indexed #(create-tab %1 %2 selected-view-id on-press style-tab-active) tab-list))])
;; Swipable tabs ;; Swipable tabs
@ -82,7 +83,7 @@
(reset! scrolling? false) (reset! scrolling? false)
(recur (async/<! scroll-start)))) (recur (async/<! scroll-start))))
(defn swipable-tabs [{:keys [style on-view-change]} tab-list prev-view-id view-id] (defn swipable-tabs [{:keys [style style-tabs style-tab-active on-view-change]} tab-list prev-view-id view-id]
(let [swiped? (r/atom false) (let [swiped? (r/atom false)
main-swiper (r/atom nil) main-swiper (r/atom nil)
scroll-start (async/chan 10) scroll-start (async/chan 10)
@ -103,6 +104,8 @@
[react/view {:style style} [react/view {:style style}
[tabs {:selected-view-id @view-id [tabs {:selected-view-id @view-id
:tab-list tab-list :tab-list tab-list
:style style-tabs
:style-tab-active style-tab-active
:on-press on-view-change}] :on-press on-view-change}]
[react/swiper (merge styles/swiper [react/swiper (merge styles/swiper
{:index (get-tab-index tab-list @view-id) {:index (get-tab-index tab-list @view-id)

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

@ -1,17 +1,17 @@
(ns status-im.components.toolbar-new.styles (ns status-im.components.toolbar-new.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.components.styles :as st] (:require [status-im.components.styles :as styles]
[status-im.utils.platform :as p])) [status-im.utils.platform :as p]))
(def toolbar-background1 st/color-white) (def toolbar-background1 styles/color-white)
(def toolbar-icon-width 24) (def toolbar-icon-width 24)
(def toolbar-icon-height 24) (def toolbar-icon-height 24)
(def toolbar-icon-spacing 24) (def toolbar-icon-spacing 24)
(defn toolbar-wrapper [background-color] (defn toolbar-wrapper [background-color flat?]
{:backgroundColor (or background-color toolbar-background1) {:background-color (or background-color toolbar-background1)
:elevation 2}) :elevation (if flat? 0 2)})
(defstyle toolbar (defstyle toolbar
{:flex-direction :row {:flex-direction :row
@ -31,7 +31,7 @@
:ios {:align-items :center}}) :ios {:align-items :center}})
(defstyle toolbar-title-text (defstyle toolbar-title-text
{:color st/text1-color {:color styles/text1-color
:letter-spacing -0.2 :letter-spacing -0.2
:font-size 17 :font-size 17
:ios {:text-align "center"}}) :ios {:text-align "center"}})
@ -72,7 +72,7 @@
:padding-left 0 :padding-left 0
:padding-bottom 0 :padding-bottom 0
:text-align-vertical :center :text-align-vertical :center
:color st/color-black :color styles/color-black
:ios {:padding-left 8 :ios {:padding-left 8
:padding-top 2 :padding-top 2
:letter-spacing -0.2}}) :letter-spacing -0.2}})
@ -95,10 +95,10 @@
:android {:margin 16}}) :android {:margin 16}})
(def item-text (def item-text
{:color st/color-blue4 {:color styles/color-blue4
:font-size 17}) :font-size 17})
(def toolbar-text-action-disabled {:color st/color-gray7}) (def toolbar-text-action-disabled {:color styles/color-gray7})
(def item-text-white-background {:color st/color-blue4}) (def item-text-white-background {:color styles/color-blue4})

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

@ -90,25 +90,18 @@
([title] (toolbar2 nil title)) ([title] (toolbar2 nil title))
([props title] (toolbar2 props default-nav-back [content-title title])) ([props title] (toolbar2 props default-nav-back [content-title title]))
([props nav-item content-item] (toolbar2 props nav-item content-item [actions [{:image :blank}]])) ([props nav-item content-item] (toolbar2 props nav-item content-item [actions [{:image :blank}]]))
([{:keys [background-color ([{:keys [background-color style flat?]}
hide-border?
style
border-style]}
nav-item nav-item
content-item content-item
action-items] action-items]
(let [style (merge (tst/toolbar-wrapper background-color) style)] [rn/view {:style (merge (tst/toolbar-wrapper background-color flat?) style)}
[rn/view {:style style}
[rn/view {:style tst/toolbar} [rn/view {:style tst/toolbar}
(when nav-item (when nav-item
[rn/view {:style (tst/toolbar-nav-actions-container 0)} [rn/view {:style (tst/toolbar-nav-actions-container 0)}
nav-item]) nav-item])
content-item content-item
action-items] action-items]
[sync-state-gradient-view/sync-state-gradient-view] [sync-state-gradient-view/sync-state-gradient-view]]))
(when-not hide-border?
[rn/view {:style (merge tst/toolbar-border-container border-style)}
[rn/view {:style tst/toolbar-border}]])])))
(defn toolbar (defn toolbar
"DEPRECATED "DEPRECATED
@ -124,7 +117,7 @@
border-style border-style
title-style title-style
style]}] style]}]
(let [style (merge (tst/toolbar-wrapper background-color) style)] (let [style (merge (tst/toolbar-wrapper background-color false) style)]
[rn/view {:style style} [rn/view {:style style}
[rn/view tst/toolbar [rn/view tst/toolbar
(when-not hide-nav? (when-not hide-nav?

2
src/status_im/ios/platform.cljs
View File

@ -23,7 +23,7 @@
:color styles/color-transparent} :color styles/color-transparent}
:wallet {:height 20 :wallet {:height 20
:bar-style "light-content" :bar-style "light-content"
:color styles/color-blue5}} :color styles/color-blue4}}
:sized-text {:margin-top -5 :sized-text {:margin-top -5
:additional-height 5} :additional-height 5}
:actions-list-view {:border-bottom-color styles/color-gray3 :actions-list-view {:border-bottom-color styles/color-gray3

3
src/status_im/ui/screens/main_tabs/views.cljs
View File

@ -108,6 +108,7 @@
(doall (doall
(map-indexed (fn [index {vid :view-id screen :screen}] (map-indexed (fn [index {vid :view-id screen :screen}]
^{:key index} [screen (= view-id vid)]) tab-list))] ^{:key index} [screen (= view-id vid)]) tab-list))]
[tabs {:style (styles/tabs-container tabs-hidden?) [tabs {:style (merge (styles/tabs-container tabs-hidden?)
styles/tabs-container-line)
:selected-view-id view-id :selected-view-id view-id
:tab-list tab-list}]]]]])) :tab-list tab-list}]]]]]))

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

@ -11,12 +11,3 @@
;; TODO(oskarth): spec for balance as BigNumber ;; 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} ;; TODO(oskarth): Spec for prices as as: {:from ETH, :to USD, :price 290.11, :last-day 304.17}
(def dummy-transaction-data
[{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4908" :symbol "ETH"} :state :pending}
{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :pending}
{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :outgoing}
{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :postponed}
{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "0,4908" :symbol "ETH"} :state :pending}
{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :pending}
{:to "0x829bd824b016326a401d083b33d092293333a830" :content {:value "10000" :symbol "SGT"} :state :outgoing}])

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

@ -15,15 +15,18 @@
:padding-right 10 :padding-right 10
:font-size 13}) :font-size 13})
(def main-section styles/flex)
(def wallet-transactions-container (def tabs
{:flex 1 {:border-bottom-width 1
:background-color styles/color-white}) :border-bottom-color styles/color-gray10-transparent})
(def main-section (def tab-active
{:flex 1 {:border-bottom-width 2
:position :relative :border-bottom-color styles/color-blue4})
:background-color styles/color-white})
(def forward
{:color styles/color-gray7})
(def empty-text (def empty-text
{:text-align :center {:text-align :center
@ -78,5 +81,10 @@
{:background-color :transparent}) {:background-color :transparent})
(defn transaction-icon-background [color] (defn transaction-icon-background [color]
{:border-radius 32 {:flex 1
:background-color styles/color-blue4-transparent}) :justify-content :center
:align-items :center
:width 40
:height 40
:border-radius 32
:background-color color})

30
src/status_im/ui/screens/wallet/history/views.cljs
View File

@ -5,6 +5,8 @@
[status-im.components.checkbox.view :as checkbox] [status-im.components.checkbox.view :as checkbox]
[status-im.components.list.views :as list] [status-im.components.list.views :as list]
[status-im.components.react :as react] [status-im.components.react :as react]
[status-im.components.status-bar :as status-bar]
[status-im.components.styles :as styles]
[status-im.components.tabs.views :as tabs] [status-im.components.tabs.views :as tabs]
[status-im.components.toolbar-new.view :as toolbar] [status-im.components.toolbar-new.view :as toolbar]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
@ -32,7 +34,7 @@
:handler #(utils/show-popup "TODO" "Not implemented") #_(re-frame/dispatch [:navigate-to-modal :wallet-transactions-sign-all])}) :handler #(utils/show-popup "TODO" "Not implemented") #_(re-frame/dispatch [:navigate-to-modal :wallet-transactions-sign-all])})
(defn toolbar-view [view-id unsigned-transactions] (defn toolbar-view [view-id unsigned-transactions]
[toolbar/toolbar2 {} [toolbar/toolbar2 {:flat? true}
toolbar/default-nav-back toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/transactions)] [toolbar/content-title (i18n/label :t/transactions)]
(case @view-id (case @view-id
@ -49,17 +51,15 @@
[button/secondary-button {:text (i18n/label :t/delete) :on-press #(on-delete-transaction m)}]]) [button/secondary-button {:text (i18n/label :t/delete) :on-press #(on-delete-transaction m)}]])
(defn- unsigned? [type] (= "unsigned" type)) (defn- unsigned? [type] (= "unsigned" type))
(defn- inbound? [type] (= "inbound" type))
(defn- transaction-icon [k color] {:icon k :style (history.styles/transaction-icon-background color)}) (defn- transaction-icon [k background-color color] {:icon k :icon-opts {:color color} :style (history.styles/transaction-icon-background background-color)})
(defn- transaction-type->icon [s] (defn- transaction-type->icon [s]
(case s (case s
"inbound" (transaction-icon :icons/arrow-left :red) "unsigned" (transaction-icon :icons/dots-horizontal styles/color-gray4-transparent styles/color-gray7)
"outbound" (transaction-icon :icons/arrow-right :red) "inbound" (transaction-icon :icons/arrow-left styles/color-green-3-light styles/color-green-3)
"postponed" (transaction-icon :icons/arrow-right :red) "outbound" (transaction-icon :icons/arrow-right styles/color-blue4-transparent styles/color-blue4)
"unsigned" (transaction-icon :icons/dots-horizontal :red) ("postponed" "pending") (transaction-icon :icons/arrow-right styles/color-gray4-transparent styles/color-gray7)
"pending" (transaction-icon :icons/dots-horizontal :red)
(throw (str "Unknown transaction type: " s)))) (throw (str "Unknown transaction type: " s))))
(defn render-transaction [{:keys [to from type value symbol] :as m}] (defn render-transaction [{:keys [to from type value symbol] :as m}]
@ -72,7 +72,7 @@
(str (i18n/label :t/from) " " from)) (str (i18n/label :t/from) " " from))
(when (unsigned? type) (when (unsigned? type)
[action-buttons m])] [action-buttons m])]
[list/item-icon {:icon :icons/forward}]]) [list/item-icon {:icon :icons/forward :icon-opts history.styles/forward}]])
;; TODO(yenda) hook with re-frame ;; TODO(yenda) hook with re-frame
(defn- empty-text [s] [react/text {:style history.styles/empty-text} s]) (defn- empty-text [s] [react/text {:style history.styles/empty-text} s])
@ -81,7 +81,7 @@
(letsubs [transactions-history-list [:wallet/transactions-history-list] (letsubs [transactions-history-list [:wallet/transactions-history-list]
transactions-loading? [:wallet/transactions-loading?] transactions-loading? [:wallet/transactions-loading?]
error-message [:wallet.transactions/error-message?]] error-message [:wallet.transactions/error-message?]]
[react/scroll-view [react/scroll-view {:style styles/flex}
(when error-message [wallet.views/error-message-view history.styles/error-container history.styles/error-message]) (when error-message [wallet.views/error-message-view history.styles/error-container history.styles/error-message])
[list/section-list {:sections transactions-history-list [list/section-list {:sections transactions-history-list
:render-fn render-transaction :render-fn render-transaction
@ -91,7 +91,7 @@
(defview unsigned-list [transactions] (defview unsigned-list [transactions]
[] []
[react/scroll-view [react/scroll-view {:style styles/flex}
[list/flat-list {:data transactions [list/flat-list {:data transactions
:render-fn render-transaction :render-fn render-transaction
:empty-component (empty-text (i18n/label :t/transactions-unsigned-empty))}]]) :empty-component (empty-text (i18n/label :t/transactions-unsigned-empty))}]])
@ -168,12 +168,13 @@
[react/scroll-view [react/scroll-view
[list/section-list {:sections filter-data}]]]) [list/section-list {:sections filter-data}]]])
(defn- main-section [view-id tabs ] (defn- main-section [view-id tabs]
(let [prev-view-id (reagent/atom @view-id)] (let [prev-view-id (reagent/atom @view-id)]
[tabs/swipable-tabs {:style history.styles/main-section [tabs/swipable-tabs {:style history.styles/main-section
:style-tabs history.styles/tabs
:style-tab-active history.styles/tab-active
:on-view-change #(do (reset! prev-view-id @view-id) :on-view-change #(do (reset! prev-view-id @view-id)
(reset! view-id %))} (reset! view-id %))}
tabs prev-view-id view-id])) tabs prev-view-id view-id]))
;; TODO(yenda) must reflect selected wallet ;; TODO(yenda) must reflect selected wallet
@ -183,6 +184,7 @@
(let [tabs (tab-list unsigned-transactions) (let [tabs (tab-list unsigned-transactions)
default-view (get-in tabs [0 :view-id]) default-view (get-in tabs [0 :view-id])
view-id (reagent/atom default-view)] view-id (reagent/atom default-view)]
[react/view {:style history.styles/wallet-transactions-container} [react/view {:style styles/flex}
[status-bar/status-bar {:type :modal}]
[toolbar-view view-id unsigned-transactions] [toolbar-view view-id unsigned-transactions]
[main-section view-id tabs]])) [main-section view-id tabs]]))

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

@ -3,8 +3,7 @@
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
(def wallet-container (def wallet-container
{:flex 1 {:flex 1})
:background-color styles/color-white})
(def error-container (def error-container
{:align-self :center {:align-self :center
@ -20,7 +19,7 @@
:font-size 13}) :font-size 13})
(def toolbar (def toolbar
{:background-color styles/color-blue5 {:background-color (if platform/ios? styles/color-blue4 styles/color-blue5)
:elevation 0}) :elevation 0})
(def toolbar-title-container (def toolbar-title-container
@ -118,7 +117,8 @@
;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;
(def asset-section (def asset-section
{:background-color styles/color-white {:flex 1
:background-color styles/color-white
:padding-vertical 16}) :padding-vertical 16})
(def asset-section-title (def asset-section-title
@ -136,7 +136,12 @@
:color styles/color-black}) :color styles/color-black})
(def add-asset-icon (def add-asset-icon
{:border-radius 32 {:flex 1
:justify-content :center
:align-items :center
:width 40
:height 40
:border-radius 32
:background-color styles/color-blue4-transparent}) :background-color styles/color-blue4-transparent})
(def add-asset-text (def add-asset-text

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

@ -2,46 +2,43 @@
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [clojure.string :as string] (:require [clojure.string :as string]
[re-frame.core :as rf] [re-frame.core :as rf]
[status-im.components.common.common :as common]
[status-im.components.button.view :as btn] [status-im.components.button.view :as btn]
[status-im.components.drawer.view :as drawer] [status-im.components.drawer.view :as drawer]
[status-im.components.list.views :as list] [status-im.components.list.views :as list]
[status-im.components.react :as react] [status-im.components.react :as react]
[status-im.components.styles :as st] [status-im.components.styles :as styles]
[status-im.components.icons.vector-icons :as vi] [status-im.components.icons.vector-icons :as vi]
[status-im.components.toolbar-new.view :as toolbar] [status-im.components.toolbar-new.view :as toolbar]
[status-im.components.toolbar-new.actions :as act] [status-im.components.toolbar-new.actions :as act]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[status-im.utils.config :as config] [status-im.utils.config :as config]
[status-im.utils.platform :as platform]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[status-im.ui.screens.wallet.main.styles :as wallet-styles] [status-im.ui.screens.wallet.main.styles :as wallet.styles]
[status-im.ui.screens.wallet.views :as wallet.views] [status-im.ui.screens.wallet.views :as wallet.views]))
[status-im.utils.money :as money]))
(defn- show-not-implemented! [] (defn- show-not-implemented! []
(utils/show-popup "TODO" "Not implemented yet!")) (utils/show-popup "TODO" "Not implemented yet!"))
(defn toolbar-title [] (defn toolbar-title []
[react/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list]) [react/touchable-highlight {:on-press #(rf/dispatch [:navigate-to :wallet-list])
:style wallet-styles/toolbar-title-container} :style wallet.styles/toolbar-title-container}
[react/view {:style wallet-styles/toolbar-title-inner-container} [react/view {:style wallet.styles/toolbar-title-inner-container}
[react/text {:style wallet-styles/toolbar-title-text [react/text {:style wallet.styles/toolbar-title-text
:font :toolbar-title} :font :toolbar-title}
(i18n/label :t/main-wallet)] (i18n/label :t/main-wallet)]
[vi/icon [vi/icon
:icons/dropdown :icons/dropdown
{:container-style wallet-styles/toolbar-title-icon {:container-style wallet.styles/toolbar-title-icon
:color :white}]]]) :color :white}]]])
(def transaction-history-action (def transaction-history-action
{:icon :icons/transaction-history {:icon :icons/transaction-history
:icon-opts (merge {:color :white :style {:viewBox "-108 65.9 24 24"}} wallet-styles/toolbar-icon) :icon-opts (merge {:color :white :style {:viewBox "-108 65.9 24 24"}} wallet.styles/toolbar-icon)
:handler #(rf/dispatch [:navigate-to-modal :wallet-transactions])}) :handler #(rf/dispatch [:navigate-to-modal :wallet-transactions])})
(defn toolbar-view [] (defn toolbar-view []
[toolbar/toolbar2 {:style wallet-styles/toolbar} [toolbar/toolbar2 {:style wallet.styles/toolbar}
[toolbar/nav-button (act/hamburger-white drawer/open-drawer!)] [toolbar/nav-button (act/hamburger-white drawer/open-drawer!)]
[toolbar-title] [toolbar-title]
[toolbar/actions [toolbar/actions
@ -51,27 +48,27 @@
(defn- change-display [change] (defn- change-display [change]
(let [pos-change? (pos? change)] (let [pos-change? (pos? change)]
[react/view {:style (if pos-change? [react/view {:style (if pos-change?
wallet-styles/today-variation-container-positive wallet.styles/today-variation-container-positive
wallet-styles/today-variation-container-negative)} wallet.styles/today-variation-container-negative)}
[react/text {:style (if pos-change? [react/text {:style (if pos-change?
wallet-styles/today-variation-positive wallet.styles/today-variation-positive
wallet-styles/today-variation-negative)} wallet.styles/today-variation-negative)}
(if change (if change
(str (when pos-change? "+") change "%") (str (when pos-change? "+") change "%")
"-%")]])) "-%")]]))
(defn main-section [usd-value change error-message] (defn main-section [usd-value change error-message]
[react/view {:style wallet-styles/main-section} [react/view {:style wallet.styles/main-section}
(when error-message [wallet.views/error-message-view wallet-styles/error-container wallet-styles/error-message]) (when error-message [wallet.views/error-message-view wallet.styles/error-container wallet.styles/error-message])
[react/view {:style wallet-styles/total-balance-container} [react/view {:style wallet.styles/total-balance-container}
[react/view {:style wallet-styles/total-balance} [react/view {:style wallet.styles/total-balance}
[react/text {:style wallet-styles/total-balance-value} usd-value] [react/text {:style wallet.styles/total-balance-value} usd-value]
[react/text {:style wallet-styles/total-balance-currency} "USD"]] [react/text {:style wallet.styles/total-balance-currency} "USD"]]
[react/view {:style wallet-styles/value-variation} [react/view {:style wallet.styles/value-variation}
[react/text {:style wallet-styles/value-variation-title} [react/text {:style wallet.styles/value-variation-title}
(i18n/label :t/wallet-total-value)] (i18n/label :t/wallet-total-value)]
[change-display change]] [change-display change]]
[btn/buttons wallet-styles/buttons [btn/buttons wallet.styles/buttons
[{:text (i18n/label :t/wallet-send) [{:text (i18n/label :t/wallet-send)
:on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-send-transaction]) :on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-send-transaction])
:disabled? (not config/wallet-wip-enabled?)} :disabled? (not config/wallet-wip-enabled?)}
@ -83,7 +80,7 @@
(defn- token->image [id] (defn- token->image [id]
(case id (case id
"eth" {:source (:ethereum resources/assets) :style (wallet-styles/asset-border st/color-gray-transparent-light)})) "eth" {:source (:ethereum resources/assets) :style (wallet.styles/asset-border styles/color-gray-transparent-light)}))
(defn render-assets-fn [{:keys [id currency amount]}] (defn render-assets-fn [{:keys [id currency amount]}]
;; TODO(jeluard) Navigate to asset details screen ;; TODO(jeluard) Navigate to asset details screen
@ -92,19 +89,19 @@
[react/view [react/view
[list/item [list/item
[list/item-image {:uri :launch_logo}] [list/item-image {:uri :launch_logo}]
[react/view {:style wallet-styles/asset-item-value-container} [react/view {:style wallet.styles/asset-item-value-container}
[react/text {:style wallet-styles/asset-item-value} (str amount)] [react/text {:style wallet.styles/asset-item-value} (str amount)]
[react/text {:style wallet-styles/asset-item-currency [react/text {:style wallet.styles/asset-item-currency
:uppercase? true} :uppercase? true}
id]] id]]
[list/item-icon {:style :icons/forward}]]]] [list/item-icon {:icon :icons/forward}]]]]
[react/view [react/view
[list/item [list/item
(let [{:keys [source style]} (token->image id)] (let [{:keys [source style]} (token->image id)]
[list/item-image source style]) [list/item-image source style])
[react/view {:style wallet-styles/asset-item-value-container} [react/view {:style wallet.styles/asset-item-value-container}
[react/text {:style wallet-styles/asset-item-value} (str amount)] [react/text {:style wallet.styles/asset-item-value} (str amount)]
[react/text {:style wallet-styles/asset-item-currency [react/text {:style wallet.styles/asset-item-currency
:uppercase? true} :uppercase? true}
id]]]]) id]]]])
@ -112,15 +109,15 @@
[list/touchable-item show-not-implemented! [list/touchable-item show-not-implemented!
[react/view [react/view
[list/item [list/item
[list/item-icon {:icon :icons/add :style wallet-styles/add-asset-icon :icon-opts {:color :blue}}] [list/item-icon {:icon :icons/add :style wallet.styles/add-asset-icon :icon-opts {:color :blue}}]
[react/view {:style wallet-styles/asset-item-value-container} [react/view {:style wallet.styles/asset-item-value-container}
[react/text {:style wallet-styles/add-asset-text} [react/text {:style wallet.styles/add-asset-text}
(i18n/label :t/wallet-add-asset)]]]]]) (i18n/label :t/wallet-add-asset)]]]]])
(defn asset-section [eth prices-loading? balance-loading?] (defn asset-section [eth prices-loading? balance-loading?]
(let [assets [{:id "eth" :currency :eth :amount eth}]] (let [assets [{:id "eth" :currency :eth :amount eth}]]
[react/view {:style wallet-styles/asset-section} [react/view {:style wallet.styles/asset-section}
[react/text {:style wallet-styles/asset-section-title} (i18n/label :t/wallet-assets)] [react/text {:style wallet.styles/asset-section-title} (i18n/label :t/wallet-assets)]
[list/section-list [list/section-list
{:sections [{:key :assets {:sections [{:key :assets
:data assets :data assets
@ -139,8 +136,8 @@
prices-loading? [:prices-loading?] prices-loading? [:prices-loading?]
balance-loading? [:wallet/balance-loading?] balance-loading? [:wallet/balance-loading?]
error-message [:wallet/error-message?]] error-message [:wallet/error-message?]]
[react/view {:style wallet-styles/wallet-container} [react/view {:style wallet.styles/wallet-container}
[toolbar-view] [toolbar-view]
[react/scroll-view [react/view {:style styles/flex}
[main-section portfolio-value portfolio-change error-message] [main-section portfolio-value portfolio-change error-message]
[asset-section eth-balance prices-loading? balance-loading?]]])) [asset-section eth-balance prices-loading? balance-loading?]]]))

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

@ -83,15 +83,17 @@
:<- [:wallet/transactions] :<- [:wallet/transactions]
(fn [transactions] (fn [transactions]
(let [{:keys [postponed pending inbound outbound]} (group-by :type transactions) (let [{:keys [postponed pending inbound outbound]} (group-by :type transactions)
transaction-history-list [{:title "Postponed" transaction-history-list [(if postponed
{:title "Postponed"
:key :postponed :key :postponed
:data (or postponed [])} :data postponed})
(if pending
{:title "Pending" {:title "Pending"
:key :pending :key :pending
:data (or pending [])}] :data pending})]
completed-transactions (->> (into inbound outbound) completed-transactions (->> (into inbound outbound)
(group-by #(datetime/date->mini-str-date (:timestamp %))) (group-by #(datetime/date->mini-str-date (:timestamp %)))
(map (fn [[k v]] {:title k (map (fn [[k v]] {:title k
:key (mini-str-date->keyword k) :key (mini-str-date->keyword k)
:data v})))] :data v})))]
(into transaction-history-list (or completed-transactions []))))) (into (filterv (complement nil?) transaction-history-list) (or completed-transactions [])))))