diff --git a/src/quo/components/tabs/tabs/schema.cljs b/src/quo/components/tabs/tabs/schema.cljs new file mode 100644 index 0000000000..e7d35323e6 --- /dev/null +++ b/src/quo/components/tabs/tabs/schema.cljs @@ -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]) diff --git a/src/quo/components/tabs/tabs/view.cljs b/src/quo/components/tabs/tabs/view.cljs index 74b8cb0451..696af6c07a 100644 --- a/src/quo/components/tabs/tabs/view.cljs +++ b/src/quo/components/tabs/tabs/view.cljs @@ -2,12 +2,14 @@ (:require [oops.core :refer [oget]] [quo.components.tabs.tab.view :as tab] + [quo.components.tabs.tabs.schema :as component-schema] [quo.components.tabs.tabs.style :as style] [react-native.core :as rn] [react-native.gesture :as gesture] [react-native.linear-gradient :as linear-gradient] [react-native.masked-view :as masked-view] [reagent.core :as reagent] + [schema.core :as schema] [utils.collection :as utils.collection] [utils.number])) @@ -84,36 +86,20 @@ :on-press #(on-press % index)} label]]) -(defn view - " 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). - " +(defn- view-internal [{: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 fade-end? false scrollable? false scroll-on-press? false size default-tab-size} :as props}] - (let [[active-tab-id - set-active-tab-id] (rn/use-state default-active) + (let [[active-tab-internal-id + 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) flat-list-ref (rn/use-ref-atom nil) tabs-data (rn/use-memo (fn [] (filterv some? data)) @@ -143,11 +129,11 @@ {:animated false :index (utils.collection/first-index - #(= active-tab-id (:id %)) + #(= tab-id (:id %)) tabs-data)})))) - [active-tab-id tabs-data]) + [tab-id tabs-data]) 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) (.scrollToIndex ^js @flat-list-ref #js @@ -156,7 +142,8 @@ :viewPosition 0.5})) (when on-change (on-change id))) - [set-active-tab-id scroll-on-press? on-change])] + [set-active-tab-internal-id scroll-on-press? + on-change])] (if scrollable? [rn/view {:style {:margin-top (- (dec unread-count-offset))}} [masked-view-wrapper @@ -183,7 +170,7 @@ :on-scroll on-scroll :on-layout set-initial-scroll-poisition :render-fn tab-view - :render-data {:active-tab-id active-tab-id + :render-data {:active-tab-id tab-id :blur? blur? :customization-color customization-color :number-of-items (count tabs-data) @@ -194,7 +181,7 @@ (map-indexed (fn [index item] ^{:key (:id item)} [tab-view item index nil - {:active-tab-id active-tab-id + {:active-tab-id tab-id :blur? blur? :customization-color customization-color :number-of-items (count tabs-data) @@ -202,3 +189,5 @@ :on-press on-tab-press :style style}]) tabs-data)]))) + +(def view (schema/instrument #'view-internal component-schema/?schema)) diff --git a/src/status_im/contexts/wallet/account/view.cljs b/src/status_im/contexts/wallet/account/view.cljs index 6c08f0f547..f76fb0ad31 100644 --- a/src/status_im/contexts/wallet/account/view.cljs +++ b/src/status_im/contexts/wallet/account/view.cljs @@ -2,7 +2,6 @@ (:require [quo.core :as quo] [react-native.core :as rn] - [reagent.core :as reagent] [status-im.contexts.wallet.account.style :as style] [status-im.contexts.wallet.account.tabs.view :as tabs] [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}) 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 [] - (let [selected-tab (reagent/atom first-tab-id)] - (fn [] - (let [{:keys [name color formatted-balance - watch-only?]} (rf/sub [:wallet/current-viewing-account]) - customization-color (rf/sub [:profile/customization-color])] - (rn/use-unmount #(rf/dispatch [:wallet/close-account-page])) - [rn/view {:style {:flex 1}} - [account-switcher/view - {:type :wallet-networks - :on-press #(rf/dispatch [:wallet/close-account-page])}] - [quo/account-overview - {:container-style style/account-overview - :current-value formatted-balance - :account-name name - :account (if watch-only? :watched-address :default) - :customization-color color}] - (when (ff/enabled? ::ff/wallet.graph) [quo/wallet-graph {:time-frame :empty}]) - (when (not watch-only?) - [quo/wallet-ctas - {:container-style style/cta-buttons - :send-action (fn [] - (rf/dispatch [:wallet/clean-send-data]) - (rf/dispatch [:wallet/wizard-navigate-forward - {:start-flow? true - :flow-id :wallet-send-flow}])) - :receive-action #(rf/dispatch [:open-modal :screen/wallet.share-address - {:status :receive}]) - :buy-action #(rf/dispatch [:show-bottom-sheet - {:content buy-token/view}]) - :bridge-action (fn [] - (rf/dispatch [:wallet/clean-send-data]) - (rf/dispatch [:wallet/wizard-navigate-forward - {:start-flow? true - :flow-id :wallet-bridge-flow}])) - :swap-action (when (ff/enabled? ::ff/wallet.swap) - #(rf/dispatch [:wallet.swap/start]))}]) - [quo/tabs - {:style style/tabs - :size 32 - :default-active @selected-tab - :data (tabs-data watch-only?) - :on-change (rn/use-callback (fn [tab] (reset! selected-tab tab))) - :scrollable? true - :scroll-on-press? true}] - [tabs/view {:selected-tab @selected-tab}] - (when (ff/enabled? ::ff/shell.jump-to) - [quo/floating-shell-button - {:jump-to - {:on-press #(rf/dispatch [:shell/navigate-to-jump-to]) - :customization-color customization-color - :label (i18n/label :t/jump-to)}} - style/shell-button])])))) + (let [selected-tab (or (rf/sub [:wallet/account-tab]) first-tab-id) + {:keys [name color formatted-balance + watch-only?]} (rf/sub [:wallet/current-viewing-account]) + customization-color (rf/sub [:profile/customization-color])] + (rn/use-unmount #(rf/dispatch [:wallet/close-account-page])) + [rn/view {:style {:flex 1}} + [account-switcher/view + {:type :wallet-networks + :on-press #(rf/dispatch [:wallet/close-account-page])}] + [quo/account-overview + {:container-style style/account-overview + :current-value formatted-balance + :account-name name + :account (if watch-only? :watched-address :default) + :customization-color color}] + (when (ff/enabled? ::ff/wallet.graph) [quo/wallet-graph {:time-frame :empty}]) + (when (not watch-only?) + [quo/wallet-ctas + {:container-style style/cta-buttons + :send-action (fn [] + (rf/dispatch [:wallet/clean-send-data]) + (rf/dispatch [:wallet/wizard-navigate-forward + {:start-flow? true + :flow-id :wallet-send-flow}])) + :receive-action #(rf/dispatch [:open-modal :screen/wallet.share-address + {:status :receive}]) + :buy-action #(rf/dispatch [:show-bottom-sheet + {:content buy-token/view}]) + :bridge-action (fn [] + (rf/dispatch [:wallet/clean-send-data]) + (rf/dispatch [:wallet/wizard-navigate-forward + {:start-flow? true + :flow-id :wallet-bridge-flow}])) + :swap-action (when (ff/enabled? ::ff/wallet.swap) + #(rf/dispatch [:wallet.swap/start]))}]) + [quo/tabs + {:style style/tabs + :size 32 + :active-tab-id selected-tab + :data (tabs-data watch-only?) + :on-change change-tab + :scrollable? true + :scroll-on-press? true}] + [tabs/view {:selected-tab selected-tab}] + (when (ff/enabled? ::ff/shell.jump-to) + [quo/floating-shell-button + {:jump-to + {:on-press #(rf/dispatch [:shell/navigate-to-jump-to]) + :customization-color customization-color + :label (i18n/label :t/jump-to)}} + style/shell-button])])) diff --git a/src/status_im/contexts/wallet/bridge/flow_config.cljs b/src/status_im/contexts/wallet/bridge/flow_config.cljs index d662674dfd..9dbbfd7d0c 100644 --- a/src/status_im/contexts/wallet/bridge/flow_config.cljs +++ b/src/status_im/contexts/wallet/bridge/flow_config.cljs @@ -7,5 +7,4 @@ :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :bridge-to-chain-id])))} {:screen-id :screen/wallet.bridge-input-amount :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :amount])))} - {:screen-id :screen/wallet.transaction-confirmation} - {:screen-id :screen/wallet.transaction-progress}]) + {:screen-id :screen/wallet.transaction-confirmation}]) diff --git a/src/status_im/contexts/wallet/collectible/view.cljs b/src/status_im/contexts/wallet/collectible/view.cljs index 22c80810a0..795220bf42 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/src/status_im/contexts/wallet/collectible/view.cljs @@ -49,6 +49,7 @@ :on-press #(rf/dispatch [:wallet/set-collectible-to-send {:collectible collectible + :start-flow? true :current-screen :screen/wallet.collectible}])} (i18n/label :t/send)]) [quo/button diff --git a/src/status_im/contexts/wallet/common/token_value/view.cljs b/src/status_im/contexts/wallet/common/token_value/view.cljs index 88be7d1a07..e23cd6b76d 100644 --- a/src/status_im/contexts/wallet/common/token_value/view.cljs +++ b/src/status_im/contexts/wallet/common/token_value/view.cljs @@ -72,8 +72,10 @@ selected-account? (rf/sub [:wallet/current-viewing-account-address]) send-params (if selected-account? {:token token-data + :stack-id :screen/wallet.accounts :start-flow? true} {:token-symbol token-symbol + :stack-id :wallet-stack :start-flow? true})] [quo/action-drawer [(cond->> [(when (ff/enabled? ::ff/wallet.assets-modal-manage-tokens) diff --git a/src/status_im/contexts/wallet/events.cljs b/src/status_im/contexts/wallet/events.cljs index 37c510bd54..9cb344b5d6 100644 --- a/src/status_im/contexts/wallet/events.cljs +++ b/src/status_im/contexts/wallet/events.cljs @@ -37,6 +37,12 @@ :fx [[:dispatch [:navigate-to :screen/wallet.accounts address]] [: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 (fn [{:keys [db]} [address]] {:db (assoc-in db [:wallet :current-viewing-account-address] address) @@ -44,6 +50,14 @@ [:dispatch [:navigate-to :screen/wallet.accounts 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 (fn [{:keys [db]} [address]] {:db (assoc-in db [:wallet :current-viewing-account-address] address)})) @@ -55,6 +69,7 @@ (rf/reg-event-fx :wallet/close-account-page (fn [_] {:fx [[:dispatch [:wallet/clean-current-viewing-account]] + [:dispatch [:wallet/clear-account-tab]] [:dispatch [:pop-to-root :shell-stack]]]})) (defn log-rpc-error diff --git a/src/status_im/contexts/wallet/send/events.cljs b/src/status_im/contexts/wallet/send/events.cljs index 446d9a0ec9..a95d64feec 100644 --- a/src/status_im/contexts/wallet/send/events.cljs +++ b/src/status_im/contexts/wallet/send/events.cljs @@ -253,7 +253,7 @@ (rf/reg-event-fx :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) collectible-data (:collectible-data collectible) contract-type (:contract-type collectible) @@ -282,6 +282,7 @@ [:dispatch [:wallet/wizard-navigate-forward {:current-screen current-screen + :start-flow? start-flow? :flow-id :wallet-send-flow}]]]}))) (rf/reg-event-fx @@ -447,18 +448,26 @@ (assoc-in [:wallet :transactions] transaction-details) (assoc-in [:wallet :ui :send :transaction-ids] transaction-ids)) :fx [[:dispatch - [:wallet/wizard-navigate-forward - {:current-screen :screen/wallet.transaction-confirmation - :flow-id :wallet-send-flow}]]]}))) + [:wallet/end-transaction-flow]]]}))) -(rf/reg-event-fx :wallet/close-transaction-progress-page +(rf/reg-event-fx :wallet/clean-up-transaction-flow (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-send-address]] [:dispatch [:wallet/clean-disabled-from-networks]] - [:dispatch [:wallet/select-address-tab nil]] - [:dispatch [:dismiss-modal :screen/wallet.transaction-progress]]]})) + [:dispatch [:wallet/select-address-tab nil]]]})) + +(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 [{:keys [from-address to-address token-address route data eth-transfer?]}] diff --git a/src/status_im/contexts/wallet/send/flow_config.cljs b/src/status_im/contexts/wallet/send/flow_config.cljs index 9c6456c71c..60092e1d23 100644 --- a/src/status_im/contexts/wallet/send/flow_config.cljs +++ b/src/status_im/contexts/wallet/send/flow_config.cljs @@ -27,5 +27,4 @@ :skip-step? (fn [db] (or (not (collectible-selected? db)) (some? (get-in db [:wallet :ui :send :amount]))))} - {:screen-id :screen/wallet.transaction-confirmation} - {:screen-id :screen/wallet.transaction-progress}]) + {:screen-id :screen/wallet.transaction-confirmation}]) diff --git a/src/status_im/contexts/wallet/send/transaction_progress/view.cljs b/src/status_im/contexts/wallet/send/transaction_progress/view.cljs index d6d73f99c2..d1fd73b846 100644 --- a/src/status_im/contexts/wallet/send/transaction_progress/view.cljs +++ b/src/status_im/contexts/wallet/send/transaction_progress/view.cljs @@ -47,7 +47,7 @@ (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])] (fn [] (rn/use-effect diff --git a/src/status_im/navigation/events.cljs b/src/status_im/navigation/events.cljs index b50886df73..bfce492b47 100644 --- a/src/status_im/navigation/events.cljs +++ b/src/status_im/navigation/events.cljs @@ -27,8 +27,8 @@ (rf/defn navigate-to-within-stack {:events [:navigate-to-within-stack]} - [{:keys [db]} comp-id] - {:db (assoc db :view-id (first comp-id)) + [{:keys [db]} comp-id screen-params] + {:db (all-screens-params db (first comp-id) screen-params) :fx [[:navigate-to-within-stack comp-id]]}) (re-frame/reg-event-fx :open-modal diff --git a/src/status_im/subs/wallet/wallet.cljs b/src/status_im/subs/wallet/wallet.cljs index dc16566c77..a7d9df1a2b 100644 --- a/src/status_im/subs/wallet/wallet.cljs +++ b/src/status_im/subs/wallet/wallet.cljs @@ -435,6 +435,12 @@ accounts) accounts)))) +(rf/reg-sub + :wallet/account-tab + :<- [:wallet/ui] + (fn [ui] + (get-in ui [:account-page :active-tab]))) + (rf/reg-sub :wallet/current-viewing-account-token-values :<- [:wallet/current-viewing-account]