replace with flatlist

status-im · May 6, 2024 · 57b1364 · 57b1364
1 parent 813bb8a
commit 57b1364
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 35 deletions.
diff --git a/...ponents/refreshable_scroll_view/view.cljs → ...omponents/refreshable_flat_list/view.cljs b/...ponents/refreshable_scroll_view/view.cljs → ...omponents/refreshable_flat_list/view.cljs
@@ -1,11 +1,10 @@
-(ns quo.components.refreshable-scroll-view.view
+(ns quo.components.refreshable-flat-list.view
   (:require [react-native.core :as rn]
             [reagent.core :as reagent]))
 
 (defn view
-  [{:keys [refresh-control] :as props} children]
-  [rn/scroll-view
+  [{:keys [refresh-control] :as props}]
+  [rn/flat-list
    (merge {:refresh-control (reagent/as-element
                              refresh-control)}
-          (dissoc props :refresh-control))
-   children])
+          (dissoc props :refresh-control))])
diff --git a/src/quo/core.cljs b/src/quo/core.cljs
@@ -121,7 +121,7 @@
     quo.components.profile.showcase-nav.view
     quo.components.record-audio.record-audio.view
     quo.components.record-audio.soundtrack.view
-    quo.components.refreshable-scroll-view.view
+    quo.components.refreshable-flat-list.view
     quo.components.selectors.disclaimer.view
     quo.components.selectors.filter.view
     quo.components.selectors.react-selector.view
@@ -449,4 +449,4 @@
 (def transaction-summary quo.components.wallet.transaction-summary.view/view)
 
 ;;;; refresh control as element
-(def refreshable-scroll-view quo.components.refreshable-scroll-view.view/view)
+(def refreshable-flat-list quo.components.refreshable-flat-list.view/view)
diff --git a/src/status_im/contexts/wallet/home/style.cljs b/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)})
diff --git a/src/status_im/contexts/wallet/home/view.cljs b/src/status_im/contexts/wallet/home/view.cljs
@@ -2,8 +2,8 @@
   (:require
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
+    [quo.theme]
     [react-native.core :as rn]
-    [reagent.core :as reagent]
     [status-im.common.home.top-nav.view :as common.top-nav]
     [status-im.contexts.wallet.home.style :as style]
     [status-im.contexts.wallet.home.tabs.view :as tabs]
@@ -69,7 +69,8 @@
         account-cards-data              (rf/sub [:wallet/account-cards-data])
         cards                           (conj account-cards-data (new-account-card-data))
         [init-loaded? set-init-loaded]  (rn/use-state false)
-        {:keys [formatted-balance]}     (rf/sub [:wallet/aggregated-token-values-and-balance])]
+        {: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
@@ -83,29 +84,26 @@
      [tokens-loading?])
     [rn/view {:style (style/home-container)}
      [common.top-nav/view]
-     [rn/flat-list
-      {:refresh-control (reagent/as-element
-                         [rn/refresh-control
-                          {:refreshing (and tokens-loading? init-loaded?)
-                           :colors     colors/neutral-40
-                           :tint-color colors/neutral-40
-                           :on-refresh #(rf/dispatch [:wallet/get-accounts])}])
-       :style           {:flex 1}
-       :header  (reagent/as-element
-                 [:<>
-                  [rn/view
-                   [quo/wallet-overview
-                    {:state             (if tokens-loading? :loading :default)
-                     :time-frame        :none
-                     :metrics           :none
-                     :balance           formatted-balance
-                     :networks          networks
-                     :dropdown-on-press #(rf/dispatch [:show-bottom-sheet {:content network-filter/view}])}]]
-                  (when (ff/enabled? ::ff/wallet.graph) [quo/wallet-graph {:time-frame :empty}])]) 
-       :data [{:cards cards
-               :tabs tabs-data}]
-       :render-fn (fn [item]
-                    [:<>
-                     [render-cards (:cards item) account-list-ref]
-                     [render-tabs (:tabs item) set-selected-tab selected-tab]])
-       :footer [tabs/view {:selected-tab selected-tab}]}]]))
+     [quo/refreshable-flat-list
+      {:refresh-control       [rn/refresh-control
+                               {:refreshing (and tokens-loading? init-loaded?)
+                                :colors     colors/neutral-40
+                                :tint-color colors/neutral-40
+                                :on-refresh #(rf/dispatch [:wallet/get-accounts])}]
+       :header                [rn/view {:style (style/header-container theme)}
+                               [quo/wallet-overview
+                                {:state             (if tokens-loading? :loading :default)
+                                 :time-frame        :none
+                                 :metrics           :none
+                                 :balance           formatted-balance
+                                 :networks          networks
+                                 :dropdown-on-press #(rf/dispatch [:show-bottom-sheet
+                                                                   {:content network-filter/view}])}]
+                               (when (ff/enabled? ::ff/wallet.graph)
+                                 [quo/wallet-graph {:time-frame :empty}])
+                               [render-cards cards account-list-ref]
+                               [render-tabs tabs-data set-selected-tab selected-tab]]
+       :sticky-header-indices [0]
+       :data                  []
+       :render-fn             #()
+       :footer                [tabs/view {:selected-tab selected-tab}]}]]))