From e8602eb3bdbae512b3b0c8cb0ef1cbb5e601b401 Mon Sep 17 00:00:00 2001 From: janherich Date: Mon, 16 Oct 2017 16:11:56 +0200 Subject: [PATCH] Display time in transaction history list Also make `[list/item-content]` element more modular and reusable as it was necessary to accomplish the task. --- src/status_im/components/list/styles.cljs | 2 +- src/status_im/components/list/views.cljs | 26 ++++++--- .../screens/wallet/transactions/styles.cljs | 39 +++++++++++++ .../ui/screens/wallet/transactions/subs.cljs | 5 +- .../ui/screens/wallet/transactions/views.cljs | 55 +++++++++++++------ src/status_im/utils/datetime.cljs | 5 ++ 6 files changed, 102 insertions(+), 30 deletions(-) diff --git a/src/status_im/components/list/styles.cljs b/src/status_im/components/list/styles.cljs index 943e03f8c8..587704bf21 100644 --- a/src/status_im/components/list/styles.cljs +++ b/src/status_im/components/list/styles.cljs @@ -67,4 +67,4 @@ :android {:margin-top 11 :margin-bottom 3} :ios {:margin-top 10 - :margin-bottom 2}}) \ No newline at end of file + :margin-bottom 2}}) diff --git a/src/status_im/components/list/views.cljs b/src/status_im/components/list/views.cljs index b440c8491e..430fea47d8 100644 --- a/src/status_im/components/list/views.cljs +++ b/src/status_im/components/list/views.cljs @@ -5,7 +5,9 @@ (defn render [{:keys [title subtitle]}] [item [item-icon {:icon :dots_vertical_white}] - [item-content title subtitle] + [item-content + [item-primary title] + [item-secondary subtitle]] [item-icon {:icon :arrow_right_gray}]]) [flat-list {:data [{:title \"\" :subtitle \"\"}] :render-fn render}] @@ -54,15 +56,21 @@ [rn/image {:source source :style lst/item-image}]])) +(defn item-primary + [primary] + [rn/text {:style lst/primary-text} primary]) + +(defn item-primary-only + [primary] + [rn/text {:style lst/primary-text-only} primary]) + +(defn item-secondary + [secondary] + [rn/text {:style lst/secondary-text :ellipsize-mode "middle" :number-of-lines 1} secondary]) + (defn item-content - ([primary] (item-content primary nil)) - ([primary secondary] (item-content primary secondary nil)) - ([primary secondary extra] - [rn/view {:style lst/item-text-view} - [rn/text {:style (if secondary lst/primary-text lst/primary-text-only)} primary] - (when secondary - [rn/text {:style lst/secondary-text :ellipsize-mode "middle" :number-of-lines 1} secondary]) - extra])) + [& children] + (into [rn/view {:style lst/item-text-view}] (keep identity children))) (defn- wrap-render-fn [f] (fn [data] diff --git a/src/status_im/ui/screens/wallet/transactions/styles.cljs b/src/status_im/ui/screens/wallet/transactions/styles.cljs index 4b5bb076a7..d286e9f5e5 100644 --- a/src/status_im/ui/screens/wallet/transactions/styles.cljs +++ b/src/status_im/ui/screens/wallet/transactions/styles.cljs @@ -51,6 +51,45 @@ :margin-top 22 :margin-horizontal 92}) +(defstyle amount-time + {:flex-direction :row + :justify-content :space-between + :ios {:padding-top 13} + :android {:padding-top 14}}) + +(def tx-amount + {:flex-grow 1 + :flex-shrink 1 + :margin-right 10 + :font-size 17}) + +(def tx-time + {:flex-grow 1 + :font-size 14 + :text-align :right + :color styles/color-gray4}) + +(def address-row + {:flex-direction :row + :padding-top 4}) + +(def address-item + {:font-size 16 + :color styles/color-gray4}) + +(def address-label + (merge address-item + {:margin-right 5})) + +(def address-contact + (merge address-item + {:color styles/color-black + :margin-right 5})) + +(def address-hash + (merge address-item + {:flex-shrink 1})) + (def action-buttons {:flex 1 :flex-direction :row diff --git a/src/status_im/ui/screens/wallet/transactions/subs.cljs b/src/status_im/ui/screens/wallet/transactions/subs.cljs index 31d0c33615..dd962917ea 100644 --- a/src/status_im/ui/screens/wallet/transactions/subs.cljs +++ b/src/status_im/ui/screens/wallet/transactions/subs.cljs @@ -21,7 +21,7 @@ (fn [wallet] (get wallet :current-tab 0))) -(defn enrich-transaction [{:keys [type to from] :as transaction} contacts] +(defn enrich-transaction [{:keys [type to from timestamp] :as transaction} contacts] ;; TODO (yenda) proper wallet logic when wallet switching is implemented (let [[contact-address key-contact key-wallet] (if (= type :inbound) [from :from-contact :to-wallet] @@ -30,7 +30,8 @@ contact (get contacts (utils.hex/normalize-hex contact-address))] (cond-> transaction contact (assoc key-contact (:name contact)) - :always (assoc key-wallet wallet)))) + :always (assoc key-wallet wallet + :time-formatted (datetime/timestamp->time timestamp))))) (reg-sub :wallet.transactions/transactions :<- [:wallet] diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index 145bf05ff9..08ac7ef9b8 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -1,7 +1,7 @@ (ns status-im.ui.screens.wallet.transactions.views (:require [re-frame.core :as re-frame] [status-im.components.button.view :as button] - [status-im.components.checkbox.view :as checkbox] + [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] @@ -71,21 +71,37 @@ (:postponed :pending) (transaction-icon :icons/arrow-right styles/color-gray4-transparent styles/color-gray7) (throw (str "Unknown transaction type: " k)))) -(defn render-transaction [{:keys [hash from-contact to-contact to from type value symbol] :as transaction}] - [list/touchable-item #(re-frame/dispatch [:show-transaction-details hash]) - [react/view - [list/item - [list/item-icon (transaction-type->icon (keyword type))] - [list/item-content - (money/wei->str :eth value) - (if (inbound? type) - (str (i18n/label :t/from) " " from-contact " " from) - (str (i18n/label :t/to) " " to-contact " " to)) - (when (unsigned? type) - [action-buttons transaction])] - [list/item-icon {:icon :icons/forward - :style {:margin-top 10} - :icon-opts transactions.styles/forward}]]]]) +(defn render-transaction [{:keys [hash from-contact to-contact to from type value symbol time-formatted] :as transaction}] + (let [[label contact address] (if (inbound? type) + [(i18n/label :t/from) from-contact from] + [(i18n/label :t/to) to-contact to])] + [list/touchable-item #(re-frame/dispatch [:show-transaction-details hash]) + [react/view + [list/item + [list/item-icon (transaction-type->icon (keyword type))] + [list/item-content + [react/view {:style transactions.styles/amount-time} + [react/text {:style transactions.styles/tx-amount + :ellipsize-mode "tail" + :number-of-lines 1} + (money/wei->str :eth value)] + [react/text {:style transactions.styles/tx-time} + time-formatted]] + [react/view {:style transactions.styles/address-row} + [react/text {:style transactions.styles/address-label} + label] + (when contact + [react/text {:style transactions.styles/address-contact} + contact]) + [react/text {:style transactions.styles/address-hash + :ellipsize-mode "middle" + :number-of-lines 1} + address]] + (when (unsigned? type) + [action-buttons transaction])] + [list/item-icon {:icon :icons/forward + :style {:margin-top 10} + :icon-opts transactions.styles/forward}]]]])) ;; TODO(yenda) hook with re-frame (defn- empty-text [s] [react/text {:style transactions.styles/empty-text} s]) @@ -115,13 +131,16 @@ (defn- item-tokens [{:keys [symbol label checked?]}] [list/item [list/item-icon (transaction-type->icon :pending)] ;; TODO(jeluard) add proper token data - [list/item-content label symbol] + [list/item-content + [list/item-primary label] + [list/item-secondary symbol]] [checkbox/checkbox {:checked? true #_checked?}]]) (defn- item-type [{:keys [id label checked?]}] [list/item [list/item-icon (transaction-type->icon (keyword id))] - [list/item-content label] + [list/item-content + [list/item-primary-only label]] [checkbox/checkbox checked?]]) (def filter-data diff --git a/src/status_im/utils/datetime.cljs b/src/status_im/utils/datetime.cljs index 84bc8ce937..d00b4b5e4d 100644 --- a/src/status_im/utils/datetime.cljs +++ b/src/status_im/utils/datetime.cljs @@ -39,6 +39,11 @@ from-long (plus time-zone-offset)))) +(defn timestamp->time [ms] + (unparse (formatter "HH:mm") (-> ms + from-long + (plus time-zone-offset)))) + (defn timestamp->date-key [ms] (keyword (unparse (formatter "YYYYMMDD") (-> ms from-long