convert to a separate component

status-im · May 1, 2024 · 23d10cc · 23d10cc
1 parent 7cbcfe1
commit 23d10cc
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 33 deletions.
diff --git a/src/quo/components/scroll_view/view.cljs b/src/quo/components/scroll_view/view.cljs
@@ -0,0 +1,11 @@
+(ns quo.components.scroll-view.view
+  (:require [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(defn view
+  [{:keys [refresh-control] :as props} children]
+  [rn/scroll-view
+   (merge {:refresh-control (reagent/as-element
+                             refresh-control)}
+          (dissoc props :refresh-control))
+   children])
diff --git a/src/quo/core.cljs b/src/quo/core.cljs
@@ -121,6 +121,7 @@
     quo.components.profile.showcase-nav.view
     quo.components.record-audio.record-audio.view
     quo.components.record-audio.soundtrack.view
+    quo.components.scroll-view.view
     quo.components.selectors.disclaimer.view
     quo.components.selectors.filter.view
     quo.components.selectors.react-selector.view
@@ -446,3 +447,6 @@
 (def wallet-activity quo.components.wallet.wallet-activity.view/view)
 (def transaction-progress quo.components.wallet.transaction-progress.view/view)
 (def transaction-summary quo.components.wallet.transaction-summary.view/view)
+
+;;;; refresh control as element
+(def scroll-view quo.components.scroll-view.view/view)
diff --git a/src/status_im/contexts/wallet/home/view.cljs b/src/status_im/contexts/wallet/home/view.cljs
@@ -3,7 +3,6 @@
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
     [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]
@@ -60,36 +59,36 @@
      [tokens-loading?])
     [rn/view {:style (style/home-container)}
      [common.top-nav/view]
-     [rn/scroll-view
-      {: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])}])
+     [quo/scroll-view
+      {: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])}]
        :style           {:flex 1}}
-      [rn/view {:style style/overview-container}
-       [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}])}]]
-      [quo/wallet-graph {:time-frame :empty}]
-      [rn/flat-list
-       {:ref                               #(reset! account-list-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}]
-      [quo/tabs
-       {:style          style/tabs
-        :size           32
-        :default-active selected-tab
-        :data           tabs-data
-        :on-change      #(set-selected-tab %)}]
-      [tabs/view {:selected-tab selected-tab}]]]))
+      [:<>
+       [rn/view {:style style/overview-container}
+        [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}])}]]
+       [quo/wallet-graph {:time-frame :empty}]
+       [rn/flat-list
+        {:ref                               #(reset! account-list-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}]
+       [quo/tabs
+        {:style          style/tabs
+         :size           32
+         :default-active selected-tab
+         :data           tabs-data
+         :on-change      #(set-selected-tab %)}]
+       [tabs/view {:selected-tab selected-tab}]]]]))