Skip to content

Commit fe0e685

Browse files
vkjrvkjr
authored
Quo component: Market token list item (#22428)
1 parent 85cd391 commit fe0e685

File tree

10 files changed

+236
-26
lines changed

10 files changed

+236
-26
lines changed

‎src/quo/components/counter/counter/style.cljs‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,18 @@
1414
nil))
1515

1616
(defn container
17-
[{:keys [type label container-style customization-color theme value max-value blur?]}]
18-
(let [width (case (count label)
19-
1 16
20-
2 20
21-
28)]
22-
(cond-> [{:align-items :center
23-
:justify-content :center
24-
:border-radius 6
25-
:width width
26-
:height 16
27-
:margin 2}
28-
container-style]
29-
(= type :outline)
30-
(conj {:border-width 1
31-
:border-color (get-color type customization-color theme blur?)})
17+
[{:keys [type container-style customization-color theme blur?]}]
18+
(cond-> [{:align-items :center
19+
:justify-content :center
20+
:align-self :flex-start
21+
:border-radius 6
22+
:height 16
23+
:padding-horizontal 5
24+
:margin 2}
25+
container-style]
26+
(= type :outline)
27+
(conj {:border-width 1
28+
:border-color (get-color type customization-color theme blur?)})
3229

33-
(not= type :outline)
34-
(conj {:background-color (get-color type customization-color theme blur?)})
35-
36-
(> value max-value)
37-
(conj {:padding-left 0.5}))))
30+
(not= type :outline)
31+
(conj {:background-color (get-color type customization-color theme blur?)})))

