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>
status-im · Dec 18, 2023 · da61233 · da61233
1 parent 8a869be
commit da61233
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 51 deletions.
diff --git a/src/quo/components/drawers/drawer_top/style.cljs b/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})
diff --git a/src/quo/components/drawers/drawer_top/view.cljs b/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]
-    [text/text
-     {:size   :heading-2
-      :weight :semi-bold}
-     title]))
+    [rn/view {:style style/title-container}
+     [text/text
+      {:size   :heading-2
+       :weight :semi-bold}
+      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,15 +183,17 @@
        {: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}
     [left-title
-     {:type  type
-      :label label
-      :title title
-      :theme theme
-      :blur? blur?}]
+     {:type       type
+      :label      label
+      :title      title
+      :title-icon title-icon
+      :theme      theme
+      :blur?      blur?}]
     [subtitle
      {:type           type
       :theme          theme

diff --git a/src/quo/components/list_items/account/component_spec.cljs b/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}])

diff --git a/src/quo/components/list_items/account/style.cljs b/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

diff --git a/src/quo/components/list_items/account/view.cljs b/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]
-    :or   {title-icon? false}}]
+  [{:keys [account-props title-icon blur? theme]}]
   [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?
-       [rn/view
-        {: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))}]])]
+     (when title-icon
+       [icon/icon title-icon
+        {:size                20
+         :color               (if blur?
+                                colors/white-opa-40
+                                (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)

diff --git a/src/quo/components/navigation/page_nav/view.cljs b/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]}]
-  [dropdown/view
-   {:type                :customization
-    :customization-color customization-color
-    :state               (or state :default)
-    :size                :size-32
-    :on-press            on-press
-    :emoji?              true}
-   emoji])
+  [{:keys [customization-color on-press emoji type]}]
+  [rn/pressable {:on-press on-press}
+   [account-avatar/view
+    {:emoji               emoji
+     :size                32
+     :type                (or type :default)
+     :customization-color customization-color}]])
 
 (defn- right-content
   [{:keys [background content max-actions min-size? support-account-switcher? account-switcher

diff --git a/src/status_im2/contexts/quo_preview/list_items/account.cljs b/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)}})]])))
diff --git a/src/status_im2/contexts/wallet/common/account_switcher/view.cljs b/src/status_im2/contexts/wallet/common/account_switcher/view.cljs
@@ -17,8 +17,8 @@
     :or   {icon-name           :i/close
            accessibility-label :top-bar
            switcher-type       :account-options}}]
-  (let [{:keys [color emoji]} (rf/sub [:wallet/current-viewing-account])
-        networks              (rf/sub [:wallet/network-details])]
+  (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
       :background          :blur
@@ -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)}}]))
diff --git a/src/status_im2/contexts/wallet/common/sheets/account_options/view.cljs b/src/status_im2/contexts/wallet/common/sheets/account_options/view.cljs
@@ -14,17 +14,24 @@
             [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])
-        network-preference-details         (rf/sub [:wallet/network-preference-details])]
+  (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"))
       :style     (when show-account-selector? style/options-container)}
@@ -43,12 +50,16 @@
         :opacity             0.4}]]
      [quo/drawer-bar]
      [quo/drawer-top
-      {:title                name
-       :type                 :account
-       :networks             network-preference-details
-       :description          address
-       :account-avatar-emoji emoji
-       :customization-color  color}]
+      (cond-> {:title                name
+               :type                 :account
+               :networks             network-preference-details
+               :description          address
+               :account-avatar-emoji emoji
+               :customization-color  color}
+
+        watch-only?
+        (assoc :title-icon          :i/reveal
+               :account-avatar-type :watch-only))]
      [quo/action-drawer
       [[{:icon                :i/edit
          :accessibility-label :edit