feat: remove debris and add tsconfig

apps/core/src/components/Inputs/AddressInput.tsx

@@ -5,7 +5,7 @@
 import { Input, InputType } from '@iota/apps-ui-kit';
 import { Close } from '@iota/ui-icons';
 import { useIotaAddressValidation } from '../../hooks';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useField, useFormikContext } from 'formik';
 
 export interface AddressInputProps {

apps/core/src/components/buttons/ViewTxnOnExplorerButton.tsx

@@ -1,15 +1,16 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { JSX } from 'react';
 import { Button, ButtonType, LoadingIndicator } from '@iota/apps-ui-kit';
 import { ArrowTopRight } from '@iota/ui-icons';
 
 interface ViewTxnOnExplorerButtonProps {
     digest?: string;
 }
 
-export function ViewTxnOnExplorerButton({ digest }: ViewTxnOnExplorerButtonProps): JSX.Element {
+export function ViewTxnOnExplorerButton({
+    digest,
+}: ViewTxnOnExplorerButtonProps): React.JSX.Element {
     return (
         <Button
             type={ButtonType.Outlined}

apps/core/src/components/cards/BalanceChanges.tsx

@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { Divider, Header, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
 import type { BalanceChangeSummary, RenderExplorerLink } from '../../types';
 import { ExplorerLinkType } from '../../enums';

apps/core/src/components/cards/ObjectChanges.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
     getObjectChangeLabel,
     type ObjectChangesByOwner,

apps/core/src/components/collapsible/Collapsible.tsx

@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useState, type ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
 import { Accordion, AccordionContent, AccordionHeader, Title, TitleSize } from '@iota/apps-ui-kit';
 
 interface CollapsibleProps extends React.PropsWithChildren {

apps/core/src/components/lists/ExpandableList.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import clsx from 'clsx';
-import React, { useMemo, useState, type ReactNode } from 'react';
+import { useMemo, useState, type ReactNode } from 'react';
 import { TriangleDown } from '@iota/ui-icons';
 import { Button, ButtonSize, ButtonType } from '@iota/apps-ui-kit';
 

apps/core/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "target": "ES2020",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

apps/explorer/src/pages/validator/ValidatorDetails.tsx

@@ -5,7 +5,7 @@
 import { useGetValidatorsApy, useGetValidatorsEvents } from '@iota/core';
 import { useIotaClientQuery } from '@iota/dapp-kit';
 import { type IotaSystemStateSummary } from '@iota/iota-sdk/client';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { PageLayout, ValidatorMeta, ValidatorStats } from '~/components';
 import { VALIDATOR_LOW_STAKE_GRACE_PERIOD } from '~/lib/constants';

apps/explorer/src/pages/validators/Validators.tsx

@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { type JSX, useMemo } from 'react';
+import { type JSX, useMemo } from 'react';
 import { roundFloat, useFormatCoin, useGetValidatorsApy, useGetValidatorsEvents } from '@iota/core';
 import {
     DisplayStats,

apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import cx from 'classnames';
 import { Copy, Info } from '@iota/ui-icons';
 import { ValueSize } from './keyValue.enums';

apps/ui-kit/src/lib/components/atoms/list-item/ListItem.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import cx from 'classnames';
 import { ArrowRight } from '@iota/ui-icons';
 import { Button, ButtonSize, ButtonType } from '@/components';

apps/ui-kit/src/lib/components/atoms/tooltip/Tooltip.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import cx from 'classnames';
 import { TooltipPosition } from './tooltip.enums';
 import { TOOLTIP_POSITION } from './tooltip.classes';

apps/ui-kit/src/lib/components/molecules/display-stats/DisplayStats.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Tooltip, TooltipPosition } from '../../atoms';
 import { Info } from '@iota/ui-icons';
 import { DisplayStatsType, DisplayStatsSize } from './display-stats.enums';

apps/ui-kit/src/lib/components/molecules/search/Search.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
 import { Loader, Search as SearchIcon } from '@iota/ui-icons';
 import { Divider, SearchBarType } from '@/components';

apps/ui-kit/src/lib/components/molecules/segmented-button/SegmentedButton.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { BACKGROUND_COLORS, OUTLINED_BORDER } from './segmented-button.classes';
 import cx from 'classnames';
 import { SegmentedButtonType } from './segmented-button.enums';

apps/ui-kit/src/lib/components/organisms/accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import cx from 'classnames';
 import { ArrowDown } from '@iota/ui-icons';
 import { Button, ButtonType } from '@/lib';

apps/wallet-dashboard/app/(protected)/layout.tsx

@@ -3,7 +3,7 @@
 'use client';
 
 import { Notifications } from '@/components/index';
-import React, { type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import { Sidebar, TopNav } from './components';
 
 function DashboardLayout({ children }: PropsWithChildren): JSX.Element {

apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Dialog } from '@iota/apps-ui-kit';
 import { FormikProvider, useFormik } from 'formik';
 import { useIotaClient, useCurrentAccount } from '@iota/dapp-kit';

apps/wallet-dashboard/components/Dialogs/SendToken/SendTokenDialog.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { EnterValuesFormView, ReviewValuesFormView, TransactionDetailsView } from './views';
 import { CoinBalance } from '@iota/iota-sdk/client';
 import { useSendCoinTransaction, useNotifications } from '@/hooks';

apps/wallet-dashboard/components/Dialogs/Staking/StakeDialog.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { EnterAmountView, EnterTimelockedAmountView, SelectValidatorView } from './views';
 import {
     ExtendedDelegatedStake,

apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
     useFormatCoin,
     CoinFormat,

apps/wallet-dashboard/components/Dialogs/migration/MigrationDialog.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useCurrentAccount, useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { IotaObjectData } from '@iota/iota-sdk/client';
 import { useMigrationTransaction } from '@/hooks/useMigrationTransaction';

apps/wallet-dashboard/components/Input.tsx

@@ -1,8 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
-
 interface InputProps {
     label?: string;
     value: string;

apps/wallet-dashboard/components/VirtualList.tsx

@@ -3,7 +3,7 @@
 
 'use client';
 
-import React, { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect, useRef } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import clsx from 'clsx';
 
@@ -30,7 +30,7 @@ function VirtualList<T>({
     heightClassName = 'h-fit',
     overflowClassName,
 }: VirtualListProps<T>): JSX.Element {
-    const containerRef = React.useRef<HTMLDivElement | null>(null);
+    const containerRef = useRef<HTMLDivElement | null>(null);
     const virtualizer = useVirtualizer({
         // Render one more item if there is still pages to be fetched
         count: hasNextPage ? items.length + 1 : items.length,

apps/wallet-dashboard/components/coins/MyCoins.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit';
 import { CoinBalance } from '@iota/iota-sdk/client';
 import {

apps/wallet-dashboard/components/transactions/TransactionTile.tsx

@@ -3,7 +3,7 @@
 
 'use client';
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import TransactionIcon from './TransactionIcon';
 import formatTimestamp from '@/lib/utils/time';
 import { ExtendedTransaction, TransactionState } from '@/lib/interfaces';

apps/wallet/src/ui/app/components/OutsideClickHandler.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 interface OutsideClickHandlerProps {
     onOutsideClick: () => void;

apps/wallet/src/ui/app/components/accounts/UnlockAccountContext.tsx

@@ -3,14 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { type SerializedUIAccount } from '_src/background/accounts/Account';
-import React, {
-    createContext,
-    useCallback,
-    useContext,
-    useState,
-    type ReactNode,
-    useRef,
-} from 'react';
+import { createContext, useCallback, useContext, useState, type ReactNode, useRef } from 'react';
 import { toast } from 'react-hot-toast';
 import { useBackgroundClient } from '../../hooks/useBackgroundClient';
 import { useUnlockMutation } from '../../hooks/useUnlockMutation';

apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx

@@ -6,7 +6,7 @@ import { AccountType, type SerializedUIAccount } from '_src/background/accounts/
 import { AccountsFormType, useAccountsFormContext, VerifyPasswordModal } from '_components';
 import { useAccountSources } from '_src/ui/app/hooks/useAccountSources';
 import { useCreateAccountsMutation } from '_src/ui/app/hooks/useCreateAccountMutation';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import clsx from 'clsx';