yeet

modules/messages/native/emoji/CustomEmojiContent.tsx

@@ -0,0 +1,339 @@
+// Metro module 9417 (f9418).
+import { useMemo } from "react";
+import { Pressable, View } from "react-native";
+import SubscriptionRoleStore from "../../../guild_role_subscriptions/SubscriptionRoleStore";
+import SelectedGuildStore from "../../../../stores/SelectedGuildStore";
+import UserStore from "../../../../stores/UserStore";
+import { AnalyticEvents, AnalyticsPages, AnalyticsSections, UserSettingsSections } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import PremiumUtils from "../../../../utils/PremiumUtils";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import openPremiumModal from "../../../../components_native/premium/openPremiumModal";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import { useSharedMessageEmojiStyles } from "./useSharedMessageEmojiStyles";
+import { useStateFromStores } from "../../../../_bundle/Module589";
+import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
+import * as _RoleSubscriptionEmojiUtils from "../../../guild_role_subscriptions/RoleSubscriptionEmojiUtils";
+import { isPurchasableRoleSubscriptionEmoji } from "../../../guild_role_subscriptions/RoleSubscriptionEmojiUtils";
+import { EmojiTypes } from "../../../emojis/EmojiTypes";
+import { shouldHideGuildPurchaseEntryPoints } from "../../../creator_monetization_review/CreatorMonetizationRestrictionsUtils";
+import { useIsFavoriteEmoji } from "../../../emoji_picker/EmojiPickerUtils";
+import TidaWebformExperiment from "../../../guild/TidaWebformExperiment";
+import { DeveloperMode } from "../../../user_settings/UserSettings";
+import { getEmojiPopoutData, EmojiPopoutType } from "../../getEmojiPopoutMessage";
+import { openUserSettings } from "../../../user_settings/core/native/openUserSettings";
+import { useTrackOpenPopout } from "../../../emojis/useTrackOpenPopout";
+import { StarIcon } from "../../../../design/components/Icon/native/redesign/generated/StarIcon";
+import { StarOutlineIcon } from "../../../../design/components/Icon/native/redesign/generated/StarOutlineIcon";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import { unfavoriteEmoji, favoriteEmoji } from "../../../../actions/EmojiActionCreators";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { MoreHorizontalIcon } from "../../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
+import { NitroWheel } from "../../../../design/void/native";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import FastImage from "../../../../components_native/common/FastImage";
+import { handleJoinGuild } from "../../../guild/GuildUtils";
+import { FormDivider } from "../../../../design/void/Form/native/index";
+import ExpressionGuildDetails from "./ExpressionGuildDetails";
+import { EmojiGrid } from "./EmojiGrid";
+import { HermesBuiltin } from "../../../../_hermes/prelude";
+const useStyles = createStyles({
+  nitroWheel: {
+    height: 32,
+    width: 32
+  },
+  nitroWheelPurple: {
+    tintColor: Module712.colors.CONTROL_BRAND_FOREGROUND_NEW
+  },
+  emojiDescriptionWrapperOuter: {
+    flexDirection: "row",
+    flex: 1,
+    alignItems: "center",
+    gap: 8
+  },
+  starIcon: {
+    height: 32,
+    width: 32,
+    margin: 0,
+    padding: 0,
+    flex: 0
+  },
+  starIconSelected: {
+    tintColor: Module712.colors.ICON_FEEDBACK_WARNING
+  },
+  starIconUnselected: {
+    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
+  },
+  moreMenuIcon: {
+    height: 32,
+    width: 32,
+    justifyContent: "center",
+    alignItems: "center",
+    color: Module712.colors.INTERACTIVE_ICON_DEFAULT
+  },
+  bottomCtaButton: {
+    marginTop: 24
+  },
+  ctaDescriptionWrapper: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    marginTop: 8
+  },
+  betaTag: {
+    backgroundColor: Module712.colors.WHITE
+  },
+  betaTagTextAddPack: {
+    color: Module712.unsafe_rawColors.BRAND_530
+  },
+  betaTagTextRemovePack: {
+    color: Module712.unsafe_rawColors.PRIMARY_500
+  },
+  favoriteButtonContainer: {
+    paddingTop: Module712.space.PX_4
+  }
+});
+export default function CustomEmojiContent(props) {
+  let r258, r304, r305;
+  let stateFromStores2, analyticsLocations, isFavoriteEmoji, analyticsLocation;
+  const { emojiNode, sourceType, expressionSourceApplication, expressionSourceGuild, customEmojiFromJoinedGuild, hasJoinedEmojiSourceGuild, nonce } = props;
+  stateFromStores2 = void 0;
+  analyticsLocations = void 0;
+  isFavoriteEmoji = void 0;
+  analyticsLocation = void 0;
+  const r16 = {
+    ...useStyles(),
+    ...useSharedMessageEmojiStyles()
+  };
+  let c17207_4 = r16;
+  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
+  const isPremium = PremiumUtils.isPremium(stateFromStores);
+  stateFromStores2 = useStateFromStores([SelectedGuildStore], () => SelectedGuildStore.getGuildId());
+  const emojiComesFromCurrentGuild = stateFromStores2 != null && stateFromStores2 === expressionSourceGuild?.id;
+  analyticsLocations = useAnalyticsLocations().analyticsLocations;
+  const memo = useMemo(() => {
+    let r3;
+    if (customEmojiFromJoinedGuild == null) {
+      r3 = {
+        isRoleSubscriptionEmoji: false,
+        isUnusableRoleSubscriptionEmoji: false,
+        userIsRoleSubscriber: false
+      };
+    } else {
+      r3 = {
+        isRoleSubscriptionEmoji: isPurchasableRoleSubscriptionEmoji(customEmojiFromJoinedGuild),
+        isUnusableRoleSubscriptionEmoji: null,
+        userIsRoleSubscriber: null
+      };
+      let r16 = stateFromStores2;
+      if (stateFromStores2 == null) {
+        r16 = void 0;
+      }
+      r3.isUnusableRoleSubscriptionEmoji = _RoleSubscriptionEmojiUtils.isUnusableRoleSubscriptionEmoji(customEmojiFromJoinedGuild, r16);
+      r3.userIsRoleSubscriber = SubscriptionRoleStore.getUserSubscriptionRoles(customEmojiFromJoinedGuild.guildId).size > 0;
+    }
+    return r3;
+  }, [customEmojiFromJoinedGuild, stateFromStores2]);
+  const { isRoleSubscriptionEmoji, isUnusableRoleSubscriptionEmoji, userIsRoleSubscriber } = memo;
+  const r76 = isUnusableRoleSubscriptionEmoji ? customEmojiFromJoinedGuild?.type !== EmojiTypes.GUILD : !isUnusableRoleSubscriptionEmoji;
+  const shouldHideRoleSubscriptionCTA = r76 ? !r76 : shouldHideGuildPurchaseEntryPoints(customEmojiFromJoinedGuild?.guildId);
+  isFavoriteEmoji = useIsFavoriteEmoji(stateFromStores2, customEmojiFromJoinedGuild);
+  const tidaWebformEnabled = TidaWebformExperiment.useExperiment({
+    location: "CustomEmojiContent"
+  }, {
+    autoTrackExposure: false
+  }).tidaWebformEnabled;
+  const setting = DeveloperMode.useSetting();
+  let isDiscoverable = expressionSourceGuild == null ? void 0 : expressionSourceGuild.isDiscoverable();
+  if (isDiscoverable == null) {
+    isDiscoverable = false;
+  }
+  analyticsLocation = {
+    page: stateFromStores2 != null ? AnalyticsPages.GUILD_CHANNEL : AnalyticsPages.DM_CHANNEL,
+    section: AnalyticsSections.EMOJI_UPSELL_POPOUT
+  };
+  const emojiPopoutData = getEmojiPopoutData({
+    sourceType,
+    expressionSourceApplication,
+    isPremium,
+    hasJoinedEmojiSourceGuild,
+    isRoleSubscriptionEmoji,
+    isUnusableRoleSubscriptionEmoji,
+    userIsRoleSubscriber,
+    shouldHideRoleSubscriptionCTA,
+    emojiComesFromCurrentGuild,
+    isDiscoverable,
+    onOpenPremiumSettings: () => {
+      ActionSheetActionCreators.hideAllActionSheets();
+      AnalyticsUtils.track(AnalyticEvents.CLOSE_POPOUT, {
+        nonce
+      });
+      AnalyticsUtils.track(AnalyticEvents.PREMIUM_PROMOTION_OPENED, {
+        location_page: analyticsLocation.page,
+        location_section: analyticsLocation.section
+      });
+      openUserSettings({
+        screen: UserSettingsSections.PREMIUM,
+        params: {
+          analyticsLocation
+        }
+      });
+    }
+  });
+  useTrackOpenPopout({
+    emojiId: emojiNode.id,
+    currentGuildId: stateFromStores2,
+    popoutData: emojiPopoutData,
+    emojiSourceGuildId: expressionSourceGuild?.id,
+    nonce
+  });
+  const { emojiDescription, type } = emojiPopoutData;
+  const r122 = isUnusableRoleSubscriptionEmoji ? !isUnusableRoleSubscriptionEmoji : hasJoinedEmojiSourceGuild;
+  const title = hasJoinedEmojiSourceGuild ? intl.string(t.ohTzZH) : intl.string(t["eLfh+a"]);
+  const JOIN_GUILD = EmojiPopoutType.JOIN_GUILD;
+  const style = {
+    ...[EmojiPopoutType.GET_PREMIUM, EmojiPopoutType.JOIN_GUILD].includes(type) ? r16.ctaButton : r16.bottomCtaButton,
+    borderRadius: Module712.radii.xl
+  };
+  const style2 = {
+    ...r16.emojiContainer,
+    marginTop: 8
+  };
+  const r172 = [<FastImage style={r16.emojiIcon} source={{
+    uri: emojiNode.src
+  }} />, ,];
+  const r184 = [<Text variant="text-md/bold" color="mobile-text-heading-primary">
+    {`:${emojiNode.alt}:`}
+  </Text>, ,];
+  const r185 = emojiDescription != null && <Text variant="text-sm/medium">{emojiDescription}</Text>;
+  const handleAddRemoveFavorite = function handleAddRemoveFavorite() {
+    const content = function content() {
+      return <Text style={{
+        marginLeft: 8,
+        marginTop: 2
+      }} variant="text-md/bold">
+        {isFavoriteEmoji ? intl.string(t.in1rga) : intl.string(t.mE2e8A)}
+      </Text>;
+    };
+    ActionSheetActionCreators.hideAllActionSheets();
+    AnalyticsUtils.track(AnalyticEvents.CLOSE_POPOUT, {
+      nonce
+    });
+    if (isFavoriteEmoji) {
+      unfavoriteEmoji(customEmojiFromJoinedGuild);
+      ToastActionCreators.open({
+        key: "EMOJI_UNFAVORITED",
+        icon: () => {
+          const style = {};
+          HermesBuiltin.copyDataProperties(style, c17207_4.starIcon);
+          HermesBuiltin.copyDataProperties(style, c17207_4.starIconUnselected);
+          return <StarOutlineIcon style={style} />;
+        },
+        content
+      });
+    } else {
+      favoriteEmoji(customEmojiFromJoinedGuild);
+      ToastActionCreators.open({
+        key: "EMOJI_FAVORITED",
+        icon: () => {
+          const style = {};
+          HermesBuiltin.copyDataProperties(style, c17207_4.starIcon);
+          HermesBuiltin.copyDataProperties(style, c17207_4.starIconSelected);
+          return <StarIcon style={style} />;
+        },
+        content
+      });
+    }
+  };
+  r184[1] = r185;
+  const r192 = [<View style={r16.emojiDescriptionWrapper}>{r184}</View>, r122 ? tidaWebformEnabled ? null : <Pressable accessibilityLabel={isFavoriteEmoji ? intl.string(t.aBUcp3) : intl.string(t.yZFibY)} style={r16.moreMenuIcon} onPress={handleAddRemoveFavorite}>
+    {isFavoriteEmoji ? <StarIcon style={{
+      ...r16.starIcon,
+      ...r16.starIconSelected
+    }} /> : <StarOutlineIcon style={{
+      ...r16.starIcon,
+      ...r16.starIconUnselected
+    }} />}
+  </Pressable> : null, ,];
+  const r227 = tidaWebformEnabled ? setting ? <Pressable accessibilityLabel={intl.string(t.PdRCRg)} style={r16.moreMenuIcon} onPress={function handleOpenEmojiOptionsMenu() {
+    ActionSheetActionCreators.openLazy(import("./EmojiOptionsActionSheet"), "EmojiOptionsActionSheet", {
+      emojiSrc: emojiNode.src
+    }, "stack");
+  }}>
+    <MoreHorizontalIcon color={Module712.colors.INTERACTIVE_TEXT_DEFAULT} />
+  </Pressable> : null : null;
+  const showingJoinGuildCta = type === JOIN_GUILD;
+  r192[2] = r227;
+  r172[1] = <View style={r16.emojiDescriptionWrapperOuter}>{r192}</View>;
+  const r253 = [<View style={style2}>{r172}</View>, , , ,];
+  if (type === EmojiPopoutType.GET_PREMIUM) {
+    const GET_PREMIUM = EmojiPopoutType.GET_PREMIUM;
+    let r279 = null;
+    if (type === GET_PREMIUM) {
+      let shouldTintPurple = ({
+        shouldTintPurple: false
+      }).shouldTintPurple;
+      if (shouldTintPurple === void 0) {
+        shouldTintPurple = false;
+      }
+      const nitroWheel = r16.nitroWheel;
+      r279 = <View style={style}>
+        <Button icon={<NitroWheel style={shouldTintPurple ? {
+          ...nitroWheel,
+          ...r16.nitroWheelPurple
+        } : nitroWheel} />} text={emojiPopoutData.text} variant="active" size="md" grow onPress={() => {
+          if (!(stateFromStores == null || PremiumUtils.canUseEmojisEverywhere(stateFromStores))) {
+            ActionSheetActionCreators.hideAllActionSheets();
+            AnalyticsUtils.track(AnalyticEvents.CLOSE_POPOUT, {
+              nonce
+            });
+            AnalyticsUtils.track(AnalyticEvents.PREMIUM_PROMOTION_OPENED, {
+              location_page: analyticsLocation.page,
+              location_section: analyticsLocation.section
+            });
+            openPremiumModal({
+              analyticsLocation,
+              analyticsLocations
+            });
+          }
+        }} />
+      </View>;
+    }
+    r258 = r279;
+  } else {
+    r258 = showingJoinGuildCta ? <View style={style}>
+      <Button text={intl.string(t.riu2R5)} size="md" grow onPress={() => {
+        handleJoinGuild(expressionSourceGuild?.id);
+      }} />
+    </View> : null;
+  }
+  r253[1] = r258;
+  if (!hasJoinedEmojiSourceGuild) {
+    r304 = null;
+    if (isDiscoverable) {
+      r305 = expressionSourceGuild == null;
+      r304 = r305 ? null : <>
+        <FormDivider style={r16.divider} />
+        <ExpressionGuildDetails guild={expressionSourceGuild} hasJoinedGuild={hasJoinedEmojiSourceGuild} title={title} showingJoinGuildCta={showingJoinGuildCta} />
+        {hasJoinedEmojiSourceGuild ? !hasJoinedEmojiSourceGuild : <EmojiGrid expressionSourceGuild={expressionSourceGuild} doNotDisplayEmojiIds={[emojiNode.id]} />}
+      </>;
+    }
+  } else {
+    r305 = expressionSourceGuild == null;
+    r304 = r305 ? null : <>
+      <FormDivider style={r16.divider} />
+      <ExpressionGuildDetails guild={expressionSourceGuild} hasJoinedGuild={hasJoinedEmojiSourceGuild} title={title} showingJoinGuildCta={showingJoinGuildCta} />
+      {hasJoinedEmojiSourceGuild ? !hasJoinedEmojiSourceGuild : <EmojiGrid expressionSourceGuild={expressionSourceGuild} doNotDisplayEmojiIds={[emojiNode.id]} />}
+    </>;
+  }
+  r253[2] = r304;
+  r253[3] = r122 ? tidaWebformEnabled ? <>
+    {[<FormDivider style={r16.divider} />, <View style={r16.favoriteButtonContainer}>
+      <Button text={isFavoriteEmoji ? intl.string(t.Ay49KA) : intl.string(t.nNsr67)} variant={isFavoriteEmoji ? "tertiary" : "primary"} size="md" onPress={handleAddRemoveFavorite} />
+    </View>]}
+  </> : null : null;
+  return <>{r253}</>;
+};

