yeet

modules/icymi/native/info_modal/ICYMIInfoModal.tsx

@@ -0,0 +1,56 @@
+// Metro module 15336 (f15337).
+import { useMemo } from "react";
+import { useNavigatorScreens } from "../../../../design/components/Navigator/native/Navigator.native";
+import { ICYMIInfoScreens, ICYMI_INFO_MODAL_KEY } from "./ICYMIInfoModalTypes";
+import { getHeaderCloseButton, getHeaderBackButton } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
+import ICYMIInfoScreen from "./ICYMIInfoScreen";
+import { ImpressionNames } from "../../../../_bundle/Module503";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import { HeaderActionButton } from "../../../../design/components/Navigator/native/HeaderActionButton.native";
+import { intl, t } from "../../../../intl/index.native";
+import { ICYMIAnalytics } from "../../ICYMIAnalytics";
+import ICYMITopicsScreen from "./ICYMITopicsScreen";
+import ICYMIJoinGuildsScreen from "./ICYMIJoinGuildsScreen";
+import { Modal } from "../../../../design/components/Modal/native/Modal.native";
+import { StepModal } from "../../../../design/components/Modal/native/StepModal.native";
+export default function ICYMIInfoModal(props) {
+  const { extendedOnboarding, skipIntro } = props;
+  const extendedOnboarding2 = extendedOnboarding;
+  const skipIntro2 = skipIntro;
+  const navigatorScreens = useNavigatorScreens(() => {
+    const r1 = {};
+    r1[ICYMIInfoScreens.DEFAULT] = {
+      headerLeft: getHeaderCloseButton(),
+      render: () => <ICYMIInfoScreen extendedOnboarding={extendedOnboarding2} />,
+      impressionName: ImpressionNames.ICYMI_ONBOARDING_OVERVIEW,
+      impressionProperties: {
+        extended_onboarding: extendedOnboarding2
+      }
+    };
+    r1[ICYMIInfoScreens.TOPICS_CLOUD] = {
+      headerLeft: skipIntro2 ? getHeaderCloseButton(() => ModalActionCreators.popWithKey(ICYMI_INFO_MODAL_KEY)) : getHeaderBackButton(),
+      headerRight: () => skipIntro2 ? null : <HeaderActionButton text={intl.string(t["5Wxrcd"])} onPress={() => {
+        ICYMIAnalytics.trackFeedOnboardingScreenSkipped({
+          location: "topics"
+        });
+        ModalActionCreators.pop();
+      }} />,
+      render: () => <ICYMITopicsScreen />,
+      impressionName: ImpressionNames.ICYMI_ONBOARDING_TOPICS
+    };
+    r1[ICYMIInfoScreens.JOIN_GUILDS] = {
+      headerLeft: getHeaderBackButton(),
+      headerRight: () => <HeaderActionButton text={intl.string(t["5Wxrcd"])} onPress={() => {
+        ICYMIAnalytics.trackFeedOnboardingScreenSkipped({
+          location: "guilds"
+        });
+        ModalActionCreators.pop();
+      }} />,
+      render: () => <ICYMIJoinGuildsScreen />,
+      impressionName: ImpressionNames.ICYMI_ONBOARDING_SELECT_GUILDS
+    };
+    return r1;
+  }, [extendedOnboarding, skipIntro]);
+  const memo = useMemo(() => extendedOnboarding ? skipIntro ? [ICYMIInfoScreens.TOPICS_CLOUD, ICYMIInfoScreens.JOIN_GUILDS] : [ICYMIInfoScreens.DEFAULT, ICYMIInfoScreens.TOPICS_CLOUD, ICYMIInfoScreens.JOIN_GUILDS] : [ICYMIInfoScreens.DEFAULT], [extendedOnboarding, skipIntro]);
+  return extendedOnboarding ? <StepModal screens={navigatorScreens} steps={memo} initialRouteName={skipIntro ? ICYMIInfoScreens.TOPICS_CLOUD : ICYMIInfoScreens.DEFAULT} /> : <Modal screens={navigatorScreens} initialRouteName={ICYMIInfoScreens.DEFAULT} />;
+};

modules/icymi/native/info_modal/ICYMIInfoModalTypes.tsx

@@ -0,0 +1,9 @@
+// Metro module 15337 (f15338).
+const r9 = {
+  DEFAULT: "default",
+  TOPICS_CLOUD: "topics_cloud",
+  JOIN_GUILDS: "join_guilds"
+};
+export const ICYMI_INFO_MODAL_KEY = "icymi-info-modal";
+export const ICYMI_DISCOVERABLE_GUILDS_PAGE_SIZE = 48;
+export { r9 as ICYMIInfoScreens };

