From a4b973970b31d6eb393d75eccddf44b401e11725 Mon Sep 17 00:00:00 2001 From: Lungu Cristian Date: Fri, 1 Mar 2024 12:00:32 +0200 Subject: [PATCH] Fix account edit confirmation button (#18930) * fix: confirm button not visible Signed-off-by: Cristian Lungu * fix: edit account btn text Signed-off-by: Cristian Lungu * fix: removed bottom-action? prop Signed-off-by: Cristian Lungu * fix: removed unused on-focus and on-blur props Signed-off-by: Cristian Lungu * ref: using floating-button-page Signed-off-by: Cristian Lungu * fix: linting error Signed-off-by: Cristian Lungu * fix: hide btn when disabled and keyboard hidden Signed-off-by: Cristian Lungu * fix: react warning and header height (again) Signed-off-by: Cristian Lungu * fix: replace padding prop with style Signed-off-by: Cristian Lungu * fix: addressed review comments Signed-off-by: Cristian Lungu * chore: removed redundant :f> due to new reagent compiler Signed-off-by: Cristian Lungu --------- Signed-off-by: Cristian Lungu --- .../common/floating_button_page/view.cljs | 7 ++- .../confirm_address/view.cljs | 1 - .../create_or_edit_account/style.cljs | 6 +- .../create_or_edit_account/view.cljs | 60 +++++++++---------- .../contexts/wallet/edit_account/view.cljs | 59 +++++++++--------- 5 files changed, 67 insertions(+), 66 deletions(-) diff --git a/src/status_im/common/floating_button_page/view.cljs b/src/status_im/common/floating_button_page/view.cljs index dba9ee18b4..cab1e3ebfd 100644 --- a/src/status_im/common/floating_button_page/view.cljs +++ b/src/status_im/common/floating_button_page/view.cljs @@ -52,7 +52,8 @@ :remove-listeners remove-listeners})) (defn view - [{:keys [header footer customization-color footer-container-padding gradient-cover?] + [{:keys [header footer customization-color footer-container-padding header-container-style + gradient-cover?] :or {footer-container-padding (safe-area/get-top)}} & children] (reagent/with-let [window-height (:height (rn/get-window)) @@ -85,7 +86,9 @@ [:<> (when gradient-cover? [quo/gradient-cover {:customization-color customization-color}]) [rn/view {:style style/page-container} - [rn/view {:on-layout set-header-height} + [rn/view + {:on-layout set-header-height + :style header-container-style} header] [rn/scroll-view {:on-scroll set-content-y-scroll diff --git a/src/status_im/contexts/wallet/add_address_to_watch/confirm_address/view.cljs b/src/status_im/contexts/wallet/add_address_to_watch/confirm_address/view.cljs index 90626f5551..3b0fbfe2eb 100644 --- a/src/status_im/contexts/wallet/add_address_to_watch/confirm_address/view.cljs +++ b/src/status_im/contexts/wallet/add_address_to_watch/confirm_address/view.cljs @@ -40,7 +40,6 @@ :on-change-color on-change-color :on-change-emoji on-change-emoji :watch-only? true - :bottom-action? true :bottom-action-label :t/add-watched-address :bottom-action-props {:customization-color @account-color :disabled? (string/blank? @account-name) diff --git a/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs b/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs index 5b306198e3..5b2630b86a 100644 --- a/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs +++ b/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs @@ -1,4 +1,5 @@ -(ns status-im.contexts.wallet.common.screen-base.create-or-edit-account.style) +(ns status-im.contexts.wallet.common.screen-base.create-or-edit-account.style + (:require [quo.foundations.colors :as colors])) (defn root-container [top] @@ -49,7 +50,8 @@ :margin-bottom 12}) (defn bottom-action - [bottom] + [{:keys [bottom theme]}] {:padding-horizontal 20 :padding-vertical 12 + :background-color (colors/theme-colors colors/white colors/neutral-100 theme) :margin-bottom bottom}) diff --git a/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs b/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs index 82b621cd0e..0347e49759 100644 --- a/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs +++ b/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs @@ -1,34 +1,44 @@ (ns status-im.contexts.wallet.common.screen-base.create-or-edit-account.view (:require [quo.core :as quo] + [quo.theme] [react-native.core :as rn] [react-native.safe-area :as safe-area] + [status-im.common.floating-button-page.view :as floating-button-page] [status-im.constants :as constants] [status-im.contexts.wallet.common.screen-base.create-or-edit-account.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) (defn view - [{:keys [margin-top? page-nav-right-side placeholder account-name account-color account-emoji + [{:keys [page-nav-right-side placeholder account-name account-color account-emoji on-change-name on-change-color - on-change-emoji on-focus on-blur section-label bottom-action? + on-change-emoji section-label + hide-bottom-action? bottom-action-label bottom-action-props 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)] - [rn/keyboard-avoiding-view - {:style (style/root-container margin-top) - :keyboard-vertical-offset (- bottom)} - [quo/page-nav - {:type :no-title - :background :blur - :right-side page-nav-right-side - :icon-name :i/close - :on-press #(rf/dispatch [:navigate-back])}] - [quo/gradient-cover - {:customization-color account-color - :container-style (style/gradient-cover-container margin-top)}] + (let [{window-width :width} (rn/get-window) + footer (when-not hide-bottom-action? + (if custom-bottom-action + custom-bottom-action + [quo/button + (merge + {:size 40 + :type :primary} + bottom-action-props) + (i18n/label bottom-action-label)]))] + [floating-button-page/view + {:header [quo/page-nav + {:type :no-title + :background :blur + :right-side page-nav-right-side + :icon-name :i/close + :on-press #(rf/dispatch [:navigate-back])}] + :footer footer + :gradient-cover? true + :footer-container-padding 0 + :header-container-style {:padding-top (safe-area/get-top)} + :customization-color account-color} (into [:<> [rn/view {:style style/account-avatar-container} @@ -52,9 +62,7 @@ :default-value account-name :auto-focus true :on-change-text on-change-name - :container-style style/title-input-container - :on-focus on-focus - :on-blur on-blur}] + :container-style style/title-input-container}] [quo/divider-line {:container-style style/divider-1}] [quo/section-label {:section (i18n/label :t/colour) @@ -71,14 +79,4 @@ [quo/section-label {:section (i18n/label section-label) :container-style style/section-container}])] - children) - (when bottom-action? - [rn/view {:style (style/bottom-action bottom)} - (if custom-bottom-action - custom-bottom-action - [quo/button - (merge - {:size 40 - :type :primary} - bottom-action-props) - (i18n/label bottom-action-label)])])])) + children)])) diff --git a/src/status_im/contexts/wallet/edit_account/view.cljs b/src/status_im/contexts/wallet/edit_account/view.cljs index 6098b70272..e54a8cfb01 100644 --- a/src/status_im/contexts/wallet/edit_account/view.cljs +++ b/src/status_im/contexts/wallet/edit_account/view.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.wallet.edit-account.view (:require [quo.core :as quo] [react-native.core :as rn] + [react-native.hooks :as hooks] [reagent.core :as reagent] [status-im.contexts.wallet.common.screen-base.create-or-edit-account.view :as create-or-edit-account] @@ -35,34 +36,34 @@ (defn view [] - (let [edited-account-name (reagent/atom nil) - show-confirm-button? (reagent/atom false) - on-change-color (fn [edited-color {:keys [color] :as account}] - (when (not= edited-color color) - (save-account {:account account - :updated-key :color - :new-value edited-color}))) - on-change-emoji (fn [edited-emoji {:keys [emoji] :as account}] - (when (not= edited-emoji emoji) - (save-account {:account account - :updated-key :emoji - :new-value edited-emoji}))) - on-confirm-name (fn [account] - (rn/dismiss-keyboard!) - (save-account {:account account - :updated-key :name - :new-value @edited-account-name}))] + (let [edited-account-name (reagent/atom nil) + on-change-color (fn [edited-color {:keys [color] :as account}] + (when (not= edited-color color) + (save-account {:account account + :updated-key :color + :new-value edited-color}))) + on-change-emoji (fn [edited-emoji {:keys [emoji] :as account}] + (when (not= edited-emoji emoji) + (save-account {:account account + :updated-key :emoji + :new-value edited-emoji}))) + on-confirm-name (fn [account] + (rn/dismiss-keyboard!) + (save-account {:account account + :updated-key :name + :new-value @edited-account-name}))] (fn [] (let [{:keys [name emoji address color watch-only? default-account?] - :as account} (rf/sub [:wallet/current-viewing-account]) - network-details (rf/sub [:wallet/network-preference-details]) - test-networks-enabled? (rf/sub [:profile/test-networks-enabled?]) - network-preferences-key (if test-networks-enabled? - :test-preferred-chain-ids - :prod-preferred-chain-ids) - account-name (or @edited-account-name name) - button-disabled? (or (nil? @edited-account-name) - (= name @edited-account-name))] + :as account} (rf/sub [:wallet/current-viewing-account]) + network-details (rf/sub [:wallet/network-preference-details]) + test-networks-enabled? (rf/sub [:profile/test-networks-enabled?]) + network-preferences-key (if test-networks-enabled? + :test-preferred-chain-ids + :prod-preferred-chain-ids) + account-name (or @edited-account-name name) + button-disabled? (or (nil? @edited-account-name) + (= name @edited-account-name)) + {:keys [keyboard-shown]} (hooks/use-keyboard)] [create-or-edit-account/view {:page-nav-right-side [(when-not default-account? {:icon-name :i/delete @@ -80,10 +81,8 @@ :on-change-color #(on-change-color % account) :on-change-emoji #(on-change-emoji % account) :section-label :t/account-info - :on-focus #(reset! show-confirm-button? true) - :on-blur #(reset! show-confirm-button? false) - :bottom-action? @show-confirm-button? - :bottom-action-label :t/update-account-name + :hide-bottom-action? (and button-disabled? (not keyboard-shown)) + :bottom-action-label :t/confirm :bottom-action-props {:customization-color color :disabled? button-disabled? :on-press #(on-confirm-name account)}}