chore(wallet): show activity tab after sending a transaction

This commit is contained in:
Jamie Caprani 2024-06-12 17:36:30 +02:00 committed by GitHub
parent 3208ec1b28
commit 60e1783b36
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 149 additions and 97 deletions

View File

@ -0,0 +1,32 @@
(ns quo.components.tabs.tabs.schema)
(def ^:private ?data
[:sequential
[:maybe
[:map
[:id [:or :int :keyword [:set :int]]]
[:label [:maybe :string]]
[:accessibility-label {:optional true} [:maybe [:or :keyword :string]]]
[:notification-dot? {:optional true} [:maybe :boolean]]]]])
(def ?schema
[:=>
[:catn
[:props
[:map
[:default-active {:optional true} [:maybe [:or :int :keyword]]]
[:active-tab-id {:optional true} [:maybe [:or :int :keyword]]]
[:data ?data]
[:fade-end-percentage {:optional true} [:or :double :string]]
[:fade-end? {:optional true} [:maybe :boolean]]
[:blur? {:optional true} [:maybe :boolean]]
[:on-change {:optional true} [:maybe fn?]]
[:on-scroll {:optional true} [:maybe fn?]]
[:scroll-on-press? {:optional true} [:maybe :boolean]]
[:scrollable? {:optional true} [:maybe :boolean]]
[:style {:optional true} [:maybe :map]]
[:container-style {:optional true} [:maybe :map]]
[:size {:optional true} [:maybe [:or :keyword :int]]]
[:in-scroll-view? {:optional true} [:maybe :boolean]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]]
:any])

View File

@ -2,12 +2,14 @@
(:require (:require
[oops.core :refer [oget]] [oops.core :refer [oget]]
[quo.components.tabs.tab.view :as tab] [quo.components.tabs.tab.view :as tab]
[quo.components.tabs.tabs.schema :as component-schema]
[quo.components.tabs.tabs.style :as style] [quo.components.tabs.tabs.style :as style]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.gesture :as gesture] [react-native.gesture :as gesture]
[react-native.linear-gradient :as linear-gradient] [react-native.linear-gradient :as linear-gradient]
[react-native.masked-view :as masked-view] [react-native.masked-view :as masked-view]
[reagent.core :as reagent] [reagent.core :as reagent]
[schema.core :as schema]
[utils.collection :as utils.collection] [utils.collection :as utils.collection]
[utils.number])) [utils.number]))
@ -84,36 +86,20 @@
:on-press #(on-press % index)} :on-press #(on-press % index)}
label]]) label]])
(defn view (defn- view-internal
" Common options (for scrollable and non-scrollable tabs):
- `blur?` Boolean passed down to `quo.components.tabs.tab/tab`.
- `data` Vector of tab items.
- `on-change` Callback called after a tab is selected.
- `size` 32/24
- `style` Style map passed to View wrapping tabs or to the FlatList when tabs
are scrollable.
Options for scrollable tabs:
- `fade-end-percentage` Percentage where fading starts relative to the total
layout width of the `flat-list` data.
- `fade-end?` When non-nil, causes the end of the scrollable view to fade out.
- `on-scroll` Callback called on the on-scroll event of the FlatList. Only
used when `scrollable?` is non-nil.
- `scrollable?` When non-nil, use a scrollable flat-list to render tabs.
- `scroll-on-press?` When non-nil, clicking on a tag centers it the middle
(with animation enabled).
"
[{:keys [default-active data fade-end-percentage fade-end? on-change on-scroll scroll-on-press? [{:keys [default-active data fade-end-percentage fade-end? on-change on-scroll scroll-on-press?
scrollable? style container-style size blur? in-scroll-view? customization-color] scrollable? style container-style size blur? in-scroll-view? customization-color
active-tab-id]
:or {fade-end-percentage 0.8 :or {fade-end-percentage 0.8
fade-end? false fade-end? false
scrollable? false scrollable? false
scroll-on-press? false scroll-on-press? false
size default-tab-size} size default-tab-size}
:as props}] :as props}]
(let [[active-tab-id (let [[active-tab-internal-id
set-active-tab-id] (rn/use-state default-active) set-active-tab-internal-id] (rn/use-state default-active)
tab-id (or active-tab-id active-tab-internal-id)
[fading set-fading] (rn/use-state fade-end-percentage) [fading set-fading] (rn/use-state fade-end-percentage)
flat-list-ref (rn/use-ref-atom nil) flat-list-ref (rn/use-ref-atom nil)
tabs-data (rn/use-memo (fn [] (filterv some? data)) tabs-data (rn/use-memo (fn [] (filterv some? data))
@ -143,11 +129,11 @@
{:animated false {:animated false
:index :index
(utils.collection/first-index (utils.collection/first-index
#(= active-tab-id (:id %)) #(= tab-id (:id %))
tabs-data)})))) tabs-data)}))))
[active-tab-id tabs-data]) [tab-id tabs-data])
on-tab-press (rn/use-callback (fn [id index] on-tab-press (rn/use-callback (fn [id index]
(set-active-tab-id id) (set-active-tab-internal-id id)
(when (and scroll-on-press? @flat-list-ref) (when (and scroll-on-press? @flat-list-ref)
(.scrollToIndex ^js @flat-list-ref (.scrollToIndex ^js @flat-list-ref
#js #js
@ -156,7 +142,8 @@
:viewPosition 0.5})) :viewPosition 0.5}))
(when on-change (when on-change
(on-change id))) (on-change id)))
[set-active-tab-id scroll-on-press? on-change])] [set-active-tab-internal-id scroll-on-press?
on-change])]
(if scrollable? (if scrollable?
[rn/view {:style {:margin-top (- (dec unread-count-offset))}} [rn/view {:style {:margin-top (- (dec unread-count-offset))}}
[masked-view-wrapper [masked-view-wrapper
@ -183,7 +170,7 @@
:on-scroll on-scroll :on-scroll on-scroll
:on-layout set-initial-scroll-poisition :on-layout set-initial-scroll-poisition
:render-fn tab-view :render-fn tab-view
:render-data {:active-tab-id active-tab-id :render-data {:active-tab-id tab-id
:blur? blur? :blur? blur?
:customization-color customization-color :customization-color customization-color
:number-of-items (count tabs-data) :number-of-items (count tabs-data)
@ -194,7 +181,7 @@
(map-indexed (fn [index item] (map-indexed (fn [index item]
^{:key (:id item)} ^{:key (:id item)}
[tab-view item index nil [tab-view item index nil
{:active-tab-id active-tab-id {:active-tab-id tab-id
:blur? blur? :blur? blur?
:customization-color customization-color :customization-color customization-color
:number-of-items (count tabs-data) :number-of-items (count tabs-data)
@ -202,3 +189,5 @@
:on-press on-tab-press :on-press on-tab-press
:style style}]) :style style}])
tabs-data)]))) tabs-data)])))
(def view (schema/instrument #'view-internal component-schema/?schema))

View File

@ -2,7 +2,6 @@
(:require (:require
[quo.core :as quo] [quo.core :as quo]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent]
[status-im.contexts.wallet.account.style :as style] [status-im.contexts.wallet.account.style :as style]
[status-im.contexts.wallet.account.tabs.view :as tabs] [status-im.contexts.wallet.account.tabs.view :as tabs]
[status-im.contexts.wallet.common.account-switcher.view :as account-switcher] [status-im.contexts.wallet.common.account-switcher.view :as account-switcher]
@ -21,57 +20,58 @@
(not watch-only?) (conj {:id :dapps :label (i18n/label :t/dapps) :accessibility-label :dapps}) (not watch-only?) (conj {:id :dapps :label (i18n/label :t/dapps) :accessibility-label :dapps})
true (conj {:id :about :label (i18n/label :t/about) :accessibility-label :about}))) true (conj {:id :about :label (i18n/label :t/about) :accessibility-label :about})))
(defn- change-tab [id] (rf/dispatch [:wallet/select-account-tab id]))
(defn view (defn view
[] []
(let [selected-tab (reagent/atom first-tab-id)] (let [selected-tab (or (rf/sub [:wallet/account-tab]) first-tab-id)
(fn [] {:keys [name color formatted-balance
(let [{:keys [name color formatted-balance watch-only?]} (rf/sub [:wallet/current-viewing-account])
watch-only?]} (rf/sub [:wallet/current-viewing-account]) customization-color (rf/sub [:profile/customization-color])]
customization-color (rf/sub [:profile/customization-color])] (rn/use-unmount #(rf/dispatch [:wallet/close-account-page]))
(rn/use-unmount #(rf/dispatch [:wallet/close-account-page])) [rn/view {:style {:flex 1}}
[rn/view {:style {:flex 1}} [account-switcher/view
[account-switcher/view {:type :wallet-networks
{:type :wallet-networks :on-press #(rf/dispatch [:wallet/close-account-page])}]
:on-press #(rf/dispatch [:wallet/close-account-page])}] [quo/account-overview
[quo/account-overview {:container-style style/account-overview
{:container-style style/account-overview :current-value formatted-balance
:current-value formatted-balance :account-name name
:account-name name :account (if watch-only? :watched-address :default)
:account (if watch-only? :watched-address :default) :customization-color color}]
:customization-color color}] (when (ff/enabled? ::ff/wallet.graph) [quo/wallet-graph {:time-frame :empty}])
(when (ff/enabled? ::ff/wallet.graph) [quo/wallet-graph {:time-frame :empty}]) (when (not watch-only?)
(when (not watch-only?) [quo/wallet-ctas
[quo/wallet-ctas {:container-style style/cta-buttons
{:container-style style/cta-buttons :send-action (fn []
:send-action (fn [] (rf/dispatch [:wallet/clean-send-data])
(rf/dispatch [:wallet/clean-send-data]) (rf/dispatch [:wallet/wizard-navigate-forward
(rf/dispatch [:wallet/wizard-navigate-forward {:start-flow? true
{:start-flow? true :flow-id :wallet-send-flow}]))
:flow-id :wallet-send-flow}])) :receive-action #(rf/dispatch [:open-modal :screen/wallet.share-address
:receive-action #(rf/dispatch [:open-modal :screen/wallet.share-address {:status :receive}])
{:status :receive}]) :buy-action #(rf/dispatch [:show-bottom-sheet
:buy-action #(rf/dispatch [:show-bottom-sheet {:content buy-token/view}])
{:content buy-token/view}]) :bridge-action (fn []
:bridge-action (fn [] (rf/dispatch [:wallet/clean-send-data])
(rf/dispatch [:wallet/clean-send-data]) (rf/dispatch [:wallet/wizard-navigate-forward
(rf/dispatch [:wallet/wizard-navigate-forward {:start-flow? true
{:start-flow? true :flow-id :wallet-bridge-flow}]))
:flow-id :wallet-bridge-flow}])) :swap-action (when (ff/enabled? ::ff/wallet.swap)
:swap-action (when (ff/enabled? ::ff/wallet.swap) #(rf/dispatch [:wallet.swap/start]))}])
#(rf/dispatch [:wallet.swap/start]))}]) [quo/tabs
[quo/tabs {:style style/tabs
{:style style/tabs :size 32
:size 32 :active-tab-id selected-tab
:default-active @selected-tab :data (tabs-data watch-only?)
:data (tabs-data watch-only?) :on-change change-tab
:on-change (rn/use-callback (fn [tab] (reset! selected-tab tab))) :scrollable? true
:scrollable? true :scroll-on-press? true}]
:scroll-on-press? true}] [tabs/view {:selected-tab selected-tab}]
[tabs/view {:selected-tab @selected-tab}] (when (ff/enabled? ::ff/shell.jump-to)
(when (ff/enabled? ::ff/shell.jump-to) [quo/floating-shell-button
[quo/floating-shell-button {:jump-to
{:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to])
{:on-press #(rf/dispatch [:shell/navigate-to-jump-to]) :customization-color customization-color
:customization-color customization-color :label (i18n/label :t/jump-to)}}
:label (i18n/label :t/jump-to)}} style/shell-button])]))
style/shell-button])]))))

View File

@ -7,5 +7,4 @@
:skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :bridge-to-chain-id])))} :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :bridge-to-chain-id])))}
{:screen-id :screen/wallet.bridge-input-amount {:screen-id :screen/wallet.bridge-input-amount
:skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :amount])))} :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :amount])))}
{:screen-id :screen/wallet.transaction-confirmation} {:screen-id :screen/wallet.transaction-confirmation}])
{:screen-id :screen/wallet.transaction-progress}])

