yeet

modules/collectibles/nameplates/constants.tsx

@@ -0,0 +1,73 @@
+// Metro module 1902 (f1903).
+import { PaletteKeys } from "./types";
+const r10 = {};
+r10[PaletteKeys.Crimson] = {
+  darkBackground: "#900007",
+  lightBackground: "#E7040F",
+  name: PaletteKeys.Crimson
+};
+r10[PaletteKeys.Berry] = {
+  darkBackground: "#893A99",
+  lightBackground: "#B11FCF",
+  name: PaletteKeys.Berry
+};
+r10[PaletteKeys.Sky] = {
+  darkBackground: "#0080B7",
+  lightBackground: "#56CCFF",
+  name: PaletteKeys.Sky
+};
+r10[PaletteKeys.Teal] = {
+  darkBackground: "#086460",
+  lightBackground: "#7DEED7",
+  name: PaletteKeys.Teal
+};
+r10[PaletteKeys.Forest] = {
+  darkBackground: "#2D5401",
+  lightBackground: "#6AA624",
+  name: PaletteKeys.Forest
+};
+r10[PaletteKeys.BubbleGum] = {
+  darkBackground: "#DC3E97",
+  lightBackground: "#F957B3",
+  name: PaletteKeys.BubbleGum
+};
+r10[PaletteKeys.Violet] = {
+  darkBackground: "#730BC8",
+  lightBackground: "#972FED",
+  name: PaletteKeys.Violet
+};
+r10[PaletteKeys.Cobalt] = {
+  darkBackground: "#0131C2",
+  lightBackground: "#4278FF",
+  name: PaletteKeys.Cobalt
+};
+r10[PaletteKeys.Clover] = {
+  darkBackground: "#047B20",
+  lightBackground: "#63CD5A",
+  name: PaletteKeys.Clover
+};
+r10[PaletteKeys.Lemon] = {
+  darkBackground: "#F6CD12",
+  lightBackground: "#FED400",
+  name: PaletteKeys.Lemon
+};
+r10[PaletteKeys.White] = {
+  darkBackground: "#FFFFFF",
+  lightBackground: "#FFFFFF",
+  name: PaletteKeys.White
+};
+r10[PaletteKeys.Black] = {
+  darkBackground: "#000000",
+  lightBackground: "#000000",
+  name: PaletteKeys.Black
+};
+const r121 = Object.values(r10);
+export { r10 as NAMEPLATE_PALETTES };
+export const INVALID_PALETTE_KEY = "invalid_palette";
+export const CUSTOM_PALETTE_KEY = "custom_palette";
+export const INVALID_NAMEPLATE_PALETTE = {
+  name: "invalid_palette",
+  darkBackground: "",
+  lightBackground: ""
+};
+export { r121 as PaletteMetadata };

modules/collectibles/nameplates/hooks/useFetchNameplate.tsx

@@ -0,0 +1,15 @@
+// Metro module 13730 (f13731).
+import { useFetchCollectiblesProduct } from "../../hooks/useFetchCollectiblesProduct";
+import { CollectiblesItemType } from "../../../../_bundle/Module1901";
+import { getNameplateData } from "../utils";
+export function useFetchNameplate(a0) {
+  const fetchCollectiblesProduct = useFetchCollectiblesProduct(a0);
+  const { product, isFetching } = fetchCollectiblesProduct;
+  const nameplateRecord = (product == null ? void 0 : product.items[0]?.type) === CollectiblesItemType.NAMEPLATE ? product.items[0] : void 0;
+  return {
+    nameplateProduct: product,
+    nameplateRecord,
+    nameplateData: getNameplateData(nameplateRecord),
+    isFetching
+  };
+}

modules/collectibles/nameplates/hooks/useNameplate.tsx

@@ -0,0 +1,17 @@
+// Metro module 9088 (f9089).
+import { useMemo } from "react";
+import GuildMemberStore from "../../../../stores/GuildMemberStore";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { getNameplateData } from "../utils";
+export function useNameplate({ user, guildId }) {
+  const stateFromStores = useStateFromStores([GuildMemberStore], () => guildId != null ? user != null ? GuildMemberStore.getMember(guildId, user.id) : null : null);
+  return useMemo(() => {
+    if (user != null) {
+      let r16 = getNameplateData(stateFromStores == null ? void 0 : stateFromStores.collectibles?.nameplate);
+      if (r16 == null) {
+        r16 = user.nameplate;
+      }
+      return r16;
+    }
+  }, [stateFromStores, user]);
+}

