diff --git a/src/quo/components/avatars/dapp_avatar/component_spec.cljs b/src/quo/components/avatars/dapp_avatar/component_spec.cljs new file mode 100644 index 00000000000..31459153e02 --- /dev/null +++ b/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)))) diff --git a/src/quo/components/avatars/dapp_avatar/style.cljs b/src/quo/components/avatars/dapp_avatar/style.cljs new file mode 100644 index 00000000000..41cb4edd0ab --- /dev/null +++ b/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}) diff --git a/src/quo/components/avatars/dapp_avatar/view.cljs b/src/quo/components/avatars/dapp_avatar/view.cljs new file mode 100644 index 00000000000..00facc7737c --- /dev/null +++ b/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)) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index b6381d2db1a..482f7e00bfb 100644 --- a/src/quo/core.cljs +++ b/src/quo/core.cljs @@ -5,6 +5,7 @@ quo.components.avatars.account-avatar.view quo.components.avatars.channel-avatar.view quo.components.avatars.collection-avatar.view + quo.components.avatars.dapp-avatar.view quo.components.avatars.group-avatar.view quo.components.avatars.icon-avatar quo.components.avatars.user-avatar.view @@ -190,6 +191,7 @@ (def account-avatar quo.components.avatars.account-avatar.view/view) (def channel-avatar quo.components.avatars.channel-avatar.view/view) (def collection-avatar quo.components.avatars.collection-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 user-avatar quo.components.avatars.user-avatar.view/user-avatar) diff --git a/src/quo/core_spec.cljs b/src/quo/core_spec.cljs index 5f3de8278f2..48ec6319948 100644 --- a/src/quo/core_spec.cljs +++ b/src/quo/core_spec.cljs @@ -1,6 +1,7 @@ (ns quo.core-spec (:require quo.components.avatars.account-avatar.component-spec + quo.components.avatars.dapp-avatar.component-spec quo.components.avatars.user-avatar.component-spec quo.components.banners.banner.component-spec quo.components.browser.browser-input.component-spec diff --git a/src/status_im/contexts/preview/quo/avatars/dapp_avatar.cljs b/src/status_im/contexts/preview/quo/avatars/dapp_avatar.cljs new file mode 100644 index 00000000000..4a3c2a1e878 --- /dev/null +++ b/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))]])) diff --git a/src/status_im/contexts/preview/quo/main.cljs b/src/status_im/contexts/preview/quo/main.cljs index 8a022b845e7..a08e424c25b 100644 --- a/src/status_im/contexts/preview/quo/main.cljs +++ b/src/status_im/contexts/preview/quo/main.cljs @@ -10,6 +10,7 @@ [status-im.contexts.preview.quo.avatars.account-avatar :as account-avatar] [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.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.user-avatar :as user-avatar] @@ -220,7 +221,9 @@ :component shadows/view}] :animated-list [{:name :animated-header-list :component animated-header-list/mock-screen}] - :avatar [{:name :group-avatar + :avatar [{:name :dapp-avatar + :component dapp-avatar/view} + {:name :group-avatar :component group-avatar/view} {:name :icon-avatar :component icon-avatar/view}