status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#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
This commit is contained in:
Ulises Manuel 2024-01-26 09:52:04 -06:00 committed by GitHub
parent 1acf8f0d07
commit 550fa04e33
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 97 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/quo/components/profile/collectible/view.cljs
View File

@ -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]}]

2
src/quo/components/tabs/tab/view.cljs
View File

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

3
src/react_native/fast_image.cljs
View File

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

5
src/react_native/svg.cljs
View File

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

66
src/status_im/contexts/wallet/collectible/view.cljs
View File

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

6
src/status_im/contexts/wallet/events/collectibles.cljs
View File

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

38
src/status_im/subs/wallet/collectibles.cljs
View File

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