bugfix(LIVE-7623): typings (#4247)

* fix(LIVE-7623): typings

* fix(LIVE-7623): changeset

fix(LIVE-7623): prettier

* fix(LIVE-7623): refactor exchange body content

fix(LIVE-7623): replace types

fix(LIVE-7623): optional rateTypes

* fix(LIVE-7623): lint

* fix(LIVE-7623): spelling mistake

* fix(LIVE-7623): fix tests

* fix(LIVE-7623): remove @ts-expect-error

.changeset/tricky-crabs-raise.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+bugfix(LIVE-7623): typings improvement and remove @ts-expect-error comment

apps/ledger-live-desktop/src/renderer/modals/Platform/Exchange/CompleteExchange/Body.tsx

@@ -2,19 +2,11 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Exchange } from "@ledgerhq/live-common/exchange/platform/types";
 import { Operation, SignedOperation } from "@ledgerhq/types-live";
 import { Transaction } from "@ledgerhq/live-common/generated/types";
-import connectApp from "@ledgerhq/live-common/hw/connectApp";
-import { createAction } from "@ledgerhq/live-common/hw/actions/completeExchange";
-import { createAction as txCreateAction } from "@ledgerhq/live-common/hw/actions/transaction";
+import { TokenCurrency } from "@ledgerhq/types-cryptoassets";
 import { ModalBody } from "~/renderer/components/Modal";
 import Box from "~/renderer/components/Box";
-import DeviceAction from "~/renderer/components/DeviceAction";
-import BigSpinner from "~/renderer/components/BigSpinner";
-import ErrorDisplay from "~/renderer/components/ErrorDisplay";
 import { useBroadcast } from "~/renderer/hooks/useBroadcast";
