feat(wallet): connect backend to transaction progress page (#18506)

src/legacy/status_im/ethereum/subscriptions.cljs

@@ -79,6 +79,10 @@
     "recent-history-ready"                     (recent-history-fetching-ended cofx event)
     "fetching-history-error"                   (fetching-error cofx event)
     "non-archival-node-detected"               (non-archival-node-detected cofx event)
+    "pending-transaction-status-changed"       {:fx
+                                                [[:dispatch
+                                                  [:wallet/pending-transaction-status-changed-received
+                                                   event]]]}
     "wallet-owned-collectibles-filtering-done" {:fx [[:dispatch
                                                       [:wallet/owned-collectibles-filtering-done
                                                        event]]]}

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

@@ -46,7 +46,9 @@
          [quo/wallet-graph {:time-frame :empty}]
          (when (not watch-only?)
            [quo/wallet-ctas
-            {:send-action    #(rf/dispatch [:open-modal :wallet-select-address])
+            {:send-action    (fn []
+                               (rf/dispatch [:wallet/clean-send-data])
+                               (rf/dispatch [:open-modal :wallet-select-address]))
              :receive-action #(rf/dispatch [:open-modal :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

@@ -18,6 +18,7 @@
          :label               (i18n/label :t/send)
          :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 :wallet-select-address]))}
         {:icon                :i/receive

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

@@ -10,9 +10,12 @@
     [utils.number]
     [utils.re-frame :as rf]))
 
