yeet

modules/display_name_styles/native/DisplayNameStylesColorPickerSheet.tsx

@@ -0,0 +1,139 @@
+// Metro module 14367 (f14368).
+import { useMemo, useState, useCallback } from "react";
+import { Pressable, View } from "react-native";
+import { getColorPresetsForEffect } from "../DisplayNameStylesConstants";
+import { AnalyticEvents } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useBottomSheetRef } from "../../../design/components/Sheet/native/useBottomSheetRef";
+import useDisplayNameStylesEffectDefaultColors_native from "../hooks/useDisplayNameStylesEffectDefaultColors.native";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import showCustomColorPickerActionSheet from "../../color_picker/native/showCustomColorPickerActionSheet";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { intl, t } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import Module12 from "../../../_bundle/Module12";
+import { int2hex } from "../../../_bundle/int2hslRaw";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import { EyeDropperIcon } from "../../../design/components/Icon/native/redesign/generated/EyeDropperIcon";
+const useStyles = createStyles({
+  header: {
+    paddingTop: 4
+  },
+  headerTrailing: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingBottom: Module712.space.PX_16
+  },
+  presetGrid: {
+    gap: Module712.space.PX_16,
+    marginBottom: Module712.space.PX_16
+  },
+  presetRow: {
+    gap: Module712.space.PX_16,
+    flexDirection: "row",
+    justifyContent: "center"
+  },
+  presetColor: {
+    width: 40,
+    height: 40,
+    borderRadius: Module712.radii.sm,
+    borderWidth: 2,
+    borderColor: "transparent"
+  },
+  presetColorSelected: {
+    borderColor: Module712.colors.CONTROL_BRAND_FOREGROUND
+  },
+  buttonsContainer: {
+    flexDirection: "row",
+    gap: Module712.space.PX_16
+  },
+  button: {
+    flex: 1
+  }
+});
+export default function DisplayNameStylesColorPickerSheet(props) {
+  let state, setState, memo, callback;
+  const { selectedColor, selectedEffectId, onSelectColor } = props;
+  state = void 0;
+  setState = void 0;
+  memo = void 0;
+  callback = void 0;
+  const styles = useStyles();
+  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
+  const r34 = useDisplayNameStylesEffectDefaultColors_native()[selectedEffectId];
+  let c21181_4 = r34;
+  const memo2 = useMemo(() => getColorPresetsForEffect(selectedEffectId).map((item) => item[0]), [selectedEffectId]);
+  [state, setState] = useState(selectedColor);
+  memo = useMemo(() => state !== selectedColor, [state, selectedColor]);
+  callback = useCallback((a0) => {
+    setState(a0);
+  }, []);
+  const callback3 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+    onSelectColor(c21181_4[0]);
+    ActionSheetActionCreators.hideActionSheet();
+  }, [r34, onSelectColor]);
+  const callback2 = useCallback(() => {
+    showCustomColorPickerActionSheet({
+      color: state,
+      onSelect: (a0) => {
+        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+        onSelectColor(a0);
+        ActionSheetActionCreators.hideActionSheet();
+      },
+      actionButtonVariant: "primary"
+    });
+  }, [state, onSelectColor]);
+  const callback4 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    if (memo) {
+      onSelectColor(state);
+      AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_COLOR_SELECTED, {
+        default: state === c21181_4[0],
+        colors: [state]
+      });
+    }
+    ActionSheetActionCreators.hideActionSheet();
+  }, [memo, state, onSelectColor, r34]);
+  return <BottomSheet ref={bottomSheetRef} header={<View style={styles.header}>
+    <BottomSheetTitleHeader title={intl.string(DisplayNameStyles_messages["6OxgN7"])} trailing={<View style={styles.headerTrailing}>
+      <Button text={intl.string(t.XqMe3N)} onPress={callback4} variant="primary" size="sm" />
+    </View>} />
+  </View>}>
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        <View style={styles.presetGrid}>
+          {Module12.chunk(memo2.slice(0, 12), 6).map((item, index) => {
+            let c27735_0 = index;
+            return <View key={index} style={styles.presetRow}>
+              {item.map((item, index) => {
+                return <Pressable key={6 * c27735_0 + index} onPress={() => callback(item)} style={[styles.presetColor, {
+                  backgroundColor: int2hex(item)
+                }, item === state && styles.presetColorSelected]} accessibilityRole="button" accessibilityLabel={int2hex(item)} />;
+              })}
+            </View>;
+          })}
+        </View>
+        <View style={styles.buttonsContainer}>
+          {selectedEffectId === DisplayNameEffect.SOLID && <View style={styles.button}>
+            <Button text={intl.string(DisplayNameStyles_messages.gIeJTK)} onPress={callback3} variant="secondary" size="md" grow />
+          </View>}
+          <View style={styles.button}>
+            <Button text={intl.string(t["FHBa/1"])} onPress={callback2} variant="secondary" size="md" icon={<EyeDropperIcon size="sm" />} grow />
+          </View>
+        </View>
+      </View>
+    </View>
+  </BottomSheet>;
+};

modules/display_name_styles/native/DisplayNameStylesColorSwatch.tsx

@@ -0,0 +1,40 @@
+// Metro module 13715 (f13716).
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import GummyStripes from "./effects/GummyStripes";
+import Module4611 from "../../../_bundle/Module4611";
+import { int2hex } from "../../../_bundle/int2hslRaw";
+const useStyles = createStyles({
+  colorSwatch: {
+    width: 24,
+    height: 24,
+    borderRadius: Module712.radii.xs
+  },
+  gummySwatch: {
+    flexDirection: "row",
+    overflow: "hidden"
+  }
+});
+export default function DisplayNameStylesColorSwatch(props) {
+  const { colors, effectId } = props;
+  const styles = useStyles();
+  if (effectId === DisplayNameEffect.GUMMY && colors.length > 0) {
+    return <View style={[styles.colorSwatch, styles.gummySwatch]}>
+      <GummyStripes colors={colors} />
+    </View>;
+  }
+  if (colors.length >= 2) {
+    return <Module4611 colors={colors.map((color) => int2hex(color))} start={{
+      x: 0,
+      y: 0
+    }} end={{
+      x: 1,
+      y: 0
+    }} style={styles.colorSwatch} />;
+  }
+  return <View style={[styles.colorSwatch, {
+    backgroundColor: colors.length > 0 ? int2hex(colors[0]) : "#000000"
+  }]} />;
+};

modules/display_name_styles/native/DisplayNameStylesEditPreview.tsx

@@ -0,0 +1,102 @@
+// Metro module 14368 (f14369).
+import { useMemo } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useGuildMemberAndUserPendingNameplate } from "../../profile_customization/ProfileCustomizationUtils";
+import { getNameplateData } from "../../collectibles/nameplates/utils";
+import UserProfilePreview from "../../user_profile/native/UserProfilePreview";
+import { intl } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { NameplatePreview } from "../../collectibles/nameplates/native/NameplatePreview";
+import { calendarFormat } from "../../../utils/DateUtils";
+import { Avatar, AvatarSizes } from "../../../design/void/native";
+import UsernameWithEffects from "./UsernameWithEffects";
+import { EffectDisplayType } from "../types";
+import { Text } from "../../../design/components/Text/native/Text";
+let useStyles;
+const ChatPreview = function ChatPreview(props) {
+  const { user, displayName, displayNameStyles, guildId } = props;
+  const styles = useStyles();
+  return <View style={styles.chatContainer} pointerEvents="none">
+    <Avatar user={user} size={AvatarSizes.NORMAL} guildId={guildId} />
+    <View style={styles.chatContent}>
+      <View style={styles.chatHeader}>
+        <UsernameWithEffects userId={user.id} guildId={guildId} userName={displayName} variant="text-md/semibold" effectDisplayType={EffectDisplayType.PLAIN} lineClamp={1} pendingDisplayNameStyles={displayNameStyles} />
+        <Text variant="text-xs/medium" color="text-muted" style={styles.chatTimestamp}>
+          {useMemo(() => calendarFormat(new Date(), true), [])}
+        </Text>
+      </View>
+      <Text variant="text-md/normal" color="text-default" style={styles.chatMessageText}>
+        {intl.string(DisplayNameStyles_messages.h5Cuej)}
+      </Text>
+    </View>
+  </View>;
+};
+useStyles = createStyles({
+  previewSection: {
+    marginBottom: Module712.space.PX_24,
+    alignItems: "center",
+    alignSelf: "center",
+    width: "100%",
+    maxWidth: 360
+  },
+  chatPreviewWrapper: {
+    marginTop: -18,
+    alignSelf: "flex-end",
+    width: 260,
+    borderRadius: Module712.radii.sm,
+    borderWidth: 1,
+    borderColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  },
+  nameplatePreviewWrapper: {
+    marginTop: -6,
+    width: 260
+  },
+  chatContainer: {
+    flexDirection: "row",
+    borderRadius: Module712.radii.sm,
+    padding: Module712.space.PX_16,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    gap: Module712.space.PX_12
+  },
+  chatContent: {
+    flex: 1
+  },
+  chatHeader: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 6
+  },
+  chatTimestamp: {
+    marginTop: -8
+  },
+  chatMessageText: {}
+});
+export default function DisplayNameStylesEditPreview(props) {
+  const { user, displayName, guildId, selectedFontId, selectedEffectId, selectedColors } = props;
+  const styles = useStyles();
+  const guildMemberAndUserPendingNameplate = useGuildMemberAndUserPendingNameplate(user, guildId);
+  const { userNameplate, guildNameplate, pendingNameplate } = guildMemberAndUserPendingNameplate;
+  let r15 = getNameplateData(guildNameplate);
+  const memo = useMemo(() => ({
+    fontId: selectedFontId,
+    effectId: selectedEffectId,
+    colors: selectedColors
+  }), [selectedFontId, selectedEffectId, selectedColors]);
+  const r50 = [<UserProfilePreview user={user} displayName={displayName} guildId={guildId} displayNameStylesOverride={memo} compact hideFrame maxWidth={320} accessibilityLabel={intl.string(DisplayNameStyles_messages.zoh6MT)} />, <View style={styles.chatPreviewWrapper}>
+    <ChatPreview user={user} displayName={displayName} displayNameStyles={memo} guildId={guildId} />
+  </View>, ,];
+  const r2 = pendingNameplate == null;
+  let nameplateData = void 0;
+  if (r2) {
+    if (r15 == null) {
+      r15 = userNameplate;
+    }
+    nameplateData = r15;
+  }
+  r50[2] = <View style={styles.nameplatePreviewWrapper}>
+    <NameplatePreview user={user} nameplate={pendingNameplate} nameplateData={nameplateData} guildId={guildId} pendingDisplayNameStyles={memo} pendingGlobalName={displayName} />
+  </View>;
+  return <View style={styles.previewSection}>{r50}</View>;
+};

