diff --git a/src/quo2/components/inputs/input/style.cljs b/src/quo2/components/inputs/input/style.cljs index d4580c9be5..99c979ec9e 100644 --- a/src/quo2/components/inputs/input/style.cljs +++ b/src/quo2/components/inputs/input/style.cljs @@ -82,8 +82,8 @@ :size 20}) (defn input - [colors-by-status small? multiple-lines?] - (let [base-props (assoc (text/text-style {:size :paragraph-1 :weight :regular}) + [colors-by-status small? multiple-lines? weight] + (let [base-props (assoc (text/text-style {:size :paragraph-1 :weight (or weight :regular)}) :flex 1 :padding-right 0 :padding-left (if small? 4 8) diff --git a/src/quo2/components/inputs/input/view.cljs b/src/quo2/components/inputs/input/view.cljs index aed8388b89..a5771429dd 100644 --- a/src/quo2/components/inputs/input/view.cljs +++ b/src/quo2/components/inputs/input/view.cljs @@ -58,7 +58,7 @@ :label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur]) (defn- base-input - [{:keys [on-change-text on-char-limit-reach]}] + [{:keys [on-change-text on-char-limit-reach container-style weight]}] (let [status (reagent/atom :default) internal-on-focus #(reset! status :focus) internal-on-blur #(reset! status :default) @@ -84,21 +84,22 @@ colors-by-status (style/status-colors status-kw blur? theme) variant-colors (style/variants-colors blur? theme) clean-props (apply dissoc props custom-props)] - [:<> + [rn/view {:style {:flex 1}} (when (or label char-limit) [label-&-counter {:variant-colors variant-colors :label label :current-chars @char-count :char-limit char-limit}]) - [rn/view {:style (style/input-container colors-by-status small? disabled?)} + [rn/view + {:style (merge (style/input-container colors-by-status small? disabled?) container-style)} (when-let [{:keys [icon-name]} left-icon] [left-accessory {:variant-colors variant-colors :small? small? :icon-name icon-name}]) [rn/text-input - (cond-> {:style (style/input colors-by-status small? @multiple-lines?) + (cond-> {:style (style/input colors-by-status small? @multiple-lines? weight) :accessibility-label :input :placeholder-text-color (:placeholder colors-by-status) :keyboard-appearance (quo.theme/theme-value :light :dark theme) diff --git a/src/status_im2/contexts/wallet/address_watch/style.cljs b/src/status_im2/contexts/wallet/address_watch/style.cljs new file mode 100644 index 0000000000..219b9d5fb2 --- /dev/null +++ b/src/status_im2/contexts/wallet/address_watch/style.cljs @@ -0,0 +1,20 @@ +(ns status-im2.contexts.wallet.address-watch.style) + +(def header-container + {:margin-horizontal 20 + :margin-top 12 + :margin-bottom 20}) + +(def input-container + {:flex-direction :row + :padding-horizontal 20 + :align-items :flex-end}) + +(defn button-container + [bottom] + {:position :absolute + :bottom (+ bottom 12) + :left 20 + :right 20 + :justify-content :center + :align-items :center}) diff --git a/src/status_im2/contexts/wallet/address_watch/view.cljs b/src/status_im2/contexts/wallet/address_watch/view.cljs new file mode 100644 index 0000000000..effa520bbf --- /dev/null +++ b/src/status_im2/contexts/wallet/address_watch/view.cljs @@ -0,0 +1,47 @@ +(ns status-im2.contexts.wallet.address-watch.view + (:require + [clojure.string :as string] + [quo2.core :as quo] + [quo2.theme :as quo.theme] + [react-native.clipboard :as clipboard] + [react-native.core :as rn] + [react-native.safe-area :as safe-area] + [reagent.core :as reagent] + [utils.i18n :as i18n] + [utils.re-frame :as rf] + [status-im2.contexts.wallet.address-watch.style :as style])) + +(defn view-internal + [] + (let [top (safe-area/get-top) + bottom (safe-area/get-bottom) + input-value (reagent/atom "")] + (fn [] + [rn/view + {:style {:flex 1 + :margin-top top}} + [quo/page-nav + {:type :no-title + :icon-name :i/close + :on-press #(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} + :weight :monospace + :on-change #(reset! input-value %) + :default-value @input-value}] + [quo/button + {:icon-only? true + :type :outline} :i/scan]] + [rn/view {:style (style/button-container bottom)} + [quo/text "[WIP] Bottom Actions"]]]))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/home/view.cljs b/src/status_im2/contexts/wallet/home/view.cljs index 48154a28c1..130b47cb05 100644 --- a/src/status_im2/contexts/wallet/home/view.cljs +++ b/src/status_im2/contexts/wallet/home/view.cljs @@ -22,6 +22,7 @@ :accessibility-label :add-a-contact :label (i18n/label :t/add-address) :sub-label (i18n/label :t/add-address-description) + :on-press #(rf/dispatch [:navigate-to :wallet-address-watch]) :add-divider? true}]]]) (def account-cards diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 3d49dbd1eb..6ea8bd8941 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -37,6 +37,7 @@ [status-im2.contexts.syncing.setup-syncing.view :as settings-setup-syncing] [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing] [status-im2.contexts.wallet.account.view :as wallet-accounts] + [status-im2.contexts.wallet.address-watch.view :as wallet-address-watch] [status-im2.contexts.wallet.collectible.view :as wallet-collectibles] [status-im2.contexts.wallet.create-account.view :as wallet-create-account] [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address] @@ -241,6 +242,9 @@ {:name :wallet-accounts :component wallet-accounts/view} + {:name :wallet-address-watch + :component wallet-address-watch/view} + {:name :wallet-collectibles :component wallet-collectibles/view} diff --git a/translations/en.json b/translations/en.json index 3101a631dc..2ce05c9b77 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2329,5 +2329,7 @@ "you-like-to-type-43-characters": "You like to type 43 characters?", "no-other-accounts": "No other accounts", "here-is-a-cat-in-a-box-instead": "Here’s a cat in a box instead", - "accounts-count": "{{count}} accounts" + "accounts-count": "{{count}} accounts", + "enter-eth": "Enter any ETH address or ENS name.", + "eth-or-ens": "ETH address or ENS name." }