diff --git a/src/status_im/common/refreshable_flat_list/view.cljs b/src/status_im/common/refreshable_flat_list/view.cljs new file mode 100644 index 0000000000..2f82f79f6c --- /dev/null +++ b/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))]) diff --git a/src/status_im/contexts/wallet/home/style.cljs b/src/status_im/contexts/wallet/home/style.cljs index a38b708388..030799f652 100644 --- 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 index 3d37453a4b..809089e298 100644 --- a/src/status_im/contexts/wallet/home/view.cljs +++ b/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 - [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}]) - [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 (fn [tab] - (when (= :activity tab) - (rf/dispatch [:wallet/fetch-activities])) - (set-selected-tab tab))}] - [tabs/view {:selected-tab selected-tab}]])) + [refreshable-flat-list/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])}] + :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}]}]]))