modules/collectibles/nameplates/native/EditNameplateSection.tsx

@@ -0,0 +1,67 @@
+// Metro module 13733 (f13734).
+import * as Module19 from "react";
+import { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { isNameplateRecord } from "../../records/NameplateRecord";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
+import { NONE_ITEM, SHOP_ITEM } from "../useNameplateSections";
+import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import { getNameplateData } from "../utils";
+import Nameplate from "./Nameplate";
+let Component;
+const useStyles = createStyles({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: GUTTER_SIZE
+  },
+  rowSpacer: {
+    height: GUTTER_SIZE
+  },
+  nameplate: {
+    overflow: "hidden"
+  }
+});
+const r42 = Module19.memo(({ items, selectedSkuId, setSelectedNameplate, guildId, size }) => {
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    setSelectedNameplate(null);
+  }, [setSelectedNameplate]);
+  return <>
+    <View style={styles.row}>
+      {[...items, null, null].slice(0, ROW_SIZE).map((item, index) => {
+        if (item === NONE_ITEM) {
+          return <EditCollectiblesListItemNone key="none" size={size} onPress={callback} isSelected={selectedSkuId == null} asDefault={guildId != null} />;
+        }
+        if (item === SHOP_ITEM) {
+          return <EditCollectiblesListItemShop key="shop" size={size} analyticsSource={AnalyticsLocation.EDIT_NAMEPLATE_SHEET} />;
+        }
+        if (isNameplateRecord(item)) {
+          return <Component key={item.skuId} nameplate={item} isSelected={selectedSkuId === item.skuId} setSelectedNameplate={setSelectedNameplate} size={size} />;
+        }
+        return <View key={index} style={{
+          height: size,
+          width: size
+        }} />;
+      })}
+    </View>
+    <View style={styles.rowSpacer} />
+  </>;
+});
+r42.displayName = "EditNameplateRow";
+Component = Module19.memo(({ nameplate, isSelected, setSelectedNameplate: setSelectedNameplate2, size: size2 }) => {
+  const styles = useStyles();
+  const memo = useMemo(() => getNameplateData(nameplate), [nameplate]);
+  return <EditCollectiblesListItemProduct skuId={nameplate.skuId} isSelected={isSelected} onPress={useCallback(() => {
+    setSelectedNameplate2(nameplate);
+  }, [setSelectedNameplate2, nameplate])} size={size2} accessibilityLabel={nameplate.label}>
+    <Nameplate nameplate={memo} fullOpacity isSquarePreview style={[styles.nameplate, {
+      borderRadius: 6
+    }]} />
+  </EditCollectiblesListItemProduct>;
+});
+Component.displayName = "EditNameplateItem";
+export { r42 as EditNameplateRow };

modules/collectibles/nameplates/native/Nameplate.tsx

