[#11849] Move pull to refresh to the account overview screen

src/quo/components/animated_header.cljs

@@ -44,7 +44,7 @@
         offset          (reagent/atom 0)
         on-layout       (fn [evt]
                           (reset! offset (oget evt "nativeEvent" "layout" "height")))]
-    (fn [{:keys [extended-header] :as props} children]
+    (fn [{:keys [extended-header refresh-control refreshing-sub refreshing-counter] :as props} children]
       [animated/view {:flex           1
                       :pointer-events :box-none}
        [animated/code {:key  (str @offset)
@@ -67,6 +67,10 @@
                          :title-align     :left}
                         (dissoc props :extended-header))]]
        (into [animated/scroll-view {:on-scroll           on-scroll
+                                    :refreshControl      (when refresh-control
+                                                           (refresh-control
+                                                            (and @refreshing-sub
+                                                                 @refreshing-counter)))
                                     :style               {:z-index 1}
                                     :scrollEventThrottle 16}
               [animated/view {:pointer-events :box-none}

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

@@ -18,9 +18,7 @@
             [status-im.utils.money :as money]
             [status-im.wallet.utils :as wallet.utils]
             [status-im.ui.components.tabs :as tabs]
-            [quo.react-native :as rn]
+            [quo.design-system.colors :as quo-colors])
-            [quo.design-system.colors :as quo-colors]
-            [status-im.utils.utils :as utils.utils])
   (:require-macros [status-im.utils.views :as views]))
 
 (def state (reagent/atom {:tab :assets}))
@@ -58,8 +56,11 @@
       [react/touchable-highlight {:on-press #(re-frame/dispatch [:wallet/share-popover address])}
        [icons/icon :main-icons/share {:color                      colors/white-persist
                                       :accessibility-label :share-wallet-address-icon}]]]
-     [react/view {:height                     button-group-height :background-color          colors/black-transparent-20
+     [react/view {:height                     button-group-height
-                  :border-bottom-right-radius 8                   :border-bottom-left-radius 8 :flex-direction :row}
+                  :background-color           colors/black-transparent-20
+                  :border-bottom-right-radius 8
+                  :border-bottom-left-radius  8
+                  :flex-direction             :row}
       (if (= type :watch)
         [react/view {:flex 1 :align-items :center :justify-content :center}
          [react/text {:style {:margin-left 8 :color colors/white-persist}}
@@ -180,29 +181,6 @@
             (styles/bottom-send-recv-buttons-lower anim-y button-group-height)
             #(reset! to-show false))))))))
 
-;; Note(rasom): sometimes `refreshing` might get stuck on iOS if action happened
-;; too fast. By updating this atom in 1s we ensure that `refreshing?` property
-;; is updated properly in this case.
-(def updates-counter (reagent/atom 0))
-
-(defn schedule-counter-reset []
-  (utils.utils/set-timeout
-   (fn []
-     (swap! updates-counter inc)
-     (when @(re-frame/subscribe [:wallet/refreshing-history?])
-       (schedule-counter-reset)))
-   1000))
-
-(defn refresh-action []
-  (schedule-counter-reset)
-  (re-frame/dispatch [:wallet.ui/pull-to-refresh-history]))
-
-(defn refresh-control [refreshing?]
-  (reagent/as-element
-   [rn/refresh-control
-    {:refreshing (boolean refreshing?)
-     :onRefresh  refresh-action}]))
-
 (views/defview account []
   (views/letsubs [{:keys [name address] :as account} [:multiaccount/current-account]
                   fetching-error [:wallet/fetching-error]]
@@ -223,9 +201,9 @@
                                  [{:nativeEvent {:contentOffset {:y scroll-y}}}]
                                  {:useNativeDriver true})
          :scrollEventThrottle   1
-         :refreshControl        (refresh-control
+         :refreshControl        (accounts/refresh-control
                                  (and
-                                  @updates-counter
+                                  @accounts/updates-counter
                                   @(re-frame/subscribe [:wallet/refreshing-history?])))}
         (when fetching-error
           [react/view {:style {:flex 1

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

@@ -14,7 +14,9 @@
             [status-im.ui.screens.wallet.accounts.styles :as styles]
             [status-im.qr-scanner.core :as qr-scanner]
             [status-im.wallet.utils :as wallet.utils]
-            [status-im.keycard.login :as keycard.login])
+            [status-im.keycard.login :as keycard.login]
+            [quo.react-native :as rn]
+            [status-im.utils.utils :as utils.utils])
   (:require-macros [status-im.utils.views :as views]))
 
 (views/defview account-card [{:keys [name color address type wallet] :as account} keycard? card-width]
@@ -190,21 +192,48 @@
         [quo/text {:color :secondary}
          (i18n/label :t/wallet-total-value)]])]))
 
+;; Note(rasom): sometimes `refreshing` might get stuck on iOS if action happened
+;; too fast. By updating this atom in 1s we ensure that `refreshing?` property
+;; is updated properly in this case.
+(def updates-counter (reagent/atom 0))
+
+(defn schedule-counter-reset []
+  (utils.utils/set-timeout
+   (fn []
+     (swap! updates-counter inc)
+     (when @(re-frame/subscribe [:wallet/refreshing-history?])
+       (schedule-counter-reset)))
+   1000))
+
+(defn refresh-action []
+  (schedule-counter-reset)
+  (re-frame/dispatch [:wallet.ui/pull-to-refresh-history]))
+
+(defn refresh-control [refreshing?]
+  (reagent/as-element
+   [rn/refresh-control
+    {:refreshing (boolean refreshing?)
+     :onRefresh  refresh-action}]))
+
 (defn accounts-overview []
   (let [mnemonic @(re-frame/subscribe [:mnemonic])]
-    [react/view {:flex 1}
+    [react/view
+     {:style {:flex 1}}
      [quo/animated-header
-      {:extended-header   total-value
+      {:extended-header    total-value
-       :use-insets        true
+       :refresh-control    refresh-control
-       :right-accessories [{:on-press            #(re-frame/dispatch
+       :refreshing-sub     (re-frame/subscribe [:wallet/refreshing-history?])
-                                                   [::qr-scanner/scan-code
+       :refreshing-counter updates-counter
-                                                    {:handler :wallet.send/qr-scanner-result}])
+       :use-insets         true
-                            :icon                :main-icons/qr
+       :right-accessories  [{:on-press            #(re-frame/dispatch
-                            :accessibility-label :accounts-qr-code}
+                                                    [::qr-scanner/scan-code
-                           {:on-press            #(re-frame/dispatch [:bottom-sheet/show-sheet
+                                                     {:handler :wallet.send/qr-scanner-result}])
-                                                                      {:content (sheets/accounts-options mnemonic)}])
+                             :icon                :main-icons/qr
-                            :icon                :main-icons/more
+                             :accessibility-label :accounts-qr-code}
-                            :accessibility-label :accounts-more-options}]}
+                            {:on-press            #(re-frame/dispatch [:bottom-sheet/show-sheet
+                                                                       {:content (sheets/accounts-options mnemonic)}])
+                             :icon                :main-icons/more
+                             :accessibility-label :accounts-more-options}]}
       [accounts]
       [buy-crypto/banner]
       [assets]