yeet

modules/collectibles/profile_effects/constants.tsx

@@ -0,0 +1,5 @@
+// Metro module 8061 (f8062).
+export const PROFILE_EFFECT_INTRO_MINIMUM_DELAY = 0.1;
+export const PROFILE_EFFECT_INTRO_DELAY = 500;
+export const RESET = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
+export const PFX_MOBILE_ACTION_SHEET_BANNER_HEIGHT = 100;

modules/collectibles/profile_effects/native/EditProfileEffectSection.tsx

@@ -0,0 +1,84 @@
+// Metro module 13724 (f13725).
+import { memo, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { isProfileEffectRecord } from "../../records/ProfileEffectRecord";
+import { SAMPLE_PROFILE_ASPECT_RATIO } from "../../native/CollectiblesPreviewConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
+import { NONE_ITEM, SHOP_ITEM } from "../useProfileEffectSections";
+import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import useProfileEffect from "../useProfileEffect";
+import FastImage from "../../../../components_native/common/FastImage";
+import Module8695 from "../../../../_bundle/Module8695";
+import ProfileEffect from "./ProfileEffect";
+let Component;
+const useStyles = createStyles({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: GUTTER_SIZE
+  },
+  rowSpacer: {
+    height: GUTTER_SIZE
+  },
+  profileEffect: {
+    overflow: "hidden",
+    width: "100%",
+    height: "100%"
+  },
+  sampleProfile: {
+    aspectRatio: SAMPLE_PROFILE_ASPECT_RATIO,
+    width: "100%"
+  }
+});
+const r46 = memo((a0) => {
+  const { items, selectedSkuId, setSelectedProfileEffect, guildId, isTryItOut: isTryItOut2 = false } = a0;
+  const isTryItOut = isTryItOut2;
+  const size = a0.size;
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    setSelectedProfileEffect(null);
+  }, [setSelectedProfileEffect]);
+  return <>
+    <View style={styles.row}>
+      {[...items, null, null].slice(0, ROW_SIZE).map((a0, index) => {
+        if (a0 === NONE_ITEM) {
+          return <EditCollectiblesListItemNone key="none" size={size} onPress={callback} isSelected={selectedSkuId == null} asDefault={guildId != null} />;
+        }
+        if (a0 === SHOP_ITEM) {
+          return <EditCollectiblesListItemShop key="shop" size={size} analyticsSource={AnalyticsLocation.EDIT_PROFILE_EFFECT_SHEET} />;
+        }
+        if (isProfileEffectRecord(a0)) {
+          return <Component key={a0.skuId} item={a0} isSelected={selectedSkuId === a0.skuId} setSelectedProfileEffect={setSelectedProfileEffect} isTryItOut={isTryItOut} size={size} />;
+        }
+        return <View key={index} style={{
+          height: size,
+          width: size
+        }} />;
+      })}
+    </View>
+    <View style={styles.rowSpacer} />
+  </>;
+});
+r46.displayName = "EditProfileEffectRow";
+Component = memo(({ item, isSelected, setSelectedProfileEffect: setSelectedProfileEffect2, isTryItOut: isTryItOut2 = false, size: size2 }) => {
+  const styles = useStyles();
+  const profileEffect = useProfileEffect(item.skuId);
+  let c20671_2 = profileEffect;
+  return <EditCollectiblesListItemProduct skuId={item.skuId} isSelected={isSelected} onPress={useCallback(() => {
+    setSelectedProfileEffect2(item);
+  }, [setSelectedProfileEffect2, item])} isTryItOut={isTryItOut2} size={size2} accessibilityLabel={profileEffect?.accessibilityLabel}>
+    <View style={[styles.profileEffect, {
+      borderRadius: 6
+    }]} accessible={false} importantForAccessibility="no">
+      <FastImage source={{
+        uri: Module8695
+      }} style={styles.sampleProfile} resizeMode="cover" />
+      <ProfileEffect skuId={item.skuId} bannerAdjustment={0} useThumbnail thumbnailUrlOverride={useMemo(() => c20671_2?.thumbnailPreviewSrc == null ? c20671_2?.thumbnailPreviewSrc : `${c20671_2.thumbnailPreviewSrc}?width=100&height=195`, [profileEffect?.thumbnailPreviewSrc])} />
+    </View>
+  </EditCollectiblesListItemProduct>;
+});
+Component.displayName = "EditProfileEffectItem";
+export { r46 as EditProfileEffectRow };

