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

fix(wallet): Solve multiple bugs in the collectible detail page (#20281) 

* Add background color to collectibles

* Fix header text animation in unsupported collectibles

* Fix header height and animation color

* Fix image not showing when it's `nil` or `""`

* Add missing border to expanded-collectible
This commit is contained in:
Ulises Manuel 2024-06-19 11:38:14 -06:00 committed by GitHub
parent f192648518
commit 68b3bb3089
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 92 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/quo/components/profile/expanded_collectible/style.cljs
View File

@ -7,10 +7,22 @@
:border-radius 16})
(defn image
[square? aspect-ratio]
{:width "100%"
:aspect-ratio (if square? 1 aspect-ratio)
:border-radius 16})
[square? aspect-ratio theme]
{:width "100%"
:aspect-ratio (if square? 1 aspect-ratio)
:border-radius 16
:background-color (colors/theme-colors colors/white colors/neutral-95 theme)})
(defn collectible-border
[theme]
{:position :absolute
:top 0
:left 0
:right 0
:bottom 0
:border-radius 16
:border-width 1
:border-color (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)})
(defn fallback
[{:keys [theme]}]

41
src/quo/components/profile/expanded_collectible/view.cljs
View File

@ -1,5 +1,6 @@
(ns quo.components.profile.expanded-collectible.view
(:require
[clojure.string :as string]
[promesa.core :as promesa]
[quo.components.counter.collectible-counter.view :as collectible-counter]
[quo.components.icon :as icon]
@ -7,23 +8,20 @@
[quo.components.profile.expanded-collectible.style :as style]
[quo.foundations.colors :as colors]
[quo.theme]
[quo.theme]
[quo.theme]
[react-native.core :as rn]
[schema.core :as schema]
[utils.i18n :as i18n]))
(defn- counter-view
[counter]
(when counter
[collectible-counter/view
{:container-style style/counter
:value counter}]))
[collectible-counter/view
{:container-style style/counter
:value counter}])
(defn- fallback-view
[{:keys [label theme counter]}]
[rn/view
{:style (style/fallback {:theme theme})}
[{:keys [label theme counter on-mount]}]
(rn/use-mount on-mount)
[rn/view {:style (style/fallback {:theme theme})}
[counter-view counter]
[rn/view
[icon/icon :i/sad {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}]]
@ -38,7 +36,8 @@
on-collectible-load]}]
(let [theme (quo.theme/use-theme)
[image-size set-image-size] (rn/use-state {})
[image-error? set-image-error] (rn/use-state false)]
[image-error? set-image-error] (rn/use-state (or (nil? image-src)
(string/blank? image-src)))]
(rn/use-effect
(fn []
(promesa/let [[image-width image-height] (rn/image-get-size image-src)]
@ -53,25 +52,29 @@
(cond
(not supported-file?)
[fallback-view
{:label (i18n/label :t/unsupported-file)
:counter counter
:theme theme}]
{:label (i18n/label :t/unsupported-file)
:counter counter
:theme theme
:on-mount on-collectible-load}]
image-error?
[fallback-view
{:label (i18n/label :t/cant-fetch-info)
:counter counter
:theme theme}]
{:label (i18n/label :t/cant-fetch-info)
:counter counter
:theme theme
:on-mount on-collectible-load}]
(and (not image-error?) supported-file?)
:else
[rn/view
[rn/image
{:style (style/image square? (:aspect-ratio image-size))
{:style (style/image square? (:aspect-ratio image-size) theme)
:source image-src
:native-ID native-ID
:on-error #(set-image-error true)
:on-load on-collectible-load}]
[counter-view counter]])]))
(when counter
[counter-view counter])
[rn/view {:style (style/collectible-border theme)}]])]))
(def ?schema
[:=>

5
src/status_im/contexts/wallet/account/view.cljs
View File

@ -18,7 +18,7 @@
{:id :collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}
{:id :activity :label (i18n/label :t/activity) :accessibility-label :activity-tab}]
(not watch-only?) (conj {:id :dapps :label (i18n/label :t/dapps) :accessibility-label :dapps})
true (conj {:id :about :label (i18n/label :t/about) :accessibility-label :about})))
:always (conj {:id :about :label (i18n/label :t/about) :accessibility-label :about})))
(defn- change-tab [id] (rf/dispatch [:wallet/select-account-tab id]))
@ -42,7 +42,8 @@
:account-name name
:account (if watch-only? :watched-address :default)
:customization-color color}]
(when (ff/enabled? ::ff/wallet.graph) [quo/wallet-graph {:time-frame :empty}])
(when (ff/enabled? ::ff/wallet.graph)
[quo/wallet-graph {:time-frame :empty}])
(when (not watch-only?)
[quo/wallet-ctas
{:container-style style/cta-buttons

21
src/status_im/contexts/wallet/collectible/style.cljs
View File

@ -1,15 +1,19 @@
(ns status-im.contexts.wallet.collectible.style
(:require [quo.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.platform :as platform]))
[react-native.platform :as platform]
[react-native.safe-area :as safe-area]))
(def container
{:margin-bottom 34})
(def container {:margin-bottom 34})
(def preview-container
(defn- header-height
[]
(+ 56 (safe-area/get-top)))
(defn preview-container
[]
{:margin-horizontal 8
:margin-top 12
:padding-top 100})
:margin-top (+ (header-height) 12)})
(def header
{:margin-horizontal 20
@ -42,12 +46,13 @@
{:flex 1
:margin-left 6})
(def animated-header
(defn animated-header
[]
{:position :absolute
:top 0
:left 0
:right 0
:height 100
:height (header-height)
:z-index 1
:overflow :hidden})

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

@ -73,16 +73,19 @@
:label (i18n/label :t/about)
:accessibility-label :about-tab}])
(def navigate-back #(rf/dispatch [:navigate-back]))
(defn navigate-back-and-clear-collectible
[]
(rf/dispatch [:navigate-back])
(js/setTimeout #(rf/dispatch [:wallet/clear-last-collectible-details]) 700))
(defn animated-header
[{:keys [scroll-amount title-opacity page-nav-type picture title description theme]}]
(let [blur-amount (header-animations/use-blur-amount scroll-amount)
layer-opacity (header-animations/use-layer-opacity
scroll-amount
"transparent"
(colors/theme-colors colors/white-opa-0 colors/neutral-95-opa-0 theme)
(colors/theme-colors colors/white-opa-50 colors/neutral-95-opa-70-blur theme))]
[rn/view {:style style/animated-header}
[rn/view {:style (style/animated-header)}
[reanimated/blur-view
{:style {:flex 1
:background-color (when platform/android?
@ -100,7 +103,7 @@
:background :blur
:icon-name :i/close
:accessibility-label :back-button
:on-press navigate-back
:on-press navigate-back-and-clear-collectible
:right-side [{:icon-name :i/options
:on-press #(rf/dispatch
[:show-bottom-sheet
@ -141,41 +144,42 @@
(let [selected-tab (reagent/atom :overview)
on-tab-change #(reset! selected-tab %)]
(fn [{:keys [collectible set-title-bottom theme]}]
(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])
(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])
{:keys [id
preview-url
collection-data
collectible-data]} collectible
collectible-data]} collectible
{svg? :svg?
preview-uri :uri} preview-url
token-id (:token-id id)
chain-id (get-in id [:contract-id :chain-id])
contract-address (get-in id [:contract-id :address])
preview-uri :uri
:or {preview-uri ""}} preview-url
token-id (:token-id id)
chain-id (get-in id [:contract-id :chain-id])
contract-address (get-in id [:contract-id :address])
{collection-image :image-url
collection-name :name} collection-data
{collectible-name :name} collectible-data
collectible-image {:image preview-uri
:image-width 300
; collectibles don't have width/height
; but we need to pass something
; without it animation doesn't work smoothly
; and :border-radius not applied
:image-height 300
:id token-id
:header collectible-name
:description collection-name}
total-owned (utils/total-owned-collectible
(:ownership collectible)
(:address collectible-owner))]
collection-name :name} collection-data
{collectible-name :name} collectible-data
collectible-image {:image preview-uri
:image-width 300
; collectibles don't have width/height
; but we need to pass something
; without it animation doesn't work smoothly
; and :border-radius not applied
:image-height 300
:id token-id
:header collectible-name
:description collection-name}
total-owned (utils/total-owned-collectible
(:ownership collectible)
(:address collectible-owner))]
[rn/view {:style style/container}
[rn/view
[gradient-layer preview-uri]
[quo/expanded-collectible
{:image-src preview-uri
:container-style style/preview-container
: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))
@ -226,7 +230,11 @@
set-title-bottom (rn/use-callback
(fn [_ y _ height]
(reset! title-bottom-coord
(+ y height -100 (if platform/ios? (- top) top)))))
(+ 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])
@ -236,9 +244,6 @@
{preview-uri :uri} preview-url
{collectible-name :name} collectible-data
{collection-name :name} collection-data]
(rn/use-unmount #(rf/dispatch [:wallet/clear-last-collectible-details]))
[rn/view {:style (style/background-color theme)}
[animated-header
{:scroll-amount scroll-amount