View File

@ -49,6 +49,7 @@
:on-press #(rf/dispatch :on-press #(rf/dispatch
[:wallet/set-collectible-to-send [:wallet/set-collectible-to-send
{:collectible collectible {:collectible collectible
:start-flow? true
:current-screen :screen/wallet.collectible}])} :current-screen :screen/wallet.collectible}])}
(i18n/label :t/send)]) (i18n/label :t/send)])
[quo/button [quo/button

View File

@ -72,8 +72,10 @@
selected-account? (rf/sub [:wallet/current-viewing-account-address]) selected-account? (rf/sub [:wallet/current-viewing-account-address])
send-params (if selected-account? send-params (if selected-account?
{:token token-data {:token token-data
:stack-id :screen/wallet.accounts
:start-flow? true} :start-flow? true}
{:token-symbol token-symbol {:token-symbol token-symbol
:stack-id :wallet-stack
:start-flow? true})] :start-flow? true})]
[quo/action-drawer [quo/action-drawer
[(cond->> [(when (ff/enabled? ::ff/wallet.assets-modal-manage-tokens) [(cond->> [(when (ff/enabled? ::ff/wallet.assets-modal-manage-tokens)

View File

@ -37,6 +37,12 @@
:fx [[:dispatch [:navigate-to :screen/wallet.accounts address]] :fx [[:dispatch [:navigate-to :screen/wallet.accounts address]]
[:dispatch [:wallet/fetch-activities]]]})) [:dispatch [:wallet/fetch-activities]]]}))
(rf/reg-event-fx :wallet/navigate-to-account-within-stack
(fn [{:keys [db]} [address]]
{:db (assoc-in db [:wallet :current-viewing-account-address] address)
:fx [[:dispatch [:navigate-to-within-stack [:screen/wallet.accounts :shell-stack] address]]
[:dispatch [:wallet/fetch-activities]]]}))
(rf/reg-event-fx :wallet/navigate-to-new-account (rf/reg-event-fx :wallet/navigate-to-new-account
(fn [{:keys [db]} [address]] (fn [{:keys [db]} [address]]
{:db (assoc-in db [:wallet :current-viewing-account-address] address) {:db (assoc-in db [:wallet :current-viewing-account-address] address)
@ -44,6 +50,14 @@
[:dispatch [:navigate-to :screen/wallet.accounts address]] [:dispatch [:navigate-to :screen/wallet.accounts address]]
[:dispatch [:wallet/show-account-created-toast address]]]})) [:dispatch [:wallet/show-account-created-toast address]]]}))
(rf/reg-event-fx :wallet/select-account-tab
(fn [{:keys [db]} [tab]]
{:db (assoc-in db [:wallet :ui :account-page :active-tab] tab)}))
(rf/reg-event-fx :wallet/clear-account-tab
(fn [{:keys [db]}]
{:db (assoc-in db [:wallet :ui :account-page :active-tab] nil)}))
(rf/reg-event-fx :wallet/switch-current-viewing-account (rf/reg-event-fx :wallet/switch-current-viewing-account
(fn [{:keys [db]} [address]] (fn [{:keys [db]} [address]]
{:db (assoc-in db [:wallet :current-viewing-account-address] address)})) {:db (assoc-in db [:wallet :current-viewing-account-address] address)}))
@ -55,6 +69,7 @@
(rf/reg-event-fx :wallet/close-account-page (rf/reg-event-fx :wallet/close-account-page
(fn [_] (fn [_]
{:fx [[:dispatch [:wallet/clean-current-viewing-account]] {:fx [[:dispatch [:wallet/clean-current-viewing-account]]
[:dispatch [:wallet/clear-account-tab]]
[:dispatch [:pop-to-root :shell-stack]]]})) [:dispatch [:pop-to-root :shell-stack]]]}))
(defn log-rpc-error (defn log-rpc-error

View File

@ -253,7 +253,7 @@
(rf/reg-event-fx (rf/reg-event-fx
:wallet/set-collectible-to-send :wallet/set-collectible-to-send
(fn [{db :db} [{:keys [collectible current-screen]}]] (fn [{db :db} [{:keys [collectible current-screen start-flow?]}]]
(let [collection-data (:collection-data collectible) (let [collection-data (:collection-data collectible)
collectible-data (:collectible-data collectible) collectible-data (:collectible-data collectible)
contract-type (:contract-type collectible) contract-type (:contract-type collectible)
@ -282,6 +282,7 @@
[:dispatch [:dispatch
[:wallet/wizard-navigate-forward [:wallet/wizard-navigate-forward
{:current-screen current-screen {:current-screen current-screen
:start-flow? start-flow?
:flow-id :wallet-send-flow}]]]}))) :flow-id :wallet-send-flow}]]]})))
(rf/reg-event-fx (rf/reg-event-fx
@ -447,18 +448,26 @@
(assoc-in [:wallet :transactions] transaction-details) (assoc-in [:wallet :transactions] transaction-details)
(assoc-in [:wallet :ui :send :transaction-ids] transaction-ids)) (assoc-in [:wallet :ui :send :transaction-ids] transaction-ids))
:fx [[:dispatch :fx [[:dispatch
[:wallet/wizard-navigate-forward [:wallet/end-transaction-flow]]]})))
{:current-screen :screen/wallet.transaction-confirmation
:flow-id :wallet-send-flow}]]]})))
(rf/reg-event-fx :wallet/close-transaction-progress-page (rf/reg-event-fx :wallet/clean-up-transaction-flow
(fn [_] (fn [_]
{:fx [[:dispatch [:wallet/clean-scanned-address]] {:fx [[:dispatch [:dismiss-modal :screen/wallet.transaction-confirmation]]
[:dispatch [:wallet/clean-scanned-address]]
[:dispatch [:wallet/clean-local-suggestions]] [:dispatch [:wallet/clean-local-suggestions]]
[:dispatch [:wallet/clean-send-address]] [:dispatch [:wallet/clean-send-address]]
[:dispatch [:wallet/clean-disabled-from-networks]] [:dispatch [:wallet/clean-disabled-from-networks]]
[:dispatch [:wallet/select-address-tab nil]] [:dispatch [:wallet/select-address-tab nil]]]}))
[:dispatch [:dismiss-modal :screen/wallet.transaction-progress]]]}))
(rf/reg-event-fx :wallet/end-transaction-flow
(fn [{:keys [db]}]
(let [address (get-in db [:wallet :current-viewing-account-address])]
{:fx [[:dispatch [:wallet/navigate-to-account-within-stack address]]
[:dispatch [:wallet/fetch-activities]]
[:dispatch [:wallet/select-account-tab :activity]]
[:dispatch-later
[{:ms 20
:dispatch [:wallet/clean-up-transaction-flow]}]]]})))
(defn- transaction-data (defn- transaction-data
[{:keys [from-address to-address token-address route data eth-transfer?]}] [{:keys [from-address to-address token-address route data eth-transfer?]}]

View File

@ -27,5 +27,4 @@
:skip-step? (fn [db] :skip-step? (fn [db]
(or (not (collectible-selected? db)) (or (not (collectible-selected? db))
(some? (get-in db [:wallet :ui :send :amount]))))} (some? (get-in db [:wallet :ui :send :amount]))))}
{:screen-id :screen/wallet.transaction-confirmation} {:screen-id :screen/wallet.transaction-confirmation}])
{:screen-id :screen/wallet.transaction-progress}])

