chore: hook up qr scanner on watch only flow

src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/style.cljs

@@ -0,0 +1,12 @@
+(ns status-im2.contexts.wallet.add-address-to-watch.confirm-address.style)
+
+(def header-container
+  {:margin-horizontal 20
+   :margin-top        12
+   :margin-bottom     20})
+
+(def button-container
+  {:position :absolute
+   :bottom   44
+   :left     20
+   :right    20})

src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs

@@ -0,0 +1,73 @@
+(ns status-im2.contexts.wallet.add-address-to-watch.confirm-address.view
+  (:require
+    clojure.string
+    [quo.core :as quo]
+    [re-frame.core :as re-frame]
+    [react-native.core :as rn]
+    [react-native.safe-area :as safe-area]
+    [reagent.core :as reagent]
+    [status-im2.constants :as constants]
+    [status-im2.contexts.wallet.add-address-to-watch.confirm-address.style :as style]
+    [utils.debounce :as debounce]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn- address-input
+  [input-value]
+  (let [valid-ens-or-address? (rf/sub [:wallet/valid-ens-or-address?])
+        scanned-address       (rf/sub [:wallet/scanned-address])
+        on-change-text        (fn [text]
+                                (let [starts-like-eth-address (re-matches
+                                                               constants/regx-address-fragment
+                                                               text)]
+                                  (when (and scanned-address (not= scanned-address text))
+                                    (rf/dispatch [:wallet/clean-scanned-address]))
+                                  (if starts-like-eth-address
+                                    (rf/dispatch [:wallet/fetch-address-suggestions text])
+                                    (rf/dispatch [:wallet/clean-local-suggestions]))
+                                  (reset! input-value text)))]
+    [quo/address-input
+     {:on-scan               #(rf/dispatch [:open-modal :scan-address])
+      :ens-regex             constants/regx-ens
+      :address-regex         constants/regx-address
+      :scanned-value         scanned-address
+      :on-detect-ens         #(debounce/debounce-and-dispatch
+                               [:wallet/validate-ens %]
+                               300)
+      :on-detect-address     #(debounce/debounce-and-dispatch
+                               [:wallet/validate-address %]
+                               300)
+      :on-change-text        on-change-text
+      :on-clear              #(rf/dispatch [:wallet/clean-scanned-address])
+      :valid-ens-or-address? valid-ens-or-address?}]))
+
+(defn f-view
+  []
+  (rf/dispatch [:wallet/clean-scanned-address])
+  (let [customization-color (rf/sub [:profile/customization-color])
+        input-value         (reagent/atom "")]
+    (fn []
+      [rn/view
+       {:style {:flex       1
+                :margin-top (safe-area/get-top)}}
+       [quo/page-nav
+        {:type      :no-title
+         :icon-name :i/close
+         :on-press  #(rf/dispatch [:navigate-back])}]
+       [quo/text-combinations
+        {:container-style style/header-container
+         :title           (i18n/label :t/add-address)
+         :description     (i18n/label :t/enter-eth)}]
+       [address-input input-value]
+       [quo/button
+        {:customization-color customization-color
+         :disabled?           (clojure.string/blank? @input-value)
+         :on-press            #(re-frame/dispatch [:navigate-to
+                                                   :add-address-to-watch
+                                                   {:address @input-value}])
+         :container-style     style/button-container}
+        (i18n/label :t/continue)]])))
+
+(defn view
+  []
+  [:f> f-view])

src/status_im2/contexts/wallet/add_address_to_watch/style.cljs

@@ -0,0 +1,9 @@
+(ns status-im2.contexts.wallet.add-address-to-watch.style)
+
+(def container
+  {:flex 1})
+
+(def data-item
+  {:margin-horizontal  20
+   :padding-vertical   8
+   :padding-horizontal 12})

src/status_im2/contexts/wallet/add_watch_only_account/views.cljs → src/status_im2/contexts/wallet/add_address_to_watch/view.cljs

