Refresh control test (#19831)

src/status_im/common/refreshable_flat_list/view.cljs

@@ -0,0 +1,10 @@
+(ns status-im.common.refreshable-flat-list.view
+  (:require [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(defn view
+  [{:keys [refresh-control] :as props}]
+  [rn/flat-list
+   (merge {:refresh-control (reagent/as-element
+                             refresh-control)}
+          (dissoc props :refresh-control))])

src/status_im/contexts/wallet/home/style.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contexts.wallet.home.style
   (:require
+    [quo.foundations.colors :as colors]
     [react-native.safe-area :as safe-area]))
 
 (def tabs
@@ -22,3 +23,7 @@
   []
   {:margin-top (+ (safe-area/get-top) 8)
    :flex       1})
+
+(defn header-container
+  [theme]
+  {:background-color (colors/theme-colors colors/white colors/neutral-95 theme)})

src/status_im/contexts/wallet/home/view.cljs

@@ -1,8 +1,11 @@
 (ns status-im.contexts.wallet.home.view
   (:require
     [quo.core :as quo]
+    [quo.foundations.colors :as colors]
+    [quo.theme]
     [react-native.core :as rn]
     [status-im.common.home.top-nav.view :as common.top-nav]
+    [status-im.common.refreshable-flat-list.view :as refreshable-flat-list]
     [status-im.contexts.wallet.home.style :as style]
     [status-im.contexts.wallet.home.tabs.view :as tabs]
     [status-im.contexts.wallet.sheets.network-filter.view :as network-filter]
@@ -37,6 +40,27 @@
    (when (ff/enabled? ::ff/wallet.home-activity)
      {:id :activity :label (i18n/label :t/activity) :accessibility-label :activity-tab})])
 
+(defn- render-cards
+  [cards ref]
+  [rn/flat-list
+   {:ref                               #(reset! ref %)
+    :style                             style/accounts-list
+    :content-container-style           style/accounts-list-container
+    :data                              cards
+    :horizontal                        true
+    :separator                         [rn/view {:style style/separator}]
+    :render-fn                         (fn [item] [quo/account-card item])
+    :shows-horizontal-scroll-indicator false}])
+
+(defn- render-tabs
+  [data on-change default-active]
+  [quo/tabs
+   {:style          style/tabs
+    :size           32
+    :default-active default-active
+    :data           data
+    :on-change      #(on-change %)}])
+
 (defn view
   []
   (let [[selected-tab set-selected-tab] (rn/use-state (:id (first tabs-data)))
@@ -45,7 +69,9 @@
         networks                        (rf/sub [:wallet/selected-network-details])
         account-cards-data              (rf/sub [:wallet/account-cards-data])
         cards                           (conj account-cards-data (new-account-card-data))
-        {:keys [formatted-balance]}     (rf/sub [:wallet/aggregated-token-values-and-balance])]
+        [init-loaded? set-init-loaded]  (rn/use-state false)
+        {:keys [formatted-balance]}     (rf/sub [:wallet/aggregated-token-values-and-balance])
+        theme                           (quo.theme/use-theme)]
     (rn/use-effect (fn []
                      (when (and @account-list-ref (pos? (count cards)))
                        (.scrollToOffset ^js @account-list-ref
@@ -53,33 +79,32 @@
                                          {:animated true
                                           :offset   0})))
                    [(count cards)])
+    (rn/use-effect
+     #(when (and (boolean? tokens-loading?) (not tokens-loading?) (not init-loaded?))
+        (set-init-loaded true))
+     [tokens-loading?])
     [rn/view {:style (style/home-container)}
      [common.top-nav/view]
-     [rn/view
+     [refreshable-flat-list/view
-      [quo/wallet-overview
+      {:refresh-control       [rn/refresh-control
-       {:state             (if tokens-loading? :loading :default)
+                               {:refreshing (and tokens-loading? init-loaded?)
-        :time-frame        :none
+                                :colors     [colors/neutral-40]
-        :metrics           :none
+                                :tint-color colors/neutral-40
-        :balance           formatted-balance
+                                :on-refresh #(rf/dispatch [:wallet/get-accounts])}]
-        :networks          networks
+       :header                [rn/view {:style (style/header-container theme)}
-        :dropdown-on-press #(rf/dispatch [:show-bottom-sheet {:content network-filter/view}])}]]
+                               [quo/wallet-overview
-     (when (ff/enabled? ::ff/wallet.graph) [quo/wallet-graph {:time-frame :empty}])
+                                {:state             (if tokens-loading? :loading :default)
-     [rn/flat-list
+                                 :time-frame        :none
-      {:ref                               #(reset! account-list-ref %)
+                                 :metrics           :none
-       :style                             style/accounts-list
+                                 :balance           formatted-balance
-       :content-container-style           style/accounts-list-container
+                                 :networks          networks
-       :data                              cards
+                                 :dropdown-on-press #(rf/dispatch [:show-bottom-sheet
-       :horizontal                        true
+                                                                   {:content network-filter/view}])}]
-       :separator                         [rn/view {:style style/separator}]
+                               (when (ff/enabled? ::ff/wallet.graph)
-       :render-fn                         (fn [item] [quo/account-card item])
+                                 [quo/wallet-graph {:time-frame :empty}])
-       :shows-horizontal-scroll-indicator false}]
+                               [render-cards cards account-list-ref]
-     [quo/tabs
+                               [render-tabs tabs-data set-selected-tab selected-tab]]
-      {:style          style/tabs
+       :sticky-header-indices [0]
-       :size           32
+       :data                  []
-       :default-active selected-tab
+       :render-fn             #()
-       :data           tabs-data
+       :footer                [tabs/view {:selected-tab selected-tab}]}]]))
-       :on-change      (fn [tab]
-                         (when (= :activity tab)
-                           (rf/dispatch [:wallet/fetch-activities]))
-                         (set-selected-tab tab))}]
-     [tabs/view {:selected-tab selected-tab}]]))