@@ -0,0 +1,121 @@
+// Metro module 8070 (f8071).
+import { useEffect } from "react";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useTheme from "../../../../hooks/useTheme";
+import ReanimatedRexport, { useSharedValue, Easing, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
+import { getBackgroundGradientColors } from "../utils";
+import { getNameplateAssets } from "./NameplateUtils";
+import Module4611 from "../../../../_bundle/Module4611";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import { APNGPlayer } from "../../../image/native/APNGPlayer.android";
+import FastImage from "../../../../components_native/common/FastImage";
+import { HermesBuiltin } from "../../../../_hermes/prelude";
+let useStyles, __initData;
+const NameplateInner = function NameplateInner(props) {
+  const { nameplate, isPressed = false, isFocused = false, isMuted = false, fullOpacity = false, isSquarePreview = false, invertPressOpacity = false, fadeIn = false } = props;
+  let sharedValue;
+  let c16235_0 = fadeIn;
+  let animate = props.animate;
+  if (animate === void 0) {
+    animate = false;
+  }
+  const style = props.style;
+  sharedValue = void 0;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const styles = useStyles(fullOpacity, isPressed, isFocused, isMuted, invertPressOpacity);
+  const theme = useTheme();
+  sharedValue = useSharedValue(fadeIn ? 0 : 1);
+  useEffect(() => {
+    if (c16235_0) {
+      sharedValue.set(withTiming(1, {
+        duration: 100,
+        easing: Easing.in(Easing.ease)
+      }));
+    }
+  }, [sharedValue, fadeIn]);
+  const A = function A() {
+    return {
+      opacity: sharedValue.get()
+    };
+  };
+  A.__closure = {
+    opacity: sharedValue
+  };
+  A.__workletHash = 15588901070870;
+  A.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(A);
+  const backgroundGradientColors = getBackgroundGradientColors(nameplate.palette, theme);
+  const nameplateAssets = getNameplateAssets(nameplate);
+  let staticImageUrl = nameplateAssets.staticImageUrl;
+  const animatedImageUrl = nameplateAssets.animatedImageUrl;
+  if (animate) {
+    animate = !stateFromStores;
+  }
+  if (animate) {
+    staticImageUrl = animatedImageUrl;
+  }
+  if (staticImageUrl == null) {
+    staticImageUrl = "";
+  }
+  return <ReanimatedRexport.View style={[styles.container, style, animatedStyle]}>
+    {backgroundGradientColors != null ? <Module4611 style={styles.gradient} start={{
+      x: isSquarePreview ? -2 : 0,
+      y: 0
+    }} end={{
+      x: 1,
+      y: 0
+    }} colors={[backgroundGradientColors.left, backgroundGradientColors.right]} /> : null}
+    {isAndroid() && animate ? <APNGPlayer url={staticImageUrl} style={styles.img} autoplay /> : <FastImage source={{
+      uri: staticImageUrl
+    }} style={styles.img} accessibilityRole="image" />}
+  </ReanimatedRexport.View>;
+};
+useStyles = createStyles((a0, a1, a2, a3, a4) => {
+  let opacity2 = 1;
+  const opacity = a0 ? 1 : a3 ? a2 ? a1 ? a4 ? 0.3 : 0.6 : a2 ? 0.8 : 0.4 : 0 : a1 ? a4 ? 0.3 : 0.6 : a2 ? 0.8 : 0.4;
+  if (!a0) {
+    opacity2 = a3 ? a2 ? a1 ? a4 ? 0.4 : 0.5 : a2 ? 0.8 : 0.6 : 0.1 : a1 ? a4 ? 0.4 : 0.5 : a2 ? 0.8 : 0.6;
+  }
+  return {
+    container: {
+      position: "absolute",
+      overflow: "hidden",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    },
+    gradient: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      opacity
+    },
+    img: {
+      position: "absolute",
+      height: "100%",
+      right: 0,
+      aspectRatio: 5.333333333333333,
+      opacity: opacity2
+    }
+  };
+});
+__initData = {
+  code: "function NameplateTsx1(){const{opacity}=this.__closure;return{opacity:opacity.get()};}"
+};
+export default function Nameplate(props) {
+  const nameplate = props.nameplate;
+  const r9 = {};
+  let r1 = null;
+  const props2 = HermesBuiltin.copyDataProperties(r9, props, {
+    __proto__: null,
+    nameplate: 0
+  });
+  if (nameplate != null) {
+    r1 = <NameplateInner nameplate={nameplate} {...props2} aria-hidden />;
+  }
+  return r1;
+};

modules/collectibles/nameplates/native/NameplateCardPreview.tsx

@@ -0,0 +1,49 @@
+// Metro module 8696 (f8697).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import Module38 from "../../../../_bundle/Module38";
+import { CollectiblesItemType } from "../../../../_bundle/Module1901";
+import { getNameplateData } from "../utils";
+import { NameplateDummyUserPreview } from "./NameplateDummyUserPreview";
+import { AvatarSizes } from "../../../../design/void/native";
+const useStyles = createStyles({
+  nameplatePreviewContainer: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    paddingHorizontal: Module712.space.PX_8
+  },
+  nameplateContainer: {
+    width: "100%",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
+    borderRadius: Module712.radii.sm
+  },
+  nameplate: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED
+  }
+});
+export default function NameplateCardPreview(props) {
+  const { item, animate = false } = props;
+  const styles = useStyles();
+  Module38(item.type === CollectiblesItemType.NAMEPLATE, "Item must be Nameplate");
+  return <View style={styles.nameplatePreviewContainer}>
+    <NameplateDummyUserPreview width={34} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
+      opacity: 0.6
+    }]} />
+    <NameplateDummyUserPreview width={44} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
+      opacity: 0.6
+    }]} />
+    <View style={styles.nameplateContainer}>
+      <NameplateDummyUserPreview width={54} avatarSize={AvatarSizes.XSMALL} nameplate={getNameplateData(item)} style={styles.nameplate} animate={animate} />
+    </View>
+    <NameplateDummyUserPreview width={44} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
+      opacity: 0.6
+    }]} />
+    <NameplateDummyUserPreview width={34} avatarSize={AvatarSizes.XSMALL} hideAvatar style={[{
+      opacity: 0.6
+    }]} />
+  </View>;
+};

