feat: add tags - network tags component to quo2

Co-authored-by: andresceballosm <ceballosmarandres@gmail.com>

src/quo2/components/tabs/tab/view.cljs

@@ -3,7 +3,7 @@
             [quo2.components.markdown.text :as text]
             [quo2.components.common.notification-dot.view :as notification-dot]
             [quo2.components.tabs.tab.style :as style]
-            [quo2.theme :as theme]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]
             [react-native.svg :as svg]))
 
@@ -47,7 +47,7 @@
      (vector? children)
      children)])
 
-(defn- themed-view
+(defn- view-internal
   [{:keys [accessibility-label
            active
            before
@@ -104,4 +104,4 @@
           :disabled         disabled
           :background-color background-color}])]]))
 
-(def view (theme/with-theme themed-view))
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/tags/network_tags/component_spec.cljs

@@ -0,0 +1,19 @@
+(ns quo2.components.tags.network-tags.component-spec
+  (:require [quo2.components.tags.network-tags.view :as network-tags]
+            [test-helpers.component :as h]))
+
+(h/describe "network-tags component"
+  (h/test "renders network tags with single network"
+    (h/render [network-tags/view
+               {:title    "Network Tags"
+                :networks [{:source "network-icon.png"}]}])
+    (h/is-truthy (h/get-by-text "Network Tags")))
+
+  (h/test "renders network tags with multiple networks"
+    (h/render [network-tags/view
+               {:title    "Multiple Networks"
+                :networks [{:source "network-icon1.png"}
+                           {:source "network-icon2.png"}
+                           {:source "network-icon3.png"}]
+                :size     :size/s-32}])
+    (h/is-truthy (h/get-by-text "Multiple Networks"))))

src/quo2/components/tags/network_tags/style.cljs

@@ -0,0 +1,41 @@
+(ns quo2.components.tags.network-tags.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [{:keys [status theme blur?]}]
+  {:flex-direction   :row
+   :align-self       :flex-start
+   :background-color (when (= status :error)
+                       (colors/theme-colors
+                        (colors/custom-color :danger 50 10)
+                        (colors/custom-color :danger 60 10)
+                        theme))
+   :border-width     1
+   :border-color     (cond (= status :error)
+                           (colors/theme-colors
+                            (colors/custom-color :danger 50 20)
+                            (colors/custom-color :danger 60 20)
+                            theme)
+                           (and blur? (= status :default)) (colors/theme-colors
+                                                            colors/neutral-80-opa-5
+                                                            colors/white-opa-5
+                                                            theme)
+                           :else (colors/theme-colors
+                                  colors/neutral-20
+                                  colors/neutral-80
+                                  theme))
+   :border-radius    8
+   :padding-left     5
+   :padding-right    5
+   :padding-top      3
+   :padding-bottom   2})
+
+(defn title-style
+  [{:keys [status theme]}]
+  {:padding-left 4
+   :margin-top   -1
+   :color        (when (= status :error)
+                   (colors/theme-colors
+                    (colors/custom-color :danger 50)
+                    (colors/custom-color :danger 60)
+                    theme))})

src/quo2/components/tags/network_tags/view.cljs

@@ -0,0 +1,25 @@
+(ns quo2.components.tags.network-tags.view
+  (:require [quo2.components.list-items.preview-list.view :as preview-list]
+            [quo2.components.tags.network-tags.style :as style]
+            [quo2.components.markdown.text :as text]
+            [react-native.core :as rn]
+            [quo2.theme :as quo.theme]))
+
+(defn- view-internal
+  [{:keys [title networks status theme blur?] :or {status :default}}]
+  [rn/view
+   {:style (style/container {:status status
+                             :theme  theme
+                             :blur?  blur?})}
+   [preview-list/view
+    {:type   :network
+     :number (count networks)
+     :size   :size/s-16} networks]
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  (style/title-style {:status status
+                                 :theme  theme})}
+    title]])
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -107,6 +107,7 @@
     quo2.components.tabs.segmented-tab
     quo2.components.tabs.tabs.view
     quo2.components.tags.context-tag.view
