Skip to content

Commit 2e63ee8

Browse files
siddarthkayandresceballosm
siddarthkay
and
andresceballosm
authored
feat: add tags - network tags component to quo2
 Co-authored-by: andresceballosm <[email protected]>
1 parent a218499 commit 2e63ee8

File tree

8 files changed

+151
-9
lines changed

8 files changed

+151
-9
lines changed

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
[quo2.components.markdown.text :as text]
44
[quo2.components.common.notification-dot.view :as notification-dot]
55
[quo2.components.tabs.tab.style :as style]
6-
[quo2.theme :as theme]
6+
[quo2.theme :as quo.theme]
77
[react-native.core :as rn]
88
[react-native.svg :as svg]))
99

@@ -47,7 +47,7 @@
4747
(vector? children)
4848
children)])
4949

50-
(defn- themed-view
50+
(defn- view-internal
5151
[{:keys [accessibility-label
5252
active
5353
before
@@ -104,4 +104,4 @@
104104
:disabled disabled
105105
:background-color background-color}])]]))
106106

107-
(def view (theme/with-theme themed-view))
107+
(def view (quo.theme/with-theme view-internal))

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
(ns quo2.components.tags.network-tags.component-spec
2+
(:require [quo2.components.tags.network-tags.view :as network-tags]
3+
[test-helpers.component :as h]))
4+
5+
(h/describe "network-tags component"
6+
(h/test "renders network tags with single network"
7+
(h/render [network-tags/view
8+
{:title "Network Tags"
9+
:networks [{:source "network-icon.png"}]}])
10+
(h/is-truthy (h/get-by-text "Network Tags")))
11+
12+
(h/test "renders network tags with multiple networks"
13+
(h/render [network-tags/view
14+
{:title "Multiple Networks"
15+
:networks [{:source "network-icon1.png"}
16+
{:source "network-icon2.png"}
17+
{:source "network-icon3.png"}]
18+
:size :size/s-32}])
19+
(h/is-truthy (h/get-by-text "Multiple Networks"))))

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

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
(ns quo2.components.tags.network-tags.style
2+
(:require [quo2.foundations.colors :as colors]))
3+
4+
(defn container
5+
[{:keys [status theme blur?]}]
6+
{:flex-direction :row
7+
:align-self :flex-start
8+
:background-color (when (= status :error)
9+
(colors/theme-colors
10+
(colors/custom-color :danger 50 10)
11+
(colors/custom-color :danger 60 10)
12+
theme))
13+
:border-width 1
14+
:border-color (cond (= status :error)
15+
(colors/theme-colors
16+
(colors/custom-color :danger 50 20)
17+
(colors/custom-color :danger 60 20)
18+
theme)
19+
(and blur? (= status :default)) (colors/theme-colors
20+
colors/neutral-80-opa-5
21+
colors/white-opa-5
22+
theme)
23+
:else (colors/theme-colors
24+
colors/neutral-20
25+
colors/neutral-80
26+
theme))
27+
:border-radius 8
28+
:padding-left 5
29+
:padding-right 5
30+
:padding-top 3
31+
:padding-bottom 2})
32+
33+
(defn title-style
34+
[{:keys [status theme]}]
35+
{:padding-left 4
36+
:margin-top -1
37+
:color (when (= status :error)
38+
(colors/theme-colors
39+
(colors/custom-color :danger 50)
40+
(colors/custom-color :danger 60)
41+
theme))})

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

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
(ns quo2.components.tags.network-tags.view
2+
(:require [quo2.components.list-items.preview-list.view :as preview-list]
3+
[quo2.components.tags.network-tags.style :as style]
4+
[quo2.components.markdown.text :as text]
5+
[react-native.core :as rn]
6+
[quo2.theme :as quo.theme]))
7+
8+
(defn- view-internal
9+
[{:keys [title networks status theme blur?] :or {status :default}}]
10+
[rn/view
11+
{:style (style/container {:status status
12+
:theme theme
13+
:blur? blur?})}
14+
[preview-list/view
15+
{:type :network
16+
:number (count networks)
17+
:size :size/s-16} networks]
18+
[text/text
19+
{:weight :medium
20+
:size :paragraph-2
21+
:style (style/title-style {:status status
22+
:theme theme})}
23+
title]])
24+
25+
(def view (quo.theme/with-theme view-internal))

‎src/quo2/core.cljs

+6-4
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
quo2.components.tabs.segmented-tab
108108
quo2.components.tabs.tabs.view
109109
quo2.components.tags.context-tag.view
110+
quo2.components.tags.network-tags.view
110111
quo2.components.tags.number-tag.view
111112
quo2.components.tags.permission-tag
112113
quo2.components.tags.status-tags
@@ -311,13 +312,14 @@
311312
(def account-selector quo2.components.tabs.account-selector/account-selector)
312313