View File

@ -47,7 +47,7 @@
(defn view (defn view
[] []
(let [leave-page #(rf/dispatch [:wallet/close-transaction-progress-page]) (let [leave-page #(rf/dispatch [:wallet/end-transaction-flow])
{:keys [color]} (rf/sub [:wallet/current-viewing-account])] {:keys [color]} (rf/sub [:wallet/current-viewing-account])]
(fn [] (fn []
(rn/use-effect (rn/use-effect

View File

@ -27,8 +27,8 @@
(rf/defn navigate-to-within-stack (rf/defn navigate-to-within-stack
{:events [:navigate-to-within-stack]} {:events [:navigate-to-within-stack]}
[{:keys [db]} comp-id] [{:keys [db]} comp-id screen-params]
{:db (assoc db :view-id (first comp-id)) {:db (all-screens-params db (first comp-id) screen-params)
:fx [[:navigate-to-within-stack comp-id]]}) :fx [[:navigate-to-within-stack comp-id]]})
(re-frame/reg-event-fx :open-modal (re-frame/reg-event-fx :open-modal

View File

@ -435,6 +435,12 @@
accounts) accounts)
accounts)))) accounts))))
(rf/reg-sub
:wallet/account-tab
:<- [:wallet/ui]
(fn [ui]
(get-in ui [:account-page :active-tab])))
(rf/reg-sub (rf/reg-sub
:wallet/current-viewing-account-token-values :wallet/current-viewing-account-token-values
:<- [:wallet/current-viewing-account] :<- [:wallet/current-viewing-account]