modules/messages/native/emoji/EmojiGrid.tsx

@@ -0,0 +1,62 @@
+// Metro module 9426 (f9427).
+import { View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import EmojiUtils from "../../../../utils/EmojiUtils";
+import AvatarUtils from "../../../../utils/AvatarUtils";
+import Emoji2 from "../../../emojis/native/Emoji";
+import { useSharedMessageEmojiStyles } from "./useSharedMessageEmojiStyles";
+import chunk from "../../../../_bundle/chunk";
+import { GappedList } from "../../../guild_role_subscriptions/native/components/LayoutUtils";
+let useStyles;
+const Emoji = function Emoji(props) {
+  const guildEmoji = props.guildEmoji;
+  const styles = useStyles();
+  return <Emoji2 key={guildEmoji.id} src={guildEmoji.id == null ? EmojiUtils.getURL(guildEmoji.name) : AvatarUtils.getEmojiURL({
+    id: guildEmoji.id,
+    animated: guildEmoji.animated,
+    size: 48
+  })} fastImageStyle={styles.gridEmojiFastImage} textEmojiStyle={styles.gridEmojiText} name={guildEmoji.name} />;
+};
+useStyles = createStyles({
+  gridEmojiFastImage: {
+    height: 40,
+    width: 40,
+    borderRadius: Module712.radii.sm
+  },
+  gridEmojiText: {
+    fontSize: 18,
+    lineHeight: 44
+  },
+  emojiGridRowContainer: {
+    marginTop: 16,
+    flexDirection: "row"
+  },
+  emojiGridContainer: {
+    marginTop: 8,
+    alignItems: "center"
+  }
+});
+export function EmojiGrid(props) {
+  const { expressionSourceGuild, doNotDisplayEmojiIds = [] } = props;
+  let c17211_0 = doNotDisplayEmojiIds;
+  const { numberToShow = 10, maxPerRow = 5 } = props;
+  const r10 = {
+    ...useSharedMessageEmojiStyles(),
+    ...useStyles()
+  };
+  let c17211_1 = r10;
+  let r24 = expressionSourceGuild?.emojis;
+  if (r24 == null) {
+    r24 = [];
+  }
+  return <View style={r10.emojiGridContainer}>
+    <GappedList gap={8}>
+      {chunk(r24.slice(0, numberToShow + 1).filter((item) => !c17211_0.includes(item.id)).slice(0, numberToShow), maxPerRow).map((a0, index) => <View key={index} style={c17211_1.emojiGridRowContainer}>
+        <GappedList gap={32}>
+          {a0.map((item) => <Emoji key={item.id} guildEmoji={item} />)}
+        </GappedList>
+      </View>)}
+    </GappedList>
+  </View>;
+}

modules/messages/native/emoji/EmojiOptionsActionSheet.tsx

@@ -0,0 +1,23 @@
+// Metro module 9423 (f9424).
+import { useCallback } from "react";
+import { copy } from "../../../../utils/ClipboardUtils.native";
+import { presentCopiedToClipboard } from "../../../toast/native/ToastUtils";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import { ActionSheet } from "../../../../design/components/Sheet/native/ActionSheet.native";
+import { TableRowGroup } from "../../../../design/components/TableRow/native/TableRowGroup.native";
+import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
+import { LinkIcon } from "../../../../design/components/Icon/native/redesign/generated/LinkIcon";
+import { intl, t } from "../../../../intl/index.native";
+export default function EmojiOptionsActionSheet(props) {
+  const emojiSrc = props.emojiSrc;
+  const callback = useCallback(() => {
+    copy(emojiSrc);
+    presentCopiedToClipboard();
+    ActionSheetActionCreators.hideActionSheet();
+  }, [emojiSrc]);
+  return <ActionSheet>
+    <TableRowGroup hasIcons>
+      <TableRow icon={<LinkIcon />} label={intl.string(t.cIoudn)} onPress={callback} />
+    </TableRowGroup>
+  </ActionSheet>;
+};

modules/messages/native/emoji/ExpressionGuildDetails.tsx

@@ -0,0 +1,104 @@
+// Metro module 9425 (f9426).
+import { View } from "react-native";
+import { ExpressionSourceGuildRecord } from "../../../emojis/records/ExpressionSourceRecord";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import GuildIcon, { GuildIconSizes } from "../../../guild/native/GuildIcon";
+import AvatarUtils from "../../../../utils/AvatarUtils";
+import FastImage from "../../../../components_native/common/FastImage";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../intl/index.native";
+import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
+import { handleJoinGuild } from "../../../guild/GuildUtils";
+import GuildBadge from "../../../guild/native/GuildBadge";
+import { Icon } from "../../../../design/void/native";
+const useStyles = createStyles({
+  guildDetailsContainer: {
+    flexDirection: "column"
+  },
+  guildDetailsContent: {
+    flexDirection: "row",
+    marginTop: 8,
+    alignItems: "center"
+  },
+  guildIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: Module712.radii.sm,
+    marginRight: 12
+  },
+  guildNameAndOnlineMembers: {
+    flexDirection: "column"
+  },
+  guildNameWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginRight: 32
+  },
+  guildPartnerIcon: {
+    marginRight: 8
+  },
+  guildDescriptionSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 4
+  },
+  dotSeparator: {
+    width: 4,
+    height: 4,
+    borderRadius: Module712.radii.xs,
+    marginRight: 8,
+    marginLeft: 8,
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED
+  },
+  joinGuildButton: {
+    borderRadius: Module712.radii.sm,
+    borderColor: Module712.colors.BORDER_STRONG,
+    borderWidth: 1,
+    paddingHorizontal: 4,
+    paddingBottom: 2
+  }
+});
+export const ExpressionGuildDetails = (props) => {
+  const { guild, title, hasJoinedGuild, showingJoinGuildCta } = props;
+  const styles = useStyles();
+  const fromGuildType = ExpressionSourceGuildRecord.createFromGuildType(guild);
+  const isDiscoverable = fromGuildType.isDiscoverable();
+  const r39 = !isDiscoverable && !hasJoinedGuild ? <FastImage style={styles.guildIcon} source={AvatarUtils.getGuildIconSource({
+    id: guild.id,
+    icon: guild.icon,
+    canAnimate: true,
+    size: 32
+  })} /> : <GuildIcon style={styles.guildIcon} guild={fromGuildType} size={GuildIconSizes.XLARGE} animate />;
+  const r62 = [<Text variant="eyebrow" color="text-default">{title}</Text>, ,];
+  r62[1] = <View style={styles.guildDetailsContent}>
+    {r39}
+    <View style={styles.guildNameAndOnlineMembers}>
+      <View style={styles.guildNameWrapper}>
+        <GuildBadge guild={guild} style={styles.guildPartnerIcon} size={Icon.Sizes.REFRESH_SMALL_16} disableColor />
+        <Text variant="text-md/bold" color="mobile-text-heading-primary">{guild.name}</Text>
+      </View>
+      <View style={styles.guildDescriptionSection}>
+        {isDiscoverable && fromGuildType.presenceCount != null ? <>
+          <Text variant="text-xs/medium" color="text-default">
+            {intl.format(t["LC+S+m"], {
+              membersOnline: fromGuildType.presenceCount
+            })}
+          </Text>
+          <View style={styles.dotSeparator} />
+          {!hasJoinedGuild && !showingJoinGuildCta ? <PressableOpacity style={styles.joinGuildButton} onPress={() => handleJoinGuild(guild.id)}>
+            <Text variant="text-xs/medium" color="text-default">
+              {intl.string(t.riu2R5)}
+            </Text>
+          </PressableOpacity> : <Text variant="text-xs/medium" color="text-default">
+            {intl.string(t.inyJqO)}
+          </Text>}
+        </> : <Text variant="text-xs/medium" color="text-default">
+          {intl.string(t.H29mx4)}
+        </Text>}
+      </View>
+    </View>
+  </View>;
+  return <View style={styles.guildDetailsContainer}>{r62}</View>;
+};
+export default ExpressionGuildDetails;

