status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.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

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

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

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

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

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

@ -12,6 +12,8 @@
(def color-purple "#a187d5")
(def color-gray-transparent-light "rgba(0, 0, 0, 0.1)")
(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-gray2 "#8f838c93")
(def color-gray3 "#00000040")
@ -46,6 +48,8 @@
(def color-light-red2 "#f47979")
(def color-green-1 "#a8f4d4")
(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-separator "#D6D6D6")

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

@ -28,27 +28,29 @@
:alignItems :center})
(def tab
{:flex 1
:height tab-height
:justifyContent :center
:alignItems :center})
{:flex 1
:height tab-height
:justify-content :center
:align-items :center
:border-bottom-width 2
:border-bottom-color styles/color-white})
(defnstyle tab-title [active?]
{:ios {:font-size 11}
:android {:font-size 12}
(defnstyle tab-title [active? text-only?]
{:ios {:font-size (if text-only? 15 11)}
:android {:font-size (if text-only? 14 12)}
:margin-top 3
:min-width 60
: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?]
{:color (if active? styles/color-blue4 styles/color-gray4)})
(def tab-container
{:flex 1
:height tab-height
:justifyContent :center
:alignItems :center})
{:flex 1
:height tab-height
:justify-content :center
:align-items :center})
(def swiper
{: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.utils.platform :as p]))
(defn- tab [{:keys [view-id title icon-active icon-inactive selected-view-id on-press]}]
(let [active? (= view-id selected-view-id)]
[react/touchable-highlight {:style styles/tab
(defn- tab [{:keys [view-id title icon-active icon-inactive style-active selected-view-id on-press]}]
(let [active? (= view-id selected-view-id)
text-only? (nil? icon-active)]
[react/touchable-highlight {:style (merge styles/tab (if (and active? style-active) style-active))
:disabled active?
:on-press #(if on-press (on-press view-id) (dispatch [:navigate-to-tab view-id]))}
[react/view {:style styles/tab-container}
@ -19,29 +20,29 @@
[react/view
[vi/icon icon (styles/tab-icon active?)]])
[react/view
[react/text (merge (if-not icon-active {:uppercase? (get-in p/platform-specific [:uppercase?])})
{:style (styles/tab-title active?)})
[react/text (merge (if text-only? {:uppercase? (get-in p/platform-specific [:uppercase?])})
{:style (styles/tab-title active? text-only?)})
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
:index index
:style-active style-active
:selected-view-id selected-view-id
:on-press on-press})]
[tab data]))
(defview tabs-container [style children]
(letsubs [tabs-hidden? [:tabs-hidden?]]
[react/animated-view {:style (merge style
styles/tabs-container-line)
[react/animated-view {:style style
:pointer-events (if tabs-hidden? :none :auto)}
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
(into
[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
@ -82,7 +83,7 @@
(reset! scrolling? false)
(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)
main-swiper (r/atom nil)
scroll-start (async/chan 10)
@ -103,6 +104,8 @@
[react/view {:style style}
[tabs {:selected-view-id @view-id
:tab-list tab-list
:style style-tabs
:style-tab-active style-tab-active
:on-press on-view-change}]
[react/swiper (merge styles/swiper
{: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
(: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]))
(def toolbar-background1 st/color-white)
(def toolbar-background1 styles/color-white)
(def toolbar-icon-width 24)
(def toolbar-icon-height 24)
(def toolbar-icon-spacing 24)
(defn toolbar-wrapper [background-color]
{:backgroundColor (or background-color toolbar-background1)
:elevation 2})
(defn toolbar-wrapper [background-color flat?]
{:background-color (or background-color toolbar-background1)
:elevation (if flat? 0 2)})
(defstyle toolbar
{:flex-direction :row
@ -31,7 +31,7 @@
:ios {:align-items :center}})
(defstyle toolbar-title-text
{:color st/text1-color
{:color styles/text1-color
:letter-spacing -0.2
:font-size 17
:ios {:text-align "center"}})
@ -72,7 +72,7 @@
:padding-left 0
:padding-bottom 0
:text-align-vertical :center
:color st/color-black
:color styles/color-black
:ios {:padding-left 8
:padding-top 2
:letter-spacing -0.2}})
@ -95,10 +95,10 @@
:android {:margin 16}})
(def item-text
{:color st/color-blue4
{:color styles/color-blue4
: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})

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

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

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

@ -23,7 +23,7 @@
:color styles/color-transparent}
:wallet {:height 20
:bar-style "light-content"
:color styles/color-blue5}}
:color styles/color-blue4}}
:sized-text {:margin-top -5
:additional-height 5}
: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
(map-indexed (fn [index {vid :view-id screen :screen}]
^{: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
: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 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
:font-size 13})
(def main-section styles/flex)
(def wallet-transactions-container
{:flex 1
:background-color styles/color-white})
(def tabs
{:border-bottom-width 1
:border-bottom-color styles/color-gray10-transparent})
(def main-section
{:flex 1
:position :relative
:background-color styles/color-white})
(def tab-active
{:border-bottom-width 2
:border-bottom-color styles/color-blue4})
(def forward
{:color styles/color-gray7})
(def empty-text
{:text-align :center
@ -78,5 +81,10 @@
{:background-color :transparent})
(defn transaction-icon-background [color]
{:border-radius 32
:background-color styles/color-blue4-transparent})
{:flex 1
:justify-content :center
:align-items :center
:width 40
:height 40
:border-radius 32
:background-color color})

38
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.list.views :as list]
[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.toolbar-new.view :as toolbar]
[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])})
(defn toolbar-view [view-id unsigned-transactions]
[toolbar/toolbar2 {}
[toolbar/toolbar2 {:flat? true}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/transactions)]
(case @view-id
@ -49,17 +51,15 @@
[button/secondary-button {:text (i18n/label :t/delete) :on-press #(on-delete-transaction m)}]])
(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]
(case s
"inbound" (transaction-icon :icons/arrow-left :red)
"outbound" (transaction-icon :icons/arrow-right :red)
"postponed" (transaction-icon :icons/arrow-right :red)
"unsigned" (transaction-icon :icons/dots-horizontal :red)
"pending" (transaction-icon :icons/dots-horizontal :red)
"unsigned" (transaction-icon :icons/dots-horizontal styles/color-gray4-transparent styles/color-gray7)
"inbound" (transaction-icon :icons/arrow-left styles/color-green-3-light styles/color-green-3)
"outbound" (transaction-icon :icons/arrow-right styles/color-blue4-transparent styles/color-blue4)
("postponed" "pending") (transaction-icon :icons/arrow-right styles/color-gray4-transparent styles/color-gray7)
(throw (str "Unknown transaction type: " s))))
(defn render-transaction [{:keys [to from type value symbol] :as m}]
@ -72,7 +72,7 @@
(str (i18n/label :t/from) " " from))
(when (unsigned? type)
[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
(defn- empty-text [s] [react/text {:style history.styles/empty-text} s])
@ -81,7 +81,7 @@
(letsubs [transactions-history-list [:wallet/transactions-history-list]
transactions-loading? [:wallet/transactions-loading?]
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])
[list/section-list {:sections transactions-history-list
:render-fn render-transaction
@ -91,7 +91,7 @@
(defview unsigned-list [transactions]
[]
[react/scroll-view
[react/scroll-view {:style styles/flex}
[list/flat-list {:data transactions
:render-fn render-transaction
:empty-component (empty-text (i18n/label :t/transactions-unsigned-empty))}]])
@ -168,12 +168,13 @@
[react/scroll-view
[list/section-list {:sections filter-data}]]])
(defn- main-section [view-id tabs ]
(let [prev-view-id (reagent/atom @view-id)]
[tabs/swipable-tabs {:style history.styles/main-section
:on-view-change #(do (reset! prev-view-id @view-id)
(reset! view-id %))}
(defn- main-section [view-id tabs]
(let [prev-view-id (reagent/atom @view-id)]
[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)
(reset! view-id %))}
tabs prev-view-id view-id]))
;; TODO(yenda) must reflect selected wallet
@ -183,6 +184,7 @@
(let [tabs (tab-list unsigned-transactions)
default-view (get-in tabs [0 :view-id])
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]
[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]))
(def wallet-container
{:flex 1
:background-color styles/color-white})
{:flex 1})
(def error-container
{:align-self :center
@ -20,7 +19,7 @@
:font-size 13})
(def toolbar
{:background-color styles/color-blue5
{:background-color (if platform/ios? styles/color-blue4 styles/color-blue5)
:elevation 0})
(def toolbar-title-container
@ -118,7 +117,8 @@
;;;;;;;;;;;;;;;;;;;;
(def asset-section
{:background-color styles/color-white
{:flex 1
:background-color styles/color-white
:padding-vertical 16})
(def asset-section-title
@ -136,7 +136,12 @@
:color styles/color-black})
(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})
(def add-asset-text

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

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

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