status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix account edit confirmation button (#18930) 

* fix: confirm button not visible

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: edit account btn text

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: removed bottom-action? prop

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: removed unused on-focus and on-blur props

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* ref: using floating-button-page

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: linting error

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: hide btn when disabled and keyboard hidden

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: react warning and header height (again)

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: replace padding prop with style

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* fix: addressed review comments

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* chore: removed redundant :f> due to new reagent compiler

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

---------

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>
This commit is contained in:
Lungu Cristian 2024-03-01 12:00:32 +02:00 committed by GitHub
parent abd2b43ce6
commit a4b973970b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 67 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/status_im/common/floating_button_page/view.cljs
View File

@ -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

1
src/status_im/contexts/wallet/add_address_to_watch/confirm_address/view.cljs
View File

@ -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)

6
src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs
View File

@ -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})

60
src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs
View File

@ -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)]))

59
src/status_im/contexts/wallet/edit_account/view.cljs
View File

@ -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)}}