modules/display_name_styles/native/DisplayNameStylesEditScreen.tsx

@@ -0,0 +1,402 @@
+// Metro module 14350 (f14351).
+import { useCallback, useState, useMemo } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import UserStore from "../../../stores/UserStore";
+import { AnalyticEvents } from "../../../Constants";
+import { MEDIA_PICKER_SEND_BUTTON_SPRING } from "../../media_keyboard/native/MediaKeyboardConstants";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useRoute, useNavigation } from "../../../_bundle/Module1481";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { useDisplayNameStylesPendingName } from "../hooks/useDisplayNameStylesPendingName";
+import { useGuildMemberOrUserPendingDisplayNameStyles } from "../../profile_customization/ProfileCustomizationUtils";
+import useDisplayNameStyles from "../hooks/useDisplayNameStyles";
+import useTheme from "../../../hooks/useTheme";
+import { DisplayNameFont } from "../../../_bundle/Module1888";
+import { getEffectColorCount, generateRandomDisplayNameStyles } from "../DisplayNameStylesUtils";
+import { useIsDisplayNameStylesFlywheelSettersEnabled } from "../DisplayNameStylesFlywheelExperiment";
+import { useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
+import useDisplayNameStylesEffectDefaultColors_native from "../hooks/useDisplayNameStylesEffectDefaultColors.native";
+import { areArraysShallowEqual } from "../../../_bundle/shallowEqual";
+import { useDisplayNameStylesHandleApply } from "../hooks/useDisplayNameStylesHandleApply";
+import { useVisibleFontOrder } from "../DisplayNameStylesFontOrder";
+import { useVisibleEffectOrder } from "../DisplayNameStylesEffectOrder";
+import { useDisplayNameStylesNewFontsBadge, useDisplayNameStylesNewEffectsBadge } from "../hooks/useDisplayNameStylesNewItems";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import { setTryItOutDisplayNameStyles } from "../../user_profile/UserProfileActionCreators";
+import { setPendingChanges } from "../../user_profile/UserProfileSettingsActionCreators";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import * as _asyncRequire from "../../../_bundle/asyncRequire";
+import { intl, t } from "../../../intl/index.native";
+import getDisplayNameStylesFontName from "../getDisplayNameStylesFontName";
+import { ThemeContextProvider } from "../../../_bundle/Module3901";
+import { DisplayNameStylesContext } from "../DisplayNameStylesContext";
+import DisplayNameStylesEditPreview from "./DisplayNameStylesEditPreview";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { Text } from "../../../design/components/Text/native/Text";
+import { NewTag } from "../../../design/void/native";
+import { ChevronSmallRightIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
+import { int2hex } from "../../../_bundle/int2hslRaw";
+import DisplayNameStylesColorSwatch from "./DisplayNameStylesColorSwatch";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { DiceIcon } from "../../../design/components/Icon/native/redesign/generated/DiceIcon";
+import { DenyIcon } from "../../../design/components/Icon/native/redesign/generated/DenyIcon";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import ReanimatedRexport, { useAnimatedProps, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import * as _spring from "../../../design/animation/reanimated/spring/spring";
+let c10092_14, useStyles, __initData, __initData2;
+const ApplyButton = function ApplyButton(props) {
+  const { onPress, visible } = props;
+  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const bottom = useSafeAreaInsets_native().bottom;
+  const r26 = function() {
+    return {
+      pointerEvents: visible ? "box-none" : "none"
+    };
+  };
+  r26.__closure = {
+    visible
+  };
+  r26.__workletHash = 2349569076845;
+  r26.__initData = __initData;
+  const animatedProps = useAnimatedProps(r26);
+  const r32 = function() {
+    const r2 = visible ? 1 : 0;
+    const r1 = visible ? 0 : 60;
+    const r0 = visible ? 1 : 0.9;
+    return {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      marginHorizontal: Module712.space.PX_16,
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      transform: [{
+        translateY: stateFromStores ? r1 : _spring.withSpring(r1, MEDIA_PICKER_SEND_BUTTON_SPRING)
+      }, {
+        scale: stateFromStores ? r0 : _spring.withSpring(r0, MEDIA_PICKER_SEND_BUTTON_SPRING)
+      }],
+      opacity: stateFromStores ? r2 : _spring.withSpring(r2, MEDIA_PICKER_SEND_BUTTON_SPRING)
+    };
+  };
+  r32.__closure = {
+    visible,
+    tokens: Module712,
+    reducedMotion: stateFromStores,
+    withSpring: _spring.withSpring,
+    MEDIA_PICKER_SEND_BUTTON_SPRING
+  };
+  r32.__workletHash = 16786362025671;
+  r32.__initData = __initData2;
+  return <ReanimatedRexport.View style={useAnimatedStyle(r32)}>
+    <ReanimatedRexport.View style={{
+      marginBottom: bottom
+    }} animatedProps={animatedProps}>
+      <Button variant="primary" onPress={useCallback(() => {
+        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+        onPress();
+      }, [onPress])} size="lg" text={intl.string(t["1Qm822"])} />
+    </ReanimatedRexport.View>
+  </ReanimatedRexport.View>;
+};
+c10092_14 = [DisplayNameEffect.GRADIENT, DisplayNameEffect.GUMMY, DisplayNameEffect.PRISM];
+useStyles = createStyles({
+  container: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
+  },
+  contentContainer: {
+    padding: Module712.space.PX_16
+  },
+  fieldButtonGroup: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
+    borderRadius: Module712.radii.md
+  },
+  fieldButton: {
+    padding: Module712.space.PX_12,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  fieldButtonBorder: {
+    borderTopWidth: 1,
+    borderTopColor: Module712.colors.BORDER_SUBTLE
+  },
+  fieldButtonLabel: {
+    flex: 1,
+    marginRight: Module712.space.PX_12
+  },
+  fieldButtonChevron: {
+    flexDirection: "row",
+    gap: Module712.space.PX_8,
+    flexShrink: 0
+  },
+  fieldButtonTrailing: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8
+  },
+  buttonContainer: {
+    marginVertical: Module712.space.PX_16,
+    paddingVertical: Module712.space.PX_16,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
+    borderTopWidth: 1,
+    borderTopColor: Module712.colors.BORDER_MUTED,
+    gap: Module712.space.PX_16
+  }
+});
+__initData = {
+  code: "function DisplayNameStylesEditScreenTsx1(){const{visible}=this.__closure;return{pointerEvents:visible?'box-none':'none'};}"
+};
+__initData2 = {
+  code: "function DisplayNameStylesEditScreenTsx2(){const{visible,tokens,reducedMotion,withSpring,MEDIA_PICKER_SEND_BUTTON_SPRING}=this.__closure;const targetOpacity=visible?1:0;const targetTranslateY=visible?0:60;const targetScale=visible?1:0.9;return{position:'absolute',bottom:0,left:0,right:0,marginHorizontal:tokens.space.PX_16,flexDirection:'column',justifyContent:'flex-end',transform:[{translateY:reducedMotion?targetTranslateY:withSpring(targetTranslateY,MEDIA_PICKER_SEND_BUTTON_SPRING)},{scale:reducedMotion?targetScale:withSpring(targetScale,MEDIA_PICKER_SEND_BUTTON_SPRING)}],opacity:reducedMotion?targetOpacity:withSpring(targetOpacity,MEDIA_PICKER_SEND_BUTTON_SPRING)};}"
+};
+export default function DisplayNameStylesEditScreen() {
+  let displayNameStylesPendingName, c21165_5, c21165_10, displayNameStylesEffectConfig, c21165_12, c21165_13, callback, memo, visibleFontOrder, visibleEffectOrder, showFontsBadge, dismissFontsBadge, showEffectsBadge, dismissEffectsBadge;
+  const styles = useStyles();
+  const route = useRoute();
+  const navigation = useNavigation();
+  let params = route.params;
+  if (params == null) {
+    params = {};
+  }
+  const { guildId, isTryItOut } = params;
+  const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  displayNameStylesPendingName = useDisplayNameStylesPendingName(stateFromStores2, guildId);
+  const styles3 = useGuildMemberOrUserPendingDisplayNameStyles(stateFromStores2, guildId);
+  const { guildDisplayNameStyles, pendingDisplayNameStyles, tryItOutDisplayNameStyles } = styles3;
+  const styles2 = useDisplayNameStyles({
+    userId: stateFromStores2?.id,
+    guildId,
+    pendingDisplayNameStyles: isTryItOut ? tryItOutDisplayNameStyles : pendingDisplayNameStyles,
+    ignoreDisabledStylesSetting: true
+  });
+  c21165_5 = styles2;
+  const theme = useTheme();
+  let r86 = styles2?.fontId;
+  if (r86 == null) {
+    r86 = DisplayNameFont.DEFAULT;
+  }
+  const [state, setState] = useState(r86);
+  let r95 = styles2?.effectId;
+  if (r95 == null) {
+    r95 = DisplayNameEffect.SOLID;
+  }
+  const [state2, setState2] = useState(r95);
+  const r105 = getEffectColorCount(state2) > 1;
+  c21165_10 = r105;
+  const isDisplayNameStylesFlywheelSettersEnabled = useIsDisplayNameStylesFlywheelSettersEnabled("DisplayNameStylesEditScreen");
+  displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(state2);
+  c21165_12 = useDisplayNameStylesEffectDefaultColors_native();
+  let r116 = styles2?.colors;
+  if (r116 == null) {
+    r116 = [];
+  }
+  c21165_13 = r116;
+  const [state3, setState3] = useState(r116.length > 0 && !r105 ? r116[0] : displayNameStylesEffectConfig.defaultColors[0]);
+  const [state4, setState4] = useState(() => Object.fromEntries(c10092_14.map((item) => {
+    const r1 = [item, ,];
+    let r2 = c21165_13;
+    if (!(r2.length > 0 && state2 === item)) {
+      r2 = c21165_12[item];
+    }
+    r1[1] = r2;
+    return r1;
+  })));
+  callback = useCallback((c27728_0, c27728_1) => {
+    setState4((prevState4) => {
+      const r0 = {
+        ...prevState4
+      };
+      r0[c27728_0] = c27728_1;
+      return r0;
+    });
+  }, []);
+  memo = useMemo(() => {
+    let r1;
+    if (c21165_10) {
+      let r6 = state4[state2];
+      if (r6 == null) {
+        r6 = displayNameStylesEffectConfig.defaultColors;
+      }
+      r1 = r6;
+    } else {
+      r1 = [state3];
+    }
+    return r1;
+  }, [r105, state4, state2, displayNameStylesEffectConfig.defaultColors, state3]);
+  const memo2 = useMemo(() => {
+    let r9 = state !== c21165_5?.fontId || state2 !== c21165_5?.effectId;
+    if (!r9) {
+      let r19 = c21165_5?.colors;
+      if (r19 == null) {
+        r19 = [];
+      }
+      r9 = !areArraysShallowEqual(memo, r19);
+    }
+    return r9;
+  }, [styles2, state, state2, memo]);
+  const displayNameStylesHandleApply = useDisplayNameStylesHandleApply({
+    hasChanges: memo2,
+    selectedFontId: state,
+    selectedEffectId: state2,
+    selectedColors: memo,
+    defaultColor: displayNameStylesEffectConfig.defaultColors[0],
+    guildId,
+    isTryItOut,
+    onClose: () => navigation.goBack()
+  });
+  visibleFontOrder = useVisibleFontOrder();
+  visibleEffectOrder = useVisibleEffectOrder();
+  const displayNameStylesNewFontsBadge = useDisplayNameStylesNewFontsBadge(visibleFontOrder);
+  showFontsBadge = displayNameStylesNewFontsBadge.showFontsBadge;
+  dismissFontsBadge = displayNameStylesNewFontsBadge.dismissFontsBadge;
+  const displayNameStylesNewEffectsBadge = useDisplayNameStylesNewEffectsBadge(visibleEffectOrder);
+  showEffectsBadge = displayNameStylesNewEffectsBadge.showEffectsBadge;
+  dismissEffectsBadge = displayNameStylesNewEffectsBadge.dismissEffectsBadge;
+  const callback3 = useCallback(() => {
+    const styles = generateRandomDisplayNameStyles(visibleFontOrder, visibleEffectOrder);
+    const { fontId, effectId, colors } = styles;
+    setState(fontId);
+    setState2(effectId);
+    if (getEffectColorCount(effectId) > 1) {
+      callback(effectId, colors);
+    } else {
+      setState3(colors[0]);
+    }
+    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_SURPRISE_ME);
+  }, [callback, visibleFontOrder, visibleEffectOrder]);
+  const callback4 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    if (isTryItOut) {
+      setTryItOutDisplayNameStyles(null);
+    } else {
+      setPendingChanges({
+        displayNameStyles: null
+      });
+    }
+    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_REMOVED);
+    navigation.goBack();
+  }, [navigation, isTryItOut]);
+  const callback2 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    setPendingChanges({
+      guildId,
+      displayNameStyles: null
+    });
+    navigation.goBack();
+  }, [guildId, navigation]);
+  const callback5 = useCallback(() => {
+    if (showFontsBadge) {
+      dismissFontsBadge();
+    }
+    ActionSheetActionCreators.openLazy(import("./DisplayNameStylesFontPickerSheet"), "DisplayNameStylesFontPickerSheet", {
+      selectedFontId: state,
+      onSelectFont: setState,
+      displayName: displayNameStylesPendingName
+    });
+  }, [state, displayNameStylesPendingName, showFontsBadge, dismissFontsBadge]);
+  const callback7 = useCallback(() => {
+    if (showEffectsBadge) {
+      dismissEffectsBadge();
+    }
+    ActionSheetActionCreators.openLazy(import("./DisplayNameStylesEffectPickerSheet"), "DisplayNameStylesEffectPickerSheet", {
+      userId: stateFromStores2?.id,
+      selectedEffectId: state2,
+      onSelectEffect: setState2
+    });
+  }, [state2, stateFromStores2?.id, showEffectsBadge, dismissEffectsBadge]);
+  const callback6 = useCallback(() => {
+    if (state2 === DisplayNameEffect.GUMMY) {
+      ActionSheetActionCreators.openLazy(import("./DisplayNameStylesGummyColorPickerSheet"), "DisplayNameStylesGummyColorPickerSheet", {
+        selectedColors: memo,
+        onSelectColors: (a0) => callback(DisplayNameEffect.GUMMY, a0)
+      });
+    } else if (c21165_10) {
+      ActionSheetActionCreators.openLazy(_asyncRequire(dependencyMap[36], dependencyMap.paths), "DisplayNameStylesGradientPickerSheet", {
+        selectedColors: memo,
+        selectedEffectId: state2,
+        onSelectColors: (a0) => callback(state2, a0)
+      });
+    } else {
+      ActionSheetActionCreators.openLazy(_asyncRequire(dependencyMap[37], dependencyMap.paths), "DisplayNameStylesColorPickerSheet", {
+        selectedColor: state3,
+        selectedEffectId: state2,
+        onSelectColor: setState3
+      });
+    }
+  }, [r105, memo, state3, state2, callback]);
+  const r47 = intl.string(getDisplayNameStylesFontName(state));
+  const r191 = stateFromStores2 == null;
+  let r192 = null;
+  if (!r191) {
+    const Provider = DisplayNameStylesContext.Provider;
+    const contentContainerStyle = {
+      ...styles.contentContainer,
+      paddingBottom: memo2 ? 70 : 0
+    };
+    const r217 = [<DisplayNameStylesEditPreview user={stateFromStores2} displayName={displayNameStylesPendingName} guildId={guildId} selectedFontId={state} selectedEffectId={state2} selectedColors={memo} />, , ,];
+    const r49 = intl.string(DisplayNameStyles_messages["0JCuGm"]);
+    const r288 = [<Pressable onPress={callback5} style={styles.fieldButton} accessibilityRole="button" accessibilityLabel={showFontsBadge ? `${r49}, ${r47}, ${intl.string(t.y2b7CA)}` : `${r49}, ${r47}`}>
+      <View>
+        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
+          {intl.string(DisplayNameStyles_messages["0JCuGm"])}
+        </Text>
+        <Text variant="text-md/normal" color="text-subtle">{r47}</Text>
+      </View>
+      {showFontsBadge ? <View style={styles.fieldButtonTrailing}>
+        <NewTag />
+        <ChevronSmallRightIcon color="icon-muted" />
+      </View> : <ChevronSmallRightIcon color="icon-muted" />}
+    </Pressable>, , ,];
+    const r300 = intl.string(DisplayNameStyles_messages.RVtMxT);
+    const name = displayNameStylesEffectConfig.name;
+    r288[1] = <Pressable onPress={callback7} style={[styles.fieldButton, styles.fieldButtonBorder]} accessibilityRole="button" accessibilityLabel={showEffectsBadge ? `${r300}, ${name}, ${intl.string(t.y2b7CA)}` : `${r300}, ${name}`}>
+      <View>
+        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
+          {intl.string(DisplayNameStyles_messages.RVtMxT)}
+        </Text>
+        <Text variant="text-md/normal" color="text-subtle">{displayNameStylesEffectConfig.name}</Text>
+      </View>
+      {showEffectsBadge ? <View style={styles.fieldButtonTrailing}>
+        <NewTag />
+        <ChevronSmallRightIcon color="icon-muted" />
+      </View> : <ChevronSmallRightIcon color="icon-muted" />}
+    </Pressable>;
+    r288[2] = <Pressable onPress={callback6} style={[styles.fieldButton, styles.fieldButtonBorder]} accessibilityRole="button" accessibilityLabel={intl.string(DisplayNameStyles_messages["6OxgN7"])}>
+      <View style={styles.fieldButtonLabel}>
+        <Text variant="heading-md/semibold" color="mobile-text-heading-primary">
+          {intl.string(DisplayNameStyles_messages["6OxgN7"])}
+        </Text>
+        <Text variant={isDisplayNameStylesFlywheelSettersEnabled ? "text-sm/normal" : "text-md/normal"} color="text-subtle" lineClamp={1}>
+          {memo.map((item) => int2hex(item)).join(", ")}
+        </Text>
+      </View>
+      <View style={styles.fieldButtonChevron}>
+        <DisplayNameStylesColorSwatch colors={memo} effectId={state2} />
+        <ChevronSmallRightIcon color="icon-muted" />
+      </View>
+    </Pressable>;
+    r217[1] = <View style={styles.fieldButtonGroup}>{r288}</View>;
+    r217[2] = <View style={styles.buttonContainer}>
+      <Button text={intl.string(DisplayNameStyles_messages.NOGFds)} onPress={callback3} variant="tertiary" size="lg" grow icon={<DiceIcon />} iconPosition="start" />
+      {guildId == null && styles2 != null && <Button text={intl.string(DisplayNameStyles_messages.ymq8WQ)} onPress={callback4} variant="tertiary" size="lg" grow icon={<DenyIcon />} iconPosition="start" />}
+      {guildId != null && (guildDisplayNameStyles != null || pendingDisplayNameStyles != null) && <Button text={intl.string(DisplayNameStyles_messages["j/KRxc"])} onPress={callback2} variant="tertiary" size="lg" grow icon={<DenyIcon />} iconPosition="start" />}
+    </View>;
+    r192 = <ThemeContextProvider theme={theme}>
+      <Provider value={{
+        overrideSettings: true
+      }}>
+        <View style={styles.container}>
+          <ScrollView contentContainerStyle={contentContainerStyle}>{r217}</ScrollView>
+          <ApplyButton onPress={displayNameStylesHandleApply} visible={memo2} />
+        </View>
+      </Provider>
+    </ThemeContextProvider>;
+  }
+  return r192;
+};