+(rf/reg-event-fx :wallet/clean-send-data
+ (fn [{:keys [db]}]
+   {:db (update-in db [:wallet :ui] dissoc :send)}))
+
 (rf/reg-event-fx :wallet/select-address-tab
  (fn [{:keys [db]} [tab]]
-
    {:db (assoc-in db [:wallet :ui :send :select-address-tab] tab)}))
 
 (rf/reg-event-fx :wallet/suggested-routes-success
@@ -126,14 +129,21 @@
 
 (rf/reg-event-fx :wallet/add-authorized-transaction
  (fn [{:keys [db]} [transaction]]
-   (let [transaction-hashes (:hashes transaction)
+   (let [transaction-batch-id (:id transaction)
-         chain-id           (key (first transaction-hashes))
+         transaction-hashes   (:hashes transaction)
-         tx-id              (first (val (first transaction-hashes)))
+         transaction-ids      (flatten (vals transaction-hashes))
-         transaction-detes  {:status   :pending
+         transaction-details  (send-utils/map-multitransaction-by-ids transaction-batch-id
-                             :id       (:id transaction)
+                                                                      transaction-hashes)]
-                             :chain-id chain-id}]
+     {:db (-> db
-     {:db (assoc-in db [:wallet :transactions tx-id] transaction-detes)
+              (assoc-in [:wallet :transactions] transaction-details)
-      :fx [[:dispatch [:navigate-to :wallet-transaction-progress]]]})))
+              (assoc-in [:wallet :ui :send :transaction-ids] transaction-ids))
+      :fx [[:dispatch
+            [:navigate-to-within-stack
+             [:wallet-transaction-progress :wallet-transaction-confirmation]]]]})))
+
+(rf/reg-event-fx :wallet/close-transaction-progress-page
+ (fn [_]
+   {:fx [[:dispatch [:dismiss-modal :wallet-transaction-progress]]]}))
 
 (defn- transaction-bridge
   [{:keys [from-address to-address route]}]

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

@@ -3,7 +3,6 @@
     [quo.core :as quo]
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
-    [reagent.core :as reagent]
     [status-im.common.floating-button-page.view :as floating-button-page]
     [status-im.common.resources :as resources]
     [status-im.contexts.wallet.send.transaction-progress.style :as style]
@@ -13,39 +12,42 @@
 (defn titles
   [status]
   (case status
-    :sending   (i18n/label :t/sending-with-elipsis)
+    :pending   (i18n/label :t/sending-with-ellipsis)
     :confirmed (i18n/label :t/transaction-confirmed)
     :finalised (i18n/label :t/transacation-finalised)
     ""))
 
+(defn combined-status-overview
+  [transaction-details]
+  (cond
+    (every? (fn [[_k v]] (= (:status v) :finalised)) transaction-details) :finalised
+    (some (fn [[_k v]] (= (:status v) :pending)) transaction-details)     :pending
+    (some (fn [[_k v]] (= (:status v) :confirmed)) transaction-details)   :confirmed
+    :else                                                                 nil))
+
 (defn view
   []
-  (let [current-address (rf/sub [:wallet/current-viewing-account-address])
+  (let [leave-page      #(rf/dispatch [:wallet/close-transaction-progress-page])
-        leave-page      (fn []
-                          (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 [:navigate-to :wallet-accounts current-address]))
-        status          (reagent/atom :sending)
         {:keys [color]} (rf/sub [:wallet/current-viewing-account])]
-    [floating-button-page/view
+    (fn []
-     {:header              [quo/page-nav
+      (let [transaction-details (rf/sub [:wallet/send-transaction-progress])]
-                            {:type                :no-title
+        [floating-button-page/view
-                             :background          :blur
+         {:header              [quo/page-nav
-                             :icon-name           :i/close
+                                {:type                :no-title
-                             :margin-top          (safe-area/get-top)
+                                 :background          :blur
-                             :on-press            leave-page
+                                 :icon-name           :i/close
-                             :accessibility-label :top-bar}]
+                                 :margin-top          (safe-area/get-top)
-      :footer              [quo/button
+                                 :on-press            leave-page
-                            {:customization-color color
+                                 :accessibility-label :top-bar}]
-                             :on-press            leave-page}
+          :footer              [quo/button
-                            (i18n/label :t/done)]
+                                {:customization-color color
-      :customization-color color
+                                 :on-press            leave-page}
-      :gradient-cover?     true}
+                                (i18n/label :t/done)]
-     [rn/view {:style style/content-container}
+          :customization-color color
-      [rn/image
+          :gradient-cover?     true}
-       {:source (resources/get-image :transaction-progress)
+         [rn/view {:style style/content-container}
-        :style  {:margin-bottom 12}}]
+          [rn/image
-      [quo/standard-title
+           {:source (resources/get-image :transaction-progress)
-       {:title (titles @status)}]]]))
+            :style  {:margin-bottom 12}}]
+          [quo/standard-title
+           {:title (titles (combined-status-overview transaction-details))}]]]))))

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

@@ -4,3 +4,19 @@
 (defn amount-in-hex
   [amount token-decimal]
   (money/to-hex (money/mul (money/bignumber amount) (money/from-decimal token-decimal))))
+
+(defn map-multitransaction-by-ids
+  [transaction-batch-id transaction-hashes]
+  (reduce-kv (fn [map1 chain-id value1]
+               (merge map1
+                      (reduce
+                       (fn [map2 tx-id]
+                         (assoc map2
+                                tx-id
+                                {:status   :pending
+                                 :id       transaction-batch-id
+                                 :chain-id chain-id}))
+                       {}
+                       value1)))
+             {}
+             transaction-hashes))

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

@@ -8,3 +8,22 @@
           decimal 18]
       (is (= (utils/amount-in-hex amount decimal)
              "0xde0b6b3a7640000")))))
+
+(def multichain-transacation
+  {:id     61
+   :hashes {:5   ["0x5"]
+            :420 ["0x12" "0x11"]}})
+
+(deftest test-map-multitransaction-by-ids
+  (testing "test map-multitransaction-by-ids formats to right data structure"
+    (let [{:keys [id hashes]} multichain-transacation]
+      (is (= (utils/map-multitransaction-by-ids id hashes)
+             {"0x5"  {:status   :pending
+                      :id       61
+                      :chain-id :5}
+              "0x12" {:status   :pending
+                      :id       61
+                      :chain-id :420}
+              "0x11" {:status   :pending
+                      :id       61
+                      :chain-id :420}})))))

src/status_im/contexts/wallet/signals.cljs

@@ -0,0 +1,10 @@
+(ns status-im.contexts.wallet.signals
+  (:require [utils.re-frame :as rf]))
+
+(rf/reg-event-fx
+ :wallet/pending-transaction-status-changed-received
+ (fn [{:keys [db]} [{:keys [message]}]]
+   (let [details (js->clj (js/JSON.parse message) :keywordize-keys true)
+         tx-hash (:hash details)]
+     {:db (update-in db [:wallet :transactions tx-hash] assoc :status :confirmed :blocks 1)})))
+

src/status_im/core.cljs

@@ -19,6 +19,7 @@
     [status-im.contexts.profile.push-notifications.events :as notifications]
     [status-im.contexts.shell.jump-to.state :as shell.state]
     [status-im.contexts.shell.jump-to.utils :as shell.utils]
