Wallet - Watched Account UI Updates (#18190)

This commit:

- Updates the account switcher in the "page-nav" component to use "account-avatar" instead of "dropdown"
- Updates the account avatar (on the top right corner of the account screen) to display the watched account variant correctly
- Updates the accounts list in the account switcher to display the correct background for the watched account with the eye icon

---------

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

src/quo/components/drawers/drawer_top/style.cljs

@@ -30,3 +30,10 @@
 
 (def keycard-icon
   {:margin-left 4})
+
+(def title-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(def title-icon
+  {:margin-left 4})

src/quo/components/drawers/drawer_top/view.cljs

@@ -17,13 +17,14 @@
 (def ^:private left-image-supported-types #{:account :keypair :default-keypair})
 
 (defn- left-image
-  [{:keys [type customization-color account-avatar-emoji icon-avatar profile-picture]}]
+  [{:keys [type customization-color account-avatar-emoji account-avatar-type icon-avatar
+           profile-picture]}]
   (case type
     :account         [account-avatar/view
                       {:customization-color customization-color
                        :size                32
                        :emoji               account-avatar-emoji
-                       :type                :default}]
+                       :type                (or account-avatar-type :default)}]
     :keypair         [icon-avatar/icon-avatar
                       {:icon    icon-avatar
                        :border? true
@@ -149,22 +150,31 @@
      button-icon]))
 
 (defn- left-title
-  [{:keys [type label title theme blur?]}]
+  [{:keys [type label title title-icon theme blur?]}]
   (case type
     :label [text/text
             {:weight :medium
              :size   :paragraph-2
              :style  (style/description theme blur?)}
             label]
+    [rn/view {:style style/title-container}
      [text/text
       {:size   :heading-2
        :weight :semi-bold}
-     title]))
+      title]
+     (when title-icon
+       [icons/icon title-icon
+        {:container-style style/title-icon
+         :size            20
+         :color           (if blur?
+                            colors/white-opa-40
+                            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])]))
 
 (defn- view-internal
-  [{:keys [title type theme description blur? community-name community-logo button-icon on-button-press
+  [{:keys [title title-icon type theme description blur? community-name community-logo button-icon
+           on-button-press
            on-button-long-press
-           button-disabled? account-avatar-emoji customization-color icon-avatar
+           button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar
            profile-picture keycard? networks label]}]
   [rn/view {:style style/container}
    (when (left-image-supported-types type)
@@ -173,6 +183,7 @@
        {:type                 type
         :customization-color  customization-color
         :account-avatar-emoji account-avatar-emoji
+        :account-avatar-type  account-avatar-type
         :icon-avatar          icon-avatar
         :profile-picture      profile-picture}]])
    [rn/view {:style style/body-container}
@@ -180,6 +191,7 @@
      {:type       type
       :label      label
       :title      title
+      :title-icon title-icon
       :theme      theme
       :blur?      blur?}]
     [subtitle

src/quo/components/list_items/account/component_spec.cljs

@@ -49,11 +49,11 @@
 
   (h/test "renders keycard icon if title-icon? is true"
     (h/render [account/view {:title-icon? true}])
-    (h/is-truthy (h/query-by-label-text :keycard-icon)))
+    (h/is-truthy (h/query-by-label-text :title-icon)))
 
   (h/test "doesn't render keycard icon if title-icon? is false"
     (h/render [account/view])
-    (h/is-falsy (h/query-by-label-text :keycard-icon)))
+    (h/is-falsy (h/query-by-label-text :title-icon)))
 
   (h/test "renders balance container but not arrow icon if type :balance-neutral"
     (h/render [account/view {:type :balance-neutral}])

src/quo/components/list_items/account/style.cljs

@@ -73,7 +73,7 @@
              colors/white-opa-40
              (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
 
-(def keycard-icon-container
+(def title-icon-container
   {:margin-left 4})
 
 (def token-tag-container

src/quo/components/list_items/account/view.cljs

@@ -11,8 +11,7 @@
     [reagent.core :as reagent]))
 
 (defn- account-view
-  [{:keys [account-props title-icon? blur? theme]
+  [{:keys [account-props title-icon blur? theme]}]
-    :or   {title-icon? false}}]
   [rn/view {:style style/left-container}
    [account-avatar/view (assoc account-props :size 32)]
    [rn/view {:style style/account-container}
@@ -22,15 +21,14 @@
       {:weight :semi-bold
        :size   :paragraph-1}
       (:name account-props)]
-     (when title-icon?
+     (when title-icon
-       [rn/view
+       [icon/icon title-icon
-        {:style               style/keycard-icon-container
-         :accessibility-label :keycard-icon}
-        [icon/icon :i/keycard
         {:size                20
          :color               (if blur?
                                 colors/white-opa-40
-                   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]
+                                (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
+         :container-style     style/title-icon-container
+         :accessibility-label :title-icon}])]
     [address-text/view
      {:networks (:networks account-props)
       :address  (:address account-props)

src/quo/components/navigation/page_nav/view.cljs

@@ -1,5 +1,6 @@
 (ns quo.components.navigation.page-nav.view
   (:require
+    [quo.components.avatars.account-avatar.view :as account-avatar]
     [quo.components.avatars.group-avatar.view :as group-avatar]
     [quo.components.buttons.button.properties :as button-properties]
     [quo.components.buttons.button.view :as button]
@@ -59,15 +60,13 @@
         (interpose [right-section-spacing])))
 
 (defn- account-switcher-content
-  [{:keys [customization-color on-press emoji state]}]
+  [{:keys [customization-color on-press emoji type]}]
-  [dropdown/view
+  [rn/pressable {:on-press on-press}
-   {:type                :customization
+   [account-avatar/view
-    :customization-color customization-color
+    {:emoji               emoji
-    :state               (or state :default)
+     :size                32
-    :size                :size-32
+     :type                (or type :default)
-    :on-press            on-press
+     :customization-color customization-color}]])
-    :emoji?              true}
-   emoji])
 
 (defn- right-content
   [{:keys [background content max-actions min-size? support-account-switcher? account-switcher

src/status_im2/contexts/quo_preview/list_items/account.cljs

@@ -44,7 +44,8 @@
              :blur-dark-only?       true}
             [quo/account-item
              (merge @state
-                    {:account-props {:name                (:title @state)
+                    {:title-icon    (when (:title-icon? @state) :i/keycard)
+                     :account-props {:name                (:title @state)
                                      :address             (:address @state)
                                      :emoji               (:emoji @state)
                                      :customization-color (:account-color @state)}})]])))

src/status_im2/contexts/wallet/common/account_switcher/view.cljs

@@ -17,7 +17,7 @@
     :or   {icon-name           :i/close
            accessibility-label :top-bar
            switcher-type       :account-options}}]
-  (let [{:keys [color emoji]} (rf/sub [:wallet/current-viewing-account])
+  (let [{:keys [color emoji watch-only?]} (rf/sub [:wallet/current-viewing-account])
         networks                          (rf/sub [:wallet/network-details])]
     [quo/page-nav
      {:icon-name           icon-name
@@ -30,4 +30,5 @@
       :account-switcher    {:customization-color color
                             :on-press            #(rf/dispatch [:show-bottom-sheet
                                                                 (get-bottom-sheet-args switcher-type)])
-                            :emoji               emoji}}]))
+                            :emoji               emoji
+                            :type                (when watch-only? :watch-only)}}]))

src/status_im2/contexts/wallet/common/sheets/account_options/view.cljs

@@ -14,16 +14,23 @@
             [utils.re-frame :as rf]))
 
 (defn- render-account-item
-  [{:keys [color address] :as account}]
+  [{:keys [name emoji color address watch-only?]}]
   [quo/account-item
-   {:account-props (assoc account :customization-color color)
+   {:account-props (cond-> {:name                name
+                            :emoji               emoji
+                            :customization-color color
+                            :address             address}
+
+                     watch-only?
+                     (assoc :type :watch-only))
+    :title-icon    (when watch-only? :i/reveal)
     :on-press      (fn []
                      (rf/dispatch [:wallet/switch-current-viewing-account address])
                      (rf/dispatch [:hide-bottom-sheet]))}])
 
 (defn- options
   [{:keys [theme show-account-selector? options-height]}]
-  (let [{:keys [name color emoji address]} (rf/sub [:wallet/current-viewing-account])
+  (let [{:keys [name color emoji address watch-only?]} (rf/sub [:wallet/current-viewing-account])
         network-preference-details                     (rf/sub [:wallet/network-preference-details])]
     [rn/view
      {:on-layout #(reset! options-height (oops/oget % "nativeEvent.layout.height"))
@@ -43,12 +50,16 @@
         :opacity             0.4}]]
      [quo/drawer-bar]
      [quo/drawer-top
-      {:title                name
+      (cond-> {:title                name
                :type                 :account
                :networks             network-preference-details
                :description          address
                :account-avatar-emoji emoji
-       :customization-color  color}]
+               :customization-color  color}
+
+        watch-only?
+        (assoc :title-icon          :i/reveal
+               :account-avatar-type :watch-only))]
      [quo/action-drawer
       [[{:icon                :i/edit
          :accessibility-label :edit