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

@@ -67,4 +67,4 @@
    :android         {:margin-top    11
                      :margin-bottom 3}
    :ios             {:margin-top    10
-                     :margin-bottom 2}})
+                     :margin-bottom 2}})

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))
+  [& children]
-  ([primary secondary] (item-content primary secondary nil))
+  (into [rn/view {:style lst/item-text-view}] (keep identity children)))
-  ([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]))
 
 (defn- wrap-render-fn [f]
   (fn [data]

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

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]

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}]
+(defn render-transaction [{:keys [hash from-contact to-contact to from type value symbol time-formatted] :as transaction}]
-  [list/touchable-item #(re-frame/dispatch [:show-transaction-details hash])
+  (let [[label contact address] (if (inbound? type)
-   [react/view
+                                  [(i18n/label :t/from) from-contact from]
-    [list/item
+                                  [(i18n/label :t/to) to-contact to])]
-     [list/item-icon (transaction-type->icon (keyword type))]
+    [list/touchable-item #(re-frame/dispatch [:show-transaction-details hash])
-     [list/item-content
+     [react/view
-      (money/wei->str :eth value)
+      [list/item
-      (if (inbound? type)
+       [list/item-icon (transaction-type->icon (keyword type))]
-        (str (i18n/label :t/from) " " from-contact " " from)
+       [list/item-content
-        (str (i18n/label :t/to) " " to-contact " " to))
+        [react/view {:style transactions.styles/amount-time}
-      (when (unsigned? type)
+         [react/text {:style transactions.styles/tx-amount
-        [action-buttons transaction])]
+                      :ellipsize-mode "tail"
-     [list/item-icon {:icon :icons/forward
+                      :number-of-lines 1}
-                      :style {:margin-top 10}
+          (money/wei->str :eth value)]
-                      :icon-opts transactions.styles/forward}]]]])
+         [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

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