🚨 (sample) [NO-ISSUE]: Add linter to react files (#373)

LedgerHQ · Oct 8, 2024 · 8888fd0 · 8888fd0
2 parents db2e135 + eb1b5fa
commit 8888fd0
Show file tree

Hide file tree

Showing 26 changed files with 1,015 additions and 133 deletions.
diff --git a/.changeset/olive-teachers-matter.md b/.changeset/olive-teachers-matter.md
@@ -0,0 +1,5 @@
+---
+"@ledgerhq/device-sdk-sample": patch
+---
+
+Add eslint to tsx files
diff --git a/apps/sample/src/app/client-layout.tsx b/apps/sample/src/app/client-layout.tsx
@@ -9,7 +9,7 @@
  */
 "use client";
 
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { Flex, StyleProvider } from "@ledgerhq/react-ui";
 import styled, { DefaultTheme } from "styled-components";
 
@@ -19,10 +19,6 @@ import { SdkProvider } from "@/providers/DeviceSdkProvider";
 import { DeviceSessionsProvider } from "@/providers/DeviceSessionsProvider";
 import { GlobalStyle } from "@/styles/globalstyles";
 
-type ClientRootLayoutProps = {
-  children: React.ReactNode;
-};
-
 const Root = styled(Flex)`
   flex-direction: row;
   color: ${({ theme }: { theme: DefaultTheme }) => theme.colors.neutral.c90};
@@ -37,7 +33,7 @@ const PageContainer = styled(Flex)`
   flex: 1;
 `;
 
-const ClientRootLayout: React.FC<ClientRootLayoutProps> = ({ children }) => {
+const ClientRootLayout: React.FC<PropsWithChildren> = ({ children }) => {
   return (
     <html lang="en">
       <SdkProvider>

diff --git a/apps/sample/src/app/device-actions/page.tsx b/apps/sample/src/app/device-actions/page.tsx
@@ -1,8 +1,8 @@
 "use client";
 import React from "react";
 
-import { SessionIdWrapper } from "@/components/SessionIdWrapper";
 import { AllDeviceActions } from "@/components/DeviceActionsView/AllDeviceActions";
+import { SessionIdWrapper } from "@/components/SessionIdWrapper";
 
 const DeviceActions: React.FC = () => {
   return <SessionIdWrapper ChildComponent={AllDeviceActions} />;

diff --git a/apps/sample/src/app/global-error.tsx b/apps/sample/src/app/global-error.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import * as Sentry from "@sentry/nextjs";
 import Error, { ErrorProps } from "next/error";
 

diff --git a/apps/sample/src/app/layout.tsx b/apps/sample/src/app/layout.tsx
@@ -6,6 +6,8 @@
  * Combines Styled Components Registry with the ClientRootLayout
  * for rendering the application.
  */
+import React, { PropsWithChildren } from "react";
+
 import { StyledComponentsRegistry } from "@/lib/registry";
 
 import ClientRootLayout from "./client-layout";
@@ -15,16 +17,13 @@ export const metadata = {
   description: "Ledger Device Management Kit Sample App",
 };
 
-type RootLayoutProps = {
-  children: React.ReactNode;
-};
-
-const RootLayout: React.FC<RootLayoutProps> = ({ children }) => {
+const RootLayout: React.FC<PropsWithChildren> = ({ children }) => {
   return (
     <StyledComponentsRegistry>
       <ClientRootLayout>{children}</ClientRootLayout>
     </StyledComponentsRegistry>
   );
 };
 
+// eslint-disable-next-line no-restricted-syntax
 export default RootLayout;
diff --git a/apps/sample/src/components/ClickableListItem.tsx b/apps/sample/src/components/ClickableListItem.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, Text, Icons } from "@ledgerhq/react-ui";
+import { Flex, Icons, Text } from "@ledgerhq/react-ui";
 import styled from "styled-components";
 
 const ListItemWrapper = styled(Flex)`

diff --git a/apps/sample/src/components/CommandsView/Command.tsx b/apps/sample/src/components/CommandsView/Command.tsx
@@ -1,16 +1,17 @@
 import React, { useCallback, useEffect, useState } from "react";
-
-import { Flex, Icons, Button, InfiniteLoader } from "@ledgerhq/react-ui";
-import { CommandForm, ValueSelector } from "./CommandForm";
-import { FieldType } from "@/hooks/useForm";
-import { CommandResponse, CommandResponseProps } from "./CommandResponse";
-import { Block } from "../Block";
-import { ClickableListItem } from "../ClickableListItem";
-import { StyledDrawer } from "../StyledDrawer";
 import {
   CommandResult,
   isSuccessCommandResult,
 } from "@ledgerhq/device-management-kit";
+import { Button, Flex, Icons, InfiniteLoader } from "@ledgerhq/react-ui";
+
+import { Block } from "@/components/Block";
+import { ClickableListItem } from "@/components/ClickableListItem";
+import { StyledDrawer } from "@/components/StyledDrawer";
+import { FieldType } from "@/hooks/useForm";
+
+import { CommandForm, ValueSelector } from "./CommandForm";
+import { CommandResponse, CommandResponseProps } from "./CommandResponse";
 
 export type CommandProps<
   CommandArgs extends Record<string, FieldType> | void,
@@ -81,7 +82,7 @@ export function Command<
       .finally(() => {
         setLoading(false);
       });
-  }, [values]);
+  }, [values, sendCommand]);
 
   const handleClickClear = useCallback(() => {
     setResponses([]);
@@ -159,5 +160,3 @@ export function Command<
     </>
   );
 }