+    quo2.components.tags.network-tags.view
     quo2.components.tags.number-tag.view
     quo2.components.tags.permission-tag
     quo2.components.tags.status-tags
@@ -311,13 +312,14 @@
 (def account-selector quo2.components.tabs.account-selector/account-selector)
 
 ;;;; Tags
-(def tag quo2.components.tags.tag/tag)
-(def tags quo2.components.tags.tags/tags)
+(def context-tag quo2.components.tags.context-tag.view/view)
+(def network-tags quo2.components.tags.network-tags.view/view)
+(def number-tag quo2.components.tags.number-tag.view/view)
 (def permission-tag quo2.components.tags.permission-tag/tag)
 (def status-tag quo2.components.tags.status-tags/status-tag)
+(def tag quo2.components.tags.tag/tag)
+(def tags quo2.components.tags.tags/tags)
 (def token-tag quo2.components.tags.token-tag/tag)
-(def context-tag quo2.components.tags.context-tag.view/view)
-(def number-tag quo2.components.tags.number-tag.view/view)
 
 ;;;; Text combinations
 (def text-combinations quo2.components.text-combinations.view/view)

src/quo2/core_spec.cljs

@@ -58,6 +58,7 @@
     [quo2.components.settings.category.component-spec]
     [quo2.components.settings.data-item.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
+    [quo2.components.tags.network-tags.component-spec]
     [quo2.components.tags.status-tags-component-spec]
     [quo2.components.wallet.account-card.component-spec]
     [quo2.components.wallet.account-overview.component-spec]

src/status_im2/contexts/quo_preview/main.cljs

@@ -104,6 +104,7 @@
     [status-im2.contexts.quo-preview.tabs.tabs :as tabs]
     [status-im2.contexts.quo-preview.empty-state.empty-state :as empty-state]
     [status-im2.contexts.quo-preview.tags.context-tags :as context-tags]
+    [status-im2.contexts.quo-preview.tags.network-tags :as network-tags]
     [status-im2.contexts.quo-preview.tags.number-tag :as number-tag]
     [status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
     [status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
@@ -338,14 +339,16 @@
                         :component account-selector/preview-this}]
    :tags              [{:name      :context-tags
                         :component context-tags/preview-context-tags}
+                       {:name      :network-tags
+                        :component network-tags/preview}
                        {:name      :number-tag
                         :component number-tag/preview}
-                       {:name      :tags
-                        :component tags/preview-tags}
                        {:name      :permission-tag
                         :component permission-tag/preview-permission-tag}
                        {:name      :status-tags
                         :component status-tags/preview-status-tags}
+                       {:name      :tags
+                        :component tags/preview-tags}
                        {:name      :token-tag
                         :component token-tag/preview-token-tag}]
    :text-combinations [{:name      :text-combinations

src/status_im2/contexts/quo_preview/tags/network_tags.cljs

@@ -0,0 +1,51 @@
+(ns status-im2.contexts.quo-preview.tags.network-tags
+  (:require [quo2.core :as quo]
+            [quo2.foundations.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]))
+
+(def community-networks
+  [[{:source (resources/get-network :ethereum)}]
+   [{:source (resources/get-network :arbitrum)}
+    {:source (resources/get-network :ethereum)}]
+   [{:source (resources/get-network :arbitrum)}
+    {:source (resources/get-network :optimism)}
+    {:source (resources/get-network :ethereum)}]])
+
+(def descriptor
+  [{:type    :select
+    :key     :status
+    :options [{:key :error}
+              {:key :default}]}
+   {:type :text
+    :key  :title}
+   {:type    :select
+    :key     :networks
+    :options [{:key 1}
+              {:key 2}
+              {:key 3}]}
+   {:type :boolean
+    :key  :blur?}])
+
+
+(defn preview
+  []
+  (let [state (reagent/atom {:title    "Tag"
+                             :status   :default
+                             :networks 3})]
+    (fn []
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [rn/view
+        {:style {:align-self      :center
+                 :justify-content :center
+                 :flex            1}}
+        [quo/network-tags
+         {:networks (nth community-networks (dec (:networks @state)))
+          :status   (:status @state)
+          :title    (:title @state)
+          :blur?    (:blur? @state)}]]])))