chore: react 18 + desktop ts fixes

apps/cli/package.json

@@ -60,8 +60,8 @@
     "pako": "^2.0.4",
     "qrcode-terminal": "^0.12.0",
     "qrloop": "^1.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rxjs": "^7.8.1",
     "winston": "^3.5.1",
     "ws": "^8.6.0"

apps/ledger-live-desktop/package.json

@@ -93,8 +93,8 @@
     "prop-types": "^15.8.1",
     "qrcode": "^1.4.4",
     "qrloop": "1.4.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-easy-crop": "^4.5.0",
     "react-i18next": "^13.1.2",
     "react-intersection-observer": "^8.32.4",
@@ -154,7 +154,7 @@
     "@types/invariant": "^2.2.35",
     "@types/jest": "^28.1.8",
     "@types/lodash": "^4.14.182",
-    "@types/react": "^17.0.53",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^17",
     "@types/react-lottie": "^1.2.6",
     "@types/react-motion": "^0.0.34",

apps/ledger-live-desktop/src/renderer/actions/UI.ts

@@ -1,4 +1,5 @@
 import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
+import { AppManifest } from "@ledgerhq/live-common/wallet-api/types";
 import { createAction } from "redux-actions";
 export const openInformationCenter = createAction(
   "INFORMATION_CENTER_OPEN",
@@ -30,7 +31,7 @@ export const openPlatformAppDisclaimerDrawer = createAction(
   }: {
     manifest: LiveAppManifest | undefined | null;
     disclaimerId: string;
-    next: () => void;
+    next: (manifest: AppManifest, isChecked: boolean) => void;
   }) => ({
     type: "DAPP_DISCLAIMER",
     manifest,

apps/ledger-live-desktop/src/renderer/bridge/BridgeSyncContext.tsx

@@ -9,15 +9,17 @@ import { recentlyKilledInternalProcess } from "~/renderer/reset";
 import { track } from "~/renderer/analytics/segment";
 import { prepareCurrency, hydrateCurrency } from "./cache";
 import { blacklistedTokenIdsSelector } from "~/renderer/reducers/settings";
+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: (a: Account) => Account) =>
+      dispatch(updateAccountWithUpdater(accountId, updater)),
     [dispatch],
   );