modules/icymi/native/info_modal/ICYMIInfoScreen.tsx

@@ -0,0 +1,228 @@
+// Metro module 15338 (f15339).
+import { useCallback, useLayoutEffect, useState } from "react";
+import { ScrollView, View } from "react-native";
+import { ThemeTypes } from "../../../../_bundle/Module505";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import useTheme from "../../../../hooks/useTheme";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import { ICYMIAnalytics } from "../../ICYMIAnalytics";
+import { maybeFetchGuildDiscoveryCategories } from "../../../global_discovery_servers/GuildDiscoveryCategoryActionCreators";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import { HeaderIconButton } from "../../../main_tabs_v2/native/shared_components/HeaderShared";
+import Module9126 from "../../../../_bundle/Module9126";
+import { intl, t } from "../../../../intl/index.native";
+import FastImage from "../../../../components_native/common/FastImage";
+import Module15341 from "../../../../_bundle/Module15341";
+import Module15342 from "../../../../_bundle/Module15342";
+import Module15343 from "../../../../_bundle/Module15343";
+import Module15344 from "../../../../_bundle/Module15344";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { ServerIcon } from "../../../../design/components/Icon/native/redesign/generated/ServerIcon";
+import { NewUserIcon } from "../../../../design/components/Icon/native/redesign/generated/NewUserIcon";
+import { CircleCheckIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
+import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+function $mk116922($env) {
+  return () => {
+    const r2 = $env;
+    navigation.navigate("topics_cloud");
+    setTimeout($mk118474(r2), 500);
+  };
+}
+function $mk118474($env) {
+  return () => (0, setState)(false);
+}
+const useStyles = createStyles({
+  container: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
+    position: "relative",
+    flex: 1
+  },
+  closeIcon: {
+    position: "absolute",
+    justifyContent: "center",
+    left: 12,
+    width: 24,
+    height: NAV_BAR_HEIGHT,
+    zIndex: 2
+  },
+  closeIconColor: {
+    backgroundColor: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY
+  },
+  bgImage: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    aspectRatio: 1.2515923566878981,
+    overflow: "visible"
+  },
+  headerImg: {
+    position: "absolute",
+    top: 16,
+    width: 361,
+    height: 240
+  },
+  flashIcon: {
+    marginBottom: 32,
+    marginTop: 132
+  },
+  subContainer: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 16
+  },
+  header: {
+    alignItems: "center",
+    paddingHorizontal: 12
+  },
+  headerText: {
+    textAlign: "center",
+    marginTop: 8
+  },
+  body: {
+    gap: 16,
+    padding: 16,
+    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
+    borderRadius: Module712.radii.lg,
+    marginTop: 40
+  },
+  divider: {
+    height: 1,
+    backgroundColor: Module712.colors.BORDER_SUBTLE,
+    marginLeft: 48
+  },
+  infoRow: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    overflow: "hidden",
+    gap: 16
+  },
+  infoIcon: {
+    padding: 8,
+    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
+    borderRadius: Module712.radii.round
+  },
+  infoText: {
+    flexShrink: 1
+  },
+  hint: {
+    margin: 12
+  },
+  footer: {
+    position: "absolute",
+    bottom: 0,
+    left: Module712.space.PX_24,
+    right: Module712.space.PX_24,
+    paddingBottom: Module712.space.PX_8
+  }
+});
+export default function ICYMIInfoScreen(props) {
+  let setState;
+  const extendedOnboarding = props.extendedOnboarding;
+  setState = void 0;
+  const styles = useStyles();
+  const safeAreaInsets_native = useSafeAreaInsets_native();
+  const { top, bottom } = safeAreaInsets_native;
+  const theme = useTheme();
+  const navigation = useNavigation();
+  const callback = useCallback(async () => {
+    let c27995_0;
+    L14: {
+      c27995_0 = void 0;
+      if (extendedOnboarding) {
+        ICYMIAnalytics.trackFeedOnboardingScreenSkipped({
+          location: "overview"
+        });
+        setState(true);
+        await maybeFetchGuildDiscoveryCategories();
+        setTimeout($mk116922(c27995_0), 100);
+        break L14;
+      }
+      ModalActionCreators.pop();
+      return void 0;
+    }
+  }, [extendedOnboarding, navigation]);
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      header: () => null
+    });
+  }, [navigation]);
+  let loading;
+  [loading, setState] = useState(false);
+  const r76 = [<View style={[{
+    marginTop: top
+  }, styles.closeIcon]}>
+    <HeaderIconButton source={Module9126} onPress={() => ModalActionCreators.pop()} accessibilityLabel={intl.string(t.cpT0Cq)} color={styles.closeIconColor.backgroundColor} />
+  </View>, , ,];
+  r76[1] = <ScrollView style={[styles.container, {
+    marginBottom: bottom
+  }]}>
+    <FastImage source={{
+      uri: Module15341
+    }} style={styles.bgImage} />
+    <View style={[styles.subContainer, {
+      marginTop: top + Module712.space.PX_12
+    }]}>
+      <View style={styles.header}>
+        <FastImage source={{
+          uri: theme === ThemeTypes.LIGHT ? Module15342 : Module15343
+        }} style={styles.headerImg} />
+        <FastImage source={Module15344} style={styles.flashIcon} />
+        <Text variant="heading-xl/bold" color="mobile-text-heading-primary">
+          {intl.string(t["jnXV/V"])}
+        </Text>
+        <Text variant="text-md/normal" color="text-default" style={styles.headerText}>
+          {intl.string(t["9SjvoK"])}
+        </Text>
+      </View>
+      <View>
+        <View style={styles.body}>
+          <View style={styles.infoRow}>
+            <View style={styles.infoIcon}>
+              <ServerIcon size="sm" color="interactive-text-active" />
+            </View>
+            <Text variant="text-md/medium" color="mobile-text-heading-primary" style={styles.infoText}>
+              {intl.string(t.knxfqR)}
+            </Text>
+          </View>
+          <View style={styles.divider} />
+          <View style={styles.infoRow}>
+            <View style={styles.infoIcon}>
+              <NewUserIcon size="sm" color="interactive-text-active" />
+            </View>
+            <Text variant="text-md/medium" color="mobile-text-heading-primary" style={styles.infoText}>
+              {intl.string(t.BnUXZi)}
+            </Text>
+          </View>
+          <View style={styles.divider} />
+          <View style={styles.infoRow}>
+            <View style={styles.infoIcon}>
+              <CircleCheckIcon size="sm" color="interactive-text-active" />
+            </View>
+            <Text variant="text-md/medium" color="mobile-text-heading-primary" style={styles.infoText}>
+              {intl.string(t.itb1rh)}
+            </Text>
+          </View>
+        </View>
+        <Text variant="text-xs/medium" color="text-muted" style={styles.hint}>
+          {intl.format(t["jVS/hc"], {
+            feedbackHook: (a0, a1) => <Text key={a1} variant="text-xs/medium" color="text-link" onPress={() => ActionSheetActionCreators.openLazy(import("../ICYMIFeedbackSheet"), "ICYMIFeedbackSheet", {})}>
+              {a0}
+            </Text>
+          })}
+        </Text>
+      </View>
+    </View>
+  </ScrollView>;
+  r76[2] = <View style={[{
+    marginBottom: bottom
+  }, styles.footer]}>
+    <Button size="lg" loading={loading} text={extendedOnboarding ? intl.string(t.LhlgY9) : intl.string(t["+IrDzN"])} onPress={callback} />
+  </View>;
+  return <>{r76}</>;
+};