modules/display_name_styles/native/DisplayNameStylesEffectPickerSheet.tsx

@@ -0,0 +1,161 @@
+// Metro module 14359 (f14360).
+import { useState, useCallback } from "react";
+import { Pressable, View } from "react-native";
+import { FLYWHEEL_EFFECTS } from "../DisplayNameStylesConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useBottomSheetRef } from "../../../design/components/Sheet/native/useBottomSheetRef";
+import { useVisibleEffectOrder } from "../DisplayNameStylesEffectOrder";
+import { useDisplayNameStylesNewEffects } from "../hooks/useDisplayNameStylesNewItems";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { intl, t } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { Stack } from "../../../design/components/Stack/native/Stack.native";
+import { DISPLAY_NAME_STYLES_EFFECT_NAMES, useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
+import UsernameWithEffects from "./UsernameWithEffects";
+import { EffectDisplayType } from "../types";
+import { Text } from "../../../design/components/Text/native/Text";
+let useStyles;
+const EffectTile = function EffectTile(props) {
+  const { userId: userId2, effectId } = props;
+  let selected = props.selected;
+  let showNewDot = props.showNewDot;
+  const onClick2 = props.onClick;
+  const styles = useStyles();
+  let r27 = DISPLAY_NAME_STYLES_EFFECT_NAMES[effectId];
+  if (r27 == null) {
+    r27 = DisplayNameStyles_messages.OpWJ3f;
+  }
+  const userName = intl.string(r27);
+  const displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(effectId);
+  let r10 = FLYWHEEL_EFFECTS.includes(effectId);
+  const props2 = {
+    onPress: onClick2,
+    accessibilityRole: "button",
+    accessibilityLabel: r10 ? `${userName}, ${intl.string(t.oW0eUd)}` : userName,
+    accessibilityState: {
+      selected
+    },
+    children: null
+  };
+  const style = [styles.effectCard, ,];
+  if (selected) {
+    selected = styles.effectCardSelected;
+  }
+  style[1] = selected;
+  const r67 = [<UsernameWithEffects userId={userId2} userName={userName} effectDisplayType={EffectDisplayType.STATIC} pendingDisplayNameStyles={displayNameStylesEffectConfig.previewStyles} style={styles.effectName} variant="text-md/semibold" />, , ,];
+  if (showNewDot) {
+    showNewDot = <View style={styles.tileNewDot} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />;
+  }
+  r67[1] = showNewDot;
+  if (r10) {
+    r10 = <Text variant="text-xs/normal" color="text-subtle" style={styles.betaCaption}>
+      {intl.string(t.oW0eUd)}
+    </Text>;
+  }
+  r67[2] = r10;
+  props2.children = <View style={style}>{r67}</View>;
+  return <Pressable key={effectId} {...props2} />;
+};
+useStyles = createStyles({
+  header: {
+    paddingTop: 4
+  },
+  headerTrailing: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    padding: Module712.space.PX_8,
+    paddingLeft: Module712.space.PX_16,
+    alignItems: "center"
+  },
+  gridContainer: {
+    flexWrap: "wrap",
+    width: 350
+  },
+  effectCard: {
+    width: 109,
+    height: 80,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
+    borderRadius: Module712.radii.sm,
+    borderWidth: 1,
+    borderColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  effectCardSelected: {
+    borderColor: Module712.colors.CONTROL_BRAND_FOREGROUND
+  },
+  effectName: {
+    textAlign: "center"
+  },
+  tileNewDot: {
+    position: "absolute",
+    top: Module712.space.PX_8,
+    right: Module712.space.PX_8,
+    width: Module712.space.PX_8,
+    height: Module712.space.PX_8,
+    borderRadius: Module712.space.PX_8 / 2,
+    backgroundColor: Module712.colors.BADGE_BACKGROUND_BRAND,
+    shadowColor: Module712.colors.BADGE_BACKGROUND_BRAND,
+    shadowRadius: Module712.space.PX_4,
+    shadowOpacity: 1,
+    elevation: 4
+  },
+  betaCaption: {
+    position: "absolute",
+    bottom: Module712.space.PX_4,
+    left: 0,
+    right: 0,
+    textAlign: "center"
+  }
+});
+export default function DisplayNameStylesEffectPickerSheet(props) {
+  const { userId, selectedEffectId, onSelectEffect } = props;
+  const styles = useStyles();
+  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
+  const visibleEffectOrder = useVisibleEffectOrder();
+  const displayNameStylesNewEffects = useDisplayNameStylesNewEffects(visibleEffectOrder);
+  const { dotEffectIds, dismissEffectDot } = displayNameStylesNewEffects;
+  const [state, setState] = useState(selectedEffectId);
+  const r2 = state !== selectedEffectId;
+  let c21175_6 = r2;
+  const callback = useCallback((a0) => {
+    setState(a0);
+  }, []);
+  const callback2 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    if (c21175_6) {
+      onSelectEffect(state);
+    }
+    ActionSheetActionCreators.hideActionSheet();
+  }, [r2, state, onSelectEffect]);
+  return userId != null ? <BottomSheet ref={bottomSheetRef} header={<View style={styles.header}>
+    <BottomSheetTitleHeader title={intl.string(DisplayNameStyles_messages.RVtMxT)} trailing={<View style={styles.headerTrailing}>
+      <Button text={intl.string(t.XqMe3N)} onPress={callback2} variant="primary" size="sm" />
+    </View>} />
+  </View>}>
+    <View style={styles.container}>
+      <View style={styles.contentContainer}>
+        <Stack direction="horizontal" spacing={8} style={styles.gridContainer}>
+          {visibleEffectOrder.map((item) => {
+            return <EffectTile key={item} userId={userId} effectId={item} selected={item === state} showNewDot={dotEffectIds.has(item)} onClick={() => {
+              callback(item);
+              if (dotEffectIds.has(item)) {
+                dismissEffectDot(item);
+              }
+            }} />;
+          })}
+        </Stack>
+      </View>
+    </View>
+  </BottomSheet> : null;
+};