modules/collectibles/nameplates/native/NameplateDummyUserPreview.tsx

@@ -0,0 +1,72 @@
+// Metro module 8069 (f8070).
+import { View } from "react-native";
+import ThemeStore from "../../../user_settings/ThemeStore";
+import { AvatarSizes, Avatar } from "../../../../design/void/native";
+import Module712 from "../../../../_bundle/Module712";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import { isThemeDark } from "../../../../design/utils/shared/themes";
+import Nameplate from "./Nameplate";
+import Module8072 from "../../../../_bundle/Module8072";
+import Module8073 from "../../../../_bundle/Module8073";
+const r24 = {};
+r24[AvatarSizes.XSMALL_20] = {
+  padding: Module712.space.PX_4,
+  avatarMarginRight: Module712.space.PX_4,
+  placeholderBarHeight: 6
+};
+r24[AvatarSizes.XSMALL] = {
+  padding: 6,
+  avatarMarginRight: 6,
+  placeholderBarHeight: 8
+};
+r24[AvatarSizes.NORMAL] = {
+  padding: Module712.space.PX_8,
+  avatarMarginRight: Module712.space.PX_8,
+  placeholderBarHeight: 14
+};
+let c5116_7 = r24;
+const useStyles = createStyles((a0, a1) => {
+  const r7 = c5116_7[a0];
+  return {
+    container: {
+      padding: r7.padding,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      width: "100%",
+      position: "relative",
+      borderRadius: Module712.radii.sm
+    },
+    avatarContainer: {
+      borderRadius: Module712.radii.round,
+      marginRight: r7.avatarMarginRight,
+      backgroundColor: a1 ? Module712.colors.BORDER_STRONG : "transparent"
+    },
+    avatar: {
+      opacity: a1 ? 0 : 0.5
+    },
+    placeholderBar: {
+      borderRadius: Module712.radii.md,
+      height: r7.placeholderBarHeight,
+      backgroundColor: Module712.colors.BORDER_STRONG
+    },
+    nameplate: {
+      borderRadius: Module712.radii.sm
+    }
+  };
+});
+export { c5116_7 as NAMEPLATE_DUMMY_USER_PREVIEW_CONFIG };
+export function NameplateDummyUserPreview(props) {
+  const { width, hideAvatar = false, avatarSize = AvatarSizes.NORMAL, nameplate, style, animate = false } = props;
+  const styles = useStyles(avatarSize, hideAvatar);
+  return <View style={[styles.container, style]}>
+    <Nameplate nameplate={nameplate} fullOpacity style={styles.nameplate} animate={animate} />
+    <View style={styles.avatarContainer}>
+      <Avatar source={useStateFromStores([ThemeStore], () => isThemeDark(ThemeStore.theme)) ? Module8072 : Module8073} size={avatarSize} aria-hidden style={styles.avatar} />
+    </View>
+    <View style={[styles.placeholderBar, {
+      width
+    }]} />
+  </View>;
+}

modules/collectibles/nameplates/native/NameplatePreview.tsx

