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
{: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})
(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

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/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}])

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

@ -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

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

@ -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)

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

@ -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

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

@ -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)}})]])))

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

@ -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)}}]))

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

@ -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