modules/collectibles/profile_effects/native/ProfileEffect.tsx

@@ -0,0 +1,259 @@
+// Metro module 8059 (f8060).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { Image as Image2, View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import AppStateStore from "../../../../stores/native/AppStateStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
+import { sortEffectLayers, usePotentiallyRandomizedProfileEffect } from "../utils";
+import { PROFILE_EFFECT_INTRO_DELAY } from "../constants";
+import * as _ProfileEffectUtils from "./ProfileEffectUtils";
+import useClock from "../useClock";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { AppStates } from "../../../../ConstantsIOS";
+import ProfileEffectLayer_android from "./ProfileEffectLayer.android";
+import { DEFAULT_PROFILE_EFFECT_WH_RATIO } from "./getAssetWHRatio";
+import FastImage from "../../../../components_native/common/FastImage";
+import useProfileEffect from "../useProfileEffect";
+function $mk79773($env) {
+  return () => new Set($env[0].map((item) => item.src));
+}
+function $mk79774($env) {
+  return () => {
+    const r2 = $env;
+    const r4 = r2[2];
+    const current2 = r2[1];
+    r4.current = current2;
+    r2[3].current = current2.size === 0;
+  };
+}
+function $mk79775($env) {
+  return (a0) => {
+    const r3 = $env;
+    const r2 = r3[3];
+    if (!r2.current) {
+      const r7 = r3[2];
+      r7.current.delete(a0);
+      if (r7.current.size === 0) {
+        r2.current = true;
+      }
+    }
+  };
+}
+function $mk79776($env) {
+  return (a0) => {
+    (0, $env[0])(a0.nativeEvent.layout.width);
+  };
+}
+let useStyles, ProfileEffect;
+const StaticEffect = function StaticEffect(props) {
+  let props2;
+  const { profileEffect: profileEffect2, bannerAdjustment = 0 } = props;
+  let env16226;
+  const useThumbnail = props.useThumbnail;
+  let thumbnailUrlOverride = props.thumbnailUrlOverride;
+  const styles2 = useStyles();
+  let reducedMotionSrc2 = profileEffect2.reducedMotionSrc;
+  const reducedMotionSrc = reducedMotionSrc2;
+  const { thumbnailPreviewSrc: thumbnailPreviewSrc2, accessibilityLabel: accessibilityLabel2 } = profileEffect2;
+  const r23 = env16226 = {};
+  env16226[0] = void 0;
+  const r25 = _slicedToArray(useState(0), 2);
+  const r15 = r25[0];
+  env16226[0] = r25[1];
+  useWindowDimensions_native().height;
+  const callback2 = useCallback($mk79776(r23), []);
+  const state = r15;
+  const [height, setState] = useState(0);
+  if (thumbnailUrlOverride == null) {
+    thumbnailUrlOverride = thumbnailPreviewSrc2;
+  }
+  const thumbnailPreviewSrc = thumbnailUrlOverride;
+  useEffect(() => {
+    if (state !== 0) {
+      Image2.getSize(useThumbnail ? thumbnailPreviewSrc : reducedMotionSrc, (a0, a1) => {
+        setState(a1 * (state / a0));
+      }, () => {
+        setState(state / DEFAULT_PROFILE_EFFECT_WH_RATIO);
+      });
+    }
+  }, [reducedMotionSrc, thumbnailPreviewSrc, state, useThumbnail]);
+  if (height === 0) {
+    props2 = {
+      style: styles2.profileEffects,
+      pointerEvents: "none",
+      onLayout: callback2
+    };
+  } else {
+    if (useThumbnail) {
+      reducedMotionSrc2 = thumbnailPreviewSrc;
+    }
+    props2 = {
+      style: styles2.profileEffects,
+      pointerEvents: "none",
+      onLayout: callback2,
+      children: <FastImage resizeMode="cover" resizeMethod="resize" enableAnimation source={{
+        uri: reducedMotionSrc2
+      }} alt={accessibilityLabel2} height={height} width={state} style={[styles2.effect, {
+        width: state,
+        height,
+        top: 0 - bannerAdjustment
+      }]} />
+    };
+  }
+  return <View {...props2} />;
+};
+useStyles = createStyles({
+  profileEffects: {
+    position: "absolute",
+    width: "100%",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flex: 1,
+    justifyContent: "flex-start"
+  },
+  effect: {
+    position: "absolute"
+  }
+});
+ProfileEffect = (props) => {
+  let ref, callback, ref2, state3, setState2, ref3, ref4, ref5, stop, reset, stateFromStores, ref6;
+  let env16228;
+  let env16229;
+  const profileEffect = props.profileEffect;
+  props.replayOnNavigationFocus;
+  const { style, paused } = props;
+  ref = void 0;
+  callback = void 0;
+  ref2 = void 0;
+  state3 = void 0;
+  setState2 = void 0;
+  ref3 = void 0;
+  ref4 = void 0;
+  ref5 = void 0;
+  stop = void 0;
+  reset = void 0;
+  stateFromStores = void 0;
+  ref6 = void 0;
+  const styles = useStyles();
+  const r21 = env16228 = {};
+  env16228[0] = void 0;
+  const r9 = _slicedToArray(useState(0), 2);
+  const r24 = r9[0];
+  env16228[0] = r9[1];
+  useWindowDimensions_native().height;
+  const callback2 = useCallback($mk79776(r21), []);
+  const state2 = r24;
+  const accessibilityLabel = profileEffect.accessibilityLabel;
+  const memo = useMemo(() => sortEffectLayers(profileEffect.effects), [profileEffect.effects]);
+  const r39 = env16229 = {};
+  env16229[0] = memo;
+  env16229[1] = void 0;
+  env16229[2] = void 0;
+  env16229[3] = void 0;
+  const memo2 = useMemo($mk79773(r39), [memo]);
+  env16229[1] = memo2;
+  env16229[2] = useRef(memo2);
+  const ref7 = useRef(false);
+  env16229[3] = ref7;
+  useEffect($mk79774(r39), [memo2]);
+  const callback3 = useCallback($mk79775(r39), []);
+  ref = ref7;
+  callback = callback3;
+  ref2 = useRef(-PROFILE_EFFECT_INTRO_DELAY);
+  [state3, setState2] = useState([]);
+  ref3 = useRef([]);
+  ref4 = useRef(false);
+  ref5 = useRef(memo);
+  useEffect(() => {
+    ref5.current = memo;
+    ref4.current = false;
+    ref2.current = -PROFILE_EFFECT_INTRO_DELAY;
+    const current2 = memo.map((item) => _ProfileEffectUtils.shouldAnimate(item, ref2.current));
+    ref3.current = current2;
+    setState2(current2);
+  }, [memo]);
+  const clock = useClock(useCallback((a0) => {
+    if (ref.current) {
+      if (!ref4.current) {
+        ref4.current = true;
+        ref2.current = -PROFILE_EFFECT_INTRO_DELAY;
+        ref3.current = [];
+      }
+      ref2.current = ref2.current + a0;
+      const current2 = ref5.current;
+      const current = ref3.current;
+      let c26100_1 = current2.length !== current.length;
+      const current3 = current2.map((item, index) => {
+        const shouldAnimate = _ProfileEffectUtils.shouldAnimate(item, ref2.current);
+        if (shouldAnimate !== current[index]) {
+          c26100_1 = true;
+        }
+        return shouldAnimate;
+      });
+      if (c26100_1) {
+        ref3.current = current3;
+        setState2(current3);
+      }
+    }
+  }, [ref]));
+  stop = clock.stop;
+  reset = clock.reset;
+  stateFromStores = useStateFromStores([AppStateStore], () => AppStateStore.getState());
+  ref6 = useRef(null);
+  useEffect(() => {
+    if (ref6.current !== null) {
+      if (ref6.current !== stateFromStores) {
+        if (stateFromStores === AppStates.ACTIVE) {
+          reset();
+        } else {
+          stop();
+        }
+        ref6.current = stateFromStores;
+      }
+    } else {
+      ref6.current = stateFromStores;
+    }
+  }, [stateFromStores, stop, reset]);
+  useEffect(() => {
+    if (paused) {
+      stop();
+    } else {
+      reset();
+    }
+  }, [paused, stop, reset]);
+  return <View style={useMemo(() => [styles.profileEffects, style], [styles, style])} pointerEvents="none" onLayout={callback2}>
+    {memo.map((item, index) => {
+      const key = item.src + index;
+      let animate = state3[index];
+      if (animate == null) {
+        animate = false;
+      }
+      return <ProfileEffectLayer_android key={key} layerConfig={item} animate={animate} paused={paused} width={state2} accessibilityLabel={accessibilityLabel} onLoad={callback} loaded={ref.current} />;
+    })}
+  </View>;
+};
+export default function WrappedProfileEffect(props) {
+  const profileEffect2 = useProfileEffect(props.skuId);
+  const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const potentiallyRandomizedProfileEffect = usePotentiallyRandomizedProfileEffect(profileEffect2);
+  return potentiallyRandomizedProfileEffect != null ? !stateFromStores2 && !props.useThumbnail ? <ProfileEffect profileEffect={potentiallyRandomizedProfileEffect} {...props} /> : <StaticEffect profileEffect={potentiallyRandomizedProfileEffect} bannerAdjustment={props.bannerAdjustment} useThumbnail={props.useThumbnail} thumbnailUrlOverride={props.thumbnailUrlOverride} /> : null;
+};
+export function usePreloadProfileEffect(a0) {
+  let env16224;
+  const r1 = env16224 = {};
+  env16224[0] = a0;
+  const memo2 = useMemo($mk79773(r1), [a0]);
+  env16224[1] = memo2;
+  env16224[2] = useRef(memo2);
+  const ref7 = useRef(false);
+  env16224[3] = ref7;
+  useEffect($mk79774(r1), [memo2]);
+  return {
+    loaded: ref7,
+    onLayerLoaded: useCallback($mk79775(r1), [])
+  };
+}

