Collectible header

src/js/worklets/header_animations.js

@@ -0,0 +1,25 @@
+import {
+ useDerivedValue,
+ interpolate,
+ interpolateColor,
+ Extrapolation,
+ useAnimatedStyle,
+} from 'react-native-reanimated';
+
+const CLAMP_MIN = 0;
+const CLAMP_MAX = 60;
+const BLUR_MIN = 1;
+const BLUR_MAX = 15;
+
+export const useBlurAmount = (sharedValue) =>
+ useDerivedValue(() =>
+ parseInt(interpolate(sharedValue.value, [CLAMP_MIN, CLAMP_MAX], [BLUR_MIN, BLUR_MAX], Extrapolation.CLAMP)),
+ );
+
+export function useLayerOpacity(sharedValue, from, to) {
+ return useAnimatedStyle(() => ({
+ flex: 1,
+ justifyContent: 'flex-end',
+ backgroundColor: interpolateColor(sharedValue.value, [0, 60], [from, to], 'RGB'),
+ }));
+}

src/mocks/js_dependencies.cljs

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

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

@@ -34,7 +34,8 @@
  label]])
 
 (defn view-internal
- [{:keys [container-style square? on-press counter image-src native-ID supported-file?]}]
+ [{:keys [container-style square? on-press counter image-src native-ID supported-file?
+ 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)]
@@ -48,7 +49,7 @@
  [rn/pressable
  {:on-press (when (and (not image-error?) supported-file?) on-press)
  :accessibility-label :expanded-collectible
- :style (merge container-style (style/container theme))}
+ :style (merge container-style style/container)}
  (cond
  (not supported-file?)
  [fallback-view
@@ -68,7 +69,8 @@
  {:style (style/image square? (:aspect-ratio image-size))
  :source image-src
  :native-ID native-ID
- :on-error #(set-image-error true)}]
+ :on-error #(set-image-error true)
+ :on-load on-collectible-load}]
  [counter-view counter]])]))
 
 (def ?schema
@@ -82,7 +84,8 @@
  [: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-press {:optional true} [:maybe fn?]]
+ [:on-collectible-load {: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> f-scroll-page-header
+ [f-scroll-page-header
  {:scroll-height @scroll-height
  :height height
  :sticky-header sticky-header

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

@@ -1,17 +1,15 @@
-(ns status-im.contexts.wallet.collectible.style)
+(ns status-im.contexts.wallet.collectible.style
+ (:require [quo.foundations.colors :as colors]
+ [react-native.core :as rn]
+ [react-native.platform :as platform]))
 
 (def container
- {:margin-top 100
- :margin-bottom 34})
+ {:margin-bottom 34})
 
 (def preview-container
  {:margin-horizontal 8
- :margin-top 12})
-
-(def preview
- {:width "100%"
- :aspect-ratio 1
- :border-radius 16})
+ :margin-top 12
+ :padding-top 100})
 
 (def header
  {:margin-horizontal 20
@@ -43,3 +41,43 @@
 (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)})