Refactor add address to watch component and make it generic and use it in add saved addresses screen behind a FF

src/quo/components/avatars/account_avatar/component_spec.cljs

@@ -13,7 +13,7 @@
 
   (h/test "with emoji"
     (let [emoji "💸"]
-      (h/render [account-avatar/view {:emoji emoji :size 80}])
+      (h/render [account-avatar/view {:emoji emoji :size 80 :emoji? :true}])
       (h/is-truthy (h/query-by-label-text :account-avatar))
       (h/is-truthy (h/query-by-label-text :account-emoji))
       (h/is-truthy (h/query-by-text emoji))))
@@ -22,7 +22,8 @@
     (let [opts {:emoji               "🏝️"
                 :size                80
                 :type                :default
-                :customization-color :blue}]
+                :customization-color :blue
+                :emoji?              true}]
       (h/render [account-avatar/view opts])
       (h/is-truthy (h/query-by-label-text :account-avatar))
       (h/has-style (h/get-by-label-text :account-avatar)
@@ -39,7 +40,8 @@
     (let [opts {:emoji               "💵"
                 :size                48
                 :type                :watch-only
-                :customization-color :purple}]
+                :customization-color :purple
+                :emoji?              true}]
       (h/render [account-avatar/view opts])
       (h/is-truthy (h/query-by-label-text :account-avatar))
       (h/has-style
@@ -58,7 +60,8 @@
     (let [opts {:emoji               "🏝️"
                 :size                28
                 :type                :default
-                :customization-color :turquoise}]
+                :customization-color :turquoise
+                :emoji?              true}]
       (h/render [account-avatar/view opts])
       (h/is-truthy (h/query-by-label-text :account-avatar))
       (h/has-style (h/get-by-label-text :account-avatar)
@@ -75,7 +78,8 @@
     (let [opts {:emoji               "🎉"
                 :size                16
                 :type                :watch-only
-                :customization-color :copper}]
+                :customization-color :copper
+                :emoji?              true}]
       (h/render [account-avatar/view opts])
       (h/is-truthy (h/query-by-label-text :account-avatar))
       (h/has-style

src/quo/components/avatars/account_avatar/style.cljs

@@ -56,23 +56,35 @@
 
 
 (defn root-container
-  [{:keys [type size customization-color]
+  [{:keys [type size customization-color emoji?]
     :or   {size                default-size
            customization-color :blue}}
    theme]
   (let [watch-only? (= type :watch-only)
         width       (cond-> size
                       (keyword? size) (container-size size))]
-    (cond-> {:width            width
-             :height           width
-             :background-color (colors/resolve-color customization-color theme)
-             :border-radius    (get-border-radius size)
-             :border-color     (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
-             :padding          (get-padding size)
-             :align-items      :center
-             :justify-content  :center}
+    (if emoji?
+      (cond-> {:width            width
+               :height           width
+               :background-color (colors/resolve-color customization-color theme)
+               :border-radius    (get-border-radius size)
+               :border-color     (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+               :padding          (get-padding size)
+               :align-items      :center
+               :justify-content  :center}
 
-      watch-only?
-      (assoc :border-width     (get-border-width size)
-             :background-color (colors/resolve-color customization-color theme 10)))))
+        watch-only?
+        (assoc :border-width     (get-border-width size)
+               :background-color (colors/resolve-color customization-color theme 10)))
+      {:width            width
+       :height           width
+       :border-radius    width
+       :align-items      :center
+       :justify-content  :center
+       :color            (colors/resolve-color customization-color theme 60)
+       :background-color (colors/resolve-color customization-color theme 20)})))
+
+(defn account-name
+  [{:keys [customization-color theme]}]
+  {:color (colors/resolve-color customization-color theme 60)})
 

src/quo/components/avatars/account_avatar/view.cljs

@@ -2,6 +2,7 @@
   (:require
     [clojure.string :as string]
     [quo.components.avatars.account-avatar.style :as style]
+    [quo.components.markdown.text :as text]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]))
 
@@ -17,18 +18,26 @@
     :customization-color - keyword or hexstring -> :blue/:army/... or #ABCEDF
 
     :theme - keyword -> :light/:dark"
-  [{:keys [size emoji]
-    :or   {size  style/default-size
-           emoji "🍑"}
+  [{:keys [size emoji account-name-initials emoji?]
+    :or   {size   style/default-size
+           emoji  "🍑"
+           emoji? true}
     :as   opts}]
   (let [theme      (quo.theme/use-theme)
         emoji-size (style/get-emoji-size size)]
     [rn/view
      {:accessible          true
       :accessibility-label :account-avatar
       :style               (style/root-container opts theme)}
-     [rn/text
-      {:accessibility-label      :account-emoji
-       :adjusts-font-size-to-fit true
-       :style                    {:font-size emoji-size}}
-      (when emoji (string/trim emoji))]]))
+     (if emoji?
+       [rn/text
+        {:accessibility-label      :account-emoji
+         :adjusts-font-size-to-fit true
+         :style                    {:font-size emoji-size}}
+        (when emoji (string/trim emoji))]
+       [text/text
+        {:accessibility-label :account-name
+         :size                :heading-1
+         :weight              :medium
+         :style               (style/account-name opts)}
+        account-name-initials])]))