-
-export default Command;
diff --git a/apps/sample/src/components/CommandsView/CommandForm.tsx b/apps/sample/src/components/CommandsView/CommandForm.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
-import { Input, Flex, Switch, Text, SelectInput } from "@ledgerhq/react-ui";
-import { useForm, FieldType } from "@/hooks/useForm";
+import { Flex, Input, SelectInput, Switch, Text } from "@ledgerhq/react-ui";
+
+import { FieldType, useForm } from "@/hooks/useForm";
 
 export type ValueSelector<T extends FieldType> = Record<
   string,

diff --git a/apps/sample/src/components/CommandsView/CommandResponse.tsx b/apps/sample/src/components/CommandsView/CommandResponse.tsx
@@ -1,10 +1,11 @@
 import React from "react";
-import { Flex, InfiniteLoader, Text, Tooltip } from "@ledgerhq/react-ui";
-import { FieldType } from "@/hooks/useForm";
 import {
   CommandResult,
   isSuccessCommandResult,
 } from "@ledgerhq/device-management-kit";
+import { Flex, InfiniteLoader, Text, Tooltip } from "@ledgerhq/react-ui";
+
+import { FieldType } from "@/hooks/useForm";
 
 export type CommandResponseProps<Response, ErrorCodes> = {
   args: Record<string, FieldType>;

diff --git a/apps/sample/src/components/CommandsView/index.tsx b/apps/sample/src/components/CommandsView/index.tsx
@@ -1,28 +1,29 @@
 import React, { useMemo } from "react";
-import { Grid } from "@ledgerhq/react-ui";
-
-import Command, { CommandProps } from "./Command";
-import { useSdk } from "@/providers/DeviceSdkProvider";
 import {
-  ListAppsCommand,
-  ListAppsArgs,
-  ListAppsResponse,
-  OpenAppCommand,
-  OpenAppArgs,
   CloseAppCommand,
   GetAppAndVersionCommand,
   GetAppAndVersionResponse,
-  GetOsVersionCommand,
-  GetOsVersionResponse,
-  GetBatteryStatusCommand,
   GetBatteryStatusArgs,
+  GetBatteryStatusCommand,
   GetBatteryStatusResponse,
-  OpenAppErrorCodes,
+  GetOsVersionCommand,
+  GetOsVersionResponse,
+  ListAppsArgs,
+  ListAppsCommand,
   ListAppsErrorCodes,
+  ListAppsResponse,
+  OpenAppArgs,
+  OpenAppCommand,
+  OpenAppErrorCodes,
 } from "@ledgerhq/device-management-kit";
 import { BatteryStatusType } from "@ledgerhq/device-management-kit/src/api/command/os/GetBatteryStatusCommand.js";
+import { Grid } from "@ledgerhq/react-ui";
+
+import { PageWithHeader } from "@/components/PageWithHeader";
+import { useSdk } from "@/providers/DeviceSdkProvider";
+
+import { Command, CommandProps } from "./Command";
 import { getValueSelectorFromEnum } from "./CommandForm";
-import { PageWithHeader } from "../PageWithHeader";
 
 export const CommandsView: React.FC<{ sessionId: string }> = ({
   sessionId: selectedSessionId,

diff --git a/apps/sample/src/components/DeviceActionsView/AllDeviceActions.tsx b/apps/sample/src/components/DeviceActionsView/AllDeviceActions.tsx
@@ -1,34 +1,37 @@
-import { useSdk } from "@/providers/DeviceSdkProvider";
+import React from "react";
+import { useMemo } from "react";
 import {
-  OpenAppDeviceAction,
-  OpenAppDAOutput,
-  OpenAppDAInput,
-  OpenAppDAError,
-  OpenAppDAIntermediateValue,
-  GetDeviceStatusDeviceAction,
-  GetDeviceStatusDAOutput,
-  GetDeviceStatusDAInput,
   GetDeviceStatusDAError,
+  GetDeviceStatusDAInput,
   GetDeviceStatusDAIntermediateValue,
-  GoToDashboardDeviceAction,
-  GoToDashboardDAOutput,
-  GoToDashboardDAInput,
+  GetDeviceStatusDAOutput,
+  GetDeviceStatusDeviceAction,
   GoToDashboardDAError,
+  GoToDashboardDAInput,
   GoToDashboardDAIntermediateValue,
-  ListAppsDeviceAction,
-  ListAppsDAOutput,
-  ListAppsDAInput,
+  GoToDashboardDAOutput,
+  GoToDashboardDeviceAction,
   ListAppsDAError,
+  ListAppsDAInput,
   ListAppsDAIntermediateValue,
-  ListAppsWithMetadataDeviceAction,
-  ListAppsWithMetadataDAOutput,
-  ListAppsWithMetadataDAInput,
+  ListAppsDAOutput,
+  ListAppsDeviceAction,
   ListAppsWithMetadataDAError,
+  ListAppsWithMetadataDAInput,
   ListAppsWithMetadataDAIntermediateValue,
+  ListAppsWithMetadataDAOutput,
+  ListAppsWithMetadataDeviceAction,
+  OpenAppDAError,
+  OpenAppDAInput,
+  OpenAppDAIntermediateValue,
+  OpenAppDAOutput,
+  OpenAppDeviceAction,
 } from "@ledgerhq/device-management-kit";
-import { useMemo } from "react";
+
+import { useSdk } from "@/providers/DeviceSdkProvider";
+
+import { DeviceActionsList, UNLOCK_TIMEOUT } from "./DeviceActionsList";
 import { DeviceActionProps } from "./DeviceActionTester";
-import { UNLOCK_TIMEOUT, DeviceActionsList } from "./DeviceActionsList";
 
 export const AllDeviceActions: React.FC<{ sessionId: string }> = ({
   sessionId,
@@ -151,7 +154,7 @@ export const AllDeviceActions: React.FC<{ sessionId: string }> = ({
         ListAppsWithMetadataDAIntermediateValue
       >,
     ],
-    [],
+    [deviceModelId, sdk, sessionId],
   );
 
   return (

diff --git a/apps/sample/src/components/DeviceActionsView/DeviceActionResponse.tsx b/apps/sample/src/components/DeviceActionsView/DeviceActionResponse.tsx
@@ -1,14 +1,15 @@
+import React from "react";
 import {
   type DeviceActionIntermediateValue,
   type DeviceActionState,
   DeviceActionStatus,
   UserInteractionRequired,
 } from "@ledgerhq/device-management-kit";
-import { FieldType } from "@/hooks/useForm";
-import React from "react";
 import { Flex, Icons, Tag, Text, Tooltip } from "@ledgerhq/react-ui";
 import styled from "styled-components";
 
+import { FieldType } from "@/hooks/useForm";
+
 export type DeviceActionResponseProps<Output, Error, IntermediateValue> = {
   args: Record<string, FieldType>;
   date: Date;

diff --git a/apps/sample/src/components/DeviceActionsView/DeviceActionTester.tsx b/apps/sample/src/components/DeviceActionsView/DeviceActionTester.tsx
@@ -1,11 +1,11 @@
-import { Block } from "@/components/Block";
-import { ClickableListItem } from "@/components/ClickableListItem";
-import { FieldType } from "@/hooks/useForm";
+import React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type {
   DeviceActionIntermediateValue,
   ExecuteDeviceActionReturnType,
   SdkError,
 } from "@ledgerhq/device-management-kit";
+import { DeviceModelId } from "@ledgerhq/device-management-kit";
 import {
   Button,
   Divider,
@@ -16,16 +16,21 @@ import {
   Text,
   Tooltip,
 } from "@ledgerhq/react-ui";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { CommandForm, ValueSelector } from "../CommandsView/CommandForm";
+import styled from "styled-components";
+
+import { Block } from "@/components/Block";
+import { ClickableListItem } from "@/components/ClickableListItem";
+import {
+  CommandForm,
+  ValueSelector,
+} from "@/components/CommandsView/CommandForm";
+import { FieldType } from "@/hooks/useForm";
+
 import {
   DeviceActionResponse,
   DeviceActionResponseProps,
 } from "./DeviceActionResponse";
-
-import { DeviceModelId } from "@ledgerhq/device-management-kit";
-import styled from "styled-components";
-import DeviceActionUI from "./DeviceActionUI";
+import { DeviceActionUI } from "./DeviceActionUI";
 
 export type DeviceActionProps<
   Output,

diff --git a/apps/sample/src/components/DeviceActionsView/DeviceActionUI.tsx b/apps/sample/src/components/DeviceActionsView/DeviceActionUI.tsx
@@ -1,3 +1,5 @@
+import React from "react";
+import Lottie from "react-lottie";
 import {
   type DeviceActionIntermediateValue,
   DeviceActionStatus,
@@ -12,34 +14,29 @@ import {
   Text,
   Tooltip,
 } from "@ledgerhq/react-ui";
-import React from "react";
-import Lottie from "react-lottie";
-import {
-  DeviceActionResponseProps,
-  deviceActionStatusToColor,
-} from "./DeviceActionResponse";
-
-import * as PinStaxDark from "./lotties/stax/01_STAX_DARK_PIN.json";
-import * as PairingStaxDark from "./lotties/stax/02_STAX_DARK_PAIRING.json";
-import * as PairedSuccessStaxDark from "./lotties/stax/03_STAX_DARK_PAIRED_SUCCESS.json";
-import * as ContinueOnLedgerStaxDark from "./lotties/stax/04_STAX_DARK_CONTINUE_ON_LEDGER.json";
-import * as SignTransactionStaxDark from "./lotties/stax/05_STAX_DARK_SIGN_TRANSACTION.json";
-import * as FrontViewStaxDark from "./lotties/stax/06_STAX_DARK_FRONT_VIEW.json";
+import styled from "styled-components";
 
 import * as PinFlexDark from "./lotties/flex/01_EUROPA_DARK_PIN.json";
 import * as PairingFlexDark from "./lotties/flex/02_EUROPA_DARK_PAIRING.json";
 import * as PairedSuccessFlexDark from "./lotties/flex/03_EUROPA_DARK_PAIRED_SUCCESS.json";
 import * as ContinueOnLedgerFlexDark from "./lotties/flex/04_EUROPA_DARK_CONTINUE_ON_LEDGER.json";
 import * as SignTransactionFlexDark from "./lotties/flex/05_EUROPA_DARK_SIGN_TRANSACTION.json";
 import * as FrontViewFlexDark from "./lotties/flex/06_STAX_DARK_FRONT_VIEW.json";
-
+import * as PinNanoSDark from "./lotties/nanosp/01_NANO_S_DARK_PIN.json";
+import * as ContinueOnLedgerNanoSDark from "./lotties/nanosp/02_NANO_S_DARK_CONTINUE_ON_YOUR_LEDGER.json";
 import * as PinNanoXDark from "./lotties/nanox/01_NANO_X_DARK_PIN.json";
 import * as PairingNanoXDark from "./lotties/nanox/02_NANO_X_DARK_PAIRING.json";
 import * as ContinueOnLedgerNanoXDark from "./lotties/nanox/03_NANO_X_DARK_CONTINUE_ON_YOUR_LEDGER.json";
-
-import * as PinNanoSDark from "./lotties/nanosp/01_NANO_S_DARK_PIN.json";
-import * as ContinueOnLedgerNanoSDark from "./lotties/nanosp/02_NANO_S_DARK_CONTINUE_ON_YOUR_LEDGER.json";
-import styled from "styled-components";
+import * as PinStaxDark from "./lotties/stax/01_STAX_DARK_PIN.json";
+import * as PairingStaxDark from "./lotties/stax/02_STAX_DARK_PAIRING.json";
+import * as PairedSuccessStaxDark from "./lotties/stax/03_STAX_DARK_PAIRED_SUCCESS.json";
+import * as ContinueOnLedgerStaxDark from "./lotties/stax/04_STAX_DARK_CONTINUE_ON_LEDGER.json";
+import * as SignTransactionStaxDark from "./lotties/stax/05_STAX_DARK_SIGN_TRANSACTION.json";
+import * as FrontViewStaxDark from "./lotties/stax/06_STAX_DARK_FRONT_VIEW.json";
+import {
+  DeviceActionResponseProps,
+  deviceActionStatusToColor,
+} from "./DeviceActionResponse";
 
 type DeviceAnimationProps = {
   userInteractionRequired: UserInteractionRequired | string;
@@ -183,7 +180,7 @@ const JSONTextPopin: React.FC<{
   );
 };
 
-export default function DeviceActionUI<
+export function DeviceActionUI<
   Output,
   Error,
   IntermediateValue extends DeviceActionIntermediateValue,