Skip to content

Commit dcc88fc

Browse files
J-Son89J-Son89
committed
feat: add token tag component (#13599)
1 parent ab1eb22 commit dcc88fc

File tree

9 files changed

+140
-0
lines changed

9 files changed

+140
-0
lines changed

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

1.88 KB
Loading

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

2.7 KB
Loading

‎resources/images/icons/default-native@2x.png

1.07 KB
Loading

‎resources/images/icons/default-native@3x.png

1.07 KB
Loading

‎resources/images/icons/default-token@2x.png

2.49 KB
Loading

‎resources/images/icons/default-token@3x.png

3.59 KB
Loading

‎src/quo2/components/token_tag.cljs

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
(ns quo2.components.token-tag
2+
(:require [quo2.foundations.colors :as colors]
3+
[quo.react-native :as rn]
4+
[quo.theme :as theme]
5+
[status-im.ui.components.icons.icons :as icons]
6+
[quo2.components.text :as text]))
7+
8+
(def themes {:light {:background-color colors/neutral-20}
9+
:dark {:background-color colors/neutral-80}})
10+
11+
(defn get-value-from-size [size, big-option, small-option]
12+
(if (= size :big) big-option small-option))
13+
14+
(defn style-container [size border-color is-required]
15+
(merge {:height 32
16+
:min-width (get-value-from-size size 94 76)
17+
:align-items :center
18+
:flex-direction :row
19+
:left 0
20+
:border-radius 100
21+
:padding-right 10}
22+
(if is-required {:border-color border-color
23+
:border-width 1} {})))
24+
25+
(defn token-tag
26+
"[token-tag opts \"label\"]
27+
opts
28+
{
29+
:token string
30+
:value string
31+
:size :small/:big
32+
:icon-name :icon-name
33+
:border-color :color
34+
:is-required true/false
35+
:is-purchasable true/false
36+
}"
37+
[_ _]
38+
(fn [{:keys [token value size icon-name border-color is-required is-purchasable] :or {size :small}}]
39+
[rn/view {:style (merge (style-container size border-color is-required) (get-in themes [(theme/get-theme)]))}
40+
41+
[rn/view {:style {:margin-left 2
42+
:margin-right (get-value-from-size size 8 6)}}
43+
[icons/icon icon-name {:no-color true
44+
:size 24}]]
45+
46+
[text/text {:weight :medium
47+
:number-of-lines 1
48+
:size (get-value-from-size size :paragraph-2 :label)
49+
:padding 2
50+
:padding-top 12
51+
:margin-right (get-value-from-size size 12 10)} value " " token]
52+
(when (or is-required is-purchasable) [rn/view {:style {:display :flex
53+
:align-items :center
54+
:justify-content :center
55+
:position :absolute
56+
:background-color (if is-required border-color colors/neutral-50)
57+
:border-radius 100
58+
:border-color (if (= (theme/get-theme) :dark) colors/black colors/white)
59+
:border-width 1
60+
:right -20
61+
:bottom 16
62+
:margin-left 2
63+
:margin-right (get-value-from-size size 8 6)}}
64+
65+
(when is-required [icons/icon :main-icons2/checkmark {:color colors/white
66+
:size 4}])
67+
(when is-purchasable [icons/icon :main-icons2/add {:color colors/white
68+
:size 4}])])]))

‎src/quo2/screens/main.cljs

+4
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
[quo2.screens.button :as button]
77
[quo2.screens.text :as text]
88
[quo2.screens.tabs :as tabs]
9+
[quo2.screens.token-tag :as token-tag]
910
[quo2.screens.counter :as counter]
1011
[quo2.screens.segmented :as segmented]
1112
[quo.core :as quo]))
@@ -19,6 +20,9 @@
1920
{:name :quo2-tabs
2021
:insets {:top false}
2122
:component tabs/preview-tabs}
23+
{:name :quo2-token_tag
24+
:insets {:top false}
25+
:component token-tag/preview-token-tag}
2226
{:name :quo2-segmented
2327
:insets {:top false}
2428
:component segmented/preview-segmented}

‎src/quo2/screens/token_tag.cljs

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
(ns quo2.screens.token-tag
2+
(:require [quo.react-native :as rn]
3+
[quo.previews.preview :as preview]
4+
[reagent.core :as reagent]
5+
[quo2.components.token-tag :as quo2]
6+
[quo.design-system.colors :as colors]))
7+
8+
(def descriptor [{:label "Size:"
9+
:key :size
10+
:type :select
11+
:options [{:key :big
12+
:value "big"}
13+
{:key :small
14+
:value "small"}]}
15+
{:label "Value:"
16+
:key :value
17+
:type :select
18+
:options [{:key 0
19+
:value "0"}
20+
{:key 10
21+
:value "10"}
22+
{:key 100
23+
:value "100"}
24+
{:key 1000
25+
:value "1000"}
26+
{:key 10000
27+
:value "10000"}]}
28+
29+
{:label "Border Color:"
30+
:key :border-color
31+
:type :select
32+
:options [{:key "red"
33+
:value "red"}
34+
{:key "green"
35+
:value "green"}
36+
{:key "yellow"
37+
:value "yellow"}]}
38+
{:label "Is Required:"
39+
:key :is-required
40+
:type :boolean}
41+
{:label "Is Purchasable:"
42+
:key :is-purchasable
43+
:type :boolean}
44+
{:label "Token:"
45+
:key :token
46+
:type :select
47+
:options [{:key "ETH"
48+
:value "ETH"}
49+
{:key "SNT"
50+
:value "SNT"}]}])
51+
52+
(defn cool-preview []
53+
(let [state (reagent/atom {:size :big :value 10 :token "ETH" :border-color "green" :is-required false :is-purchasable false})]
54+
(fn []
55+
[rn/view {:margin-bottom 50
56+
:padding 16}
57+
[preview/customizer state descriptor]
58+
[rn/view {:padding-vertical 60
59+
:align-items :center}
60+
[quo2/token-tag (merge @state {:icon-name (if (= (get-in @state [:token]) "ETH") :main-icons2/default-native :main-icons2/SNT)})]]])))
61+
62+
(defn preview-token-tag []
63+
[rn/view {:background-color (:ui-background @colors/theme)
64+
:flex 1}
65+
[rn/flat-list {:flex 1
66+
:keyboardShouldPersistTaps :always
67+
:header [cool-preview]
68+
:key-fn str}]])

0 commit comments

Comments
 (0)