From 47a31ae0aa2eb5ab8626a7cbbe7fab26b366faed Mon Sep 17 00:00:00 2001
From: Jamie Caprani <jamiecaprani@gmail.com>
Date: Thu, 25 Aug 2022 14:48:29 +0100
Subject: [PATCH] feat: add token tag component (#13599) (#13644)

---
 resources/images/icons/purchasable12@2x.png   | Bin 0 -> 629 bytes
 resources/images/icons/purchasable12@3x.png   | Bin 0 -> 806 bytes
 .../images/icons/required_checkmark12@2x.png  | Bin 0 -> 262 bytes
 .../images/icons/required_checkmark12@3x.png  | Bin 0 -> 336 bytes
 src/quo2/components/tag.cljs                  |  51 +++++++++++++
 src/quo2/components/token_tag.cljs            |  55 ++++++++++++++
 src/quo2/screens/main.cljs                    |   4 +
 src/quo2/screens/token_tag.cljs               |  69 ++++++++++++++++++
 8 files changed, 179 insertions(+)
 create mode 100644 resources/images/icons/purchasable12@2x.png
 create mode 100644 resources/images/icons/purchasable12@3x.png
 create mode 100644 resources/images/icons/required_checkmark12@2x.png
 create mode 100644 resources/images/icons/required_checkmark12@3x.png
 create mode 100644 src/quo2/components/tag.cljs
 create mode 100644 src/quo2/components/token_tag.cljs
 create mode 100644 src/quo2/screens/token_tag.cljs

diff --git a/resources/images/icons/purchasable12@2x.png b/resources/images/icons/purchasable12@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..01ad5e35c57f45261640e13e19c31a98b3b0f8e1
GIT binary patch
literal 629
zcmV-*0*d{KP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0t!h)K~#7FwU)nb
z(@+$~zvJ9WY)xApz#|h1oiagSDpUIaNE8VqB!(J^B|?BJKw?0`OC=-_bYOt3-IyTV
zGPQXGKS0wuQkSZBZ@&{cZPM6jqQ*Zd$^8?5pMCGS=U6ZT&-2SiFl%hqEW{O9SH~?7
z3D6Ret&%<2{u=mUo`z%%KKFb#hWV+&7y}EtIfG<9%cyjD;MvQMYYCj+biRc#5lH0}
z&gx?I!SQbMUo+R>srTU>e?C$C1|~<ZS)vJOvNL3$cdp{NJ~f(jdQZ~b16}hIm_2sN
zm=2Lad`I`h(H_P9tHc-PXYuXJ>+a_!+gDIdg9MJ=J;fhm`qWk#<_?`!P!I+sPnT#J
zg(3G0zbjc&3v;u%{du;n9sGa$urs8gCtn!*78&SfP6ER`bKF6}7$&i>m&E$1zuy?>
zYnZ-z@u=JWyzvX|gAT?ZG87Nla4*m7A4CIvi;I<Pb8de;gBF*_?w~lfc@B~Q1ra0O
zayA2B*P?+bqcwusp-G*d7$!T6$Va-Vd7(HgjwoRP(snmpx0;Qp!eYUkw1g=@o%)a9
z?cZ|)WsmuLv3j3#Qp2^d>)(Sn=XGVEqU|>SH~1tSx>PY?RZCw4>iyzF28uq(?dsh>
z0%uNg@>B+m1o6Y(vh*XPu3|oSOER-8)~@glE4`wWp8inJkcN30iJ6=M<r%osu{r9`
P00000NkvXXu0mjf<6jss

literal 0
HcmV?d00001

diff --git a/resources/images/icons/purchasable12@3x.png b/resources/images/icons/purchasable12@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb0b99464fa314d82bfb3aa28925a2af2090155c
GIT binary patch
literal 806
zcmV+>1KIqEP)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0=r2>K~#7F&6qok
z(?Af0|6L~q72&uVjC49W5}GIi36dTJlviDX0MQXz1e^g0i3-ypL`bf>5)kw;4LVVP
zMTbOTsAxczpiAOq#(5~oC9$2SKPmAfyS9JL%syrXB672A=q-`F1m$Hs$ULA@0!VS2
z0$j2kG94j=rK!f-=ceIAcsxYdj@Qc%iwbg^%sirDOCik{Pw(u8=^QBNTKQ3)gj5BT
zju}u;jwUoCNZ43G<+73bhr|w>m@j4%%?CBpa1mAz=SdTZ*JNg}0N7hev<jp0ON<iJ
zK(an-h^7@aAc({C7s)S+7So4K;VblqPxiNR&MZ+3lS#Dmv`5cFonc+YN>GKD<~@t8
zME5Tb8hZy(DQ;cB*=*XkKYsd(>fSp<h2F}JIKj3bGWO1rLp6Ya&~My+yxkK-p}K_?
z<0-GmSINU13z}~tl4mWFCcw*x39N-fb{;W-@;J?cbi{`|4|_eRS840w*tX4$<30N%
z*^~MPO$iDj#ez}@;7s-u!f<r$@Wj3$=BSiJ%wP}k!Zy)MJOhtobK@A+*V?!L{^R1?
z_n(*nH$icueXyD+Xp*aW=~&OUZ)Y*nEFFC~Qo#Fw`0#^rNZ5!E7R}VnH;4(WMb_F|
zNDHgSW-b1(_uz%9nHGtn+KsQipjYPo8jUswD}p!tl}^3Z+cDB;E75ly5vlFH_dhd1
z1!ULMy2j`Ix^p^LI6}L(9F_=q=UK(P`=tAOVCiU~Wzc15(*TF6^G=Ku#Ptyky(`Pe
zr;eDya7le&apj@cLZh%?QFcd+Gu)t!?7eTf>D;+p%BMr~&MD3r5>p~EzecqO9>-ku
zOC)V)9>+2CvQoDo97pH_D;6f(<x<oN#iB{CR+-m<)i6aWRWv%%6H4Xjr%qL;-hZS=
kk8~wG%M;R0PI097AM5rF*VmodU;qFB07*qoM6N<$g4gSBoB#j-

literal 0
HcmV?d00001

diff --git a/resources/images/icons/required_checkmark12@2x.png b/resources/images/icons/required_checkmark12@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..a1b9f51d1e205de7a22f4cbf3b32207d25595b1d
GIT binary patch
literal 262
zcmeAS@N?(olHy`uVBq!ia0vp^(jd&i1|)m0d<g|ooCO|{#S9E$svykh8Km+7D9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~z5f3~NKV@L(#+bah-8w_|@FW5IJTQn`UXp(-x
zX4NEZ(WPwR<o<%gu(507moR3o$^ZfWpS+x`bBgynxfstEyB0K|qoyk2;Und{O_Aj>
zI~FhJ6I;@J<z#A8tJ8%hsh9;1H$OM__|Gr8WszH$!HdWb-<LI&?QzUo({*eMPw}=&
z-g`=$7i@A6(~jflN%<LcB5Jk4ZgD48zN^~r?x@dU660RB=AFzDpfedfUHx3vIVCg!
E01^~jSO5S3

literal 0
HcmV?d00001

diff --git a/resources/images/icons/required_checkmark12@3x.png b/resources/images/icons/required_checkmark12@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..07791219051e53c7096cac87aea2d443aa488a3b
GIT binary patch
literal 336
zcmeAS@N?(olHy`uVBq!ia0vp^njp-<1|(M`Fnj}2oCO|{#S9FJ79h;%I?XTvD9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~z5|EZ^oV@L(#+iQWmhYSRcedK4KY#_tKz97Xz
zf@?*y=K)4P2KK{@77uo`MQ<uO{$S<a_TQ@Coo0QRKe3E?PVqU*=VAhZa}ER_UgViz
zGK1TfDO2dy0Vd8nmt%U?1k7T|tC;7N(0fUx;B2u!ll(R2c$?^m1B%-7W((ao$kq2U
zQ%`~Y-is5L|3wH-IUpzb=+asKkLIbq%UR+kG}|1!dEdOv>w#b7<oBx{_DcPVk&Vi*
zQTeDceLuHqNr038lKZWxag`rW)^Pf6)p*%|fq`4)OO{!|5yw!Ws<zOgf}EN%T|@a7
dbBfokF+UOMdrTsr?+MVu44$rjF6*2UngI3Ze+&Qs

literal 0
HcmV?d00001

diff --git a/src/quo2/components/tag.cljs b/src/quo2/components/tag.cljs
new file mode 100644
index 0000000000..3abb26359e
--- /dev/null
+++ b/src/quo2/components/tag.cljs
@@ -0,0 +1,51 @@
+(ns quo2.components.tag
+  (:require [quo.react-native :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo.theme :as theme]
+            [quo2.components.text :as text]))
+
+(def themes {:light {:background-color colors/neutral-20}
+             :dark {:background-color colors/neutral-80}})
+
+(defn get-value-from-size [size big-option small-option]
+  (if  (= size :big) big-option small-option))
+
+(defn tag-container [size]
+  {:height (get-value-from-size size 32 24)
+   :align-items :center
+   :flex-direction :row
+   :border-radius 20})
+
+(defn tag  "[tag opts \"label\"]]
+   opts
+   {
+    :size :small/:big
+    :token-img-src :token-img-src
+    :token-img-style {}
+    :border-color :color
+    :overlay child-elements
+    }"
+  [_ _]
+  (fn [{:keys [size token-img-src token-img-style border-color overlay]
+        :or {size :small}} label]
+    [rn/view
+     {:style (when border-color
+               {:border-color border-color
+                :border-radius 20
+                :border-width 1})}
+     [rn/view
+      {:style   (merge (tag-container size) (get themes (theme/get-theme)))}
+      [rn/image
+       {:source token-img-src
+        :style (merge
+                {:height (get-value-from-size size 28 20)
+                 :width (get-value-from-size size 28 20)
+                 :margin-left 2
+                 :margin-right  (get-value-from-size size 8 6)} token-img-style)}]
+      [text/text
+       {:weight :medium
+        :number-of-lines 1
+        :style
+        {:margin-right (get-value-from-size size 12 11)}
+        :size (get-value-from-size size :paragraph-2 :label)} label]
+      overlay]]))
\ No newline at end of file
diff --git a/src/quo2/components/token_tag.cljs b/src/quo2/components/token_tag.cljs
new file mode 100644
index 0000000000..18c72862e6
--- /dev/null
+++ b/src/quo2/components/token_tag.cljs
@@ -0,0 +1,55 @@
+(ns quo2.components.token-tag
+  (:require [quo2.foundations.colors :as colors]
+            [quo.react-native :as rn]
+            [quo.theme :as theme]
+            [status-im.ui.components.icons.icons :as icons]
+            [quo2.components.tag :as tag]))
+
+(defn get-value-from-size [size big-option small-option]
+  (if  (= size :big) big-option small-option))
+
+(def icon-container-styles
+  {:display :flex
+   :align-items :center
+   :justify-content :center
+   :position :absolute
+   :border-radius 20
+   :margin-left 2})
+
+(defn token-tag
+  "[token-tag opts]
+   opts
+   {
+    :token string
+    :value string
+    :size :small/:big
+    :token-img-src :token-img-src
+    :border-color :color
+    :is-required true/false
+    :is-purchasable true/false
+    }"
+  [_ _]
+  (fn [{:keys [token value size token-img-src border-color is-required is-purchasable]
+        :or
+        {size :small border-color (if (=  (theme/get-theme) :dark) colors/purple-60 colors/purple-50)}}]
+
+    [tag/tag {:size size
+              :token-img-src token-img-src
+              :border-color (when is-required border-color)
+              :overlay
+              (when (or is-required is-purchasable)
+                [rn/view
+                 {:style (merge icon-container-styles
+                                {:width 15.5
+                                 :height 15.5
+                                 :background-color border-color
+                                 :border-color (if (=  (theme/get-theme) :dark) colors/black colors/white)
+                                 :border-width 1
+                                 :right  (get-value-from-size size -3.75 -5.75)
+                                 :bottom (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2)) ; (- height (icon-height/2) spacing)
+                                 })}
+                 [icons/icon (if is-required :main-icons2/required-checkmark12 :main-icons2/purchasable12)
+                  {:no-color true
+                   :width 13.5
+                   :height 13.5}]])}
+     (str value " " token)]))
diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs
index 1c1ad6eb71..527b1dd931 100644
--- a/src/quo2/screens/main.cljs
+++ b/src/quo2/screens/main.cljs
@@ -11,6 +11,7 @@
             [quo2.screens.context-tags :as context-tags]
             [quo2.screens.group-avatar :as group-avatar]
             [quo2.screens.activity-logs :as activity-logs]
+            [quo2.screens.token-tag :as token-tag]
             [quo2.screens.counter :as counter]
             [quo2.screens.segmented :as segmented]
             [quo2.screens.info-message :as info-message]
@@ -42,6 +43,9 @@
               {:name      :quo2-tabs
                :insets    {:top false}
                :component tabs/preview-tabs}
+              {:name      :quo2-token-tag
+               :insets    {:top false}
+               :component token-tag/preview-token-tag}
               {:name      :quo2-segmented
                :insets    {:top false}
                :component segmented/preview-segmented}
diff --git a/src/quo2/screens/token_tag.cljs b/src/quo2/screens/token_tag.cljs
new file mode 100644
index 0000000000..c0d9d15501
--- /dev/null
+++ b/src/quo2/screens/token_tag.cljs
@@ -0,0 +1,69 @@
+(ns quo2.screens.token-tag
+  (:require [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [reagent.core :as reagent]
+            [quo2.components.token-tag :as quo2]
+            [quo.design-system.colors :as colors]))
+
+(def descriptor [{:label   "Size:"
+                  :key     :size
+                  :type    :select
+                  :options [{:key   :big
+                             :value "big"}
+                            {:key   :small
+                             :value "small"}]}
+                 {:label   "Value:"
+                  :key     :value
+                  :type    :select
+                  :options [{:key   0
+                             :value "0"}
+                            {:key   10
+                             :value "10"}
+                            {:key   100
+                             :value "100"}
+                            {:key   1000
+                             :value "1000"}
+                            {:key   10000
+                             :value "10000"}]}
+
+                 {:label   "Community Color:"
+                  :key     :border-color
+                  :type    :select
+                  :options [{:key   "#00a191"
+                             :value "green"}
+                            {:key   "red"
+                             :value "red"}]}
+                 {:label   "Is Required:"
+                  :key     :is-required
+                  :type  :boolean}
+                 {:label   "Is Purchasable:"
+                  :key     :is-purchasable
+                  :type  :boolean}
+                 {:label   "Token:"
+                  :key     :token
+                  :type    :select
+                  :options [{:key   "ETH"
+                             :value "ETH"}
+                            {:key   "SNT"
+                             :value "SNT"}]}])
+
+(def eth-token (js/require "../resources/images/tokens/mainnet/ETH.png"))
+(def snt-token (js/require "../resources/images/tokens/mainnet/SNT.png"))
+
+(defn cool-preview []
+  (let [state (reagent/atom {:size :big :value 10 :token "ETH" :is-required true :is-purchasable false})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptor]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [quo2/token-tag  (merge @state {:token-img-src (if (=  (get-in @state [:token]) "ETH") eth-token snt-token)})]]])))
+
+(defn preview-token-tag []
+  [rn/view {:background-color (:ui-background @colors/theme)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])
\ No newline at end of file