Create Navigation mechanism for wizard type flows #19059 (#19123)

Author: mmilad75

src/status_im/contexts/wallet/account/view.cljs

@@ -50,7 +50,9 @@
            [quo/wallet-ctas
             {:send-action    (fn []
                                (rf/dispatch [:wallet/clean-send-data])
-                               (rf/dispatch [:open-modal :screen/wallet.select-address]))
+                               (rf/dispatch [:wallet/wizard-navigate-forward
+                                             {:start-flow? true
+                                              :flow-id     :wallet-flow}]))
              :receive-action #(rf/dispatch [:open-modal :screen/wallet.share-address {:status :receive}])
              :buy-action     #(rf/dispatch [:show-bottom-sheet
                                             {:content buy-drawer}])

src/status_im/contexts/wallet/common/token_value/view.cljs

@@ -19,8 +19,9 @@
          :on-press            (fn []
                                 (rf/dispatch [:hide-bottom-sheet])
                                 (rf/dispatch [:wallet/clean-send-data])
-                                (rf/dispatch [:wallet/send-select-token-drawer {:token token-data}])
-                                (rf/dispatch [:open-modal :screen/wallet.select-address]))}
+                                (rf/dispatch [:wallet/send-select-token
+                                              {:token       token-data
+                                               :start-flow? true}]))}
         {:icon                :i/receive
          :accessibility-label :receive
          :label               (i18n/label :t/receive)

src/status_im/contexts/wallet/common/wizard.cljs

@@ -0,0 +1,22 @@
+(ns status-im.contexts.wallet.common.wizard
+  (:require [status-im.contexts.wallet.send.flow-config :as wallet-flow]
+            [utils.re-frame :as rf]))
+
+(defn- wizard-find-next-screen
+  [db flow-id current-screen]
+  (let [flow-config (case flow-id
+                      :wallet-flow wallet-flow/steps
+                      nil)]
+    (first (filter (fn [{:keys [skip-step? screen-id]}]
+                     (and (not= screen-id current-screen)
+                          (not (and (fn? skip-step?) (skip-step? db)))))
+                   flow-config))))
+
+(rf/reg-event-fx
+ :wallet/wizard-navigate-forward
+ (fn [{:keys [db]} [{:keys [current-screen flow-id start-flow?]}]]
+   (let [next-screen (wizard-find-next-screen db flow-id current-screen)]
+     {:fx [[:dispatch
+            (if start-flow?
+              [:open-modal (:screen-id next-screen)]
+              [:navigate-to-within-stack [(:screen-id next-screen) current-screen]])]]})))

src/status_im/contexts/wallet/send/events.cljs

@@ -51,7 +51,7 @@
 
 (rf/reg-event-fx
  :wallet/select-send-address
- (fn [{:keys [db]} [{:keys [address token? recipient stack-id]}]]
+ (fn [{:keys [db]} [{:keys [address recipient stack-id start-flow?]}]]
    (let [[prefix to-address] (utils/split-prefix-and-address address)
          test-net?           (get-in db [:profile/profile :test-networks-enabled?])
          goerli-enabled?     (get-in db [:profile/profile :is-goerli-enabled?])
@@ -65,28 +65,27 @@
               (assoc-in [:wallet :ui :send :address-prefix] prefix)
               (assoc-in [:wallet :ui :send :selected-networks] selected-networks))
       :fx [[:dispatch
-            [:navigate-to-within-stack
-             (if token?
-               [:screen/wallet.send-input-amount stack-id]
-               [:screen/wallet.select-asset stack-id])]]]})))
+            [:wallet/wizard-navigate-forward
+             {:current-screen stack-id
+              :start-flow?    start-flow?
+              :flow-id        :wallet-flow}]]]})))
 
 (rf/reg-event-fx
  :wallet/update-receiver-networks
  (fn [{:keys [db]} [selected-networks]]
    {:db (assoc-in db [:wallet :ui :send :selected-networks] selected-networks)}))
 
 (rf/reg-event-fx :wallet/send-select-token
- (fn [{:keys [db]} [{:keys [token stack-id]}]]
+ (fn [{:keys [db]} [{:keys [token stack-id start-flow?]}]]
    {:db (-> db
             (update-in [:wallet :ui :send] dissoc :collectible)
             (assoc-in [:wallet :ui :send :token] token))
     :fx [[:dispatch [:wallet/clean-suggested-routes]]
-         [:dispatch [:navigate-to-within-stack [:screen/wallet.send-input-amount stack-id]]]]}))
-
-(rf/reg-event-fx
- :wallet/send-select-token-drawer
- (fn [{:keys [db]} [{:keys [token]}]]
-   {:db (assoc-in db [:wallet :ui :send :token] token)}))
+         [:dispatch
+          [:wallet/wizard-navigate-forward
+           {:current-screen stack-id
+            :start-flow?    start-flow?
+            :flow-id        :wallet-flow}]]]}))
 
 (rf/reg-event-fx :wallet/clean-selected-token
  (fn [{:keys [db]}]
@@ -113,9 +112,13 @@
          [:navigate-to-within-stack [:screen/wallet.transaction-confirmation stack-id]]]}))
 
 (rf/reg-event-fx :wallet/send-select-amount
- (fn [{:keys [db]} [{:keys [amount stack-id]}]]
+ (fn [{:keys [db]} [{:keys [amount stack-id start-flow?]}]]
    {:db (assoc-in db [:wallet :ui :send :amount] amount)
-    :fx [[:dispatch [:navigate-to-within-stack [:screen/wallet.transaction-confirmation stack-id]]]]}))
+    :fx [[:dispatch
+          [:wallet/wizard-navigate-forward
+           {:current-screen stack-id
+            :start-flow?    start-flow?
+            :flow-id        :wallet-flow}]]]}))
 
 (rf/reg-event-fx :wallet/get-suggested-routes
  (fn [{:keys [db now]} [{:keys [amount]}]]
@@ -184,12 +187,17 @@
               (assoc-in [:wallet :transactions] transaction-details)
               (assoc-in [:wallet :ui :send :transaction-ids] transaction-ids))
       :fx [[:dispatch
-            [:navigate-to-within-stack
-             [:screen/wallet.transaction-progress :screen/wallet.transaction-confirmation]]]]})))
+            [:wallet/wizard-navigate-forward
+             {:current-screen :screen/wallet.transaction-confirmation
+              :flow-id        :wallet-flow}]]]})))
 
 (rf/reg-event-fx :wallet/close-transaction-progress-page
  (fn [_]
-   {:fx [[:dispatch [:dismiss-modal :screen/wallet.transaction-progress]]]}))
+   {:fx [[:dispatch [:wallet/clean-scanned-address]]
+         [:dispatch [:wallet/clean-local-suggestions]]
+         [:dispatch [:wallet/clean-send-address]]
+         [:dispatch [:wallet/select-address-tab nil]]
+         [:dispatch [:dismiss-modal :screen/wallet.transaction-progress]]]}))
 
 (defn- transaction-data
   [{:keys [from-address to-address token-address route data eth-transfer?]}]
@@ -331,11 +339,7 @@
                        :params     request-params
                        :on-success (fn [result]
                                      (rf/dispatch [:hide-bottom-sheet])
-                                     (rf/dispatch [:wallet/add-authorized-transaction result])
-                                     (rf/dispatch [:wallet/clean-scanned-address])
-                                     (rf/dispatch [:wallet/clean-local-suggestions])
-                                     (rf/dispatch [:wallet/clean-send-address])
-                                     (rf/dispatch [:wallet/select-address-tab nil]))
+                                     (rf/dispatch [:wallet/add-authorized-transaction result]))
                        :on-error   (fn [error]
                                      (log/error "failed to send transaction"
                                                 {:event  :wallet/send-transaction

src/status_im/contexts/wallet/send/flow_config.cljs

@@ -0,0 +1,11 @@
+(ns status-im.contexts.wallet.send.flow-config)
+
+(def steps
+  [{:screen-id  :screen/wallet.select-address
+    :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :recipient])))}
+   {:screen-id  :screen/wallet.select-asset
+    :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :token])))}
+   {:screen-id  :screen/wallet.send-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}])