modules/icymi/native/info_modal/ICYMIJoinGuildsScreen.tsx

@@ -0,0 +1,310 @@
+// Metro module 15354 (f15355).
+import { useCallback, useState, useRef, useEffect } from "react";
+import { StyleSheet, View } from "react-native";
+import AccessibilityStore from "../../../a11y/AccessibilityStore";
+import GuildStore from "../../../../stores/GuildStore";
+import ICYMIPopularGuildsStore from "../../ICYMIPopularGuildsStore";
+import { GuildFeatures } from "../../../../Constants";
+import { createICYMIStyles } from "../createICYMIStyles";
+import Module712 from "../../../../_bundle/Module712";
+import GuildIcon, { GuildIconSizes } from "../../../guild/native/GuildIcon";
+import { ServerIcon } from "../../../../design/components/Icon/native/redesign/generated/ServerIcon";
+import ReanimatedRexport, { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import * as _timing from "../../../../design/animation/reanimated/timing/timing";
+import FastestList_android from "../../../fastest_list/FastestList.android";
+import { useStateFromStores, useStateFromStoresArray } from "../../../../_bundle/Module589";
+import AvatarUtils from "../../../../utils/AvatarUtils";
+import ClipView, { CutoutShape } from "../../../../design/components/Icon/native/ClipView";
+import FastImage from "../../../../components_native/common/FastImage";
+import { PressableHighlight } from "../../../../design/void/Pressables/native/Pressables";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import { CircleCheckIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
+import { intl, t } from "../../../../intl/index.native";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { ICYMIAnalytics } from "../../ICYMIAnalytics";
+import ICYMIActionCreators from "../../ICYMIActionCreators";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import ModalActionCreators from "../../../../actions/ModalActionCreators";
+import { ICYMI_INFO_MODAL_KEY, ICYMI_DISCOVERABLE_GUILDS_PAGE_SIZE } from "./ICYMIInfoModalTypes";
+import { MasonryFlashList } from "../../../../_bundle/noop_6676";
+let SELECTED_SERVER_SIZE_WITH_BORDER, styles, __initData, SelectedServersRow, CutoutGuildBanner, FeaturedServer;
+const SelectedServerIcon = function SelectedServerIcon(props) {
+  const { guild: guild3, index } = props;
+  const r13 = styles();
+  const r2 = index < 3;
+  return <View style={[r13.selectedServerIcon, guild3 == null && r13.noServerContainer, guild3 == null && !r2 && r13.noServerExtraContainer]}>
+    {guild3 != null ? <GuildIcon style={r13.guildIconBorder} guild={guild3} size={GuildIconSizes.LARGE} /> : r2 ? <ServerIcon size="md" color={Module712.colors.ICON_MUTED} /> : null}
+  </View>;
+};
+SelectedServersRow = function SelectedServersRow(props) {
+  let state, setState, ref;
+  const selectedGuilds = props.selectedGuilds;
+  state = void 0;
+  setState = void 0;
+  ref = void 0;
+  const r7 = styles();
+  const callback2 = useCallback((a0, a1) => <SelectedServerIcon guild={a1 < selectedGuilds.length ? selectedGuilds[a1] : void 0} index={a1} />, [selectedGuilds]);
+  [state, setState] = useState(selectedGuilds.length);
+  ref = useRef(null);
+  useEffect(() => {
+    if (state < selectedGuilds.length) {
+      const current = ref.current;
+      if (current != null) {
+        current.scrollToLocation({
+          animated: true,
+          section: 0,
+          item: selectedGuilds.length
+        });
+      }
+      setState(selectedGuilds.length);
+    } else if (state !== selectedGuilds.length) {
+      setState(selectedGuilds.length);
+    }
+  }, [state, selectedGuilds.length]);
+  const _ = function _() {
+    return {
+      opacity: _timing.withTiming(selectedGuilds.length > 0 ? 1 : 0),
+      height: _timing.withTiming(selectedGuilds.length > 0 ? SELECTED_SERVER_SIZE_WITH_BORDER : 0),
+      marginTop: _timing.withTiming(selectedGuilds.length > 0 ? Module712.space.PX_24 : 0)
+    };
+  };
+  _.__closure = {
+    withTiming: _timing.withTiming,
+    selectedGuilds,
+    SELECTED_SERVER_SIZE_WITH_BORDER,
+    tokens: Module712
+  };
+  _.__workletHash = 2911488630455;
+  _.__initData = __initData;
+  return <ReanimatedRexport.View style={[r7.selectedServersRowContainer, useAnimatedStyle(_)]}>
+    <FastestList_android ref={ref} sections={[selectedGuilds.length >= 3 ? selectedGuilds.length + 1 : 3]} insetStart={Module712.space.PX_24} insetEnd={Module712.space.PX_12} renderItem={callback2} estimatedListSize="windowSize" itemSize={SELECTED_SERVER_SIZE_WITH_BORDER + Module712.space.PX_12} horizontal listId="selected-servers-list" showsHorizontalScrollIndicator={false} />
+  </ReanimatedRexport.View>;
+};
+CutoutGuildBanner = function CutoutGuildBanner(props) {
+  const guild = props.guild;
+  const r15 = styles();
+  const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
+  const r24 = stateFromStores2 ? !stateFromStores2 : guild.features.has(GuildFeatures.ANIMATED_BANNER);
+  const source = guild.banner != null ? AvatarUtils.getAnimatableSourceWithFallback(r24, (a0) => AvatarUtils.getGuildBannerSource({
+    id: guild.id,
+    banner: guild.banner
+  }, a0)) : void 0;
+  return <View style={r15.bannerImage}>
+    <ClipView cutouts={[{
+      shape: CutoutShape.RoundedRect,
+      x: 8,
+      y: 46,
+      width: 56,
+      height: 56,
+      cornerRadius: 20
+    }]}>
+      {guild.banner != null ? <FastImage style={r15.bannerImage} source={source} resizeMode="cover" /> : <View style={[r15.bannerImage, r15.emptyBanner]} />}
+    </ClipView>
+    <GuildIcon style={[r15.guildIcon, r15.guildIconBorder]} guild={guild} size={GuildIconSizes.LARGE} animate={!stateFromStores2} />
+  </View>;
+};
+FeaturedServer = function FeaturedServer(props) {
+  const { guild: guild2, selected, loading, handlePress } = props;
+  const r10 = styles();
+  const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guild2.id) != null);
+  const callback2 = useCallback(() => {
+    handlePress(guild2);
+  }, [guild2, handlePress]);
+  const r42 = [<CutoutGuildBanner guild={guild2} />, ,];
+  const r50 = [<Text maxFontSizeMultiplier={1} style={r10.featuredServerTitle} variant="text-md/semibold" color="mobile-text-heading-primary">{guild2.name}</Text>, <Text maxFontSizeMultiplier={1} lineClamp={2} variant="text-xs/normal" color="text-default">{guild2.description}</Text>, <View style={r10.buttonContainer}>
+    <Button accessibilityHint="checkbox" accessibilityState={{
+      checked: selected
+    }} disabled={stateFromStores2} icon={selected ? <CircleCheckIcon size="sm" color={Module712.colors.CONTROL_CONNECTED_TEXT_DEFAULT} /> : void 0} text={stateFromStores2 && !loading ? intl.string(t.cEnaWx) : selected ? intl.string(t["TwueC+"]) : intl.string(t.XqMe3N)} size="sm" onPress={callback2} variant={stateFromStores2 ? "secondary" : selected ? "active" : "secondary"} grow />
+  </View>];
+  r42[1] = <View style={r10.featuredServerInnerContainer}>{r50}</View>;
+  return <PressableHighlight underlayColor={r10.pressableUnderlayColor.backgroundColor} unstable_pressDelay={50} style={r10.featuredServerContainer} onPress={callback2}>{r42}</PressableHighlight>;
+};
+SELECTED_SERVER_SIZE_WITH_BORDER = 50;
+styles = createICYMIStyles((a0) => ({
+  container: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
+    position: "relative",
+    flex: 1,
+    marginHorizontal: a0.margin
+  },
+  scrollContentContainer: {
+    paddingTop: Module712.space.PX_8
+  },
+  footer: {
+    position: "absolute",
+    bottom: 0,
+    left: Module712.space.PX_24,
+    right: Module712.space.PX_24,
+    paddingBottom: Module712.space.PX_8
+  },
+  title: {
+    marginTop: Module712.space.PX_24,
+    marginBottom: Module712.space.PX_8,
+    marginHorizontal: Module712.space.PX_24
+  },
+  subtitle: {
+    marginHorizontal: Module712.space.PX_24
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    width: "100%",
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  },
+  featuredServerContainer: {
+    borderRadius: Module712.radii.lg,
+    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
+    overflow: "hidden",
+    marginHorizontal: Module712.space.PX_8,
+    marginVertical: Module712.space.PX_8
+  },
+  featuredServerInnerContainer: {
+    marginHorizontal: Module712.space.PX_12,
+    marginTop: 36
+  },
+  buttonContainer: {
+    marginBottom: Module712.space.PX_12,
+    marginTop: a0.margin
+  },
+  featuredServerTitle: {
+    marginBottom: Module712.space.PX_8
+  },
+  guildIcon: {
+    position: "absolute",
+    top: 50,
+    left: 12
+  },
+  bannerImage: {
+    height: 73,
+    width: "100%"
+  },
+  emptyBanner: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
+  },
+  guildsScrollContainer: {
+    flex: 1,
+    marginHorizontal: Module712.space.PX_8
+  },
+  guildsColumn: {
+    flex: 1,
+    flexDirection: "column",
+    gap: Module712.space.PX_16
+  },
+  selectedServersRowContainer: {
+    height: SELECTED_SERVER_SIZE_WITH_BORDER,
+    width: "100%",
+    marginBottom: Module712.space.PX_24
+  },
+  selectedServerIcon: {
+    flex: 1,
+    width: SELECTED_SERVER_SIZE_WITH_BORDER,
+    height: SELECTED_SERVER_SIZE_WITH_BORDER,
+    alignItems: "center",
+    justifyContent: "center",
+    borderColor: Module712.colors.BORDER_STRONG,
+    borderRadius: Module712.radii.md,
+    borderWidth: 1
+  },
+  noServerContainer: {
+    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED,
+    borderStyle: "dashed"
+  },
+  noServerExtraContainer: {
+    opacity: 0.4
+  },
+  pressableUnderlayColor: {
+    backgroundColor: Module712.colors.INTERACTIVE_BACKGROUND_ACTIVE
+  },
+  guildIconBorder: {
+    borderRadius: Module712.radii.md
+  }
+}));
+__initData = {
+  code: "function ICYMIJoinGuildsScreenTsx1(){const{withTiming,selectedGuilds,SELECTED_SERVER_SIZE_WITH_BORDER,tokens}=this.__closure;return{opacity:withTiming(selectedGuilds.length>0?1:0),height:withTiming(selectedGuilds.length>0?SELECTED_SERVER_SIZE_WITH_BORDER:0),marginTop:withTiming(selectedGuilds.length>0?tokens.space.PX_24:0)};}"
+};
+export default function ICYMIJoinGuildsScreen() {
+  let stateFromStoresArray2, stateFromStores, callback;
+  const r12 = styles();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const stateFromStoresArray = useStateFromStoresArray([ICYMIPopularGuildsStore], () => ICYMIPopularGuildsStore.getOnboardingGuilds());
+  stateFromStoresArray2 = useStateFromStoresArray([ICYMIPopularGuildsStore], () => ICYMIPopularGuildsStore.getOnboardingCategoryIds());
+  stateFromStores = useStateFromStores([ICYMIPopularGuildsStore], () => ICYMIPopularGuildsStore.getCurrentOnboardingGuildOffset());
+  const [state2, setState2] = useState(new Set());
+  let [selectedGuilds2, setState3] = useState([]);
+  const [state3, setState4] = useState(0);
+  callback = useCallback((a0) => {
+    ICYMIAnalytics.trackFeedOnboardingGuildToggled({
+      guildId: a0.id,
+      toggled: !state2.has(a0.id)
+    });
+    if (state2.has(a0.id)) {
+      setState2((prevState2) => {
+        prevState2.delete(a0.id);
+        return new Set(prevState2);
+      });
+      setState3((prevState3) => prevState3.filter((item) => a0.id !== item.id));
+    } else {
+      setState2((prevState2) => {
+        prevState2.add(a0.id);
+        return new Set(prevState2);
+      });
+      setState3((prevState3) => [...prevState3, a0]);
+    }
+  }, [state2]);
+  const [state4, setState5] = useState(false);
+  const callback2 = useCallback(async () => {
+    let c28005_0;
+    L16: {
+      c28005_0 = void 0;
+      setState5(true);
+      if (await ICYMIActionCreators.gravityJoinGuild(Array.from(state2), "icymi_info_modal")) {
+        await ICYMIActionCreators.fetchDehydrated({
+          isReloading: true,
+          forceRefresh: true
+        });
+        await ICYMIActionCreators.reloadICYMITab();
+        ICYMIActionCreators.getGuildChannelScores();
+        ICYMIActionCreators.getRecommendedGuilds();
+        ModalActionCreators.popWithKey(ICYMI_INFO_MODAL_KEY);
+        break L16;
+      }
+      ToastActionCreators.open({
+        key: "ICYMIInfoModal",
+        content: intl.string(t.CG4Hks)
+      });
+      ICYMIActionCreators.fetchDehydrated();
+      ICYMIActionCreators.getGuildChannelScores();
+      ICYMIActionCreators.getRecommendedGuilds();
+      ModalActionCreators.popWithKey(ICYMI_INFO_MODAL_KEY);
+      return void 0;
+    }
+  }, [state2]);
+  const callback3 = useCallback(() => {
+    if (!(state3 > stateFromStores) && !(stateFromStoresArray.length >= 150)) {
+      const r13 = stateFromStores + ICYMI_DISCOVERABLE_GUILDS_PAGE_SIZE;
+      setState4(r13);
+      ICYMIActionCreators.fetchPopularGuildsFromCategories(stateFromStoresArray2, r13);
+    }
+  }, [stateFromStoresArray2, stateFromStores, state3, stateFromStoresArray.length]);
+  const callback4 = useCallback(({ item }) => <FeaturedServer key={item.id} guild={item} loading={state4} selected={state2.has(item.id)} handlePress={callback} />, [state4, state2, callback]);
+  return <>
+    <Text variant="heading-xl/semibold" color="mobile-text-heading-primary" style={r12.title}>
+      {intl.string(t["19ldCF"])}
+    </Text>
+    <Text variant="text-sm/normal" color="text-muted" style={r12.subtitle}>
+      {intl.string(t.u0KPUS)}
+    </Text>
+    <SelectedServersRow selectedGuilds={selectedGuilds2} />
+    <View style={r12.separator} />
+    <View style={r12.guildsScrollContainer}>
+      <MasonryFlashList data={stateFromStoresArray} extraData={state2} contentContainerStyle={r12.scrollContentContainer} contentInset={{
+        bottom: 72 + bottom
+      }} numColumns={2} onEndReached={callback3} onEndReachedThreshold={0.5} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} renderItem={callback4} />
+    </View>
+    {state2.size >= 1 && <View style={[{
+      marginBottom: bottom
+    }, r12.footer]}>
+      <Button loading={state4} size="lg" text={intl.string(t.K50GHd)} onPress={callback2} />
+    </View>}
+  </>;
+};

