diff --git a/resources/images/mock2/bored-ape.png b/resources/images/mock2/bored-ape.png new file mode 100644 index 0000000000..a87d1d8ec3 Binary files /dev/null and b/resources/images/mock2/bored-ape.png differ diff --git a/src/quo2/components/avatars/collection_avatar/component_spec.cljs b/src/quo2/components/avatars/collection_avatar/component_spec.cljs new file mode 100644 index 0000000000..3684060ca0 --- /dev/null +++ b/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))))) diff --git a/src/quo2/components/avatars/collection_avatar/style.cljs b/src/quo2/components/avatars/collection_avatar/style.cljs new file mode 100644 index 0000000000..8f52421973 --- /dev/null +++ b/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}) diff --git a/src/quo2/components/avatars/collection_avatar/view.cljs b/src/quo2/components/avatars/collection_avatar/view.cljs new file mode 100644 index 0000000000..10d6b6aa31 --- /dev/null +++ b/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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 56918a3fb1..75e7e514e9 100644 --- a/src/quo2/core.cljs +++ b/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) diff --git a/src/quo2/foundations/resources.cljs b/src/quo2/foundations/resources.cljs index 40ce02173a..56e0671cb6 100644 --- a/src/quo2/foundations/resources.cljs +++ b/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] diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index fc6b3eb35d..13390a40c4 100644 --- a/src/status_im2/common/resources.cljs +++ b/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") diff --git a/src/status_im2/contexts/quo_preview/avatars/collection_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/collection_avatar.cljs new file mode 100644 index 0000000000..f30ff92974 --- /dev/null +++ b/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]]))) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index d72ba89550..b177948b1f 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/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