diff --git a/src/quo/components/animated_header.cljs b/src/quo/components/animated_header.cljs index c301a220d5..7e7bab5e6f 100644 --- a/src/quo/components/animated_header.cljs +++ b/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} diff --git a/src/status_im/ui/screens/wallet/account/views.cljs b/src/status_im/ui/screens/wallet/account/views.cljs index 725cbcd95b..75180c3ea9 100644 --- a/src/status_im/ui/screens/wallet/account/views.cljs +++ b/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] - [status-im.utils.utils :as utils.utils]) + [quo.design-system.colors :as quo-colors]) (: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 - :border-bottom-right-radius 8 :border-bottom-left-radius 8 :flex-direction :row} + [react/view {:height button-group-height + :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 diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs index f8aa0bff53..e96fca7421 100644 --- a/src/status_im/ui/screens/wallet/accounts/views.cljs +++ b/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 - :use-insets true - :right-accessories [{:on-press #(re-frame/dispatch - [::qr-scanner/scan-code - {:handler :wallet.send/qr-scanner-result}]) - :icon :main-icons/qr - :accessibility-label :accounts-qr-code} - {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet - {:content (sheets/accounts-options mnemonic)}]) - :icon :main-icons/more - :accessibility-label :accounts-more-options}]} + {:extended-header total-value + :refresh-control refresh-control + :refreshing-sub (re-frame/subscribe [:wallet/refreshing-history?]) + :refreshing-counter updates-counter + :use-insets true + :right-accessories [{:on-press #(re-frame/dispatch + [::qr-scanner/scan-code + {:handler :wallet.send/qr-scanner-result}]) + :icon :main-icons/qr + :accessibility-label :accounts-qr-code} + {: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]