Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Mar 25, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3e354d7
Fix button disappearing when keyboard is hidden
ulisesmac Mar 12, 2024
8a40408
Fix conflicts
ulisesmac Mar 19, 2024
95de837
Improve keyboard scrolling
ulisesmac Mar 19, 2024
82621cb
Fix stuck scrolling on iOS
ulisesmac Mar 22, 2024
3f5091d
Merge branch 'develop' into 18833-confirm-button-disappearing
ulisesmac Mar 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 22 additions & 10 deletions src/status_im/common/floating_button_page/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand All @@ -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 []
Expand All @@ -55,9 +58,11 @@
(defn view
[{: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))
:or {footer-container-padding (safe-area/get-top)}}
& children]
(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)
Expand All @@ -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")))})
Expand All @@ -85,16 +91,22 @@
: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}}
{: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?
@footer-container-height)}
:always-bounce-vertical @keyboard-did-show?
:shows-vertical-scroll-indicator false}
(into [rn/view {:on-layout set-content-container-height}]
children)]
[rn/keyboard-avoiding-view
Expand Down
23 changes: 9 additions & 14 deletions src/status_im/contexts/wallet/add_address_to_watch/confirm_address/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
17 changes: 7 additions & 10 deletions src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 1 addition & 6 deletions src/status_im/contexts/wallet/create_account/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})
88 changes: 45 additions & 43 deletions src/status_im/contexts/wallet/create_account/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand All @@ -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
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -94,20 +96,32 @@
{: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
Expand All @@ -121,19 +135,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
Expand All @@ -153,19 +167,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
[]
Expand Down
21 changes: 9 additions & 12 deletions src/status_im/contexts/wallet/edit_account/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]
Expand Down Expand Up @@ -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
Expand All @@ -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?
Expand Down
4 changes: 2 additions & 2 deletions translations/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down