modules/messages/native/emoji/MessageEmojiActionSheet.tsx

@@ -0,0 +1,57 @@
+// Metro module 9409 (f9410).
+import { View } from "react-native";
+import { AnalyticEvents } from "../../../../Constants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import { v4 } from "../../../../_bundle/Module514";
+import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
+import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
+import StandardEmojiContent from "./StandardEmojiContent";
+import { useEmojiAndSource } from "../../../emojis/hooks/useEmojiAndSource";
+import CustomEmojiContent from "./CustomEmojiContent";
+let useStyles, MessageCustomEmojiActionSheet;
+const MessageStandardEmojiActionSheet = function MessageStandardEmojiActionSheet(props) {
+  const emojiNode = props.emojiNode;
+  const styles = useStyles();
+  const nonce = v4();
+  return <BottomSheet startExpanded onDismiss={() => {
+    AnalyticsUtils.track(AnalyticEvents.CLOSE_POPOUT, {
+      nonce
+    });
+  }}>
+    <View style={styles.contentWrapper}>
+      <StandardEmojiContent emojiNode={emojiNode} nonce={nonce} />
+    </View>
+  </BottomSheet>;
+};
+MessageCustomEmojiActionSheet = function MessageCustomEmojiActionSheet(props) {
+  const emojiNode = props.emojiNode;
+  const styles = useStyles();
+  const emojiAndSource = useEmojiAndSource({
+    emojiId: emojiNode.id
+  });
+  const { sourceType, expressionSourceGuild, expressionSourceApplication, hasJoinedEmojiSourceGuild, emoji } = emojiAndSource;
+  if (emojiAndSource.isFetching) {
+    return null;
+  }
+  const nonce2 = v4();
+  return <BottomSheet startExpanded onDismiss={() => {
+    AnalyticsUtils.track(AnalyticEvents.CLOSE_POPOUT, {
+      nonce: nonce2
+    });
+  }}>
+    <View style={styles.contentWrapper}>
+      <CustomEmojiContent emojiNode={emojiNode} sourceType={sourceType} expressionSourceApplication={expressionSourceApplication} expressionSourceGuild={expressionSourceGuild} customEmojiFromJoinedGuild={emoji} hasJoinedEmojiSourceGuild={hasJoinedEmojiSourceGuild} nonce={nonce2} />
+    </View>
+  </BottomSheet>;
+};
+useStyles = createStyles({
+  contentWrapper: {
+    paddingHorizontal: 16,
+    paddingBottom: isAndroid() ? 16 : 0
+  }
+});
+export default function MessageEmojiActionSheet(props) {
+  const emojiNode = props.emojiNode;
+  return "surrogate" in emojiNode ? <MessageStandardEmojiActionSheet emojiNode={emojiNode} /> : <MessageCustomEmojiActionSheet emojiNode={emojiNode} />;
+};

