feat!: add saved addresses to wallet settings (#20475)

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]

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

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 (case avatar-type
-              style/avatar-container-rounded
+              :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)]])
 

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

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
+        (rf/sub [:wallet/saved-address-by-address address])]
-                 address])]
     [rn/view {:style style/existing-saved-address-container}
      [quo/text
       {:size   :paragraph-1

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      (when-not ens? :i/advanced)
-                                   :right-icon      :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

src/status_im/contexts/settings/wallet/saved_addresses/view.cljs

@@ -73,27 +73,34 @@
 
 (defn- filtered-list
   [{:keys [search-text]}]
-  [rn/flat-list
+  (let [search-result (rf/sub [:wallet/filtered-saved-addresses search-text])]
-   {:key-fn                          :address
+    (if (empty? search-result)
-    :data                            (rf/sub [:wallet/filtered-saved-addresses search-text])
+      [empty-result]
-    :render-fn                       saved-address
+      [rn/flat-list
-    :shows-vertical-scroll-indicator false
+       {:key-fn                          :address
-    :keyboard-should-persist-taps    :always
+        :data                            search-result
-    :content-container-style         {:flex-grow 1}
+        :render-fn                       saved-address
-    :empty-component                 [empty-result]}])
+        :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
+  (if (empty? grouped-saved-addresses)
-   {:key-fn                          :title
+    [empty-list]
-    :shows-vertical-scroll-indicator false
+    [rn/section-list
-    :sticky-section-headers-enabled  false
+     {:key-fn                          :title
-    :keyboard-should-persist-taps    :always
+      :shows-vertical-scroll-indicator false
-    :render-section-header-fn        header
+      :sticky-section-headers-enabled  false
-    :sections                        grouped-saved-addresses
+      :keyboard-should-persist-taps    :always
-    :render-fn                       saved-address
+      :render-section-header-fn        header
-    :content-container-style         {:flex-grow 1}
+      :sections                        grouped-saved-addresses
-    :empty-component                 [empty-list]}])
+      :render-fn                       saved-address
+      :bounces                         false
+      :over-scroll-mode                :never
+      :content-container-style         {:flex-grow 1}}]))
 
 (defn- navigate-back
   []

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)
-     {:title    (i18n/label :t/saved-addresses)
+    :blur?    true
-      :blur?    true
+    :on-press open-saved-addresses-settings-modal
-      :on-press open-saved-addresses-settings-modal
+    :action   :arrow}])
-      :action   :arrow})])
 
 (defn basic-settings
   []

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]

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

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
+             :container-style style/data-item}])
-                                     {:background-color (colors/theme-colors colors/neutral-2_5
-                                                                             colors/neutral-90
-                                                                             theme)})}])
          [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))

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)

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)

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",