modules/collectibles/profile_effects/native/ProfileEffectLayer.android.tsx

@@ -0,0 +1,23 @@
+// Metro module 8065 (f8066).
+import { memo, useRef, useEffect } from "react";
+import { StyleSheet } from "react-native";
+import { useAPNGPlayerControls, APNGPlayer } from "../../../image/native/APNGPlayer.android";
+import { calculateProfileEffectHeight } from "./ProfileEffectUtils";
+const r22 = memo(function({ layerConfig, animate, paused, width, accessibilityLabel, onLoad }) {
+  const ref = useRef(null);
+  const aPNGPlayerControls = useAPNGPlayerControls(ref);
+  useEffect(() => {
+    if (animate && !paused) {
+      aPNGPlayerControls.play();
+    } else {
+      aPNGPlayerControls.pause();
+    }
+  }, [animate, paused, aPNGPlayerControls]);
+  return <APNGPlayer ref={ref} url={layerConfig.src} autoplay={false} style={[StyleSheet.absoluteFill, {
+    position: "absolute",
+    width,
+    height: calculateProfileEffectHeight(layerConfig, width),
+    opacity: animate ? 1 : 0
+  }]} ariaLabel={accessibilityLabel} onLoad={onLoad} />;
+});
+export default r22;

modules/collectibles/profile_effects/native/ProfileEffectUtils.tsx

