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

Fix account-card component UI (#17589) 

* add new type

* fix lint issues

* add tests

* refactor get-test-data function

* resolve comments

* fix imports

* resolve comments

* fix lint issues

* remove extra code

* fix height
This commit is contained in:
mmilad75 2023-10-26 16:46:24 +03:30 committed by GitHub
parent 901644e023
commit 6ebd5b421c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 135 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/quo/components/wallet/account_card/component_spec.cljs
View File

@ -7,7 +7,7 @@
(def empty-username "Account 1") (def empty-username "Account 1")
(defn get-test-data (defn get-test-data
[type watch-only? empty-type? loading? metrics?] [{:keys [type watch-only? empty-type? loading? no-metrics?]}]
{:name (if empty-type? empty-username username) {:name (if empty-type? empty-username username)
:balance "€1,000.00" :balance "€1,000.00"
:percentage-value "50%" :percentage-value "50%"
@ -15,17 +15,18 @@
:customization-color :blue :customization-color :blue
:watch-only? watch-only? :watch-only? watch-only?
:loading? loading? :loading? loading?
:metrics? metrics? :metrics? (not no-metrics?)
:type type}) :type type})
(h/describe "Account_card tests" (h/describe "Account_card tests"
(h/test "Renders Default" (h/test "Renders Default"
(let [data (get-test-data :default false false false true)] (let [data (get-test-data {:type :default})]
(h/render [account-card/view data]) (h/render [account-card/view data])
(h/is-truthy (h/get-by-text username)))) (h/is-truthy (h/get-by-text username))))
(h/test "Renders Watch-Only" (h/test "Renders Watch-Only"
(let [data (get-test-data :watch-only true false false true)] (let [data (get-test-data {:type :watch-only
:watch-only? true})]
(h/render [account-card/view data]) (h/render [account-card/view data])
(h/is-truthy (h/get-by-text username)))) (h/is-truthy (h/get-by-text username))))
@ -35,10 +36,16 @@
(h/is-truthy (h/get-by-label-text :add-account)))) (h/is-truthy (h/get-by-label-text :add-account))))
(h/test "Renders Empty" (h/test "Renders Empty"
(let [data (get-test-data :empty false true false true)] (let [data (get-test-data {:type :empty
:empty-type? true})]
(h/render [account-card/view data]) (h/render [account-card/view data])
(h/is-truthy (h/get-by-text empty-username)))) (h/is-truthy (h/get-by-text empty-username))))
(h/test "Renders Missing Keypair"
(let [data (get-test-data {:type :missing-keypair})]
(h/render [account-card/view data])
(h/is-truthy (h/get-by-text username))))
(h/test "Add account on press fires correctly" (h/test "Add account on press fires correctly"
(let [on-press (h/mock-fn) (let [on-press (h/mock-fn)
data {:type :add-account data {:type :add-account
@ -48,16 +55,20 @@
(h/was-called on-press))) (h/was-called on-press)))
(h/test "Renders component without metrics" (h/test "Renders component without metrics"
(let [data (get-test-data :default false false false false)] (let [data (get-test-data {:type :default
:no-metrics? true})]
(h/render [account-card/view data]) (h/render [account-card/view data])
(h/is-falsy (h/query-by-label-text :metrics)))) (h/is-falsy (h/query-by-label-text :metrics))))
(h/test "Renders loading state" (h/test "Renders loading state"
(let [data (get-test-data :default false false true true)] (let [data (get-test-data {:type :default
:loading? true})]
(h/render [account-card/view data]) (h/render [account-card/view data])
(h/is-truthy (h/get-by-label-text :loading)))) (h/is-truthy (h/get-by-label-text :loading))))
(h/test "Renders loading state without metrics" (h/test "Renders loading state without metrics"
(let [data (get-test-data :default false false true false)] (let [data (get-test-data {:type :default
:no-metrics? true
:loading? true})]
(h/render [account-card/view data]) (h/render [account-card/view data])
(h/is-falsy (h/query-by-label-text :metrics))))) (h/is-falsy (h/query-by-label-text :metrics)))))

20
src/quo/components/wallet/account_card/properties.cljs Normal file
View File

@ -0,0 +1,20 @@
(ns quo.components.wallet.account-card.properties
(:require [quo.foundations.colors :as colors]))
(defn gradient-start-color
[theme customization-color]
(colors/theme-colors
(colors/resolve-color customization-color theme 0)
colors/neutral-95
theme))
(defn gradient-end-color
[theme customization-color]
(colors/theme-colors
(colors/resolve-color customization-color theme 6)
colors/neutral-95
theme))
(defn alert-icon-color
[theme]
(colors/theme-colors colors/neutral-50 colors/white theme))

56
src/quo/components/wallet/account_card/style.cljs
View File

@ -3,24 +3,29 @@
[quo.foundations.colors :as colors])) [quo.foundations.colors :as colors]))
(defn text-color (defn text-color
[watch-only? theme] [type theme]
(if (and watch-only? (= :light theme)) (if (and (or (= :missing-keypair type)
(= :watch-only type))
(= :light theme))
colors/neutral-100 colors/neutral-100
colors/white)) colors/white))
(defn card (defn card
[{:keys [customization-color watch-only? metrics? theme pressed?]}] [{:keys [customization-color type theme pressed?]}]
{:width 162 {:width 162
:height (if metrics? 88 68) :background-color (when (not= :watch-only type)
:background-color (if watch-only?
(colors/theme-colors colors/neutral-80-opa-5 colors/neutral-95 theme)
(colors/theme-colors (colors/theme-colors
(colors/custom-color customization-color 50) (colors/resolve-color customization-color
(colors/custom-color customization-color 60) theme
(when (= :missing-keypair type) (if pressed? 20 10)))
(colors/resolve-color customization-color
theme
(when (= :missing-keypair type) (if pressed? 30 20)))
theme)) theme))
:border-radius 16 :border-radius 16
:border-width 1 :border-width 1
:border-color (if watch-only? :border-color (if (or (= :missing-keypair type)
(= :watch-only type))
(colors/theme-colors (colors/theme-colors
(if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5) (if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5)
(if pressed? colors/white-opa-10 colors/white-opa-5) (if pressed? colors/white-opa-10 colors/white-opa-5)
@ -28,10 +33,10 @@
colors/neutral-80-opa-10) colors/neutral-80-opa-10)
:padding-horizontal 12 :padding-horizontal 12
:padding-top 6 :padding-top 6
:padding-bottom 10}) :padding-bottom 9})
(def profile-container (def profile-container
{:margin-bottom 6 {:margin-bottom 8
:flex-direction :row}) :flex-direction :row})
(def metrics-container (def metrics-container
@ -39,8 +44,8 @@
:align-items :center}) :align-items :center})
(defn account-name (defn account-name
[watch-only? theme] [type theme]
{:color (text-color watch-only? theme) {:color (text-color type theme)
:margin-left 2}) :margin-left 2})
(def watch-only-container (def watch-only-container
@ -50,21 +55,25 @@
:flex 1}) :flex 1})
(defn account-value (defn account-value
[watch-only? theme] [type theme]
{:color (text-color watch-only? theme)}) {:color (text-color type theme)})
(defn metrics (defn metrics
[watch-only? theme] [type theme]
{:color (if (and watch-only? (= :light theme)) {:color (if (and (or (= :missing-keypair type)
(= :watch-only type))
(= :light theme))
colors/neutral-80-opa-60 colors/neutral-80-opa-60
colors/white-opa-70)}) colors/white-opa-70)})
(defn separator (defn separator
[watch-only? theme] [type theme]
{:width 2 {:width 2
:height 2 :height 2
:border-radius 20 :border-radius 20
:background-color (if (and watch-only? (= :light theme)) :background-color (if (and (or (= :missing-keypair type)
(= :watch-only type))
(= :light theme))
colors/neutral-80-opa-20 colors/neutral-80-opa-20
colors/white-opa-40) colors/white-opa-40)
:margin-horizontal 4}) :margin-horizontal 4})
@ -102,3 +111,12 @@
(def metrics-icon-container (def metrics-icon-container
{:margin-left 4}) {:margin-left 4})
(def gradient-view
{:position :absolute
:bottom 0
:top 0
:left 0
:right 0
:border-radius 16
:z-index -1})