@@ -0,0 +1,78 @@
+// Metro module 9823 (f9824).
+import { useMemo } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import GuildMemberStore from "../../../../stores/GuildMemberStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { getNameplateData } from "../utils";
+import { useAvatarDecoration } from "../../avatar_decorations/useAvatarDecoration";
+import usePendingAvatarSettings from "../../../user_profile/hooks/usePendingAvatarSettings";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import UserUtils from "../../../../utils/UserUtils";
+import useDisplayNameStyles from "../../../display_name_styles/hooks/useDisplayNameStyles";
+import { Avatar, AvatarSizes } from "../../../../design/void/native";
+import Nameplate from "./Nameplate";
+import UsernameWithEffects from "../../../display_name_styles/native/UsernameWithEffects";
+import { EffectDisplayType } from "../../../display_name_styles/types";
+import { Text } from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles((a0) => ({
+  container: {
+    borderRadius: a0 ? Module712.radii.sm : 0,
+    padding: Module712.space.PX_8,
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
+  },
+  nameplate: {
+    borderRadius: a0 ? Module712.radii.sm : 0
+  },
+  avatar: {
+    borderRadius: Module712.radii.round,
+    marginRight: Module712.space.PX_8
+  },
+  content: {
+    flex: 1,
+    paddingRight: Module712.space.PX_40
+  }
+}));
+export function NameplatePreview(props) {
+  let pendingAvatarDecoration;
+  const nameplate = props.nameplate;
+  let nameplateData = props.nameplateData;
+  const { user, hasRoundedCorners = true, animate = false, guildId, pendingDisplayNameStyles } = props;
+  let pendingGlobalName = props.pendingGlobalName;
+  const r7 = props["aria-hidden"];
+  pendingAvatarDecoration = void 0;
+  const styles = useStyles(hasRoundedCorners);
+  if (nameplate != null) {
+    nameplateData = getNameplateData(nameplate);
+  }
+  const avatarDecoration = useAvatarDecoration(user, guildId);
+  const pendingAvatarDecoration2 = usePendingAvatarSettings({
+    guildId
+  }).pendingAvatarDecoration;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const stateFromStores2 = useStateFromStores([GuildMemberStore], () => guildId != null ? user != null ? GuildMemberStore.getMember(guildId, user.id) : null : null);
+  const name = UserUtils.useName(user);
+  if (pendingGlobalName == null) {
+    pendingGlobalName = guildId != null ? stateFromStores2?.nick != null ? stateFromStores2?.nick : name : name;
+  }
+  pendingAvatarDecoration = pendingAvatarDecoration2 !== void 0 ? pendingAvatarDecoration2 : avatarDecoration;
+  const styles2 = useDisplayNameStyles({
+    userId: user.id,
+    guildId,
+    pendingDisplayNameStyles
+  });
+  return <View style={styles.container} aria-hidden={r7}>
+    <Nameplate nameplate={nameplateData} style={styles.nameplate} fullOpacity animate={animate} />
+    <View style={styles.avatar}>
+      {useMemo(() => <Avatar style={styles.avatar} user={user} guildId={guildId} size={AvatarSizes.NORMAL} avatarDecoration={pendingAvatarDecoration} animate={!stateFromStores} autoStatusCutout aria-hidden />, [styles.avatar, user, guildId, pendingAvatarDecoration, stateFromStores])}
+    </View>
+    <View style={styles.content}>
+      {styles2 != null && <UsernameWithEffects userId={user.id} guildId={guildId} userName={pendingGlobalName} variant="text-md/semibold" effectDisplayType={EffectDisplayType.STATIC} lineClamp={1} pendingDisplayNameStyles={pendingDisplayNameStyles} />}
+      {styles2 == null && <Text lineClamp={1} variant="text-md/semibold" color="mobile-text-heading-primary">{pendingGlobalName}</Text>}
+    </View>
+  </View>;
+}

modules/collectibles/nameplates/native/NameplateProductPreview.tsx

