[#6198]: Add QR code scanner support in extensions panel

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>

src/status_im/events.cljs

@@ -16,6 +16,7 @@
             [status-im.chat.models.message :as chat.message]
             [status-im.contact.core :as contact]
             [status-im.data-store.core :as data-store]
+            [status-im.extensions.core :as extensions]
             [status-im.fleet.core :as fleet]
             [status-im.group-chats.core :as group-chats]
             [status-im.hardwallet.core :as hardwallet]
@@ -407,6 +408,13 @@
  (fn [cofx [_ bootnode-id]]
    (bootnodes/delete-bootnode cofx bootnode-id)))
 
+;; extensions module
+
+(handlers/register-handler-fx
+ :extensions.callback/qr-code-scanned
+ (fn [cofx [_ _ url]]
+   (extensions/set-extension-url-from-qr cofx url)))
+
 ;; log-level module
 
 (handlers/register-handler-fx

src/status_im/extensions/core.cljs

@@ -5,7 +5,9 @@
             [pluto.storages :as storages]
             [status-im.chat.commands.core :as commands]
             [status-im.chat.commands.impl.transactions :as transactions]
-            [status-im.ui.components.react :as react]))
+            [status-im.ui.components.react :as react]
+            [status-im.ui.screens.navigation :as navigation]
+            [status-im.utils.fx :as fx]))
 
 (def components
   {'view           {:value react/view}
@@ -43,3 +45,8 @@
 (defn load-from [url f]
   (when-let [uri (url->uri url)]
     (storages/fetch uri f)))
+
+(fx/defn set-extension-url-from-qr
+  [cofx url]
+  (fx/merge (assoc-in cofx [:db :extension-url] url)
+            (navigation/navigate-back)))

src/status_im/ui/screens/extensions/add/styles.cljs

@@ -53,3 +53,6 @@
    :border-radius    styles/border-radius
    :padding          16
    :background-color colors/white-transparent})
+
+(def qr-code
+  {:margin-right 14})

src/status_im/ui/screens/extensions/add/views.cljs

@@ -2,10 +2,12 @@
   (:require-macros [status-im.utils.views :as views])
   (:require [re-frame.core :as re-frame]
             [clojure.string :as string]
-            [status-im.ui.components.react :as react]
             [status-im.i18n :as i18n]
-            [status-im.ui.components.styles :as components.styles]
+            [status-im.ui.components.colors :as colors]
             [status-im.ui.components.common.common :as components.common]
+            [status-im.ui.components.icons.vector-icons :as vector-icons]
+            [status-im.ui.components.react :as react]
+            [status-im.ui.components.styles :as components.styles]
             [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.components.text-input.view :as text-input]
@@ -55,6 +57,14 @@
          :disabled? (not (empty? errors))
          :on-press  #(re-frame/dispatch [:extension/install data])}]]]]))
 
+(def qr-code
+  [react/touchable-highlight {:on-press #(re-frame/dispatch [:qr-scanner.ui/scan-qr-code-pressed
+                                                             {:toolbar-title (i18n/label :t/scan-qr)}
+                                                             :extensions.callback/qr-code-scanned])
+                              :style    styles/qr-code}
+   [react/view
+    [vector-icons/icon :icons/qr {:color colors/blue}]]])
+
 (views/defview add-extension []
   (views/letsubs [extension-url [:get-extension-url]]
     [react/view styles/screen
@@ -68,6 +78,8 @@
           :style           styles/input
           :container       styles/input-container
           :placeholder     (i18n/label :t/extension-url)
+          :content         qr-code
+          :default-value   extension-url
           :on-change-text  #(re-frame/dispatch [:extension/edit-address %])}]]]
       [react/view styles/bottom-container
        [react/view components.styles/flex]