@@ -0,0 +1,17 @@
+// Metro module 8062 (f8063).
+import { getAssetWHRatio } from "./getAssetWHRatio";
+export function shouldAnimate(a0, a1) {
+  if (a1 >= a0.start) {
+    if (!a0.loop && a1 > a0.duration + a0.start) {
+      return false;
+    }
+    if (a0.loop && a0.loopDelay !== void 0 && a0.loopDelay > 0 && (a1 - a0.start) % (a0.duration + a0?.loopDelay) > a0.duration) {
+      return false;
+    }
+    return true;
+  }
+  return false;
+}
+export function calculateProfileEffectHeight(a0, a1) {
+  return a1 / getAssetWHRatio(a0);
+}

modules/collectibles/profile_effects/native/getAssetWHRatio.tsx

@@ -0,0 +1,13 @@
+// Metro module 8063 (f8064).
+export const DEFAULT_PROFILE_EFFECT_WH_RATIO = 0.5113636363636364;
+export function getAssetWHRatio(a0) {
+  let width = a0.width;
+  if (!(width != null && !(width <= 0))) {
+    width = 450;
+  }
+  let height = a0.height;
+  if (!(height != null && !(height <= 0))) {
+    height = 880;
+  }
+  return width / height;
+}

modules/collectibles/profile_effects/native/previews/ProfileEffectUserPreview.tsx

