Skip to content

Commit

Permalink
chore: first pass at fixing collectibles transition
Browse files Browse the repository at this point in the history
  • Loading branch information
@J-Son89
J-Son89 committed May 8, 2024
1 parent 497c95f commit 598000f
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 63 deletions.
130 changes: 84 additions & 46 deletions src/quo/components/profile/collectible_list_item/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,29 @@
(ns quo.components.profile.collectible-list-item.view
(:require
[quo.components.avatars.collection-avatar.view :as collection-avatar]
[quo.components.counter.collectible-counter.view :as collectible-counter]
[quo.components.icon :as icon]
[quo.components.list-items.preview-list.view :as preview-list]
[quo.components.markdown.text :as text]
[quo.components.profile.collectible-list-item.style :as style]
[quo.foundations.colors :as colors]
[quo.foundations.gradients :as gradients]
[quo.theme]
[react-native.core :as rn]
[schema.core :as schema]
[utils.i18n :as i18n]))
[quo.components.avatars.collection-avatar.view :as collection-avatar]
[quo.components.counter.collectible-counter.view :as collectible-counter]
[quo.components.icon :as icon]
[quo.components.list-items.preview-list.view :as preview-list]
[quo.components.markdown.text :as text]
[quo.components.profile.collectible-list-item.style :as style]
[quo.foundations.colors :as colors]
[quo.foundations.gradients :as gradients]
[quo.theme]
[react-native.core :as rn]
[react-native.reanimated :as reanimated]
[schema.core :as schema]
[utils.datetime :as datetime]
[utils.i18n :as i18n]))

(def timing-options-out #js {:duration 1400})
(def timing-options-in #js {:duration 1800})

(defn- fallback-view
[{:keys [label theme]}]
[rn/view
{:style (style/fallback {:theme theme})}
[{:keys [label theme loaded-opacity]}]
[reanimated/view
{:style (reanimated/apply-animations-to-style
{:opacity loaded-opacity}
(style/fallback {:theme theme}))}
[rn/view
[icon/icon :i/sad {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]]
[rn/view {:style {:height 4}}]
Expand All @@ -34,16 +41,19 @@
[rn/view {:style (style/loading-message theme)}])

(defn- loading-image
[{:keys [theme gradient-color-index]}]
[gradients/view
{:theme theme
:container-style (style/loading-image theme)
:color-index gradient-color-index}])
[{:keys [theme gradient-color-index loading-opacity]}]
[reanimated/view {:style (reanimated/apply-animations-to-style
{:opacity loading-opacity}
(style/loading-image theme))}
[gradients/view
{:theme theme
:container-style (style/loading-image theme)
:color-index gradient-color-index}]])

(defn- card-details
[{:keys [community? avatar-image-src collectible-name theme state set-state]}]
[rn/view {:style style/card-details-container}
(cond (not (:avatar-loaded? state))
(cond (and not community? (not (:avatar-loaded? state)))
[rn/view {:style {:flex-direction :row}}
[loading-square theme]
[loading-message theme]]
Expand All @@ -54,56 +64,83 @@
{:type :communities
:size :size-20}
[avatar-image-src]]

[rn/view {:style {:width 8}}]
[text/text
{:size :paragraph-1
:weight :semi-bold
:style style/card-detail-text}
collectible-name]])

[rn/view
{:style (style/avatar-container (:avatar-loaded? state))}
[:<>
[collection-avatar/view
{:size :size-20
:on-load-end #(set-state (fn [prev-state] (assoc prev-state :avatar-loaded? true)))
:image avatar-image-src}]
[rn/view {:style {:width 8}}]]
[text/text
{:size :paragraph-1
:weight :semi-bold
:ellipsize-mode :tail
:number-of-lines 1
:style style/card-detail-text}
collectible-name]]])
collectible-name]]
:else [rn/view
{:style (style/avatar-container (:avatar-loaded? state))}
[:<>
[collection-avatar/view
{:size :size-20
:on-load-end #(set-state (fn [prev-state] (assoc prev-state :avatar-loaded? true)))
:image avatar-image-src}]
[rn/view {:style {:width 8}}]]
[text/text
{:size :paragraph-1
:weight :semi-bold
:ellipsize-mode :tail
:number-of-lines 1
:style style/card-detail-text}
collectible-name]])])

