fix: React 18 Strict errors

LedgerHQ · Oct 21, 2023 · ecba57b · ecba57b
1 parent e613a11
commit ecba57b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 31 deletions.
diff --git a/apps/ledger-live-desktop/src/renderer/hooks/useListenToHidDevices.ts b/apps/ledger-live-desktop/src/renderer/hooks/useListenToHidDevices.ts
@@ -45,8 +45,8 @@ export const useListenToHidDevices = () => {
     const timeoutSyncDevices = setTimeout(syncDevices, 1000);
 
     return () => {
-      clearTimeout(timeoutSyncDevices);
-      sub.unsubscribe();
+      clearTimeout?.(timeoutSyncDevices);
+      sub?.unsubscribe?.();
     };
   }, [dispatch]);
 

diff --git a/apps/ledger-live-desktop/src/renderer/screens/account/AccountHeaderActions.tsx b/apps/ledger-live-desktop/src/renderer/screens/account/AccountHeaderActions.tsx
@@ -54,6 +54,8 @@ type RenderActionParams = {
   disabled?: boolean;
   tooltip?: string;
   accountActionsTestId?: string;
+  contrastText: string;
+  currency: TokenCurrency | CryptoCurrency;
 };
 
 const ButtonSettings = styled(Tabbable).attrs<{ disabled?: boolean }>(() => ({
@@ -94,6 +96,36 @@ type Props = {
   openModal: Function;
 } & OwnProps;
 
+const ActionItem = ({
+  label,
+  onClick,
+  event,
+  eventProperties,
+  icon,
+  disabled,
+  tooltip,
+  accountActionsTestId,
+  contrastText,
+  currency,
+}: RenderActionParams) => {
+  const Icon = icon;
+  const Action = (
+    <ActionDefault
+      disabled={disabled}
+      onClick={onClick}
+      event={event}
+      eventProperties={eventProperties}
+      iconComponent={Icon && <Icon size={14} overrideColor={contrastText} currency={currency} />}
+      labelComponent={label}
+      accountActionsTestId={accountActionsTestId}
+    />
+  );
+  if (tooltip) {
+    return <Tooltip content={tooltip}>{Action}</Tooltip>;
+  }
+  return Action;
+};
+
 const AccountHeaderSettingsButtonComponent = ({ account, parentAccount, openModal, t }: Props) => {
   const mainAccount = getMainAccount(account, parentAccount);
   const currency = getAccountCurrency(account);
@@ -246,37 +278,11 @@ const AccountHeaderActions = ({ account, parentAccount, openModal }: Props) => {
     });
   }, [openModal, parentAccount, account, buttonSharedTrackingFields]);
 
-  const renderAction = ({
-    label,
-    onClick,
-    event,
-    eventProperties,
-    icon,
-    disabled,
-    tooltip,
-    accountActionsTestId,
-  }: RenderActionParams) => {
-    const Icon = icon;
-    const Action = (
-      <ActionDefault
-        disabled={disabled}
-        onClick={onClick}
-        event={event}
-        eventProperties={eventProperties}
-        iconComponent={Icon && <Icon size={14} overrideColor={contrastText} currency={currency} />}
-        labelComponent={label}
-        accountActionsTestId={accountActionsTestId}
-      />
-    );
-    if (tooltip) {
-      return <Tooltip content={tooltip}>{Action}</Tooltip>;
-    }
-    return Action;
-  };
-
   const manageActions: RenderActionParams[] = [
     ...manageList.map(item => ({
       ...item,
+      contrastText,
+      currency,
       eventProperties: {
         ...buttonSharedTrackingFields,
         ...item.eventProperties,
@@ -287,7 +293,9 @@ const AccountHeaderActions = ({ account, parentAccount, openModal }: Props) => {
   const buyHeader = <BuyActionDefault onClick={() => onBuySell("buy")} />;
   const sellHeader = <SellActionDefault onClick={() => onBuySell("sell")} />;
   const swapHeader = <SwapActionDefault onClick={onSwap} />;
-  const manageActionsHeader = manageActions.map(item => renderAction(item));
+  const manageActionsHeader = manageActions.map(item => (
+    <ActionItem {...item} key={item.accountActionsTestId} />
+  ));
 
   const NonEmptyAccountHeader = (
     <FadeInButtonsContainer data-test-id="account-buttons-group" show={showButtons}>