From 68b3bb3089a1311e2afbe89520f811243537ad43 Mon Sep 17 00:00:00 2001 From: Ulises Manuel <90291778+ulisesmac@users.noreply.github.com> Date: Wed, 19 Jun 2024 11:38:14 -0600 Subject: [PATCH] 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 --- .../profile/expanded_collectible/style.cljs | 20 ++++-- .../profile/expanded_collectible/view.cljs | 41 ++++++----- .../contexts/wallet/account/view.cljs | 5 +- .../contexts/wallet/collectible/style.cljs | 21 +++--- .../contexts/wallet/collectible/view.cljs | 71 ++++++++++--------- 5 files changed, 92 insertions(+), 66 deletions(-) diff --git a/src/quo/components/profile/expanded_collectible/style.cljs b/src/quo/components/profile/expanded_collectible/style.cljs index 60f2662d01..efb794fe5f 100644 --- a/src/quo/components/profile/expanded_collectible/style.cljs +++ b/src/quo/components/profile/expanded_collectible/style.cljs @@ -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]}] diff --git a/src/quo/components/profile/expanded_collectible/view.cljs b/src/quo/components/profile/expanded_collectible/view.cljs index e47a738a4f..40e12805b5 100644 --- a/src/quo/components/profile/expanded_collectible/view.cljs +++ b/src/quo/components/profile/expanded_collectible/view.cljs @@ -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 [:=> diff --git a/src/status_im/contexts/wallet/account/view.cljs b/src/status_im/contexts/wallet/account/view.cljs index f49a12ed54..a466345f8b 100644 --- a/src/status_im/contexts/wallet/account/view.cljs +++ b/src/status_im/contexts/wallet/account/view.cljs @@ -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 diff --git a/src/status_im/contexts/wallet/collectible/style.cljs b/src/status_im/contexts/wallet/collectible/style.cljs index bac1c79b0a..c590db43c5 100644 --- a/src/status_im/contexts/wallet/collectible/style.cljs +++ b/src/status_im/contexts/wallet/collectible/style.cljs @@ -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}) diff --git a/src/status_im/contexts/wallet/collectible/view.cljs b/src/status_im/contexts/wallet/collectible/view.cljs index 795220bf42..7f3122f195 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/src/status_im/contexts/wallet/collectible/view.cljs @@ -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