               :style {:magin-top 8}}
     (i18n/label :t/no-collectibles)]])
 
+(defn render-asset [{:keys [asset width clickable?]}]
+  [(if clickable? react/touchable-opacity react/view)
+   {:style
+    {:width         width
+     :border-radius 16
+     :margin-bottom 16}
+    :on-press (when clickable? #(re-frame/dispatch [::wallet/show-nft-details asset]))
+    :accessibility-label
+    :nft-asset}
+   (cond
+     ;; pngs and jpegs
+     (is-image? asset)
+     [react/image {:style  {:flex          1
+                            :aspect-ratio  1
+                            :border-width  1
+                            :border-color  colors/gray-lighter
+                            :border-radius 16}
+                   :source {:uri (:image_url asset)}}]
+
+     ;; vectors
+     (is-vector? asset)
+     [react/view {:style {:flex          1
+                          :aspect-ratio  1
+                          :border-width  1
+                          :border-color  colors/gray-lighter
+                          :border-radius 16}}
+      [svg-uri {:uri   (:image_url asset)
+                :width "100%" :height "100%"}]]
+
+     ;; ¯\_(ツ)_/¯
+     :else [missing-image-placeholder])])
+
 (defn nft-assets [{:keys [num-assets address collectible-slug]}]
   (let [assets    (<sub [:wallet/collectible-assets-by-collection-and-address address collectible-slug])
         fetching? (<sub [:wallet/fetching-assets-by-collectible-slug collectible-slug])]

              :align :center
              :style {:margin-top 10}}
    (i18n/label :t/disable-later-in-settings)]])

            [quo.design-system.colors :as colors]
            [status-im.ui.components.icons.icons :as icons]
            [status-im.i18n.i18n :as i18n]
            [status-im.ui.components.accordion :as accordion]
            ["react-native-svg" :refer (SvgUri)]
            [reagent.core :as reagent]))

(def svg-uri (reagent/adapt-react-class SvgUri))

(defn is-image? [nft]
  (and (seq (:image_url nft))
       (not (str/ends-with? (:image_url nft) ".svg"))
       (not (str/ends-with? (:image_url nft) ".mp4"))))

(defn is-vector? [nft]
  (and (seq (:image_url nft))
       (str/ends-with? (:image_url nft) ".svg")))

(defn missing-image-placeholder []
  [react/view {:style {:width            "100%"
