fix(wallet): Improve collectible UX and fix data displayed (#20657)
* Add variant unknown variant for collectibles * Fix blank collectibles listed * Improve `expanded-collectible` animation and add support for different gradient-colors * Make :wallet/collectible-details-owner subscription depend on `wallet/accounts` instead of `:wallet` * Make collectible tabs component more flexible * Remove now unused subscriptions * Improve UX navigation to collectible detail page * Pass the current collectible gradient-color when a collectible is pressed * Fix tests
This commit is contained in:
Ulises Manuel
GitHub
parent
4c4a8b65d4
commit
7774c4eac1
|
|
@ -11,7 +11,7 @@
|
|||
(defn fallback
|
||||
[{:keys [theme opacity]}]
|
||||
[{:opacity opacity}
|
||||
{:opacity default-opacity-for-image
|
||||
{:opacity 1
|
||||
:background-color (colors/theme-colors colors/neutral-2_5 colors/neutral-90 theme)
|
||||
:border-style :dashed
|
||||
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
|
||||
|
|
@ -60,8 +60,13 @@
|
|||
:padding-right 0
|
||||
:padding-top 4})
|
||||
|
||||
(def card-detail-text
|
||||
{:flex 1})
|
||||
(defn card-detail-text
|
||||
[empty-name? theme]
|
||||
{:flex 1
|
||||
:margin-right 8
|
||||
:color (if empty-name?
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
(colors/theme-colors colors/neutral-100 colors/white theme))})
|
||||
|
||||
(defn card-loader
|
||||
[opacity]
|
||||
|
|
@ -115,6 +120,7 @@
|
|||
[{:opacity opacity}
|
||||
{:flex 1
|
||||
:flex-direction :row
|
||||
:column-gap 8
|
||||
:opacity default-opacity-for-image}])
|
||||
|
||||
(defn supported-file
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
(ns quo.components.profile.collectible-list-item.view
|
||||
(:require
|
||||
[clojure.string :as string]
|
||||
[quo.components.avatars.collection-avatar.view :as collection-avatar]
|
||||
[quo.components.counter.collectible-counter.view :as collectible-counter]
|
||||
[quo.components.icon :as icon]
|
||||
|
|
@ -21,7 +22,7 @@
|
|||
(def cached-load-time 200)
|
||||
(def error-wait-time 800)
|
||||
|
||||
(defn on-load-end
|
||||
(defn animate-loading-image
|
||||
[{:keys [load-time set-state loader-opacity image-opacity]}]
|
||||
(reanimated/animate loader-opacity 0 timing-options-out)
|
||||
(reanimated/animate image-opacity 1 timing-options-in)
|
||||
|
|
@ -60,12 +61,12 @@
|
|||
(assoc prev-state :avatar-loaded? true)))))
|
||||
|
||||
(defn- fallback-view
|
||||
[{:keys [label theme image-opacity]}]
|
||||
[reanimated/view
|
||||
{:style (style/fallback {:opacity image-opacity
|
||||
:theme theme})}
|
||||
[{:keys [label theme image-opacity on-load-end]}]
|
||||
(rn/use-mount on-load-end)
|
||||
[reanimated/view {:style (style/fallback {:opacity image-opacity :theme theme})}
|
||||
[rn/view
|
||||
[icon/icon :i/sad {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]]
|
||||
[icon/icon :i/sad
|
||||
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]]
|
||||
[rn/view {:style {:height 4}}]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
|
|
@ -93,31 +94,43 @@
|
|||
[{:keys [community? avatar-image-src collectible-name theme state set-state]}]
|
||||
(let [loader-opacity (reanimated/use-shared-value 1)
|
||||
avatar-opacity (reanimated/use-shared-value 0)
|
||||
[load-time set-load-time] (rn/use-state (datetime/now))]
|
||||
[load-time set-load-time] (rn/use-state (datetime/now))
|
||||
set-avatar-loaded (fn []
|
||||
(on-load-avatar {:set-state set-state
|
||||
:load-time load-time
|
||||
:loader-opacity loader-opacity
|
||||
:avatar-opacity avatar-opacity}))
|
||||
empty-name? (string/blank? collectible-name)]
|
||||
(rn/use-mount (fn []
|
||||
(when (string/blank? avatar-image-src)
|
||||
(set-avatar-loaded))))
|
||||
[rn/view {:style style/card-details-container}
|
||||
[reanimated/view {:style (style/avatar-container avatar-opacity)}
|
||||
(if community?
|
||||
[preview-list/view
|
||||
{:type :communities
|
||||
:size :size-20}
|
||||
(cond
|
||||
(string/blank? avatar-image-src)
|
||||
[loading-square theme]
|
||||
|
||||
community?
|
||||
[preview-list/view {:type :communities :size :size-20}
|
||||
[avatar-image-src]]
|
||||
|
||||
:else
|
||||
[collection-avatar/view
|
||||
{:size :size-20
|
||||
:on-start #(set-load-time (fn [start-time] (- (datetime/now) start-time)))
|
||||
:on-load-end #(on-load-avatar {:set-state set-state
|
||||
:load-time load-time
|
||||
:loader-opacity loader-opacity
|
||||
:avatar-opacity avatar-opacity})
|
||||
:on-load-end set-avatar-loaded
|
||||
: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]]
|
||||
(when (not (:avatar-loaded? state))
|
||||
:style (style/card-detail-text empty-name? theme)}
|
||||
(if empty-name?
|
||||
(i18n/label :t/unknown)
|
||||
collectible-name)]]
|
||||
|
||||
(when-not (:avatar-loaded? state)
|
||||
[reanimated/view {:style (style/card-loader loader-opacity)}
|
||||
[loading-square theme]
|
||||
[loading-message theme]])]))
|
||||
|
|
@ -128,40 +141,44 @@
|
|||
(let [theme (quo.theme/use-theme)
|
||||
loader-opacity (reanimated/use-shared-value (if supported-file? 1 0))
|
||||
image-opacity (reanimated/use-shared-value (if supported-file? 0 1))
|
||||
[load-time set-load-time] (rn/use-state (datetime/now))]
|
||||
[load-time set-load-time] (rn/use-state (datetime/now))
|
||||
set-image-loaded (fn []
|
||||
(animate-loading-image {:load-time load-time
|
||||
:set-state set-state
|
||||
:loader-opacity loader-opacity
|
||||
:image-opacity image-opacity}))]
|
||||
[rn/view {:style (style/card-view-container theme)}
|
||||
[rn/view {:style {:aspect-ratio 1}}
|
||||
(cond
|
||||
(:image-error? state)
|
||||
[fallback-view
|
||||
{:image-opacity image-opacity
|
||||
:theme theme
|
||||
:label (i18n/label :t/cant-fetch-info)}]
|
||||
(:image-error? state) [fallback-view
|
||||
{:image-opacity image-opacity
|
||||
:on-load-end set-image-loaded
|
||||
:theme theme
|
||||
:label (i18n/label :t/cant-fetch-info)}]
|
||||
(not supported-file?) [fallback-view
|
||||
{:image-opacity image-opacity
|
||||
:on-load-end set-image-loaded
|
||||
:theme theme
|
||||
:label (i18n/label :t/unsupported-file)}]
|
||||
(not (:image-loaded? state)) [loading-image
|
||||
{:loader-opacity loader-opacity
|
||||
:theme theme
|
||||
:gradient-color-index gradient-color-index}])
|
||||
|
||||
(not supported-file?)
|
||||
[fallback-view
|
||||
{:image-opacity image-opacity
|
||||
:theme theme
|
||||
:label (i18n/label :t/unsupported-file)}]
|
||||
|
||||
(not (:image-loaded? state))
|
||||
[loading-image
|
||||
{:loader-opacity loader-opacity
|
||||
:theme theme
|
||||
:gradient-color-index gradient-color-index}])
|
||||
(when supported-file?
|
||||
[reanimated/view {:style (style/supported-file image-opacity)}
|
||||
[rn/image
|
||||
{:style style/image
|
||||
:on-load #(on-load % set-state)
|
||||
:on-load-start #(set-load-time (fn [start-time] (- (datetime/now) start-time)))
|
||||
:on-load-end #(on-load-end {:load-time load-time
|
||||
:set-state set-state
|
||||
:loader-opacity loader-opacity
|
||||
:image-opacity image-opacity})
|
||||
:on-load-end set-image-loaded
|
||||
:on-error #(on-load-error set-state)
|
||||
:source image-src}]])]
|
||||
(when (and (:image-loaded? state) (not (:image-error? state)) counter)
|
||||
|
||||
(when (and (or (:image-loaded? state)
|
||||
(not supported-file?))
|
||||
(not (:image-error? state))
|
||||
counter)
|
||||
[collectible-counter/view
|
||||
{:container-style style/collectible-counter
|
||||
:size :size-24
|
||||
|
|
@ -206,10 +223,10 @@
|
|||
{:style style/image
|
||||
:on-load #(on-load % set-state)
|
||||
:on-load-start #(set-load-time (fn [start-time] (- (datetime/now) start-time)))
|
||||
:on-load-end #(on-load-end {:load-time load-time
|
||||
:set-state set-state
|
||||
:loader-opacity loader-opacity
|
||||
:image-opacity image-opacity})
|
||||
:on-load-end #(animate-loading-image {:load-time load-time
|
||||
:set-state set-state
|
||||
:loader-opacity loader-opacity
|
||||
:image-opacity image-opacity})
|
||||
:on-error #(on-load-error set-state)
|
||||
:source image-src}]])
|
||||
(when (and (:image-loaded? state) (not (:image-error? state)) counter)
|
||||
|
|
|
|||
|
|
@ -11,38 +11,24 @@
|
|||
[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 650)
|
||||
(def timing-options-in 1000)
|
||||
(def first-load-time 500)
|
||||
(def cached-load-time 200)
|
||||
(def loader-out 650)
|
||||
(def image-in 1000)
|
||||
(def error-wait-time 800)
|
||||
|
||||
(defn on-load-end
|
||||
[{:keys [load-time set-state loader-opacity image-opacity]}]
|
||||
(reanimated/animate loader-opacity 0 timing-options-out)
|
||||
(reanimated/animate image-opacity 1 timing-options-in)
|
||||
(if (> load-time cached-load-time)
|
||||
(js/setTimeout
|
||||
(fn []
|
||||
(set-state (fn [prev-state]
|
||||
(assoc prev-state :image-loaded? true))))
|
||||
first-load-time)
|
||||
(set-state (fn [prev-state]
|
||||
(assoc prev-state :image-loaded? true)))))
|
||||
[{:keys [loader-opacity image-opacity]}]
|
||||
(reanimated/animate loader-opacity 0 loader-out)
|
||||
(reanimated/animate image-opacity 1 image-in))
|
||||
|
||||
(defn on-load-error
|
||||
[set-state]
|
||||
(js/setTimeout (fn []
|
||||
(set-state (fn [prev-state] (assoc prev-state :image-error? true))))
|
||||
error-wait-time))
|
||||
[set-error]
|
||||
(js/setTimeout set-error error-wait-time))
|
||||
|
||||
(defn- loading-image
|
||||
[{:keys [theme gradient-color-index loader-opacity aspect-ratio]}]
|
||||
[reanimated/view
|
||||
{:style (style/loading-image-with-opacity loader-opacity)}
|
||||
[reanimated/view {:style (style/loading-image-with-opacity loader-opacity)}
|
||||
[gradients/view
|
||||
{:theme theme
|
||||
:container-style (style/gradient-view aspect-ratio)
|
||||
|
|
@ -67,62 +53,64 @@
|
|||
:style {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}}
|
||||
label]])
|
||||
|
||||
(defn- collectible-image
|
||||
[{:keys [aspect-ratio theme gradient-color-index supported-file? set-error native-ID
|
||||
square? image-src on-collectible-load counter]}]
|
||||
(let [loader-opacity (reanimated/use-shared-value (if supported-file? 1 0))
|
||||
image-opacity (reanimated/use-shared-value (if supported-file? 0 1))]
|
||||
[:<>
|
||||
[loading-image
|
||||
{:aspect-ratio aspect-ratio
|
||||
:loader-opacity loader-opacity
|
||||
:theme theme
|
||||
:gradient-color-index gradient-color-index}]
|
||||
|
||||
[reanimated/view {:style (style/supported-file image-opacity)}
|
||||
[rn/image
|
||||
{:style (style/image square? aspect-ratio theme)
|
||||
:source image-src
|
||||
:native-ID native-ID
|
||||
:on-load-end (fn []
|
||||
(on-load-end {:loader-opacity loader-opacity
|
||||
:image-opacity image-opacity}))
|
||||
:on-error #(on-load-error set-error)
|
||||
:on-load on-collectible-load}]
|
||||
(when counter
|
||||
[counter-view counter])
|
||||
[rn/view {:style (style/collectible-border theme)}]]]))
|
||||
|
||||
(defn view-internal
|
||||
[{:keys [container-style square? on-press counter image-src native-ID supported-file?
|
||||
on-collectible-load aspect-ratio]}]
|
||||
(let [theme (quo.theme/use-theme)
|
||||
loader-opacity (reanimated/use-shared-value
|
||||
(if supported-file? 1 0))
|
||||
image-opacity (reanimated/use-shared-value
|
||||
(if supported-file? 0 1))
|
||||
[load-time set-load-time] (rn/use-state (datetime/now))
|
||||
[state set-state] (rn/use-state {:image-loaded? false
|
||||
:image-error? (or (nil? image-src)
|
||||
(string/blank?
|
||||
image-src))})]
|
||||
on-collectible-load aspect-ratio gradient-color-index]
|
||||
:or {gradient-color-index :gradient-1
|
||||
on-collectible-load (fn [])}}]
|
||||
(let [theme (quo.theme/use-theme)
|
||||
[error? set-error] (rn/use-state (or (nil? image-src)
|
||||
(string/blank? image-src)))]
|
||||
[rn/pressable
|
||||
{:on-press (when (and (not (:image-error? state)) supported-file?) on-press)
|
||||
{:style (merge container-style (style/container aspect-ratio))
|
||||
:accessibility-label :expanded-collectible
|
||||
:style (merge container-style
|
||||
(style/container aspect-ratio))}
|
||||
(cond
|
||||
(not supported-file?)
|
||||
:on-press (when (and (not error?) supported-file?)
|
||||
on-press)}
|
||||
(if (or (not supported-file?) error?)
|
||||
[fallback-view
|
||||
{:aspect-ratio aspect-ratio
|
||||
:label (i18n/label :t/unsupported-file)
|
||||
:counter counter
|
||||
:theme theme
|
||||
:on-mount on-collectible-load}]
|
||||
|
||||
(:image-error? state)
|
||||
[fallback-view
|
||||
{:label (i18n/label :t/cant-fetch-info)
|
||||
{:label (i18n/label (if-not supported-file?
|
||||
:t/unsupported-file
|
||||
:t/cant-fetch-info))
|
||||
:counter counter
|
||||
:theme theme
|
||||
:on-mount on-collectible-load}]
|
||||
|
||||
(not (:image-loaded? state))
|
||||
[loading-image
|
||||
[collectible-image
|
||||
{:aspect-ratio aspect-ratio
|
||||
:loader-opacity loader-opacity
|
||||
:theme theme
|
||||
:gradient-color-index :gradient-5}])
|
||||
(when supported-file?
|
||||
[reanimated/view {:style (style/supported-file image-opacity)}
|
||||
[rn/image
|
||||
{:style (style/image square? aspect-ratio theme)
|
||||
:source image-src
|
||||
:native-ID native-ID
|
||||
:on-load-start #(set-load-time (fn [start-time] (- (datetime/now) start-time)))
|
||||
:on-load-end #(on-load-end {:load-time load-time
|
||||
:set-state set-state
|
||||
:loader-opacity loader-opacity
|
||||
:image-opacity image-opacity})
|
||||
:on-error #(on-load-error set-state)
|
||||
:on-load on-collectible-load}]
|
||||
(when counter
|
||||
[counter-view counter])
|
||||
[rn/view {:style (style/collectible-border theme)}]])]))
|
||||
:supported-file? supported-file?
|
||||
:set-error set-error
|
||||
:native-ID native-ID
|
||||
:square? square?
|
||||
:image-src image-src
|
||||
:on-collectible-load on-collectible-load
|
||||
:counter counter
|
||||
:gradient-color-index gradient-color-index}])]))
|
||||
|
||||
(def ?schema
|
||||
[:=>
|
||||
|
|
@ -137,7 +125,8 @@
|
|||
[:square? {:optional true} [:maybe boolean?]]
|
||||
[:counter {:optional true} [:maybe string?]]
|
||||
[:on-press {:optional true} [:maybe fn?]]
|
||||
[:on-collectible-load {:optional true} [:maybe fn?]]]]]
|
||||
[:on-collectible-load {:optional true} [:maybe fn?]]
|
||||
[:gradient-color-index {:optional true} [:maybe keyword?]]]]]
|
||||
:any])
|
||||
|
||||
(def view (schema/instrument #'view-internal ?schema))
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@
|
|||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn- on-collectible-press
|
||||
[{:keys [id]} aspect-ratio]
|
||||
(rf/dispatch [:wallet/get-collectible-details id aspect-ratio]))
|
||||
(def on-collectible-press #(rf/dispatch [:wallet/navigate-to-collectible-details %]))
|
||||
|
||||
(defn- on-collectible-long-press
|
||||
[{:keys [preview-url collectible-details id]}]
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
(ns status-im.contexts.wallet.collectible.events
|
||||
(:require [camel-snake-kebab.extras :as cske]
|
||||
[clojure.string :as string]
|
||||
[react-native.platform :as platform]
|
||||
[status-im.contexts.wallet.collectible.utils :as collectible-utils]
|
||||
[taoensso.timbre :as log]
|
||||
|
|
@ -44,13 +45,6 @@
|
|||
|
||||
(rf/reg-event-fx :wallet/clear-stored-collectibles clear-stored-collectibles)
|
||||
|
||||
(defn store-last-collectible-details
|
||||
[{:keys [db]} [collectible]]
|
||||
{:db (assoc-in db [:wallet :last-collectible-details] collectible)
|
||||
:dispatch [:navigate-to :screen/wallet.collectible]})
|
||||
|
||||
(rf/reg-event-fx :wallet/store-last-collectible-details store-last-collectible-details)
|
||||
|
||||
(rf/reg-event-fx
|
||||
:wallet/request-new-collectibles-for-account
|
||||
(fn [{:keys [db]} [{:keys [request-id account amount]}]]
|
||||
|
|
@ -166,39 +160,58 @@
|
|||
[:dispatch [:wallet/flush-collectibles-fetched]])]})))
|
||||
|
||||
(rf/reg-event-fx
|
||||
:wallet/get-collectible-details
|
||||
(fn [{:keys [db]} [collectible-id aspect-ratio]]
|
||||
:wallet/navigate-to-collectible-details
|
||||
(fn [{:keys [db]}
|
||||
[{{collectible-id :id :as collectible} :collectible
|
||||
aspect-ratio :aspect-ratio
|
||||
gradient-color :gradient-color}]]
|
||||
(let [request-id 0
|
||||
collectible-id-converted (cske/transform-keys transforms/->PascalCaseKeyword collectible-id)
|
||||
data-type (collectible-data-types :details)
|
||||
request-params [request-id [collectible-id-converted] data-type]]
|
||||
{:db (assoc-in db [:wallet :last-collectible-aspect-ratio] aspect-ratio)
|
||||
{:db (assoc-in db
|
||||
[:wallet :ui :collectible]
|
||||
{:details collectible
|
||||
:aspect-ratio aspect-ratio
|
||||
:gradient-color gradient-color})
|
||||
:fx [[:json-rpc/call
|
||||
[{:method "wallet_getCollectiblesByUniqueIDAsync"
|
||||
:params request-params
|
||||
:on-error (fn [error]
|
||||
(log/error "failed to request collectible"
|
||||
{:event :wallet/get-collectible-details
|
||||
{:event :wallet/navigate-to-collectible-details
|
||||
:error error
|
||||
:params request-params}))}]]]})))
|
||||
:params request-params}))}]]
|
||||
;; We delay the navigation because we need re-frame to update the DB on time.
|
||||
;; By doing it, we skip a blink while visiting the collectible detail page.
|
||||
[:dispatch-later
|
||||
{:ms 1
|
||||
:dispatch [:navigate-to :screen/wallet.collectible]}]]})))
|
||||
|
||||
(defn- keep-not-empty-value
|
||||
[old-value new-value]
|
||||
(if (or (string/blank? new-value) (nil? new-value))
|
||||
old-value
|
||||
new-value))
|
||||
|
||||
(def merge-skipping-empty-values (partial merge-with keep-not-empty-value))
|
||||
|
||||
(rf/reg-event-fx
|
||||
:wallet/get-collectible-details-done
|
||||
(fn [_ [{:keys [message]}]]
|
||||
(let [response (cske/transform-keys transforms/->kebab-case-keyword
|
||||
(transforms/json->clj message))
|
||||
{:keys [collectibles]} response
|
||||
collectible (first collectibles)]
|
||||
(fn [{db :db} [{:keys [message]}]]
|
||||
(let [response (cske/transform-keys transforms/->kebab-case-keyword
|
||||
(transforms/json->clj message))
|
||||
{[collectible] :collectibles} response]
|
||||
(if collectible
|
||||
{:fx [[:dispatch [:wallet/store-last-collectible-details collectible]]]}
|
||||
{:db (update-in db [:wallet :ui :collectible :details] merge-skipping-empty-values collectible)}
|
||||
(log/error "failed to get collectible details"
|
||||
{:event :wallet/get-collectible-details-done
|
||||
:response response})))))
|
||||
|
||||
(rf/reg-event-fx
|
||||
:wallet/clear-last-collectible-details
|
||||
:wallet/clear-collectible-details
|
||||
(fn [{:keys [db]}]
|
||||
{:db (update-in db [:wallet] dissoc :last-collectible-details :last-collectible-aspect-ratio)}))
|
||||
{:db (update-in db [:wallet :ui] dissoc :collectible)}))
|
||||
|
||||
(rf/reg-event-fx :wallet/trigger-share-collectible
|
||||
(fn [_ [{:keys [title uri]}]]
|
||||
|
|
|
|||
|
|
@ -43,18 +43,6 @@
|
|||
|
||||
(is (match? result-db expected-db))))))
|
||||
|
||||
(deftest store-last-collectible-details-test
|
||||
(testing "store-last-collectible-details"
|
||||
(let [db {:wallet {}}
|
||||
last-collectible {:description "Pandaria"
|
||||
:image-url "https://..."}
|
||||
expected-db {:wallet {:last-collectible-details {:description "Pandaria"
|
||||
:image-url "https://..."}}}
|
||||
effects (events/store-last-collectible-details {:db db}
|
||||
[last-collectible])
|
||||
result-db (:db effects)]
|
||||
(is (match? result-db expected-db)))))
|
||||
|
||||
(deftest request-new-collectibles-for-account-from-signal-test
|
||||
(testing "request new collectibles for account from signal"
|
||||
(let [db {:wallet {}}
|
||||
|
|
|
|||
|
|
@ -8,12 +8,11 @@
|
|||
(def ^:private link-card-space 28)
|
||||
|
||||
(defn view
|
||||
[]
|
||||
(let [window-width (rf/sub [:dimensions/window-width])
|
||||
item-width (- (/ window-width 2) link-card-space)
|
||||
{:keys [collectible-data]} (rf/sub [:wallet/last-collectible-details])
|
||||
link-card-container-style (style/link-card item-width)
|
||||
collectible-about {:cards []}]
|
||||
[{:keys [collectible-data]}]
|
||||
(let [window-width (rf/sub [:dimensions/window-width])
|
||||
item-width (- (/ window-width 2) link-card-space)
|
||||
link-card-container-style (style/link-card item-width)
|
||||
collectible-about {:cards []}]
|
||||
[:<>
|
||||
[rn/view {:style style/title}
|
||||
[quo/text
|
||||
|
|
|
|||
|
|
@ -21,27 +21,25 @@
|
|||
:container-style style/traits-item}])
|
||||
|
||||
(defn- traits-section
|
||||
[]
|
||||
(let [traits (rf/sub [:wallet/last-collectible-details-traits])]
|
||||
(when (pos? (count traits))
|
||||
[rn/view
|
||||
[quo/section-label
|
||||
{:section (i18n/label :t/traits)
|
||||
:container-style style/traits-title-container}]
|
||||
[rn/flat-list
|
||||
{:render-fn trait-item
|
||||
:data traits
|
||||
:key :collectibles-list
|
||||
:key-fn :id
|
||||
:num-columns 2
|
||||
:content-container-style style/traits-container}]])))
|
||||
[traits]
|
||||
[rn/view
|
||||
[quo/section-label
|
||||
{:section (i18n/label :t/traits)
|
||||
:container-style style/traits-title-container}]
|
||||
[rn/flat-list
|
||||
{:render-fn trait-item
|
||||
:data traits
|
||||
:key :collectibles-list
|
||||
:key-fn :id
|
||||
:num-columns 2
|
||||
:content-container-style style/traits-container}]])
|
||||
|
||||
(defn- info
|
||||
[]
|
||||
(let [chain-id (rf/sub [:wallet/last-collectible-details-chain-id])
|
||||
{:keys [network-name]} (rf/sub [:wallet/network-details-by-chain-id chain-id])
|
||||
subtitle (string/capitalize (name (or network-name "")))
|
||||
{:keys [name emoji color]} (rf/sub [:wallet/last-collectible-details-owner])]
|
||||
[{:keys [chain-id account]}]
|
||||
(let [{:keys [network-name]} (rf/sub [:wallet/network-details-by-chain-id chain-id])
|
||||
subtitle (some-> network-name
|
||||
name
|
||||
string/capitalize)]
|
||||
[rn/view {:style style/info-container}
|
||||
[rn/view {:style style/account}
|
||||
[quo/data-item
|
||||
|
|
@ -49,10 +47,10 @@
|
|||
:status :default
|
||||
:size :default
|
||||
:title (i18n/label :t/account-title)
|
||||
:subtitle name
|
||||
:emoji emoji
|
||||
:subtitle-type :account
|
||||
:customization-color color}]]
|
||||
:subtitle (:name account)
|
||||
:emoji (:emoji account)
|
||||
:customization-color (:color account)}]]
|
||||
[rn/view {:style style/network}
|
||||
[quo/data-item
|
||||
{:subtitle-type :network
|
||||
|
|
@ -64,7 +62,12 @@
|
|||
:subtitle subtitle}]]]))
|
||||
|
||||
(defn view
|
||||
[]
|
||||
[:<>
|
||||
[info]
|
||||
[traits-section]])
|
||||
[collectible]
|
||||
(let [owner-account (rf/sub [:wallet/collectible-details-owner collectible])
|
||||
traits (-> collectible :collectible-data :traits)]
|
||||
[:<>
|
||||
[info
|
||||
{:chain-id (-> collectible :id :contract-id :chain-id)
|
||||
:account owner-account}]
|
||||
(when (pos? (count traits))
|
||||
[traits-section traits])]))
|
||||
|
|
|
|||
|
|
@ -5,9 +5,9 @@
|
|||
[status-im.contexts.wallet.collectible.tabs.overview.view :as overview]))
|
||||
|
||||
(defn view
|
||||
[{:keys [selected-tab]}]
|
||||
[{:keys [selected-tab collectible]}]
|
||||
(case selected-tab
|
||||
:overview [overview/view]
|
||||
:about [about/view]
|
||||
:overview [overview/view collectible]
|
||||
:about [about/view collectible]
|
||||
:activity [activity/view]
|
||||
nil))
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
:balance
|
||||
js/parseInt))
|
||||
|
||||
(def ^:const supported-collectible-types
|
||||
(def supported-collectible-types
|
||||
#{"image/jpeg"
|
||||
"image/gif"
|
||||
"image/bmp"
|
||||
|
|
|
|||
|
|
@ -76,11 +76,10 @@
|
|||
(defn navigate-back-and-clear-collectible
|
||||
[]
|
||||
(rf/dispatch [:navigate-back])
|
||||
(js/setTimeout #(rf/dispatch [:wallet/clear-last-collectible-details]) 700))
|
||||
(rf/dispatch [:wallet/clear-collectible-details]))
|
||||
|
||||
(defn animated-header
|
||||
[{:keys [scroll-amount title-opacity page-nav-type picture title description theme
|
||||
id]}]
|
||||
[{:keys [scroll-amount title-opacity page-nav-type picture title description theme id]}]
|
||||
(let [blur-amount (header-animations/use-blur-amount scroll-amount)
|
||||
layer-opacity (header-animations/use-layer-opacity
|
||||
scroll-amount
|
||||
|
|
@ -149,8 +148,9 @@
|
|||
(let [title-ref (rn/use-ref-atom nil)
|
||||
set-title-ref (rn/use-callback #(reset! title-ref %))
|
||||
animation-shared-element-id (rf/sub [:animation-shared-element-id])
|
||||
collectible-owner (rf/sub [:wallet/last-collectible-details-owner])
|
||||
aspect-ratio (rf/sub [:wallet/last-collectible-aspect-ratio])
|
||||
collectible-owner (rf/sub [:wallet/collectible-details-owner collectible])
|
||||
aspect-ratio (rf/sub [:wallet/collectible-aspect-ratio])
|
||||
gradient-color (rf/sub [:wallet/collectible-gradient-color])
|
||||
{:keys [id
|
||||
preview-url
|
||||
collection-data
|
||||
|
|
@ -181,35 +181,36 @@
|
|||
[rn/view
|
||||
[gradient-layer preview-uri]
|
||||
[quo/expanded-collectible
|
||||
{:aspect-ratio aspect-ratio
|
||||
:image-src preview-uri
|
||||
:container-style (style/preview-container)
|
||||
:counter (utils/collectible-owned-counter total-owned)
|
||||
:native-ID (when (= animation-shared-element-id token-id) :shared-element)
|
||||
:supported-file? (utils/supported-file? (:animation-media-type collectible-data))
|
||||
:on-press (fn []
|
||||
(if svg?
|
||||
(js/alert "Can't visualize SVG images in lightbox")
|
||||
(rf/dispatch
|
||||
[:lightbox/navigate-to-lightbox
|
||||
token-id
|
||||
{:images [collectible-image]
|
||||
:index 0
|
||||
:on-options-press #(rf/dispatch [:show-bottom-sheet
|
||||
{:content
|
||||
(fn []
|
||||
[options-drawer/view
|
||||
{:name collectible-name
|
||||
:image
|
||||
preview-uri
|
||||
:id id}])}])}])))
|
||||
:on-collectible-load (fn []
|
||||
;; We need to delay the measurement because the
|
||||
;; navigation has an animation
|
||||
(js/setTimeout
|
||||
#(some-> @title-ref
|
||||
(oops/ocall "measureInWindow" set-title-bottom))
|
||||
300))}]]
|
||||
{:aspect-ratio aspect-ratio
|
||||
:image-src preview-uri
|
||||
:container-style (style/preview-container)
|
||||
:gradient-color-index gradient-color
|
||||
:counter (utils/collectible-owned-counter total-owned)
|
||||
:native-ID (when (= animation-shared-element-id token-id) :shared-element)
|
||||
:supported-file? (utils/supported-file? (:animation-media-type collectible-data))
|
||||
:on-press (fn []
|
||||
(if svg?
|
||||
(js/alert "Can't visualize SVG images in lightbox")
|
||||
(rf/dispatch
|
||||
[:lightbox/navigate-to-lightbox
|
||||
token-id
|
||||
{:images [collectible-image]
|
||||
:index 0
|
||||
:on-options-press #(rf/dispatch [:show-bottom-sheet
|
||||
{:content
|
||||
(fn []
|
||||
[options-drawer/view
|
||||
{:name collectible-name
|
||||
:image
|
||||
preview-uri
|
||||
:id id}])}])}])))
|
||||
:on-collectible-load (fn []
|
||||
;; We need to delay the measurement because the
|
||||
;; navigation has an animation
|
||||
(js/setTimeout
|
||||
#(some-> @title-ref
|
||||
(oops/ocall "measureInWindow" set-title-bottom))
|
||||
300))}]]
|
||||
[rn/view {:style (style/background-color theme)}
|
||||
[header collectible-name collection-name collection-image set-title-ref]
|
||||
[cta-buttons
|
||||
|
|
@ -225,39 +226,43 @@
|
|||
:default-active @selected-tab
|
||||
:on-change on-tab-change
|
||||
:data tabs-data}]
|
||||
[tabs/view {:selected-tab @selected-tab}]]]))))
|
||||
[tabs/view
|
||||
{:selected-tab @selected-tab
|
||||
:collectible collectible}]]]))))
|
||||
|
||||
(defn- get-title-bottom-y-position
|
||||
[y-element-position element-height]
|
||||
(let [{:keys [top]} (safe-area/get-insets)
|
||||
title-height -56]
|
||||
(+ y-element-position
|
||||
element-height
|
||||
title-height
|
||||
(when platform/ios? (* top -2)))))
|
||||
|
||||
(defn view
|
||||
[_]
|
||||
(let [{:keys [top]} (safe-area/get-insets)
|
||||
theme (quo.theme/use-theme)
|
||||
title-bottom-coord (rn/use-ref-atom 0)
|
||||
set-title-bottom (rn/use-callback
|
||||
(fn [_ y _ height]
|
||||
(reset! title-bottom-coord
|
||||
(+ y
|
||||
height
|
||||
-56
|
||||
(when platform/ios?
|
||||
(* top -2))))))
|
||||
scroll-amount (reanimated/use-shared-value 0)
|
||||
title-opacity (reanimated/use-shared-value 0)
|
||||
collectible (rf/sub [:wallet/last-collectible-details])
|
||||
{:keys [preview-url
|
||||
collection-data
|
||||
collectible-data]} collectible
|
||||
{preview-uri :uri} preview-url
|
||||
{collectible-name :name} collectible-data
|
||||
{collection-name :name} collection-data]
|
||||
(let [{:keys [top]} (safe-area/get-insets)
|
||||
theme (quo.theme/use-theme)
|
||||
title-bottom-coord (rn/use-ref-atom 0)
|
||||
set-title-bottom (rn/use-callback
|
||||
(fn [_ y _ height]
|
||||
(reset! title-bottom-coord
|
||||
(get-title-bottom-y-position y height))))
|
||||
scroll-amount (reanimated/use-shared-value 0)
|
||||
title-opacity (reanimated/use-shared-value 0)
|
||||
{:keys [collection-data
|
||||
collectible-data
|
||||
preview-url]
|
||||
:as collectible} (rf/sub [:wallet/collectible-details])]
|
||||
[rn/view {:style (style/background-color theme)}
|
||||
[animated-header
|
||||
{:id (:id collectible)
|
||||
:scroll-amount scroll-amount
|
||||
:title-opacity title-opacity
|
||||
:page-nav-type :title-description
|
||||
:picture preview-uri
|
||||
:title collectible-name
|
||||
:description collection-name
|
||||
:picture (:uri preview-url)
|
||||
:title (:name collectible-data)
|
||||
:description (:name collection-data)
|
||||
:theme theme}]
|
||||
[reanimated/scroll-view
|
||||
{:style (style/scroll-view top)
|
||||
|
|
|
|||
|
|
@ -13,25 +13,34 @@
|
|||
[{:keys [preview-url collection-data collectible-data total-owned on-press on-long-press]
|
||||
:as collectible}
|
||||
index]
|
||||
(let [on-press-fn (rn/use-callback #(when on-press
|
||||
(on-press collectible %)))
|
||||
on-long-press-fn (rn/use-callback #(when on-long-press
|
||||
(on-long-press collectible)))]
|
||||
(let [gradient-color (keyword (str "gradient-" (inc (mod index 5))))
|
||||
on-press-fn (rn/use-callback
|
||||
(fn [aspect-ratio]
|
||||
(when (fn? on-press)
|
||||
(on-press {:collectible (dissoc collectible :on-press :on-long-press)
|
||||
:aspect-ratio aspect-ratio
|
||||
:gradient-color gradient-color}))))
|
||||
on-long-press-fn (rn/use-callback
|
||||
(fn [aspect-ratio]
|
||||
(when on-long-press
|
||||
(on-long-press
|
||||
(dissoc collectible :on-press :on-long-press)
|
||||
aspect-ratio))))]
|
||||
[quo/collectible-list-item
|
||||
{:type :card
|
||||
:image-src (:uri preview-url)
|
||||
:avatar-image-src (:image-url collection-data)
|
||||
:collectible-name (:name collection-data)
|
||||
:collectible-name (:name collectible-data)
|
||||
:supported-file? (utils/supported-file? (:animation-media-type collectible-data))
|
||||
:gradient-color-index (keyword (str "gradient-" (inc (mod index 5))))
|
||||
:gradient-color-index gradient-color
|
||||
:counter (utils/collectible-owned-counter total-owned)
|
||||
:container-style style/collectible-container
|
||||
:on-press on-press-fn
|
||||
:on-long-press on-long-press-fn}]))
|
||||
|
||||
(defn view
|
||||
[{:keys [collectibles filtered? on-end-reached
|
||||
on-collectible-press current-account-address on-collectible-long-press]}]
|
||||
[{:keys [collectibles filtered? on-end-reached on-collectible-press
|
||||
current-account-address on-collectible-long-press]}]
|
||||
(let [theme (quo.theme/use-theme)
|
||||
no-results-match-query? (and filtered? (empty? collectibles))]
|
||||
(cond
|
||||
|
|
|
|||
|
|
@ -17,9 +17,7 @@
|
|||
:name (:name collectible-data)
|
||||
:image (:uri preview-url)}])}]))
|
||||
|
||||
(defn- on-collectible-press
|
||||
[{:keys [id]} aspect-ratio]
|
||||
(rf/dispatch [:wallet/get-collectible-details id aspect-ratio]))
|
||||
(def on-collectible-press #(rf/dispatch [:wallet/navigate-to-collectible-details %]))
|
||||
|
||||
(defn view
|
||||
[{:keys [selected-tab]}]
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
{:collectibles collectibles
|
||||
:filtered? search-performed?
|
||||
:on-end-reached #(rf/dispatch [:wallet/request-collectibles-for-current-viewing-account])
|
||||
:on-collectible-press (fn [collectible]
|
||||
:on-collectible-press (fn [{:keys [collectible]}]
|
||||
(rf/dispatch [:wallet/set-collectible-to-send
|
||||
{:collectible collectible
|
||||
:current-screen :screen/wallet.select-asset}]))}]))
|
||||
|
|
|
|||
|
|
@ -20,8 +20,7 @@
|
|||
(defn- preview-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}]
|
||||
animation-media-type :animation-media-type} :collectible-data}]
|
||||
(cond
|
||||
(svg-animation? animation-url animation-media-type)
|
||||
{:uri animation-url
|
||||
|
|
@ -34,7 +33,7 @@
|
|||
{:uri collectible-image-url}
|
||||
|
||||
:else
|
||||
{:uri collection-image-url}))
|
||||
{:uri nil}))
|
||||
|
||||
(defn add-collectibles-preview-url
|
||||
[collectibles]
|
||||
|
|
@ -91,35 +90,36 @@
|
|||
current-account-collectibles))))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:wallet/last-collectible-details
|
||||
:<- [:wallet]
|
||||
(fn [wallet]
|
||||
(let [last-collectible (:last-collectible-details wallet)]
|
||||
(assoc last-collectible :preview-url (preview-url last-collectible)))))
|
||||
:wallet/collectible
|
||||
:<- [:wallet/ui]
|
||||
:-> :collectible)
|
||||
|
||||
(re-frame/reg-sub
|
||||
:wallet/last-collectible-aspect-ratio
|
||||
:<- [:wallet]
|
||||
(fn [wallet]
|
||||
(:last-collectible-aspect-ratio wallet)))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:wallet/last-collectible-details-chain-id
|
||||
:<- [:wallet/last-collectible-details]
|
||||
:wallet/collectible-details
|
||||
:<- [:wallet/collectible]
|
||||
(fn [collectible]
|
||||
(get-in collectible [:id :contract-id :chain-id])))
|
||||
(as-> collectible $
|
||||
(:details $)
|
||||
(assoc $ :preview-url (preview-url $)))))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:wallet/last-collectible-details-traits
|
||||
:<- [:wallet/last-collectible-details]
|
||||
:wallet/collectible-aspect-ratio
|
||||
:<- [:wallet/collectible]
|
||||
(fn [collectible]
|
||||
(get-in collectible [:collectible-data :traits])))
|
||||
(:aspect-ratio collectible 1)))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:wallet/last-collectible-details-owner
|
||||
:<- [:wallet/last-collectible-details]
|
||||
:<- [:wallet]
|
||||
(fn [[collectible wallet]]
|
||||
(let [address (:address (first (:ownership collectible)))
|
||||
account (get-in wallet [:accounts address])]
|
||||
account)))
|
||||
:wallet/collectible-gradient-color
|
||||
:<- [:wallet/collectible]
|
||||
(fn [collectible]
|
||||
(:gradient-color collectible :gradient-1)))
|
||||
|
||||
(re-frame/reg-sub
|
||||
:wallet/collectible-details-owner
|
||||
:<- [:wallet/accounts]
|
||||
(fn [accounts [_ collectible]]
|
||||
(let [collectible-address (-> collectible :ownership first :address)]
|
||||
(some #(when (= (:address %) collectible-address)
|
||||
%)
|
||||
accounts))))
|
||||
|
||||
|
|
|
|||
|
|
@ -2,49 +2,25 @@
|
|||
(:require
|
||||
[cljs.test :refer [is testing]]
|
||||
[re-frame.db :as rf-db]
|
||||
status-im.subs.root
|
||||
status-im.subs.wallet.collectibles
|
||||
[status-im.subs.root]
|
||||
[status-im.subs.wallet.collectibles]
|
||||
[test-helpers.unit :as h]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(def ^:private traits
|
||||
[{:trait-type "Background"
|
||||
:value "Gradient 5"
|
||||
:display-type ""
|
||||
:max-value ""}
|
||||
{:trait-type "Skin"
|
||||
:value "Pale"
|
||||
:display-type ""
|
||||
:max-value ""}
|
||||
{:trait-type "Clothes"
|
||||
:value "Naked"
|
||||
:display-type ""
|
||||
:max-value ""}])
|
||||
(def collectible-owner-wallet
|
||||
{:ui {:collectible {:details {:ownership [{:address "0x1"}]}}}
|
||||
:accounts {"0x1" {:address "0x1"
|
||||
:name "account 1"
|
||||
:color "army"}}})
|
||||
|
||||
(def ^:private collectible-owner-wallet
|
||||
{:last-collectible-details {:ownership [{:address "0x1"}]}
|
||||
:accounts {"0x1" {:name "account 1"
|
||||
:color "army"}}})
|
||||
|
||||
(h/deftest-sub :wallet/last-collectible-details-chain-id
|
||||
[sub-name]
|
||||
(testing "correct chain-id of the last collectible should be returned"
|
||||
(swap! rf-db/app-db assoc-in [:wallet :last-collectible-details :id :contract-id :chain-id] "1")
|
||||
(let [result (rf/sub [sub-name])]
|
||||
(is (= "1" result)))))
|
||||
|
||||
(h/deftest-sub :wallet/last-collectible-details-traits
|
||||
[sub-name]
|
||||
(testing "correct traits of the last collectible should be returned"
|
||||
(swap! rf-db/app-db assoc-in [:wallet :last-collectible-details :collectible-data :traits] traits)
|
||||
(let [result (rf/sub [sub-name])]
|
||||
(is (= traits result)))))
|
||||
|
||||
(h/deftest-sub :wallet/last-collectible-details-owner
|
||||
(h/deftest-sub :wallet/collectible-details-owner
|
||||
[sub-name]
|
||||
(testing "correct owner of the last collectible should be returned"
|
||||
(swap! rf-db/app-db assoc-in [:wallet] collectible-owner-wallet)
|
||||
(let [result (rf/sub [sub-name])]
|
||||
(is (= {:name "account 1"
|
||||
:color "army"}
|
||||
(swap! rf-db/app-db assoc :wallet collectible-owner-wallet)
|
||||
(let [collectible (-> collectible-owner-wallet :ui :collectible :details)
|
||||
result (rf/sub [sub-name collectible])]
|
||||
(is (= {:name "account 1"
|
||||
:color "army"
|
||||
:address "0x1"
|
||||
:network-preferences-names #{}}
|
||||
result)))))
|
||||
|
|
|
|||
Loading…
Reference in New Issue