modules/icymi/native/info_modal/ICYMITopicsScreen.tsx

@@ -0,0 +1,144 @@
+// Metro module 15346 (f15347).
+import { useState, useCallback } from "react";
+import { ScrollView, View, StyleSheet } from "react-native";
+import GuildDiscoveryCategoryStore from "../../../global_discovery_servers/GuildDiscoveryCategoryStore";
+import { GuildPrimaryCategory } from "../../../guild_settings/discovery/GuildSettingsDiscoveryConstants";
+import { GameControllerIcon } from "../../../../design/components/Icon/native/redesign/generated/GameControllerIcon";
+import { TvIcon } from "../../../../design/components/Icon/native/redesign/generated/TvIcon";
+import { ForumIcon } from "../../../../design/components/Icon/native/redesign/generated/ForumIcon";
+import { ScienceIcon } from "../../../../design/components/Icon/native/redesign/generated/ScienceIcon";
+import { MusicIcon } from "../../../../design/components/Icon/native/redesign/generated/MusicIcon";
+import { BookCheckIcon } from "../../../../design/components/Icon/native/redesign/generated/BookCheckIcon";
+import { PaintPaletteIcon } from "../../../../design/components/Icon/native/redesign/generated/PaintPaletteIcon";
+import { PiggyBankIcon } from "../../../../design/components/Icon/native/redesign/generated/PiggyBankIcon";
+import { RobotIcon } from "../../../../design/components/Icon/native/redesign/generated/RobotIcon";
+import { MedalIcon } from "../../../../design/components/Icon/native/redesign/generated/MedalIcon";
+import { FoodIcon } from "../../../../design/components/Icon/native/redesign/generated/FoodIcon";
+import { PaintbrushThinIcon } from "../../../../design/components/Icon/native/redesign/generated/PaintbrushThinIcon";
+import { BicycleIcon } from "../../../../design/components/Icon/native/redesign/generated/BicycleIcon";
+import { PencilSparkleIcon } from "../../../../design/components/Icon/native/redesign/generated/PencilSparkleIcon";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import { useCheckboxA11yNative } from "../../../../_bundle/Module3907";
+import { Button } from "../../../../design/components/Button/native/Button.native";
+import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
+import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
+import ICYMIActionCreators from "../../ICYMIActionCreators";
+import ToastActionCreators from "../../../toast/native/ToastActionCreators";
+import { intl, t } from "../../../../intl/index.native";
+import { useStateFromStoresArray } from "../../../../_bundle/Module589";
+import { ICYMIAnalytics } from "../../ICYMIAnalytics";
+import { Text } from "../../../../design/components/Text/native/Text";
+function $mk116923($env) {
+  return () => (0, setState2)(false);
+}
+let useStyles;
+const WordTopic = function WordTopic(props) {
+  const { topic, categoryid, selected, handlePress } = props;
+  const icon = GuildPrimaryCategory.GAMING === categoryid ? <GameControllerIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.ENTERTAINMENT === categoryid ? <TvIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.GENERAL_CHATTING === categoryid ? <ForumIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.SCIENCE_AND_TECH === categoryid ? <ScienceIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.MUSIC === categoryid ? <MusicIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.EDUCATION === categoryid ? <BookCheckIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.CREATIVE_ARTS === categoryid ? <PaintPaletteIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.FINANCE === categoryid ? <PiggyBankIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.BOTS === categoryid ? <RobotIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.SPORTS === categoryid ? <MedalIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.TRAVEL_AND_FOOD === categoryid ? <FoodIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.FASHION_AND_BEAUTY === categoryid ? <PaintbrushThinIcon size="md" color="redesign-button-tertiary-text" /> : GuildPrimaryCategory.FITNESS_AND_HEALTH === categoryid ? <BicycleIcon size="md" color="redesign-button-tertiary-text" /> : categoryid === 16 ? <PencilSparkleIcon size="md" color="redesign-button-tertiary-text" /> : void 0;
+  const checkboxA11yNative = useCheckboxA11yNative({
+    checked: selected
+  });
+  const { accessibilityRole, accessibilityState } = checkboxA11yNative;
+  return icon != null ? <Button accessibilityRole={accessibilityRole} accessibilityState={accessibilityState} variant={selected ? "primary" : "tertiary"} text={topic} onPress={() => handlePress(categoryid)} icon={icon} /> : null;
+};
+useStyles = createStyles({
+  container: {
+    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
+    flex: 1
+  },
+  footer: {
+    position: "absolute",
+    bottom: 0,
+    left: Module712.space.PX_24,
+    right: Module712.space.PX_24,
+    paddingBottom: Module712.space.PX_8
+  },
+  title: {
+    marginTop: Module712.space.PX_24,
+    marginBottom: Module712.space.PX_8,
+    marginHorizontal: Module712.space.PX_24
+  },
+  subtitle: {
+    marginBottom: Module712.space.PX_24,
+    marginHorizontal: Module712.space.PX_24
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    width: "100%",
+    backgroundColor: Module712.colors.BORDER_SUBTLE
+  },
+  topicsContainer: {
+    flex: 1,
+    marginHorizontal: Module712.space.PX_16,
+    flexWrap: "wrap",
+    flexDirection: "row",
+    gap: Module712.space.PX_12
+  },
+  scrollContentContainer: {
+    paddingTop: Module712.space.PX_24
+  }
+});
+export default function ICYMITopicsScreen() {
+  let callback;
+  const styles = useStyles();
+  const bottom = useSafeAreaInsets_native().bottom;
+  const [state, setState] = useState(new Set());
+  const [loading, setState2] = useState(false);
+  const navigation = useNavigation();
+  const callback2 = useCallback(async () => {
+    const r29 = void 0;
+    let c28002_1 = r29;
+    let c28002_0 = r29;
+    setState2(true);
+    await import("../../ICYMIPopularGuildsStore");
+    if (await ICYMIActionCreators.fetchPopularGuildsFromCategories(Array.from(state), 0)) {
+      navigation.push("join_guilds");
+    } else {
+      ToastActionCreators.open({
+        key: "ICYMIInfoModal",
+        content: intl.string(t.CG4Hks)
+      });
+    }
+    setTimeout($mk116923(c28002_0), 500);
+  }, [navigation, state]);
+  const stateFromStoresArray = useStateFromStoresArray([GuildDiscoveryCategoryStore], () => GuildDiscoveryCategoryStore.getAllCategories());
+  callback = useCallback((a0) => {
+    ICYMIAnalytics.trackFeedOnboardingCategoryToggled({
+      categoryId: a0,
+      toggled: !state.has(a0)
+    });
+    if (state.has(a0)) {
+      setState((prevState) => {
+        prevState.delete(a0);
+        return new Set(prevState);
+      });
+    } else {
+      setState((prevState) => {
+        prevState.add(a0);
+        return new Set(prevState);
+      });
+    }
+  }, [state]);
+  return <>
+    <Text variant="heading-xl/semibold" color="mobile-text-heading-primary" style={styles.title}>
+      {intl.string(t.Y5d99L)}
+    </Text>
+    <Text variant="text-sm/normal" color="text-muted" style={styles.subtitle}>
+      {intl.string(t.MGZsfv)}
+    </Text>
+    <View style={styles.separator} />
+    <ScrollView showsVerticalScrollIndicator={false} style={styles.container} contentContainerStyle={styles.scrollContentContainer} contentInset={{
+      bottom: 72 + bottom
+    }}>
+      <View style={styles.topicsContainer}>
+        {stateFromStoresArray.map((item) => <WordTopic key={item.categoryId} selected={state.has(item.categoryId)} topic={item.name} categoryid={item.categoryId} handlePress={callback} />)}
+      </View>
+    </ScrollView>
+    {state.size > 0 && <View style={[{
+      marginBottom: bottom
+    }, styles.footer]}>
+      <Button loading={loading} size="lg" text={intl.string(t.PDTjLN)} onPress={callback2} />
+    </View>}
+  </>;
+};