Add progress-spinner to sign-transaction

Disable screen while transaction is signing

Add handling for incorrect password on signing

Fix bug where spinner doesn't appear on the second time

Address feedback

More rebase fixes

Fix spec failure

src/status_im/ui/screens/wallet/send/db.cljs

@@ -16,7 +16,10 @@
 (spec/def ::width double?)
 (spec/def ::camera-dimensions (spec/keys :req-un [::height ::width]))
 (spec/def ::camera-flashlight #{:on :off})
+(spec/def ::in-progress? boolean?)
 
 (spec/def :wallet/send-transaction (allowed-keys
-                                     :opt-un [::amount ::to-address ::to-name ::amount-error ::password ::wrong-password?
+                                     :opt-un [::amount ::to-address ::to-name ::amount-error ::password
-                                              ::waiting-signal? ::signing? ::transaction-id ::later? ::camera-dimensions ::camera-flashlight]))
+                                              ::waiting-signal? ::signing? ::transaction-id ::later?
+                                              ::camera-dimensions ::camera-flashlight ::in-progress?
+                                              ::wrong-password?]))

src/status_im/ui/screens/wallet/send/events.cljs

@@ -43,14 +43,15 @@
 (handlers/register-handler-fx
   ::transaction-completed
   (fn [{db :db} [_ {:keys [id response]}]]
-    (let [{:keys [hash error]} response]
+    (let [{:keys [hash error]} response
-      ;; error is handling in TRANSACTION FAILED signal from status-go
+          db' (assoc-in db [:wallet/send-transaction :in-progress?] false)]
-      (when-not (and error (string? error) (not (string/blank? error)))
+      (if-not (and error (string? error) (not (string/blank? error)))
-        {:db       (-> db
+        {:db       (-> db'
                        (update-in [:wallet :transactions-unsigned] dissoc id)
                        (assoc-in [:wallet/send-transaction :transaction-id] nil)
                        (assoc-in [:wallet/send-transaction :wrong-password?] false))
-         :dispatch [:navigate-to :wallet-transaction-sent]}))))
+         :dispatch [:navigate-to :wallet-transaction-sent]}
+        {:db db'}))))
 
 (defn on-transactions-completed [raw-results]
   (let [results (:results (types/json->clj raw-results))]
@@ -95,10 +96,12 @@
       (if transaction-id
         {::accept-transaction {:id           transaction-id
                                :password     password
-                               :on-completed on-transactions-completed}}
+                               :on-completed on-transactions-completed}
-        {:db                (update-in db [:wallet/send-transaction]
+         :db (assoc-in db [:wallet/send-transaction :in-progress?] true)}
-                                       #(assoc % :waiting-signal? true
+        {:db (update db :wallet/send-transaction assoc
-                                                 :later? later?))
+                     :waiting-signal? true
+                     :later? later?
+                     :in-progress? true)
          ::send-transaction {:web3  web3
                              :from  (get-in accounts [current-account-id :address])
                              :to    (:to-address send-transaction)
@@ -119,9 +122,10 @@
   :wallet/discard-transaction
   (fn [{{:wallet/keys   [send-transaction] :as db} :db} _]
     (let [{:keys [transaction-id]} send-transaction]
-      (merge {:db (-> db
+      (merge {:db (update db :wallet/send-transaction assoc
-                      (update-in [:wallet/send-transaction]
+                          :signing? false
-                                 #(assoc % :signing? false :transaction-id nil :wrong-password? false)))}
+                          :transaction-id nil
+                          :wrong-password? false)}
              (when transaction-id
                {:discard-transaction transaction-id})))))
 

src/status_im/ui/screens/wallet/send/styles.cljs

@@ -60,4 +60,14 @@
   {:padding        0
    :font-size      15
    :letter-spacing -0.2
-   :height         20})
+   :height         20})
+
+(def processing-view
+  {:position         :absolute
+   :top              0
+   :bottom           0
+   :right            0
+   :left             0
+   :align-items      :center
+   :justify-content  :center
+   :background-color (str styles/color-black "1A")})

src/status_im/ui/screens/wallet/send/views.cljs

@@ -59,7 +59,7 @@
 
 
 ;; "Cancel" and "Sign Transaction >" buttons, signing with password
-(defview signing-buttons [cancel-handler sign-handler]
+(defview signing-buttons [cancel-handler sign-handler in-progress?]
   (letsubs [sign-enabled? [:wallet.send/sign-password-enabled?]]
     [react/view wallet.styles/buttons-container
      [react/touchable-highlight {:on-press cancel-handler}
@@ -68,6 +68,7 @@
      [react/view components.styles/flex]
      [react/touchable-highlight {:on-press sign-handler}
       [react/view (wallet.styles/button-container sign-enabled?)
+       (when in-progress? [react/activity-indicator {:animating? true}])
        [components/button-text (i18n/label :t/transactions-sign-transaction)]
        [vector-icons/icon :icons/forward {:color :white :container-style wallet.styles/forward-icon-container}]]]]))
 
@@ -101,7 +102,8 @@
             amount-error [:get-in [:wallet/send-transaction :amount-error]]
             signing?     [:get-in [:wallet/send-transaction :signing?]]
             to-address   [:get-in [:wallet/send-transaction :to-address]]
-            to-name      [:get-in [:wallet/send-transaction :to-name]]]
+            to-name      [:get-in [:wallet/send-transaction :to-name]]
+            in-progress? [:get-in [:wallet/send-transaction :in-progress?]]]
     (let [sufficient-funds? (sufficient-funds? amount balance)]
       [react/keyboard-avoiding-view wallet.styles/wallet-modal-container
        [react/view components.styles/flex
@@ -117,7 +119,8 @@
            [components/choose-wallet]]
           [react/view wallet.styles/amount-container
            [components/amount-input
-            {:error         (or amount-error (when-not sufficient-funds? (i18n/label :t/wallet-insufficient-funds)))
+            {:error         (or amount-error
+                                (when-not sufficient-funds? (i18n/label :t/wallet-insufficient-funds)))
              :input-options {:auto-focus     true
                              :default-value  amount
                              :on-change-text #(let [value (string/trim %)]
@@ -128,10 +131,12 @@
         (if signing?
           [signing-buttons
            #(re-frame/dispatch [:wallet/discard-transaction])
-           #(re-frame/dispatch [:wallet/sign-transaction])]
+           #(re-frame/dispatch [:wallet/sign-transaction])
+           in-progress?]
           [sign-buttons amount-error to-address amount sufficient-funds? sign-later])
         (when signing?
-          [sign-panel])]])))
+          [sign-panel])]
+       (when in-progress? [react/view send.styles/processing-view])])))
 
 (defn toolbar-modal []
   [toolbar/toolbar2 {:style wallet.styles/toolbar}
@@ -144,7 +149,8 @@
             signing?     [:get-in [:wallet/send-transaction :signing?]]
             to-address   [:get-in [:wallet/send-transaction :to-address]]
             to-name      [:get-in [:wallet/send-transaction :to-name]]
-            recipient    [:contact-by-address @to-name]]
+            recipient    [:contact-by-address @to-name]
+            in-progress? [:get-in [:wallet/send-transaction :in-progress?]]]
     [react/keyboard-avoiding-view wallet.styles/wallet-modal-container
      [react/view components.styles/flex
       [status-bar/status-bar {:type :wallet}]
@@ -164,7 +170,8 @@
       (if signing?
         [signing-buttons
          #(re-frame/dispatch [:wallet/cancel-signing-modal])
-         #(re-frame/dispatch [:wallet/sign-transaction-modal])]
+         #(re-frame/dispatch [:wallet/sign-transaction-modal])
+         in-progress?]
         [sign-buttons amount-error to-address amount true #(re-frame/dispatch [:navigate-back])])
       (when signing?
-        [sign-panel])]]))
+        [sign-panel])]]))