+    status-im.contexts.wallet.signals
     status-im.events
     status-im.navigation.core
     [status-im.setup.dev :as dev]

src/status_im/events.cljs

@@ -26,6 +26,7 @@
     status-im.contexts.wallet.effects
     status-im.contexts.wallet.events
     status-im.contexts.wallet.send.events
+    status-im.contexts.wallet.signals
     [status-im.db :as db]
     [utils.re-frame :as rf]))
 

src/status_im/navigation/screens.cljs

@@ -366,7 +366,6 @@
      :component wallet-transaction-confirmation/view}
 
     {:name      :wallet-transaction-progress
-     :options   {:insets {:bottom? true}}
      :component wallet-transaction-progress/view}
 
     {:name      :scan-address

src/status_im/subs/wallet/send.cljs

@@ -18,3 +18,17 @@
  :wallet/wallet-send-recipient
  :<- [:wallet/wallet-send]
  :-> :recipient)
+
+(rf/reg-sub
+ :wallet/send-transaction-ids
+ :<- [:wallet/wallet-send]
+ :-> :transaction-ids)
+
+(rf/reg-sub
+ :wallet/send-transaction-progress
+ :<- [:wallet/send-transaction-ids]
+ :<- [:wallet/transactions]
+ (fn [[tx-ids transactions]]
+   (let [send-tx-ids (set (keys transactions))]
+     (select-keys transactions
+                  (filter send-tx-ids tx-ids)))))

src/status_im/subs/wallet/send_test.cljs

@@ -12,3 +12,44 @@
   (testing "returns active tab for selecting address"
     (swap! rf-db/app-db assoc-in [:wallet :ui :send :select-address-tab] :tabs/recent)
     (is (= :tabs/recent (rf/sub [sub-name])))))
+
+(h/deftest-sub :wallet/send-transaction-ids
+  [sub-name]
+  (testing "returns the transaction ids attached the last send flow"
+    (swap! rf-db/app-db assoc-in [:wallet :ui :send :transaction-ids] ["0x123" "0x321"])
+    (is (= ["0x123" "0x321"] (rf/sub [sub-name])))))
+
+(h/deftest-sub :wallet/send-transaction-progress
+  [sub-name]
+  (testing "returns transaction data for a transaction with multiple transactions"
+    (swap! rf-db/app-db assoc-in
+      [:wallet :transactions]
+      {"0x123" {:status   :pending
+                :id       240
+                :chain-id 5}
+       "0x321" {:status   :pending
+                :id       240
+                :chain-id 1}})
+    (swap! rf-db/app-db assoc-in [:wallet :ui :send :transaction-ids] ["0x123" "0x321"])
+    (is (= {"0x123" {:status   :pending
+                     :id       240
+                     :chain-id 5}
+            "0x321" {:status   :pending
+                     :id       240
+                     :chain-id 1}}
+           (rf/sub [sub-name]))))
+
+  (testing "returns transaction data for a transaction with a single transaction"
+    (swap! rf-db/app-db assoc-in
+      [:wallet :transactions]
+      {"0x123" {:status   :pending
+                :id       100
+                :chain-id 5}
+       "0x321" {:status   :pending
+                :id       240
+                :chain-id 1}})
+    (swap! rf-db/app-db assoc-in [:wallet :ui :send :transaction-ids] ["0x123"])
+    (is (= {"0x123" {:status   :pending
+                     :id       100
+                     :chain-id 5}}
+           (rf/sub [sub-name])))))

src/status_im/subs/wallet/wallet.cljs

@@ -219,3 +219,8 @@
    (map (fn [{:keys [color] :as account}]
           (assoc account :customization-color color))
         accounts)))
+
+(rf/reg-sub
+ :wallet/transactions
+ :<- [:wallet]
+ :-> :transactions)

translations/en.json

@@ -2454,7 +2454,7 @@
     "what-are-you-waiting-for": "What are you waiting for?",
     "no-relevant-tokens": "No relevant tokens",
     "on-the-web": "On the web",
-    "sending-with-elipsis": "Sending...",
+    "sending-with-ellipsis": "Sending...",
     "transaction-confirmed": "Transaction confirmed!",
     "transacation-finalised": "Transaction finalised!",
     "no-relevant-tokens": "No relevant tokens",