[bug] fix 2003 unsigned transaction count upon expiration

this fixed involved changing the swiper so that a function can be passed as
title instead of a string.
this allows developpers to pass custom elements as titles and still use style
and variables that are computed when tab is built

src/status_im/components/styles.cljs

@@ -25,6 +25,7 @@
 (def color-gray7 "#9fa3b4")
 (def color-gray8 "#6E777E")
 (def color-gray9 "#E9EBEC")
+(def color-gray10 "#9BA3A8")
 (def color-dark "#49545d")
 (def color-steel "#838b91")
 (def color-white "white")

src/status_im/components/tabs/styles.cljs

@@ -35,11 +35,13 @@
    :border-bottom-width 2
    :border-bottom-color styles/color-white})
 
+(def tab-title-wrapper
+  {:min-width  60
+   :margin-top 3})
+
 (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      (cond
                  active? styles/color-blue4

src/status_im/components/tabs/views.cljs

@@ -9,20 +9,25 @@
             [status-im.components.tabs.styles :as tabs.styles]
             [status-im.utils.platform :as platform]))
 
-(defn- tab [{:keys [view-id title icon-active icon-inactive style-active selected-view-id on-press]}]
+(defn- tab [{:keys [view-id title title-fn icon-active icon-inactive style-active selected-view-id on-press]
+             :or {title-fn react/text}}]
   (let [active? (= view-id selected-view-id)
         text-only? (nil? icon-active)]
-    [react/touchable-highlight {:style    (merge tabs.styles/tab (if (and active? style-active) style-active))
+    [react/touchable-highlight {:style    (merge tabs.styles/tab
+                                                 (when (and active? style-active)
+                                                   style-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 tabs.styles/tab-container}
       (when-let [icon (if active? icon-active icon-inactive)]
         [react/view
          [vi/icon icon (tabs.styles/tab-icon active?)]])
-      [react/view
+      [react/view {:style tabs.styles/tab-title-wrapper}
-       [react/text (merge (if text-only? {:uppercase? (get-in platform/platform-specific [:uppercase?])})
+       (title-fn {:uppercase? (and text-only? (get-in platform/platform-specific [:uppercase?]))
-                          {:style (tabs.styles/tab-title active? text-only?)})
+                  :style      (tabs.styles/tab-title active? text-only?)}
-        title]]]]))
+                 title)]]]))
 
 (defn- create-tab [index data selected-view-id on-press style-active]
   (let [data (merge data {:key              index
@@ -90,28 +95,29 @@
         scroll-ended      (async/chan 10)]
     (r/create-class
       {:component-did-mount
-                     #(start-scrolling-loop scroll-start scroll-ended)
+       #(start-scrolling-loop scroll-start scroll-ended)
        :component-will-update
-                     (fn []
+       (fn []
-                       (if @swiped?
+         (if @swiped?
-                         (reset! swiped? false)
+           (reset! swiped? false)
-                         (when @main-swiper
+           (when @main-swiper
-                           (let [to (scroll-to tab-list @prev-view-id @view-id)]
+             (let [to (scroll-to tab-list @prev-view-id @view-id)]
-                             (async/put! scroll-start [@main-swiper to])))))
+               (async/put! scroll-start [@main-swiper to])))))
        :display-name "swipable-tabs"
        :reagent-render
-                     (fn []
+       (fn []
-                       [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            style-tabs
-                               :style-tab-active style-tab-active
+                 :style-tab-active style-tab-active
-                               :on-press         on-view-change}]
+                 :on-press         on-view-change}]
-                        [react/swiper (merge tabs.styles/swiper
+          [react/swiper (merge tabs.styles/swiper
-                                             {:index                  (get-tab-index tab-list @view-id)
+                               {:index                  (get-tab-index tab-list @view-id)
-                                              :ref                    #(reset! main-swiper %)
+                                :ref                    #(reset! main-swiper %)
-                                              :loop                   false
+                                :loop                   false
-                                              :on-momentum-scroll-end (on-scroll-end on-view-change tab-list swiped? scroll-ended view-id)})
+                                :on-momentum-scroll-end (on-scroll-end on-view-change tab-list swiped? scroll-ended view-id)})
-                         (doall
+           (doall
-                           (map-indexed (fn [index {screen :screen}]
+            (map-indexed (fn [index {screen :screen}]
-                                          (with-meta screen {:key index})) tab-list))]])})))
+                           (with-meta screen {:key index}))
+                         tab-list))]])})))

src/status_im/ui/screens/wallet/transactions/views.cljs

@@ -120,17 +120,25 @@
                       :render-fn       render-transaction
                       :empty-component (empty-text (i18n/label :t/transactions-unsigned-empty))}]]))
 
-(defn- unsigned-transactions-title [unsigned-transactions-count]
+(defn unsigned-transactions-title [{:keys [uppercase? style]} title]
-  (str (i18n/label :t/transactions-unsigned)
+  (let [unsigned-transactions-count (re-frame/subscribe [:wallet.transactions/unsigned-transactions-count])]
-       (if (pos? unsigned-transactions-count) (str " " unsigned-transactions-count))))
+    [react/view {:flex-direction :row}
+     [react/text {:style style
+                  :uppercase? uppercase?}
+      (i18n/label :t/transactions-unsigned)]
+     (when (pos? @unsigned-transactions-count)
+       [react/text {:style (merge
+                            style
+                            {:color styles/color-gray10})}
+        (str " " @unsigned-transactions-count)])]))
 
 (defn- tab-list [unsigned-transactions-count]
   [{:view-id :wallet-transactions-history
     :title   (i18n/label :t/transactions-history)
     :screen  [history-list]}
-   {:view-id :wallet-transactions-unsigned
+   {:view-id  :wallet-transactions-unsigned
-    :title   (unsigned-transactions-title unsigned-transactions-count)
+    :title-fn unsigned-transactions-title
-    :screen  [unsigned-list]}])
+    :screen   [unsigned-list]}])
 
 ;; Filter history