status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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>
This commit is contained in:
Mohamed Javid 2023-12-18 23:31:36 +05:30 committed by GitHub
parent 8a869be01c
commit da61233302
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 80 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/quo/components/drawers/drawer_top/style.cljs
View File

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

40
src/quo/components/drawers/drawer_top/view.cljs
View File

@ -17,13 +17,14 @@
(def ^:private left-image-supported-types #{:account :keypair :default-keypair}) (def ^:private left-image-supported-types #{:account :keypair :default-keypair})
(defn- left-image (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 (case type
:account [account-avatar/view :account [account-avatar/view
{:customization-color customization-color {:customization-color customization-color
:size 32 :size 32
:emoji account-avatar-emoji :emoji account-avatar-emoji
:type :default}] :type (or account-avatar-type :default)}]
:keypair [icon-avatar/icon-avatar :keypair [icon-avatar/icon-avatar
{:icon icon-avatar {:icon icon-avatar
:border? true :border? true
@ -149,22 +150,31 @@
button-icon])) button-icon]))
(defn- left-title (defn- left-title
[{:keys [type label title theme blur?]}] [{:keys [type label title title-icon theme blur?]}]
(case type (case type
:label [text/text :label [text/text
{:weight :medium {:weight :medium
:size :paragraph-2 :size :paragraph-2
:style (style/description theme blur?)} :style (style/description theme blur?)}
label] label]
[text/text [rn/view {:style style/title-container}
{:size :heading-2 [text/text
:weight :semi-bold} {:size :heading-2
title])) :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 (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 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]}] profile-picture keycard? networks label]}]
[rn/view {:style style/container} [rn/view {:style style/container}
(when (left-image-supported-types type) (when (left-image-supported-types type)
@ -173,15 +183,17 @@
{:type type {:type type
:customization-color customization-color :customization-color customization-color
:account-avatar-emoji account-avatar-emoji :account-avatar-emoji account-avatar-emoji
:account-avatar-type account-avatar-type
:icon-avatar icon-avatar :icon-avatar icon-avatar
:profile-picture profile-picture}]]) :profile-picture profile-picture}]])
[rn/view {:style style/body-container} [rn/view {:style style/body-container}
[left-title [left-title
{:type type {:type type
:label label :label label
:title title :title title
:theme theme :title-icon title-icon
:blur? blur?}] :theme theme
:blur? blur?}]
[subtitle [subtitle
{:type type {:type type
:theme theme :theme theme

4
src/quo/components/list_items/account/component_spec.cljs
View File

@ -49,11 +49,11 @@
(h/test "renders keycard icon if title-icon? is true" (h/test "renders keycard icon if title-icon? is true"
(h/render [account/view {:title-icon? 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/test "doesn't render keycard icon if title-icon? is false"
(h/render [account/view]) (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/test "renders balance container but not arrow icon if type :balance-neutral"
(h/render [account/view {:type :balance-neutral}]) (h/render [account/view {:type :balance-neutral}])

2
src/quo/components/list_items/account/style.cljs
View File

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

20
src/quo/components/list_items/account/view.cljs
View File

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

17
src/quo/components/navigation/page_nav/view.cljs
View File

@ -1,5 +1,6 @@
(ns quo.components.navigation.page-nav.view (ns quo.components.navigation.page-nav.view
(:require (:require
[quo.components.avatars.account-avatar.view :as account-avatar]
[quo.components.avatars.group-avatar.view :as group-avatar] [quo.components.avatars.group-avatar.view :as group-avatar]
[quo.components.buttons.button.properties :as button-properties] [quo.components.buttons.button.properties :as button-properties]
[quo.components.buttons.button.view :as button] [quo.components.buttons.button.view :as button]
@ -59,15 +60,13 @@
(interpose [right-section-spacing]))) (interpose [right-section-spacing])))
(defn- account-switcher-content (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 (defn- right-content
[{:keys [background content max-actions min-size? support-account-switcher? account-switcher [{:keys [background content max-actions min-size? support-account-switcher? account-switcher

3
src/status_im2/contexts/quo_preview/list_items/account.cljs
View File

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

7
src/status_im2/contexts/wallet/common/account_switcher/view.cljs
View File

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

31
src/status_im2/contexts/wallet/common/sheets/account_options/view.cljs
View File

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