[#18512] incomplete list of collectibles (#18577)

* Fix var naming react-native-svg namespace

* Update collectible components to show SVGs

* Display collectibles containing collection images

* Show collectibles containing SVG animations as static images

* Reduce collectibles fetching priority

* Add support to visualize SVGs in collectible detail screen

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]}]
+  [{:keys [style size resource]}]
-  (let [source (if (string? resource) {:uri resource} resource)]
+  (let [svg?        (and (map? resource) (:svg? resource))
+        image-style (style/tile-style-by-size size)]
     [rn/view {:style style}
-     [rn/image
+     (if svg?
-      {:style  (style/tile-style-by-size size)
+       [rn/view
-       :source source}]]))
+        {: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]}]

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

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)]

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))

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])
+      (let [collectible                 (rf/sub [:wallet/last-collectible-details])
-            animation-shared-element-id  (rf/sub [:animation-shared-element-id])
+            animation-shared-element-id (rf/sub [:animation-shared-element-id])
-            {:keys [collectible-data preview-url
+            {:keys [id
-                    collection-data id]} collectible
+                    preview-url
-            token-id                     (:token-id id)
+                    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
+             collection-name  :name}    collection-data
-            {collectible-name :name}     collectible-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
+             :on-press       (fn []
-                                            token-id
+                               (if svg?
-                                            {:images [{:image        preview-url
+                                 (js/alert "Can't visualize SVG images in lightbox")
-                                                       :image-width  300 ; collectibles don't have
+                                 (rf/dispatch [:lightbox/navigate-to-lightbox
-                                                                         ; width/height but we need
+                                               token-id
-                                                                         ; to pass something
+                                               {:images [{:image        preview-uri
-                                                       :image-height 300 ; without it animation
+                                                          :image-width  300 ; collectibles don't have
-                                                                         ; doesn't work smoothly and
+                                                          ; width/height but we need
-                                                                         ; :border-radius not
+                                                          ; to pass something
-                                                                         ; applied
+                                                          :image-height 300 ; without it animation
-                                                       :id           token-id
+                                                          ; doesn't work smoothly and
-                                                       :header       collectible-name
+                                                          ; :border-radius not
-                                                       :description  collection-name}]
+                                                          ; applied
-                                             :index  0}])}
+                                                          :id           token-id
-            [rn/image
+                                                          :header       collectible-name
-             {:source    preview-url
+                                                          :description  collection-name}]
-              :style     style/preview
+                                                :index  0}])))}
-              :native-ID (when (= animation-shared-element-id token-id) :shared-element)}]]]
+            (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

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]

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]}]
+  [{{collectible-image-url :image-url
-  (if (and (not (string/blank? animation-url))
+     animation-url         :animation-url
-           (not= animation-media-type "image/svg+xml"))
+     animation-media-type  :animation-media-type} :collectible-data
-    animation-url
+    {collection-image-url :image-url}             :collection-data}]
-    image-url))
+  (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}]
+  (map (fn [collectible]
-         (assoc collectible :preview-url (preview-url collectible-data)))
+         (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