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

src/quo/components/profile/expanded_collectible/style.cljs

@@ -7,10 +7,22 @@
    :border-radius   16})
 
 (defn image
-  [square? aspect-ratio]
+  [square? aspect-ratio theme]
   {:width            "100%"
    :aspect-ratio     (if square? 1 aspect-ratio)
-   :border-radius 16})
+   :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]}]

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}]))
+    :value           counter}])
 
 (defn- fallback-view
-  [{:keys [label theme counter]}]
+  [{:keys [label theme counter on-mount]}]
-  [rn/view
+  (rn/use-mount on-mount)
-   {:style (style/fallback {:theme theme})}
+  [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)]
@@ -55,23 +54,27 @@
        [fallback-view
         {:label    (i18n/label :t/unsupported-file)
          :counter  counter
-         :theme   theme}]
+         :theme    theme
+         :on-mount on-collectible-load}]
 
        image-error?
        [fallback-view
         {:label    (i18n/label :t/cant-fetch-info)
          :counter  counter
-         :theme   theme}]
+         :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
   [:=>

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

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
+(def container {:margin-bottom 34})
-  {:margin-bottom 34})
 
-(def preview-container
+(defn- header-height
+  []
+  (+ 56 (safe-area/get-top)))
+
+(defn preview-container
+  []
   {:margin-horizontal 8
-   :margin-top        12
+   :margin-top        (+ (header-height) 12)})
-   :padding-top       100})
 
 (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})
 

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
@@ -150,7 +153,8 @@
                     collection-data
                     collectible-data]}     collectible
             {svg?        :svg?
-             preview-uri :uri}          preview-url
+             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])
@@ -175,7 +179,7 @@
           [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