src/quo/components/wallet/address_text/view.cljs

@@ -34,8 +34,6 @@
                                                (map :short-name networks))
         address-text                         [text/text
                                               {:size   size
-                                               ;; TODO: monospace font
-                                               ;; https://github.com/status-im/status-mobile/issues/17009
                                                :weight (or weight :monospace)
                                                :style  (style/address-text format blur? theme)}
                                               (if (= format :short)

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

@@ -5,6 +5,7 @@
             [react-native.safe-area :as safe-area]
             [status-im.common.resources :as resources]
             [status-im.contexts.settings.wallet.saved-addresses.style :as style]
+            [status-im.feature-flags :as ff]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
@@ -17,12 +18,27 @@
       :image           (resources/get-themed-image :sweating-man theme)
       :container-style style/empty-container-style}]))
 
+(defn on-press-add-saved-address
+  []
+  (when (ff/enabled? ::ff/wallet.enable-saving-addresses)
+    (rf/dispatch [:wallet/add-address-to-save
+                  {:title                :t/add-address
+                   :description          :t/save-address-description
+                   :input-title          :t/address-or-ens-name
+                   :accessibility-label  :add-address-to-save
+                   :screen               :screen/wallet.add-address-to-save
+                   :confirm-screen       :screen/wallet.confirm-address-to-save
+                   :confirm-screen-props {:button-label :t/save-address
+                                          :address-type :t/address
+                                          :placeholder  :t/address-name}}])))
+
 (defn view
   []
   (let [inset-top           (safe-area/get-top)
         customization-color (rf/sub [:profile/customization-color])
-        saved-addresses     []
+        saved-addresses?    (rf/sub [:wallet/saved-addresses?])
         navigate-back       (rn/use-callback #(rf/dispatch [:navigate-back]))]
+    (rn/use-mount #(rf/dispatch [:wallet/get-saved-addresses]))
     [quo/overlay
      {:type            :shell
       :container-style (style/page-wrapper inset-top)}
@@ -36,7 +52,8 @@
        {:title               (i18n/label :t/saved-addresses)
         :accessibility-label :saved-addresses-header
         :right               :action
+        :on-press            on-press-add-saved-address
         :customization-color customization-color
         :icon                :i/add}]]
-     (when-not (seq saved-addresses)
+     (when-not saved-addresses?
        [empty-state])]))

src/status_im/contexts/wallet/add_account/add_address_to_save/style.cljs

@@ -0,0 +1,7 @@
+(ns status-im.contexts.wallet.add-account.add-address-to-save.style)
+
+(def header-container {:padding-bottom 8})
+
+(def info-message
+  {:margin-top  8
+   :margin-left 20})

src/status_im/contexts/wallet/add_account/add_address_to_save/view.cljs

@@ -0,0 +1,82 @@
+(ns status-im.contexts.wallet.add-account.add-address-to-save.view
+  (:require
+    [clojure.string :as string]
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im.common.floating-button-page.view :as floating-button-page]
+    [status-im.contexts.wallet.add-account.add-address-to-save.style :as style]
+    [status-im.contexts.wallet.common.activity-indicator.view :as activity-indicator]
+    [status-im.contexts.wallet.common.address-input.view :as address-input]
+    [status-im.contexts.wallet.utils :as wallet.utils]
+    [status-im.subs.wallet.add-account.address-to-watch]
+    [utils.ens.core :as utils.ens]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn- on-press-confirm-add-address-to-save
+  [input-value]
+  (rf/dispatch
+   [:wallet/confirm-add-address-to-save
+    {:address input-value
+     :ens?    (utils.ens/is-valid-eth-name?
+               input-value)}]))
+
+(defn view
+  []
+  (let [addresses (rf/sub [:wallet/lowercased-saved-addresses])
+        {:keys [title description input-title accessibility-label]}
+        (rf/sub [:wallet/currently-added-address])
+        validate #(wallet.utils/validate-fn % addresses)
+        customization-color (rf/sub [:profile/customization-color])]
+    (wallet.utils/clear-activity-and-scanned-address)
+    (fn []
+      (let [activity-state                          (rf/sub [:wallet/watch-address-activity-state])
+            validated-address                       (rf/sub [:wallet/watch-address-validated-address])
+            [input-value set-input-value]           (rn/use-state nil)
+            [validation-msg set-validation-message] (rn/use-state nil)
+            clear-input                             (fn []
+                                                      (set-input-value nil)
+                                                      (set-validation-message nil)
+                                                      (wallet.utils/clear-activity-and-scanned-address))]
+        [rn/view
+         {:style {:flex 1}}
+         [floating-button-page/view
+          {:header [quo/page-nav
+                    {:type      :no-title
+                     :icon-name :i/close
+                     :on-press  wallet.utils/on-press-close}]
+           :footer [quo/button
+                    {:customization-color customization-color
+                     :disabled?           (or (string/blank? input-value)
+                                              (some? (validate input-value))
+                                              (= activity-state :invalid-ens)
+                                              (= activity-state :scanning)
+                                              (not validated-address))
+                     :on-press            (fn []
+                                            (on-press-confirm-add-address-to-save input-value)
+                                            (clear-input))
+                     :container-style     {:z-index 2}}
+                    (i18n/label :t/continue)]}
+          [quo/page-top
+           {:container-style  style/header-container
+            :title            (i18n/label title)
+            :description      :text
+            :description-text (i18n/label description)}]
+          [address-input/view
+           {:input-value            input-value
+            :validate               validate
+            :validation-msg         validation-msg
+            :clear-input            clear-input
+            :set-validation-message set-validation-message
+            :set-input-value        set-input-value
+            :input-title            (i18n/label input-title)
+            :accessibility-label    accessibility-label}]
+          (if validation-msg
+            [quo/info-message
+             {:accessibility-label :error-message
+              :size                :default
+              :icon                :i/info
+              :type                :error
+              :style               style/info-message}
+             validation-msg]
+            [activity-indicator/view activity-state])]]))))

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

@@ -9,15 +9,27 @@
 
   (h/before-each
    (fn []
-     (h/setup-subs {:wallet/scanned-address              nil
-                    :wallet/addresses                    #{"0x12E838Ae1f769147b12956485dc56e57138f3AC8"
-                                                           "0x22E838Ae1f769147b12956485dc56e57138f3AC8"}
-                    :alert-banners/top-margin            0
-                    :wallet/watch-address-activity-state nil
-                    :profile/customization-color         :blue})))
+     (h/setup-subs
+      {:wallet/scanned-address              nil
+       :wallet/lowercased-addresses         #{"0x12e838ae1f769147b12956485dc56e57138f3ac8"
+                                              "0x22e838ae1f769147b12956485dc56e57138f3ac8"}
+       :alert-banners/top-margin            0
+       :wallet/watch-address-activity-state nil
+       :profile/customization-color         :blue
+       :wallet/currently-added-address      {:title :t/add-address-to-watch
+                                             :description :t/enter-eth
+                                             :input-title :t/eth-or-ens
+                                             :screen :screen/wallet.add-address-to-watch
+                                             :confirm-screen :screen/wallet.confirm-address
+                                             :ens? false
+                                             :accessibility-label :add-address-to-watch
+                                             :confirm-screen-props
+                                             {:button-label :t/add-watched-address
+                                              :address-type :t/watched-address
+                                              :placeholder  :t/default-watched-address-placeholder}}})))
 
   (h/test "validation messages show for already used addressed"
-    (h/render [add-address-to-watch/view])
+    (h/render-with-theme-provider [add-address-to-watch/view] :dark)
     (h/is-falsy (h/query-by-label-text :error-message))
     (h/fire-event :change-text
                   (h/get-by-label-text :add-address-to-watch)
@@ -27,7 +39,7 @@
                  (h/is-truthy (h/get-by-translation-text :t/address-already-in-use))))))
 
   (h/test "validation messages show for invalid address"
-    (h/render [add-address-to-watch/view])
+    (h/render-with-theme-provider [add-address-to-watch/view] :dark)
     (h/is-falsy (h/query-by-label-text :error-message))
     (h/fire-event :change-text (h/get-by-label-text :add-address-to-watch) "0x12E838Ae1f769147b")
     (-> (h/wait-for #(h/get-by-translation-text :t/invalid-address))