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

[#18833] Confirm button disappearing while editing address (#19186) 

* Fix button disappearing when keyboard is hidden

* Improve keyboard scrolling
This commit is contained in:
Ulises Manuel 2024-03-25 09:00:10 -06:00 committed by GitHub
parent 06dc9ea1d3
commit a405de62e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 95 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@
(reset! ratom height)))) (reset! ratom height))))
(defn- init-keyboard-listeners (defn- init-keyboard-listeners
[{:keys [on-did-show]}] [{:keys [on-did-show scroll-view-ref]}]
(let [keyboard-will-show? (reagent/atom false) (let [keyboard-will-show? (reagent/atom false)
keyboard-did-show? (reagent/atom false) keyboard-did-show? (reagent/atom false)
add-listener (fn [listener callback] add-listener (fn [listener callback]
@ -41,7 +41,10 @@
(reset! keyboard-did-show? true) (reset! keyboard-did-show? true)
(when on-did-show (on-did-show e)))) (when on-did-show (on-did-show e))))
will-hide-listener (add-listener "keyboardWillHide" will-hide-listener (add-listener "keyboardWillHide"
#(reset! keyboard-will-show? false)) (fn []
(reset! keyboard-will-show? false)
(reagent/flush)
(.scrollTo @scroll-view-ref #js {:x 0 :y 0 :animated true})))
did-hide-listener (add-listener "keyboardDidHide" did-hide-listener (add-listener "keyboardDidHide"
#(reset! keyboard-did-show? false)) #(reset! keyboard-did-show? false))
remove-listeners (fn [] remove-listeners (fn []
@ -55,9 +58,11 @@
(defn view (defn view
[{:keys [header footer customization-color footer-container-padding header-container-style [{:keys [header footer customization-color footer-container-padding header-container-style
gradient-cover?] gradient-cover?]
:or {footer-container-padding (safe-area/get-top)}} & :or {footer-container-padding (safe-area/get-top)}}
children] & children]
(reagent/with-let [window-height (:height (rn/get-window)) (reagent/with-let [scroll-view-ref (atom nil)
set-scroll-ref #(reset! scroll-view-ref %)
window-height (:height (rn/get-window))
footer-container-height (reagent/atom 0) footer-container-height (reagent/atom 0)
header-height (reagent/atom 0) header-height (reagent/atom 0)
content-container-height (reagent/atom 0) content-container-height (reagent/atom 0)
@ -66,7 +71,8 @@
{:keys [keyboard-will-show? {:keys [keyboard-will-show?
keyboard-did-show? keyboard-did-show?
remove-listeners]} (init-keyboard-listeners remove-listeners]} (init-keyboard-listeners
{:on-did-show {:scroll-view-ref scroll-view-ref
:on-did-show
(fn [e] (fn [e]
(reset! keyboard-height (reset! keyboard-height
(oops/oget e "endCoordinates.height")))}) (oops/oget e "endCoordinates.height")))})
@ -85,16 +91,22 @@
:header-height @header-height :header-height @header-height
:keyboard-shown? keyboard-shown?})] :keyboard-shown? keyboard-shown?})]
[:<> [:<>
(when gradient-cover? [quo/gradient-cover {:customization-color customization-color}]) (when gradient-cover?
[quo/gradient-cover {:customization-color customization-color}])
[rn/view {:style style/page-container} [rn/view {:style style/page-container}
[rn/view [rn/view
{:on-layout set-header-height {:on-layout set-header-height
:style header-container-style} :style header-container-style}
header] header]
[gesture/scroll-view [gesture/scroll-view
{:on-scroll set-content-y-scroll {:ref set-scroll-ref
:on-scroll set-content-y-scroll
:scroll-event-throttle 64 :scroll-event-throttle 64
:content-container-style {:flex-grow 1}} :content-container-style {:flex-grow 1
:padding-bottom (when @keyboard-did-show?
@footer-container-height)}
:always-bounce-vertical @keyboard-did-show?
:shows-vertical-scroll-indicator false}
(into [rn/view {:on-layout set-content-container-height}] (into [rn/view {:on-layout set-content-container-height}]
children)] children)]
[rn/keyboard-avoiding-view [rn/keyboard-avoiding-view

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

@ -15,10 +15,8 @@
(defn view (defn view
[] []
(let [{:keys [address]} (rf/sub [:get-screen-params]) (let [{:keys [address]} (rf/sub [:get-screen-params])
number-of-accounts (count (rf/sub [:wallet/watch-only-accounts])) placeholder (i18n/label :t/default-watched-address-placeholder)
account-name (reagent/atom "") account-name (reagent/atom "")
placeholder (i18n/label :t/default-watched-address-placeholder
{:number (inc number-of-accounts)})
account-color (reagent/atom (rand-nth colors/account-colors)) account-color (reagent/atom (rand-nth colors/account-colors))
account-emoji (reagent/atom (emoji-picker.utils/random-emoji)) account-emoji (reagent/atom (emoji-picker.utils/random-emoji))
on-change-name #(reset! account-name %) on-change-name #(reset! account-name %)
@ -28,10 +26,7 @@
[rn/view {:style style/container} [rn/view {:style style/container}
[create-or-edit-account/view [create-or-edit-account/view
{:page-nav-right-side [{:icon-name :i/info {:page-nav-right-side [{:icon-name :i/info
:on-press :on-press #(js/alert "Get info (to be implemented)")}]
#(js/alert
"Get info (to be
implemented)")}]
:placeholder placeholder :placeholder placeholder
:account-name @account-name :account-name @account-name
:account-emoji @account-emoji :account-emoji @account-emoji

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

@ -14,19 +14,16 @@
on-change-name on-change-name
on-change-color on-change-color
on-change-emoji section-label on-change-emoji section-label
hide-bottom-action?
bottom-action-label bottom-action-props bottom-action-label bottom-action-props
custom-bottom-action watch-only?]} & children] custom-bottom-action watch-only?]} & children]
(let [{window-width :width} (rn/get-window) (let [{window-width :width} (rn/get-window)
footer (when-not hide-bottom-action? footer (if custom-bottom-action
(if custom-bottom-action
custom-bottom-action custom-bottom-action
[quo/button [quo/button
(merge (merge {:size 40
{:size 40
:type :primary} :type :primary}
bottom-action-props) bottom-action-props)
(i18n/label bottom-action-label)]))] (i18n/label bottom-action-label)])]
[floating-button-page/view [floating-button-page/view
{:header [quo/page-nav {:header [quo/page-nav
{:type :no-title {:type :no-title

7
src/status_im/contexts/wallet/create_account/style.cljs
View File

@ -29,9 +29,4 @@
{:margin-top 12 {:margin-top 12
:margin-bottom 8}) :margin-bottom 8})
(defn slide-button-container (def slide-button-container {:z-index 1})
[bottom]
{:position :absolute
:bottom (+ bottom 12)
:left 20
:right 20})

72
src/status_im/contexts/wallet/create_account/view.cljs
View File

@ -8,6 +8,7 @@
[react-native.safe-area :as safe-area] [react-native.safe-area :as safe-area]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.common.emoji-picker.utils :as emoji-picker.utils] [status-im.common.emoji-picker.utils :as emoji-picker.utils]
[status-im.common.floating-button-page.view :as floating-button-page]
[status-im.common.standard-authentication.core :as standard-auth] [status-im.common.standard-authentication.core :as standard-auth]
[status-im.constants :as constants] [status-im.constants :as constants]
[status-im.contexts.wallet.common.utils :as utils] [status-im.contexts.wallet.common.utils :as utils]
@ -20,7 +21,6 @@
[utils.security.core :as security] [utils.security.core :as security]
[utils.string])) [utils.string]))
(defn- get-keypair-data (defn- get-keypair-data
[{:keys [title primary-keypair? new-keypair? derivation-path customization-color]}] [{:keys [title primary-keypair? new-keypair? derivation-path customization-color]}]
[{:title title [{:title title
@ -48,22 +48,24 @@
:description-props {:text (string/replace derivation-path #"/" " / ")}}]) :description-props {:text (string/replace derivation-path #"/" " / ")}}])
(defn- f-view (defn- f-view
[{:keys [theme]}] [_]
(let [account-name (reagent/atom "")
account-color (reagent/atom (rand-nth colors/account-colors))
emoji (reagent/atom (emoji-picker.utils/random-emoji))]
(fn []
(let [top (safe-area/get-top) (let [top (safe-area/get-top)
bottom (safe-area/get-bottom) bottom (safe-area/get-bottom)
{window-width :width} (rn/get-window) {window-width :width} (rn/get-window)
number-of-accounts (count (rf/sub account-color (reagent/atom (rand-nth colors/account-colors))
emoji (reagent/atom (emoji-picker.utils/random-emoji))
account-name (reagent/atom "")
on-change-text #(reset! account-name %)
show-account-origin #(rf/dispatch [:show-bottom-sheet
{:content account-origin/view}])]
(fn [{:keys [theme]}]
(let [number-of-accounts (count (rf/sub
[:wallet/accounts-without-watched-accounts])) [:wallet/accounts-without-watched-accounts]))
{:keys [address customization-color]} (rf/sub [:profile/profile]) {:keys [address customization-color]} (rf/sub [:profile/profile])
{:keys [new-keypair]} (rf/sub [:wallet/create-account]) {:keys [new-keypair]} (rf/sub [:wallet/create-account])
keypairs (rf/sub [:wallet/keypairs]) keypairs (rf/sub [:wallet/keypairs])
selected-keypair-uid (rf/sub [:wallet/selected-keypair-uid]) selected-keypair-uid (rf/sub [:wallet/selected-keypair-uid])
placeholder (i18n/label :t/default-account-placeholder placeholder (i18n/label :t/default-account-placeholder)
{:number (inc number-of-accounts)})
derivation-path (utils/get-derivation-path derivation-path (utils/get-derivation-path
number-of-accounts) number-of-accounts)
keypair (some #(when (= (:key-uid %) selected-keypair-uid) keypair (some #(when (= (:key-uid %) selected-keypair-uid)
@ -94,20 +96,32 @@
{:name (:name keypair)}) {:name (:name keypair)})
(:name keypair)))] (:name keypair)))]
(rn/use-unmount #(rf/dispatch [:wallet/clear-new-keypair])) (rn/use-unmount #(rf/dispatch [:wallet/clear-new-keypair]))
[rn/view {:style {:flex 1}} [floating-button-page/view
[quo/page-nav {:gradient-cover? true
:footer-container-padding 0
:header-container-style {:padding-top top}
:customization-color @account-color
:header [quo/page-nav
{:type :no-title {:type :no-title
:background :blur :background :blur
:right-side [{:icon-name :i/info :right-side [{:icon-name :i/info
:on-press #(rf/dispatch [:show-bottom-sheet :on-press show-account-origin}]
{:content account-origin/view}])}]
:icon-name :i/close :icon-name :i/close
:on-press #(rf/dispatch [:navigate-back])}] :on-press #(rf/dispatch [:navigate-back])}]
[quo/gradient-cover :footer [standard-auth/slide-button
{:customization-color @account-color {:size :size-48
:container-style {:top (- top)}}] :track-text (i18n/label :t/slide-to-create-account)
[rn/view :customization-color @account-color
{:style style/account-avatar-container} :on-auth-success (fn [password]
(if new-keypair
(create-new-keypair-account password)
(create-existing-keypair-account
password)))
:auth-button-label (i18n/label :t/confirm)
:disabled? (empty? @account-name)
:container-style (style/slide-button-container bottom)
:dependencies [new-keypair]}]}
[rn/view {:style style/account-avatar-container}
[quo/account-avatar [quo/account-avatar
{:customization-color @account-color {:customization-color @account-color
:size 80 :size 80
@ -121,19 +135,19 @@
:on-press #(rf/dispatch [:emoji-picker/open :on-press #(rf/dispatch [:emoji-picker/open
{:on-select (fn [selected-emoji] {:on-select (fn [selected-emoji]
(reset! emoji selected-emoji))}]) (reset! emoji selected-emoji))}])
:container-style style/reaction-button-container} :i/reaction]] :container-style style/reaction-button-container}
:i/reaction]]
[quo/title-input [quo/title-input
{:customization-color @account-color {:customization-color @account-color
:placeholder placeholder :placeholder placeholder
:on-change-text #(reset! account-name %) :on-change-text on-change-text
:max-length constants/wallet-account-name-max-length :max-length constants/wallet-account-name-max-length
:blur? true :blur? true
:disabled? false :disabled? false
:default-value @account-name :default-value @account-name
:container-style style/title-input-container}] :container-style style/title-input-container}]
[quo/divider-line] [quo/divider-line]
[rn/view [rn/view {:style style/color-picker-container}
{:style style/color-picker-container}
[quo/text [quo/text
{:size :paragraph-2 {:size :paragraph-2
:weight :medium :weight :medium
@ -153,19 +167,7 @@
:primary-keypair? primary-keypair? :primary-keypair? primary-keypair?
:new-keypair? (boolean new-keypair) :new-keypair? (boolean new-keypair)
:derivation-path derivation-path :derivation-path derivation-path
:customization-color customization-color})}] :customization-color customization-color})}]]))))
[standard-auth/slide-button
{:size :size-48
:track-text (i18n/label :t/slide-to-create-account)
:customization-color @account-color
:on-auth-success (fn [password]
(if new-keypair
(create-new-keypair-account password)
(create-existing-keypair-account password)))
:auth-button-label (i18n/label :t/confirm)
:disabled? (empty? @account-name)
:container-style (style/slide-button-container bottom)
:dependencies [new-keypair]}]]))))
(defn- view-internal (defn- view-internal
[] []

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

@ -1,7 +1,6 @@
(ns status-im.contexts.wallet.edit-account.view (ns status-im.contexts.wallet.edit-account.view
(:require [quo.core :as quo] (:require [quo.core :as quo]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.hooks :as hooks]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.contexts.wallet.common.screen-base.create-or-edit-account.view [status-im.contexts.wallet.common.screen-base.create-or-edit-account.view
:as create-or-edit-account] :as create-or-edit-account]
@ -61,8 +60,7 @@
:prod-preferred-chain-ids) :prod-preferred-chain-ids)
account-name (or @edited-account-name name) account-name (or @edited-account-name name)
button-disabled? (or (nil? @edited-account-name) button-disabled? (or (nil? @edited-account-name)
(= name @edited-account-name)) (= name @edited-account-name))]
{:keys [keyboard-shown]} (hooks/use-keyboard)]
[create-or-edit-account/view [create-or-edit-account/view
{:page-nav-right-side [(when-not default-account? {:page-nav-right-side [(when-not default-account?
{:icon-name :i/delete {:icon-name :i/delete
@ -77,7 +75,6 @@
:on-change-color #(on-change-color % account) :on-change-color #(on-change-color % account)
:on-change-emoji #(on-change-emoji % account) :on-change-emoji #(on-change-emoji % account)
:section-label :t/account-info :section-label :t/account-info
:hide-bottom-action? (and button-disabled? (not keyboard-shown))
:bottom-action-label :t/confirm :bottom-action-label :t/confirm
:bottom-action-props {:customization-color color :bottom-action-props {:customization-color color
:disabled? button-disabled? :disabled? button-disabled?

4
translations/en.json
View File

@ -450,8 +450,8 @@
"decline": "Decline", "decline": "Decline",
"decryption-failed-content": "An error occured decrypting your data. You might need to erase your old data and generate a new account. Tap “Apply” to erase or “Cancel” to try again", "decryption-failed-content": "An error occured decrypting your data. You might need to erase your old data and generate a new account. Tap “Apply” to erase or “Cancel” to try again",
"default": "Default", "default": "Default",
"default-account-placeholder": "Account {{number}}", "default-account-placeholder": "Account Name",
"default-watched-address-placeholder": "Watched address {{number}}", "default-watched-address-placeholder": "Watched address",
"delete": "Delete", "delete": "Delete",
"delete-and-leave-group": "Delete and leave group", "delete-and-leave-group": "Delete and leave group",
"delete-bootnode": "Delete bootnode", "delete-bootnode": "Delete bootnode",