chore: fix ts error on LLM

apps/ledger-live-desktop/package.json

@@ -198,7 +198,7 @@
     "native-modules-tools": "workspace:*",
     "prebuild-install": "^7.1.1",
     "react-refresh": "^0.14.0",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.2.0",
     "serve-handler": "^6.1.3",
     "ts-jest": "^28.0.8",
     "vite": "^4.1.1",

apps/ledger-live-mobile/package.json

@@ -262,7 +262,7 @@
     "react-native-launch-arguments": "^4.0.1",
     "react-native-performance": "^3.1.2",
     "react-native-performance-flipper-reporter": "^3.0.0",
-    "react-test-renderer": "^18",
+    "react-test-renderer": "^18.2.0",
     "strip-ansi": "6.0.1",
     "ts-jest": "^28.0.8",
     "ts-node": "^10.4.0",

apps/ledger-live-mobile/src/__test__/test-renderer.tsx

@@ -9,7 +9,7 @@ import { i18n } from "../context/Locale";
 
 import StyleProvider from "../StyleProvider";
 
-const ProvidersWrapper: React.FC = ({ children }) => {
+const ProvidersWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <Provider store={store}>
       <StyleProvider selectedPalette="light">

apps/ledger-live-mobile/src/bridge/BridgeSyncContext.tsx

@@ -7,16 +7,18 @@ import { accountsSelector } from "../reducers/accounts";
 import { blacklistedTokenIdsSelector } from "../reducers/settings";
 import { track } from "../analytics/segment";
 import { prepareCurrency, hydrateCurrency } from "./cache";
+import { Account } from "@ledgerhq/types-live";
 
 export const BridgeSyncProvider = ({ children }: { children: React.ReactNode }) => {
   const accounts = useSelector(accountsSelector);
   const blacklistedTokenIds = useSelector(blacklistedTokenIdsSelector);
   const dispatch = useDispatch();
   const updateAccount = useCallback(
-    (accountId, updater) => dispatch(updateAccountWithUpdater({ accountId, updater })),
+    (accountId: string, updater: (arg0: Account) => Account) =>
+      dispatch(updateAccountWithUpdater({ accountId, updater })),
     [dispatch],
   );
-  const recoverError = useCallback(error => {
+  const recoverError = useCallback((error: Error) => {
     logger.critical(error);
   }, []);
   return (

apps/ledger-live-mobile/src/components/AccountGraphCard.tsx

@@ -102,7 +102,7 @@ function AccountGraphCard({
   const activeRangeIndex = ranges.findIndex(r => r.value === timeRange);
 
   const updateRange = useCallback(
-    index => {
+    (index: number) => {
       if (ranges[index]) {
         const range = ranges[index].value as PortfolioRange;
         track("timeframe_clicked", { timeframe: range });
@@ -128,8 +128,11 @@ function AccountGraphCard({
 
   const [hoveredItem, setHoverItem] = useState<Item | null>();
 
-  const mapCryptoValue = useCallback(d => d.value || 0, []);
-  const mapCounterValue = useCallback(d => (d.countervalue ? d.countervalue : 0), []);
+  const mapCryptoValue = useCallback((d: Item) => d.value || 0, []);
+  const mapCounterValue = useCallback(
+    (d: Item) => (d && "countervalue" in d ? d.countervalue : 0),
+    [],
+  );
 
   const graphColor = ensureContrast(getCurrencyColor(currency), colors.background.main);
 

apps/ledger-live-mobile/src/components/AccountSelector.tsx

@@ -47,7 +47,7 @@ const AccountSelector = ({
   );
 
   const renderList = useCallback(
-    items => {
+    (items: AccountLike[]) => {
       const formatedList = formatSearchResults(items, accounts);
 
       return (

apps/ledger-live-mobile/src/components/AnalyticsConsole/index.tsx

@@ -49,8 +49,8 @@ const AnalyticsConsole = () => {
   const handleSlidingComplete = useCallback(() => {
     setPreviewTransparent(false);
   }, []);
-  const handleSliderValueChange = useCallback(val => {
-    setTransparentHeightPercentage(Math.min(100, Math.max(0, Math.round(val))));
+  const handleSliderValueChange = useCallback((val: string | number) => {
+    setTransparentHeightPercentage(Math.min(100, Math.max(0, Math.round(val as number))));
   }, []);
 
   const { bottom } = useSafeAreaInsets();

apps/ledger-live-mobile/src/components/AnalyticsConsole/useAnalyticsEventsLog.ts

@@ -7,14 +7,15 @@ export default function useAnalyticsEventsLog(limit = 40) {
   const id = useRef(0);
   const [items, setItems] = useState<LoggableEventRenderable[]>([]);
   const addItem = useCallback(
-    item => {
+    (item: LoggableEventRenderable) => {
       setItems(currentItems => [...currentItems.slice(-(limit - 1)), item]);
     },
     [limit],
   );
   useEffect(() => {
     const subscription = trackSubject
       .pipe(map(item => ({ ...item, id: ++id.current })))
+      // @ts-expect-error RXJS being stubborn
       .subscribe(addItem);
     return () => subscription.unsubscribe();
   }, [addItem]);

apps/ledger-live-mobile/src/components/AnimatedHeader.tsx

@@ -7,6 +7,7 @@ import {
   StyleProp,
   ViewStyle,
   TextStyle,
+  LayoutChangeEvent,
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { useIsFocused } from "@react-navigation/native";
@@ -56,7 +57,7 @@ export default function AnimatedHeaderView({
   const { colors, space } = useTheme();
   const [textHeight, setTextHeight] = useState(250);
   const [isReady, setReady] = useState(false);
-  const onLayoutText = useCallback(event => {
+  const onLayoutText = useCallback((event: LayoutChangeEvent) => {
     setTextHeight(event.nativeEvent.layout.height);
     setReady(true);
   }, []);
@@ -126,7 +127,7 @@ export default function AnimatedHeaderView({
             contentContainerStyle={[styles.scrollArea]}
             testID={isFocused ? "ScrollView" : undefined}
             data={[children]}
-            renderItem={({ item, index }) => <View key={index}>{item}</View>}
+            renderItem={({ item, index }) => <View key={index}>{item as React.ReactNode}</View>}
           />
         </AnimatedView>
       )}

apps/ledger-live-mobile/src/components/AssetCentricGraphCard.tsx

@@ -87,7 +87,7 @@ function AssetCentricGraphCard({
   ];
 
   const updateTimeRange = useCallback(
-    index => {
+    (index: number) => {
       track("timeframe_clicked", {
         timeframe: timeRangeItems[index],
       });
@@ -96,7 +96,7 @@ function AssetCentricGraphCard({
     [setTimeRange, timeRangeItems],
   );
 
-  const mapCounterValue = useCallback(d => d.value || 0, []);
+  const mapCounterValue = useCallback((d: Item) => d.value || 0, []);
 
   const range = assetPortfolio.range;
   const isAvailable = assetPortfolio.balanceAvailable;

apps/ledger-live-mobile/src/components/BleDevicePairingFlow/BleDevicesScanning.tsx

@@ -73,7 +73,7 @@ const BleDevicesScanning = ({
   }, []);
 
   const onWrappedDeviceSelect = useCallback(
-    device => {
+    (device: Device) => {
       setStopBleScanning(true);
       onDeviceSelect(device);
     },

apps/ledger-live-mobile/src/components/BulletList.tsx

@@ -39,7 +39,7 @@ export class BulletItem extends PureComponent<{
   itemContainerStyle?: StyleProp<ViewStyle>;
   itemStyle?: StyleProp<ViewStyle>;
   itemTextStyle?: StyleProp<TextStyle>;
-  Bullet: React.ComponentType<unknown>;
+  Bullet: React.ComponentType<{ children: React.ReactNode }>;
 }> {
   static defaultProps = {
     Bullet,
@@ -106,7 +106,7 @@ export function BulletSmallDot() {
 class BulletList extends PureComponent<{
   list: React.ComponentProps<typeof BulletItem>["value"][];
   animated?: boolean;
-  Bullet: React.ComponentType<unknown>;
+  Bullet: React.ComponentType<{ children: React.ReactNode }>;
   itemContainerStyle?: React.ComponentProps<typeof BulletItem>["itemContainerStyle"];
   itemStyle?: React.ComponentProps<typeof BulletItem>["itemStyle"];
   style?: StyleProp<ViewStyle>;

apps/ledger-live-mobile/src/components/Carousel/index.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useMemo, useCallback, useRef, useState } from "react";
-import { ScrollView } from "react-native";
+import { NativeScrollEvent, NativeSyntheticEvent, ScrollView } from "react-native";
 import useDynamicContent from "../../dynamicContent/dynamicContent";
 import { width } from "../../helpers/normalizeSize";
 import CarouselCard from "./CarouselCard";
@@ -12,14 +12,14 @@ const Carousel = () => {
 
   const { walletCardsDisplayed } = useDynamicContent();
 
-  const onScrollEnd = useCallback(event => {
+  const onScrollEnd = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
     setCurrentPositionX(
       event.nativeEvent.contentOffset.x + event.nativeEvent.layoutMeasurement.width,
     );
   }, []);
 
   const onScrollViewContentChange = useCallback(
-    contentWidth => {
+    (contentWidth: number) => {
       if (currentPositionX > contentWidth) {
         scrollViewRef.current?.scrollToEnd({ animated: true });
       }

apps/ledger-live-mobile/src/components/CollapsibleList.tsx

@@ -19,7 +19,7 @@ import { useTheme } from "@react-navigation/native";
 import LText from "./LText";
 import Chevron from "../icons/Chevron";
 
-const renderListItem = <T,>({ item, index }: { item: T; index: number }) => (
+const renderListItem = <T extends React.ReactNode>({ item, index }: { item: T; index: number }) => (
   <View key={index}>{item}</View>
 );
 

apps/ledger-live-mobile/src/components/CounterValue.tsx

@@ -27,7 +27,7 @@ type Props = {
   placeholderProps?: unknown;
   // as we can't render View inside Text, provide ability to pass
   // wrapper component from outside
-  Wrapper?: React.ComponentType;
+  Wrapper?: React.ComponentType<{ children: React.ReactNode }>;
   subMagnitude?: number;
   joinFragmentsSeparator?: string;
   alwaysShowValue?: boolean;

apps/ledger-live-mobile/src/components/CustomImage/CustomImageBottomModal.tsx

@@ -105,7 +105,7 @@ const CustomImageBottomModal: React.FC<Props> = props => {
   }, [setDeviceHasImage, wrappedOnClose, pushToast, t]);
 
   const onError = useCallback(
-    error => {
+    (error: Error) => {
       if (error instanceof ImageDoesNotExistOnDevice) {
         if (setDeviceHasImage) {
           setDeviceHasImage(false);

apps/ledger-live-mobile/src/components/CustomImage/ImageCropper.tsx

@@ -43,7 +43,7 @@ const ImageCropper = React.forwardRef<CropView, Props>((props, ref) => {
   const { t } = useTranslation();
 
   const handleImageCrop = useCallback(
-    async res => {
+    async (res: { uri: string; width: number; height: number }) => {
       const { height, width, uri: fileUri } = res;
       if (!fileUri) {
         onError(new ImageCropError());

apps/ledger-live-mobile/src/components/CustomImage/StaxFramedLottie.tsx

@@ -15,6 +15,7 @@ export type Props = {
   lottieSource: React.ComponentProps<typeof AnimatedLottieView>["source"];
   source?: FramedImageProps["source"];
   loadingProgress?: FramedImageProps["loadingProgress"];
+  children?: React.ReactNode;
 };
 
 const StaxFramedLottie: React.FC<Props> = ({ source, lottieSource, loadingProgress }) => {

apps/ledger-live-mobile/src/components/CustomImageDeviceAction.tsx

@@ -15,6 +15,7 @@ import Button from "./wrappedUi/Button";
 import Link from "./wrappedUi/Link";
 import { screen, TrackScreen } from "../analytics";
 import { useStaxLoadImageDeviceAction } from "../hooks/deviceActions";
+import { SettingsSetLastSeenCustomImagePayload } from "../actions/types";
 
 type Props = {
   device: Device;
@@ -71,7 +72,7 @@ const CustomImageDeviceAction: React.FC<Props & { remountMe: () => void }> = ({
   }, [setIsModalOpened]);
 
   const handleResult = useCallback(
-    lastSeenCustomImage => {
+    (lastSeenCustomImage: SettingsSetLastSeenCustomImagePayload) => {
       screen("The lock screen has successfully loaded");
       dispatch(setLastSeenCustomImage(lastSeenCustomImage));
       onResult && onResult(lastSeenCustomImage);

apps/ledger-live-mobile/src/components/DoubleCountervalue.tsx

@@ -25,7 +25,7 @@ type Props = {
   placeholderProps?: unknown;
   // as we can't render View inside Text, provide ability to pass
   // wrapper component from outside
-  Wrapper?: React.ComponentType;
+  Wrapper?: React.ComponentType<{ children?: React.ReactNode }>;
   subMagnitude?: number;
   tooltipDateLabel?: React.ReactNode;
   tooltipCompareDateLabel?: React.ReactNode;

apps/ledger-live-mobile/src/components/ExternalLink.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from "react";
 import { IconsLegacy, Link as BaseLink } from "@ledgerhq/native-ui";
 import { LinkProps } from "@ledgerhq/native-ui/components/cta/Link/index";
 import { track } from "../analytics";
+import { GestureResponderEvent } from "react-native-modal";
 
 type Props = {
   disabled?: boolean;
@@ -28,7 +29,7 @@ export default function ExternalLink({
   type,
 }: Props) {
   const handlePress = useCallback(
-    nativeEvent => {
+    (nativeEvent: GestureResponderEvent) => {
       if (event) {
         track(event, ...(eventProperties ? [eventProperties] : []));
       }

apps/ledger-live-mobile/src/components/GraphCard.tsx

@@ -63,7 +63,7 @@ function GraphCard({
   const { colors } = useTheme();
 
   const updateTimeRange = useCallback(
-    index => {
+    (index: number) => {
       track("timeframe_clicked", {
         timeframe: timeRangeItems[index].value,
       });
@@ -72,7 +72,7 @@ function GraphCard({
     [setTimeRange, timeRangeItems],
   );
 
-  const mapGraphValue = useCallback(d => d.value || 0, []);
+  const mapGraphValue = useCallback((d: Item) => d.value || 0, []);
 
   const range = portfolio.range;
   const isAvailable = portfolio.balanceAvailable;

apps/ledger-live-mobile/src/components/Nft/NftGallery/NftFilterChip.tsx

@@ -3,8 +3,9 @@ import { Text } from "@ledgerhq/native-ui";
 import styled from "@ledgerhq/native-ui/components/styled";
 
 interface Props {
-  readonly onPress: () => void;
-  readonly testID?: string;
+  onPress: () => void;
+  testID?: string;
+  children?: React.ReactNode;
 }
 
 const NftFilterChip: FC<Props> = ({ onPress, children, ...rest }) => {

apps/ledger-live-mobile/src/components/Nft/NftGallery/NftFilterDrawer/NftFilterItem.tsx

@@ -12,11 +12,12 @@ import { CryptoCurrencyId } from "@ledgerhq/types-cryptoassets";
 import Switch from "../../../Switch";
 
 export type NftFilterItemProps = {
-  readonly first?: boolean;
-  readonly last?: boolean;
-  readonly leftComponent: ReactElement;
-  readonly rightComponent: ReactElement;
-  readonly onPress: () => void;
+  first?: boolean;
+  last?: boolean;
+  leftComponent: ReactElement;
+  rightComponent: ReactElement;
+  onPress: () => void;
+  children?: React.ReactNode;
 };
 
 const NftFilterItem: FC<NftFilterItemProps> = ({

apps/ledger-live-mobile/src/components/Nft/NftGallery/NftFilterDrawer/NftFilterSection.tsx

@@ -9,9 +9,10 @@ import { View } from "react-native";
 import { NftFilterItemProps } from "./NftFilterItem";
 
 type Props = {
-  readonly title: string;
-  readonly footer?: string;
-  readonly onSeeAllPress?: () => void;
+  title: string;
+  footer?: string;
+  onSeeAllPress?: () => void;
+  children?: React.ReactNode;
 };
 
 const NftFilterSection: FC<Props> = ({ title, onSeeAllPress, footer, children }) => {

apps/ledger-live-mobile/src/components/Nft/NftGallery/NftFilterDrawer/index.tsx

@@ -12,10 +12,10 @@ import { View } from "react-native";
 import QueuedDrawer from "../../../QueuedDrawer";
 
 type Props = {
-  readonly isOpen: boolean;
-  readonly onClose: () => void;
-  readonly toggleFilter: (filter: keyof NftGalleryChainFiltersState) => void;
-  readonly filters: NftGalleryChainFiltersState;
+  isOpen: boolean;
+  onClose: () => void;
+  toggleFilter: (filter: keyof NftGalleryChainFiltersState) => void;
+  filters: NftGalleryChainFiltersState;
 };
 const NftFilterDraw: FC<Props> = ({ onClose, isOpen, filters, toggleFilter }) => {
   const { t } = useTranslation();

apps/ledger-live-mobile/src/components/PerformanceConsole/index.tsx

@@ -48,8 +48,8 @@ const PerformanceConsole = () => {
   const handleSlidingComplete = useCallback(() => {
     setPreviewTransparent(false);
   }, []);
-  const handleSliderValueChange = useCallback(val => {
-    setTransparentHeightPercentage(Math.min(100, Math.max(0, Math.round(val))));
+  const handleSliderValueChange = useCallback((val: string | number) => {
+    setTransparentHeightPercentage(Math.min(100, Math.max(0, Math.round(val as number))));
   }, []);
 
   const { bottom } = useSafeAreaInsets();

apps/ledger-live-mobile/src/components/RootNavigator/MainNavigator.tsx

@@ -49,7 +49,7 @@ export default function MainNavigator() {
   );
 
   const managerLockAwareCallback = useCallback(
-    callback => {
+    (callback: () => void) => {
       // NB This is conditionally going to show the confirmation modal from the manager
       // in the event of having ongoing installs/uninstalls.
       managerNavLockCallback ? managerNavLockCallback(() => callback) : callback();

apps/ledger-live-mobile/src/components/SafeMarkdown.tsx

@@ -32,6 +32,7 @@ class SafeMarkdown extends PureComponent<
     }
 
     return (
+      // @ts-expect-error children is not on Markdown props
       <Markdown
         markdownStyles={{
           text: { ...markdownStyles.text, color: colors.darkBlue },