src/status_im/contexts/wallet/send/select_address/tabs/view.cljs

@@ -14,7 +14,6 @@
    {:account-props (assoc account :customization-color color)
     :on-press      #(rf/dispatch [:wallet/select-send-address
                                   {:address   address
-                                   :token?    false
                                    :recipient account
                                    :stack-id  :screen/wallet.select-address}])}])
 

src/status_im/contexts/wallet/send/select_address/view.cljs

@@ -93,7 +93,6 @@
                                     (when-not ens
                                       (rf/dispatch [:wallet/select-send-address
                                                     {:address   address
-                                                     :token?    false
                                                      :recipient local-suggestion
                                                      :stack-id  :screen/wallet.select-address}]))))
                  :active-state? false}]
@@ -140,7 +139,6 @@
         input-focused? (reagent/atom false)]
     (fn []
       (let [selected-tab          (or (rf/sub [:wallet/send-tab]) (:id (first tabs-data)))
-            token                 (rf/sub [:wallet/wallet-send-token])
             valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))
             {:keys [color]}       (rf/sub [:wallet/current-viewing-account])]
         [floating-button-page/view
@@ -157,7 +155,6 @@
                                         :on-press            #(rf/dispatch
                                                                [:wallet/select-send-address
                                                                 {:address @input-value
-                                                                 :token? (some? token)
                                                                  :stack-id
                                                                  :screen/wallet.select-address}])
                                         :customization-color color}

