feat(wallet): Fix bugs in the bridge flow and add missing entry points (#20197)

* Fix "Bridge to" screen not showing

* Fix "Unkown flow" alert in bridge flow

* Fix warnings in transaction confirmation page

* Fix missing images and strings while bridging in transaction confirmation page

* Fix stale data shown for an instant in the suggested routes component

* Add support for bridge flow started in the wallet home screen

* Fix fetch-activities event

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

@@ -24,16 +24,18 @@
 
 (defn view
   []
-  (let [selected-tab        (or (rf/sub [:wallet/account-tab]) first-tab-id)
+  (let [selected-tab          (or (rf/sub [:wallet/account-tab]) first-tab-id)
-        {:keys [name color formatted-balance watch-only?
+        {:keys [name color formatted-balance
-                address]}   (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/clean-send-data]))
     (rn/use-mount
-     #(rf/dispatch [:wallet/fetch-activities-for-current-account address]))
+     #(rf/dispatch [:wallet/fetch-activities-for-current-account]))
     [rn/view {:style {:flex 1}}
      [account-switcher/view
       {:type     :wallet-networks
-       :on-press #(rf/dispatch [:wallet/close-account-page])}]
+       :on-press (fn []
+                   (rf/dispatch [:wallet/close-account-page]))}]
      [quo/account-overview
       {:container-style     style/account-overview
        :current-value       formatted-balance

src/status_im/contexts/wallet/bridge/bridge_to/view.cljs

@@ -51,6 +51,9 @@
         account-token    (when account-token (assoc account-token :networks (:networks token)))
         bridge-to-title  (i18n/label :t/bridge-to
                                      {:name (string/upper-case (str token-symbol))})]
+
+    (rn/use-unmount #(rf/dispatch [:wallet/clean-bridge-to-selection]))
+
     [rn/view
      [account-switcher/view
       {:on-press            #(rf/dispatch [:navigate-back])

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

@@ -1,7 +1,9 @@
 (ns status-im.contexts.wallet.bridge.flow-config)
 
 (def steps
-  [{:screen-id  :screen/wallet.bridge-select-asset
+  [{:screen-id  :screen/wallet.select-from
+    :skip-step? (fn [db] (some? (get-in db [:wallet :current-viewing-account-address])))}
+   {:screen-id  :screen/wallet.bridge-select-asset
     :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :token])))}
    {:screen-id  :screen/wallet.bridge-to
     :skip-step? (fn [db] (some? (get-in db [:wallet :ui :send :bridge-to-chain-id])))}

src/status_im/contexts/wallet/bridge/input_amount/view.cljs

@@ -8,11 +8,16 @@
 
 (defn view
   []
+  (rn/use-unmount #(rf/dispatch [:wallet/clean-routes-calculation]))
   [rn/view {:style style/bridge-send-wrapper}
    [input-amount/view
     {:current-screen-id :screen/wallet.bridge-input-amount
      :button-one-label  (i18n/label :t/review-bridge)
      :button-one-props  {:icon-left :i/bridge}
+     :on-confirm        (fn [amount]
+                          (rf/dispatch [:wallet/set-token-amount-to-bridge
+                                        {:amount   amount
+                                         :stack-id :screen/wallet.bridge-input-amount}]))
      :on-navigate-back  (fn []
                           (rf/dispatch [:wallet/clean-disabled-from-networks])
                           (rf/dispatch [:wallet/clean-send-amount])

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

@@ -15,7 +15,9 @@
     (fn []
       [rn/view {:style {:flex 1}}
        [account-switcher/view
-        {:on-press            #(rf/dispatch [:navigate-back])
+        {:on-press            (fn []
+                                (rf/dispatch [:navigate-back])
+                                (rf/dispatch [:wallet/clean-selected-token]))
          :accessibility-label :top-bar
          :switcher-type       :select-account}]
        [quo/page-top {:title (i18n/label :t/bridge)}]

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

@@ -35,13 +35,13 @@
                           #(rf/dispatch [:open-modal :screen/share-shell {:initial-tab :wallet}]))})
 
 (defn- action-bridge
-  [token-data]
+  [bridge-params]
   {:icon                :i/bridge
    :accessibility-label :bridge
    :label               (i18n/label :t/bridge)
    :on-press            (fn []
                           (rf/dispatch [:hide-bottom-sheet])
-                          (rf/dispatch [:wallet/bridge-select-token {:token token-data}]))})
+                          (rf/dispatch [:wallet/bridge-select-token bridge-params]))})
 
 (defn- action-swap
   []
@@ -67,26 +67,27 @@
 
 (defn token-value-drawer
   [token watch-only?]
-  (let [token-symbol      (:token token)
+  (let [token-symbol          (:token token)
-        token-data        (first (rf/sub [:wallet/current-viewing-account-tokens-filtered token-symbol]))
+        token-data            (first (rf/sub [:wallet/current-viewing-account-tokens-filtered
-        selected-account? (rf/sub [:wallet/current-viewing-account-address])
+                                              token-symbol]))
-        send-params       (if selected-account?
+        selected-account?     (rf/sub [:wallet/current-viewing-account-address])
-                            {:token       token-data
+        send-or-bridge-params (if selected-account?
-                             :stack-id    :screen/wallet.accounts
+                                {:token       token-data
-                             :start-flow? true}
+                                 :stack-id    :screen/wallet.accounts
-                            {:token-symbol token-symbol
+                                 :start-flow? true}
-                             :stack-id     :wallet-stack
+                                {:token-symbol token-symbol
-                             :start-flow?  true})]
+                                 :stack-id     :wallet-stack
+                                 :start-flow?  true})]
     [quo/action-drawer
      [(cond->> [(when (ff/enabled? ::ff/wallet.assets-modal-manage-tokens)
                   (action-manage-tokens watch-only?))
                 (when (ff/enabled? ::ff/wallet.assets-modal-hide)
                   (action-hide))]
         (not watch-only?) (concat [(action-buy)
-                                   (action-send send-params)
+                                   (action-send send-or-bridge-params)
                                    (action-receive selected-account?)
                                    (when (ff/enabled? ::ff/wallet.swap) (action-swap))
-                                   (action-bridge token-data)]))]]))
+                                   (action-bridge send-or-bridge-params)]))]]))
 
 (defn view
   [item _ _ {:keys [watch-only?]}]

src/status_im/contexts/wallet/events.cljs

@@ -42,7 +42,7 @@
  (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]]]}))
+         [:dispatch [:wallet/fetch-activities-for-current-account]]]}))
 
 (rf/reg-event-fx :wallet/navigate-to-new-account
  (fn [{:keys [db]} [address]]
@@ -259,12 +259,14 @@
 (rf/reg-event-fx :wallet/get-keypairs get-keypairs)
 
 (rf/reg-event-fx :wallet/bridge-select-token
- (fn [{:keys [db]} [{:keys [token stack-id]}]]
+ (fn [{:keys [db]} [{:keys [token token-symbol stack-id]}]]
-   (let [to-address (get-in db [:wallet :current-viewing-account-address])]
+   (let [missing-recipient? (-> db :wallet :ui :send :to-address nil?)
-     {:db (-> db
+         to-address         (-> db :wallet :current-viewing-account-address)]
-              (assoc-in [:wallet :ui :send :token] token)
+     {:db (cond-> db
-              (assoc-in [:wallet :ui :send :to-address] to-address)
+            :always            (assoc-in [:wallet :ui :send :tx-type] :tx/bridge)
-              (assoc-in [:wallet :ui :send :tx-type] :tx/bridge))
+            token              (assoc-in [:wallet :ui :send :token] token)
+            token-symbol       (assoc-in [:wallet :ui :send :token-symbol] token-symbol)
+            missing-recipient? (assoc-in [:wallet :ui :send :to-address] to-address))
       :fx [[:dispatch
             [:wallet/wizard-navigate-forward
              {:current-screen stack-id

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

@@ -197,8 +197,8 @@
    (let [{token-networks :networks}                token
          receiver-networks                         (get-in db [:wallet :ui :send :receiver-networks])
          token-networks-ids                        (mapv #(:chain-id %) token-networks)
-         token-not-supported-in-receiver-networks? (not (some (set receiver-networks)
+         token-not-supported-in-receiver-networks? (not-any? (set receiver-networks)
-                                                              token-networks-ids))]
+                                                             token-networks-ids)]
      {:db (cond-> db
             :always      (update-in [:wallet :ui :send] dissoc :collectible)
             :always      (assoc-in [:wallet :ui :send :token-display-name]
@@ -305,6 +305,29 @@
             :start-flow?    start-flow?
             :flow-id        :wallet-send-flow}]]]}))
 
+(rf/reg-event-fx
+ :wallet/set-token-amount-to-bridge
+ (fn [{:keys [db]} [{:keys [amount stack-id start-flow?]}]]
+   {:db (assoc-in db [:wallet :ui :send :amount] amount)
+    :fx [[:dispatch
+          [:wallet/wizard-navigate-forward
+           {:current-screen stack-id
+            :start-flow?    start-flow?
+            :flow-id        :wallet-bridge-flow}]]]}))
+
+(rf/reg-event-fx
+ :wallet/clean-bridge-to-selection
+ (fn [{:keys [db]}]
+   {:db (update-in db [:wallet :ui :send] dissoc :bridge-to-chain-id)}))
+
+(rf/reg-event-fx
+ :wallet/clean-routes-calculation
+ (fn [{:keys [db]}]
+   (let [keys-to-remove [:to-values-by-chain :network-links :sender-network-values :route
+                         :receiver-network-values :suggested-routes :from-values-by-chain
+                         :loading-suggested-routes? :suggested-routes-call-timestamp]]
+     {:db (update-in db [:wallet :ui :send] #(apply dissoc % keys-to-remove))})))
+
 (rf/reg-event-fx :wallet/disable-from-networks
  (fn [{:keys [db]} [chain-ids]]
    {:db (assoc-in db [:wallet :ui :send :disabled-from-chain-ids] chain-ids)}))
@@ -463,7 +486,7 @@
  (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/fetch-activities-for-current-account]]
            [:dispatch [:wallet/select-account-tab :activity]]
            [:dispatch-later
             [{:ms       20
@@ -632,23 +655,26 @@
 (rf/reg-event-fx
  :wallet/select-from-account
  (fn [{db :db} [{:keys [address stack-id network-details start-flow?]}]]
-   (let [token-symbol (-> db :wallet :ui :send :token-symbol)
+   (let [{:keys [token-symbol
-         token        (when token-symbol
+                 tx-type]} (-> db :wallet :ui :send)
-                        ;; When this flow has started in the wallet home page, we know the
+         token             (when token-symbol
-                        ;; token or collectible to send, but we don't know from which
+                             ;; When this flow has started in the wallet home page, we know the
-                        ;; account, so we extract the token data from the picked account.
+                             ;; token or collectible to send, but we don't know from which
-                        (let [token (utils/get-token-from-account db token-symbol address)]
+                             ;; account, so we extract the token data from the picked account.
-                          (assoc token
+                             (let [token (utils/get-token-from-account db token-symbol address)]
-                                 :networks      (network-utils/network-list token network-details)
+                               (assoc token
-                                 :total-balance (utils/calculate-total-token-balance token))))]
+                                      :networks      (network-utils/network-list token network-details)
-     {:db (if token-symbol
+                                      :total-balance (utils/calculate-total-token-balance token))))
-            (-> db
+         bridge-tx?        (= tx-type :tx/bridge)
-                (assoc-in [:wallet :ui :send :token] token)
+         flow-id           (if bridge-tx?
-                (update-in [:wallet :ui :send] dissoc :token-symbol))
+                             :wallet-bridge-flow
-            db)
+                             :wallet-send-flow)]
+     {:db (cond-> db
+            token-symbol (assoc-in [:wallet :ui :send :token] token)
+            bridge-tx?   (assoc-in [:wallet :ui :send :to-address] address))
       :fx [[:dispatch [:wallet/switch-current-viewing-account address]]
            [:dispatch
             [:wallet/wizard-navigate-forward
              {:current-screen stack-id
               :start-flow?    start-flow?
-              :flow-id        :wallet-send-flow}]]]})))
+              :flow-id        flow-id}]]]})))

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

@@ -19,6 +19,7 @@
 (defn- on-close
   []
   (rf/dispatch [:wallet/clean-current-viewing-account])
+  (rf/dispatch [:wallet/clean-send-data])
   (rf/dispatch [:navigate-back]))
 
 (defn- render-fn

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

@@ -394,7 +394,7 @@
                                               sending-to-unpreferred-networks?
                                               #(show-unpreferred-networks-alert on-confirm)
                                               :else
-                                              on-confirm)}
+                                              #(on-confirm amount))}
                                 (when should-try-again?
                                   {:type :grey}))}]
      [quo/numbered-keyboard

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

@@ -15,8 +15,8 @@
     [utils.security.core :as security]))
 
 (defn- transaction-title
-  [{:keys [token-display-name amount account to-address route to-network image-url transaction-type
+  [{:keys [token-display-name amount account to-address route to-network image-url
-           collectible?]}]
+           transaction-type collectible?]}]
   (let [to-network-name  (:network-name to-network)
         to-network-color (if (= to-network-name :mainnet) :ethereum to-network-name)]
     [rn/view {:style style/content-container}
@@ -30,51 +30,54 @@
          (i18n/label :t/bridge)
          (i18n/label :t/send))]
       [quo/summary-tag
-       {:token        (if collectible? "" token-display-name)
+       (cond-> {:token (if collectible? "" token-display-name)
-        :label        (str amount " " token-display-name)
+                :label (str amount " " token-display-name)
-        :type         (if collectible? :collectible :token)
+                :type  (if collectible? :collectible :token)}
-        :image-source (if collectible? image-url :eth)}]]
+         collectible? (assoc :image-source image-url))]]
      (if (= transaction-type :tx/bridge)
-       (map-indexed
+       (doall
-        (fn [idx path]
+        (map-indexed
-          (let [from-network             (:from path)
+         (fn [idx path]
-                chain-id                 (:chain-id from-network)
+           (let [from-network             (:from path)
-                network                  (rf/sub [:wallet/network-details-by-chain-id
+                 chain-id                 (:chain-id from-network)
-                                                  chain-id])
+                 network                  (rf/sub [:wallet/network-details-by-chain-id
-                network-name             (:network-name network)
+                                                   chain-id])
-                network-name-text        (name network-name)
+                 network-name             (:network-name network)
-                network-name-capitalized (when (seq network-name-text)
+                 network-name-text        (name network-name)
-                                           (string/capitalize network-name-text))
+                 network-name-capitalized (when (seq network-name-text)
-                network-color            (if (= network-name :mainnet) :ethereum network-name)]
+                                            (string/capitalize network-name-text))
-            [rn/view
+                 network-color            (if (= network-name :mainnet) :ethereum network-name)]
-             {:style {:flex-direction :row
+             (with-meta
-                      :margin-top     4}}
+               [rn/view
-             (if (zero? idx)
+                {:style {:flex-direction :row
-               [:<>
+                         :margin-top     4}}
-                [quo/text
+                (if (zero? idx)
-                 {:size                :heading-1
+                  [:<>
-                  :weight              :semi-bold
+                   [quo/text
-                  :style               style/title-container
+                    {:size                :heading-1
-                  :accessibility-label :send-label}
+                     :weight              :semi-bold
-                 (i18n/label :t/from)]
+                     :style               style/title-container
-                [quo/summary-tag
+                     :accessibility-label :send-label}
-                 {:label               network-name-capitalized
+                    (i18n/label :t/from)]
-                  :type                :network
+                   [quo/summary-tag
-                  :image-source        (:source network)
+                    {:label               network-name-capitalized
-                  :customization-color network-color}]]
+                     :type                :network
-               [:<>
+                     :image-source        (:source network)
-                [quo/text
+                     :customization-color network-color}]]
-                 {:size                :heading-1
+                  [:<>
-                  :weight              :semi-bold
+                   [quo/text
-                  :style               style/title-container
+                    {:size                :heading-1
-                  :accessibility-label :send-label}
+                     :weight              :semi-bold
-                 (str (i18n/label :t/and) " ")]
+                     :style               style/title-container
-                [quo/summary-tag
+                     :accessibility-label :send-label}
-                 {:label               network-name-capitalized
+                    (str (i18n/label :t/and) " ")]
-                  :type                :network
+                   [quo/summary-tag
-                  :image-source        (:source network)
+                    {:label               network-name-capitalized
-                  :customization-color network-color}]])]))
+                     :type                :network
-        route)
+                     :image-source        (:source network)
+                     :customization-color network-color}]])]
+               {:key (str "transaction-title" idx)})))
+         route))
        [rn/view
         {:style {:flex-direction :row
                  :margin-top     4}}
@@ -126,15 +129,18 @@
 (defn- user-summary
   [{:keys [network-values token-display-name account-props theme label accessibility-label
            summary-type]}]
-  (let [network-values
+  (let [network-values (reduce-kv
-        (reduce-kv
+                        (fn [acc chain-id amount]
-         (fn [acc chain-id amount]
+                          (let [network-name    (network-utils/id->network chain-id)
-           (let [network-name (network-utils/id->network chain-id)]
+                                network-keyword (if (= network-name :mainnet)
-             (assoc acc
+                                                  :ethereum
-                    (if (= network-name :mainnet) :ethereum network-name)
+                                                  network-name)]
-                    {:amount amount :token-symbol token-display-name})))
+                            (assoc acc
-         {}
+                                   network-keyword
-         network-values)]
+                                   {:amount       amount
+                                    :token-symbol token-display-name})))
+                        {}
+                        network-values)]
     [rn/view
      {:style {:padding-horizontal 20
               :padding-bottom     16}}
@@ -209,6 +215,8 @@
                                            (get-in collectible [:preview-url :uri]))
             transaction-type             (:tx-type send-transaction-data)
             estimated-time-min           (reduce + (map :estimated-time route))
+            token-symbol                 (or token-display-name
+                                             (-> send-transaction-data :token :symbol))
             first-route                  (first route)
             native-currency-symbol       (get-in first-route [:from :native-currency-symbol])
             native-token                 (when native-currency-symbol
@@ -265,7 +273,7 @@
            :customization-color      (:color account)}
           [rn/view
            [transaction-title
-            {:token-display-name token-display-name
+            {:token-display-name token-symbol
              :amount             amount
              :account            account
              :to-address         to-address
@@ -275,7 +283,7 @@
              :transaction-type   transaction-type
              :collectible?       collectible?}]
            [user-summary
-            {:token-display-name  token-display-name
+            {:token-display-name  token-symbol
              :summary-type        :status-account
              :accessibility-label :summary-from-label
              :label               (i18n/label :t/from-capitalized)
@@ -283,7 +291,7 @@
              :account-props       from-account-props
              :theme               theme}]
            [user-summary
-            {:token-display-name  token-display-name
+            {:token-display-name  token-symbol
              :summary-type        (if (= transaction-type :tx/bridge)
                                     :status-account
                                     :account)