Improve JS code

src/js/worklets/header_animations.js

@@ -1,23 +1,32 @@
 import {
- useDerivedValue,
- interpolate,
- interpolateColor,
- Extrapolation,
- useAnimatedStyle,
+  useDerivedValue,
+  interpolate,
+  interpolateColor,
+  Extrapolation,
+  useAnimatedStyle,
 } from 'react-native-reanimated';
 
-export function blurAmount(sharedValue) {
- return useDerivedValue(() => {
- return parseInt(interpolate(sharedValue.value, [0, 60], [1, 15], Extrapolation.CLAMP));
- });
-}
+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 layerOpacity(sharedValue, from, to) {
- return useAnimatedStyle(() => {
- return {
- flex: 1,
- justifyContent: 'flex-end',
- backgroundColor: interpolateColor(sharedValue.value, [0, 60], [from, to], 'RGB'),
- };
- });
+export function useLayerOpacity(sharedValue, from, to) {
+ return useAnimatedStyle(() => ({
+ flex: 1,
+ justifyContent: 'flex-end',
+ backgroundColor: interpolateColor(sharedValue.value, [0, 60], [from, to], 'RGB')
+ }));
 }

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

@@ -76,8 +76,8 @@
 
 (defn animated-header
  [{:keys [scroll-amount title-opacity page-nav-type picture title description theme]}]
- (let [blur-amount (header-animations/blur-amount scroll-amount)
- layer-opacity (header-animations/layer-opacity
+ (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-50 colors/neutral-95-opa-70-blur theme))]

src/utils/worklets/header_animations.cljs

@@ -2,6 +2,6 @@
 
 (def worklets (js/require "../src/js/worklets/header_animations.js"))
 
-(def blur-amount (.-blurAmount worklets))
+(def use-blur-amount (.-useBlurAmount worklets))
 
-(def layer-opacity (.-layerOpacity worklets))
+(def use-layer-opacity (.-useLayerOpacity worklets))