[#11849] Move pull to refresh to the account overview screen

This commit is contained in:
Roman Volosovskyi 2021-08-30 14:28:37 +03:00
parent 86e0da1da8
commit 86fcdd47e4
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
3 changed files with 55 additions and 44 deletions

View File

@ -44,7 +44,7 @@
offset (reagent/atom 0) offset (reagent/atom 0)
on-layout (fn [evt] on-layout (fn [evt]
(reset! offset (oget evt "nativeEvent" "layout" "height")))] (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 [animated/view {:flex 1
:pointer-events :box-none} :pointer-events :box-none}
[animated/code {:key (str @offset) [animated/code {:key (str @offset)
@ -67,6 +67,10 @@
:title-align :left} :title-align :left}
(dissoc props :extended-header))]] (dissoc props :extended-header))]]
(into [animated/scroll-view {:on-scroll on-scroll (into [animated/scroll-view {:on-scroll on-scroll
:refreshControl (when refresh-control
(refresh-control
(and @refreshing-sub
@refreshing-counter)))
:style {:z-index 1} :style {:z-index 1}
:scrollEventThrottle 16} :scrollEventThrottle 16}
[animated/view {:pointer-events :box-none} [animated/view {:pointer-events :box-none}

View File

@ -18,9 +18,7 @@
[status-im.utils.money :as money] [status-im.utils.money :as money]
[status-im.wallet.utils :as wallet.utils] [status-im.wallet.utils :as wallet.utils]
[status-im.ui.components.tabs :as tabs] [status-im.ui.components.tabs :as tabs]
[quo.react-native :as rn] [quo.design-system.colors :as quo-colors])
[quo.design-system.colors :as quo-colors]
[status-im.utils.utils :as utils.utils])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
(def state (reagent/atom {:tab :assets})) (def state (reagent/atom {:tab :assets}))
@ -58,8 +56,11 @@
[react/touchable-highlight {:on-press #(re-frame/dispatch [:wallet/share-popover address])} [react/touchable-highlight {:on-press #(re-frame/dispatch [:wallet/share-popover address])}
[icons/icon :main-icons/share {:color colors/white-persist [icons/icon :main-icons/share {:color colors/white-persist
:accessibility-label :share-wallet-address-icon}]]] :accessibility-label :share-wallet-address-icon}]]]
[react/view {:height button-group-height :background-color colors/black-transparent-20 [react/view {:height button-group-height
:border-bottom-right-radius 8 :border-bottom-left-radius 8 :flex-direction :row} :background-color colors/black-transparent-20
:border-bottom-right-radius 8
:border-bottom-left-radius 8
:flex-direction :row}
(if (= type :watch) (if (= type :watch)
[react/view {:flex 1 :align-items :center :justify-content :center} [react/view {:flex 1 :align-items :center :justify-content :center}
[react/text {:style {:margin-left 8 :color colors/white-persist}} [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) (styles/bottom-send-recv-buttons-lower anim-y button-group-height)
#(reset! to-show false)))))))) #(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/defview account []
(views/letsubs [{:keys [name address] :as account} [:multiaccount/current-account] (views/letsubs [{:keys [name address] :as account} [:multiaccount/current-account]
fetching-error [:wallet/fetching-error]] fetching-error [:wallet/fetching-error]]
@ -223,9 +201,9 @@
[{:nativeEvent {:contentOffset {:y scroll-y}}}] [{:nativeEvent {:contentOffset {:y scroll-y}}}]
{:useNativeDriver true}) {:useNativeDriver true})
:scrollEventThrottle 1 :scrollEventThrottle 1
:refreshControl (refresh-control :refreshControl (accounts/refresh-control
(and (and
@updates-counter @accounts/updates-counter
@(re-frame/subscribe [:wallet/refreshing-history?])))} @(re-frame/subscribe [:wallet/refreshing-history?])))}
(when fetching-error (when fetching-error
[react/view {:style {:flex 1 [react/view {:style {:flex 1

View File

@ -14,7 +14,9 @@
[status-im.ui.screens.wallet.accounts.styles :as styles] [status-im.ui.screens.wallet.accounts.styles :as styles]
[status-im.qr-scanner.core :as qr-scanner] [status-im.qr-scanner.core :as qr-scanner]
[status-im.wallet.utils :as wallet.utils] [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])) (:require-macros [status-im.utils.views :as views]))
(views/defview account-card [{:keys [name color address type wallet] :as account} keycard? card-width] (views/defview account-card [{:keys [name color address type wallet] :as account} keycard? card-width]
@ -190,21 +192,48 @@
[quo/text {:color :secondary} [quo/text {:color :secondary}
(i18n/label :t/wallet-total-value)]])])) (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 [] (defn accounts-overview []
(let [mnemonic @(re-frame/subscribe [:mnemonic])] (let [mnemonic @(re-frame/subscribe [:mnemonic])]
[react/view {:flex 1} [react/view
{:style {:flex 1}}
[quo/animated-header [quo/animated-header
{:extended-header total-value {:extended-header total-value
:use-insets true :refresh-control refresh-control
:right-accessories [{:on-press #(re-frame/dispatch :refreshing-sub (re-frame/subscribe [:wallet/refreshing-history?])
[::qr-scanner/scan-code :refreshing-counter updates-counter
{:handler :wallet.send/qr-scanner-result}]) :use-insets true
:icon :main-icons/qr :right-accessories [{:on-press #(re-frame/dispatch
:accessibility-label :accounts-qr-code} [::qr-scanner/scan-code
{:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet {:handler :wallet.send/qr-scanner-result}])
{:content (sheets/accounts-options mnemonic)}]) :icon :main-icons/qr
:icon :main-icons/more :accessibility-label :accounts-qr-code}
:accessibility-label :accounts-more-options}]} {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet
{:content (sheets/accounts-options mnemonic)}])
:icon :main-icons/more
:accessibility-label :accounts-more-options}]}
[accounts] [accounts]
[buy-crypto/banner] [buy-crypto/banner]
[assets] [assets]