modules/display_name_styles/native/DisplayNameStylesFlywheelMobileActionSheet.tsx

@@ -0,0 +1,127 @@
+// Metro module 15764 (f15765).
+import { useRef, useContext, useCallback } from "react";
+import { View } from "react-native";
+import UserStore from "../../../stores/UserStore";
+import { Fonts, UserSettingsSections } from "../../../Constants";
+import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
+import { AccessibilityPreferencesContext } from "../../../_bundle/Module3908";
+import * as _shared from "../../../design/shared";
+import useTheme from "../../../hooks/useTheme";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import { intl, t } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { openUserSettings } from "../../user_settings/core/native/openUserSettings";
+import { runAfterInteractions } from "../../../utils/native/RunAfterInteractionsUtils";
+import { UNSAFE_markDismissibleContentAsDismissed } from "../../dismissible_content/DismissibleContentUnsafeUtils";
+import { DismissibleContent } from "../../../_bundle/Module1358";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
+import { ActionSheetHeaderBar } from "../../../design/components/Sheet/native/ActionSheetHeaderBar.native";
+import { DisplayNameStylesV2AbstractUI } from "../../../design/assets/native";
+import { isIOS } from "../../../utils/PlatformUtils";
+import FastImage from "../../../components_native/common/FastImage";
+import Module15765 from "../../../_bundle/Module15765";
+import { APNGPlayer } from "../../image/native/APNGPlayer.android";
+import { BetaTag } from "../../../design/void/native";
+import { Text } from "../../../design/components/Text/native/Text";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+const useStyles = createStyles(() => ({
+  content: {
+    alignItems: "center",
+    paddingHorizontal: Module712.space.PX_16
+  },
+  imageContainer: {
+    width: "100%",
+    height: 162,
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: Module712.space.PX_24
+  },
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  betaTag: {
+    marginLeft: 0
+  },
+  title: {
+    textAlign: "center",
+    fontFamily: Fonts.GINTO_NORD_EXTRA_BOLD,
+    textTransform: "uppercase",
+    marginTop: Module712.space.PX_12,
+    marginBottom: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_12
+  },
+  subtitle: {
+    textAlign: "center",
+    marginTop: Module712.space.PX_12,
+    marginBottom: Module712.space.PX_32
+  },
+  actions: {
+    gap: Module712.space.PX_12,
+    width: "100%"
+  }
+}));
+export default function DisplayNameStylesFlywheelMobileActionSheet(props) {
+  const markAsDismissed = props.markAsDismissed;
+  const ref = useRef(null);
+  const enabled = useContext(AccessibilityPreferencesContext).reducedMotion.enabled;
+  const isThemeDark = _shared.isThemeDark(useTheme());
+  const styles = useStyles();
+  const canUsePremiumProfileCustomization = PremiumUtils.canUsePremiumProfileCustomization(useStateFromStores([UserStore], () => UserStore.getCurrentUser()));
+  const r17 = canUsePremiumProfileCustomization ? intl.string(DisplayNameStyles_messages.TyUdka) : intl.string(DisplayNameStyles_messages.dluV0R);
+  const callback = useCallback(() => {
+    openUserSettings({
+      screen: canUsePremiumProfileCustomization ? UserSettingsSections.PROFILE_CUSTOMIZATION : UserSettingsSections.PROFILE_CUSTOMIZATION_TRY_IT_OUT
+    }, () => {
+      runAfterInteractions(() => {
+        openUserSettings({
+          screen: UserSettingsSections.DISPLAY_NAME_STYLES
+        }, () => {
+          markAsDismissed(ContentDismissActionType.TAKE_ACTION);
+          UNSAFE_markDismissibleContentAsDismissed(DismissibleContent.DISPLAY_NAME_STYLES_FLYWHEEL_MOBILE_PROFILE_COACHMARK, {
+            dismissAction: ContentDismissActionType.INDIRECT_ACTION
+          });
+        });
+      });
+    });
+  }, [canUsePremiumProfileCustomization, markAsDismissed]);
+  const callback2 = useCallback(() => {
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }, [markAsDismissed]);
+  const callback3 = useCallback(() => {
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }, [markAsDismissed]);
+  const r84 = [<ActionSheetHeaderBar onPress={() => {
+    const current = ref.current;
+    if (current != null) {
+      current.closeActionSheet();
+    }
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }} />, <View style={styles.imageContainer}>
+    {enabled && <DisplayNameStylesV2AbstractUI resizeMode="contain" />}
+    {enabled ? !enabled : isIOS() ? <FastImage source={{
+      uri: Module15765
+    }} style={styles.image} resizeMode="contain" enableAnimation={!enabled} /> : <APNGPlayer url={Module15765} style={styles.image} autoplay />}
+  </View>, <BetaTag style={styles.betaTag} />, , , ,];
+  let color = "text-overlay-dark";
+  r84[3] = <Text variant="display-md" style={styles.title} color={isThemeDark ? "text-overlay-light" : "text-overlay-dark"}>
+    {intl.string(DisplayNameStyles_messages.Uzms61)}
+  </Text>;
+  if (isThemeDark) {
+    color = "text-overlay-light";
+  }
+  r84[4] = <Text variant="text-lg/medium" style={styles.subtitle} color={color}>{r17}</Text>;
+  r84[5] = <View style={styles.actions}>
+    <Button text={intl.string(t["4P5I8V"])} variant="primary" size="lg" onPress={callback} />
+    <Button text={intl.string(t.TulDPl)} variant="secondary" size="lg" onPress={callback2} />
+  </View>;
+  return <BottomSheet ref={ref} onDismiss={callback3} startExpanded handleDisabled>
+    <SafeAreaPaddingView bottom>
+      <View style={styles.content}>{r84}</View>
+    </SafeAreaPaddingView>
+  </BottomSheet>;
+};

modules/display_name_styles/native/DisplayNameStylesFlywheelProfileCoachmark.tsx