@@ -0,0 +1,9 @@
+// Metro module 8075 (f8076).
+import UserProfilePreview from "../../../../user_profile/native/UserProfilePreview";
+import { intl, t } from "../../../../../intl/index.native";
+export default function ProfileEffectUserPreview(props) {
+  const { profileEffect, ...props2 } = props;
+  return <UserProfilePreview profileEffectOverride={profileEffect} accessibilityLabel={profileEffect != null ? intl.formatToPlainString(t.mbHmX2, {
+    a11y_text: profileEffect.accessibilityLabel
+  }) : intl.string(t.XYdHeC)} {...props2} />;
+};

modules/collectibles/profile_effects/useClock.tsx

@@ -0,0 +1,94 @@
+// Metro module 8064 (f8065).
+import { useRef, useCallback, useEffect } from "react";
+import Module38 from "../../../_bundle/Module38";
+import useMountEffect from "../../../hooks/useMountEffect";
+export default function _default(a0) {
+  let callback2, callback3;
+  let c16232_0 = a0;
+  let r4 = arguments[1];
+  if (r4 === void 0) {
+    r4 = {};
+  }
+  let minInterval = r4.minInterval;
+  if (minInterval === void 0) {
+    minInterval = 41.666666666666664;
+  }
+  const current = minInterval;
+  const { allowableMinInterval, droppedFramesCallbackThreshold, droppedFramesCallback, droppedFramesResetTime = 3000 } = r4;
+  let c16232_5 = droppedFramesResetTime;
+  callback2 = void 0;
+  callback3 = void 0;
+  const ref = useRef(current);
+  const ref2 = useRef(0);
+  const ref3 = useRef(void 0);
+  const ref4 = useRef(void 0);
+  const ref5 = useRef(true);
+  const ref6 = useRef(0);
+  const ref7 = useRef(void 0);
+  const callback = useCallback(() => {
+    ref6.current = 0;
+    if (ref7.current != null) {
+      clearTimeout(ref7.current);
+      ref7.current = void 0;
+    }
+  }, []);
+  callback2 = useCallback(() => {
+    ref5.current = false;
+    cancelAnimationFrame(ref2.current);
+    clearTimeout(ref7.current);
+  }, []);
+  callback3 = useCallback((a0) => {
+    if (ref5.current) {
+      if (ref3.current == null) {
+        ref3.current = a0;
+      }
+      if (ref4.current == null) {
+        ref4.current = a0;
+      }
+      const r6 = a0 - ref4.current;
+      const r10 = a0 - ref3.current;
+      const r14 = Math;
+      let r12 = allowableMinInterval;
+      if (allowableMinInterval == null) {
+        r12 = 120;
+      }
+      if (r10 > 1.5 * r14.min(r12, ref.current)) {
+        ref6.current = ref6.current + 1;
+        if (ref7.current != null) {
+          clearTimeout(ref7.current);
+        }
+        ref7.current = setTimeout(callback, c16232_5);
+        if (droppedFramesCallbackThreshold != null && ref6.current > droppedFramesCallbackThreshold) {
+          Module38(droppedFramesCallback != null, "useClock - If you set a dropped frames threshold, you must provide a droppedFramesCallback to do something when that threshold is hit");
+          if (droppedFramesCallback()) {
+            ref6.current = 0;
+          }
+        }
+      }
+      ref3.current = a0;
+      if (r6 >= ref.current - 3) {
+        ref4.current = a0;
+        c16232_0(r6);
+      }
+      ref2.current = requestAnimationFrame(callback3);
+    }
+  }, [allowableMinInterval, callback, droppedFramesResetTime, droppedFramesCallbackThreshold, droppedFramesCallback, a0]);
+  const callback4 = useCallback(() => {
+    ref5.current = true;
+    ref4.current = void 0;
+    cancelAnimationFrame(ref2.current);
+    ref2.current = requestAnimationFrame(callback3);
+  }, [callback3]);
+  useEffect(() => {
+    ref.current = current;
+  }, [current]);
+  useMountEffect(() => {
+    ref2.current = requestAnimationFrame(callback3);
+    return () => callback2();
+  });
+  return {
+    stop: callback2,
+    reset: callback4,
+    ticking: ref5
+  };
+};