-import completeExchange from "@ledgerhq/live-common/exchange/platform/completeExchange";
-import { TokenCurrency } from "@ledgerhq/types-cryptoassets";
-const exchangeAction = createAction(completeExchange);
-const sendAction = txCreateAction(connectApp);
+import { BodyContent } from "./BodyContent";
 
 export type Data = {
   provider: string;
@@ -25,22 +17,42 @@ export type Data = {
   onResult: (a: Operation) => void;
   onCancel: (a: Error) => void;
   exchangeType: number;
+  rateType?: number;
 };
 
 const Body = ({ data, onClose }: { data: Data; onClose?: () => void | undefined }) => {
   const { onResult, onCancel, ...exchangeParams } = data;
-
   const { fromAccount: account, fromParentAccount: parentAccount } = exchangeParams.exchange;
-  let tokenCurrency: TokenCurrency | undefined;
-  if (account.type === "TokenAccount") tokenCurrency = account.token;
-  const request = {
-    ...exchangeParams,
-  };
+  const request = { ...exchangeParams };
+
+  const tokenCurrency: TokenCurrency | undefined =
+    account.type === "TokenAccount" ? account.token : undefined;
 
   const broadcast = useBroadcast({ account, parentAccount });
   const [transaction, setTransaction] = useState<Transaction>();
   const [signedOperation, setSignedOperation] = useState<SignedOperation>();
   const [error, setError] = useState<Error>();
+
+  const signRequest = useMemo(
+    () =>
+      transaction
+        ? {
+            tokenCurrency,
+            parentAccount,
+            account,
+            transaction,
+            appName: "Exchange",
+          }
+        : null,
+    [account, parentAccount, tokenCurrency, transaction],
+  );
+
+  useEffect(() => {
+    if (error) {
+      onCancel(error);
+    }
+  }, [onCancel, error]);
+
   useEffect(() => {
     if (signedOperation) {
       broadcast(signedOperation).then(operation => {
@@ -49,69 +61,28 @@ const Body = ({ data, onClose }: { data: Data; onClose?: () => void | undefined
       }, setError);
     }
   }, [broadcast, onClose, onResult, signedOperation]);
-  useEffect(() => {
-    if (error) {
-      onCancel(error);
-    }
-  }, [onCancel, error]);
-  const signRequest = useMemo(
-    () => ({
-      tokenCurrency,
-      parentAccount,
-      account,
-      transaction,
-      appName: "Exchange",
-    }),
-    [account, parentAccount, tokenCurrency, transaction],
-  );
+
   return (
     <ModalBody
       onClose={() => {
         onCancel(new Error("Interrupted by user"));
         onClose?.();
       }}
-      render={() => {
-        return (
-          <Box alignItems={"center"} justifyContent={"center"} px={32}>
-            {error ? (
-              <ErrorDisplay error={error} />
-            ) : signedOperation ? (
-              <BigSpinner size={40} />
-            ) : !transaction ? (
-              <DeviceAction
-                key="completeExchange"
-                action={exchangeAction}
-                // TODO: the proper team should investigate why the types mismatch
-                // @ts-expect-error This type is not compatible with the one expected by the action
-                request={request}
-                onResult={result => {
-                  if ("completeExchangeError" in result) {
-                    setError(result.completeExchangeError);
-                  } else {
-                    setTransaction(result.completeExchangeResult);
-                  }
-                }}
-              />
-            ) : (
-              <DeviceAction
-                key="sign"
-                action={sendAction}
-                // TODO: the proper team should investigate why the types mismatch
-                // @ts-expect-error This type is not compatible with the one expected by the action
-                request={signRequest}
-                onResult={result => {
-                  if ("transactionSignError" in result) {
-                    setError(result.transactionSignError);
-                  } else {
-                    setSignedOperation(result.signedOperation);
-                  }
-                }}
-              />
-            )}
-          </Box>
-        );
-      }}
+      render={() => (
+        <Box alignItems={"center"} justifyContent={"center"} px={32}>
+          <BodyContent
+            error={error}
+            signRequest={signRequest}
+            signedOperation={signedOperation}
+            request={request}
+            onError={setError}
+            onOperationSigned={setSignedOperation}
+            onTransactionComplete={setTransaction}
+          />
+        </Box>
+      )}
     />
   );
 };
+
 export default Body;

apps/ledger-live-desktop/src/renderer/modals/Platform/Exchange/CompleteExchange/BodyContent.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { Exchange } from "@ledgerhq/live-common/exchange/platform/types";
+import { Account, AccountLike, SignedOperation } from "@ledgerhq/types-live";
+import { Transaction } from "@ledgerhq/live-common/generated/types";
+import connectApp from "@ledgerhq/live-common/hw/connectApp";
+import { createAction } from "@ledgerhq/live-common/hw/actions/completeExchange";
+import { createAction as txCreateAction } from "@ledgerhq/live-common/hw/actions/transaction";
+import completeExchange from "@ledgerhq/live-common/exchange/platform/completeExchange";
+import { TokenCurrency } from "@ledgerhq/types-cryptoassets";
+import DeviceAction from "~/renderer/components/DeviceAction";
+import BigSpinner from "~/renderer/components/BigSpinner";
+import ErrorDisplay from "~/renderer/components/ErrorDisplay";
+
+const exchangeAction = createAction(completeExchange);
+const sendAction = txCreateAction(connectApp);
+
+type BodyContentProps = {
+  error?: Error;
+  signedOperation?: SignedOperation;
+  signRequest?: {
+    tokenCurrency: TokenCurrency | undefined;
+    parentAccount: Account | null | undefined;
+    account: AccountLike;
+    transaction: Transaction;
+    appName: string;
+  } | null;
+  request: {
+    provider: string;
+    exchange: Exchange;
+    transaction: Transaction;
+    binaryPayload: string;
+    signature: string;
+    exchangeType: number;
+    rateType?: number;
+  };
+  onOperationSigned: (value: SignedOperation) => void;
+  onTransactionComplete: (value: Transaction) => void;
+  onError: (error: Error) => void;
+};
+
+export const BodyContent = (props: BodyContentProps) => {
+  if (props.error) {
+    return <ErrorDisplay error={props.error} />;
+  }
+
+  if (props.signedOperation) {
+    return <BigSpinner size={40} />;
+  }
+
+  if (props.signRequest) {
+    return (
+      <DeviceAction
+        key="sign"
+        action={sendAction}
+        request={props.signRequest}
+        onResult={result => {
+          if ("transactionSignError" in result) {
+            props.onError(result.transactionSignError);
+          } else {
+            props.onOperationSigned(result.signedOperation);
+          }
+        }}
+      />
+    );
+  }
+
+  return (
+    <DeviceAction
+      key="completeExchange"
+      action={exchangeAction}
+      request={props.request}
+      onResult={result => {
+        if ("completeExchangeError" in result) {
+          props.onError(result.completeExchangeError);
+        } else {
+          props.onTransactionComplete(result.completeExchangeResult);
+        }
+      }}
+    />
+  );
+};

apps/ledger-live-mobile/src/screens/Platform/exchange/CompleteExchange.tsx

@@ -67,30 +67,31 @@ const PlatformCompleteExchange: React.FC<Props> = ({
     }
   }, []);
 
-  const signRequest = useMemo(
-    () => ({
-      tokenCurrency,
-      parentAccount,
-      account,
-      transaction,
-      appName: "Exchange",
-    }),
-    [account, parentAccount, tokenCurrency, transaction],
-  );
+  const signRequest = useMemo(() => {
+    if (transaction) {
+      return {
+        tokenCurrency,
+        parentAccount,
+        account,
+        transaction,
+        appName: "Exchange",
+      };
+    }
+    return null;
+  }, [account, parentAccount, tokenCurrency, transaction]);
 
   const sendAction = useTransactionDeviceAction();
   const exchangeAction = useCompleteExchangeDeviceAction();
 
   return (
     <SafeAreaView style={styles.root}>
-      {!transaction ? (
+      {!signRequest ? (
         <DeviceActionModal
           key="completeExchange"
           device={device}
           action={exchangeAction}
           onClose={onClose}
           onResult={onCompleteExchange}
-          // @ts-expect-error Wrong types?
           request={request}
         />
       ) : (
@@ -100,7 +101,6 @@ const PlatformCompleteExchange: React.FC<Props> = ({
           action={sendAction}
           onClose={onClose}
           onResult={onSign}
-          // @ts-expect-error Wrong types?
           request={signRequest}
         />
       )}

libs/ledger-live-common/src/exchange/platform/types.ts

@@ -43,7 +43,7 @@ export type ExchangeSellRaw = {
 };
 
 interface CompleteExchangeInputCommon {
-  rateType: RateTypes;
+  rateType?: RateTypes;
   deviceId?: string;
   provider: string;
   binaryPayload: string;

libs/ledger-live-common/src/hw/actions/completeExchange.ts

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import type { Action, Device } from "./types";
 import type { AppState } from "./app";
 import { log } from "@ledgerhq/logs";
-import { Exchange } from "../../exchange/swap/types";
+import { Exchange } from "../../exchange/platform/types";
 import { Transaction } from "../../generated/types";
 
 type State = {
@@ -24,7 +24,7 @@ type CompleteExchangeRequest = {
   signature: string;
   exchange: Exchange;
   exchangeType: number;
-  rateType: number;
+  rateType?: number;
 };
 type Result =
   | {

libs/ledger-live-common/src/wallet-api/logic.ts

@@ -10,7 +10,7 @@ import { isTokenAccount, isAccount, getMainAccount } from "../account/index";
 import { Transaction } from "../generated/types";
 import { prepareMessageToSign } from "../hw/signMessage/index";
 import { getAccountBridge } from "../bridge";
-import { Exchange } from "../exchange/platform/types";
+import { Exchange } from "../exchange/swap/types";
 
 export function translateContent(content: string | TranslatableString, locale = "en"): string {
   if (!content || typeof content === "string") return content;