add ens validation logic and basic component test

status-im · Sep 7, 2023 · ffa2973 · ffa2973
1 parent dc7cd15
commit ffa2973
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 29 deletions.
diff --git a/src/quo2/components/inputs/address_input/component_spec.cljs b/src/quo2/components/inputs/address_input/component_spec.cljs
@@ -1 +1,10 @@
-(ns quo2.components.inputs.address-input.component-spec)
+(ns quo2.components.inputs.address-input.component-spec
+  (:require [quo2.components.inputs.address-input.view :as address-input]
+            [test-helpers.component :as h]
+            [react-native.clipboard :as clipboard]))
+
+(h/describe "Address input"
+  (h/test "default render"
+    (with-redefs [clipboard/get-string (fn [callback] #(callback ""))]
+      (h/render [address-input/address-input])
+      (h/is-truthy (h/query-by-label-text :address-text-input)))))
diff --git a/src/quo2/components/inputs/address_input/style.cljs b/src/quo2/components/inputs/address_input/style.cljs
@@ -21,10 +21,12 @@
    :height          24
    :width           20})
 
-(def input-text
+(defn input-text
+  [theme]
   (assoc (text/text-style {:size   :paragraph-1
                            :weight :monospace})
          :flex         1
+         :color        (colors/theme-colors colors/neutral-100 colors/white theme)
          ;:padding-bottom 2
          :margin-top   0
          :margin-right 8

diff --git a/src/quo2/components/inputs/address_input/view.cljs b/src/quo2/components/inputs/address_input/view.cljs
@@ -2,15 +2,16 @@
   (:require [react-native.core :as rn]
             [react-native.clipboard :as clipboard]
             [quo2.theme :as quo.theme]
-            [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icon]
             [quo2.components.buttons.button.view :as button]
             [quo2.components.inputs.address-input.style :as style]
             [utils.i18n :as i18n]
             [reagent.core :as reagent]))
 
-(defn icon-color
+(def ^:private ens-regex #"^(?=.{5,255}$)([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$")
+
+(defn- icon-color
   [blur? override-theme]
   (if blur?
     (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
@@ -33,10 +34,10 @@
      :size  20}]])
 
 (defn- positive-state-icon
-  [blur? override-theme]
+  [override-theme]
   [rn/view {:style style/clear-icon-container}
    [icon/icon :i/positive-state
-    {:color (icon-color blur? override-theme)
+    {:color (colors/theme-colors colors/success-50 colors/success-60 override-theme)
      :size  20}]])
 
 (defn- get-placeholder-text-color
@@ -57,14 +58,19 @@
         value     (reagent/atom "")
         clipboard (reagent/atom nil)
         focused?  (atom false)]
-    (fn [{:keys [scanned-value theme blur? on-change-text on-blur on-focus on-clear on-scan] :as props}]
+    (fn [{:keys [scanned-value theme blur? on-change-text on-blur on-focus on-clear on-scan on-detect-ens
+                 valid-ens?]}]
       (let [on-change              (fn [text]
-                                     (if (> (count text) 0)
-                                       (reset! status :typing)
-                                       (reset! status :active))
-                                     (reset! value text)
-                                     (when on-change-text
-                                       (on-change-text text)))
+                                     (let [ens? (boolean (re-matches ens-regex text))]
+                                       (if (> (count text) 0)
+                                         (reset! status :typing)
+                                         (reset! status :active))
+                                       (reset! value text)
+                                       (when on-change-text
+                                         (on-change-text text))
+                                       (when (and ens? on-detect-ens)
+                                         (reset! status :loading)
+                                         (on-detect-ens text))))
             on-paste               (fn []
                                      (when-not (empty? @clipboard)
                                        (on-change @clipboard)
@@ -74,22 +80,25 @@
                                      (reset! status (if @focused? :active :default))
                                      (when on-clear
                                        (on-clear)))
-            on-scan                (fn []
-                                     (when on-scan
-                                       (on-scan)))
+            on-scan                #(when on-scan
+                                      (on-scan))
             placeholder-text-color (get-placeholder-text-color @status theme blur?)]
         (rn/use-effect (fn []
-                         (on-change scanned-value)
-                         (reset! value scanned-value))
+                         (when scanned-value
+                           (on-change scanned-value)
+                           (reset! value scanned-value)))
                        [scanned-value])
         (clipboard/get-string #(reset! clipboard %))
         [rn/view {:style style/container}
          [rn/text-input
           {:accessibility-label    :address-text-input
-           :style                  style/input-text
+           :style                  (style/input-text theme)
            :placeholder            (i18n/label :t/name-ens-or-address)
            :placeholder-text-color placeholder-text-color
            :default-value          @value
+           :auto-complete          :none
+           :auto-capitalize        :none
+           :auto-correct           false
            :keyboard-appearance    (quo.theme/theme-value :light :dark theme)
            :on-focus               (fn []
                                      (when (= (count @value) 0)
@@ -125,16 +134,12 @@
              {:on-press       on-clear
               :blur?          blur?
               :override-theme theme}]])
-         (when (= @status :loading)
+         (when (and (= @status :loading) (not valid-ens?))
            [rn/view {:style style/buttons-container}
-            [loading-icon
-             {:blur?          blur?
-              :override-theme theme}]])
-         (when (= @status :success)
+            [loading-icon blur? theme]])
+         (when (and (= @status :loading) valid-ens?)
            [rn/view {:style style/buttons-container}
-            [positive-state-icon
-             {:blur?          blur?
-              :override-theme theme}]])]))))
+            [positive-state-icon theme]])]))))
 
 (defn address-input-internal
   [props]

diff --git a/src/status_im2/contexts/quo_preview/inputs/address_input.cljs b/src/status_im2/contexts/quo_preview/inputs/address_input.cljs
@@ -10,7 +10,17 @@
 
 (defn view
   []
-  (let [state (reagent/atom {:scanned-value ""})]
+  (let [state (reagent/atom {:scanned-value ""
+                             :valid-ens?    false})
+        timer (atom nil)]
     (fn []
       [preview/preview-container {:state state :descriptor descriptor}
-       [quo/address-input @state]])))
+       [quo/address-input
+        (merge @state
+               {:on-scan       #(js/alert "Not implemented yet")
+                :on-detect-ens (fn [_]
+                                 (swap! state assoc :valid-ens? false)
+                                 (when @timer
+                                   (js/clearTimeout @timer))
+                                 (reset! timer (js/setTimeout #(swap! state assoc :valid-ens? true)
+                                                              2000)))})]])))