chore(wallet): update default placeholder name for account and watched address when adding it #18416 (#18683)

src/status_im/contexts/wallet/add_address_to_watch/confirm_address/component_spec.cljs

@@ -1,20 +1,14 @@
 (ns status-im.contexts.wallet.add-address-to-watch.confirm-address.component-spec
   (:require
     [status-im.contexts.wallet.add-address-to-watch.confirm-address.view :as confirm-address]
-    [test-helpers.component :as h]
+    [test-helpers.component :as h]))
-    [utils.re-frame :as rf]))
 
 (h/describe "Add Watch Only Account Page"
   (h/setup-restorable-re-frame)
 
   (h/test "Create Account button is disabled while no account name exists"
-    (let [callback (h/mock-fn)]
+    (h/setup-subs {:wallet/watch-only-accounts []
-      (with-redefs [rf/dispatch #(callback)]
-        (h/setup-subs {:profile/wallet-accounts []
                    :get-screen-params          {:address "0xmock-address"}})
-        (h/render [confirm-address/view {}])
+    (h/render [confirm-address/view])
     (h/is-truthy (h/get-by-text "0xmock-address"))
-        (h/was-not-called callback)
+    (h/is-disabled (h/get-by-label-text :confirm-button-label))))
-        (h/fire-event :change-text (h/get-by-label-text :profile-title-input) "NAME")
-        (h/fire-event :press (h/get-by-translation-text :t/add-watched-address))
-        (h/was-called callback)))))

src/status_im/contexts/wallet/add_address_to_watch/confirm_address/view.cljs

@@ -15,9 +15,10 @@
 (defn view
   []
   (let [{:keys [address]}  (rf/sub [:get-screen-params])
-        number-of-accounts (count (rf/sub [:profile/wallet-accounts]))
+        number-of-accounts (count (rf/sub [:wallet/watch-only-accounts]))
-        account-name       (reagent/atom (i18n/label :t/default-account-name
+        account-name       (reagent/atom "")
-                                                     {:number (inc number-of-accounts)}))
+        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 %)
@@ -31,6 +32,7 @@
                                 #(js/alert
                                   "Get info (to be
                                     implemented)")}]
+         :placeholder         placeholder
          :account-name        @account-name
          :account-emoji       @account-emoji
          :account-color       @account-color
@@ -42,6 +44,7 @@
          :bottom-action-label :t/add-watched-address
          :bottom-action-props {:customization-color @account-color
                                :disabled?           (string/blank? @account-name)
+                               :accessibility-label :confirm-button-label
                                :on-press            #(rf/dispatch [:wallet/add-account
                                                                    {:sha3-pwd     nil
                                                                     :type         :watch

src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs

@@ -8,7 +8,8 @@
             [utils.re-frame :as rf]))
 
 (defn view
-  [{:keys [margin-top? page-nav-right-side account-name account-color account-emoji on-change-name
+  [{:keys [margin-top? page-nav-right-side placeholder account-name account-color account-emoji
+           on-change-name
            on-change-color
            on-change-emoji on-focus on-blur section-label bottom-action?
            bottom-action-label bottom-action-props
@@ -45,10 +46,11 @@
           :container-style style/reaction-button-container}
          :i/reaction]]
        [quo/title-input
-        {:placeholder     (i18n/label :t/account-name-input-placeholder)
+        {:placeholder     placeholder
          :max-length      constants/wallet-account-name-max-length
          :blur?           true
          :default-value   account-name
+         :auto-focus      true
          :on-change-text  on-change-name
          :container-style style/title-input-container
          :on-focus        on-focus

src/status_im/contexts/wallet/create_account/view.cljs

@@ -57,9 +57,10 @@
         bottom                (safe-area/get-bottom)
         account-color         (reagent/atom (rand-nth colors/account-colors))
         emoji                 (reagent/atom (emoji-picker.utils/random-emoji))
-        number-of-accounts    (count (rf/sub [:wallet/accounts]))
+        number-of-accounts    (count (rf/sub [:wallet/accounts-without-watched-accounts]))
-        account-name          (reagent/atom (i18n/label :t/default-account-name
+        account-name          (reagent/atom "")
-                                                        {:number (inc number-of-accounts)}))
+        placeholder           (i18n/label :t/default-account-placeholder
+                                          {:number (inc number-of-accounts)})
         derivation-path       (reagent/atom (utils/get-derivation-path number-of-accounts))
         {:keys [public-key]}  (rf/sub [:profile/profile])
         on-change-text        #(reset! account-name %)
@@ -96,11 +97,12 @@
           :container-style style/reaction-button-container} :i/reaction]]
        [quo/title-input
         {:customization-color @account-color
-         :placeholder         "Type something here"
+         :placeholder         placeholder
          :on-change-text      on-change-text
          :max-length          constants/wallet-account-name-max-length
          :blur?               true
          :disabled?           false
+         :auto-focus          true
          :default-value       @account-name
          :container-style     style/title-input-container}]
        [quo/divider-line]
@@ -133,6 +135,9 @@
                                                :path         @derivation-path
                                                :account-name @account-name}]))
          :auth-button-label   (i18n/label :t/confirm)
+         ;; TODO (@rende11) Add this property when sliding button issue will fixed
+         ;; https://github.com/status-im/status-mobile/pull/18683#issuecomment-1941564785
+         ;; :disabled?           (empty? @account-name)
          :container-style     (style/slide-button-container bottom)}]])))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im/subs/wallet/wallet.cljs

@@ -100,6 +100,12 @@
         (map #(assoc-network-preferences-names network-details % test-networks-enabled?))
         (sort-by :position))))
 
+(rf/reg-sub
+ :wallet/watch-only-accounts
+ :<- [:wallet/accounts]
+ (fn [accounts]
+   (filter :watch-only? accounts)))
+
 (rf/reg-sub
  :wallet/addresses
  :<- [:wallet]

src/status_im/subs/wallet/wallet_test.cljs

@@ -484,3 +484,16 @@
              (assoc :customization-color :magenta)
              (assoc :network-preferences-names #{}))]
         (rf/sub [sub-name])))))
+
+(h/deftest-sub :wallet/watch-only-accounts
+  [sub-name]
+  (testing "returns only active (not watch-only?) accounts"
+    (swap! rf-db/app-db
+      #(-> %
+           (assoc-in [:wallet :accounts] accounts)
+           (assoc-in [:wallet :networks] network-data)))
+    (is
+     (= [(-> accounts
+             (get "0x3")
+             (assoc :network-preferences-names #{}))]
+        (rf/sub [sub-name])))))

translations/en.json

@@ -444,7 +444,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-name": "Account {{number}}",
+    "default-account-placeholder": "Account {{number}}",
+    "default-watched-address-placeholder": "Watched address {{number}}",
     "delete": "Delete",
     "delete-and-leave-group": "Delete and leave group",
     "delete-bootnode": "Delete bootnode",
@@ -2403,7 +2404,6 @@
     "moonpay-description": "The new standard for fiat to crypto, supports Apple Pay.",
     "latamex-description": "Easily buy crypto in Argentina, Mexico and Brazil.",
     "account-info": "Account info",
-    "account-name-input-placeholder": "Account name",
     "network-preferences": "Network preferences",
     "network-preferences-desc-1": "Select which networks this address is happy to receive funds on",
     "network-preferences-desc-2": "Select which networks to receive funds on",