61
src/quo/components/wallet/account_card/view.cljs
View File

@ -3,11 +3,13 @@
[quo.components.buttons.button.view :as button] [quo.components.buttons.button.view :as button]
[quo.components.icon :as icon] [quo.components.icon :as icon]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.components.wallet.account-card.properties :as properties]
[quo.components.wallet.account-card.style :as style] [quo.components.wallet.account-card.style :as style]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.foundations.customization-colors :as customization-colors] [quo.foundations.customization-colors :as customization-colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.linear-gradient :as linear-gradient]
[reagent.core :as reagent])) [reagent.core :as reagent]))
(defn- loading-view (defn- loading-view
@ -17,8 +19,7 @@
[rn/view [rn/view
{:accessibility-label :loading {:accessibility-label :loading
:style (style/card {:customization-color customization-color :style (style/card {:customization-color customization-color
:watch-only? watch-only? :type type
:metrics? metrics?
:theme theme :theme theme
:pressed? false})} :pressed? false})}
[rn/view {:style style/loader-container} [rn/view {:style style/loader-container}
@ -54,31 +55,43 @@
10)}])])) 10)}])]))
(defn- metrics-percentage (defn- metrics-percentage
[watch-only? theme account-percentage] [type theme account-percentage]
[text/text [text/text
{:weight :semi-bold {:weight :medium
:size :paragraph-2 :size :paragraph-2
:accessibility-label :metrics :accessibility-label :metrics
:style (style/metrics watch-only? theme)} :style (style/metrics type theme)}
account-percentage]) account-percentage])
(defn- metrics-info (defn- metrics-info
[watch-only? theme account-amount] [type theme account-amount]
[:<> [:<>
[rn/view (style/separator watch-only? theme)] [rn/view (style/separator type theme)]
[text/text [text/text
{:weight :semi-bold {:weight :medium
:size :paragraph-2 :size :paragraph-2
:style (style/metrics watch-only? theme)} :style (style/metrics type theme)}
account-amount] account-amount]
[rn/view {:style style/metrics-icon-container} [rn/view {:style style/metrics-icon-container}
[icon/icon [icon/icon
:i/positive :i/positive
{:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70) {:color (colors/theme-colors (if (or (= :missing-keypair type)
(= :watch-only type))
colors/neutral-50
colors/white-opa-70)
colors/white-opa-70 colors/white-opa-70
theme) theme)
:size 16}]]]) :size 16}]]])
(defn- gradient-overview
[theme customization-color]
[linear-gradient/linear-gradient
{:colors [(properties/gradient-start-color theme customization-color)
(properties/gradient-end-color theme customization-color)]
:style style/gradient-view
:start {:x 0 :y 0}
:end {:x 1 :y 0}}])
(defn- user-account (defn- user-account
[] []
(let [pressed? (reagent/atom false) (let [pressed? (reagent/atom false)
@ -86,7 +99,8 @@
on-press-out #(reset! pressed? false)] on-press-out #(reset! pressed? false)]
(fn [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics? (fn [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics?
theme on-press]}] theme on-press]}]
(let [watch-only? (= :watch-only type)] (let [watch-only? (= :watch-only type)
missing-keypair? (= :missing-keypair type)]
(if loading? (if loading?
[loading-view [loading-view
{:customization-color customization-color {:customization-color customization-color
@ -97,12 +111,11 @@
{:on-press-in on-press-in {:on-press-in on-press-in
:on-press-out on-press-out :on-press-out on-press-out
:style (style/card {:customization-color customization-color :style (style/card {:customization-color customization-color
:watch-only? watch-only? :type type
:metrics? metrics?
:theme theme :theme theme
:pressed? @pressed?}) :pressed? @pressed?})
:on-press on-press} :on-press on-press}
(when (and customization-color (not watch-only?)) (when (and customization-color (and (not watch-only?) (not missing-keypair?)))
[customization-colors/overlay [customization-colors/overlay
{:customization-color customization-color {:customization-color customization-color
:border-radius 16 :border-radius 16
@ -115,19 +128,23 @@
[text/text [text/text
{:size :paragraph-2 {:size :paragraph-2
:weight :medium :weight :medium
:style (style/account-name watch-only? theme)} :style (style/account-name type theme)}
name] name]
(when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]] (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])
(when missing-keypair?
[icon/icon :i/alert {:color (properties/alert-icon-color theme) :size 12}])]]
[text/text [text/text
{:size :heading-2 {:size :heading-2
:weight :semi-bold :weight :semi-bold
:style (style/account-value watch-only? theme)} :style (style/account-value type theme)}
balance] balance]
(when metrics? (when metrics?
[rn/view {:style style/metrics-container} [rn/view {:style style/metrics-container}
[metrics-percentage watch-only? theme percentage-value] [metrics-percentage type theme percentage-value]
(when (not= :empty type) (when (not= :empty type)
[metrics-info watch-only? theme amount])])]))))) [metrics-info type theme amount])])
(when watch-only?
[gradient-overview theme customization-color])])))))
(defn- add-account-view (defn- add-account-view
[] []
@ -156,10 +173,8 @@
(defn- view-internal (defn- view-internal
[{:keys [type] :as props}] [{:keys [type] :as props}]
(case type (case type
:watch-only [user-account props] (:watch-only :default :empty :missing-keypair) [user-account props]
:add-account [add-account-view props] :add-account [add-account-view props]
:default [user-account props]
:empty [user-account props]
nil)) nil))
(def view (quo.theme/with-theme view-internal)) (def view (quo.theme/with-theme view-internal))

29
src/status_im2/contexts/quo_preview/wallet/account_card.cljs
View File

@ -20,7 +20,9 @@
{:key :add-account {:key :add-account
:value "Add Account"} :value "Add Account"}
{:key :empty {:key :empty
:value "Empty"}]} :value "Empty"}
{:key :missing-keypair
:value "Missing Keypair"}]}
{:label "Customization color:" {:label "Customization color:"
:key :customization-color :key :customization-color
:type :select :type :select
@ -73,13 +75,24 @@
:emoji "🍑"} :emoji "🍑"}
:watch-only :watch-only
{:name "Alisher account" {:name "Ben’s fortune"
:balance "€2,269.12" :balance "€2,269.12"
:percentage-value "16.9%" :percentage-value "16.9%"
:amount "€570.24" :amount "€570.24"
:metrics? true :metrics? true
:type :watch-only :type :watch-only
:emoji "💸"} :customization-color :army
:emoji "💸"}
:missing-keypair
{:name "Trip to Vegas"
:balance "€2,269.12"
:percentage-value "16.9%"
:amount "€570.24"
:metrics? true
:customization-color :turquoise
:type :missing-keypair
:emoji "🎲"}
:add-account :add-account
{:customization-color :blue {:customization-color :blue