diff --git a/src/quo/components/profile/collectible/view.cljs b/src/quo/components/profile/collectible/view.cljs index b3bae35073..7260857e3a 100644 --- a/src/quo/components/profile/collectible/view.cljs +++ b/src/quo/components/profile/collectible/view.cljs @@ -2,7 +2,9 @@ (:require [quo.components.markdown.text :as text] [quo.components.profile.collectible.style :as style] - [react-native.core :as rn])) + [react-native.core :as rn] + [react-native.fast-image :as fast-image] + [react-native.svg :as svg])) (defn remaining-tiles [amount] @@ -14,12 +16,21 @@ (str "+" amount)]]) (defn tile - [{:keys [style resource size]}] - (let [source (if (string? resource) {:uri resource} resource)] + [{:keys [style size resource]}] + (let [svg? (and (map? resource) (:svg? resource)) + image-style (style/tile-style-by-size size)] [rn/view {:style style} - [rn/image - {:style (style/tile-style-by-size size) - :source source}]])) + (if svg? + [rn/view + {:style {:border-radius (:border-radius image-style) + :overflow :hidden}} + [svg/svg-uri (assoc image-style :uri (:uri resource))]] + [fast-image/fast-image + {:style image-style + :source (if (string? resource) + {:uri resource + :priority :low} + resource)}])])) (defn two-tiles [{:keys [images size]}] diff --git a/src/quo/components/tabs/tab/view.cljs b/src/quo/components/tabs/tab/view.cljs index dbd9185a59..ffce2e235d 100644 --- a/src/quo/components/tabs/tab/view.cljs +++ b/src/quo/components/tabs/tab/view.cljs @@ -27,7 +27,7 @@ 9.213 11.877 8.436 C 11.787 7.866 11.649 7.313 11.468 6.781 Z" :clip-path "url(#clip0_5514_84289)"}] [svg/defs - [svg/clippath {:id "clip0_5514_84289"} + [svg/clip-path {:id "clip0_5514_84289"} [svg/rect {:width width :height height :fill :none}]]]]) (defn- content diff --git a/src/react_native/fast_image.cljs b/src/react_native/fast_image.cljs index a25092186a..995b3c332c 100644 --- a/src/react_native/fast_image.cljs +++ b/src/react_native/fast_image.cljs @@ -20,7 +20,8 @@ (merge props {:source (if (string? source) - {:uri source} + {:uri source + :priority :high} source) :on-error (fn [e] (when-let [on-error (:on-error props)] diff --git a/src/react_native/svg.cljs b/src/react_native/svg.cljs index f44f13bfc6..e9397c2d87 100644 --- a/src/react_native/svg.cljs +++ b/src/react_native/svg.cljs @@ -6,10 +6,11 @@ (def svg (reagent/adapt-react-class Svg/default)) (def path (reagent/adapt-react-class Svg/Path)) (def rect (reagent/adapt-react-class Svg/Rect)) -(def clippath (reagent/adapt-react-class Svg/ClipPath)) +(def clip-path (reagent/adapt-react-class Svg/ClipPath)) (def defs (reagent/adapt-react-class Svg/Defs)) (def circle (reagent/adapt-react-class Svg/Circle)) -(def svgxml (reagent/adapt-react-class Svg/SvgXml)) +(def svg-xml (reagent/adapt-react-class Svg/SvgXml)) +(def svg-uri (reagent/adapt-react-class Svg/SvgUri)) (def g (reagent/adapt-react-class Svg/G)) (def linear-gradient (reagent/adapt-react-class Svg/LinearGradient)) (def stop (reagent/adapt-react-class Svg/Stop)) diff --git a/src/status_im/contexts/wallet/collectible/view.cljs b/src/status_im/contexts/wallet/collectible/view.cljs index c24ce1dfe4..ab95f7cde5 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/src/status_im/contexts/wallet/collectible/view.cljs @@ -3,6 +3,7 @@ [quo.core :as quo] [quo.theme :as quo.theme] [react-native.core :as rn] + [react-native.svg :as svg] [reagent.core :as reagent] [status-im.common.scroll-page.view :as scroll-page] [status-im.contexts.wallet.collectible.style :as style] @@ -75,14 +76,18 @@ (let [selected-tab (reagent/atom :overview) on-tab-change #(reset! selected-tab %)] (fn [] - (let [collectible (rf/sub [:wallet/last-collectible-details]) - animation-shared-element-id (rf/sub [:animation-shared-element-id]) - {:keys [collectible-data preview-url - collection-data id]} collectible - token-id (:token-id id) + (let [collectible (rf/sub [:wallet/last-collectible-details]) + animation-shared-element-id (rf/sub [:animation-shared-element-id]) + {:keys [id + preview-url + collection-data + collectible-data]} collectible + {svg? :svg? + preview-uri :uri} preview-url + token-id (:token-id id) {collection-image :image-url - collection-name :name} collection-data - {collectible-name :name} collectible-data] + collection-name :name} collection-data + {collectible-name :name} collectible-data] [scroll-page/scroll-page {:navigate-back? true :height 148 @@ -94,29 +99,38 @@ [:show-bottom-sheet {:content collectible-actions-sheet :theme theme}])}] - :picture preview-url}} + :picture preview-uri}} [rn/view {:style style/container} [rn/view {:style style/preview-container} [rn/touchable-opacity {:active-opacity 1 - :on-press #(rf/dispatch [:lightbox/navigate-to-lightbox - token-id - {:images [{:image preview-url - :image-width 300 ; collectibles don't have - ; width/height but we need - ; to pass something - :image-height 300 ; without it animation - ; doesn't work smoothly and - ; :border-radius not - ; applied - :id token-id - :header collectible-name - :description collection-name}] - :index 0}])} - [rn/image - {:source preview-url - :style style/preview - :native-ID (when (= animation-shared-element-id token-id) :shared-element)}]]] + :on-press (fn [] + (if svg? + (js/alert "Can't visualize SVG images in lightbox") + (rf/dispatch [:lightbox/navigate-to-lightbox + token-id + {:images [{:image preview-uri + :image-width 300 ; collectibles don't have + ; width/height but we need + ; to pass something + :image-height 300 ; without it animation + ; doesn't work smoothly and + ; :border-radius not + ; applied + :id token-id + :header collectible-name + :description collection-name}] + :index 0}])))} + (if svg? + [rn/view + {:style (assoc style/preview :overflow :hidden) + :native-ID (when (= animation-shared-element-id token-id) + :shared-element)} + [svg/svg-uri (assoc style/preview :uri preview-uri)]] + [rn/image + {:source preview-uri + :style style/preview + :native-ID (when (= animation-shared-element-id token-id) :shared-element)}])]] [header collectible-name collection-name collection-image] [cta-buttons] [quo/tabs diff --git a/src/status_im/contexts/wallet/events/collectibles.cljs b/src/status_im/contexts/wallet/events/collectibles.cljs index cc4b0371c3..f287759f21 100644 --- a/src/status_im/contexts/wallet/events/collectibles.cljs +++ b/src/status_im/contexts/wallet/events/collectibles.cljs @@ -24,9 +24,11 @@ (defn displayable-collectible? [collectible] - (let [{:keys [image-url animation-url]} (:collectible-data collectible)] + (let [{{:keys [image-url animation-url]} :collectible-data + {collection-image-url :image-url} :collection-data} collectible] (or (not (string/blank? animation-url)) - (not (string/blank? image-url))))) + (not (string/blank? image-url)) + (not (string/blank? collection-image-url))))) (defn- add-collectibles-to-accounts [accounts collectibles] diff --git a/src/status_im/subs/wallet/collectibles.cljs b/src/status_im/subs/wallet/collectibles.cljs index a1f7bbdcc3..5a9bb95976 100644 --- a/src/status_im/subs/wallet/collectibles.cljs +++ b/src/status_im/subs/wallet/collectibles.cljs @@ -3,17 +3,39 @@ [clojure.string :as string] [re-frame.core :as re-frame])) +(defn- svg-animation? + [url media-type] + (and (not (string/blank? url)) + (string/includes? media-type "svg"))) + +(defn- animation? + [url media-type] + (and (not (string/blank? url)) + (not (string/blank? media-type)))) + (defn- preview-url - [{:keys [image-url animation-url animation-media-type]}] - (if (and (not (string/blank? animation-url)) - (not= animation-media-type "image/svg+xml")) - animation-url - image-url)) + [{{collectible-image-url :image-url + animation-url :animation-url + animation-media-type :animation-media-type} :collectible-data + {collection-image-url :image-url} :collection-data}] + (cond + (svg-animation? animation-url animation-media-type) + {:uri animation-url + :svg? true} + + (animation? animation-url animation-media-type) + {:uri animation-url} + + (not (string/blank? collectible-image-url)) + {:uri collectible-image-url} + + :else + {:uri collection-image-url})) (defn add-collectibles-preview-url [collectibles] - (map (fn [{:keys [collectible-data] :as collectible}] - (assoc collectible :preview-url (preview-url collectible-data))) + (map (fn [collectible] + (assoc collectible :preview-url (preview-url collectible))) collectibles)) (re-frame/reg-sub @@ -47,7 +69,7 @@ :<- [:wallet] (fn [wallet] (let [last-collectible (:last-collectible-details wallet)] - (assoc last-collectible :preview-url (preview-url (:collectible-data last-collectible)))))) + (assoc last-collectible :preview-url (preview-url last-collectible))))) (re-frame/reg-sub :wallet/last-collectible-details-chain-id