Avatars/dApp Avatar Component (#20145)

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

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

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

@@ -0,0 +1,23 @@
+(ns quo.components.avatars.dapp-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})
+
+(def image
+  {:width  size
+   :height size})

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

@@ -0,0 +1,42 @@
+(ns quo.components.avatars.dapp-avatar.view
+  (:require [quo.components.avatars.dapp-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}
+      [: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 [context? image network-image container-style]}]
+  [rn/view
+   {:style               (merge style/container container-style)
+    :accessibility-label :dapp-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}]]
+   (when context?
+     [rn/image
+      {:source network-image
+       :style  style/context}])])
+
+(def view (schema/instrument #'view-internal ?schema))

src/quo/core.cljs

@@ -6,6 +6,7 @@
     quo.components.avatars.channel-avatar.view
     quo.components.avatars.collection-avatar.view
     quo.components.avatars.community-avatar.view
+    quo.components.avatars.dapp-avatar.view
     quo.components.avatars.group-avatar.view
     quo.components.avatars.icon-avatar
     quo.components.avatars.token-avatar.view
@@ -193,6 +194,7 @@
 (def channel-avatar quo.components.avatars.channel-avatar.view/view)
 (def collection-avatar quo.components.avatars.collection-avatar.view/view)
 (def community-avatar quo.components.avatars.community-avatar.view/view)
+(def dapp-avatar quo.components.avatars.dapp-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)

src/quo/core_spec.cljs

@@ -2,6 +2,7 @@
   (:require
     quo.components.avatars.account-avatar.component-spec
     quo.components.avatars.community-avatar.component-spec
+    quo.components.avatars.dapp-avatar.component-spec
     quo.components.avatars.token-avatar.component-spec
     quo.components.avatars.user-avatar.component-spec
     quo.components.banners.banner.component-spec

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

@@ -0,0 +1,22 @@
+(ns status-im.contexts.preview.quo.avatars.dapp-avatar
+  (:require
+    [quo.core :as quo]
+    [quo.foundations.resources :as resources]
+    [react-native.core :as rn]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:type :boolean
+    :key  :context?}])
+
+(defn view
+  []
+  (let [[state set-state] (rn/use-state {:context? false})]
+    [preview/preview-container
+     {:state      state
+      :set-state  set-state
+      :descriptor descriptor}
+     [quo/dapp-avatar
+      (assoc state
+             :network-image (resources/get-network :ethereum)
+             :image         (resources/get-dapp :coingecko))]]))

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

@@ -11,6 +11,7 @@
     [status-im.contexts.preview.quo.avatars.channel-avatar :as channel-avatar]
     [status-im.contexts.preview.quo.avatars.collection-avatar :as collection-avatar]
     [status-im.contexts.preview.quo.avatars.community-avatar :as community-avatar]
+    [status-im.contexts.preview.quo.avatars.dapp-avatar :as dapp-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]
@@ -224,6 +225,8 @@
                         :component animated-header-list/mock-screen}]
    :avatar            [{:name      :community-avatar
                         :component community-avatar/view}
+                       {:name      :dapp-avatar
+                        :component dapp-avatar/view}
                        {:name      :group-avatar
                         :component group-avatar/view}
                        {:name      :icon-avatar