Collection avatar component (#17462)

* Collection avatar component

src/quo2/components/avatars/collection_avatar/component_spec.cljs

@@ -0,0 +1,16 @@
+(ns quo2.components.avatars.collection-avatar.component-spec
+  (:require [quo2.components.avatars.collection-avatar.view :as collection-avatar]
+            [quo2.foundations.resources :as resources]
+            [test-helpers.component :as h]))
+
+(h/describe "collection avatar"
+  (h/describe "Profile picture"
+    (h/test "Doesn't crash without image"
+      (h/render
+       [collection-avatar/view])
+      (h/is-truthy (h/get-by-label-text :collection-avatar)))
+
+    (h/test "Renders with image"
+      (h/render
+       [collection-avatar/view {:image (resources/get-image :bored-ape)}])
+      (h/is-truthy (h/get-by-label-text :collection-avatar)))))

src/quo2/components/avatars/collection_avatar/style.cljs

@@ -0,0 +1,10 @@
+(ns quo2.components.avatars.collection-avatar.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn collection-avatar
+  [theme]
+  {:width         24
+   :height        24
+   :border-width  1
+   :border-color  (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+   :border-radius 6})

src/quo2/components/avatars/collection_avatar/view.cljs

@@ -0,0 +1,17 @@
+(ns quo2.components.avatars.collection-avatar.view
+  (:require [quo2.components.avatars.collection-avatar.style :as style]
+            [quo2.theme :as quo.theme]
+            [react-native.fast-image :as fast-image]))
+
+(defn- view-internal
+  "Opts:
+   
+    :image - collection image
+    :theme - keyword -> :light/:dark"
+  [{:keys [image theme]}]
+  [fast-image/fast-image
+   {:accessibility-label :collection-avatar
+    :source              image
+    :style               (style/collection-avatar theme)}])
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -3,6 +3,7 @@
   (:require
     quo2.components.avatars.account-avatar.view
     quo2.components.avatars.channel-avatar.view
+    quo2.components.avatars.collection-avatar.view
     quo2.components.avatars.group-avatar.view
     quo2.components.avatars.icon-avatar
     quo2.components.avatars.user-avatar.view
@@ -146,6 +147,7 @@
 ;;;; Avatar
 (def account-avatar quo2.components.avatars.account-avatar.view/view)
 (def channel-avatar quo2.components.avatars.channel-avatar.view/view)
+(def collection-avatar quo2.components.avatars.collection-avatar.view/view)
 (def group-avatar quo2.components.avatars.group-avatar.view/view)
 (def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar)
 (def user-avatar quo2.components.avatars.user-avatar.view/user-avatar)

src/quo2/foundations/resources.cljs

@@ -4,7 +4,8 @@
   {:keycard-logo       (js/require "../resources/images/ui2/keycard-logo.png")
    :keycard-chip-light (js/require "../resources/images/ui2/keycard-chip-light.png")
    :keycard-chip-dark  (js/require "../resources/images/ui2/keycard-chip-dark.png")
-   :keycard-watermark  (js/require "../resources/images/ui2/keycard-watermark.png")})
+   :keycard-watermark  (js/require "../resources/images/ui2/keycard-watermark.png")
+   :bored-ape          (js/require "../resources/images/mock2/bored-ape.png")})
 
 (defn get-image
   [k]

src/status_im2/common/resources.cljs

@@ -82,6 +82,7 @@
 
 (def mock-images
   {:diamond               (js/require "../resources/images/mock2/diamond.png")
+   :bored-ape             (js/require "../resources/images/mock2/bored-ape.png")
    :coinbase              (js/require "../resources/images/mock2/coinbase.png")
    :collectible           (js/require "../resources/images/mock2/collectible.png")
    :contact               (js/require "../resources/images/mock2/contact.png")

src/status_im2/contexts/quo_preview/avatars/collection_avatar.cljs

@@ -0,0 +1,24 @@
+(ns status-im2.contexts.quo-preview.avatars.collection-avatar
+
+  (:require [quo2.core :as quo]
+            [reagent.core :as reagent]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.common.resources :as resources]))
+
+(def descriptor
+  [{:key     :image
+    :type    :select
+    :options [{:key   (resources/get-mock-image :bored-ape)
+               :value "Bored ape"}
+              {:key   (resources/get-mock-image :ring)
+               :value "Circle"}]}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:image (resources/get-mock-image :bored-ape)})]
+    (fn []
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:align-items :center}}
+       [quo/collection-avatar @state]])))

src/status_im2/contexts/quo_preview/main.cljs

@@ -10,6 +10,7 @@
      :as animated-header-list]
     [status-im2.contexts.quo-preview.avatars.account-avatar :as account-avatar]
     [status-im2.contexts.quo-preview.avatars.channel-avatar :as channel-avatar]
+    [status-im2.contexts.quo-preview.avatars.collection-avatar :as collection-avatar]
     [status-im2.contexts.quo-preview.avatars.group-avatar :as group-avatar]
     [status-im2.contexts.quo-preview.avatars.icon-avatar :as icon-avatar]
     [status-im2.contexts.quo-preview.avatars.user-avatar :as user-avatar]
@@ -183,6 +184,8 @@
                         :component wallet-user-avatar/view}
                        {:name      :channel-avatar
                         :component channel-avatar/view}
+                       {:name      :collection-avatar
+                        :component collection-avatar/view}
                        {:name      :account-avatar
                         :component account-avatar/view}]
    :banner            [{:name      :banner