src/status_im/contexts/wallet/send/select_asset/view.cljs

@@ -63,7 +63,10 @@
         search-text    (reagent/atom "")
         on-change-text #(reset! search-text %)
         on-change-tab  #(reset! selected-tab %)
-        on-close       #(rf/dispatch [:navigate-back])]
+        on-close       (fn []
+                         (rf/dispatch [:wallet/clean-selected-token])
+                         (rf/dispatch [:wallet/clean-selected-collectible])
+                         (rf/dispatch [:navigate-back]))]
     (fn []
       [rn/safe-area-view {:style style/container}
        [account-switcher/view

src/status_im/contexts/wallet/send/send_amount/view.cljs

@@ -10,9 +10,6 @@
   [input-amount/view
    {:current-screen-id :screen/wallet.send-input-amount
     :button-one-label  (i18n/label :t/confirm)
-    :on-navigate-back  (fn []
-                         (rf/dispatch [:wallet/clean-selected-token])
-                         (rf/dispatch [:wallet/clean-selected-collectible])
-                         (rf/dispatch [:navigate-back]))}])
+    :on-navigate-back  #(rf/dispatch [:navigate-back])}])
 
 (def view (quo.theme/with-theme view-internal))

src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs

@@ -245,9 +245,9 @@
 (defn- view-internal
   [_]
   (let [on-close (fn []
-                   (rf/dispatch [:navigate-back])
                    (rf/dispatch [:wallet/clean-suggested-routes])
-                   (rf/dispatch [:wallet/clean-selected-collectible]))]
+                   (rf/dispatch [:wallet/clean-selected-collectible])
+                   (rf/dispatch [:navigate-back]))]
     (fn [{:keys [theme]}]
       (let [send-transaction-data (rf/sub [:wallet/wallet-send])
             token                 (:token send-transaction-data)

src/status_im/events.cljs

@@ -28,6 +28,7 @@
     status-im.contexts.profile.settings.events
     status-im.contexts.shell.share.events
     status-im.contexts.syncing.events
+    status-im.contexts.wallet.common.wizard
     status-im.contexts.wallet.create-account.events
     status-im.contexts.wallet.effects
     status-im.contexts.wallet.events