From b005eb818105c851205c77366a54d47cc8e36e5e Mon Sep 17 00:00:00 2001 From: Mohsen Date: Wed, 26 Jun 2024 16:44:29 +0330 Subject: [PATCH] feat!: add saved addresses to wallet settings (#20475) --- .../components/selectors/selectors/style.cljs | 2 +- src/quo/components/share/qr_code/style.cljs | 6 +++ src/quo/components/share/qr_code/view.cljs | 7 +-- .../add_address_to_save/style.cljs | 3 +- .../add_address_to_save/view.cljs | 6 +-- .../saved_addresses/save_address/view.cljs | 9 ++-- .../settings/wallet/saved_addresses/view.cljs | 43 +++++++++++-------- .../settings/wallet/wallet_options/view.cljs | 10 ++--- .../wallet/common/scan_account/view.cljs | 2 +- .../contexts/wallet/common/utils.cljs | 3 +- .../sheets/network_preferences/view.cljs | 7 ++- src/status_im/feature_flags.cljs | 2 - .../subs/wallet/saved_addresses.cljs | 4 +- translations/en.json | 3 +- 14 files changed, 59 insertions(+), 48 deletions(-) diff --git a/src/quo/components/selectors/selectors/style.cljs b/src/quo/components/selectors/selectors/style.cljs index c945f567e2..417591f756 100644 --- a/src/quo/components/selectors/selectors/style.cljs +++ b/src/quo/components/selectors/selectors/style.cljs @@ -31,7 +31,7 @@ (defn- checkbox-border-unchecked-color [theme] {:normal (colors/theme-colors colors/neutral-30 colors/neutral-70 theme) - :blur (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}) + :blur (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)}) (defn- filled-checkbox-background-color [theme] diff --git a/src/quo/components/share/qr_code/style.cljs b/src/quo/components/share/qr_code/style.cljs index ab72ad46af..3fdee84e04 100644 --- a/src/quo/components/share/qr_code/style.cljs +++ b/src/quo/components/share/qr_code/style.cljs @@ -39,6 +39,12 @@ (def avatar-container-rounded (assoc avatar-container-common :border-radius 16)) +(def big-avatar-container-rounded + (assoc avatar-container-common + :width 84 + :height 84 + :border-radius 42)) + (def community-logo-image {:width 64 :height 64 diff --git a/src/quo/components/share/qr_code/view.cljs b/src/quo/components/share/qr_code/view.cljs index 2ed627db04..4ff539cb6b 100644 --- a/src/quo/components/share/qr_code/view.cljs +++ b/src/quo/components/share/qr_code/view.cljs @@ -13,8 +13,9 @@ :as props}] [rn/view {:style style/avatar-overlay} [rn/view - {:style (if (= avatar-type :wallet-account) - style/avatar-container-rounded + {:style (case avatar-type + :wallet-account style/avatar-container-rounded + :saved-address style/big-avatar-container-rounded style/avatar-container-circular)} (case avatar-type :profile @@ -37,7 +38,7 @@ [channel-avatar/view (assoc props :locked? nil :size :size-64)] :saved-address - [wallet-avatar/wallet-user-avatar (assoc props :size :size-64)] + [wallet-avatar/wallet-user-avatar (assoc props :size :size-80)] nil)]]) diff --git a/src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/style.cljs b/src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/style.cljs index 3b44e5217a..8e8b8b5d8b 100644 --- a/src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/style.cljs +++ b/src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/style.cljs @@ -27,4 +27,5 @@ {:color colors/white-opa-40}) (def saved-address-item - {:margin-top 4}) + {:margin-top 4 + :background-color colors/white-opa-5}) diff --git a/src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/view.cljs b/src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/view.cljs index 1d081d0e44..7dae092de6 100644 --- a/src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/view.cljs +++ b/src/status_im/contexts/settings/wallet/saved_addresses/add_address_to_save/view.cljs @@ -49,6 +49,7 @@ :multiline? true :on-clear clear-input :return-key-type :done + :auto-focus true :clearable? (not empty-input?) :on-change-text on-change-text :button (when empty-input? @@ -83,7 +84,7 @@ [quo/info-message {:accessibility-label :error-message :size :default - :icon :i/info + :icon :i/alert :type :error :style style/info-message} error-msg]))) @@ -91,8 +92,7 @@ (defn- existing-saved-address [{:keys [address]}] (let [{:keys [name customization-color chain-short-names ens ens?]} - (rf/sub [:wallet/saved-address-by-address - address])] + (rf/sub [:wallet/saved-address-by-address address])] [rn/view {:style style/existing-saved-address-container} [quo/text {:size :paragraph-1 diff --git a/src/status_im/contexts/settings/wallet/saved_addresses/save_address/view.cljs b/src/status_im/contexts/settings/wallet/saved_addresses/save_address/view.cljs index 8271573606..57372f7386 100644 --- a/src/status_im/contexts/settings/wallet/saved_addresses/save_address/view.cljs +++ b/src/status_im/contexts/settings/wallet/saved_addresses/save_address/view.cljs @@ -93,20 +93,19 @@ :subtitle-type :default :label :none :blur? true - :icon-right? (not ens?) - :right-icon :i/advanced + :right-icon (when-not ens? :i/advanced) :card? true :title (i18n/label :t/address) :subtitle ens :custom-subtitle address-text - :on-press open-network-preferences + :on-press (when-not ens? open-network-preferences) :container-style style/data-item} ens? (dissoc :custom-subtitle)) [ens ens? open-network-preferences address-text])] [quo/overlay {:type :shell} [floating-button-page/view - {:footer-container-padding 0 + {:footer-container-padding (if edit? (+ (safe-area/get-bottom) 12) 0) :header [quo/page-nav {:type :no-title :background :blur @@ -133,7 +132,7 @@ :container-style style/avatar}] [quo/title-input {:blur? true - :auto-focus true + :auto-focus (not edit?) :max-length 24 :size :heading-1 :placeholder placeholder diff --git a/src/status_im/contexts/settings/wallet/saved_addresses/view.cljs b/src/status_im/contexts/settings/wallet/saved_addresses/view.cljs index f55466e81b..48bfe88aca 100644 --- a/src/status_im/contexts/settings/wallet/saved_addresses/view.cljs +++ b/src/status_im/contexts/settings/wallet/saved_addresses/view.cljs @@ -73,27 +73,34 @@ (defn- filtered-list [{:keys [search-text]}] - [rn/flat-list - {:key-fn :address - :data (rf/sub [:wallet/filtered-saved-addresses search-text]) - :render-fn saved-address - :shows-vertical-scroll-indicator false - :keyboard-should-persist-taps :always - :content-container-style {:flex-grow 1} - :empty-component [empty-result]}]) + (let [search-result (rf/sub [:wallet/filtered-saved-addresses search-text])] + (if (empty? search-result) + [empty-result] + [rn/flat-list + {:key-fn :address + :data search-result + :render-fn saved-address + :shows-vertical-scroll-indicator false + :keyboard-should-persist-taps :always + :content-container-style {:flex-grow 1} + :bounces false + :over-scroll-mode :never}]))) (defn- unfiltered-list [{:keys [grouped-saved-addresses]}] - [rn/section-list - {:key-fn :title - :shows-vertical-scroll-indicator false - :sticky-section-headers-enabled false - :keyboard-should-persist-taps :always - :render-section-header-fn header - :sections grouped-saved-addresses - :render-fn saved-address - :content-container-style {:flex-grow 1} - :empty-component [empty-list]}]) + (if (empty? grouped-saved-addresses) + [empty-list] + [rn/section-list + {:key-fn :title + :shows-vertical-scroll-indicator false + :sticky-section-headers-enabled false + :keyboard-should-persist-taps :always + :render-section-header-fn header + :sections grouped-saved-addresses + :render-fn saved-address + :bounces false + :over-scroll-mode :never + :content-container-style {:flex-grow 1}}])) (defn- navigate-back [] diff --git a/src/status_im/contexts/settings/wallet/wallet_options/view.cljs b/src/status_im/contexts/settings/wallet/wallet_options/view.cljs index 58153e98c5..b1b4f9daa0 100644 --- a/src/status_im/contexts/settings/wallet/wallet_options/view.cljs +++ b/src/status_im/contexts/settings/wallet/wallet_options/view.cljs @@ -2,7 +2,6 @@ (:require [quo.core :as quo] [react-native.safe-area :as safe-area] [status-im.contexts.settings.wallet.wallet-options.style :as style] - [status-im.feature-flags :as ff] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -20,11 +19,10 @@ :blur? true :on-press open-keypairs-and-accounts-settings-modal :action :arrow} - (when (ff/enabled? ::ff/settings.saved-addresses) - {:title (i18n/label :t/saved-addresses) - :blur? true - :on-press open-saved-addresses-settings-modal - :action :arrow})]) + {:title (i18n/label :t/saved-addresses) + :blur? true + :on-press open-saved-addresses-settings-modal + :action :arrow}]) (defn basic-settings [] diff --git a/src/status_im/contexts/wallet/common/scan_account/view.cljs b/src/status_im/contexts/wallet/common/scan_account/view.cljs index 6a35b53b80..966c6d0ade 100644 --- a/src/status_im/contexts/wallet/common/scan_account/view.cljs +++ b/src/status_im/contexts/wallet/common/scan_account/view.cljs @@ -28,7 +28,7 @@ (let [{:keys [on-result]} (rf/sub [:get-screen-params])] [scan-qr-code/view {:title (i18n/label :t/scan-qr) - :subtitle (i18n/label :t/scan-an-account-qr-code) + :subtitle (i18n/label :t/scan-an-address-qr-code) :error-message (i18n/label :t/oops-this-qr-does-not-contain-an-address) :validate-fn #(contains-supported-address? %) :on-success-scan (fn [result] diff --git a/src/status_im/contexts/wallet/common/utils.cljs b/src/status_im/contexts/wallet/common/utils.cljs index e26e606eae..b0f7f6ec7a 100644 --- a/src/status_im/contexts/wallet/common/utils.cljs +++ b/src/status_im/contexts/wallet/common/utils.cljs @@ -220,7 +220,7 @@ (defn make-network-item "This function generates props for quo/category component item" - [{:keys [network-name color on-change networks state label-props type]}] + [{:keys [network-name color on-change networks state label-props type blur?]}] (cond-> {:title (string/capitalize (name network-name)) :image :icon-avatar :image-props {:icon (resources/get-network network-name) @@ -230,6 +230,7 @@ (if (= :default state) :filled-checkbox :checkbox)) + :blur? blur? :customization-color color :checked? (contains? networks network-name) :on-change on-change}} diff --git a/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs b/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs index e47c964c13..f460067123 100644 --- a/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs +++ b/src/status_im/contexts/wallet/sheets/network_preferences/view.cljs @@ -90,10 +90,7 @@ :address address :blur? blur? :format :long}]) - :container-style (merge style/data-item - {:background-color (colors/theme-colors colors/neutral-2_5 - colors/neutral-90 - theme)})}]) + :container-style style/data-item}]) [quo/category {:list-type :settings :blur? blur? @@ -106,6 +103,7 @@ :normal-checkbox? receiver? :networks (get-current-preferences-names) :type :checkbox + :blur? blur? :on-change (fn [] (toggle-network (:network-name network)) @@ -137,6 +135,7 @@ :normal-checkbox? receiver? :networks (get-current-preferences-names) :type :checkbox + :blur? blur? :on-change (fn [] (toggle-network (:network-name network)) diff --git a/src/status_im/feature_flags.cljs b/src/status_im/feature_flags.cljs index cd83ce2398..f748d17e3b 100644 --- a/src/status_im/feature_flags.cljs +++ b/src/status_im/feature_flags.cljs @@ -11,8 +11,6 @@ (def ^:private initial-flags {::community.edit-account-selection (enabled-in-env? :FLAG_EDIT_ACCOUNT_SELECTION_ENABLED) - ::settings.saved-addresses (enabled-in-env? - :FLAG_WALLET_SETTINGS_SAVED_ADDRESSES_ENABLED) ::settings.import-all-keypairs (enabled-in-env? :FLAG_WALLET_SETTINGS_IMPORT_ALL_KEYPAIRS) ::shell.jump-to (enabled-in-env? :ENABLE_JUMP_TO) diff --git a/src/status_im/subs/wallet/saved_addresses.cljs b/src/status_im/subs/wallet/saved_addresses.cljs index b4e977557a..8490adcc99 100644 --- a/src/status_im/subs/wallet/saved_addresses.cljs +++ b/src/status_im/subs/wallet/saved_addresses.cljs @@ -54,7 +54,7 @@ :wallet/saved-address-by-address :<- [:wallet/saved-addresses-by-network-mode] (fn [saved-addresses [_ address]] - (get saved-addresses address))) + (get saved-addresses (string/lower-case address)))) (rf/reg-sub :wallet/filtered-saved-addresses @@ -65,7 +65,7 @@ (sort-by :name) (filter (fn [{:keys [name address ens chain-short-names]}] - (let [lowercase-query (string/lower-case query)] + (let [lowercase-query (string/lower-case (string/trim query))] (or (string/includes? (string/lower-case name) lowercase-query) (string/includes? address lowercase-query) diff --git a/translations/en.json b/translations/en.json index 78a9859a5b..c3702cf6ac 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2475,7 +2475,7 @@ "make-one-it-is-easy-we-promise": "Make one, it’s easy, we promise!", "saved-addresses": "Saved addresses", "no-saved-addresses": "No saved addresses", - "you-like-to-type-43-characters": "You like to type 43 characters?", + "you-like-to-type-43-characters": "Do you like to type 43 characters?", "no-other-accounts": "No other accounts", "here-is-a-cat-in-a-box-instead": "Here’s a cat in a box instead", "accounts-count": "{{count}} accounts", @@ -2506,6 +2506,7 @@ "select-another-account": "Select another account", "oops-this-qr-does-not-contain-an-address": "Oops! This QR does not contain an address", "scan-an-account-qr-code": "Scan an account QR code", + "scan-an-address-qr-code": "Scan an address QR code", "buy-assets": "Buy assets", "one-time": "One time", "recurrent": "Recurrent",