From 940edc2e53bf1e3a4e671c2dac7ae1cb329e348d Mon Sep 17 00:00:00 2001 From: Ulises Manuel <90291778+ulisesmac@users.noreply.github.com> Date: Mon, 15 Jul 2024 12:34:02 -0600 Subject: [PATCH] fix(wallet): Some collectibles were displayed as "can iOS can't fetch collectible error (#20714) --- .../profile/expanded_collectible/view.cljs | 10 ++- .../contexts/wallet/collectible/events.cljs | 2 +- .../contexts/wallet/collectible/view.cljs | 74 +++++++++---------- 3 files changed, 46 insertions(+), 40 deletions(-) diff --git a/src/quo/components/profile/expanded_collectible/view.cljs b/src/quo/components/profile/expanded_collectible/view.cljs index 7bcc2fc553..7187573660 100644 --- a/src/quo/components/profile/expanded_collectible/view.cljs +++ b/src/quo/components/profile/expanded_collectible/view.cljs @@ -79,14 +79,20 @@ [counter-view counter]) [rn/view {:style (style/collectible-border theme)}]]])) +(defn invalid-image? + [image-src] + (or (nil? image-src) + (string/blank? image-src))) + (defn view-internal [{:keys [container-style square? on-press counter image-src native-ID supported-file? 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)))] + [error? set-error] (rn/use-state (invalid-image? image-src))] + (rn/use-effect #(set-error (invalid-image? image-src)) + [image-src]) [rn/pressable {:style (merge container-style (style/container aspect-ratio)) :accessibility-label :expanded-collectible diff --git a/src/status_im/contexts/wallet/collectible/events.cljs b/src/status_im/contexts/wallet/collectible/events.cljs index a95b231537..f78b06bb9a 100644 --- a/src/status_im/contexts/wallet/collectible/events.cljs +++ b/src/status_im/contexts/wallet/collectible/events.cljs @@ -185,7 +185,7 @@ ;; 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 + {:ms 17 :dispatch [:navigate-to :screen/wallet.collectible]}]]}))) (defn- keep-not-empty-value diff --git a/src/status_im/contexts/wallet/collectible/view.cljs b/src/status_im/contexts/wallet/collectible/view.cljs index 00e4d06fde..cb86c75c04 100644 --- a/src/status_im/contexts/wallet/collectible/view.cljs +++ b/src/status_im/contexts/wallet/collectible/view.cljs @@ -79,12 +79,20 @@ (rf/dispatch [:wallet/clear-collectible-details])) (defn animated-header - [{: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 - (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))] + [{:keys [scroll-amount title-opacity page-nav-type theme]}] + (let [blur-amount (header-animations/use-blur-amount scroll-amount) + layer-opacity (header-animations/use-layer-opacity + scroll-amount + (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)) + {{preview-uri :uri} :preview-url + {title :name} :collectible-data + {description :name} :collection-data + id :id} (rf/sub [:wallet/collectible-details])] [rn/view {:style (style/animated-header)} [reanimated/blur-view {:style {:flex 1 @@ -97,7 +105,7 @@ [reanimated/view {:style layer-opacity} [quo/page-nav {:type page-nav-type - :picture picture + :picture preview-uri :title title :description description :background :blur @@ -110,7 +118,7 @@ {:content (fn [] [options-drawer/view {:name title - :image picture + :image preview-uri :id id}]) :theme theme}])}] :center-opacity title-opacity}]]]])) @@ -144,10 +152,11 @@ [_] (let [selected-tab (reagent/atom :overview) on-tab-change #(reset! selected-tab %)] - (fn [{:keys [collectible set-title-bottom theme]}] + (fn [{:keys [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 (rf/sub [:wallet/collectible-details]) 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]) @@ -196,14 +205,14 @@ 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-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 @@ -241,33 +250,24 @@ (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 - (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])] + (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)] [rn/view {:style (style/background-color theme)} [animated-header - {:id (:id collectible) - :scroll-amount scroll-amount + {:scroll-amount scroll-amount :title-opacity title-opacity :page-nav-type :title-description - :picture (:uri preview-url) - :title (:name collectible-data) - :description (:name collection-data) :theme theme}] [reanimated/scroll-view {:style (style/scroll-view top) :on-scroll #(on-scroll % scroll-amount title-opacity title-bottom-coord)} [collectible-details - {:collectible collectible - :set-title-bottom set-title-bottom + {:set-title-bottom set-title-bottom :theme theme}]]]))