313314
;;;; Tags
314-
(def tag quo2.components.tags.tag/tag)
315-
(def tags quo2.components.tags.tags/tags)
315+
(def context-tag quo2.components.tags.context-tag.view/view)
316+
(def network-tags quo2.components.tags.network-tags.view/view)
317+
(def number-tag quo2.components.tags.number-tag.view/view)
316318
(def permission-tag quo2.components.tags.permission-tag/tag)
317319
(def status-tag quo2.components.tags.status-tags/status-tag)
320+
(def tag quo2.components.tags.tag/tag)
321+
(def tags quo2.components.tags.tags/tags)
318322
(def token-tag quo2.components.tags.token-tag/tag)
319-
(def context-tag quo2.components.tags.context-tag.view/view)
320-
(def number-tag quo2.components.tags.number-tag.view/view)
321323

322324
;;;; Text combinations
323325
(def text-combinations quo2.components.text-combinations.view/view)

‎src/quo2/core_spec.cljs

+1
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
[quo2.components.settings.category.component-spec]
5959
[quo2.components.settings.data-item.component-spec]
6060
[quo2.components.share.share-qr-code.component-spec]
61+
[quo2.components.tags.network-tags.component-spec]
6162
[quo2.components.tags.status-tags-component-spec]
6263
[quo2.components.wallet.account-card.component-spec]
6364
[quo2.components.wallet.account-overview.component-spec]

‎src/status_im2/contexts/quo_preview/main.cljs

+5-2
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104
[status-im2.contexts.quo-preview.tabs.tabs :as tabs]
105105
[status-im2.contexts.quo-preview.empty-state.empty-state :as empty-state]
106106
[status-im2.contexts.quo-preview.tags.context-tags :as context-tags]
107+
[status-im2.contexts.quo-preview.tags.network-tags :as network-tags]
107108
[status-im2.contexts.quo-preview.tags.number-tag :as number-tag]
108109
[status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
109110
[status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
@@ -338,14 +339,16 @@
338339
:component account-selector/preview-this}]
339340
:tags [{:name :context-tags
340341
:component context-tags/preview-context-tags}
342+
{:name :network-tags
343+
:component network-tags/preview}
341344
{:name :number-tag
342345
:component number-tag/preview}
343-
{:name :tags
344-
:component tags/preview-tags}
345346
{:name :permission-tag
346347
:component permission-tag/preview-permission-tag}
347348
{:name :status-tags
348349
:component status-tags/preview-status-tags}
350+
{:name :tags
351+
:component tags/preview-tags}
349352
{:name :token-tag
350353
:component token-tag/preview-token-tag}]
351354
:text-combinations [{:name :text-combinations

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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
(ns status-im2.contexts.quo-preview.tags.network-tags
2+
(:require [quo2.core :as quo]
3+
[quo2.foundations.resources :as resources]
4+
[status-im2.contexts.quo-preview.preview :as preview]
5+
[react-native.core :as rn]
6+
[reagent.core :as reagent]))
7+
8+
(def community-networks
9+
[[{:source (resources/get-network :ethereum)}]
10+
[{:source (resources/get-network :arbitrum)}
11+
{:source (resources/get-network :ethereum)}]
12+
[{:source (resources/get-network :arbitrum)}
13+
{:source (resources/get-network :optimism)}
14+
{:source (resources/get-network :ethereum)}]])
15+
16+
(def descriptor
17+
[{:type :select
18+
:key :status
19+
:options [{:key :error}
20+
{:key :default}]}
21+
{:type :text
22+
:key :title}
23+
{:type :select
24+
:key :networks
25+
:options [{:key 1}
26+
{:key 2}
27+
{:key 3}]}
28+
{:type :boolean
29+
:key :blur?}])
30+
31+
32+
(defn preview
33+
[]
34+
(let [state (reagent/atom {:title "Tag"
35+
:status :default
36+
:networks 3})]
37+
(fn []
38+
[preview/preview-container
39+
{:state state
40+
:descriptor descriptor
41+
:blur? (:blur? @state)
42+
:show-blur-background? true}
43+
[rn/view
44+
{:style {:align-self :center
45+
:justify-content :center
46+
:flex 1}}
47+
[quo/network-tags
48+
{:networks (nth community-networks (dec (:networks @state)))
49+
:status (:status @state)
50+
:title (:title @state)
51+
:blur? (:blur? @state)}]]])))

0 commit comments

Comments
 (0)