From 3e354d75cb236e2be2f87f7257949c84c0c2713e Mon Sep 17 00:00:00 2001 From: Ulises M Date: Tue, 12 Mar 2024 11:41:50 -0600 Subject: [PATCH 1/4] Fix button disappearing when keyboard is hidden --- .../common/floating_button_page/view.cljs | 17 ++-- .../confirm_address/view.cljs | 23 ++--- .../create_or_edit_account/view.cljs | 17 ++-- .../contexts/wallet/create_account/style.cljs | 7 +- .../contexts/wallet/create_account/view.cljs | 87 ++++++++++--------- .../contexts/wallet/edit_account/view.cljs | 21 ++--- translations/en.json | 4 +- 7 files changed, 83 insertions(+), 93 deletions(-) diff --git a/src/status_im/common/floating_button_page/view.cljs b/src/status_im/common/floating_button_page/view.cljs index 5c4819c57d0..b7c85b85a26 100644 --- a/src/status_im/common/floating_button_page/view.cljs +++ b/src/status_im/common/floating_button_page/view.cljs @@ -55,8 +55,8 @@ (defn view [{:keys [header footer customization-color footer-container-padding header-container-style gradient-cover?] - :or {footer-container-padding (safe-area/get-top)}} & - children] + :or {footer-container-padding (safe-area/get-top)}} + & children] (reagent/with-let [window-height (:height (rn/get-window)) footer-container-height (reagent/atom 0) header-height (reagent/atom 0) @@ -85,16 +85,21 @@ :header-height @header-height :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 {:on-layout set-header-height :style header-container-style} header] [gesture/scroll-view - {:on-scroll set-content-y-scroll - :scroll-event-throttle 64 - :content-container-style {:flex-grow 1}} + {:on-scroll set-content-y-scroll + :scroll-event-throttle 64 + :content-container-style {:flex-grow 1 + :padding-bottom (when @keyboard-did-show? + @footer-container-height)} + :always-bounce-vertical false + :shows-vertical-scroll-indicator false} (into [rn/view {:on-layout set-content-container-height}] children)] [rn/keyboard-avoiding-view 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 3b0fbfe2eb5..c9cb8b3c4fc 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 @@ -14,24 +14,19 @@ (defn view [] - (let [{:keys [address]} (rf/sub [:get-screen-params]) - number-of-accounts (count (rf/sub [:wallet/watch-only-accounts])) - 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-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 %)] + (let [{:keys [address]} (rf/sub [:get-screen-params]) + placeholder (i18n/label :t/default-watched-address-placeholder) + account-name (reagent/atom "") + account-color (reagent/atom (rand-nth colors/account-colors)) + 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)")}] + :on-press #(js/alert "Get info (to be implemented)")}] :placeholder placeholder :account-name @account-name :account-emoji @account-emoji 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 0347e497599..a9305015546 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 @@ -14,19 +14,16 @@ on-change-name on-change-color on-change-emoji section-label - hide-bottom-action? bottom-action-label bottom-action-props custom-bottom-action watch-only?]} & children] (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)]))] + footer (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 diff --git a/src/status_im/contexts/wallet/create_account/style.cljs b/src/status_im/contexts/wallet/create_account/style.cljs index 7c5d07075d6..e381c88b11a 100644 --- a/src/status_im/contexts/wallet/create_account/style.cljs +++ b/src/status_im/contexts/wallet/create_account/style.cljs @@ -29,9 +29,4 @@ {:margin-top 12 :margin-bottom 8}) -(defn slide-button-container - [bottom] - {:position :absolute - :bottom (+ bottom 12) - :left 20 - :right 20}) +(def slide-button-container {:z-index 1}) diff --git a/src/status_im/contexts/wallet/create_account/view.cljs b/src/status_im/contexts/wallet/create_account/view.cljs index fa0a4617165..5c40250ac22 100644 --- a/src/status_im/contexts/wallet/create_account/view.cljs +++ b/src/status_im/contexts/wallet/create_account/view.cljs @@ -8,6 +8,7 @@ [react-native.safe-area :as safe-area] [reagent.core :as reagent] [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.constants :as constants] [status-im.contexts.wallet.common.utils :as utils] @@ -20,7 +21,6 @@ [utils.security.core :as security] [utils.string])) - (defn- get-keypair-data [{:keys [title primary-keypair? new-keypair? derivation-path customization-color]}] [{:title title @@ -48,22 +48,24 @@ :description-props {:text (string/replace derivation-path #"/" " / ")}}]) (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) - bottom (safe-area/get-bottom) - {window-width :width} (rn/get-window) - number-of-accounts (count (rf/sub + [_] + (let [top (safe-area/get-top) + bottom (safe-area/get-bottom) + {window-width :width} (rn/get-window) + 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])) {:keys [address customization-color]} (rf/sub [:profile/profile]) {:keys [new-keypair]} (rf/sub [:wallet/create-account]) keypairs (rf/sub [:wallet/keypairs]) selected-keypair-uid (rf/sub [:wallet/selected-keypair-uid]) - placeholder (i18n/label :t/default-account-placeholder - {:number (inc number-of-accounts)}) + placeholder (i18n/label :t/default-account-placeholder) derivation-path (utils/get-derivation-path number-of-accounts) keypair (some #(when (= (:key-uid %) selected-keypair-uid) @@ -94,20 +96,31 @@ {:name (:name keypair)}) (:name keypair)))] (rn/use-unmount #(rf/dispatch [:wallet/clear-new-keypair])) - [rn/view {:style {:flex 1}} - [quo/page-nav - {:type :no-title - :background :blur - :right-side [{:icon-name :i/info - :on-press #(rf/dispatch [:show-bottom-sheet - {:content account-origin/view}])}] - :icon-name :i/close - :on-press #(rf/dispatch [:navigate-back])}] - [quo/gradient-cover - {:customization-color @account-color - :container-style {:top (- top)}}] - [rn/view - {:style style/account-avatar-container} + [floating-button-page/view + {:gradient-cover? true + :footer-container-padding 0 + :header-container-style {:padding-top top} + :customization-color @account-color + :header [quo/page-nav + {:type :no-title + :background :blur + :right-side [{:icon-name :i/info + :on-press show-account-origin}] + :icon-name :i/close + :on-press #(rf/dispatch [:navigate-back])}] + :footer [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]}]} + [rn/view {:style style/account-avatar-container} [quo/account-avatar {:customization-color @account-color :size 80 @@ -121,19 +134,19 @@ :on-press #(rf/dispatch [:emoji-picker/open {:on-select (fn [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 {:customization-color @account-color :placeholder placeholder - :on-change-text #(reset! account-name %) + :on-change-text on-change-text :max-length constants/wallet-account-name-max-length :blur? true :disabled? false :default-value @account-name :container-style style/title-input-container}] [quo/divider-line] - [rn/view - {:style style/color-picker-container} + [rn/view {:style style/color-picker-container} [quo/text {:size :paragraph-2 :weight :medium @@ -153,19 +166,7 @@ :primary-keypair? primary-keypair? :new-keypair? (boolean new-keypair) :derivation-path derivation-path - :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]}]])))) + :customization-color customization-color})}]])))) (defn- view-internal [] diff --git a/src/status_im/contexts/wallet/edit_account/view.cljs b/src/status_im/contexts/wallet/edit_account/view.cljs index dc8efa3e83c..03343446cae 100644 --- a/src/status_im/contexts/wallet/edit_account/view.cljs +++ b/src/status_im/contexts/wallet/edit_account/view.cljs @@ -1,7 +1,6 @@ (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] @@ -53,16 +52,15 @@ :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)) - {:keys [keyboard-shown]} (hooks/use-keyboard)] + :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))] [create-or-edit-account/view {:page-nav-right-side [(when-not default-account? {:icon-name :i/delete @@ -77,7 +75,6 @@ :on-change-color #(on-change-color % account) :on-change-emoji #(on-change-emoji % account) :section-label :t/account-info - :hide-bottom-action? (and button-disabled? (not keyboard-shown)) :bottom-action-label :t/confirm :bottom-action-props {:customization-color color :disabled? button-disabled? diff --git a/translations/en.json b/translations/en.json index e80a7125447..325991a2613 100644 --- a/translations/en.json +++ b/translations/en.json @@ -450,8 +450,8 @@ "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", "default": "Default", - "default-account-placeholder": "Account {{number}}", - "default-watched-address-placeholder": "Watched address {{number}}", + "default-account-placeholder": "Account Name", + "default-watched-address-placeholder": "Watched address", "delete": "Delete", "delete-and-leave-group": "Delete and leave group", "delete-bootnode": "Delete bootnode", From 8a40408665ffc62bc15d4c0dd6bba2f9b4943261 Mon Sep 17 00:00:00 2001 From: Ulises M Date: Tue, 19 Mar 2024 16:05:54 -0600 Subject: [PATCH 2/4] Fix conflicts --- .../contexts/wallet/create_account/view.cljs | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/status_im/contexts/wallet/create_account/view.cljs b/src/status_im/contexts/wallet/create_account/view.cljs index 5c40250ac22..7d9b506d728 100644 --- a/src/status_im/contexts/wallet/create_account/view.cljs +++ b/src/status_im/contexts/wallet/create_account/view.cljs @@ -49,15 +49,15 @@ (defn- f-view [_] - (let [top (safe-area/get-top) - bottom (safe-area/get-bottom) + (let [top (safe-area/get-top) + bottom (safe-area/get-bottom) {window-width :width} (rn/get-window) - 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}])] + 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])) @@ -115,7 +115,8 @@ :on-auth-success (fn [password] (if new-keypair (create-new-keypair-account password) - (create-existing-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) From 95de837e06ff49a0e7aa7a736190edb76a141593 Mon Sep 17 00:00:00 2001 From: Ulises M Date: Tue, 19 Mar 2024 16:07:11 -0600 Subject: [PATCH 3/4] Improve keyboard scrolling Fix condition to scroll --- src/status_im/common/floating_button_page/view.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/status_im/common/floating_button_page/view.cljs b/src/status_im/common/floating_button_page/view.cljs index b7c85b85a26..22db4864ac8 100644 --- a/src/status_im/common/floating_button_page/view.cljs +++ b/src/status_im/common/floating_button_page/view.cljs @@ -98,7 +98,7 @@ :content-container-style {:flex-grow 1 :padding-bottom (when @keyboard-did-show? @footer-container-height)} - :always-bounce-vertical false + :always-bounce-vertical @keyboard-did-show? :shows-vertical-scroll-indicator false} (into [rn/view {:on-layout set-content-container-height}] children)] From 82621cb6cd35c3b53548e1737835656df8d85b1b Mon Sep 17 00:00:00 2001 From: Ulises M Date: Fri, 22 Mar 2024 09:53:45 -0600 Subject: [PATCH 4/4] Fix stuck scrolling on iOS --- .../common/floating_button_page/view.cljs | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/status_im/common/floating_button_page/view.cljs b/src/status_im/common/floating_button_page/view.cljs index 22db4864ac8..6e9df140105 100644 --- a/src/status_im/common/floating_button_page/view.cljs +++ b/src/status_im/common/floating_button_page/view.cljs @@ -29,7 +29,7 @@ (reset! ratom height)))) (defn- init-keyboard-listeners - [{:keys [on-did-show]}] + [{:keys [on-did-show scroll-view-ref]}] (let [keyboard-will-show? (reagent/atom false) keyboard-did-show? (reagent/atom false) add-listener (fn [listener callback] @@ -41,7 +41,10 @@ (reset! keyboard-did-show? true) (when on-did-show (on-did-show e)))) 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" #(reset! keyboard-did-show? false)) remove-listeners (fn [] @@ -57,7 +60,9 @@ gradient-cover?] :or {footer-container-padding (safe-area/get-top)}} & 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) header-height (reagent/atom 0) content-container-height (reagent/atom 0) @@ -66,7 +71,8 @@ {:keys [keyboard-will-show? keyboard-did-show? remove-listeners]} (init-keyboard-listeners - {:on-did-show + {:scroll-view-ref scroll-view-ref + :on-did-show (fn [e] (reset! keyboard-height (oops/oget e "endCoordinates.height")))}) @@ -93,7 +99,8 @@ :style header-container-style} header] [gesture/scroll-view - {:on-scroll set-content-y-scroll + {:ref set-scroll-ref + :on-scroll set-content-y-scroll :scroll-event-throttle 64 :content-container-style {:flex-grow 1 :padding-bottom (when @keyboard-did-show?