chore: hook up qr scanner on watch only flow

src/quo/components/info/info_message.cljs

@@ -3,22 +3,17 @@
  [quo.components.icon :as quo.icons]
  [quo.components.markdown.text :as text]
  [quo.foundations.colors :as colors]
- [quo.theme :as theme]
+ [quo.theme :as quo.theme]
  [react-native.core :as rn]))
 
-(def themes
- {:light {:default colors/neutral-50
- :success colors/success-50
- :error colors/danger-50}
- :dark {:default colors/neutral-40
- :success colors/success-60
- :error colors/danger-60}})
-
 (defn get-color
- [k]
- (get-in themes [(theme/get-theme) k]))
+ [k theme]
+ (case k
+ :success (colors/resolve-color :success theme)
+ :error (colors/resolve-color :danger theme)
+ (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
 
-(defn info-message
+(defn view-internal
  "[info-message opts \"message\"]
  opts
  {:type :default/:success/:error
@@ -27,11 +22,11 @@
  :text-color colors/white ;; text color override
  :icon-color colors/white ;; icon color override
  :no-icon-color? false ;; disable tint color for icon"
- [{:keys [type size icon text-color icon-color no-icon-color? style]} message]
+ [{:keys [type size theme icon text-color icon-color no-icon-color? style]} message]
  (let [weight (if (= size :default) :regular :medium)
  icon-size (if (= size :default) 16 12)
  size (if (= size :default) :paragraph-2 :label)
- text-color (or text-color (get-color type))
+ text-color (or text-color (get-color type theme))
  icon-color (or icon-color text-color)]
  [rn/view
  {:style (merge {:flex-direction :row
@@ -46,3 +41,5 @@
  :weight weight
  :style {:color text-color
  :margin-horizontal 4}} message]]))
+
+(def info-message (quo.theme/with-theme view-internal))

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

@@ -3,18 +3,7 @@
 (def container
  {:flex 1})
 
-(def input
- {:margin-right 12
- :flex 1})
-
 (def data-item
  {:margin-horizontal 20
  :padding-vertical 8
  :padding-horizontal 12})
-
-(defn button-container
- [bottom]
- {:position :absolute
- :bottom (+ bottom 12)
- :left 20
- :right 20})

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

@@ -3,7 +3,6 @@
  [clojure.string :as string]
  [quo.core :as quo]
  [quo.foundations.colors :as colors]
- [quo.theme :as quo.theme]
  [re-frame.core :as re-frame]
  [react-native.core :as rn]
  [reagent.core :as reagent]
@@ -14,13 +13,12 @@
  [utils.i18n :as i18n]
  [utils.re-frame :as rf]))
 
-(defn- view-internal
+(defn view
  []
  (let [{:keys [address]} (rf/sub [:get-screen-params])
  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 (rand-nth colors/account-colors))
  account-emoji (reagent/atom (emoji-picker.utils/random-emoji))
  on-change-name #(reset! account-name %)
@@ -40,8 +38,9 @@
  :on-change-name on-change-name
  :on-change-color on-change-color
  :on-change-emoji on-change-emoji
+ :watch-only? true
  :bottom-action? true
- :bottom-action-label :t/create-account
+ :bottom-action-label :t/add-watched-address
  :bottom-action-props {:customization-color @account-color
  :disabled? (string/blank? @account-name)
  :on-press #(re-frame/dispatch [:navigate-to
@@ -51,11 +50,9 @@
  :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 view (quo.theme/with-theme view-internal))

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

@@ -5,11 +5,6 @@
  :margin-top 12
  :margin-bottom 20})
 
-(def input-container
- {:flex-direction :row
- :padding-horizontal 20
- :align-items :flex-end})
-
 (def button-container
  {:position :absolute
  :bottom 22

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

@@ -2,51 +2,87 @@
  (:require
  [clojure.string :as 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]
  [reagent.core :as reagent]
  [status-im2.contexts.wallet.add-address-to-watch.style :as style]
  [utils.i18n :as i18n]
  [utils.re-frame :as rf]))
 
-(defn view-internal
+(defn- address-input
+ [{:keys [input-value
+ paste-on-input clear-input]}]
+ (let [scanned-address (rf/sub [:wallet/scanned-address])
+ empty-input? (and (string/blank? @input-value)
+ (string/blank? scanned-address))
+ on-change-text (fn [new-text]
+ (reset! input-value new-text)
+ (prn "scanned-address" scanned-address)
+ (when (and scanned-address (not= scanned-address new-text))
+ (rf/dispatch [:wallet/clean-scanned-address])))]
+ (rn/use-effect (fn []
+ (when-not (string/blank? scanned-address)
+ (on-change-text scanned-address)))
+ [scanned-address])
+ [rn/view
+ {:style {:flex-direction :row
+ :margin-horizontal 20}}
+ [quo/input
+ {:placeholder (i18n/label :t/address-placeholder)
+ :container-style {:flex 1 :margin-right 20}
+ :label (i18n/label :t/enter-eth)
+ :auto-capitalize :none
+ :on-clear clear-input
+ :return-key-type :done
+ :clearable? (not empty-input?)
+ :on-change-text on-change-text
+
+ :button (when empty-input?
+ {:on-press paste-on-input
+ :text (i18n/label :t/paste)})
+ :value @input-value}]
+ [quo/button
+ {:type :outline
+ :on-press (fn []
+ (rn/dismiss-keyboard!)
+ (rf/dispatch [:open-modal :scan-address]))
+ :container-style {:align-self :flex-end}
+ :size 40
+ :icon-only? true}
+ :i/scan]]))
+
+(defn view
  []
- (let [input-value (reagent/atom "")
+ (let [input-value (reagent/atom nil)
+ clear-input (fn []
+ (reset! input-value nil)
+ (rf/dispatch [:wallet/clean-scanned-address]))
+ paste-on-input #(clipboard/get-string
+ (fn [clipboard-text]
+ (reset! input-value clipboard-text)))
  customization-color (rf/sub [:profile/customization-color])]
+ (rf/dispatch [:wallet/clean-scanned-address])
  (fn []
  [rn/view
  {:style {:flex 1}}
  [quo/page-nav
  {:type :no-title
  :icon-name :i/close
- :on-press #(rf/dispatch [:navigate-back])}]
+ :on-press (fn []
+ (rf/dispatch [:wallet/clean-scanned-address])
+ (rf/dispatch [:navigate-back]))}]
  [quo/text-combinations
  {: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]]
+ :title (i18n/label :t/add-address)}]
+ [:f> address-input
+ {:input-value input-value
+ :clear-input clear-input
+ :paste-on-input paste-on-input}]
  [quo/button
  {:customization-color customization-color
- :disabled? (clojure.string/blank? @input-value)
- :on-press #(re-frame/dispatch [:navigate-to
-  :confirm-address-to-watch
-  {:address @input-value}])
+ :disabled? (string/blank? @input-value)
+ :on-press #(rf/dispatch [:navigate-to
+ :confirm-address-to-watch
+ {:address @input-value}])
  :container-style style/button-container}
  (i18n/label :t/continue)]])))
-
-(def view (quo.theme/with-theme view-internal))

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

@@ -1,19 +1,18 @@
 (ns status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view
  (:require [quo.core :as quo]
- [quo.theme :as quo.theme]
  [react-native.core :as rn]
  [react-native.safe-area :as safe-area]
  [status-im2.constants :as constants]
  [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.style :as style]
  [utils.i18n :as i18n]
  [utils.re-frame :as rf]))
 
-(defn- view-internal
+(defn view
  [{:keys [margin-top? page-nav-right-side account-name account-color account-emoji on-change-name
  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 +35,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
@@ -81,5 +80,3 @@
  :type :primary}
  bottom-action-props)
  (i18n/label bottom-action-label)])])]))
-
-(def view (quo.theme/with-theme view-internal))

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)

translations/en.json

@@ -1565,7 +1565,8 @@
  "delete-account": "Delete account",
  "delete-keys-keycard": "Delete keys from Keycard",
  "watch-only": "Watch-only",
- "watch-address": "Watch address",
+ "watched-address": "Watched address",
+ "add-watched-address": "Add 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",
@@ -2384,5 +2385,7 @@
  "address-activity": "This address has activity",
  "keypairs": "Keypairs",
  "keypairs-description": "Select keypair to derive your new account from",
- "confirm-account-origin": "Confirm account origin"
+ "confirm-account-origin": "Confirm account origin",
+ "address-placeholder": "0x123abc... or bob.eth",
+ "invalid-address": "It’s not Ethereum address or ENS name"
 }