modules/messages/native/emoji/StandardEmojiContent.tsx

@@ -0,0 +1,79 @@
+// Metro module 9410 (f9411).
+import { useMemo } from "react";
+import { View } from "react-native";
+import SelectedGuildStore from "../../../../stores/SelectedGuildStore";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useSharedMessageEmojiStyles } from "./useSharedMessageEmojiStyles";
+import EmojiUtils from "../../../../utils/EmojiUtils";
+import FastImage from "../../../../components_native/common/FastImage";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { useTrackOpenPopout } from "../../../emojis/useTrackOpenPopout";
+import UnicodeEmojis from "../../../emojis/UnicodeEmojis";
+import { useIsFavoriteEmoji } from "../../../emoji_picker/EmojiPickerUtils";
+import useMaybeAddReactionMarketingEasterEggNote from "../../useMaybeAddReactionMarketingEasterEggNote";
+import { intl, t } from "../../../../intl/index.native";
+import { FormDivider } from "../../../../design/void/Form/native/index";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { unfavoriteEmoji, favoriteEmoji } from "../../../../actions/EmojiActionCreators";
+let useStyles;
+const Emoji = function Emoji(props) {
+  const surrogate = props.surrogate;
+  const r7 = {
+    ...useStyles(),
+    ...useSharedMessageEmojiStyles()
+  };
+  const uRL = EmojiUtils.getURL(surrogate);
+  return <View style={r7.emojiWrapper}>
+    {uRL !== "" ? <FastImage style={r7.emojiIcon} resizeMode="contain" source={{
+      uri: uRL
+    }} /> : <Text style={r7.emojiSurrogate} variant="text-md/medium">{surrogate}</Text>}
+  </View>;
+};
+useStyles = createStyles({
+  emojiSurrogate: {
+    lineHeight: 48,
+    fontSize: 40,
+    margin: 8
+  },
+  ctaContainer: {
+    paddingTop: Module712.space.PX_4
+  }
+});
+export default function StandardEmojiContent(props) {
+  let isFavoriteEmoji;
+  const { emojiNode, nonce } = props;
+  isFavoriteEmoji = void 0;
+  const r9 = {
+    ...useStyles(),
+    ...useSharedMessageEmojiStyles()
+  };
+  const guildId = SelectedGuildStore.getGuildId();
+  useTrackOpenPopout({
+    currentGuildId: guildId,
+    nonce
+  });
+  const memo = useMemo(() => UnicodeEmojis.convertSurrogateToBase(emojiNode.surrogate), [emojiNode.surrogate]);
+  isFavoriteEmoji = useIsFavoriteEmoji(guildId, memo);
+  return <>
+    {[<View style={r9.emojiContainer}>
+      <Emoji surrogate={emojiNode.surrogate} />
+      <View style={r9.emojiDescriptionWrapper}>
+        <Text variant="text-md/bold" color="mobile-text-heading-primary">
+          {useMaybeAddReactionMarketingEasterEggNote(emojiNode.content)}
+        </Text>
+        <Text variant="text-sm/medium">
+          {intl.string(t.sXdH8c)}
+        </Text>
+      </View>
+    </View>, <FormDivider style={r9.divider} />, <View style={r9.ctaContainer}>
+      <Button text={isFavoriteEmoji ? intl.string(t.Ay49KA) : intl.string(t.nNsr67)} variant={isFavoriteEmoji ? "tertiary" : "primary"} onPress={() => {
+        if (isFavoriteEmoji) {
+          unfavoriteEmoji(memo);
+        } else {
+          favoriteEmoji(memo);
+        }
+      }} />
+    </View>]}
+  </>;
+};

modules/messages/native/emoji/useSharedMessageEmojiStyles.tsx

@@ -0,0 +1,35 @@
+// Metro module 9411 (f9412).
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+const useStyles = createStyles({
+  emojiContainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  emojiDescriptionWrapper: {
+    flexDirection: "column",
+    flex: 1
+  },
+  emojiWrapper: {
+    marginLeft: -8,
+    marginRight: 8
+  },
+  emojiIcon: {
+    width: 40,
+    height: 40,
+    marginRight: 12,
+    borderRadius: Module712.radii.sm,
+    resizeMode: "contain"
+  },
+  divider: {
+    marginTop: Module712.space.PX_16,
+    marginBottom: Module712.space.PX_16,
+    marginLeft: 0,
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    height: 0.5
+  },
+  ctaButton: {
+    marginTop: 16
+  }
+});
+export { useStyles as useSharedMessageEmojiStyles };