@@ -0,0 +1,53 @@
+// Metro module 15632 (f15633).
+import { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import UserStore from "../../../stores/UserStore";
+import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import PremiumUtils from "../../../utils/PremiumUtils";
+import { intl } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { useCoachmark } from "../../../design/components/Coachmark/native/useCoachmark.native";
+import { DisplayNameLockeAbstractUI } from "../../../design/assets/native";
+import { BetaTag } from "../../../design/void/native";
+let useStyles;
+const CoachmarkImage = function CoachmarkImage() {
+  const styles = useStyles();
+  return <View style={styles.coachmarkImageContainer}>
+    <DisplayNameLockeAbstractUI width={160} height={68} resizeMode="contain" />
+    <BetaTag style={styles.betaTag} />
+  </View>;
+};
+useStyles = createStyles({
+  coachmarkImageContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: Module712.space.PX_12
+  },
+  betaTag: {
+    marginLeft: 0
+  }
+});
+export default function DisplayNameStylesFlywheelProfileCoachmark({ targetRef, visible, markAsDismissed }) {
+  let title, description, callback;
+  title = void 0;
+  description = void 0;
+  callback = void 0;
+  const canUsePremiumProfileCustomization = PremiumUtils.canUsePremiumProfileCustomization(useStateFromStores([UserStore], () => UserStore.getCurrentUser()));
+  title = canUsePremiumProfileCustomization ? intl.string(DisplayNameStyles_messages.h6sykk) : intl.string(DisplayNameStyles_messages.M5amXH);
+  description = canUsePremiumProfileCustomization ? intl.string(DisplayNameStyles_messages.TyUdka) : intl.string(DisplayNameStyles_messages.dluV0R);
+  callback = useCallback(() => {
+    markAsDismissed(ContentDismissActionType.USER_DISMISS);
+  }, [markAsDismissed]);
+  useCoachmark(targetRef, useMemo(() => ({
+    title,
+    description,
+    visible,
+    position: "bottom",
+    onDismiss: callback,
+    renderImgComponent: () => <CoachmarkImage />
+  }), [title, description, visible, callback]));
+  return null;
+};

modules/display_name_styles/native/DisplayNameStylesFontPickerSheet.tsx

@@ -0,0 +1,182 @@
+// Metro module 14358 (f14359).
+import { useState, useCallback } from "react";
+import { Pressable, View } from "react-native";
+import { FLYWHEEL_FONTS } from "../DisplayNameStylesConstants";
+import { Fonts } from "../../../_bundle/Module505";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useBottomSheetRef } from "../../../design/components/Sheet/native/useBottomSheetRef";
+import { useVisibleFontOrder } from "../DisplayNameStylesFontOrder";
+import { useDisplayNameStylesNewFonts } from "../hooks/useDisplayNameStylesNewItems";
+import { DisplayNameFont } from "../../../_bundle/Module1888";
+import * as _DisplayNameStylesUtils from "../DisplayNameStylesUtils";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { intl, t } from "../../../intl/index.native";
+import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { Stack } from "../../../design/components/Stack/native/Stack.native";
+import getDisplayNameStylesFontName from "../getDisplayNameStylesFontName";
+import { DISPLAY_NAME_STYLES_FONT_FAMILY_MAP } from "./useDisplayNameStylesFont";
+import { Text } from "../../../design/components/Text/native/Text";
+import { CircleInformationIcon } from "../../../design/components/Icon/native/redesign/generated/CircleInformationIcon";
+const useStyles = createStyles({
+  header: {
+    paddingTop: 4
+  },
+  headerTrailing: {
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  container: {
+    flex: 1
+  },
+  contentContainer: {
+    padding: Module712.space.PX_8,
+    alignItems: "center"
+  },
+  gridContainer: {
+    flexWrap: "wrap",
+    maxWidth: 350
+  },
+  fontCard: {
+    width: 79,
+    height: 79,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
+    borderRadius: Module712.radii.sm,
+    borderWidth: 1,
+    borderColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  fontCardSelected: {
+    borderColor: Module712.colors.CONTROL_BRAND_FOREGROUND
+  },
+  fontText: {
+    fontSize: 24,
+    lineHeight: 34,
+    textAlign: "center",
+    textAlignVertical: "center"
+  },
+  tileNewDot: {
+    position: "absolute",
+    top: Module712.space.PX_8,
+    right: Module712.space.PX_8,
+    width: Module712.space.PX_8,
+    height: Module712.space.PX_8,
+    borderRadius: Module712.space.PX_8 / 2,
+    backgroundColor: Module712.colors.BADGE_BACKGROUND_BRAND,
+    shadowColor: Module712.colors.BADGE_BACKGROUND_BRAND,
+    shadowRadius: Module712.space.PX_4,
+    shadowOpacity: 1,
+    elevation: 4
+  },
+  betaCaption: {
+    position: "absolute",
+    bottom: Module712.space.PX_4,
+    left: 0,
+    right: 0,
+    textAlign: "center"
+  },
+  nonLatinDisclaimer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8,
+    paddingHorizontal: Module712.space.PX_12,
+    paddingVertical: Module712.space.PX_8,
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
+    borderRadius: Module712.radii.sm,
+    marginTop: Module712.space.PX_16
+  },
+  disclaimerText: {
+    flex: 1
+  }
+});
+export default function DisplayNameStylesFontPickerSheet(props) {
+  const { selectedFontId, onSelectFont, displayName } = props;
+  const styles = useStyles();
+  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
+  const visibleFontOrder = useVisibleFontOrder();
+  const displayNameStylesNewFonts = useDisplayNameStylesNewFonts(visibleFontOrder);
+  const { dotFontIds, dismissFontDot } = displayNameStylesNewFonts;
+  const [state, setState] = useState(selectedFontId);
+  let r11 = state !== DisplayNameFont.DEFAULT;
+  const hasNonLatinLetters = _DisplayNameStylesUtils.hasNonLatinLetters(displayName);
+  const r2 = state !== selectedFontId;
+  let c21174_6 = r2;
+  const callback = useCallback((a0) => {
+    setState(a0);
+  }, []);
+  const callback2 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    if (c21174_6) {
+      onSelectFont(state);
+    }
+    ActionSheetActionCreators.hideActionSheet();
+  }, [r2, state, onSelectFont]);
+  const props2 = {
+    ref: bottomSheetRef,
+    header: <View style={styles.header}>
+      <BottomSheetTitleHeader title={intl.string(DisplayNameStyles_messages["0JCuGm"])} trailing={<View style={styles.headerTrailing}>
+        <Button text={intl.string(t.XqMe3N)} onPress={callback2} variant="primary" size="sm" />
+      </View>} />
+    </View>,
+    children: null
+  };
+  const r106 = [<Stack direction="horizontal" align="center" justify="center" spacing={8} style={styles.gridContainer}>
+    {visibleFontOrder.map((item) => {
+      const r19 = intl.string(getDisplayNameStylesFontName(item));
+      let fontFamily = DISPLAY_NAME_STYLES_FONT_FAMILY_MAP[item];
+      if (fontFamily == null) {
+        fontFamily = Fonts.PRIMARY_SEMIBOLD;
+      }
+      let r11 = dotFontIds.has(item);
+      let c27729_1 = r11;
+      let r32 = FLYWHEEL_FONTS.includes(item);
+      const accessibilityLabel = r32 ? `${r19}, ${intl.string(t.oW0eUd)}` : r19;
+      const selected = item === state;
+      const style = [styles.fontCard, selected && styles.fontCardSelected];
+      const r66 = [<Text variant="text-lg/semibold" color={selected ? "mobile-text-heading-primary" : "text-default"} style={[styles.fontText, {
+        fontFamily
+      }]}>Gg</Text>, , ,];
+      if (r11) {
+        r11 = <View style={styles.tileNewDot} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />;
+      }
+      r66[1] = r11;
+      if (r32) {
+        r32 = <Text variant="text-xs/normal" color="text-subtle" style={styles.betaCaption}>
+          {intl.string(t.oW0eUd)}
+        </Text>;
+      }
+      r66[2] = r32;
+      return <Pressable key={item} onPress={() => {
+        callback(item);
+        if (c27729_1) {
+          dismissFontDot(item);
+        }
+      }} accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityState={{
+        selected
+      }}>
+        <View style={style}>{r66}</View>
+      </Pressable>;
+    })}
+  </Stack>, ,];
+  if (r11) {
+    r11 = hasNonLatinLetters;
+  }
+  if (r11) {
+    r11 = <View style={styles.nonLatinDisclaimer}>
+      <CircleInformationIcon size="sm" />
+      <Text variant="text-xs/normal" color="text-subtle" style={styles.disclaimerText}>
+        {intl.string(DisplayNameStyles_messages["+O1xL2"])}
+      </Text>
+    </View>;
+  }
+  r106[1] = r11;
+  props2.children = <View style={styles.container}>
+    <View style={styles.contentContainer}>{r106}</View>
+  </View>;
+  return <BottomSheet {...props2} />;
+};

modules/display_name_styles/native/DisplayNameStylesGradientPickerSheet.tsx