-  const recoverError = useCallback(error => {
+  const recoverError = useCallback((error: Error) => {
     const isInternalProcessError = error && error.message.includes("Internal process error");
     if (
       isInternalProcessError &&

apps/ledger-live-desktop/src/renderer/components/AnalyticsConsole/types.ts

@@ -1,5 +1,5 @@
 import { LoggableEvent } from "~/renderer/analytics/segment";
 
 export type LoggableEventRenderable = LoggableEvent & {
-  id: string;
+  id: number;
 };

apps/ledger-live-desktop/src/renderer/components/AnalyticsConsole/useAnalyticsEventsLog.ts

@@ -7,7 +7,7 @@ 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],

apps/ledger-live-desktop/src/renderer/components/Breadcrumb/AccountCrumb.tsx

@@ -21,6 +21,12 @@ import CryptoCurrencyIcon from "~/renderer/components/CryptoCurrencyIcon";
 import { Separator, Item, TextLink, AngleDown, Check } from "./common";
 import { setTrackingSource } from "~/renderer/analytics/TrackPage";
 
+type ItemShape = {
+  key: string;
+  label: string;
+  account: Account | SubAccount;
+};
+
 const AccountCrumb = () => {
   const history = useHistory();
   const { t } = useTranslation();
@@ -53,7 +59,7 @@ const AccountCrumb = () => {
     [parentId, account, accounts],
   );
 
-  const renderItem = useCallback(({ item, isActive }) => {
+  const renderItem = useCallback(({ item, isActive }: { item: ItemShape; isActive: boolean }) => {
     const currency = getAccountCurrency(item.account);
     return (
       <Item key={item.key} isActive={isActive}>
@@ -71,7 +77,7 @@ const AccountCrumb = () => {
   }, []);
 
   const onAccountSelected = useCallback(
-    item => {
+    (item: ItemShape) => {
       if (!item) {
         return;
       }

apps/ledger-live-desktop/src/renderer/components/Breadcrumb/AssetCrumb.tsx

@@ -12,13 +12,21 @@ import CryptoCurrencyIcon from "~/renderer/components/CryptoCurrencyIcon";
 import { Separator, Item, TextLink, AngleDown, Check } from "./common";
 import { setTrackingSource } from "~/renderer/analytics/TrackPage";
 import { DistributionItem } from "@ledgerhq/types-live";
+import { CryptoCurrency, TokenCurrency } from "@ledgerhq/types-cryptoassets";
+
+type ItemShape = {
+  key: string;
+  label: string;
+  currency: CryptoCurrency | TokenCurrency;
+};
+
 export default function AssetCrumb() {
   const { t } = useTranslation();
   const distribution = useDistribution();
   const history = useHistory();
   const { assetId } = useParams<{ assetId?: string }>();
   const renderItem = useCallback(
-    ({ item, isActive }) => (
+    ({ item, isActive }: { item: ItemShape; isActive: boolean }) => (
       <Item key={item.currency.id} isActive={isActive}>
         <CryptoCurrencyIcon size={16} currency={item.currency} />
         <Text ff={`Inter|${isActive ? "SemiBold" : "Regular"}`} fontSize={4}>
@@ -34,7 +42,7 @@ export default function AssetCrumb() {
     [],
   );
   const onAccountSelected = useCallback(
-    item => {
+    (item: ItemShape) => {
       if (!item) {
         return;
       }

apps/ledger-live-desktop/src/renderer/components/Breadcrumb/NFTCrumb.tsx

@@ -59,7 +59,7 @@ const NFTCrumb = () => {
     [collectionAddress, items],
   );
   const onCollectionSelected = useCallback(
-    item => {
+    (item: DropDownItemType<ProtoNFT>) => {
       if (!item) return;
       setTrackingSource("NFT breadcrumb");
       history.push({

apps/ledger-live-desktop/src/renderer/components/Carousel/helpers.tsx

@@ -187,7 +187,7 @@ export const useDefaultSlides = (): {
   }, []);
 
   const logSlideImpression = useCallback(
-    index => {
+    (index: number) => {
       if (portfolioCards && portfolioCards.length > index) {
         const slide = portfolioCards[index];
         if (slide?.id) {
@@ -203,7 +203,7 @@ export const useDefaultSlides = (): {
   );
 
   const logSlideClick = useCallback(
-    cardId => {
+    (cardId: string) => {
       const currentCard = cachedContentCards.find(card => card.id === cardId);
 
       if (currentCard) {

apps/ledger-live-desktop/src/renderer/components/Carousel/index.tsx

@@ -180,7 +180,7 @@ const Carousel = ({
   }, [logSlideImpression]);
 
   const changeVisibleSlide = useCallback(
-    index => {
+    (index: number) => {
       setIndex(index);
       logSlideImpression(index);
     },
@@ -190,7 +190,7 @@ const Carousel = ({
   const dispatch = useDispatch();
 
   const onChooseSlide = useCallback(
-    newIndex => {
+    (newIndex: number) => {
       setReverse(index > newIndex);
       changeVisibleSlide(newIndex);
     },

apps/ledger-live-desktop/src/renderer/components/CheckBox.tsx

@@ -86,7 +86,7 @@ type Props = {
 function CheckBox({ label, ...props }: Props) {
   const { isChecked, onChange, isRadio, disabled } = props;
   const onClick = useCallback(
-    e => {
+    (e: React.SyntheticEvent) => {
       if (!onChange) return;
       e.stopPropagation();
       onChange && onChange(!isChecked);

apps/ledger-live-desktop/src/renderer/components/CustomImage/CustomImageDeviceAction.tsx

@@ -76,7 +76,7 @@ const CustomImageDeviceAction: React.FC<Props> = withRemountableWrapper(props =>
   }, [onStart, validDevice]);
 
   const handleResult = useCallback(
-    lastSeenCustomImage => {
+    (lastSeenCustomImage: { imageSize: number; imageHash: string }) => {
       if (onResult && validDevice) {
         dispatch(setLastSeenCustomImage(lastSeenCustomImage));
         onResult();

apps/ledger-live-desktop/src/renderer/components/CustomImage/ImageCropper.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { SyntheticEvent, useCallback, useEffect, useRef, useState } from "react";
 import { ImageBase64Data, ImageDimensions } from "./types";
 import { useDebounce } from "@ledgerhq/live-common/hooks/useDebounce";
 import { Button, Flex, IconsLegacy } from "@ledgerhq/react-ui";
@@ -122,6 +122,11 @@ async function cropAndResizeImage(
   };
 }
 
+type CropState = {
+  x: number;
+  y: number;
+};
+
 const ImageCropper: React.FC<Props> = props => {
   const {
     imageBase64DataUri,
@@ -135,7 +140,7 @@ const ImageCropper: React.FC<Props> = props => {
 
   const track = useTrack();
 
-  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [crop, setCrop] = useState<CropState>({ x: 0, y: 0 });
   const [completeCropPixel, setCompleteCropPixel] = useState<Crop>();
 
   const imageUuid = imageBase64DataUri;
@@ -187,7 +192,7 @@ const ImageCropper: React.FC<Props> = props => {
   }, [track, setLoading, rotationIncrements]);
 
   const handleCropChange = useCallback(
-    crop => {
+    (crop: CropState) => {
       setCrop(crop);
     },
     [setCrop],
@@ -205,20 +210,20 @@ const ImageCropper: React.FC<Props> = props => {
      * then it will never trigger onCropComplete, so until further interaction
      * the loading state will be kept on (infinite loading).
      */
-    e => !((zoom === 1 && e.deltaY > 0) || (zoom === MAX_ZOOM && e.deltaY < 0)),
+    (e: WheelEvent) => !((zoom === 1 && e.deltaY > 0) || (zoom === MAX_ZOOM && e.deltaY < 0)),
     [zoom],
   );
 
   const handleCropComplete = useCallback(
-    (_, cropPixel) => {
+    (_: unknown, cropPixel: Crop) => {
       setCompleteCropPixel(cropPixel);
       setCropParams({ crop: cropPixel, imageUuid, rotationIncrements, zoom });
     },
     [setCompleteCropPixel, imageUuid, rotationIncrements, setCropParams, zoom],
   );
 
   const handleError = useCallback(
-    e => {
+    (e: SyntheticEvent) => {
       console.error(e);
       onError(new ImageCropError());
     },

apps/ledger-live-desktop/src/renderer/components/CustomImage/ImageGrayscalePreview.tsx

@@ -207,8 +207,9 @@ const ImageGrayscalePreview: React.FC<Props> = props => {
     contrastIndex,
   ]);
 
-  const handleSourceLoaded = useCallback(
+  const handleSourceLoaded: React.ReactEventHandler<HTMLImageElement> = useCallback(
     e => {
+      // @ts-expect-error why is src not on target even though we give it HTMLImageElement
       setSourceUriLoaded(e.target.src);
     },
     [setSourceUriLoaded],

apps/ledger-live-desktop/src/renderer/components/Delegation/ValidatorRow.tsx

@@ -208,14 +208,16 @@ const ValidatorRow = ({
   className,
 }: ValidatorRowProps) => {
   const inputRef = useRef<HTMLInputElement>();
-  const onTitleClick = useCallback(
+  const onTitleClick: React.MouseEventHandler<HTMLDivElement> = useCallback(
     e => {
       e.stopPropagation();
       onExternalLink(validator.address);
     },
     [validator, onExternalLink],
   );
   const onChange = useCallback(
+    // @ts-expect-error this makes no sense as the component that uses onChange has a signature like this:
+    // onChange: (b: BigNumber, a: Unit) => void;
     e => {
       onUpdateVote && onUpdateVote(validator.address, e.toString());
     },

apps/ledger-live-desktop/src/renderer/components/DropDownSelector.tsx

@@ -87,7 +87,7 @@ const DropDownSelector = <ContentType, Item extends DropDownItemType<ContentType
   const [stateValue, setStateValue] = useState(defaultValue);
   const selectedOption = controlled ? value : stateValue;
   const setSelectedOption = useCallback(
-    item => {
+    (item: Item) => {
       if (controlled) {
         setStateValue(item);
       }
@@ -99,7 +99,7 @@ const DropDownSelector = <ContentType, Item extends DropDownItemType<ContentType
     [controlled, onChange],
   );
   const renderOption = useCallback(
-    item => {
+    (item: Item) => {
       return (
         <OptionContainer
           id={`${buttonId || ""}-${item.key}`}

apps/ledger-live-desktop/src/renderer/components/ExportLogsButton.tsx

@@ -114,7 +114,7 @@ const ExportLogsBtn = ({
     }
   }, [exporting, setExporting, exportLogs]);
   const onKeyHandle = useCallback(
-    e => {
+    (e: React.KeyboardEvent) => {
       if (e.ctrlKey) {
         handleExportLogs();
       }

apps/ledger-live-desktop/src/renderer/components/FormattedVal.tsx

@@ -39,7 +39,7 @@ I.defaultProps = {
 };
 export type OwnProps = {
   unit?: Unit;
-  val: BigNumber | number;
+  val?: BigNumber | number;
   alwaysShowSign?: boolean;
   showCode?: boolean;
   withIcon?: boolean;
@@ -89,7 +89,7 @@ function FormattedVal(props: Props) {
     ...p
   } = props;
   const valProp = props.val;
-  let val: BigNumber = valProp instanceof BigNumber ? valProp : BigNumber(valProp);
+  let val: BigNumber = valProp instanceof BigNumber ? valProp : BigNumber(valProp as number);
   invariant(val, "FormattedVal require a `val` prop. Received `undefined`");
   const isZero = val.isZero();
   const isNegative = val.isNegative() && !isZero;

apps/ledger-live-desktop/src/renderer/components/Markdown.tsx

@@ -132,7 +132,7 @@ export const Notes = styled(Box).attrs(() => ({
 `;
 export const Terms = Notes;
 type Props = {
-  children: React.ReactNode;
+  children: string;
 };
 
 export default class Markdown extends PureComponent<Props> {
@@ -156,6 +156,7 @@ export default class Markdown extends PureComponent<Props> {
     const { children } = this.props;
     return (
       <div id="terms-markdown" ref={c => (this.parent = c)}>
+        {/* @ts-expect-error ReactMarkdown being weird, also we are using v4, and v8 has been out for a while */}
         <ReactMarkdown>{children}</ReactMarkdown>
       </div>
     );

apps/ledger-live-desktop/src/renderer/components/ModalQuizz/ModalQuizz.tsx

@@ -105,7 +105,7 @@ const ModalQuizz: React.FunctionComponent<Props> = ({
   const { t } = useTranslation();
   const { colors } = useTheme();
 
-  const [userChoiceIndex, setUserChoiceIndex] = useState();
+  const [userChoiceIndex, setUserChoiceIndex] = useState<number>();
 
   const {
     title: stepTitle,
@@ -143,7 +143,7 @@ const ModalQuizz: React.FunctionComponent<Props> = ({
   }, [stepIndex, stepCount, setStepIndex, setUserChoiceIndex, score, onClose, onLose, onWin]);
 
   const onChoiceChanged = useCallback(
-    value => {
+    (value: number) => {
       if (userMadeAChoice) return;
       setUserChoiceIndex(value);
       const isCorrect = choices[value].correct;
@@ -160,6 +160,7 @@ const ModalQuizz: React.FunctionComponent<Props> = ({
       <Text variant="h5">{stepTitle}</Text>
       <Radio
         name={`quizz-${title}-step-${stepIndex}`}
+        // @ts-expect-error onChange signature is (a: string | number | readonly string[]) => void...
         onChange={onChoiceChanged}
         currentValue={userChoiceIndex}
         containerProps={{ flexDirection: "column", rowGap: 5, margin: "-10px" }}

apps/ledger-live-desktop/src/renderer/components/NavigationGuard.tsx

@@ -46,7 +46,7 @@ const NavigationGuard = ({
 
   /** show modal if needed and location to go to on confirm */
   const showModal = useCallback(
-    location => {
+    (location: Location) => {
       setModalVisible(!noModal);
       setLastLocation(location);
     },