modules/collectibles/profile_effects/useProfileEffect.tsx

@@ -0,0 +1,28 @@
+// Metro module 8066 (f8067).
+import { useEffect } from "react";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
+import { isProfileEffectRecord } from "../records/ProfileEffectRecord";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { maybeFetchCollectiblesProduct } from "../CollectiblesActionCreators";
+export default function useProfileEffect(a0) {
+  let c16234_1;
+  const stateFromStores = useStateFromStores([CollectiblesCategoryStore, CollectiblesPurchaseStore], () => {
+    if (a0 != null) {
+      const product = CollectiblesCategoryStore.getProduct(a0);
+      if (isProfileEffectRecord(product == null ? void 0 : product.items[0])) {
+        return product.items[0];
+      }
+      const purchase = CollectiblesPurchaseStore.getPurchase(a0);
+      return isProfileEffectRecord(purchase == null ? void 0 : purchase.items[0]) ? purchase.items[0] : void 0;
+    }
+  });
+  const r15 = a0 != null && stateFromStores == null;
+  c16234_1 = r15;
+  useEffect(() => {
+    if (c16234_1) {
+      maybeFetchCollectiblesProduct(a0);
+    }
+  }, [r15, a0]);
+  return stateFromStores;
+};

modules/collectibles/profile_effects/useProfileEffectSections.tsx

