From a7ae152268a8adb635e22bc4368666f02e68ded3 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Thu, 9 Nov 2023 17:21:59 +0000 Subject: [PATCH] chore: hook up qr scanner on watch only flow --- src/quo/components/info/info_message.cljs | 25 +++--- .../confirm_address/style.cljs | 11 --- .../confirm_address/view.cljs | 11 +-- .../wallet/add_address_to_watch/style.cljs | 5 -- .../wallet/add_address_to_watch/view.cljs | 90 +++++++++++++------ .../create_or_edit_account/view.cljs | 9 +- .../wallet/send/select_address/view.cljs | 2 +- translations/en.json | 7 +- 8 files changed, 87 insertions(+), 73 deletions(-) diff --git a/src/quo/components/info/info_message.cljs b/src/quo/components/info/info_message.cljs index 9a5ad131f8a..87e74a68161 100644 --- a/src/quo/components/info/info_message.cljs +++ b/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)) diff --git a/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/style.cljs b/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/style.cljs index 6c23b7c0537..c322816c9a7 100644 --- a/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/style.cljs +++ b/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}) diff --git a/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs b/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs index 70da0f8d6ff..26260c90749 100644 --- a/src/status_im2/contexts/wallet/add_address_to_watch/confirm_address/view.cljs +++ b/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)) diff --git a/src/status_im2/contexts/wallet/add_address_to_watch/style.cljs b/src/status_im2/contexts/wallet/add_address_to_watch/style.cljs index 3cd0b8df903..13a2bf2643b 100644 --- a/src/status_im2/contexts/wallet/add_address_to_watch/style.cljs +++ b/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 diff --git a/src/status_im2/contexts/wallet/add_address_to_watch/view.cljs b/src/status_im2/contexts/wallet/add_address_to_watch/view.cljs index 0fb445b8ad5..e8b61c7c913 100644 --- a/src/status_im2/contexts/wallet/add_address_to_watch/view.cljs +++ b/src/status_im2/contexts/wallet/add_address_to_watch/view.cljs @@ -2,8 +2,6 @@ (: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] @@ -11,42 +9,80 @@ [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)) diff --git a/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs b/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs index 273ff1ece94..7609dfd681d 100644 --- a/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs +++ b/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs @@ -1,6 +1,5 @@ (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] @@ -8,12 +7,12 @@ [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)) diff --git a/src/status_im2/contexts/wallet/send/select_address/view.cljs b/src/status_im2/contexts/wallet/send/select_address/view.cljs index ff042d09d75..ce80379c685 100644 --- a/src/status_im2/contexts/wallet/send/select_address/view.cljs +++ b/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) diff --git a/translations/en.json b/translations/en.json index ab0b8a252d9..adf7f2e1aea 100644 --- a/translations/en.json +++ b/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" }