Revert "Implement collectible header with animations (#19783)" (#20023)

This reverts commit 5a6a0f7.

src/mocks/js_dependencies.cljs

@@ -438,7 +438,6 @@
  "../src/js/worklets/parallax.js" #js {}
  "../src/js/worklets/profile_header.js" #js {}
  "../src/js/worklets/identifiers_highlighting.js" #js {}
- "../src/js/worklets/header_animations.js" #js {}
  "./fleets.js" default-fleets
  "../translations/ar.json" (js/JSON.parse (slurp "./translations/ar.json"))
  "../translations/de.json" (js/JSON.parse (slurp "./translations/de.json"))

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

@@ -1,10 +1,13 @@
 (ns quo.components.profile.expanded-collectible.style
- (:require [quo.foundations.colors :as colors]))
+ (:require [quo.foundations.colors :as colors]
+ [quo.foundations.shadows :as shadows]))
 
-(def container
- {:align-items :center
- :justify-content :center
- :border-radius 16})
+(defn container
+ [theme]
+ (merge (shadows/get 2 theme)
+ {:align-items :center
+ :justify-content :center
+ :border-radius 16}))
 
 (defn image
  [square? aspect-ratio]

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

@@ -34,8 +34,7 @@
  label]])
 
 (defn view-internal
- [{:keys [container-style square? on-press counter image-src native-ID supported-file?
- on-collectible-load]}]
+ [{:keys [container-style square? on-press counter image-src native-ID supported-file?]}]
  (let [theme (quo.theme/use-theme)
  [image-size set-image-size] (rn/use-state {})
  [image-error? set-image-error] (rn/use-state false)]
@@ -49,7 +48,7 @@
  [rn/pressable
  {:on-press (when (and (not image-error?) supported-file?) on-press)
  :accessibility-label :expanded-collectible
- :style (merge container-style style/container)}
+ :style (merge container-style (style/container theme))}
  (cond
  (not supported-file?)
  [fallback-view
@@ -69,8 +68,7 @@
  {:style (style/image square? (:aspect-ratio image-size))
  :source image-src
  :native-ID native-ID
- :on-error #(set-image-error true)
- :on-load on-collectible-load}]
+ :on-error #(set-image-error true)}]
  [counter-view counter]])]))
 
 (def ?schema
@@ -84,8 +82,7 @@
  [:native-ID {:optional true} [:maybe [:or string? keyword?]]]
  [:square? {:optional true} [:maybe boolean?]]
  [:counter {:optional true} [:maybe string?]]
- [:on-press {:optional true} [:maybe fn?]]
- [:on-collectible-load {:optional true} [:maybe fn?]]]]]
+ [:on-press {:optional true} [:maybe fn?]]]]]
  :any])
 
 (def view (schema/instrument #'view-internal ?schema))

src/status_im/common/scroll_page/view.cljs

@@ -108,7 +108,7 @@
  children]
  (let [theme (quo.theme/use-theme)]
  [:<>
- [f-scroll-page-header
+ [:f> f-scroll-page-header
  {:scroll-height @scroll-height
  :height height
  :sticky-header sticky-header

src/status_im/contexts/wallet/collectible/style.cljs

@@ -1,15 +1,17 @@
-(ns status-im.contexts.wallet.collectible.style
- (:require [quo.foundations.colors :as colors]
- [react-native.core :as rn]
- [react-native.platform :as platform]))
+(ns status-im.contexts.wallet.collectible.style)
 
 (def container
- {:margin-bottom 34})
+ {:margin-top 100
+ :margin-bottom 34})
 
 (def preview-container
  {:margin-horizontal 8
- :margin-top 12
- :padding-top 100})
+ :margin-top 12})
+
+(def preview
+ {:width "100%"
+ :aspect-ratio 1
+ :border-radius 16})
 
 (def header
  {:margin-horizontal 20
@@ -41,43 +43,3 @@
 (def opensea-button
  {:flex 1
  :margin-left 6})
-
-(def animated-header
- {:position :absolute
- :top 0
- :left 0
- :right 0
- :height 100
- :z-index 1
- :overflow :hidden})
-
-(defn scroll-view
- [safe-area-top]
- {:flex 1
- :margin-top (when platform/ios? (- safe-area-top))})
-
-(def gradient-layer
- {:position :absolute
- :top 0
- :left 0
- :right 0
- :bottom 0
- :flex 1
- :align-items :center
- :overflow :hidden})
-
-(def image-background
- {:height (:height (rn/get-window))
- :aspect-ratio 1})
-
-(def gradient
- {:position :absolute
- :top 0
- :left 0
- :right 0
- :bottom 0})
-
-(defn background-color
- [theme]
- {:flex 1
- :background-color (colors/theme-colors colors/white colors/neutral-95 theme)})