@@ -0,0 +1,170 @@
+// Metro module 14364 (f14365).
+import { useMemo, useState, useCallback } from "react";
+import { Pressable, View } from "react-native";
+import { getColorPresetsForEffect } from "../DisplayNameStylesConstants";
+import { AnalyticEvents } from "../../../Constants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
+import { getEffectColorCount } from "../DisplayNameStylesUtils";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import showCustomColorPickerActionSheet from "../../color_picker/native/showCustomColorPickerActionSheet";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { intl, t } from "../../../intl/index.native";
+import Module4611 from "../../../_bundle/Module4611";
+import { int2hex } from "../../../_bundle/int2hslRaw";
+import { EyeDropperIcon } from "../../../design/components/Icon/native/redesign/generated/EyeDropperIcon";
+import Module12 from "../../../_bundle/Module12";
+import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
+const useStyles = createStyles({
+  body: {
+    paddingVertical: Module712.space.PX_12,
+    paddingHorizontal: Module712.space.PX_12,
+    flexGrow: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: Module712.space.PX_16
+  },
+  gradientContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: Module712.space.PX_8
+  },
+  dropperContainer: {
+    left: Module712.space.PX_24,
+    right: Module712.space.PX_24,
+    position: "absolute",
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  dropper: {
+    borderColor: "white",
+    padding: Module712.space.PX_8,
+    borderRadius: Module712.radii.round,
+    borderWidth: 1
+  },
+  gradient: {
+    height: 50,
+    width: "100%",
+    borderRadius: Module712.radii.sm
+  },
+  optionContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    paddingHorizontal: Module712.space.PX_4
+  },
+  swatchWrapper: {
+    width: "25%",
+    padding: 2
+  },
+  pressable: {
+    height: 40,
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden",
+    borderWidth: 2,
+    borderColor: "transparent"
+  },
+  selected: {
+    borderColor: Module712.colors.BACKGROUND_BRAND
+  },
+  option: {
+    flex: 1
+  }
+});
+export default function DisplayNameStylesColorPickerSheet(props) {
+  let state, setState, callback, callback2;
+  const { selectedColors, selectedEffectId, onSelectColors } = props;
+  state = void 0;
+  setState = void 0;
+  callback = void 0;
+  callback2 = void 0;
+  const styles = useStyles();
+  const displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(selectedEffectId);
+  const effectColorCount = getEffectColorCount(selectedEffectId);
+  const memo = useMemo(() => getColorPresetsForEffect(selectedEffectId), [selectedEffectId]);
+  [state, setState] = useState(selectedColors);
+  const callback3 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    onSelectColors(state);
+    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_COLOR_SELECTED, {
+      default: false,
+      colors: state
+    });
+    ActionSheetActionCreators.hideActionSheet();
+  }, [state, onSelectColors]);
+  const callback4 = useCallback(() => {
+    let r8 = memo[0];
+    if (r8 == null) {
+      r8 = displayNameStylesEffectConfig.defaultColors;
+    }
+    setState([...r8]);
+  }, [memo, displayNameStylesEffectConfig.defaultColors]);
+  callback = useCallback((a0) => {
+    let color = state[a0];
+    if (color == null) {
+      color = 0;
+    }
+    showCustomColorPickerActionSheet({
+      color,
+      onSelect: (c30739_0) => {
+        triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+        setState((prevState) => prevState.map((item, index) => index === a0 ? c30739_0 : item));
+      },
+      actionButtonVariant: "primary"
+    }, "stack");
+  }, [state]);
+  callback2 = useCallback((a0) => {
+    setState([...a0]);
+  }, []);
+  return <BottomSheet header={<BottomSheetTitleHeader title={displayNameStylesEffectConfig.name} trailing={<Button variant="primary" size="sm" text={intl.string(t.XqMe3N)} onPress={callback3} />} />}>
+    <View style={styles.body}>
+      <View style={styles.gradientContainer}>
+        <Module4611 style={styles.gradient} colors={state.map((item) => int2hex(item))} start={{
+          x: 0,
+          y: 0
+        }} end={{
+          x: 1,
+          y: 0
+        }} />
+        <View style={styles.dropperContainer}>
+          {Array.from({
+            length: effectColorCount
+          }).map((item, index) => {
+            return <Pressable key={index} style={styles.dropper} onPress={() => callback(index)} accessibilityLabel={intl.formatToPlainString(t.n5Ve0L, {
+              number: index + 1
+            })} accessibilityRole="button">
+              <EyeDropperIcon color="white" size="sm" />
+            </Pressable>;
+          })}
+        </View>
+      </View>
+      <View style={styles.optionContainer}>
+        {memo.map((a0, index) => {
+          let r14 = Module12.isEqual(a0, state);
+          const style = [styles.pressable, ,];
+          if (r14) {
+            r14 = styles.selected;
+          }
+          style[1] = r14;
+          return <View key={index} style={styles.swatchWrapper}>
+            <PressableOpacity style={style} onPress={() => callback2(a0)}>
+              <Module4611 style={styles.option} colors={a0.map((item) => int2hex(item))} start={{
+                x: 0,
+                y: 0
+              }} end={{
+                x: 1,
+                y: 0
+              }} />
+            </PressableOpacity>
+          </View>;
+        })}
+      </View>
+      <Button text={intl.string(t.yBZMsQ)} onPress={callback4} variant="secondary" />
+    </View>
+  </BottomSheet>;
+};

modules/display_name_styles/native/DisplayNameStylesGummyColorPickerSheet.tsx

@@ -0,0 +1,158 @@
+// Metro module 14360 (f14361).
+import { useState, useCallback } from "react";
+import { Pressable, View, StyleSheet } from "react-native";
+import { DISPLAY_NAME_STYLES_GUMMY_PRESETS } from "../DisplayNameStylesConstants";
+import { AnalyticEvents } from "../../../Constants";
+import { hueToGummyColor, rebuildGummySourceColor, buildGummyColors } from "../DisplayNameStylesUtils";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useDisplayNameStylesEffectConfig } from "../hooks/useDisplayNameStylesEffectConfigs";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import { areArraysShallowEqual } from "../../../_bundle/shallowEqual";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import showGummyCustomColorSheet from "./showGummyCustomColorSheet";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import { intl, t } from "../../../intl/index.native";
+import GummyStripes from "./effects/GummyStripes";
+import { PencilIcon } from "../../../design/components/Icon/native/redesign/generated/PencilIcon";
+let c10102_11 = hueToGummyColor(0);
+const useStyles = createStyles({
+  body: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_12,
+    paddingBottom: Module712.space.PX_16,
+    gap: Module712.space.PX_16,
+    alignItems: "center"
+  },
+  colorRowInset: {
+    paddingHorizontal: Module712.space.PX_4,
+    alignSelf: "stretch"
+  },
+  optionContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  swatchWrapper: {
+    width: "25%",
+    padding: 2
+  },
+  swatch: {
+    height: 40,
+    flexDirection: "row",
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden",
+    borderWidth: 2,
+    borderColor: "transparent"
+  },
+  swatchSelected: {
+    borderColor: Module712.colors.BACKGROUND_BRAND
+  },
+  customSwatchEmpty: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
+    borderWidth: 1,
+    borderColor: Module712.colors.BORDER_NORMAL
+  },
+  customIconOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  customIconScrim: {
+    width: 28,
+    height: 28,
+    borderRadius: Module712.radii.round,
+    backgroundColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+export default function DisplayNameStylesGummyColorPickerSheet(props) {
+  let state, setState, state2, setState2, c21176_8, callback;
+  const { selectedColors, onSelectColors } = props;
+  state = void 0;
+  setState = void 0;
+  state2 = void 0;
+  setState2 = void 0;
+  c21176_8 = void 0;
+  callback = void 0;
+  const styles = useStyles();
+  const displayNameStylesEffectConfig = useDisplayNameStylesEffectConfig(DisplayNameEffect.GUMMY);
+  let c21176_3 = selectedColors.length > 0 && !DISPLAY_NAME_STYLES_GUMMY_PRESETS.some((item) => areArraysShallowEqual(item, selectedColors));
+  [state, setState] = useState(() => c21176_3 ? rebuildGummySourceColor(selectedColors) : c10102_11);
+  [state2, setState2] = useState(() => {
+    let r6 = selectedColors;
+    if (!(selectedColors.length > 0)) {
+      r6 = buildGummyColors(c10102_11);
+    }
+    return r6;
+  });
+  const r51 = DISPLAY_NAME_STYLES_GUMMY_PRESETS.findIndex((item) => areArraysShallowEqual(item, state2));
+  c21176_8 = r51;
+  const r52 = r51 >= 0;
+  const callback4 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+    showGummyCustomColorSheet({
+      initialColor: state,
+      onSelect: (a0) => {
+        setState(a0);
+        setState2(buildGummyColors(a0));
+      }
+    });
+  }, [state]);
+  callback = useCallback((a0) => {
+    setState2([...a0]);
+  }, []);
+  const callback3 = useCallback(() => {
+    setState2([...DISPLAY_NAME_STYLES_GUMMY_PRESETS[0]]);
+    setState(c10102_11);
+  }, []);
+  const callback2 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    onSelectColors(state2);
+    AnalyticsUtils.track(AnalyticEvents.DISPLAY_NAME_STYLES_COLOR_SELECTED, {
+      default: false,
+      colors: state2
+    });
+    ActionSheetActionCreators.hideActionSheet();
+  }, [state2, onSelectColors]);
+  const props2 = {
+    header: <BottomSheetTitleHeader title={displayNameStylesEffectConfig.name} trailing={<Button variant="primary" size="sm" text={intl.string(t.XqMe3N)} onPress={callback2} />} />,
+    children: null
+  };
+  const style = [styles.swatch, ,];
+  const selected = !r52;
+  style[1] = r52 ? selected : styles.swatchSelected;
+  props2.children = <View style={styles.body}>
+    <View style={[styles.colorRowInset, styles.optionContainer]}>
+      <View style={styles.swatchWrapper}>
+        <Pressable style={style} onPress={callback4} accessibilityRole="button" accessibilityState={{
+          selected
+        }} accessibilityLabel={intl.string(t["FHBa/1"])}>
+          {r52 ? <View style={styles.customSwatchEmpty} /> : <GummyStripes colors={state2} />}
+          <View style={styles.customIconOverlay} pointerEvents="none">
+            <View style={styles.customIconScrim}>
+              <PencilIcon color="white" size="sm" />
+            </View>
+          </View>
+        </Pressable>
+      </View>
+      {DISPLAY_NAME_STYLES_GUMMY_PRESETS.map((item, index) => {
+        const selected = c21176_8 === index;
+        return <View key={index} style={styles.swatchWrapper}>
+          <Pressable style={[styles.swatch, selected && styles.swatchSelected]} onPress={() => callback(item)} accessibilityRole="button" accessibilityState={{
+            selected
+          }}>
+            <GummyStripes colors={item} />
+          </Pressable>
+        </View>;
+      })}
+    </View>
+    <Button text={intl.string(t.yBZMsQ)} onPress={callback3} variant="secondary" />
+  </View>;
+  return <BottomSheet {...props2} />;
+};

modules/display_name_styles/native/DisplayNameStylesGummyCustomColorSheet.tsx

@@ -0,0 +1,65 @@
+// Metro module 14362 (f14363).
+import { useCallback } from "react";
+import { View } from "react-native";
+import { DISPLAY_NAME_STYLES_GUMMY_HUE_LIGHTNESS, DISPLAY_NAME_STYLES_GUMMY_HUE_SATURATION } from "../DisplayNameStylesConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useSharedValue } from "../../reanimated/ReanimatedRexport";
+import { wrapHue, hueToGummyColor } from "../DisplayNameStylesUtils";
+import { int2hslRaw } from "../../../_bundle/int2hslRaw";
+import { triggerHapticFeedback, HapticFeedbackTypes } from "../../haptics/HapticUtils.native";
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { intl, t } from "../../../intl/index.native";
+import { Button } from "../../../design/components/Button/native/Button.native";
+import GummyStripesFromHue from "./effects/GummyStripesFromHue";
+import HuePicker from "../../color_picker/native/HuePicker";
+const useStyles = createStyles({
+  body: {
+    paddingHorizontal: Module712.space.PX_16,
+    paddingTop: Module712.space.PX_12,
+    paddingBottom: Module712.space.PX_16,
+    gap: Module712.space.PX_16,
+    alignItems: "center"
+  },
+  huePickerInset: {
+    paddingHorizontal: Module712.space.PX_4 + 2,
+    alignSelf: "stretch"
+  },
+  previewWrapper: {
+    width: "25%",
+    padding: 2
+  },
+  preview: {
+    height: 40,
+    flexDirection: "row",
+    borderRadius: Module712.radii.sm,
+    overflow: "hidden"
+  }
+});
+export default function DisplayNameStylesGummyCustomColorSheet(props) {
+  const { initialColor, onSelect } = props;
+  const styles = useStyles();
+  const sharedValue = useSharedValue(wrapHue(int2hslRaw(initialColor).h));
+  const callback = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
+  }, []);
+  const callback2 = useCallback(() => {
+    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_MEDIUM);
+    onSelect(hueToGummyColor(sharedValue.get()));
+    ActionSheetActionCreators.hideActionSheet();
+  }, [sharedValue, onSelect]);
+  return <BottomSheet header={<BottomSheetTitleHeader title={intl.string(t.WTqQ5e)} trailing={<Button variant="primary" size="sm" text={intl.string(t.XqMe3N)} onPress={callback2} />} />}>
+    <View style={styles.body}>
+      <View style={styles.previewWrapper}>
+        <View style={styles.preview}>
+          <GummyStripesFromHue hue={sharedValue} />
+        </View>
+      </View>
+      <View style={styles.huePickerInset}>
+        <HuePicker hue={sharedValue} onPanFinalize={callback} saturation={DISPLAY_NAME_STYLES_GUMMY_HUE_SATURATION} lightness={DISPLAY_NAME_STYLES_GUMMY_HUE_LIGHTNESS} fullWidth />
+      </View>
+    </View>
+  </BottomSheet>;
+};

