Avatars/Token Avatar Component (#20141)

src/quo/components/avatars/token_avatar/component_spec.cljs

@@ -0,0 +1,14 @@
+(ns quo.components.avatars.token-avatar.component-spec
+  (:require [quo.components.avatars.token-avatar.view :as token-avatar]
+            [test-helpers.component :as h]))
+
+(h/describe "Avatars: Token Avatar"
+  (h/test "should render correctly without context"
+    (h/render-with-theme-provider
+     [token-avatar/view {:image "mock-image"}])
+    (h/is-truthy (h/get-by-label-text :token-avatar)))
+
+  (h/test "should render correctly with context"
+    (h/render-with-theme-provider
+     [token-avatar/view {:image "mock-image" :network-image "mock-image" :context? true}])
+    (h/is-truthy (h/get-by-label-text :token-avatar))))

src/quo/components/avatars/token_avatar/style.cljs

@@ -0,0 +1,25 @@
+(ns quo.components.avatars.token-avatar.style)
+
+(def ^:const size 32)
+
+(def container
+  {:height size
+   :width  size})
+
+(def hole-view
+  {:width  size
+   :height size})
+
+(def context
+  {:width         16
+   :height        16
+   :border-radius 8
+   :position      :absolute
+   :right         -4
+   :bottom        -4})
+
+(defn image
+  [type]
+  {:width         size
+   :border-radius (if (= type :collectible) 8 0)
+   :height        size})

src/quo/components/avatars/token_avatar/view.cljs

@@ -0,0 +1,43 @@
+(ns quo.components.avatars.token-avatar.view
+  (:require [quo.components.avatars.token-avatar.style :as style]
+            [react-native.core :as rn]
+            [react-native.hole-view :as hole-view]
+            [react-native.platform :as platform]
+            [schema.core :as schema]))
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:type {:optional true} [:enum :asset :collectible]]
+      [:context? {:optional true} [:maybe :boolean]]
+      [:image :schema.common/image-source]
+      [:network-image {:optional true} [:maybe :schema.common/image-source]]
+      [:container-style {:optional true} [:maybe :map]]]]]
+   :any])
+
+(defn- view-internal
+  [{:keys [type context? image network-image container-style]}]
+  [rn/view
+   {:style               (merge style/container container-style)
+    :accessibility-label :token-avatar}
+   [hole-view/hole-view
+    (cond-> {:holes (if context?
+                      [{:x            19
+                        :y            19
+                        :width        18
+                        :height       18
+                        :borderRadius 9}]
+                      [])
+             :style style/hole-view}
+      platform/android? (assoc :key context?))
+    [rn/image
+     {:source image
+      :style  (style/image type)}]]
+   (when context?
+     [rn/image
+      {:source network-image
+       :style  style/context}])])
+
+(def view (schema/instrument #'view-internal ?schema))

src/quo/core.cljs

@@ -7,6 +7,7 @@
     quo.components.avatars.collection-avatar.view
     quo.components.avatars.group-avatar.view
     quo.components.avatars.icon-avatar
+    quo.components.avatars.token-avatar.view
     quo.components.avatars.user-avatar.view
     quo.components.avatars.wallet-user-avatar.view
     quo.components.banners.banner.view
@@ -192,6 +193,7 @@
 (def collection-avatar quo.components.avatars.collection-avatar.view/view)
 (def group-avatar quo.components.avatars.group-avatar.view/view)
 (def icon-avatar quo.components.avatars.icon-avatar/icon-avatar)
+(def token-avatar quo.components.avatars.token-avatar.view/view)
 (def user-avatar quo.components.avatars.user-avatar.view/user-avatar)
 (def wallet-user-avatar quo.components.avatars.wallet-user-avatar.view/wallet-user-avatar)
 

src/quo/core_spec.cljs

@@ -1,6 +1,7 @@
 (ns quo.core-spec
   (:require
     quo.components.avatars.account-avatar.component-spec
+    quo.components.avatars.token-avatar.component-spec
     quo.components.avatars.user-avatar.component-spec
     quo.components.banners.banner.component-spec
     quo.components.browser.browser-input.component-spec

src/status_im/contexts/preview/quo/avatars/token_avatar.cljs

@@ -0,0 +1,29 @@
+(ns status-im.contexts.preview.quo.avatars.token-avatar
+  (:require
+    [quo.core :as quo]
+    [quo.foundations.resources :as foundations.resources]
+    [react-native.core :as rn]
+    [status-im.common.resources :as resources]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:type    :select
+    :key     :type
+    :options [{:key :asset}
+              {:key :collectible}]}
+   {:type :boolean
+    :key  :context?}])
+
+(defn view
+  []
+  (let [[state set-state] (rn/use-state {:type     :asset
+                                         :context? false})]
+    [preview/preview-container
+     {:state      state
+      :set-state  set-state
+      :descriptor descriptor}
+     [quo/token-avatar
+      (assoc state
+             :network-image (foundations.resources/get-network :optimism)
+             :image         (resources/get-mock-image
+                             (if (= (state :type) :asset) :status-logo :collectible1)))]]))

src/status_im/contexts/preview/quo/main.cljs

@@ -12,6 +12,7 @@
     [status-im.contexts.preview.quo.avatars.collection-avatar :as collection-avatar]
     [status-im.contexts.preview.quo.avatars.group-avatar :as group-avatar]
     [status-im.contexts.preview.quo.avatars.icon-avatar :as icon-avatar]
+    [status-im.contexts.preview.quo.avatars.token-avatar :as token-avatar]
     [status-im.contexts.preview.quo.avatars.user-avatar :as user-avatar]
     [status-im.contexts.preview.quo.avatars.wallet-user-avatar :as
      wallet-user-avatar]
@@ -224,6 +225,8 @@
                         :component group-avatar/view}
                        {:name      :icon-avatar
                         :component icon-avatar/view}
+                       {:name      :token-avatar
+                        :component token-avatar/view}
                        {:name      :user-avatar
                         :component user-avatar/view}
                        {:name      :wallet-user-avatar