@@ -0,0 +1,61 @@
+// Metro module 13723 (f13724).
+import { useMemo } from "react";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
+import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/defaultAreStatesEqual";
+import { getProfileEffects, isPremiumCollectiblesPurchase, isPremiumCollectiblesProduct } from "../CollectiblesUtils";
+import { intl, t } from "../../../intl/index.native";
+let c9538_6 = {
+  PURCHASE: "purchase",
+  PREMIUM_PURCHASE: "premium_purchase",
+  PREVIEW: "preview"
+};
+let c9538_7 = {
+  skuId: "None"
+};
+let c9538_8 = {
+  skuId: "Shop"
+};
+export default function useProfileEffectSections() {
+  let c20669_1, c20669_2;
+  const stateFromStores = useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.purchases);
+  const [r22, r23] = useStateFromStoresArray([CollectiblesCategoryStore], () => [CollectiblesCategoryStore.categories, CollectiblesCategoryStore.products]);
+  c20669_1 = r22;
+  c20669_2 = r23;
+  return useMemo(() => {
+    const r22 = getProfileEffects(stateFromStores, c20669_1).reduce((acc, item) => {
+      const r9 = stateFromStores.get(item.skuId);
+      if (r9 != null ? isPremiumCollectiblesPurchase(r9) : isPremiumCollectiblesProduct(c20669_2.get(item.skuId))) {
+        acc.premium_purchase.push(item);
+      } else if (r9 != null) {
+        acc.purchase.push(item);
+      } else {
+        acc.preview.push(item);
+      }
+      return acc;
+    }, {
+      purchase: [],
+      premium_purchase: [],
+      preview: []
+    });
+    return [{
+      section: c9538_6.PURCHASE,
+      items: [c9538_7, c9538_8, ...r22.purchase],
+      height: 12,
+      header: intl.string(t["9x1v/p"])
+    }, {
+      section: c9538_6.PREMIUM_PURCHASE,
+      items: r22.premium_purchase,
+      height: 12,
+      header: intl.string(t.TiLCgw)
+    }, {
+      section: c9538_6.PREVIEW,
+      items: r22.preview,
+      height: 12,
+      header: intl.string(t["1vbbee"])
+    }].filter((item) => item.items.length > 0);
+  }, [r22, r23, stateFromStores]);
+};
+export { c9538_6 as Section };
+export { c9538_7 as NONE_ITEM };
+export { c9538_8 as SHOP_ITEM };

modules/collectibles/profile_effects/utils.tsx

@@ -0,0 +1,63 @@
+// Metro module 8060 (f8061).
+import { useState } from "react";
+import { cloneDeep, isEqual } from "../../../_bundle/Module12";
+function $mk79787() {
+  return (a0, a1) => {
+    let r8 = a1.randomizedSources?.length;
+    if (r8 == null) {
+      r8 = 0;
+    }
+    return r8 > 0 ? a0 !== 0 ? Math.min(a0, r8) : r8 : a0;
+  };
+}
+function $mk79788($env) {
+  return (a0) => {
+    if (a0.randomizedSources != null && a0.randomizedSources.length > 0) {
+      a0.src = a0.randomizedSources[$env[0]].src;
+    }
+    return a0;
+  };
+}
+export function sortEffectLayers(a0) {
+  return a0.sort(({ zIndex }, b) => {
+    if (zIndex == null) {
+      zIndex = 0;
+    }
+    let zIndex2 = b.zIndex;
+    if (zIndex2 == null) {
+      zIndex2 = 0;
+    }
+    return zIndex - zIndex2;
+  });
+}
+export function usePotentiallyRandomizedProfileEffect(a0) {
+  let env16230;
+  const [state, setState] = useState(a0);
+  const r15 = env16230 = {};
+  env16230[0] = void 0;
+  let r22 = a0;
+  if (a0 != null) {
+    const r26 = cloneDeep(a0);
+    const r0 = r26.effects.reduce($mk79787(), 0) - 1;
+    env16230[0] = Math.floor(Math.random() * (r0 - 0 + 1) + 0);
+    r26.effects = r26.effects.map($mk79788(r15));
+    r22 = r26;
+  }
+  const [state2, setState2] = useState(r22);
+  if (!isEqual(state, a0)) {
+    let env16231;
+    setState(a0);
+    const r54 = env16231 = {};
+    env16231[0] = void 0;
+    let r55 = a0;
+    if (a0 != null) {
+      const r59 = cloneDeep(a0);
+      const r66 = r59.effects.reduce($mk79787(), 0) - 1;
+      env16231[0] = Math.floor(Math.random() * (r66 - 0 + 1) + 0);
+      r59.effects = r59.effects.map($mk79788(r54));
+      r55 = r59;
+    }
+    setState2(r55);
+  }
+  return state2;
+}