feat: implement summary tag component (#17858)

Signed-off-by: Brian Sztamfater <brian@status.im>

src/quo/components/tags/summary_tag/component_spec.cljs

@@ -0,0 +1,53 @@
+(ns quo.components.tags.summary-tag.component-spec
+  (:require
+    [quo.components.tags.summary-tag.view :as summary-tag]
+    [test-helpers.component :as h]))
+
+(h/describe "Summary tag component tests"
+  (h/test "Basic render"
+    (h/render [summary-tag/view])
+    (h/is-truthy (h/query-by-label-text :container)))
+
+  (h/test "Account view render"
+    (h/render [summary-tag/view
+               {:type                :account
+                :label               "Alice's Account"
+                :customization-color "#ff0000"
+                :emoji               "🎉"}])
+    (h/is-truthy (h/get-by-text "Alice's Account")))
+
+  (h/test "Network view render"
+    (h/render [summary-tag/view
+               {:type         :network
+                :label        "Ethereum Network"
+                :image-source "path/to/ethereum-logo.png"}])
+    (h/is-truthy (h/get-by-text "Ethereum Network")))
+
+  (h/test "Saved address view render"
+    (h/render [summary-tag/view
+               {:type                :saved-address
+                :label               "Charlie's Wallet"
+                :customization-color "#00ff00"}])
+    (h/is-truthy (h/get-by-text "Charlie's Wallet")))
+
+  (h/test "Collectible view render"
+    (h/render [summary-tag/view
+               {:type         :collectible
+                :label        "Rare Artifact"
+                :image-source "path/to/artifact-image.png"}])
+    (h/is-truthy (h/get-by-text "Rare Artifact")))
+
+  (h/test "User view render"
+    (h/render [summary-tag/view
+               {:type                :user
+                :label               "Bob Smith"
+                :image-source        "path/to/profile-pic.png"
+                :customization-color "#0000ff"}])
+    (h/is-truthy (h/get-by-text "Bob Smith")))
+
+  (h/test "Token view render"
+    (h/render [summary-tag/view
+               {:type         :token
+                :label        "1,000 SNT"
+                :image-source "path/to/token-image.png"}])
+    (h/is-truthy (h/get-by-text "1,000 SNT"))))

src/quo/components/tags/summary_tag/style.cljs

@@ -0,0 +1,29 @@
+(ns quo.components.tags.summary-tag.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn main
+  [{:keys [type theme customization-color]}]
+  {:justify-content  :center
+   :align-items      :center
+   :height           32
+   :padding-left     4
+   :padding-right    10
+   :flex-direction   :row
+   :border-radius    (if (#{:account :collectible} type) 10 16)
+   :background-color (colors/resolve-color customization-color theme 10)})
+
+(defn label
+  [type theme]
+  {:color       (colors/theme-colors colors/neutral-100 colors/white theme)
+   :margin-left (if (= type :address) 6 4)})
+
+(def collectible-image
+  {:width         24
+   :height        24
+   :border-radius 10})
+
+(def token-image
+  {:width         24
+   :height        24
+   :border-radius 12})

src/quo/components/tags/summary_tag/view.cljs

@@ -0,0 +1,67 @@
+(ns quo.components.tags.summary-tag.view
+  (:require
+    [quo.components.avatars.account-avatar.view :as account-avatar]
+    [quo.components.avatars.user-avatar.view :as user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
+    [quo.components.markdown.text :as text]
+    [quo.components.tags.summary-tag.style :as style]
+    [quo.foundations.colors :as colors]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]))
+
+(defn- left-view
+  [{:keys [label type customization-color emoji image-source]}]
+  (case type
+    :account
+    [account-avatar/view
+     {:customization-color customization-color
+      :size                24
+      :emoji               emoji
+      :type                :default}]
+    :network
+    [rn/image
+     {:source image-source
+      :style  style/token-image}]
+    :saved-address
+    [wallet-user-avatar/wallet-user-avatar
+     {:full-name           label
+      :size                :size-24
+      :customization-color customization-color}]
+    :collectible
+    [rn/image
+     {:source image-source
+      :style  style/collectible-image}]
+    :user
+    [user-avatar/user-avatar
+     {:full-name           label
+      :size                :xs
+      :profile-picture     image-source
+      :customization-color customization-color}]
+    :token
+    [rn/image
+     {:source image-source
+      :style  style/token-image}]
+    nil))
+
+(defn- view-internal
+  "Options:
+    - :label - string - tag label
+    - :customization-color - color - It will be passed down to components that
+      should vary based on a custom color.
+    - :type - :token / :user / :collectible / :saved-address / :network / :account
+    - :emoji - string - emoji used for displaying account avatar
+    - :image-source - resource - image to display on :network, :collectible :user and :token
+    - :theme - :light / :dark"
+  [{:keys [label customization-color type theme]
+    :as   props
+    :or   {customization-color colors/neutral-80-opa-5}}]
+  [rn/view
+   {:accessibility-label :container
+    :style               (style/main (assoc props :customization-color customization-color))}
+   [left-view props]
+   [text/text
+    {:style  (style/label type theme)
+     :weight :semi-bold
+     :size   :heading-1} label]])
+
+(def view (quo.theme/with-theme view-internal))

src/quo/core.cljs

@@ -131,6 +131,7 @@
     quo.components.tags.number-tag.view
     quo.components.tags.permission-tag
     quo.components.tags.status-tags
+    quo.components.tags.summary-tag.view
     quo.components.tags.tag
     quo.components.tags.tags
     quo.components.tags.tiny-tag.view
@@ -360,6 +361,7 @@
 (def number-tag quo.components.tags.number-tag.view/view)
 (def permission-tag quo.components.tags.permission-tag/tag)
 (def status-tag quo.components.tags.status-tags/status-tag)
+(def summary-tag quo.components.tags.summary-tag.view/view)
 (def tag quo.components.tags.tag/tag)
 (def tags quo.components.tags.tags/tags)
 (def tiny-tag quo.components.tags.tiny-tag.view/view)

src/quo/core_spec.cljs

@@ -73,6 +73,7 @@
     [quo.components.switchers.group-messaging-card.component-spec]
     [quo.components.tags.network-tags.component-spec]
     [quo.components.tags.status-tags-component-spec]
+    [quo.components.tags.summary-tag.component-spec]
     [quo.components.tags.tiny-tag.component-spec]
     [quo.components.wallet.account-card.component-spec]
     [quo.components.wallet.account-origin.component-spec]

src/status_im2/contexts/quo_preview/main.cljs

@@ -153,6 +153,7 @@
     [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]
+    [status-im2.contexts.quo-preview.tags.summary-tag :as summary-tag]
     [status-im2.contexts.quo-preview.tags.tag :as tag]
     [status-im2.contexts.quo-preview.tags.tags :as tags]
     [status-im2.contexts.quo-preview.tags.tiny-tag :as tiny-tag]
@@ -433,6 +434,8 @@
                         :component permission-tag/view}
                        {:name      :status-tags
                         :component status-tags/view}
+                       {:name      :summary-tag
+                        :component summary-tag/view}
                        {:name      :tag
                         :component tag/view}
                        {:name      :tags

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

@@ -0,0 +1,66 @@
+(ns status-im2.contexts.quo-preview.tags.summary-tag
+  (:require
+    [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im2.common.resources :as resources]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+(defn data
+  [type]
+  (case type
+    :token
+    {:customization-color "#9999991A"
+     :label               "150 ETH"
+     :image-source        (quo.resources/get-token :eth)}
+    :address
+    {:label "0x39c...Bd2"}
+    :user
+    {:image-source        (resources/mock-images :user-picture-male4)
+     :customization-color :blue
+     :label               "Mark Libot"}
+    :collectible
+    {:label               "Isekai #1"
+     :image-source        (resources/mock-images :collectible2)
+     :customization-color :yellow}
+    :network
+    {:image-source (quo.resources/get-network :ethereum)
+     :label        "Mainnet"}
+    :saved-address
+    {:customization-color :flamingo
+     :label               "Peter Lambo"}
+    :account
+    {:label               "Account"
+     :emoji               "🍿"
+     :customization-color :purple}))
+
+(def descriptor
+  [{:key     :type
+    :type    :select
+    :options [{:value "Token"
+               :key   :token}
+              {:value "Address"
+               :key   :address}
+              {:value "User"
+               :key   :user}
+              {:value "Collectible"
+               :key   :collectible}
+              {:value "Network"
+               :key   :network}
+              {:value "Saved address"
+               :key   :saved-address}
+              {:value "Account"
+               :key   :account}]}])
+
+(defn view
+  []
+  (let [state (reagent/atom
+               (merge {:type :token}
+                      (data :token)))]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [rn/view {:style {:align-items :center}}
+        [quo/summary-tag (merge @state (data (:type @state)))]]])))