Skip to content

Commit d742586

Browse files
J-Son89J-Son89
committed
feat: add token tag component (#13555)
1 parent 53008b1 commit d742586

File tree

8 files changed

+167
-0
lines changed

8 files changed

+167
-0
lines changed

‎resources/images/icons/price_decrease12@2x.png

888 Bytes
Loading

‎resources/images/icons/price_decrease12@3x.png

1.26 KB
Loading

‎resources/images/icons/price_increase12@2x.png

862 Bytes
Loading

‎resources/images/icons/price_increase12@3x.png

1.23 KB
Loading

‎src/quo2/components/token_overview.cljs

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
(ns quo2.components.token-overview
2+
(:require
3+
[quo2.foundations.colors :as colors]
4+
[status-im.i18n.i18n :as i18n]
5+
[quo.react-native :as rn]
6+
[clojure.string :as string]
7+
[status-im.utils.currency :as currencies]
8+
[status-im.ui.components.icons.icons :as icons]
9+
[quo2.components.text :as text]))
10+
11+
(def container-style {:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12})
12+
13+
(defn price-direction [price-change increase decrease neutral]
14+
(cond
15+
(pos? price-change) increase
16+
(neg? price-change) decrease
17+
:else neutral))
18+
19+
(defn price-color [direction]
20+
(price-direction direction colors/success-50 colors/danger-50 colors/neutral-50))
21+
22+
(defn divider [direction]
23+
[rn/view {:style {:height 10
24+
:margin-left 4
25+
:margin-right 4
26+
:width 1
27+
:background-color (price-direction direction colors/success-50-opa-40 colors/danger-50-opa-40 colors/divider-light)}}])
28+
29+
(defn get-direction [percentage-change]
30+
(if (zero? (js/parseInt percentage-change)) 0
31+
(/ (js/parseInt percentage-change) (js/Math.abs (js/parseInt percentage-change)))))
32+
33+
(defn trim-minus [percentage-change] (if (= (first percentage-change) "-") (string/join (rest percentage-change)) percentage-change))
34+
35+
(defn token-price
36+
"[token-price opts \"label\"]
37+
opts
38+
{
39+
:currency :currency-key
40+
:price :string
41+
:percentage-change :string
42+
}"
43+
[]
44+
(fn
45+
[{:keys [currency price percentage-change] :or {currency :usd price "0.00" percentage-change "0.0"}}]
46+
(let [direction (get-direction percentage-change)]
47+
[rn/view {:style container-style}
48+
[text/text {:number-of-lines 1
49+
:size :paragraph-2} (i18n/label :token-price)]
50+
[text/text {:style {:margin-top 4}
51+
:weight :semi-bold
52+
:number-of-lines 1
53+
:size :heading-2} (str (get-in currencies/currencies [currency :symbol]) price)]
54+
55+
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
56+
(when (not (zero? direction)) [icons/icon (if (>= direction 0) :main-icons2/price-increase12 :main-icons2/price-decrease12)
57+
{:no-color true
58+
:width 14
59+
:height 14
60+
:container-style {:margin-right 4}}])
61+
[text/text {:number-of-lines 1
62+
:weight :medium
63+
:size :paragraph-2
64+
:style {:color (price-color direction)}}
65+
(str (trim-minus percentage-change) "%")]]])))
66+
67+
(defn token-balance
68+
"[token-balance opts \"label\"]
69+
opts
70+
{
71+
:token string
72+
:token-img-src :token-img-src
73+
:currency :currency-key
74+
:account-balance :string
75+
:price :string
76+
:percentage-change :string
77+
}"
78+
[]
79+
(fn [{:keys [token token-img-src currency account-balance price percentage-change] :or {currency :usd account-balance "0.00" price "0.00" percentage-change "0.0"}}]
80+
(let [direction (get-direction percentage-change)]
81+
[rn/view {:style container-style}
82+
[text/text {:weight :regular
83+
:number-of-lines 1
84+
:size :paragraph-1} (str "Account " token " Balance")]
85+
[rn/view {:style {:display :flex :flex-direction :row :flex 1 :justify-content :space-between}}
86+
[text/text {:number-of-lines 1
87+
:weight :semi-bold
88+
:size :heading-1} (str (get-in currencies/currencies [currency :symbol]) account-balance)]
89+
[rn/image {:source token-img-src
90+
:style {:height 32
91+
:width 32}}]]
92+
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
93+
(when (not (zero? direction)) [icons/icon (if (pos? direction) :main-icons2/price-increase12 :main-icons2/price-decrease12)
94+
{:no-color true
95+
:width 12
96+
:height 12
97+
:container-style {:margin-right 4}}])
98+
[text/text {:number-of-lines 1
99+
:weight :medium
100+
:size :paragraph-2
101+
:style {:color (price-color direction)}} (str (get-in currencies/currencies [currency :symbol]) price)]
102+
[divider direction]
103+
[text/text {:number-of-lines 1
104+
:weight :medium
105+
:size :paragraph-2
106+
:style {:color (price-color direction)}} (str (trim-minus percentage-change) "%")]]])))
107+

