chore(wallet): add scan address functionality to add watch flows

status-im · Nov 6, 2023 · df9c2ee · df9c2ee
1 parent 22d34d7
commit df9c2ee
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 31 deletions.
diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs
@@ -73,8 +73,8 @@
     [status-im.ui.screens.wallet.settings.views :as wallet-settings]
     [status-im.ui.screens.wallet.swap.views :as wallet.swap]
     [status-im.ui.screens.wallet.transactions.views :as wallet-transactions]
-    [status-im2.contexts.wallet.add-watch-only-account.views :as address-add-edit]
     [status-im2.contexts.chat.group-details.view :as group-details]
+    [status-im2.contexts.wallet.add-watch-only-account.views :as address-add-edit]
     [utils.i18n :as i18n]))
 
 (defn right-button-options

diff --git a/src/status_im2/contexts/wallet/add_watch_only_account/views.cljs b/src/status_im2/contexts/wallet/add_watch_only_account/views.cljs
@@ -1,17 +1,17 @@
 (ns status-im2.contexts.wallet.add-watch-only-account.views
   (:require
-    [reagent.core :as reagent]
     [clojure.string :as string]
-    [utils.i18n :as i18n]
-    [re-frame.core :as re-frame]
-    [react-native.core :as rn]
     [quo.core :as quo]
     [quo.theme :as quo.theme]
+    [re-frame.core :as re-frame]
+    [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.common.screen-base.create-or-edit-account.view :as
      create-or-edit-account]
-    [utils.re-frame :as rf]
-    [status-im2.contexts.emoji-picker.utils :as emoji-picker.utils]
-    [status-im2.contexts.wallet.add-watch-only-account.style :as style]))
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
 
 (defn- view-internal
   []

diff --git a/src/status_im2/contexts/wallet/select_address_to_watch/view.cljs b/src/status_im2/contexts/wallet/select_address_to_watch/view.cljs
@@ -1,24 +1,49 @@
 (ns status-im2.contexts.wallet.select-address-to-watch.view
   (:require
-    [clojure.string :as string]
+    clojure.string
     [quo.core :as quo]
-    [quo.theme :as quo.theme]
     [re-frame.core :as re-frame]
-    [react-native.clipboard :as clipboard]
     [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.select-address-to-watch.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-(defn view-internal
+(defn- address-input
+  []
+  (let [timer                    (atom nil)
+        valid-ens-or-address?    (reagent/atom false)
+        on-detect-address-or-ens (fn [_]
+                                   (reset! valid-ens-or-address? false)
+                                   (when @timer (js/clearTimeout @timer))
+                                   (reset! timer (js/setTimeout #(reset! valid-ens-or-address? true)
+                                                                2000)))]
+    (fn [input-value]
+      (let [scanned-address (rf/sub [:wallet/scanned-address])]
+        [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         on-detect-address-or-ens
+          :on-detect-address     on-detect-address-or-ens
+          :on-change-text        (fn [text]
+                                   (when-not (= scanned-address text)
+                                     (rf/dispatch [:wallet/clean-scanned-address]))
+                                   (reset! input-value text))
+          :on-clear              #(rf/dispatch [:wallet/clean-scanned-address])
+          :valid-ens-or-address? @valid-ens-or-address?}]))))
+
+(defn f-view
   []
   (let [top                 (safe-area/get-top)
         bottom              (safe-area/get-bottom)
-        input-value         (reagent/atom "")
-        customization-color (rf/sub [:profile/customization-color])]
+        customization-color (rf/sub [:profile/customization-color])
+        input-value         (atom "")]
     (fn []
+      (rn/use-effect (fn [] #(rf/dispatch [:wallet/clean-scanned-address])))
       [rn/view
        {:style {:flex       1
                 :margin-top top}}
@@ -30,20 +55,7 @@
         {:container-style style/header-container
          :title           (i18n/label :t/add-address)
          :description     (i18n/label :t/enter-eth)}]
-       [rn/view {:style style/input-container}
-        [quo/input
-         {:label           (i18n/label :t/eth-or-ens)
-          :button          {:on-press (fn [] (clipboard/get-string #(reset! input-value %)))
-                            :text     (i18n/label :t/paste)}
-          :placeholder     (str "0x123abc... " (string/lower-case (i18n/label :t/or)) " bob.eth")
-          :container-style {:margin-right 12
-                            :flex         1}
-          :weight          :monospace
-          :on-change-text  #(reset! input-value %)
-          :default-value   @input-value}]
-        [quo/button
-         {:icon-only? true
-          :type       :outline} :i/scan]]
+       [address-input input-value]
        [quo/button
         {:customization-color customization-color
          :disabled?           (clojure.string/blank? @input-value)
@@ -53,4 +65,6 @@
          :container-style     (style/button-container bottom)}
         (i18n/label :t/continue)]])))
 
-(def view (quo.theme/with-theme view-internal))
+(defn view
+  []
+  [:f> f-view])
diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs
@@ -38,14 +38,14 @@
     [status-im2.contexts.syncing.setup-syncing.view :as settings-setup-syncing]
     [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing]
     [status-im2.contexts.wallet.account.view :as wallet-accounts]
-    [status-im2.contexts.wallet.select-address-to-watch.view :as wallet-address-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.saved-addresses.view :as wallet-saved-addresses]
     [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]))
@@ -269,7 +269,8 @@
      :component wallet-saved-addresses/view}
 
     {:name      :wallet-select-address
-     :options   {:modalPresentationStyle :overCurrentContext}
+     :options   {:insets                 {:top true :bottom true}
+                 :modalPresentationStyle :overCurrentContext}
      :component wallet-select-address/view}
 
     {:name      :scan-address