(defn- card-view
[{:keys [avatar-image-src collectible-name community? counter state set-state
gradient-color-index image-src supported-file?]}]
(let [theme (quo.theme/use-theme)]
(let [theme (quo.theme/use-theme)
loading-opacity (reanimated/use-shared-value (if supported-file? 1 0))
loaded-opacity (reanimated/use-shared-value (if supported-file? 0 1))
[load-time set-load-time] (rn/use-state (datetime/now))]

[rn/view {:style (style/card-view-container theme)}
[rn/view {:style {:aspect-ratio 1}}
(cond
(:image-error? state)
[fallback-view
{:theme theme
{:loaded-opacity loaded-opacity
:theme theme
:label (i18n/label :t/cant-fetch-info)}]

(not supported-file?)
[fallback-view
{:theme theme
{:loaded-opacity loaded-opacity
:theme theme
:label (i18n/label :t/unsupported-file)}]

(not (:image-loaded? state))
[loading-image
{:theme theme
{:loading-opacity loading-opacity
:theme theme
:gradient-color-index gradient-color-index}])
(when supported-file?
[rn/view {:style {:aspect-ratio 1}}
[reanimated/view {:style (reanimated/apply-animations-to-style
{:opacity loaded-opacity}
{:aspect-ratio 1})}
[rn/image
{:style style/image
:on-load-end #(set-state (fn [prev-state] (assoc prev-state :image-loaded? true)))
:on-error #(set-state (fn [prev-state] (assoc prev-state :image-error? true)))
{:style style/image
:on-load-start #(set-load-time (fn [start-time] (- (datetime/now) start-time)))


:on-load-end (if (> load-time 200)
(fn []
(reanimated/set-shared-value loading-opacity (reanimated/with-timing 0 timing-options-out))
(reanimated/set-shared-value loaded-opacity (reanimated/with-timing 1 timing-options-in))
(js/setTimeout
(fn []
(set-state (fn [prev-state]
(assoc prev-state :image-loaded? true))))
800))
(fn []
(reanimated/set-shared-value loading-opacity 0)
(reanimated/set-shared-value loaded-opacity 1)
(set-state (fn [prev-state]
(assoc prev-state :image-loaded? true)))))
:on-error (fn []
(js/setTimeout (fn []
(set-state (fn [prev-state] (assoc prev-state :image-error? true)))) 800))
:source image-src}]])]
(when (and (:image-loaded? state) (not (:image-error? state)) counter)
[collectible-counter/view
Expand Down Expand Up @@ -172,6 +209,7 @@
(if (= type :card)
[card-view
(assoc props

:state state
:set-state set-state
:supported-file? supported-file?)]
Expand Down
17 changes: 0 additions & 17 deletions src/status_im/config.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,23 +105,6 @@
(def fast-create-community-enabled?
(enabled? (get-config :FAST_CREATE_COMMUNITY_ENABLED "0")))

(def default-multiaccount
{:preview-privacy? blank-preview?
:wallet-legacy/visible-tokens {:mainnet #{:SNT}}
:currency :usd
:appearance 0
:profile-pictures-show-to 2
:profile-pictures-visibility 2
:log-level log-level
:webview-allow-permission-requests? false
:opensea-enabled? false
:link-previews-enabled-sites #{}
:link-preview-request-enabled true})

(defn default-visible-tokens
[chain]
(get-in default-multiaccount [:wallet-legacy/visible-tokens chain]))

(def waku-nodes-config
{:status.prod
["enrtree://AL65EKLJAUXKKPG43HVTML5EFFWEZ7L4LOKTLZCLJASG4DSESQZEC@prod.status.nodes.status.im"]
Expand Down

0 comments on commit 598000f

Please sign in to comment.