modules/display_name_styles/native/UsernameWithEffects.tsx

@@ -0,0 +1,261 @@
+// Metro module 8380 (f8381).
+import * as Module19 from "react";
+import { useMemo } from "react";
+import { PixelRatio, StyleSheet, View, processColor } from "react-native";
+import { MIN_PRISM_GRADIENT_WIDTH } from "../DisplayNameStylesConstants";
+import { DisplayNameEffect } from "../../../_bundle/Module1887";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { isIOS } from "../../../_bundle/Module501";
+import { isIosFabric } from "../../../utils/native/FabricUtils";
+import { EffectDisplayType } from "../types";
+import useDisplayNameStyles from "../hooks/useDisplayNameStyles";
+import { useIsDisplayNameStylesFlywheelViewersEnabled } from "../DisplayNameStylesFlywheelExperiment";
+import { applyFlywheelViewingFallback, generateColorVariants } from "../DisplayNameStylesUtils";
+import { useDisplayNameStylesEnabled } from "../hooks/useDisplayNameStylesEnabled";
+import { useDisplayNameStylesFont } from "./useDisplayNameStylesFont";
+import { useToken } from "../../../design/tokens/native/useToken";
+import { useDisplayNameStylesAccessibleColors } from "../hooks/useDisplayNameStylesAccessibleColors";
+import { TextStyleSheet, Text } from "../../../design/components/Text/native/Text";
+import { useTypographyVariantRemap } from "../../../_bundle/Module4194";
+import { getNodeText } from "../../../design/utils/shared/getNodeText";
+import PerLetterEffect from "./effects/PerLetterEffect";
+import { isNotNullish } from "../../../utils/GlobalUtils";
+import { HermesBuiltin } from "../../../_hermes/prelude";
+const r29 = {};
+r29[DisplayNameEffect.NEON] = 1;
+r29[DisplayNameEffect.TOON] = 1.6;
+r29[DisplayNameEffect.POP] = 1.2;
+let c5373_11 = r29;
+const useStyles = createStyles((a0, a1) => {
+  let r59;
+  const r19 = PixelRatio.get();
+  const r4 = 0.04 * a1;
+  const textShadowRadius = 4 + 0.12 * a1;
+  const r16 = c5373_11[DisplayNameEffect.NEON] + 0.04 * a1;
+  const r9 = c5373_11[DisplayNameEffect.TOON] + 0.04 * a1;
+  const r40 = c5373_11[DisplayNameEffect.POP] + 0.04 * a1;
+  const r47 = Math.floor(r9 / 2) / r19;
+  const neon = {
+    color: Module712.colors.WHITE,
+    textShadowColor: a0,
+    textShadowRadius,
+    textShadowOffset: {
+      width: 0,
+      height: 0
+    }
+  };
+  if (isIOS()) {
+    const top = -r16 / 2;
+    const marginVertical = -textShadowRadius;
+    r59 = {
+      top,
+      left: top,
+      padding: textShadowRadius,
+      marginVertical,
+      marginLeft: marginVertical,
+      marginRight: marginVertical - r16
+    };
+  } else {
+    r59 = {
+      left: -r16,
+      paddingRight: textShadowRadius,
+      marginRight: -textShadowRadius - r16
+    };
+  }
+  HermesBuiltin.copyDataProperties(neon, r59);
+  return {
+    neon,
+    popContainer: {
+      position: "relative",
+      top: isIOS() ? -r40 / 2 : 0,
+      left: isIOS() ? -r40 / 2 : 0,
+      marginRight: isIOS() ? -r40 : 0
+    },
+    popBackLayer: {
+      color: a0,
+      position: "absolute",
+      ...isIosFabric() ? {
+        top: 1.2 + r4
+      } : {
+        transform: [{
+          translateY: 1.2 + r4
+        }]
+      }
+    },
+    popFrontLayer: {
+      color: Module712.colors.WHITE
+    },
+    toon: {
+      color: Module712.colors.WHITE,
+      top: isIOS() ? -r9 / 2 : 0,
+      left: isIOS() ? -r9 / 2 : -r47,
+      marginRight: isIOS() ? -r9 : -r47
+    }
+  };
+});
+const r51 = Module19.memo(function({ userId, guildId, userName, effectDisplayType = EffectDisplayType.STATIC, pendingDisplayNameStyles, defaultColor, ignoreDisabledStylesSetting = false, ...props }) {
+  let r164, gradientAngle, gradientColors, gradientLength, textStrokeColor, textStrokeWidth2;
+  const styles = useDisplayNameStyles({
+    userId,
+    guildId,
+    pendingDisplayNameStyles,
+    ignoreDisabledStylesSetting
+  });
+  const displayNameStyles = applyFlywheelViewingFallback(styles, useIsDisplayNameStylesFlywheelViewersEnabled("UsernameWithEffects"));
+  const displayNameStylesEnabled = useDisplayNameStylesEnabled({
+    location: "UsernameWithEffects"
+  });
+  const displayNameStylesFont = useDisplayNameStylesFont({
+    displayNameStyles,
+    ignoreDisabledStylesSetting
+  });
+  const token = useToken(Module712.colors.BACKGROUND_BASE_LOW);
+  const token2 = useToken(Module712.colors.WHITE);
+  const displayNameStylesAccessibleColors = useDisplayNameStylesAccessibleColors({
+    displayNameStyles,
+    backgroundColor: token
+  });
+  const color = displayNameStylesAccessibleColors.length > 0 ? displayNameStylesAccessibleColors[0] : void 0;
+  let r85 = displayNameStyles?.effectId;
+  if (r85 == null) {
+    r85 = DisplayNameEffect.SOLID;
+  }
+  const r27 = color != null ? generateColorVariants(color) : null;
+  const r100 = TextStyleSheet[useTypographyVariantRemap(props.variant, false)];
+  const r104 = StyleSheet.flatten(props.style);
+  let r106 = r104?.fontSize;
+  if (r106 == null) {
+    r106 = r100?.fontSize;
+  }
+  if (r106 == null) {
+    r106 = 16;
+  }
+  let c16548_1 = r106;
+  let r29 = r104?.lineHeight;
+  if (r29 == null) {
+    r29 = r100?.lineHeight;
+  }
+  if (r29 == null) {
+    r29 = 1.25 * r106;
+  }
+  const memo = useMemo(() => {
+    let r13 = getNodeText(userName)?.length;
+    if (r13 == null) {
+      r13 = 10;
+    }
+    return r13 * c16548_1 * 0.6;
+  }, [userName, r106]);
+  const r118 = c5373_11[r85];
+  const textStrokeWidth = r118 != null ? r118 + 0.04 * r106 : void 0;
+  let r125 = r27?.main;
+  if (r125 == null) {
+    r125 = "";
+  }
+  const styles2 = useStyles(r125, r106);
+  if (!(!displayNameStylesEnabled && !ignoreDisabledStylesSetting) && styles != null) {
+    if (effectDisplayType !== EffectDisplayType.PLAIN && r27 != null) {
+      const textStyle = [props.style, displayNameStylesFont != null && {
+        fontFamily: displayNameStylesFont
+      }];
+      if (r85 === DisplayNameEffect.GUMMY) {
+        let name = getNodeText(userName);
+        if (name == null) {
+          name = "";
+        }
+        return <PerLetterEffect name={name} textStyle={textStyle} textProps={{
+          ...props,
+          gradientColors: void 0,
+          gradientLength: memo,
+          gradientMode: "clamp",
+          gradientAngle: void 0,
+          textStrokeWidth: void 0,
+          textStrokeColor: void 0
+        }} colors={displayNameStylesAccessibleColors} />;
+      }
+      L72: {
+        if (DisplayNameEffect.GRADIENT !== r85 && DisplayNameEffect.PRISM !== r85) {
+          if (DisplayNameEffect.NEON === r85) {
+            const r220 = processColor(r27?.neonStroke);
+            const r222 = r220 ?? void 0;
+            const r224 = [textStyle, styles2.neon];
+            textStrokeColor = r222;
+            gradientLength = memo;
+            r164 = r224;
+            textStrokeWidth2 = textStrokeWidth;
+            gradientAngle = void 0;
+            gradientColors = void 0;
+            break L72;
+          }
+          if (DisplayNameEffect.POP === r85) {
+            const r34 = processColor(r27?.dark2);
+            const r33 = processColor(r27?.main);
+            const r187 = r27 != null;
+            gradientLength = memo;
+            r164 = textStyle;
+            textStrokeColor = void 0;
+            textStrokeWidth2 = void 0;
+            gradientAngle = void 0;
+            gradientColors = void 0;
+            if (!r187) {
+              break L72;
+            }
+            return <View style={styles2.popContainer}>
+              <Text {...props} textStrokeWidth={textStrokeWidth} textStrokeColor={r33 ?? void 0} style={[textStyle, styles2.popBackLayer]}>{userName}</Text>
+              <Text {...props} textStrokeWidth={textStrokeWidth} textStrokeColor={r34 ?? void 0} style={[textStyle, styles2.popFrontLayer]}>{userName}</Text>
+            </View>;
+          }
+          if (DisplayNameEffect.TOON === r85) {
+            const r28 = [textStyle, styles2.toon];
+            const r172 = [processColor(token2), processColor(r27.light2), processColor(r27.light1), processColor(r27.main)];
+            const r180 = processColor(r27.toonStroke);
+            const r181 = r180 ?? void 0;
+            gradientAngle = 90;
+            textStrokeColor = r181;
+            gradientLength = r29;
+            r164 = r28;
+            textStrokeWidth2 = textStrokeWidth;
+            gradientColors = r172;
+            break L72;
+          }
+          DisplayNameEffect.SOLID;
+          r164 = [textStyle, {
+            color
+          }];
+          gradientLength = memo;
+          textStrokeColor = void 0;
+          textStrokeWidth2 = void 0;
+          gradientAngle = void 0;
+          gradientColors = void 0;
+        } else {
+          const r232 = displayNameStylesAccessibleColors.map((displayNameStylesAccessibleColor) => processColor(displayNameStylesAccessibleColor)).filter(isNotNullish);
+          const r237 = r85 === DisplayNameEffect.PRISM ? 0 : 45;
+          const PRISM = DisplayNameEffect.PRISM;
+          gradientLength = memo;
+          r164 = textStyle;
+          textStrokeColor = void 0;
+          textStrokeWidth2 = void 0;
+          gradientAngle = r237;
+          gradientColors = r232;
+          if (r85 === PRISM) {
+            const r243 = r232.length > 0 ? [...r232, r232[0]] : r232;
+            gradientLength = Math.max(memo, MIN_PRISM_GRADIENT_WIDTH);
+            gradientColors = r243;
+            r164 = textStyle;
+            textStrokeColor = void 0;
+            textStrokeWidth2 = void 0;
+            gradientAngle = r237;
+          }
+        }
+      }
+      return <Text {...props} gradientColors={gradientColors} gradientLength={gradientLength} gradientMode="clamp" style={[r164]} gradientAngle={gradientAngle} textStrokeWidth={textStrokeWidth2} textStrokeColor={textStrokeColor}>{userName}</Text>;
+    }
+    return <Text {...props} gradientLength={memo} gradientMode="clamp" style={[props.style, displayNameStylesFont != null && {
+      fontFamily: displayNameStylesFont,
+      lineHeight: void 0
+    }]} color={defaultColor}>{userName}</Text>;
+  }
+  return <Text {...props} color={defaultColor}>{userName}</Text>;
+});
+export default r51;
+export const AVERAGE_FONT_WIDTH_RATIO = 0.6;

