chore: Add consistent type imports ESlint rule ✏️

apps/lightspell-site/package.json

@@ -8,7 +8,9 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint:check": "eslint .",
-    "lint": "eslint --fix ."
+    "lint": "eslint --fix .",
+    "format:check": "prettier --check src",
+    "format:write": "prettier --write src"
   },
   "dependencies": {
     "@mantine/core": "^7.13.1",

apps/lightspell-site/src/App.tsx

@@ -3,7 +3,7 @@ import "./App.css";
 import {
   MantineProvider,
   createTheme,
-  MantineColorsTuple,
+  type MantineColorsTuple,
 } from "@mantine/core";
 import { BrowserRouter } from "react-router-dom";
 import ScrollToAnchor from "./components/ScrollToAnchor";

apps/lightspell-site/src/components/AppShell/Header.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import type { FC } from "react";
 import { Container, Group, Burger, Image, Button, Anchor } from "@mantine/core";
 import classes from "./Header.module.css";
 import { Link } from "react-router-dom";

apps/lightspell-site/src/components/NotFound/Illustration.tsx

@@ -1,4 +1,4 @@
-const Illustration = (props: React.ComponentPropsWithoutRef<'svg'>) => {
+const Illustration = (props: React.ComponentPropsWithoutRef<"svg">) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362 145" {...props}>
       <path

apps/lightspell-site/src/components/NotFound/NotFound.module.css

@@ -25,7 +25,9 @@
 }
 
 .title {
-  font-family: Greycliff CF, var(--mantine-font-family);
+  font-family:
+    Greycliff CF,
+    var(--mantine-font-family);
   text-align: center;
   font-weight: 900;
   font-size: rem(38px);

apps/lightspell-site/src/components/NotFound/NotFound.tsx

@@ -1,7 +1,7 @@
-import { Button, Container, Group, Text, Title } from '@mantine/core';
-import classes from './NotFound.module.css';
-import Illustration from './Illustration';
-import { Link } from 'react-router-dom';
+import { Button, Container, Group, Text, Title } from "@mantine/core";
+import classes from "./NotFound.module.css";
+import Illustration from "./Illustration";
+import { Link } from "react-router-dom";
 
 const NotFound = () => (
   <Container className={classes.root}>

apps/lightspell-site/src/components/ScrollToTop.tsx

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
 
 const ScrollToTop = () => {
   const { pathname } = useLocation();

apps/lightspell-site/src/main.tsx

@@ -5,5 +5,5 @@ import App from "./App";
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );

apps/lightspell-site/src/routes/NotFoundPage.tsx

@@ -1,4 +1,4 @@
-import NotFound from '../components/NotFound/NotFound';
+import NotFound from "../components/NotFound/NotFound";
 
 const NotFoundPage = () => <NotFound />;
 

apps/playground/package.json

@@ -9,6 +9,8 @@
     "preview": "vite preview",
     "lint:check": "eslint .",
     "lint": "eslint --fix .",
+    "format:check": "prettier --check src",
+    "format:write": "prettier --write src",
     "test:e2e": "playwright test",
     "install-polkadot-ext": "cd e2e/extensions/polkadot-ext && yarn && yarn build:chrome",
     "init-polkadot-ext": "git clone https://github.com/polkadot-js/extension e2e/extensions/polkadot-ext && pnpm install-polkadot-ext",
@@ -40,7 +42,6 @@
   "devDependencies": {
     "@metamask/providers": "^17.2.0",
     "@playwright/test": "^1.47.2",
-    "@types/node": "^22.7.4",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",

apps/playground/src/App.tsx

@@ -10,7 +10,7 @@ import {
 import "@mantine/core/styles.css";
 import { useDisclosure } from "@mantine/hooks";
 import { web3Accounts, web3Enable } from "@polkadot/extension-dapp";
-import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
+import type { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
 import { IconAnalyze, IconBoxSeam, IconRoute } from "@tabler/icons-react";
 import { useState } from "react";
 import {

apps/playground/src/components/AccountsModal.tsx

@@ -1,6 +1,6 @@
 import { Modal, Stack, Button } from "@mantine/core";
-import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
-import { FC } from "react";
+import type { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
+import type { FC } from "react";
 
 type Props = {
   isOpen: boolean;

apps/playground/src/components/CurrencySelection.tsx

@@ -1,16 +1,17 @@
-import { FC, useEffect } from "react";
+import type { FC } from "react";
+import { useEffect } from "react";
+import type { ComboboxItem } from "@mantine/core";
 import {
   Select,
   Stack,
   TextInput,
   Checkbox,
-  ComboboxItem,
   Group,
   SegmentedControl,
   JsonInput,
 } from "@mantine/core";
-import { UseFormReturnType } from "@mantine/form";
-import { FormValues } from "./TransferForm";
+import type { UseFormReturnType } from "@mantine/form";
+import type { FormValues } from "./TransferForm";
 import { isRelayChain } from "@paraspell/sdk";
 
 type Props = {

apps/playground/src/components/ErrorAlert.tsx

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { Alert } from "@mantine/core";
 import { IconAlertCircle } from "@tabler/icons-react";
 

apps/playground/src/components/EthAccountsModal.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import type { FC } from "react";
 import { Modal, Stack, Button } from "@mantine/core";
 
 type Props = {

apps/playground/src/components/OutputAlert.tsx

@@ -1,6 +1,6 @@
 import { Text, Alert } from "@mantine/core";
 import { IconJson, IconLink } from "@tabler/icons-react";
-import { FC, ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 
 const jsonIcon = <IconJson size={24} />;
 const linkIcon = <IconLink size={24} />;

apps/playground/src/components/RouterTransferForm.tsx

@@ -1,12 +1,9 @@
 import { useForm } from "@mantine/form";
-import {
-  EXCHANGE_NODES,
-  TAutoSelect,
-  TExchangeNode,
-  TransactionType,
-} from "@paraspell/xcm-router";
+import type { TAutoSelect, TExchangeNode } from "@paraspell/xcm-router";
+import { EXCHANGE_NODES, TransactionType } from "@paraspell/xcm-router";
 import { isValidWalletAddress } from "../utils";
-import { FC, useEffect, useState } from "react";
+import type { FC } from "react";
+import { useEffect, useState } from "react";
 import {
   Text,
   Button,
@@ -19,17 +16,15 @@ import {
   Center,
   rem,
 } from "@mantine/core";
-import {
-  NODES_WITH_RELAY_CHAINS,
-  TAsset,
-  TNodeWithRelayChains,
-} from "@paraspell/sdk";
-import { Signer } from "@polkadot/api/types";
+import type { TAsset, TNodeWithRelayChains } from "@paraspell/sdk";
+import { NODES_WITH_RELAY_CHAINS } from "@paraspell/sdk";
+import type { Signer } from "@polkadot/api/types";
 import { web3Accounts, web3FromAddress } from "@polkadot/extension-dapp";
 import AccountsModal from "./AccountsModal";
 import { useDisclosure } from "@mantine/hooks";
-import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
-import { BrowserProvider, ethers } from "ethers";
+import type { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
+import type { BrowserProvider } from "ethers";
+import { ethers } from "ethers";
 import { IconInfoCircle } from "@tabler/icons-react";
 import EthAccountsModal from "./EthAccountsModal";
 import useRouterCurrencyOptions from "../hooks/useRouterCurrencyOptions";
@@ -92,7 +87,7 @@ const RouterTransferForm: FC<Props> = ({
     useState<InjectedAccountWithMeta>();
 
   const [selectedEthAccount, setSelectedEthAccount] = useState<string | null>(
-    null
+    null,
   );
 
   const onAccountSelect = (account: InjectedAccountWithMeta) => () => {
@@ -179,7 +174,7 @@ const RouterTransferForm: FC<Props> = ({
     try {
       const allAccounts = await web3Accounts();
       setAssetHubAccounts(
-        allAccounts.filter((account) => !ethers.isAddress(account.address))
+        allAccounts.filter((account) => !ethers.isAddress(account.address)),
       );
       openAssetHubModal();
     } catch (error) {
@@ -194,7 +189,7 @@ const RouterTransferForm: FC<Props> = ({
     try {
       const allAccounts = await web3Accounts();
       setAccounts(
-        allAccounts.filter((account) => ethers.isAddress(account.address))
+        allAccounts.filter((account) => ethers.isAddress(account.address)),
       );
       openModal();
     } catch (error) {
@@ -215,7 +210,7 @@ const RouterTransferForm: FC<Props> = ({
     try {
       const accounts = (await newProvider.send(
         "eth_requestAccounts",
-        []
+        [],
       )) as string[];
       console.log("Accounts:", accounts);
       setEthAccounts(accounts);
@@ -256,7 +251,7 @@ const RouterTransferForm: FC<Props> = ({
   } = useRouterCurrencyOptions(
     form.values.from,
     form.values.exchange,
-    form.values.to
+    form.values.to,
   );
 
   const onSubmitInternal = (values: FormValues) => {
@@ -330,7 +325,7 @@ const RouterTransferForm: FC<Props> = ({
     if (isFromNotParaToPara) {
       form.setFieldValue(
         "currencyFromOptionId",
-        Object.keys(currencyFromMap)[0]
+        Object.keys(currencyFromMap)[0],
       );
     }
   }, [isFromNotParaToPara, currencyFromMap]);

apps/playground/src/components/TransferForm.tsx

@@ -1,12 +1,10 @@
 import { useForm } from "@mantine/form";
 import { isValidWalletAddress } from "../utils";
-import { FC, useEffect } from "react";
+import type { FC } from "react";
+import { useEffect } from "react";
 import { Button, Checkbox, Select, Stack, TextInput } from "@mantine/core";
-import {
-  NODES_WITH_RELAY_CHAINS,
-  TAsset,
-  TNodeWithRelayChains,
-} from "@paraspell/sdk";
+import type { TAsset, TNodeWithRelayChains } from "@paraspell/sdk";
+import { NODES_WITH_RELAY_CHAINS } from "@paraspell/sdk";
 import useCurrencyOptions from "../hooks/useCurrencyOptions";
 import CurrencySelection from "./CurrencySelection";
 
@@ -66,7 +64,7 @@ const TransferForm: FC<Props> = ({ onSubmit, loading }) => {
 
   const { currencyOptions, currencyMap, isNotParaToPara } = useCurrencyOptions(
     form.values.from,
-    form.values.to
+    form.values.to,
   );
 
   const onSubmitInternal = (values: FormValues) => {

apps/playground/src/components/TransferInfo.tsx

@@ -3,7 +3,8 @@ import ErrorAlert from "./ErrorAlert";
 import { useDisclosure, useScrollIntoView } from "@mantine/hooks";
 import { useState, useEffect } from "react";
 import { useWallet } from "../hooks/useWallet";
-import TransferInfoForm, { FormValues } from "./TransferInfoForm";
+import type { FormValues } from "./TransferInfoForm";
+import TransferInfoForm from "./TransferInfoForm";
 import OutputAlert from "./OutputAlert";
 import { getTransferInfo } from "@paraspell/sdk";
 import { fetchFromApi } from "../utils/submitUsingApi";
@@ -54,7 +55,7 @@ const TransferInfo = () => {
         },
         `/transfer-info`,
         "POST",
-        true
+        true,
       );
     } else {
       return await getTransferInfo(
@@ -63,7 +64,7 @@ const TransferInfo = () => {
         originAddress,
         formValues.destinationAddress,
         currency,
-        formValues.amount
+        formValues.amount,
       );
     }
   };

apps/playground/src/components/TransferInfoForm.tsx

@@ -1,6 +1,6 @@
 import { useForm } from "@mantine/form";
 import { isValidWalletAddress } from "../utils";
-import { FC } from "react";
+import type { FC } from "react";
 import {
   Button,
   Checkbox,
@@ -10,10 +10,8 @@ import {
   Stack,
   TextInput,
 } from "@mantine/core";
-import {
-  NODES_WITH_RELAY_CHAINS,
-  TNodeDotKsmWithRelayChains,
-} from "@paraspell/sdk";
+import type { TNodeDotKsmWithRelayChains } from "@paraspell/sdk";
+import { NODES_WITH_RELAY_CHAINS } from "@paraspell/sdk";
 
 export type FormValues = {
   from: TNodeDotKsmWithRelayChains;

apps/playground/src/components/TransferStepper.tsx

@@ -1,6 +1,7 @@
-import { Stepper, Title } from '@mantine/core';
-import { TTxProgressInfo, TransactionStatus, TransactionType } from '@paraspell/xcm-router';
-import { FC } from 'react';
+import { Stepper, Title } from "@mantine/core";
+import type { TTxProgressInfo } from "@paraspell/xcm-router";
+import { TransactionStatus, TransactionType } from "@paraspell/xcm-router";
+import type { FC } from "react";
 
 const getActiveStep = (progressInfo?: TTxProgressInfo) => {
   if (!progressInfo) {
@@ -60,7 +61,7 @@ const TransferStepper: FC<Props> = ({ progressInfo }) => {
         }
       ></Stepper.Step>
       <Stepper.Completed>
-        <Title order={4} style={{ textAlign: 'center' }} mt="md">
+        <Title order={4} style={{ textAlign: "center" }} mt="md">
           Your transaction was successful!
         </Title>
       </Stepper.Completed>

apps/playground/src/components/XcmTransfer.tsx

@@ -1,17 +1,13 @@
 import { Stack, Title, Box } from "@mantine/core";
 import ErrorAlert from "./ErrorAlert";
-import TransferForm, { FormValuesTransformed } from "./TransferForm";
+import type { FormValuesTransformed } from "./TransferForm";
+import TransferForm from "./TransferForm";
 import { useDisclosure, useScrollIntoView } from "@mantine/hooks";
-import {
-  Builder,
-  TCurrencyInput,
-  TMultiLocation,
-  TNode,
-  createApiInstanceForNode,
-} from "@paraspell/sdk";
-import { ApiPromise } from "@polkadot/api";
+import type { TCurrencyInput, TMultiLocation, TNode } from "@paraspell/sdk";
+import { Builder, createApiInstanceForNode } from "@paraspell/sdk";
+import type { ApiPromise } from "@polkadot/api";
 import { web3FromAddress } from "@polkadot/extension-dapp";
-import { Signer } from "@polkadot/api/types";
+import type { Signer } from "@polkadot/api/types";
 import { useState, useEffect } from "react";
 import { submitTransaction } from "../utils";
 import { submitTxUsingApi } from "../utils/submitUsingApi";
@@ -90,7 +86,7 @@ const XcmTransfer = () => {
   const submitUsingSdk = async (
     formValues: FormValuesTransformed,
     injectorAddress: string,
-    signer: Signer
+    signer: Signer,
   ) => {
     const api = await createApiInstanceForNode(formValues.from);
     const tx = await createTransferTx(formValues, api);
@@ -128,13 +124,13 @@ const XcmTransfer = () => {
           selectedAccount.address,
           injector.signer,
           "POST",
-          true
+          true,
         );
       } else {
         await submitUsingSdk(
           formValues,
           selectedAccount.address,
-          injector.signer
+          injector.signer,
         );
       }
       alert("Transaction was successful!");

apps/playground/src/components/analyser/AnalyserForm.tsx

@@ -1,6 +1,6 @@
 import { Button, JsonInput, Stack } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { FC } from "react";
+import type { FC } from "react";
 
 export type FormValues = {
   input: string;