[#22318] fix: re-enabled watched accounts with limited number (#22390)

* [#22318] fix: re-enabled watched accounts with limited number

* [#22397] fix: display remove account button for watch only account

* [#22318] feat: display toast message when reached limit

* [#22318] fix: set max account to 20

* [#22390] fix: hide activity tab and filter out watch only account

* [#22411] fix: network drawer operable account balance

Author: mohsen-ghafouri

src/status_im/constants.cljs

@@ -489,3 +489,5 @@
 (def ^:const status-mobile-url "https://github.com/status-im/status-mobile")
 
 (def ^:const wc-connection-string-identifier "wc")
+
+(def ^:const max-allowed-watched-accounts 20)

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

@@ -15,10 +15,12 @@
 
 ;; NOTE: If the id of the tabs are changed, please check 'wallet/select-account-tab' event as
 ;; a activity event depends on it
-(def tabs-data
+(defn tabs-data
+  [watch-only?]
   [{:id :assets :label (i18n/label :t/assets) :accessibility-label :assets-tab}
    {:id :collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}
-   {:id :activity :label (i18n/label :t/activity) :accessibility-label :activity-tab}
+   (when-not watch-only?
+     {:id :activity :label (i18n/label :t/activity) :accessibility-label :activity-tab})
    {:id :about :label (i18n/label :t/about) :accessibility-label :about}])
 
 (defn- change-tab [id] (rf/dispatch [:wallet/select-account-tab id]))
@@ -69,7 +71,7 @@
       {:style            style/tabs
        :size             32
        :active-tab-id    selected-tab
-       :data             tabs-data
+       :data             (tabs-data watch-only?)
        :on-change        change-tab
        :scrollable?      true
        :scroll-on-press? true}]

src/status_im/contexts/wallet/data_store.cljs

@@ -25,10 +25,11 @@
 
 (defn add-keys-to-account
   [account]
-  (-> account
-      (assoc :operable? (not= (:operable account) :no))
-      (assoc :watch-only? (= (:type account) :watch))
-      (assoc :default-account? (:wallet account))))
+  (let [watch-only? (= (:type account) :watch)]
+    (-> account
+        (assoc :operable? (and (not= (:operable account) :no) (not watch-only?)))
+        (assoc :watch-only? watch-only?)
+        (assoc :default-account? (:wallet account)))))
 
 (defn- sanitize-emoji
   "As Desktop uses Twemoji, the emoji received can be an img tag

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

@@ -6,6 +6,7 @@
     [react-native.core :as rn]
     [status-im.common.home.top-nav.view :as common.top-nav]
     [status-im.common.refreshable-flat-list.view :as refreshable-flat-list]
+    [status-im.constants :as constants]
     [status-im.contexts.wallet.home.style :as style]
     [status-im.contexts.wallet.home.tabs.view :as tabs]
     [status-im.contexts.wallet.sheets.buy-token.view :as buy-token]
@@ -16,19 +17,33 @@
 
 (defn new-account
   []
-  [quo/action-drawer
-   [[{:icon                :i/add
-      :accessibility-label :start-a-new-chat
-      :label               (i18n/label :t/add-account)
-      :sub-label           (i18n/label :t/add-account-description)
-      :on-press            #(rf/dispatch [:navigate-to :screen/wallet.create-account])}
-     (when (ff/enabled? ::ff/wallet.add-watched-address)
+  (let [watched-accounts             (rf/sub [:wallet/watch-only-accounts])
+        reached-max-watched-account? (>= (count watched-accounts)
+                                         constants/max-allowed-watched-accounts)
+        on-add-address-press         (rn/use-callback
+                                      (fn []
+                                        (if reached-max-watched-account?
+                                          (rf/dispatch [:toasts/upsert
+                                                        {:type :negative
+                                                         :theme :dark
+                                                         :text
+                                                         (i18n/label
+                                                          :t/saved-addresses-limit-reached-toast)}])
+                                          (rf/dispatch [:navigate-to
+                                                        :screen/wallet.add-address-to-watch])))
+                                      [reached-max-watched-account?])]
+    [quo/action-drawer
+     [[{:icon                :i/add
+        :accessibility-label :start-a-new-chat
+        :label               (i18n/label :t/add-account)
+        :sub-label           (i18n/label :t/add-account-description)
+        :on-press            #(rf/dispatch [:navigate-to :screen/wallet.create-account])}
        {:icon                :i/reveal
         :accessibility-label :add-a-contact
         :label               (i18n/label :t/add-address-to-watch)
         :sub-label           (i18n/label :t/add-address-to-watch-description)
-        :on-press            #(rf/dispatch [:navigate-to :screen/wallet.add-address-to-watch])
-        :add-divider?        true})]]])
+        :on-press            on-add-address-press
+        :add-divider?        true}]]]))
 
 (defn- new-account-card-data
   []

src/status_im/contexts/wallet/sheets/account_options/view.cljs

@@ -34,7 +34,9 @@
   (let [{:keys [name color emoji address watch-only?
                 default-account?]} (rf/sub [:wallet/current-viewing-account])
         {:keys [derived-from]}     (rf/sub [:wallet/current-viewing-account-keypair])
-        share-title                (i18n/label :t/share-address-title {:address name})]
+        share-title                (i18n/label :t/share-address-title {:address name})
+        deletable?                 (or watch-only?
+                                       (not (or default-account? (string/blank? derived-from))))]
     [rn/view
      {:on-layout #(reset! options-height (oops/oget % "nativeEvent.layout.height"))
       :style     (when show-account-selector? style/options-container)}
@@ -85,7 +87,7 @@
                                  #(rf/dispatch [:wallet/share-account
                                                 {:title share-title :content address}])
                                  600))}
-        (when-not (or default-account? (string/blank? derived-from))
+        (when deletable?
           {:add-divider?        (not show-account-selector?)
            :icon                :i/delete
            :accessibility-label :remove-account

src/status_im/feature_flags.cljs

@@ -20,7 +20,6 @@
    ;; works and we may re-enable it by default.
    ::profile-pictures-visibility        (enabled-in-env? :FLAG_PROFILE_PICTURES_VISIBILITY_ENABLED)
    ::settings.import-all-keypairs       (enabled-in-env? :FLAG_WALLET_SETTINGS_IMPORT_ALL_KEYPAIRS)
-   ::wallet.add-watched-address         (enabled-in-env? :FLAG_ADD_WATCHED_ADDRESS)
    ::wallet.advanced-sending            (enabled-in-env? :FLAG_ADVANCED_SENDING)
    ::wallet.assets-modal-hide           (enabled-in-env? :FLAG_ASSETS_MODAL_HIDE)
    ::wallet.assets-modal-manage-tokens  (enabled-in-env? :FLAG_ASSETS_MODAL_MANAGE_TOKENS)

src/status_im/subs/wallet/wallet.cljs

@@ -580,7 +580,7 @@
 
 (rf/reg-sub
  :wallet/token-by-symbol-from-first-available-account-with-balance
- :<- [:wallet/accounts]
+ :<- [:wallet/operable-accounts]
  :<- [:wallet/current-viewing-account-or-default]
  :<- [:wallet/network-details]
  (fn [[accounts {:keys [tokens]} networks] [_ token-symbol chain-ids]]

translations/en.json

@@ -2950,6 +2950,7 @@
   "watch-only": "Watch-only",
   "watched-account-removed": "Watched address has been removed",
   "watched-address": "Watched address",
+  "watched-addresses-limit-reached-toast": "Limit of 20 watched addresses reached: remove a watched address to add a new one.",
   "ways-to-buy": "Ways to buy",
   "ways-to-buy-assets": "Ways to buy assets",
   "wc-brand-guide": "Guidance on using branding such as trademarks and logos",