modules/display_name_styles/native/createDisplayNameStylesMobile.tsx

@@ -0,0 +1,19 @@
+// Metro module 12392 (f12393).
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import UserStore from "../../../stores/UserStore";
+export function createDisplayNameStylesMobile(a0, a1) {
+  const currentUser = UserStore.getCurrentUser();
+  let displayNameStyles = a0.displayNameStyles;
+  if (currentUser != null && currentUser.id === a0.id) {
+    displayNameStyles = currentUser.displayNameStyles;
+  }
+  let fontId = a1 == null ? void 0 : a1.displayNameStyles?.fontId;
+  if (fontId == null) {
+    fontId = displayNameStyles?.fontId;
+  }
+  if (fontId != null && AccessibilityStore.displayNameStylesEnabled) {
+    return {
+      fontId
+    };
+  }
+}

modules/display_name_styles/native/effects/GummyStripes.tsx

@@ -0,0 +1,21 @@
+// Metro module 13716 (f13717).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { int2hex } from "../../../../_bundle/int2hslRaw";
+const useStyles = createStyles({
+  stripe: {
+    flex: 1
+  },
+  stripeOverlap: {
+    marginLeft: -1
+  }
+});
+export default function GummyStripes(props) {
+  const colors = props.colors;
+  const styles = useStyles();
+  return <>
+    {colors.map((color, index) => <View key={index} style={[styles.stripe, index > 0 && styles.stripeOverlap, {
+      backgroundColor: int2hex(color)
+    }]} />)}
+  </>;
+};

modules/display_name_styles/native/effects/GummyStripesFromHue.tsx

@@ -0,0 +1,56 @@
+// Metro module 14363 (f14364).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { GUMMY_STRIPES } from "../../DisplayNameStylesUtils";
+import ReanimatedRexport, { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import * as _ColorPickerUtils from "../../../color_picker/native/ColorPickerUtils";
+let useStyles, __initData;
+const AnimatedStripe = function AnimatedStripe(props) {
+  const { hue, shift, saturation, lightness } = props;
+  let overlap = props.overlap;
+  const styles = useStyles();
+  const c = function c() {
+    const r32 = _slicedToArray(_ColorPickerUtils.hslToRgbWorklet({
+      h: ((hue.get() + shift) % 360 + 360) % 360,
+      s: saturation,
+      l: lightness
+    }), 3);
+    return {
+      backgroundColor: `rgb(${r32[0]}, ${r32[1]}, ${r32[2]})`
+    };
+  };
+  c.__closure = {
+    hue,
+    shift,
+    hslToRgbWorklet: _ColorPickerUtils.hslToRgbWorklet,
+    saturation,
+    lightness
+  };
+  c.__workletHash = 8497009401863;
+  c.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(c);
+  const style = [styles.stripe, , ,];
+  if (overlap) {
+    overlap = styles.stripeOverlap;
+  }
+  style[1] = overlap;
+  style[2] = animatedStyle;
+  return <ReanimatedRexport.View style={style} />;
+};
+useStyles = createStyles({
+  stripe: {
+    flex: 1
+  },
+  stripeOverlap: {
+    marginLeft: -1
+  }
+});
+__initData = {
+  code: "function GummyStripesFromHueTsx1(){const{hue,shift,hslToRgbWorklet,saturation,lightness}=this.__closure;const h=((hue.get()+shift)%360+360)%360;const[r,g,b]=hslToRgbWorklet({h:h,s:saturation,l:lightness});return{backgroundColor:\"rgb(\"+r+\", \"+g+\", \"+b+\")\"};}"
+};
+export default function GummyStripesFromHue(props) {
+  const hue2 = props.hue;
+  return <>
+    {GUMMY_STRIPES.map((item, index) => <AnimatedStripe key={index} hue={hue2} shift={item.hueShift} saturation={item.saturation} lightness={item.lightness} overlap={index > 0} />)}
+  </>;
+};

modules/display_name_styles/native/effects/PerLetterEffect.tsx

@@ -0,0 +1,42 @@
+// Metro module 8387 (f8388).
+import { useMemo } from "react";
+import { Text, View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module8388 from "../../../../_bundle/Module8388";
+import { splitGraphemes } from "../../../../utils/native/StringUtils";
+import * as _Text from "../../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  container: {
+    overflow: "hidden"
+  }
+});
+export default function PerLetterEffect(props) {
+  const { name, textStyle, textProps, colors } = props;
+  const styles = useStyles();
+  const memo = useMemo(() => {
+    let c26198_0 = Module8388();
+    let c26198_1 = 0;
+    return splitGraphemes(name).map((item, index) => {
+      c26198_0.lastIndex = 0;
+      const r10 = c26198_0.test(item) || item.trim().length === 0;
+      const color = colors != null ? colors.length > 0 ? r10 ? void 0 : colors[c26198_1 % colors.length] : void 0 : void 0;
+      if (!r10) {
+        c26198_1 = c26198_1 + 1;
+      }
+      return <Text key={index} style={color != null ? {
+        color
+      } : void 0}>
+        {item}
+      </Text>;
+    });
+  }, [name, colors]);
+  let accessibilityLabel = textProps.accessibilityLabel;
+  if (accessibilityLabel == null) {
+    accessibilityLabel = name;
+  }
+  return <View style={styles.container}>
+    <_Text.Text {...textProps} textBreakStrategy="simple" accessible accessibilityLabel={accessibilityLabel} style={[textStyle, {
+      lineHeight: void 0
+    }]}>{memo}</_Text.Text>
+  </View>;
+};

modules/display_name_styles/native/showGummyCustomColorSheet.tsx

@@ -0,0 +1,7 @@
+// Metro module 14361 (f14362).
+import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
+let c10103_3 = "DisplayNameStylesGummyCustomColorSheet";
+export default function showGummyCustomColorSheet(a0) {
+  ActionSheetActionCreators.openLazy(import("./DisplayNameStylesGummyCustomColorSheet"), c10103_3, a0, "stack");
+};
+export const DISPLAY_NAME_STYLES_GUMMY_CUSTOM_COLOR_SHEET_KEY = "DisplayNameStylesGummyCustomColorSheet";

modules/display_name_styles/native/useDisplayNameStylesFont.tsx

@@ -0,0 +1,33 @@
+// Metro module 8383 (f8384).
+import { FLYWHEEL_FONTS } from "../DisplayNameStylesConstants";
+import { DisplayNameFont } from "../../../_bundle/Module1888";
+import { useDisplayNameStylesEnabled } from "../hooks/useDisplayNameStylesEnabled";
+import { useIsDisplayNameStylesFlywheelViewersEnabled } from "../DisplayNameStylesFlywheelExperiment";
+const r14 = {};
+r14[DisplayNameFont.CHERRY_BOMB] = "Sakura-Normal";
+r14[DisplayNameFont.CHICLE] = "Jellybean-Normal";
+r14[DisplayNameFont.MUSEO_MODERNO] = "Modern-Medium";
+r14[DisplayNameFont.NEO_CASTEL] = "Medieval-Normal";
+r14[DisplayNameFont.PIXELIFY] = "8Bit-Normal";
+r14[DisplayNameFont.SINISTRE] = "Vampyre-Normal";
+r14[DisplayNameFont.ZILLA_SLAB] = "Tempo-SemiBold";
+r14[DisplayNameFont.PLAYPEN_SANS] = "MonkeyBars-Bold";
+r14[DisplayNameFont.ORBITRON] = "Mainframe-Bold";
+r14[DisplayNameFont.NEW_ROCKER] = "Headbang-Normal";
+r14[DisplayNameFont.KALAM] = "Journal-Bold";
+let c5375_3 = r14;
+export { c5375_3 as DISPLAY_NAME_STYLES_FONT_FAMILY_MAP };
+export function useDisplayNameStylesFont({ displayNameStyles, ignoreDisabledStylesSetting = false }) {
+  L7: {
+    const displayNameStylesEnabled = useDisplayNameStylesEnabled({
+      location: "useDisplayNameStylesFont-native"
+    });
+    const isDisplayNameStylesFlywheelViewersEnabled = useIsDisplayNameStylesFlywheelViewersEnabled("useDisplayNameStylesFont-native");
+    if (!(!displayNameStylesEnabled && !ignoreDisabledStylesSetting) && displayNameStyles != null) {
+      if (!isDisplayNameStylesFlywheelViewersEnabled && FLYWHEEL_FONTS.includes(displayNameStyles.fontId)) {
+        break L7;
+      }
+      return c5375_3[displayNameStyles.fontId];
+    }
+  }
+}