recs for cleaner (#1012)

components/ParsedText/ParsedText.tsx

@@ -1,35 +1,24 @@
-import { getTextStyle } from "@design-system/Text/Text.utils";
-import { useAppTheme } from "@theme/useAppTheme";
-import React, { forwardRef, memo, useMemo } from "react";
-import RNParsedText from "react-native-parsed-text";
+import React, { forwardRef, memo } from "react";
+import { TextProps as RNTextProps, StyleSheet } from "react-native";
+import RNParsedText, { ParsedTextProps } from "react-native-parsed-text";
 
-import { IParsedTextProps } from "./ParsedText.props";
+type IParsedTextProps = ParsedTextProps & {
+  parse: NonNullable<ParsedTextProps["parse"]>;
+  pressableStyle?: RNTextProps["style"];
+};
 
-const ParsedTextInner = forwardRef<RNParsedText, IParsedTextProps>(
-  (props, ref) => {
-    const { themed } = useAppTheme();
-    const styles = getTextStyle(themed, props);
-    const childThemedProps = useMemo(() => {
-      return {
-        ...props,
-        ...props.pressableStyle,
-      };
-    }, [props]);
-    const pressableStyles = getTextStyle(themed, childThemedProps);
-    const parseOptions = useMemo(
-      () =>
-        props.parse.map(({ onPress, ...rest }) => ({
-          ...rest,
-          onPress,
-          style: pressableStyles,
-        })),
-      [props.parse, pressableStyles]
-    );
+export const ParsedText = memo(
+  forwardRef<RNParsedText, IParsedTextProps>((props, ref) => {
+    const { parse, style, pressableStyle, ...rest } = props;
+
+    const parseOptions = parse.map(({ onPress, ...rest }) => ({
+      ...rest,
+      onPress,
+      style: StyleSheet.flatten([style, pressableStyle]),
+    }));
 
     return (
-      <RNParsedText {...props} parse={parseOptions} ref={ref} style={styles} />
+      <RNParsedText style={style} parse={parseOptions} ref={ref} {...rest} />
     );
-  }
+  })
 );
-
-export const ParsedText = memo(ParsedTextInner);

components/PressableProfileWithText.tsx

@@ -1,18 +1,10 @@
-import { ITextStyleProps } from "@design-system/Text/Text.props";
-import { ThemedStyle, useAppTheme } from "@theme/useAppTheme";
 import { memo, useCallback, useMemo } from "react";
-import { TextStyle } from "react-native";
 
+import { textFontWeightStyles } from "../design-system/Text/Text.styles";
+import { getTextStyle } from "../design-system/Text/Text.utils";
+import { useAppTheme } from "../theme/useAppTheme";
 import { ParsedText } from "./ParsedText/ParsedText";
 
-const $pressableStyle: ITextStyleProps = {
-  weight: "bold",
-};
-
-const $textStyle: ThemedStyle<TextStyle> = ({ colors }) => ({
-  color: colors.fill.secondary,
-});
-
 const PressableProfileWithTextInner = ({
   profileAddress,
   profileDisplay,
@@ -24,8 +16,6 @@ const PressableProfileWithTextInner = ({
   profileDisplay: string;
   profileAddress: string;
 }) => {
-  const { themed } = useAppTheme();
-
   const handlePress = useCallback(() => {
     return onPress(profileAddress);
   }, [profileAddress, onPress]);
@@ -44,13 +34,22 @@ const PressableProfileWithTextInner = ({
     [handlePress, pattern]
   );
 
+  const { themed } = useAppTheme();
+
+  const $pressableStyle = {
+    ...textFontWeightStyles.bold,
+  };
+
+  const $textStyle = getTextStyle(themed, {
+    preset: "smaller",
+    size: "xxs",
+  });
+
   return (
     <ParsedText
-      preset="smaller"
-      size="xxs"
-      style={themed($textStyle)}
-      pressableStyle={$pressableStyle}
       parse={parseOptions}
+      pressableStyle={$pressableStyle}
+      style={$textStyle}
     >
       {text}
     </ParsedText>

design-system/Text/Text.utils.ts

@@ -1,12 +1,12 @@
-import { useAppTheme } from "@theme/useAppTheme";
+import { IThemed } from "@theme/useAppTheme";
 import { StyleProp, TextStyle } from "react-native";
 
 import { IPresets, textPresets } from "./Text.presets";
 import { ITextStyleProps } from "./Text.props";
 import { textFontWeightStyles, textSizeStyles } from "./Text.styles";
 
 export const getTextStyle = (
-  themed: ReturnType<typeof useAppTheme>["themed"],
+  themed: IThemed,
   { weight, size, style: styleProp, ...props }: ITextStyleProps
 ): StyleProp<TextStyle> => {
   const preset: IPresets = props.preset ?? "body";

theme/useAppTheme.ts

@@ -151,6 +151,8 @@ interface UseAppThemeValue {
   ) => T;
 }
 
+export type IThemed = ReturnType<typeof useAppTheme>["themed"];
+
 /**
  * Custom hook that provides the app theme and utility functions for theming.
  *