@@ -0,0 +1,107 @@
+// Metro module 8747 (f8748).
+import { useMemo } from "react";
+import { View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useShopProductItems } from "../../hooks/useShopProductItems";
+import { getNameplateData, getNameplateSampleUsers } from "../utils";
+import { intl, t } from "../../../../intl/index.native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import Module4611 from "../../../../_bundle/Module4611";
+import { useCurrentUser } from "../../hooks/useCurrentUser";
+import useAvatarDecorationIfNotExpired from "../../avatar_decorations/useAvatarDecorationIfNotExpired";
+import { getProfilePreviewValue } from "../../../profile_customization/ProfileCustomizationUtils";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import UserUtils from "../../../../utils/UserUtils";
+import useDisplayNameStyles from "../../../display_name_styles/hooks/useDisplayNameStyles";
+import UsernameWithEffects from "../../../display_name_styles/native/UsernameWithEffects";
+import { EffectDisplayType } from "../../../display_name_styles/types";
+import { Avatar, AvatarSizes } from "../../../../design/void/native";
+import { UserNameplateRow } from "../../../main_tabs_v2/native/shared_components/user_list/UserNameplateRow";
+import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
+let useStyles, PlaceholderUser;
+const NameplateUser = function NameplateUser(props) {
+  const { previewNameplate, previewAvatarDecoration } = props;
+  const currentUser = useCurrentUser();
+  const avatarDecoration = useAvatarDecorationIfNotExpired(getProfilePreviewValue({
+    pendingValue: previewAvatarDecoration,
+    userValue: currentUser?.avatarDecoration
+  }));
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const name = UserUtils.getName(currentUser);
+  const label = useDisplayNameStyles({
+    userId: currentUser.id
+  }) != null ? <UsernameWithEffects userId={currentUser.id} userName={name} effectDisplayType={EffectDisplayType.STATIC} lineClamp={1} variant="text-md/semibold" /> : name;
+  return <UserNameplateRow nameplate={previewNameplate} icon={useMemo(() => <Avatar user={currentUser} guildId={void 0} size={AvatarSizes.NORMAL} avatarDecoration={avatarDecoration} animate={!stateFromStores} autoStatusCutout aria-hidden />, [currentUser, avatarDecoration, stateFromStores])} label={label} isPreviewRow />;
+};
+PlaceholderUser = function PlaceholderUser(props) {
+  const { user, start = false, end = false } = props;
+  return <TableRow icon={<Avatar source={{
+    uri: user.avatarSrc
+  }} size={AvatarSizes.NORMAL} aria-hidden />} label={user.name} start={start} end={end} />;
+};
+useStyles = createStyles({
+  container: {
+    position: "relative",
+    flex: 1,
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  memberListContainer: {
+    paddingHorizontal: Module712.space.PX_16
+  },
+  memberListTitle: {
+    paddingVertical: Module712.space.PX_8
+  },
+  memberListGradient: {
+    position: "absolute",
+    right: 0,
+    left: 0,
+    top: 0,
+    bottom: 0,
+    color: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
+  }
+});
+export default function NameplateProductPreview(props) {
+  const product = props.product;
+  const styles = useStyles();
+  const shopProductItems = useShopProductItems(product);
+  const { firstNameplate, firstAvatarDecoration } = shopProductItems;
+  const nameplateData = getNameplateData(firstNameplate);
+  const nameplateSampleUsers = getNameplateSampleUsers();
+  const r33 = nameplateData != null ? <View style={styles.container} pointerEvents="box-none" accessibilityLabel={intl.formatToPlainString(t.YJig7C, {
+    a11y_text: nameplateData.imgAlt
+  })} accessibilityRole="image" accessible>
+    <View style={styles.memberListContainer}>
+      <PlaceholderUser user={nameplateSampleUsers.mallow} end />
+      <Text maxFontSizeMultiplier={2} variant="text-sm/semibold" accessibilityRole="header" color="interactive-text-default" style={styles.memberListTitle}>
+        {intl.string(t["yzW/fZ"])}
+        {" — 3"}
+      </Text>
+      <PlaceholderUser user={nameplateSampleUsers.phibi} start />
+      <NameplateUser previewNameplate={nameplateData} previewAvatarDecoration={firstAvatarDecoration} />
+      <PlaceholderUser user={nameplateSampleUsers.locke} end />
+      <Text maxFontSizeMultiplier={2} variant="text-sm/semibold" accessibilityRole="header" color="interactive-text-default" style={styles.memberListTitle}>
+        {intl.string(t["NG43/6"])}
+        {" — 12"}
+      </Text>
+      <PlaceholderUser user={nameplateSampleUsers.boom} start />
+    </View>
+    <Module4611 style={styles.memberListGradient} start={{
+      x: 0,
+      y: 0
+    }} end={{
+      x: 0,
+      y: 0.4
+    }} colors={[styles.memberListGradient.color, `${styles.memberListGradient.color}00`]} />
+    <Module4611 style={styles.memberListGradient} start={{
+      x: 0,
+      y: 0.6
+    }} end={{
+      x: 0,
+      y: 1
+    }} colors={[`${styles.memberListGradient.color}00`, styles.memberListGradient.color]} />
+  </View> : null;
+  return r33;
+};

modules/collectibles/nameplates/native/NameplateUtils.tsx

@@ -0,0 +1,14 @@
+// Metro module 8071 (f8072).
+import { getCollectiblesItemAssetUrl, CollectiblesItemAssetFormat } from "../../utils/CollectiblesAssetUtils";
+export function getNameplateAssets({ skuId }) {
+  return {
+    staticImageUrl: getCollectiblesItemAssetUrl({
+      skuId,
+      assetFormat: CollectiblesItemAssetFormat.STATIC
+    }),
+    animatedImageUrl: getCollectiblesItemAssetUrl({
+      skuId,
+      assetFormat: CollectiblesItemAssetFormat.ANIMATED
+    })
+  };
+}

modules/collectibles/nameplates/types.tsx

@@ -0,0 +1,26 @@
+// Metro module 1903 (f1904).
+const r9 = {
+  None: "none",
+  Crimson: "crimson",
+  Berry: "berry",
+  Sky: "sky",
+  Teal: "teal",
+  Forest: "forest",
+  BubbleGum: "bubble_gum",
+  Violet: "violet",
+  Cobalt: "cobalt",
+  Clover: "clover",
+  Lemon: "lemon",
+  White: "white",
+  Black: "black"
+};
+const r23 = {
+  ACCOUNT: "account",
+  CHANNEL: "channel",
+  MEMBER_LIST: "member_list",
+  PREVIEW: "preview",
+  MINI_PREVIEW: "mini_preview",
+  MUTUAL_FRIENDS_LIST: "mutual_friends_list"
+};
+export { r9 as PaletteKeys };
+export { r23 as NameplatePlacements };

modules/collectibles/nameplates/useNameplateSections.tsx

@@ -0,0 +1,67 @@
+// Metro module 13732 (f13733).
+import { useMemo } from "react";
+import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
+import CollectiblesPurchaseStore from "../CollectiblesPurchaseStore";
+import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/defaultAreStatesEqual";
+import { getNameplates, isPremiumCollectiblesPurchase, isPremiumCollectiblesProduct } from "../CollectiblesUtils";
+import { intl, t } from "../../../intl/index.native";
+let c9547_6 = {
+  PURCHASE: "purchase",
+  PREMIUM_PURCHASE: "premium_purchase",
+  PREVIEW: "preview"
+};
+let c9547_7 = {
+  skuId: "None"
+};
+let c9547_8 = {
+  skuId: "Shop"
+};
+export default function useNameplateSections() {
+  let c20683_1, c20683_2;
+  const stateFromStores = useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.purchases);
+  const [r22, r23] = useStateFromStoresArray([CollectiblesCategoryStore], () => [CollectiblesCategoryStore.categories, CollectiblesCategoryStore.products]);
+  c20683_1 = r22;
+  c20683_2 = r23;
+  return useMemo(() => {
+    const r22 = getNameplates(stateFromStores, c20683_1).reduce((acc, item) => {
+      const r8 = stateFromStores.get(item.skuId);
+      const r12 = c20683_2.get(item.skuId);
+      const r19 = r8 != null ? isPremiumCollectiblesPurchase(r8) : isPremiumCollectiblesProduct(r12);
+      let r27 = r12?.isCategoryReward;
+      if (r27 == null) {
+        r27 = false;
+      }
+      if (r19) {
+        acc.premium_purchase.push(item);
+      } else if (r8 != null) {
+        acc.purchase.push(item);
+      } else if (!r27) {
+        acc.preview.push(item);
+      }
+      return acc;
+    }, {
+      purchase: [],
+      premium_purchase: [],
+      preview: []
+    });
+    return [{
+      section: c9547_6.PURCHASE,
+      items: [c9547_7, c9547_8, ...r22.purchase],
+      height: 12,
+      header: intl.string(t.WfGV52)
+    }, {
+      section: c9547_6.PREMIUM_PURCHASE,
+      items: r22.premium_purchase,
+      height: 12,
+      header: intl.string(t.TiLCgw)
+    }, {
+      section: c9547_6.PREVIEW,
+      items: r22.preview,
+      height: 12,
+      header: intl.string(t["1vbbee"])
+    }].filter((item) => item.items.length > 0);
+  }, [r22, stateFromStores, r23]);
+};
+export { c9547_6 as Section };
+export { c9547_7 as NONE_ITEM };
+export { c9547_8 as SHOP_ITEM };

