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")
(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)
:balance "€1,000.00"
:percentage-value "50%"
@ -15,17 +15,18 @@
:customization-color :blue
:watch-only? watch-only?
:loading? loading?
:metrics? metrics?
:metrics? (not no-metrics?)
:type type})
(h/describe "Account_card tests"
(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/is-truthy (h/get-by-text username))))
(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/is-truthy (h/get-by-text username))))
@ -35,10 +36,16 @@
(h/is-truthy (h/get-by-label-text :add-account))))
(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/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"
(let [on-press (h/mock-fn)
data {:type :add-account
@ -48,16 +55,20 @@
(h/was-called on-press)))
(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/is-falsy (h/query-by-label-text :metrics))))
(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/is-truthy (h/get-by-label-text :loading))))
(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/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]))
(defn text-color
[watch-only? theme]
(if (and watch-only? (= :light theme))
[type theme]
(if (and (or (= :missing-keypair type)
(= :watch-only type))
(= :light theme))
colors/neutral-100
colors/white))
(defn card
[{:keys [customization-color watch-only? metrics? theme pressed?]}]
[{:keys [customization-color type theme pressed?]}]
{:width 162
:height (if metrics? 88 68)
:background-color (if watch-only?
(colors/theme-colors colors/neutral-80-opa-5 colors/neutral-95 theme)
:background-color (when (not= :watch-only type)
(colors/theme-colors
(colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
(colors/resolve-color customization-color
theme
(when (= :missing-keypair type) (if pressed? 20 10)))
(colors/resolve-color customization-color
theme
(when (= :missing-keypair type) (if pressed? 30 20)))
theme))
:border-radius 16
:border-width 1
:border-color (if watch-only?
:border-color (if (or (= :missing-keypair type)
(= :watch-only type))
(colors/theme-colors
(if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5)
(if pressed? colors/white-opa-10 colors/white-opa-5)
@ -28,10 +33,10 @@
colors/neutral-80-opa-10)
:padding-horizontal 12
:padding-top 6
:padding-bottom 10})
:padding-bottom 9})
(def profile-container
{:margin-bottom 6
{:margin-bottom 8
:flex-direction :row})
(def metrics-container
@ -39,8 +44,8 @@
:align-items :center})
(defn account-name
[watch-only? theme]
{:color (text-color watch-only? theme)
[type theme]
{:color (text-color type theme)
:margin-left 2})
(def watch-only-container
@ -50,21 +55,25 @@
:flex 1})
(defn account-value
[watch-only? theme]
{:color (text-color watch-only? theme)})
[type theme]
{:color (text-color type theme)})
(defn metrics
[watch-only? theme]
{:color (if (and watch-only? (= :light theme))
[type theme]
{:color (if (and (or (= :missing-keypair type)
(= :watch-only type))
(= :light theme))
colors/neutral-80-opa-60
colors/white-opa-70)})
(defn separator
[watch-only? theme]
[type theme]
{:width 2
:height 2
: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/white-opa-40)
:margin-horizontal 4})
@ -102,3 +111,12 @@
(def metrics-icon-container
{:margin-left 4})
(def gradient-view
{:position :absolute
:bottom 0
:top 0
:left 0
:right 0
:border-radius 16
:z-index -1})

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

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

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

@ -20,7 +20,9 @@
{:key :add-account
:value "Add Account"}
{:key :empty
:value "Empty"}]}
:value "Empty"}
{:key :missing-keypair
:value "Missing Keypair"}]}
{:label "Customization color:"
:key :customization-color
:type :select
@ -73,14 +75,25 @@
:emoji "🍑"}
:watch-only
{:name "Alisher account"
{:name "Ben’s fortune"
:balance "€2,269.12"
:percentage-value "16.9%"
:amount "€570.24"
:metrics? true
:type :watch-only
: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
{:customization-color :blue
:on-press #(js/alert "Button pressed")