feat: scan account from QR (#17464)

Signed-off-by: Brian Sztamfater <brian@status.im>

src/quo/components/inputs/address_input/component_spec.cljs

@@ -6,11 +6,12 @@
     [test-helpers.component :as h]))
 
 (def ens-regex #"^(?=.{5,255}$)([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$")
+(def address-regex #"^0x[a-fA-F0-9]{40}$")
 
 (h/describe "Address input"
   (h/test "default render"
     (with-redefs [clipboard/get-string #(% "")]
-      (h/render [address-input/address-input {:ens-regex ens-regex}])
+      (h/render [address-input/address-input])
       (h/is-truthy (h/get-by-label-text :address-text-input))))
 
   (h/test "on focus with blur? false"
@@ -152,11 +153,37 @@
           on-detect-ens (h/mock-fn)]
       (with-redefs [clipboard/get-string #(% clipboard)]
         (h/render [address-input/address-input
-                   {:on-detect-ens on-detect-ens
-                    :valid-ens?    true
-                    :ens-regex     ens-regex}])
+                   {:on-detect-ens         on-detect-ens
+                    :valid-ens-or-address? true
+                    :ens-regex             ens-regex}])
+        (h/wait-for #(h/is-truthy (h/get-by-label-text :paste-button)))
+        (h/fire-event :press (h/get-by-label-text :paste-button))
+        (h/wait-for #(h/is-falsy (h/get-by-label-text :clear-button)))
+        (h/wait-for #(h/is-truthy (h/get-by-label-text :positive-button-container)))
+        (h/was-called on-detect-ens))))
+
+  (h/test "address loading state and call on-detect-address"
+    (let [clipboard         "0x2f88d65f3cb52605a54a833ae118fb1363acccd2"
+          on-detect-address (h/mock-fn)]
+      (with-redefs [clipboard/get-string #(% clipboard)]
+        (h/render [address-input/address-input
+                   {:on-detect-address on-detect-address
+                    :address-regex     address-regex}])
+        (h/wait-for #(h/is-truthy (h/get-by-label-text :paste-button)))
+        (h/fire-event :press (h/get-by-label-text :paste-button))
+        (h/wait-for #(h/is-falsy (h/get-by-label-text :clear-button)))
+        (h/wait-for #(h/is-truthy (h/get-by-label-text :loading-button-container)))
+        (h/was-called on-detect-address))))
+
+  (h/test "address valid state and call on-detect-address"
+    (let [clipboard         "0x2f88d65f3cb52605a54a833ae118fb1363acccd2"
+          on-detect-address (h/mock-fn)]
+      (with-redefs [clipboard/get-string #(% clipboard)]
+        (h/render [address-input/address-input
+                   {:on-detect-address on-detect-address
+                    :address-regex     address-regex}])
         (h/wait-for #(h/is-truthy (h/get-by-label-text :paste-button)))
         (h/fire-event :press (h/get-by-label-text :paste-button))
         (h/wait-for #(h/is-falsy (h/get-by-label-text :clear-button)))
         (h/wait-for #(h/is-truthy (h/get-by-label-text :positive-button-container)))
-        (h/was-called on-detect-ens)))))
+        (h/was-called on-detect-address)))))

src/quo/components/inputs/address_input/view.cljs

@@ -61,10 +61,14 @@
         value    (reagent/atom "")
         focused? (atom false)]
     (fn [{:keys [scanned-value theme blur? on-change-text on-blur on-focus on-clear on-scan on-detect-ens
-                 ens-regex
-                 valid-ens?]}]
+                 on-detect-address
+                 ens-regex address-regex
+                 valid-ens-or-address?]}]
       (let [on-change              (fn [text]
-                                     (let [ens? (boolean (re-matches ens-regex text))]
+                                     (let [ens?     (when ens-regex
+                                                      (boolean (re-matches ens-regex text)))
+                                           address? (when address-regex
+                                                      (boolean (re-matches address-regex text)))]
                                        (if (> (count text) 0)
                                          (reset! status :typing)
                                          (reset! status :active))
@@ -73,7 +77,10 @@
                                          (on-change-text text))
                                        (when (and ens? on-detect-ens)
                                          (reset! status :loading)
-                                         (on-detect-ens text))))
+                                         (on-detect-ens text))
+                                       (when (and address? on-detect-address)
+                                         (reset! status :loading)
+                                         (on-detect-address text))))
             on-paste               (fn []
                                      (clipboard/get-string
                                       (fn [clipboard]
@@ -145,12 +152,12 @@
              {:on-press on-clear
               :blur?    blur?
               :theme    theme}]])
-         (when (and (= @status :loading) (not valid-ens?))
+         (when (and (= @status :loading) (not valid-ens-or-address?))
            [rn/view
             {:style               style/buttons-container
              :accessibility-label :loading-button-container}
             [loading-icon blur? theme]])
-         (when (and (= @status :loading) valid-ens?)
+         (when (and (= @status :loading) valid-ens-or-address?)
            [rn/view
             {:style               style/buttons-container
              :accessibility-label :positive-button-container}

src/quo/components/navigation/page_nav/view.cljs

@@ -196,7 +196,11 @@
     :no-title
     [page-nav-base props
      [right-content
-      {:background background :content right-side :max-actions 3 :behind-overlay? behind-overlay?}]]
+      {:background       background
+       :content          right-side
+       :max-actions      3
+       :behind-overlay?  behind-overlay?
+       :account-switcher account-switcher}]]
 
     :title
     (let [centered? (= text-align :center)]

src/status_im/ui/screens/qr_scanner/views.cljs

@@ -35,7 +35,7 @@
                        :number-of-lines 1
                        :align           :center
                        :size            :large}
-                      (or title (i18n/label :t/scan-qr))]}])
+                      (or title (i18n/label :t/scan-qr-code))]}])
 
 (defn qr-test-view
   [opts]

src/status_im2/common/scan_qr_code/style.cljs

@@ -0,0 +1,152 @@
+(ns status-im2.common.scan-qr-code.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def background
+  {:position         :absolute
+   :top              0
+   :bottom           0
+   :left             0
+   :right            0
+   :background-color colors/neutral-95})
+
+(def screen-padding 20)
+(def flash-button-size 32)
+(def flash-button-spacing 12)
+
+(def flex-spacer {:flex 1})
+
+(def absolute-fill
+  {:position :absolute
+   :top      0
+   :bottom   0
+   :left     0
+   :right    0})
+
+(def hole
+  (merge absolute-fill
+         {:z-index 2 :opacity 0.95}))
+
+(defn root-container
+  [padding-top]
+  {:z-index     5
+   :flex        1
+   :padding-top padding-top})
+
+(def header-container
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :padding-horizontal screen-padding
+   :margin-vertical    12})
+
+(def header-text
+  {:padding-horizontal screen-padding
+   :padding-top        12
+   :padding-bottom     8
+   :color              colors/white})
+
+(def header-sub-text
+  {:padding-horizontal screen-padding
+   :color              colors/white})
+
+(def tabs-container
+  {:padding-horizontal screen-padding
+   :margin-top         20})
+
+(def scan-qr-code-container
+  {:margin-top 19})
+
+(def qr-view-finder
+  {:margin-horizontal screen-padding
+   :height            1
+   :display           :flex})
+
+(defn qr-view-finder-container
+  [size]
+  {:width           size
+   :height          size
+   :justify-content :space-between
+   :margin-left     -1
+   :margin-top      -1})
+
+(defn viewfinder-container
+  [viewfinder]
+  {:position :absolute
+   :left     (:x viewfinder)
+   :top      (:y viewfinder)})
+
+(def view-finder-border-container
+  {:flex-direction  :row
+   :justify-content :space-between})
+
+(defn camera-flash-button
+  [viewfinder]
+  {:position :absolute
+   :top      (- (+ (:y viewfinder) (:height viewfinder)) flash-button-size flash-button-spacing)
+   :right    (+ screen-padding flash-button-spacing)})
+
+(defn- get-border
+  [border-vertical-width border-horizontal-width corner-radius]
+  {:border-color           colors/white
+   :width                  78
+   :height                 78
+   border-vertical-width   2
+   border-horizontal-width 2
+   corner-radius           16})
+
+(def white-border
+  (let [base-tip {:background-color colors/white
+                  :position         :absolute
+                  :height           1.9 ; 1.9 instead of 2 to fix the tips protruding
+                  :width            1.9
+                  :border-radius    1}]
+    {:top-left
+     {:border (get-border :border-top-width :border-left-width :border-top-left-radius)
+      :tip-1  (assoc base-tip :right -1 :top 0)
+      :tip-2  (assoc base-tip :left 0 :bottom -1)}
+     :top-right
+     {:border (get-border :border-top-width :border-right-width :border-top-right-radius)
+      :tip-1  (assoc base-tip :right 0 :bottom -1)
+      :tip-2  (assoc base-tip :left -1 :top 0)}
+     :bottom-left
+     {:border (get-border :border-bottom-width :border-left-width :border-bottom-left-radius)
+      :tip-1  (assoc base-tip :right -1 :bottom 0)
+      :tip-2  (assoc base-tip :left 0 :top -1)}
+     :bottom-right
+     {:border (get-border :border-bottom-width :border-right-width :border-bottom-right-radius)
+      :tip-1  (assoc base-tip :right 0 :top -1)
+      :tip-2  (assoc base-tip :left -1 :bottom 0)}}))
+
+(def viewfinder-text
+  {:color       colors/white-opa-70
+   :text-align  :center
+   :padding-top 16})
+
+(def camera-permission-container
+  {:height            335
+   :margin-top        19
+   :margin-horizontal screen-padding
+   :background-color  colors/white-opa-5
+   :border-color      colors/white-opa-10
+   :border-width      1
+   :border-radius     12
+   :border-style      :dashed
+   :align-items       :center
+   :justify-content   :center})
+
+(def enable-camera-access-header
+  {:color colors/white})
+
+(def enable-camera-access-sub-text
+  {:color         colors/white-opa-70
+   :margin-bottom 16})
+
+(def camera-style
+  {:flex 1})
+
+(def camera-container
+  {:position      :absolute
+   :top           0
+   :left          0
+   :right         0
+   :bottom        0
+   :border-radius 16})