‎src/quo2/screens/main.cljs

+4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
[quo.design-system.colors :as colors]
55
[re-frame.core :as re-frame]
66
[quo2.screens.button :as button]
7+
[quo2.screens.token-overview :as token-overview]
78
[quo2.screens.text :as text]
89
[quo2.screens.tabs :as tabs]
910
[quo2.screens.status-tags :as status-tags]
@@ -23,6 +24,9 @@
2324
{:name :quo2-button
2425
:insets {:top false}
2526
:component button/preview-button}
27+
{:name :quo2-token-overview
28+
:insets {:top false}
29+
:component token-overview/preview-token-overview}
2630
{:name :quo2-status-tags
2731
:insets {:top false}
2832
:component status-tags/preview-status-tags}

‎src/quo2/screens/token_overview.cljs

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
(ns quo2.screens.token-overview
2+
(:require [quo.react-native :as rn]
3+
[quo.previews.preview :as preview]
4+
[reagent.core :as reagent]
5+
[quo2.components.token-overview :as quo2]
6+
[quo.design-system.colors :as colors]))
7+
8+
(def descriptor [{:label "Token:"
9+
:key :token
10+
:type :select
11+
:options [{:key "SNT"
12+
:value "SNT"}
13+
{:key "ETH"
14+
:value "ETH"}]}
15+
16+
{:label "Account Balance:"
17+
:key :account-balance
18+
:type :text}
19+
{:label "Price:"
20+
:key :price
21+
:type :text}
22+
{:label "Percentage-Increase:"
23+
:key :percentage-change
24+
:type :text}
25+
{:label "Currency:"
26+
:key :currency
27+
:type :select
28+
:options [{:key :usd
29+
:value "$"}
30+
{:key :eur
31+
:value "€"}]}])
32+
33+
(def eth-token (js/require "../resources/images/tokens/mainnet/ETH.png"))
34+
(def snt-token (js/require "../resources/images/tokens/mainnet/SNT.png"))
35+
36+
(defn cool-preview []
37+
(let [state (reagent/atom {:token "ETH" :account-balance "3.00" :price "1.00" :percentage-change "-3.0" :currency :usd})]
38+
(fn []
39+
[rn/view {:margin-bottom 50 :padding 16}
40+
[preview/customizer state descriptor]
41+
[rn/view {:border :black
42+
:border-width 1
43+
:align-items :center}
44+
[quo2/token-balance (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]
45+
[rn/view {:padding-vertical 25
46+
:align-items :center}]
47+
[quo2/token-price (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))]]])))
48+
49+
(defn preview-token-overview []
50+
[rn/view {:background-color (:ui-background @colors/theme)
51+
:flex 1}
52+
[rn/flat-list {:flex 1
53+
:keyboardShouldPersistTaps :always
54+
:header [cool-preview]
55+
:key-fn str}]])

‎translations/en.json

+1
Original file line numberDiff line numberDiff line change
@@ -1216,6 +1216,7 @@
12161216
"token-auto-validate-name-error": "Wrong name for token {{symbol}} at address {{address}} - set to {{expected}} but detected as {{actual}}",
12171217
"token-auto-validate-symbol-error": "Wrong symbol for token {{symbol}} at address {{address}} - set to {{expected}} but detected as {{actual}}",
12181218
"token-details": "Token details",
1219+
"token-price": "Token Price",
12191220
"topic-name-error": "Use only lowercase letters (a to z), numbers & dashes (-). Do not use chat keys",
12201221
"transaction": "Transaction",
12211222
"transaction-data": "Transaction data",

0 commit comments

Comments
 (0)