@@ -1,4 +1,4 @@
-(ns status-im2.contexts.wallet.add-watch-only-account.views
+(ns status-im2.contexts.wallet.add-address-to-watch.view
   (:require
     [clojure.string :as string]
     [quo.core :as quo]
@@ -7,7 +7,7 @@
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.emoji-picker.utils :as emoji-picker.utils]
-    [status-im2.contexts.wallet.add-watch-only-account.style :as style]
+    [status-im2.contexts.wallet.add-address-to-watch.style :as style]
     [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
      create-or-edit-account]
     [utils.i18n :as i18n]
@@ -19,7 +19,6 @@
         number-of-accounts (count (rf/sub [:profile/wallet-accounts]))
         account-name       (reagent/atom (i18n/label :t/default-account-name
                                                      {:number (inc number-of-accounts)}))
-        address-title      (i18n/label :t/watch-address)
         account-color      (reagent/atom :blue)
         account-emoji      (reagent/atom (emoji-picker.utils/random-emoji))
         on-change-name     #(reset! account-name %)
@@ -44,17 +43,18 @@
          :bottom-action-props {:customization-color @account-color
                                :disabled?           (string/blank? @account-name)
                                :on-press            #(re-frame/dispatch [:navigate-to
-                                                                         :wallet-account])}}
+                                                                         :wallet-home])}
+         :watch-only?         true}
         [quo/data-item
          {:card?           true
           :right-icon      :i/advanced
           :icon-right?     true
           :emoji           @account-emoji
-          :title           address-title
+          :title           (i18n/label :t/watched-address)
           :subtitle        address
           :status          :default
           :size            :default
           :container-style style/data-item
           :on-press        #(js/alert "To be implemented")}]]])))
 
-(def address-add-edit (quo.theme/with-theme view-internal))
+(def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs

@@ -13,7 +13,7 @@
            on-change-color
            on-change-emoji on-focus on-blur section-label bottom-action?
            bottom-action-label bottom-action-props
-           custom-bottom-action]} & children]
+           custom-bottom-action watch-only?]} & children]
   (let [{:keys [top bottom]}  (safe-area/get-insets)
         margin-top            (if (false? margin-top?) 0 top)
         {window-width :width} (rn/get-window)]
@@ -36,7 +36,7 @@
          {:customization-color account-color
           :size                80
           :emoji               account-emoji
-          :type                :default}]
+          :type                (if watch-only? :watch-only :default)}]
         [quo/button
          {:size            32
           :type            :grey

src/status_im2/contexts/wallet/home/view.cljs

@@ -25,7 +25,7 @@
       :accessibility-label :add-a-contact
       :label               (i18n/label :t/add-address)
       :sub-label           (i18n/label :t/add-address-description)
-      :on-press            #(rf/dispatch [:navigate-to :wallet-address-watch])
+      :on-press            #(rf/dispatch [:navigate-to :confirm-address-to-watch])
       :add-divider?        true}]]])
 
 (defn- add-account-placeholder

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

@@ -48,7 +48,7 @@
   (fn []
     (let [scanned-address       (rf/sub [:wallet/scanned-address])
           send-address          (rf/sub [:wallet/send-address])
-          valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))]
+          valid-ens-or-address? (rf/sub [:wallet/valid-ens-or-address?])]
       [quo/address-input
        {:on-focus              #(reset! input-focused? true)
         :on-blur               #(reset! input-focused? false)
@@ -135,7 +135,7 @@
         input-value    (reagent/atom "")
         input-focused? (reagent/atom false)]
     (fn []
-      (let [valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))]
+      (let [valid-ens-or-address? (rf/sub [:wallet/valid-ens-or-address?])]
         (rn/use-effect (fn []
                          (fn []
                            (rf/dispatch [:wallet/clean-scanned-address])

src/status_im2/navigation/screens.cljs

@@ -39,14 +39,14 @@
     [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing]
     [status-im2.contexts.wallet.account.bridge.view :as bridge]
     [status-im2.contexts.wallet.account.view :as wallet-accounts]
-    [status-im2.contexts.wallet.add-watch-only-account.views :as address-add-edit]
+    [status-im2.contexts.wallet.add-address-to-watch.confirm-address.view :as confirm-address-to-watch]
+    [status-im2.contexts.wallet.add-address-to-watch.view :as add-address-to-watch]
     [status-im2.contexts.wallet.collectible.view :as wallet-collectible]
     [status-im2.contexts.wallet.create-account.edit-derivation-path.view :as wallet-edit-derivation-path]
     [status-im2.contexts.wallet.create-account.view :as wallet-create-account]
     [status-im2.contexts.wallet.edit-account.view :as wallet-edit-account]
     [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address]
     [status-im2.contexts.wallet.scan-account.view :as scan-address]
-    [status-im2.contexts.wallet.select-address-to-watch.view :as wallet-address-watch]
     [status-im2.contexts.wallet.send.select-address.view :as wallet-select-address]
     [status-im2.navigation.options :as options]
     [status-im2.navigation.transitions :as transitions]))
@@ -248,17 +248,12 @@
      :options   {:insets {:top? true}}
      :component wallet-accounts/view}
 
-    {:name      :address-to-watch-edit
-     :component address-add-edit/address-add-edit}
+    {:name      :add-address-to-watch
+     :component add-address-to-watch/view}
 
     {:name      :wallet-edit-account
      :component wallet-edit-account/view}
 
-    {:name      :wallet-address-watch
-     :options   {:insets {:top?    true
-                          :bottom? true}}
-     :component wallet-address-watch/view}
-
     {:name      :wallet-bridge
      :options   {:insets                 {:top? true}
                  :modalPresentationStyle :overCurrentContext}
@@ -281,6 +276,9 @@
      :options   {:modalPresentationStyle :overCurrentContext}
      :component wallet-select-address/view}
 
+    {:name      :confirm-address-to-watch
+     :component confirm-address-to-watch/view}
+
     {:name      :scan-address
      :options   (merge
                  options/dark-screen

translations/en.json

@@ -1565,7 +1565,7 @@
     "delete-account": "Delete account",
     "delete-keys-keycard": "Delete keys from Keycard",
     "watch-only": "Watch-only",
-    "watch-address": "Watch address",
+    "watched-address": "Watched address",
     "cant-report-bug": "Can't report a bug",
     "mail-should-be-configured": "Mail client should be configured",
     "check-on-block-explorer": "Check on block explorer",