feat: add token tag component (#13599) (#13644)

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]]))

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)]))

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}

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}]])