Skip to content

Commit 4a1cebb

Browse files
OmarBasemandresceballosm-truenorth
OmarBasem
authored and
andresceballosm-truenorth
committed
Quo2 Wallet: Token Value (status-im#16880)
* feat: quo2 wallet - Token Value
1 parent 44bd15e commit 4a1cebb

File tree

10 files changed

+235
-3
lines changed

10 files changed

+235
-3
lines changed

‎src/quo2/components/list_items/token_value/component_spec.cljs

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
(ns quo2.components.list-items.token-value.component-spec
2+
(:require
3+
[quo2.foundations.colors :as colors]
4+
[test-helpers.component :as h]
5+
[quo2.components.list-items.token-value.view :as token-value]))
6+
7+
(h/describe "List Items: Token Value"
8+
(h/test "Token label renders"
9+
(h/render [token-value/view
10+
{:token :snt
11+
:state :default
12+
:status :empty
13+
:customization-color :blue
14+
:metrics? true
15+
:values {:crypto-value "0.00"
16+
:fiat-value "€0.00"
17+
:percentage-change "0.00"
18+
:fiat-change "€0.00"}}])
19+
(h/is-truthy (h/get-by-text "Status")))
20+
21+
(h/test "Pressed state"
22+
(h/render [token-value/view
23+
{:token :snt
24+
:state :pressed
25+
:status :empty
26+
:customization-color :blue
27+
:metrics? true
28+
:values {:crypto-value "0.00"
29+
:fiat-value "€0.00"
30+
:percentage-change "0.00"
31+
:fiat-change "€0.00"}}])
32+
(h/has-style (h/get-by-label-text :container)
33+
{:backgroundColor (colors/custom-color-by-theme :blue 50 50 5 5)}))
34+
35+
(h/test "Active state"
36+
(h/render [token-value/view
37+
{:token :snt
38+
:state :active
39+
:status :empty
40+
:customization-color :blue
41+
:metrics? true
42+
:values {:crypto-value "0.00"
43+
:fiat-value "€0.00"
44+
:percentage-change "0.00"
45+
:fiat-change "€0.00"}}])
46+
(h/has-style (h/get-by-label-text :container)
47+
{:backgroundColor (colors/custom-color-by-theme :blue 50 50 10 10)}))
48+
49+
(h/test "Status change"
50+
(h/render [token-value/view
51+
{:token :snt
52+
:state :default
53+
:status :positive
54+
:customization-color :blue
55+
:metrics? true
56+
:values {:crypto-value "0.00"
57+
:fiat-value "€0.00"
58+
:percentage-change "0.00"
59+
:fiat-change "€0.00"}}])
60+
(h/is-truthy (h/get-by-label-text :arrow-icon))))

‎src/quo2/components/list_items/token_value/style.cljs

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
(ns quo2.components.list-items.token-value.style
2+
(:require [quo2.foundations.colors :as colors]))
3+
4+
(defn container
5+
[color bg-opacity theme]
6+
{:width 359
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/custom-color-by-theme color 50 50 bg-opacity bg-opacity theme)})
14+
15+
(defn metric-text
16+
[status theme]
17+
{:color (case status
18+
:positive (colors/theme-colors colors/success-50 colors/success-60 theme)
19+
:negative (colors/theme-colors colors/danger-50 colors/danger-60 theme)
20+
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
21+
22+
(defn dot-divider
23+
[status theme]
24+
{:width 2
25+
:height 2
26+
:border-radius 2
27+
:margin-horizontal 4
28+
:background-color (case status
29+
:positive (colors/theme-colors colors/success-50-opa-40
30+
colors/success-60-opa-40
31+
theme)
32+
:negative (colors/theme-colors colors/danger-50-opa-40
33+
colors/danger-50-opa-40
34+
theme)
35+
(colors/theme-colors colors/neutral-80-opa-40 colors/neutral-50-opa-40 theme))})
36+
37+
(defn arrow-icon
38+
[status theme]
39+
{:size 16
40+
:color (if (= status :positive)
41+
(colors/theme-colors colors/success-50 colors/success-60 theme)
42+
(colors/theme-colors colors/danger-50 colors/danger-60 theme))})

‎src/quo2/components/list_items/token_value/view.cljs

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
(ns quo2.components.list-items.token-value.view
2+
(:require
3+
[clojure.string :as string]
4+
[quo2.components.icon :as icon]
5+
[quo2.components.markdown.text :as text]
6+
[quo2.foundations.colors :as colors]
7+
[quo2.foundations.resources :as resources]
8+
[quo2.theme :as quo.theme]
9+
[react-native.core :as rn]
10+
[quo2.foundations.common :as common]
11+
[quo2.components.list-items.token-value.style :as style]))
12+
13+
(defn- internal-view
14+
[{:keys [theme customization-color state status token metrics? values]}]
15+
(let [bg-opacity (case state
16+
:active 10
17+
:pressed 5
18+
0)
19+
{:keys [crypto-value fiat-value percentage-change fiat-change]} values]
20+
[rn/view
21+
{:style (style/container customization-color bg-opacity theme)
22+
:accessibility-label :container}
23+
[rn/view
24+
{:style {:flex-direction :row
25+
:align-items :center}}
26+
[rn/image
27+
{:source (resources/tokens token)
28+
:style {:width 32
29+
:height 32}}]
30+
[rn/view {:style {:margin-left 8}}
31+
[text/text {:weight :semi-bold} (common/token-label token)]
32+
[text/text
33+
{:size :paragraph-2
34+
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
35+
(str crypto-value " " (string/upper-case (clj->js token)))]]]
36+
[rn/view
37+
{:style {:align-items :flex-end
38+
:justify-content :space-between}}
39+
[text/text
40+
{:weight :medium
41+
:size :paragraph-2} fiat-value]
42+
(when metrics?
43+
[rn/view
44+
{:style {:flex-direction :row
45+
:align-items :center}}
46+
[text/text
47+
{:size :paragraph-2
48+
:style (style/metric-text status theme)} (str percentage-change "%")]
49+
[rn/view {:style (style/dot-divider status theme)}]
50+
[text/text
51+
{:size :paragraph-2
52+
:style (style/metric-text status theme)} fiat-change]
53+
(when (not= status :empty)
54+
[rn/view
55+
{:style {:margin-left 4}
56+
:accessibility-label :arrow-icon}
57+
[icon/icon (if (= status :positive) :i/positive :i/negative)
58+
(style/arrow-icon status theme)]])])]]))
59+
60+
(def view (quo.theme/with-theme internal-view))

‎src/quo2/components/wallet/token_input/view.cljs

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,15 @@
2727
[rn/view {:style (style/main-container width)}
2828
[rn/view {:style style/amount-container}
2929
[rn/pressable
30-
{:on-press #(.focus ^js @input-ref)
30+
{:on-press #(when @input-ref (.focus ^js @input-ref))
3131
:style {:flex-direction :row
3232
:flex-grow 1
3333
:align-items :flex-end}}
3434
[rn/image
3535
{:style style/token
3636
:source (resources/get-token token)}]
3737
[rn/text-input
38-
{:ref #(when @input-ref (reset! input-ref %))
38+
{:ref #(reset! input-ref %)
3939
:placeholder "0"
4040
:placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
4141
:keyboard-type :numeric

‎src/quo2/core.cljs

+2
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
quo2.components.list-items.community.view
5858
quo2.components.list-items.menu-item
5959
quo2.components.list-items.preview-list
60+
quo2.components.list-items.token-value.view
6061
quo2.components.list-items.user-list
6162
quo2.components.loaders.skeleton
6263
quo2.components.loaders.skeleton.view
@@ -211,6 +212,7 @@
211212
(def preview-list quo2.components.list-items.preview-list/preview-list)
212213
(def user-list quo2.components.list-items.user-list/user-list)
213214
(def community-list-item quo2.components.list-items.community.view/view)
215+
(def token-value quo2.components.list-items.token-value.view/view)
214216

215217
;;;; LOADERS
216218
(def skeleton quo2.components.loaders.skeleton/skeleton)

‎src/quo2/core_spec.cljs

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
[quo2.components.links.url-preview-list.component-spec]
3232
[quo2.components.links.url-preview.component-spec]
3333
[quo2.components.list-items.community.component-spec]
34+
[quo2.components.list-items.token-value.component-spec]
3435
[quo2.components.markdown.text-component-spec]
3536
[quo2.components.markdown.list.component-spec]
3637
[quo2.components.notifications.notification.component-spec]

‎src/quo2/foundations/colors.cljs

+2
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@
5858
(def neutral-95 "#0D1625")
5959
(def neutral-100 "#09101C")
6060

61+
(def neutral-50-opa-40 (alpha neutral-50 0.4))
62+
6163
;;80 with transparency
6264
(def neutral-80-opa-5 (alpha neutral-80 0.05))
6365
(def neutral-80-opa-10 (alpha neutral-80 0.1))

‎src/quo2/foundations/common.cljs

+4
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,7 @@
33
(def currency-label
44
{:eur "€"
55
:usd "$"})
6+
7+
(def token-label
8+
{:eth "Ethereum"
9+
:snt "Status"})

‎src/status_im2/contexts/quo_preview/list_items/token_value.cljs

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
(ns status-im2.contexts.quo-preview.list-items.token-value
2+
(:require
3+
[quo2.core :as quo]
4+
[react-native.core :as rn]
5+
[reagent.core :as reagent]
6+
[status-im2.contexts.quo-preview.preview :as preview]))
7+
8+
(def descriptor
9+
[{:label "Token:"
10+
:key :token
11+
:type :select
12+
:options [{:key :eth
13+
:value "ETH"}
14+
{:key :snt
15+
:value "SNT"}]}
16+
{:label "State:"
17+
:key :state
18+
:type :select
19+
:options [{:key :default
20+
:value "Default"}
21+
{:key :pressed
22+
:value "Pressed"}
23+
{:key :active
24+
:value "Active"}]}
25+
{:label "Status:"
26+
:key :status
27+
:type :select
28+
:options [{:key :empty
29+
:value "Empty"}
30+
{:key :positive
31+
:value "Positive"}
32+
{:key :negative
33+
:value "Negative"}]}
34+
(preview/customization-color-option)
35+
{:label "Metrics?:"
36+
:key :metrics?
37+
:type :boolean}])
38+
39+
(defn preview
40+
[]
41+
(let [state (reagent/atom {:token :snt
42+
:state :default
43+
:status :empty
44+
:customization-color :blue
45+
:metrics? true
46+
:values {:crypto-value "0.00"
47+
:fiat-value "€0.00"
48+
:percentage-change "0.00"
49+
:fiat-change "€0.00"}})]
50+
(fn []
51+
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
52+
[rn/view
53+
{:style {:flex 1}}
54+
[rn/view {:style {:min-height 300}} [preview/customizer state descriptor]]
55+
[rn/view
56+
{:style {:align-items :center
57+
:margin-top 50}} [quo/token-value @state]]]])))

‎src/status_im2/contexts/quo_preview/main.cljs

+5-1
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
[status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
5959
[status-im2.contexts.quo-preview.list-items.user-list :as user-list]
6060
[status-im2.contexts.quo-preview.list-items.community-list :as community-list]
61+
[status-im2.contexts.quo-preview.list-items.token-value :as token-value]
6162
[status-im2.contexts.quo-preview.markdown.text :as text]
6263
[status-im2.contexts.quo-preview.markdown.list :as markdown-list]
6364
[status-im2.contexts.quo-preview.messages.author :as messages-author]
@@ -277,7 +278,10 @@
277278
:component preview-lists/preview-preview-lists}
278279
{:name :user-list
279280
:options {:topBar {:visible true}}
280-
:component user-list/preview-user-list}]
281+
:component user-list/preview-user-list}
282+
{:name :token-value
283+
:options {:topBar {:visible true}}
284+
:component token-value/preview}]
281285
:loaders [{:name :skeleton
282286
:options {:topBar {:visible true}}
283287
:component skeleton/preview-skeleton}]

0 commit comments

Comments
 (0)