diff --git a/src/quo/components/drawers/drawer_top/style.cljs b/src/quo/components/drawers/drawer_top/style.cljs index 5589f58f10..8a674daf41 100644 --- 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 index 2a6697b719..d775d2d47e 100644 --- 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 index aa9c567433..8a09f84545 100644 --- 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 index 42ad78fdeb..0af1b1cb23 100644 --- 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 index 7ff29fec35..11cca25188 100644 --- 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 index 19f94f643f..077f086c8f 100644 --- 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 index 361a8f4096..af9fe164a0 100644 --- 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 index 2d6585421b..2b0c58016d 100644 --- 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 index 42efcb3255..37e245c2d8 100644 --- 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