From 7a7fe5202bc8bb9f815a391f99f8944bb3c87b5d Mon Sep 17 00:00:00 2001 From: Alex Tumanov Date: Tue, 7 Nov 2023 16:40:24 +0000 Subject: [PATCH] Add a button to address watch screen; (#17781) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add account creation screen remove icons remove extra utility and create a new one that would use conventional way of getting an emoji fix lint Use button component instead of bottom-actions Provide global customization color to buttons Use conventional approach to extract account name Move to another address Move to another namespace Refactor bottom-actions to have button props in maps Update doc with new icon location Add spaces between styles Work on pr comments Use :on-change-text instead of :on-change for input component Subscribe to :profile/customization-color directly Use bottom button from the create-or-edit-account wrapper Remove extra code Sort requires Move ns to proper fileˆ Fix styles --- doc/export-icons.md | 2 +- .../drawers/bottom_actions/view.cljs | 10 ++-- .../contexts/emoji_picker/utils.cljs | 4 ++ .../wallet/add_watch_only_account/style.cljs | 20 +++++++ .../wallet/add_watch_only_account/views.cljs | 60 +++++++++++++++++++ .../contexts/wallet/address_watch/style.cljs | 19 ------ .../create_or_edit_account/style.cljs | 2 +- .../wallet/select_address_to_watch/style.cljs | 18 ++++++ .../view.cljs | 27 ++++++--- src/status_im2/navigation/screens.cljs | 6 +- translations/en.json | 2 + 11 files changed, 137 insertions(+), 33 deletions(-) create mode 100644 src/status_im2/contexts/wallet/add_watch_only_account/style.cljs create mode 100644 src/status_im2/contexts/wallet/add_watch_only_account/views.cljs delete mode 100644 src/status_im2/contexts/wallet/address_watch/style.cljs create mode 100644 src/status_im2/contexts/wallet/select_address_to_watch/style.cljs rename src/status_im2/contexts/wallet/{address_watch => select_address_to_watch}/view.cljs (56%) diff --git a/doc/export-icons.md b/doc/export-icons.md index 3b9aa7da02f..9d12f5cab43 100644 --- a/doc/export-icons.md +++ b/doc/export-icons.md @@ -4,7 +4,7 @@ ![](images/export-icons/export-icons.gif) -1. Export from figma 2 pngs 2x and 3x put them in `./resources/images/icons` +1. Export from figma 2 pngs 2x and 3x put them in `./resources/images/icons2` 2. if necessary, rename file so that filename contains only lower case chars, e.g. `"Icon-Name@2x.png"` should be renamed to `"icon_name@2x.png"`. 3. In the app `icon_name.png` still can be accessed as `icon-name`, so in order to use can add the next code: ```clojure diff --git a/src/quo/components/drawers/bottom_actions/view.cljs b/src/quo/components/drawers/bottom_actions/view.cljs index ea1d100fe7e..2b06080440c 100644 --- a/src/quo/components/drawers/bottom_actions/view.cljs +++ b/src/quo/components/drawers/bottom_actions/view.cljs @@ -7,8 +7,9 @@ [react-native.core :as rn])) (def default-props - {:button-one-type :primary - :button-two-type :grey}) + {:button-one-type :primary + :button-two-type :grey + :customization-color :blue}) (defn- view-internal "Options: @@ -23,7 +24,7 @@ :scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered" [props] (let [{:keys [actions description button-one-label button-two-label - button-one-props button-two-props theme scroll?]} + button-one-props button-two-props theme scroll? customization-color]} (merge default-props props)] [:<> [rn/view {:style style/buttons-container} @@ -43,7 +44,8 @@ :container-style style/button-container :background (when scroll? :blur) :theme theme - :accessibility-label :button-one} + :accessibility-label :button-one + :customization-color customization-color} button-one-props) button-one-label]] (when description diff --git a/src/status_im2/contexts/emoji_picker/utils.cljs b/src/status_im2/contexts/emoji_picker/utils.cljs index 2f84e8383f0..f02f4a02eac 100644 --- a/src/status_im2/contexts/emoji_picker/utils.cljs +++ b/src/status_im2/contexts/emoji_picker/utils.cljs @@ -16,3 +16,7 @@ (some #(string/includes? % cleaned-query) tags))) emoji-data) (partition-all constants/emojis-per-row)))) + +(defn random-emoji + [] + (:unicode (rand-nth emoji-data))) diff --git a/src/status_im2/contexts/wallet/add_watch_only_account/style.cljs b/src/status_im2/contexts/wallet/add_watch_only_account/style.cljs new file mode 100644 index 00000000000..2e70570177b --- /dev/null +++ b/src/status_im2/contexts/wallet/add_watch_only_account/style.cljs @@ -0,0 +1,20 @@ +(ns status-im2.contexts.wallet.add-watch-only-account.style) + +(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_watch_only_account/views.cljs b/src/status_im2/contexts/wallet/add_watch_only_account/views.cljs new file mode 100644 index 00000000000..bd3f415f950 --- /dev/null +++ b/src/status_im2/contexts/wallet/add_watch_only_account/views.cljs @@ -0,0 +1,60 @@ +(ns status-im2.contexts.wallet.add-watch-only-account.views + (:require + [clojure.string :as string] + [quo.core :as quo] + [quo.theme :as quo.theme] + [re-frame.core :as re-frame] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.contexts.emoji-picker.utils :as emoji-picker.utils] + [status-im2.contexts.wallet.add-watch-only-account.style :as style] + [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as + create-or-edit-account] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn- view-internal + [] + (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 :blue) + account-emoji (reagent/atom (emoji-picker.utils/random-emoji)) + on-change-name #(reset! account-name %) + on-change-color #(reset! account-color %) + on-change-emoji #(reset! account-emoji %)] + (fn [] + [rn/view {:style style/container} + [create-or-edit-account/view + {:page-nav-right-side [{:icon-name :i/info + :on-press + #(js/alert + "Get info (to be + implemented)")}] + :account-name @account-name + :account-emoji @account-emoji + :account-color @account-color + :on-change-name on-change-name + :on-change-color on-change-color + :on-change-emoji on-change-emoji + :bottom-action? true + :bottom-action-label :t/create-account + :bottom-action-props {:customization-color @account-color + :disabled? (string/blank? @account-name) + :on-press #(re-frame/dispatch [:navigate-to + :wallet-account])}} + [quo/data-item + {:card? true + :right-icon :i/advanced + :icon-right? true + :emoji @account-emoji + :title address-title + :subtitle address + :status :default + :size :default + :container-style style/data-item + :on-press #(js/alert "To be implemented")}]]]))) + +(def address-add-edit (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/address_watch/style.cljs b/src/status_im2/contexts/wallet/address_watch/style.cljs deleted file mode 100644 index 0e52b98216e..00000000000 --- a/src/status_im2/contexts/wallet/address_watch/style.cljs +++ /dev/null @@ -1,19 +0,0 @@ -(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}) - -(def button-container - {:position :absolute - :bottom 12 - :left 20 - :right 20 - :justify-content :center - :align-items :center}) diff --git a/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs b/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs index f39cceea3ea..ebb920f2676 100644 --- a/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs +++ b/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs @@ -38,7 +38,7 @@ {:padding-vertical 8}) (def color-picker - {:padding-horizontal 12}) + {:padding-horizontal 20}) (def divider-2 {:margin-top 4 diff --git a/src/status_im2/contexts/wallet/select_address_to_watch/style.cljs b/src/status_im2/contexts/wallet/select_address_to_watch/style.cljs new file mode 100644 index 00000000000..880ede2f4e3 --- /dev/null +++ b/src/status_im2/contexts/wallet/select_address_to_watch/style.cljs @@ -0,0 +1,18 @@ +(ns status-im2.contexts.wallet.select-address-to-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 22) + :left 20 + :right 20}) diff --git a/src/status_im2/contexts/wallet/address_watch/view.cljs b/src/status_im2/contexts/wallet/select_address_to_watch/view.cljs similarity index 56% rename from src/status_im2/contexts/wallet/address_watch/view.cljs rename to src/status_im2/contexts/wallet/select_address_to_watch/view.cljs index 602bcb1c74d..ba20e8baf91 100644 --- a/src/status_im2/contexts/wallet/address_watch/view.cljs +++ b/src/status_im2/contexts/wallet/select_address_to_watch/view.cljs @@ -1,20 +1,27 @@ -(ns status-im2.contexts.wallet.address-watch.view +(ns status-im2.contexts.wallet.select-address-to-watch.view (: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] + [react-native.safe-area :as safe-area] [reagent.core :as reagent] - [status-im2.contexts.wallet.address-watch.style :as style] + [status-im2.contexts.wallet.select-address-to-watch.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) (defn view-internal [] - (let [input-value (reagent/atom "")] + (let [top (safe-area/get-top) + bottom (safe-area/get-bottom) + input-value (reagent/atom "") + customization-color (rf/sub [:profile/customization-color])] (fn [] - [rn/view {:style {:flex 1}} + [rn/view + {:style {:flex 1 + :margin-top top}} [quo/page-nav {:type :no-title :icon-name :i/close @@ -32,12 +39,18 @@ :container-style {:margin-right 12 :flex 1} :weight :monospace - :on-change #(reset! input-value %) + :on-change-text #(reset! input-value %) :default-value @input-value}] [quo/button {:icon-only? true :type :outline} :i/scan]] - [rn/view {:style style/button-container} - [quo/text "[WIP] Bottom Actions"]]]))) + [quo/button + {:customization-color customization-color + :disabled? (clojure.string/blank? @input-value) + :on-press #(re-frame/dispatch [:navigate-to + :address-to-watch-edit + {:address @input-value}]) + :container-style (style/button-container bottom)} + (i18n/label :t/continue)]]))) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 2a583f66bfb..7b7c381bf13 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -39,13 +39,14 @@ [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing] [status-im2.contexts.wallet.account.bridge.view :as bridge] [status-im2.contexts.wallet.account.view :as wallet-accounts] - [status-im2.contexts.wallet.address-watch.view :as wallet-address-watch] + [status-im2.contexts.wallet.add-watch-only-account.views :as address-add-edit] [status-im2.contexts.wallet.collectible.view :as wallet-collectible] [status-im2.contexts.wallet.create-account.edit-derivation-path.view :as wallet-edit-derivation-path] [status-im2.contexts.wallet.create-account.view :as wallet-create-account] [status-im2.contexts.wallet.edit-account.view :as wallet-edit-account] [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address] [status-im2.contexts.wallet.scan-account.view :as scan-address] + [status-im2.contexts.wallet.select-address-to-watch.view :as wallet-address-watch] [status-im2.contexts.wallet.send.select-address.view :as wallet-select-address] [status-im2.navigation.options :as options] [status-im2.navigation.transitions :as transitions])) @@ -247,6 +248,9 @@ :options {:insets {:top? true}} :component wallet-accounts/view} + {:name :address-to-watch-edit + :component address-add-edit/address-add-edit} + {:name :wallet-edit-account :component wallet-edit-account/view} diff --git a/translations/en.json b/translations/en.json index 28b545a2436..cfb80976e65 100644 --- a/translations/en.json +++ b/translations/en.json @@ -292,6 +292,7 @@ "create-profile": "Create profile", "create-profile-password-info-box-title": "About your profile password", "create-profile-password-info-box-description": "Your Status keys are the foundation of your self-sovereign identity in Web3. You have complete control over these keys, which you can use to sign transactions, access your data, and interact with Web3 services.\n\nYour keys are always securely stored on your device and protected by your Status profile password. Status doesn't know your password and can't reset it for you. If you forget your password, you may lose access to your Status profile and wallet funds.\n\nRemember your Status password and don't share it with anyone.", + "create-account": "Create account", "create-a-pin": "Create a 6-digit passcode", "create-a-puk": "Create a 12-digit PUK", "create-group-chat": "Create group chat", @@ -1564,6 +1565,7 @@ "delete-account": "Delete account", "delete-keys-keycard": "Delete keys from Keycard", "watch-only": "Watch-only", + "watch-address": "Watch 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",