‎src/quo/components/counter/counter/view.cljs‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,11 @@
2222
:accessible true
2323
:accessibility-label accessibility-label
2424
:style (style/container
25-
{:label label
26-
:type type
25+
{:type type
2726
:blur? blur?
2827
:customization-color customization-color
2928
:theme theme
30-
:container-style container-style
31-
:value value
32-
:max-value max-value})}
29+
:container-style container-style})}
3330
[text/text
3431
{:weight :medium
3532
:size :label

‎src/quo/components/list_items/market_token/component_spec.cljs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
(ns quo.components.list-items.market-token.component-spec
2+
(:require
3+
[quo.components.list-items.market-token.view :as market-token]
4+
[test-helpers.component :as h]))
5+
6+
(h/describe "List Items: Market token"
7+
(h/test "Render market token"
8+
(h/render-with-theme-provider [market-token/view
9+
{:token :snt
10+
:token-rank 10
11+
:token-name "Status"
12+
:market-cap "$332.1B"
13+
:price "$0.8"
14+
:percentage-change 5.2
15+
:customization-color :blue}])
16+
(h/is-truthy (h/get-by-text "Status")))
17+
18+
(h/test "Render without props"
19+
(h/render-with-theme-provider [market-token/view])
20+
(h/is-truthy (h/get-by-label-text :market-token-container))))

‎src/quo/components/list_items/market_token/schema.cljs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
(ns quo.components.list-items.market-token.schema)
2+
3+
(def ?schema
4+
[:=>
5+
[:cat
6+
[:map
7+
[:token-name :string]
8+
[:token-rank :int]
9+
[:market-cap :string]
10+
[:price :string]
11+
[:percentage-change :double]
12+
[:on-press {:optional true} [:maybe fn?]]
13+
[:on-long-press {:optional true} [:maybe fn?]]
14+
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]
15+
:any])

‎src/quo/components/list_items/market_token/style.cljs‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
(ns quo.components.list-items.market-token.style
2+
(:require
3+
[quo.foundations.colors :as colors]))
4+
5+
(defn container
6+
[color bg-opacity theme]
7+
{:height 56
8+
:padding-horizontal 12
9+
:padding-vertical 8
10+
:border-radius 12
11+
:flex-direction :row
12+
:justify-content :space-between
13+
:background-color (colors/resolve-color color theme bg-opacity)})
14+
15+
(defn percentage-text
16+
[percentage-change theme]
17+
{:color (if (pos? percentage-change)
18+
(colors/theme-colors colors/success-50 colors/success-60 theme)
19+
(colors/theme-colors colors/danger-50 colors/danger-60 theme))})
20+
21+
(defn arrow-icon
22+
[percentage-change theme]
23+
{:size 16
24+
:color (if (pos? percentage-change)
25+
(colors/resolve-color :success theme)
26+
(colors/resolve-color :danger theme))})
27+
28+
(def left-side
29+
{:flex-direction :row
30+
:align-items :center
31+
:flex 1})
32+
33+
(def right-side
34+
{:align-items :flex-end
35+
:justify-content :space-between})
36+
37+
(def percentage-container
38+
{:flex-direction :row
39+
:align-items :center})
40+
41+
(def token-name
42+
{:weight :semi-bold})
43+
44+
(defn token-short-name
45+
[theme]
46+
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
47+
48+
(def arrow
49+
{:margin-left 4})
50+
51+
(def left-text-block
52+
{:margin-left 8})
53+
54+
(defn market-cap
55+
[theme]
56+
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
57+

‎src/quo/components/list_items/market_token/view.cljs‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
(ns quo.components.list-items.market-token.view
2+
(:require
3+
[clojure.string :as string]
4+
[quo.components.counter.counter.view :as counter]
5+
[quo.components.icon :as icon]
6+
[quo.components.list-items.market-token.schema :as component-schema]
7+
[quo.components.list-items.market-token.style :as style]
8+
[quo.components.markdown.text :as text]
9+
[quo.components.utilities.token.view :as token]
10+
[quo.context :as quo.context]
11+
[react-native.core :as rn]
12+
[schema.core :as schema]))
13+
14+
(defn- internal-view
15+
[{:keys [token token-name token-rank market-cap price percentage-change customization-color
16+
on-press on-long-press]}]
17+
(let [theme (quo.context/use-theme)
18+
[state set-state] (rn/use-state :default)
19+
bg-opacity (case state
20+
:active 10
21+
:pressed 5
22+
0)
23+
on-press-in (rn/use-callback #(set-state :pressed))
24+
on-press-out (rn/use-callback #(set-state :default))
25+
on-press (rn/use-callback
26+
(fn []
27+
(set-state :active)
28+
(js/setTimeout #(set-state :default) 300)
29+
on-press))
30+
token-short-name (if token (string/upper-case (clj->js token)) "")]
31+
[rn/pressable
32+
{:style (style/container customization-color bg-opacity theme)
33+
:on-press-in on-press-in
34+
:on-press-out on-press-out
35+
:on-press on-press
36+
:on-long-press on-long-press
37+
:accessibility-label :market-token-container}
38+
[rn/view
39+
{:style style/left-side}
40+
[counter/view
41+
{:type :outline
42+
:max-value 99999
43+
:container-style {:margin-right 8}}
44+
token-rank]
45+
[token/view {:token token :size :size-32}]
46+
[rn/view style/left-text-block
47+
[rn/text
48+
;; If we place 2 texts of different styles within parent _view_ component they won't be
49+
;; aligned to the same baseline. So they should be a children of the same _text_ component
50+
;; to share same basline and look nice. But that means we can't use precise margins anymore
51+
;; and have to rely on whitespaces to split 2 texts.
52+
[text/text style/token-name (str token-name " ")]
53+
[text/text
54+
{:weight :medium
55+
:size :paragraph-2
56+
:style (style/token-short-name theme)} token-short-name]]
57+
[text/text
58+
{:size :paragraph-2
59+
:style (style/market-cap theme)}
60+
market-cap]]]
61+
[rn/view
62+
{:style style/right-side}
63+
[text/text
64+
{:weight :medium
65+
:size :paragraph-2} price]
66+
(when percentage-change
67+
[rn/view
68+
{:style style/percentage-container}
69+
[text/text
70+
{:size :paragraph-2
71+
:style (style/percentage-text percentage-change theme)}
72+
(str percentage-change "%")]
73+
[rn/view
74+
{:style style/arrow
75+
:accessibility-label :arrow-icon}
76+
[icon/icon (if (pos? percentage-change) :i/positive :i/negative)
77+
(style/arrow-icon percentage-change theme)]]])]]))
78+
79+
(def view (schema/instrument #'internal-view component-schema/?schema))

‎src/quo/core.cljs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
quo.components.list-items.channel.view
9191
quo.components.list-items.community.view
9292
quo.components.list-items.dapp.view
93+
quo.components.list-items.market-token.view
9394
quo.components.list-items.menu-item
9495
quo.components.list-items.missing-keypair.view
9596
quo.components.list-items.network-list.view
@@ -349,6 +350,7 @@
349350
(def token-info quo.components.list-items.token-info.view/view)
350351
(def token-network quo.components.list-items.token-network.view/view)
351352
(def token-value quo.components.list-items.token-value.view/view)
353+
(def market-token quo.components.list-items.market-token.view/view)
352354
(def user quo.components.list-items.user/user)
353355
(def status-list-item quo.components.list-items.status-list-item.view/view)
354356

‎src/status_im/contexts/preview/quo/list_items/market_token.cljs‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
(ns status-im.contexts.preview.quo.list-items.market-token
2+
(:require
3+
[quo.core :as quo]
4+
[reagent.core :as reagent]
5+
[status-im.contexts.preview.quo.preview :as preview]))
6+
7+
(def descriptor
8+
[{:key :token
9+
:type :select
10+
:options [{:key :eth}
11+
{:key :snt}
12+
{:key :btc}]}
13+
{:key :token-rank
14+
:type :number}
15+
{:key :percentage-change
16+
:type :number}
17+
{:key :token-name
18+
:type :text}
19+
{:key :market-cap
20+
:type :text}
21+
{:key :price
22+
:type :text}
23+
(preview/customization-color-option)])
24+
25+
(defn view
26+
[]
27+
(let [state (reagent/atom {:token :snt
28+
:token-rank 10
29+
:token-name "Status"
30+
:market-cap "$332.1B"
31+
:price "$0.8"
32+
:percentage-change 5.2
33+
:customization-color :blue})]
34+
(fn []
35+
[preview/preview-container
36+
{:state state
37+
:descriptor descriptor
38+
:component-container-style {:align-items :center
39+
:margin-top 50}}
40+
[quo/market-token @state]])))
41+

‎src/status_im/contexts/preview/quo/main.cljs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@
109109
[status-im.contexts.preview.quo.list-items.approval-info :as approval-info]
110110
[status-im.contexts.preview.quo.list-items.channel :as channel]
111111
[status-im.contexts.preview.quo.list-items.dapp :as dapp]
112+
[status-im.contexts.preview.quo.list-items.market-token :as market-token]
112113
[status-im.contexts.preview.quo.list-items.missing-keypair :as missing-keypair]
113114
[status-im.contexts.preview.quo.list-items.network-list :as network-list]
114115
[status-im.contexts.preview.quo.list-items.preview-lists :as preview-lists]
@@ -420,6 +421,8 @@
420421
:component token-network/view}
421422
{:name :screen/token-value
422423
:component token-value/view}
424+
{:name :screen/market-token
425+
:component market-token/view}
423426
{:name :screen/user-list
424427
:options {:topBar {:visible true}}
425428
:component user-list/view}

‎src/status_im/contexts/preview/quo/preview.cljs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,9 @@
122122
:style (style/field-container false theme)
123123
:keyboard-appearance theme
124124
:on-change-text (fn [text]
125-
(set-field-value (utils.number/parse-int text default))
125+
(set-field-value (if (or (= "-" text) (string/ends-with? text "."))
126+
text
127+
(utils.number/parse-float text default)))
126128
(when-not (fn? set-state)
127129
(reagent/flush)))}]]]))
128130

0 commit comments

Comments
 (0)