modules/collectibles/nameplates/utils.tsx

@@ -0,0 +1,101 @@
+// Metro module 1898 (f1899).
+import { isNameplateRecord } from "../records/NameplateRecord";
+import { ThemeTypes } from "../../../_bundle/Module505";
+import { NAMEPLATE_PALETTES, INVALID_NAMEPLATE_PALETTE, INVALID_PALETTE_KEY, CUSTOM_PALETTE_KEY } from "./constants";
+import decodeImage from "../../../_bundle/decodeImage";
+import { intl, t } from "../../../intl/index.native";
+export function getNameplateData(a0) {
+  const r0 = a0 == null;
+  let r2 = null;
+  if (!r0) {
+    let palette = NAMEPLATE_PALETTES[a0.palette];
+    if (palette == null) {
+      palette = INVALID_NAMEPLATE_PALETTE;
+    }
+    r2 = {
+      skuId: a0.skuId,
+      src: a0.asset,
+      imgAlt: a0.label,
+      palette
+    };
+  }
+  return r2;
+}
+export function getNameplateDataFromProductRecord(a0) {
+  if (a0.items.length === 0) {
+    return null;
+  }
+  const r8 = a0.items[0];
+  const isNameplateRecord2 = isNameplateRecord(r8);
+  let r15 = null;
+  if (isNameplateRecord2) {
+    const r3 = r8 == null;
+    let r16 = null;
+    if (!r3) {
+      let palette = NAMEPLATE_PALETTES[r8.palette];
+      if (palette == null) {
+        palette = INVALID_NAMEPLATE_PALETTE;
+      }
+      r16 = {
+        skuId: r8.skuId,
+        src: r8.asset,
+        imgAlt: r8.label,
+        palette
+      };
+    }
+    r15 = r16;
+  }
+  return r15;
+}
+export function getBackgroundGradientColors(a0, a1) {
+  if (a0.name !== INVALID_PALETTE_KEY && (a0.name !== CUSTOM_PALETTE_KEY || /^#([0-9a-fA-F]{6})$/.test(a0.darkBackground) && /^#([0-9a-fA-F]{6})$/.test(a0.lightBackground))) {
+    const r25 = a1 === ThemeTypes.LIGHT ? a0.lightBackground : a0.darkBackground;
+    return {
+      left: `${r25}00`,
+      right: `${r25}4D`
+    };
+  }
+}
+export function isValidPalette(a0) {
+  return a0.name !== INVALID_PALETTE_KEY && (a0.name !== CUSTOM_PALETTE_KEY || /^#([0-9a-fA-F]{6})$/.test(a0.darkBackground) && /^#([0-9a-fA-F]{6})$/.test(a0.lightBackground));
+}
+export function getNameplatePalette(a0) {
+  let r9 = NAMEPLATE_PALETTES[a0];
+  if (r9 == null) {
+    r9 = INVALID_NAMEPLATE_PALETTE;
+  }
+  return r9;
+}
+export function parseFirstFrame(a0) {
+  const r16 = decodeImage.decode(a0);
+  const r21 = decodeImage.toRGBA8(r16)[0];
+  const element = document.createElement("canvas");
+  element.width = r16.width;
+  element.height = r16.height;
+  element.getContext("2d").putImageData(new ImageData(new Uint8ClampedArray(r21), r16.width, r16.height), 0, 0);
+  return element.toDataURL("image/png");
+}
+export function getNameplateSampleUsers() {
+  return {
+    mallow: {
+      name: intl.string(t.SbKDHi),
+      avatarSrc: "https://cdn.discordapp.com/assets/content/6dcafe1231097505560fd098f0e6698990f0082369d34c35d8c3ee9615709f84.png"
+    },
+    phibi: {
+      name: intl.string(t["LMSo+F"]),
+      avatarSrc: "https://cdn.discordapp.com/assets/content/17ae2ee3b8476755370ca9fa4d776d0bb811e50962409a7ae2dedd1b96c95eab.png"
+    },
+    locke: {
+      name: intl.string(t.g5Dumi),
+      avatarSrc: "https://cdn.discordapp.com/assets/content/a82a9daadc5c7842f183c0f61966b07d3aeeea478b7c8a4b8af48334eb1ce15f.png"
+    },
+    cherry: {
+      name: intl.string(t.p5Z3Ol),
+      avatarSrc: "https://cdn.discordapp.com/assets/content/afc2e8306ce540dccac7da1ca0871684d0bf67e77967ff0f679be84a0a6e51b7.png"
+    },
+    boom: {
+      name: intl.string(t.ncslie),
+      avatarSrc: "https://cdn.discordapp.com/assets/content/e264a2b0b8d963edd255c223abf1c0554f00a2f3a38640e509a38bc03d73b606.png"
+    }
+  };
+}