From f2fa9ea9d7a053253c423f7f8699c16deb02249d Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Wed, 17 Apr 2024 12:46:32 +0200 Subject: [PATCH 1/6] chore: add prettier plugin to sort imports --- .prettierrc | 4 - package.json | 1 + packages/wallet-management/package.json | 3 +- packages/widget-embedded/package.json | 3 +- .../NFTOpenSea/useOpenSeaFulfillment.tsx | 2 +- .../src/components/NFTOpenSea/utils.ts | 2 +- .../src/providers/WalletProvider.tsx | 2 +- packages/widget-playground-next/package.json | 3 +- .../widget-playground-next/src/app/layout.tsx | 2 +- .../widget-playground-next/src/app/page.tsx | 23 +++--- packages/widget-playground-vite/package.json | 3 +- packages/widget-playground-vite/src/App.tsx | 19 ++--- packages/widget-playground-vite/src/index.tsx | 2 +- packages/widget-playground/package.json | 3 +- .../Card/ExpandableCard/ExpandableCard.tsx | 4 +- .../CodeControl/CodeControl.tsx | 6 +- .../DrawerControls/CodeControl/CodeEditor.tsx | 10 +-- .../CodeControl/FontEmbedInfo.tsx | 16 ++-- .../CodeControl/ProjectButton.tsx | 2 +- .../DesignControls/AppearanceControl.tsx | 24 +++--- .../DesignControls/ColorControls.tsx | 6 +- .../DesignControls/DesignControls.style.tsx | 16 ++-- .../FontsControl/FontsControl.tsx | 12 +-- .../fontDefinitions/defaultFonts.ts | 2 +- .../PlaygroundSettingsControl.tsx | 4 +- .../DesignControls/SubvariantControl.tsx | 4 +- .../DesignControls/ThemeControl.tsx | 7 +- .../DesignControls/VariantControl.tsx | 4 +- .../WalletManagementControl.tsx | 4 +- .../DrawerControls/DrawerControls.style.tsx | 7 +- .../DrawerControls/DrawerControls.tsx | 8 +- .../src/components/LifiLogo.tsx | 2 +- .../src/components/Switch.tsx | 2 +- .../components/Widget/ConnectWalletButton.tsx | 4 +- .../components/Widget/WidgetViewContainer.tsx | 2 +- .../src/hooks/useThemeMode.ts | 2 +- .../ExternalWalletProvider/EVMProvider.tsx | 4 +- .../ExternalWalletProvider/SVMProvider.tsx | 2 +- .../FontLoaderProvider/FontLoaderProvider.tsx | 4 +- .../PlaygroundThemeProvider.tsx | 8 +- .../themeOverrides/light.ts | 1 + .../src/store/editTools/EditToolsProvider.tsx | 4 +- .../store/editTools/createEditToolsStore.ts | 6 +- .../src/store/editTools/types.ts | 4 +- .../widgetConfig/WidgetConfigProvider.tsx | 16 ++-- .../widgetConfig/createWidgetConfigStore.ts | 4 +- .../src/store/widgetConfig/types.ts | 2 +- .../src/store/widgetConfig/useConfigValues.ts | 6 +- .../utils/setThemeWithFallback.ts | 2 +- .../src/utils/cloneStructuredConfig.test.ts | 4 +- .../src/utils/cloneStructuredConfig.ts | 2 +- packages/widget/package.json | 3 +- packages/widget/src/App.tsx | 1 + packages/widget/src/AppDefault.tsx | 1 + .../widget/src/hooks/useGasRecommendation.ts | 2 +- packages/widget/src/hooks/useToken.ts | 2 +- packages/widget/src/hooks/useTokenBalance.ts | 2 +- packages/widget/src/hooks/useTokenSearch.ts | 2 +- packages/widget/src/hooks/useTools.ts | 2 +- .../widget/src/hooks/useTransactionDetails.ts | 2 +- .../widget/src/hooks/useTransactionHistory.ts | 2 +- packages/widget/src/hooks/useWidgetEvents.ts | 1 + packages/widget/src/pages/LanguagesPage.tsx | 2 +- .../widget/src/pages/MainPage/MainPage.tsx | 4 +- .../src/pages/RoutesPage/RoutesPage.tsx | 4 +- .../pages/SelectChainPage/SelectChainPage.tsx | 4 +- .../src/pages/SelectEnabledToolsPage.tsx | 2 +- .../pages/SelectTokenPage/SelectTokenPage.tsx | 6 +- .../SelectWalletPage/SelectWalletPage.tsx | 2 +- .../src/pages/SendToWallet/BookmarksPage.tsx | 2 +- .../SendToWallet/ConnectedWalletsPage.tsx | 2 +- .../pages/SendToWallet/RecentWalletsPage.tsx | 2 +- .../SendToConfiguredWalletPage.tsx | 2 +- .../pages/SendToWallet/SendToWalletPage.tsx | 2 +- .../src/pages/SettingsPage/SettingsPage.tsx | 4 +- .../TransactionDetailsPage.tsx | 2 +- .../TransactionHistoryPage.tsx | 4 +- .../TransactionPage/StatusBottomSheet.tsx | 2 +- .../pages/TransactionPage/TransactionPage.tsx | 2 +- .../WalletProvider/EVMBaseProvider.tsx | 2 +- .../providers/WalletProvider/EVMProvider.tsx | 2 +- .../providers/WalletProvider/SVMProvider.tsx | 2 +- .../WidgetProvider/WidgetProvider.tsx | 2 +- .../widget/src/stores/form/createFormStore.ts | 1 - .../widget/src/stores/form/useValidation.ts | 1 + prettier.config.js | 11 +++ yarn.lock | 79 +++++++++++++++++-- 87 files changed, 269 insertions(+), 188 deletions(-) delete mode 100644 .prettierrc create mode 100644 prettier.config.js diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index a20502b7f..000000000 --- a/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "singleQuote": true, - "trailingComma": "all" -} diff --git a/package.json b/package.json index c6639dd18..8ffced69e 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^15.0.2", "@testing-library/user-event": "^14.5.2", + "@trivago/prettier-plugin-sort-imports": "^4.3.0", "@types/eslint": "^8.56.9", "@types/events": "^3.0.3", "@types/node": "^20.12.7", diff --git a/packages/wallet-management/package.json b/packages/wallet-management/package.json index 766d0042d..5a442ca98 100644 --- a/packages/wallet-management/package.json +++ b/packages/wallet-management/package.json @@ -15,7 +15,8 @@ "clean": "yarn build:clean && rm -rf dist", "check:types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix --max-warnings=0", + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types" }, "publishConfig": { diff --git a/packages/widget-embedded/package.json b/packages/widget-embedded/package.json index 356648741..932a09fea 100644 --- a/packages/widget-embedded/package.json +++ b/packages/widget-embedded/package.json @@ -10,7 +10,8 @@ "clean": "rm -rf dist tsconfig.tsbuildinfo", "preview": "vite preview", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix --max-warnings=0", + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types" }, "publishConfig": { diff --git a/packages/widget-embedded/src/components/NFTOpenSea/useOpenSeaFulfillment.tsx b/packages/widget-embedded/src/components/NFTOpenSea/useOpenSeaFulfillment.tsx index c047f4359..c092c479a 100644 --- a/packages/widget-embedded/src/components/NFTOpenSea/useOpenSeaFulfillment.tsx +++ b/packages/widget-embedded/src/components/NFTOpenSea/useOpenSeaFulfillment.tsx @@ -3,7 +3,7 @@ import type { NFTProps } from '@lifi/widget'; import { useAccount, useFieldValues } from '@lifi/widget'; import { Seaport } from '@opensea/seaport-js'; import { useQuery } from '@tanstack/react-query'; -import { useConfig, type Connector } from 'wagmi'; +import { type Connector, useConfig } from 'wagmi'; import { getEthersSigner } from './getEthersSigner'; import type { FulfillmentDataResponse, NFTNetwork } from './types'; import { ChainId as OpenSeaChainId } from './types'; diff --git a/packages/widget-embedded/src/components/NFTOpenSea/utils.ts b/packages/widget-embedded/src/components/NFTOpenSea/utils.ts index 2f70099a4..4d23b076c 100644 --- a/packages/widget-embedded/src/components/NFTOpenSea/utils.ts +++ b/packages/widget-embedded/src/components/NFTOpenSea/utils.ts @@ -11,8 +11,8 @@ import type { OpenSeaUser, Order, OrderJSON, - OrdersQueryOptions, OrderV2, + OrdersQueryOptions, SerializedOrderV2, Transaction, } from './types'; diff --git a/packages/widget-embedded/src/providers/WalletProvider.tsx b/packages/widget-embedded/src/providers/WalletProvider.tsx index 15952fc99..e106f3652 100644 --- a/packages/widget-embedded/src/providers/WalletProvider.tsx +++ b/packages/widget-embedded/src/providers/WalletProvider.tsx @@ -28,7 +28,7 @@ import { xdefi, } from '@lifi/wallet-management'; import { formatChain, useAvailableChains } from '@lifi/widget'; -import { useMemo, type FC, type PropsWithChildren } from 'react'; +import { type FC, type PropsWithChildren, useMemo } from 'react'; import type { Chain } from 'viem'; import { createClient } from 'viem'; import { WagmiProvider, createConfig, http } from 'wagmi'; diff --git a/packages/widget-playground-next/package.json b/packages/widget-playground-next/package.json index a9bee56e9..d79d5c5b0 100644 --- a/packages/widget-playground-next/package.json +++ b/packages/widget-playground-next/package.json @@ -6,7 +6,8 @@ "build": "next build", "start": "next start", "lint": "next lint", - "pre-commit:validate": "next lint --fix --max-warnings=0" + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && next lint --fix --max-warnings=0" }, "publishConfig": { "access": "public" diff --git a/packages/widget-playground-next/src/app/layout.tsx b/packages/widget-playground-next/src/app/layout.tsx index 25ab4244a..382e85885 100644 --- a/packages/widget-playground-next/src/app/layout.tsx +++ b/packages/widget-playground-next/src/app/layout.tsx @@ -1,5 +1,5 @@ -import type { Metadata } from 'next'; import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; +import type { Metadata } from 'next'; export const metadata: Metadata = { title: 'LI.FI Widget', diff --git a/packages/widget-playground-next/src/app/page.tsx b/packages/widget-playground-next/src/app/page.tsx index e4bac3368..6be07e0b0 100644 --- a/packages/widget-playground-next/src/app/page.tsx +++ b/packages/widget-playground-next/src/app/page.tsx @@ -3,24 +3,21 @@ // This polyfill is only needed for the Next.js implementation // the lack of structureClone support for Next.js is currently a requested feature // https://github.com/vercel/next.js/discussions/33189 -import 'core-js/actual/structured-clone'; -import { type PropsWithChildren } from 'react'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { Box } from '@mui/material'; - +import { WidgetNextView } from '@/app/WidgetNextView'; import { - EnvVariablesProvider, - EditToolsProvider, - WidgetConfigProvider, - PlaygroundThemeProvider, DrawerControls, + EditToolsProvider, + EnvVariablesProvider, FontLoaderProvider, + PlaygroundThemeProvider, + WidgetConfigProvider, } from '@lifi/widget-playground'; - -import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; - import '@lifi/widget-playground/fonts'; -import { WidgetNextView } from '@/app/WidgetNextView'; +import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; +import { Box } from '@mui/material'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import 'core-js/actual/structured-clone'; +import { type PropsWithChildren } from 'react'; const queryClient = new QueryClient(); diff --git a/packages/widget-playground-vite/package.json b/packages/widget-playground-vite/package.json index 6b8162ec8..3ce490a01 100644 --- a/packages/widget-playground-vite/package.json +++ b/packages/widget-playground-vite/package.json @@ -10,7 +10,8 @@ "preview": "vite preview", "check:types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix --max-warnings=0" + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0" }, "publishConfig": { "access": "public" diff --git a/packages/widget-playground-vite/src/App.tsx b/packages/widget-playground-vite/src/App.tsx index 13b2aacf2..159e52f71 100644 --- a/packages/widget-playground-vite/src/App.tsx +++ b/packages/widget-playground-vite/src/App.tsx @@ -1,20 +1,17 @@ -import { type PropsWithChildren } from 'react'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { Box } from '@mui/material'; - import { - EnvVariablesProvider, + DrawerControls, EditToolsProvider, - WidgetConfigProvider, + EnvVariablesProvider, + FontLoaderProvider, PlaygroundThemeProvider, - DrawerControls, + WidgetConfigProvider, WidgetView, - FontLoaderProvider, } from '@lifi/widget-playground'; - -import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; - import '@lifi/widget-playground/fonts'; +import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; +import { Box } from '@mui/material'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { type PropsWithChildren } from 'react'; const queryClient = new QueryClient(); diff --git a/packages/widget-playground-vite/src/index.tsx b/packages/widget-playground-vite/src/index.tsx index 4274b1de5..7aba4a10e 100644 --- a/packages/widget-playground-vite/src/index.tsx +++ b/packages/widget-playground-vite/src/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import { App } from './App'; -import { reportWebVitals } from './reportWebVitals'; import './index.css'; +import { reportWebVitals } from './reportWebVitals'; const rootElement = document.getElementById('root'); if (!rootElement) { diff --git a/packages/widget-playground/package.json b/packages/widget-playground/package.json index e1a298e64..cc0364b8f 100644 --- a/packages/widget-playground/package.json +++ b/packages/widget-playground/package.json @@ -12,10 +12,11 @@ "clean": "yarn build:clean && rm -rf dist", "types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", + "format": "prettier --write ./src/", "check:types": "tsc --noEmit", "test": "vitest run", "test:watch": "vitest", - "pre-commit:validate": "yarn lint --fix --max-warnings=0", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types & yarn test" }, "publishConfig": { diff --git a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx index e462dcd03..6d0e700ed 100644 --- a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx +++ b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx @@ -1,11 +1,11 @@ +import { Collapse } from '@mui/material'; import type { FC, PropsWithChildren, ReactNode } from 'react'; import { useId } from 'react'; -import { Collapse } from '@mui/material'; import { Card, CardRowButton, - CardValue, CardTitleContainer, + CardValue, } from '../Card.style'; import { useExpandableCard } from './useExpandableCard'; diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx index ff7fa6d38..68caac033 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx @@ -1,6 +1,5 @@ -import { Box, Typography } from '@mui/material'; import TabContext from '@mui/lab/TabContext'; -import { useEditToolsActions, useCodeToolValues } from '../../../store'; +import { Box, Typography } from '@mui/material'; import { CRALogo, GatsbyLogo, @@ -12,12 +11,13 @@ import { ViteLogo, VueLogo, } from '../../../logo'; +import { useCodeToolValues, useEditToolsActions } from '../../../store'; import { Card } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; import { TabContentContainer } from '../DrawerControls.style'; import { CodeEditor } from './CodeEditor'; -import { ProjectButton } from './ProjectButton'; import { FontEmbedInfo } from './FontEmbedInfo'; +import { ProjectButton } from './ProjectButton'; export const CodeControl = () => { const { codeControlTab } = useCodeToolValues(); diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx index f8936844a..cd5beb4d2 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx @@ -1,17 +1,17 @@ -import { useEffect, useRef, useState } from 'react'; -import { Tooltip, useTheme } from '@mui/material'; -import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import type { BeforeMount, OnMount } from '@monaco-editor/react'; import Editor from '@monaco-editor/react'; +import ContentCopyIcon from '@mui/icons-material/ContentCopy'; +import { Tooltip, useTheme } from '@mui/material'; +import { useEffect, useRef, useState } from 'react'; import { useThemeMode } from '../../../hooks'; +import { getConfigOutput, useConfig } from '../../../store'; import { tooltipPopperZIndex } from '../DrawerControls.style'; import { CodeContainer, - EditorContainer, CodeCopyButton, + EditorContainer, EditorSkeleton, } from './CodeControl.style'; -import { useConfig, getConfigOutput } from '../../../store'; import { stringifyConfig } from './utils/stringifyConfig'; interface MonacoEditor { diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx index 068edbc93..74ef347a8 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx @@ -1,23 +1,23 @@ -import type { MouseEventHandler } from 'react'; -import { useState } from 'react'; +import CloseIcon from '@mui/icons-material/Close'; +import InfoIcon from '@mui/icons-material/Info'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import { + Box, + ClickAwayListener, IconButton, Popper, Tooltip, Typography, - ClickAwayListener, - Box, } from '@mui/material'; -import InfoIcon from '@mui/icons-material/Info'; -import OpenInNewIcon from '@mui/icons-material/OpenInNew'; -import CloseIcon from '@mui/icons-material/Close'; +import type { MouseEventHandler } from 'react'; +import { useState } from 'react'; +import { useFontToolValues } from '../../../store'; import { popperZIndex, tooltipPopperZIndex } from '../DrawerControls.style'; import { FontEmbedPopperContainer, FontMessageCloseButton, GoogleFontLink, } from './CodeControl.style'; -import { useFontToolValues } from '../../../store'; interface FontMessageProps { fontFamily: string; diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx index 66bcbe20e..a6f2bc21b 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx @@ -1,5 +1,5 @@ import type { PropsWithChildren, ReactNode } from 'react'; -import { ProjectButtonBase, ProjectAvatar } from './CodeControl.style'; +import { ProjectAvatar, ProjectButtonBase } from './CodeControl.style'; interface ProjectButtonProps extends PropsWithChildren { href: string; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx index 3eaa86ce7..a010d69b4 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx @@ -1,3 +1,10 @@ +import type { Appearance, WidgetTheme } from '@lifi/widget'; +import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; +import LightModeIcon from '@mui/icons-material/LightMode'; +import NightlightIcon from '@mui/icons-material/Nightlight'; +import type { TabProps } from '@mui/material'; +import { Box, Tooltip } from '@mui/material'; +import diff from 'microdiff'; import type { FC, PropsWithChildren, @@ -5,26 +12,19 @@ import type { SyntheticEvent, } from 'react'; import { useEffect } from 'react'; -import type { TabProps } from '@mui/material'; -import { Box, Tooltip } from '@mui/material'; -import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; -import LightModeIcon from '@mui/icons-material/LightMode'; -import NightlightIcon from '@mui/icons-material/Nightlight'; -import diff from 'microdiff'; -import type { Appearance, WidgetTheme } from '@lifi/widget'; +import type { ThemeMode } from '../../../hooks'; +import { useThemeMode } from '../../../hooks'; import { useConfigActions, useConfigAppearance, useEditToolsActions, useThemeValues, } from '../../../store'; -import { ExpandableCard, CardValue } from '../../Card'; -import { Tab, Tabs } from '../../Tabs'; -import { Badge, CapitalizeFirstLetter } from './DesignControls.style'; import type { ThemeItem } from '../../../store'; -import type { ThemeMode } from '../../../hooks'; -import { useThemeMode } from '../../../hooks'; import { cloneStructuredConfig, patch } from '../../../utils'; +import { CardValue, ExpandableCard } from '../../Card'; +import { Tab, Tabs } from '../../Tabs'; +import { Badge, CapitalizeFirstLetter } from './DesignControls.style'; const appearanceIcons = { light: LightModeIcon, diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx index f3032a693..83bb0f757 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx @@ -1,13 +1,13 @@ import type { BoxProps } from '@mui/material'; -import { safe6DigitHexColor } from '../../../utils'; import { useConfigActions, useConfigColorsFromPath } from '../../../store'; +import { safe6DigitHexColor } from '../../../utils'; import { ExpandableCard } from '../../Card'; import { + CapitalizeFirstLetter, + ColorInput, ColorSelectorContainer, ColorSwatch, ColorSwatches, - ColorInput, - CapitalizeFirstLetter, } from './DesignControls.style'; const editableColors = { diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx index fd34f5911..17ecd617e 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx @@ -1,25 +1,25 @@ -import { alpha, styled } from '@mui/material/styles'; -import { inputBaseClasses } from '@mui/material/InputBase'; -import { autocompleteClasses } from '@mui/material/Autocomplete'; -import { alertClasses } from '@mui/material/Alert'; import type { + AutocompleteProps, BoxProps, InputBaseProps, Theme, - AutocompleteProps, } from '@mui/material'; import { Box, ButtonBase, InputBase, - Autocomplete as MuiAutocomplete, - Popper, Alert as MuiAlert, + Autocomplete as MuiAutocomplete, + Badge as MuiBadge, Select as MuiSelect, + Popper, Typography, - Badge as MuiBadge, badgeClasses, } from '@mui/material'; +import { alertClasses } from '@mui/material/Alert'; +import { autocompleteClasses } from '@mui/material/Autocomplete'; +import { inputBaseClasses } from '@mui/material/InputBase'; +import { alpha, styled } from '@mui/material/styles'; import { getCardFieldsetBackgroundColor } from '../../../utils'; import { autocompletePopperZIndex } from '../DrawerControls.style'; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx index 5d742d1ba..eb79f5265 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx @@ -1,17 +1,17 @@ +import InfoIcon from '@mui/icons-material/Info'; +import { CircularProgress, TextField } from '@mui/material'; import type { FocusEventHandler, SyntheticEvent } from 'react'; import { useCallback } from 'react'; -import { CircularProgress, TextField } from '@mui/material'; -import InfoIcon from '@mui/icons-material/Info'; +import type { Font } from '../../../../providers'; +import { useFontLoader } from '../../../../providers'; import { useConfigActions, useEditToolsActions, useFontToolValues, } from '../../../../store'; -import type { Font } from '../../../../providers'; -import { useFontLoader } from '../../../../providers'; import { ExpandableCard } from '../../../Card'; -import { Autocomplete, StyledPopper, Alert } from '../DesignControls.style'; -import { defaultFont, allFonts } from './fontDefinitions'; +import { Alert, Autocomplete, StyledPopper } from '../DesignControls.style'; +import { allFonts, defaultFont } from './fontDefinitions'; const getCompleteFontFamily = (font: Font) => font.fallbackFonts diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts index 2c025d1e0..3770fcc44 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts @@ -1,6 +1,6 @@ import type { Font } from '../../../../../providers'; -import { systemFonts } from './systemFonts'; import { googleFonts } from './googleFonts'; +import { systemFonts } from './systemFonts'; // NOTE: although this is a google font, as the widget playground itself is using Inter we don't // need to download the font files as they should already be downloaded - thus no fontFiles are defined diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx index 13000c105..c188f056d 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx @@ -1,11 +1,11 @@ +import SettingsIcon from '@mui/icons-material/Settings'; import type { BoxProps } from '@mui/material'; import { useTheme } from '@mui/material'; -import SettingsIcon from '@mui/icons-material/Settings'; -import { safe6DigitHexColor } from '../../../utils'; import { useEditToolsActions, usePlaygroundSettingValues, } from '../../../store'; +import { safe6DigitHexColor } from '../../../utils'; import { ExpandableCard } from '../../Card'; import { CapitalizeFirstLetter, diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx index 87bdb2907..dc55fe006 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx @@ -1,8 +1,8 @@ -import type { SyntheticEvent } from 'react'; import type { WidgetSubvariant } from '@lifi/widget'; +import type { SyntheticEvent } from 'react'; import { useConfigActions, useConfigSubvariant } from '../../../store'; -import { Tab, Tabs } from '../../Tabs'; import { CardValue, ExpandableCard } from '../../Card'; +import { Tab, Tabs } from '../../Tabs'; export const SubvariantControl = () => { const { subvariant } = useConfigSubvariant(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx index c25e521d1..fe0ac5628 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx @@ -1,15 +1,16 @@ import type { SelectChangeEvent } from '@mui/material'; import { MenuItem } from '@mui/material'; -import { CardValue, ExpandableCard } from '../../Card'; +import { useThemeMode } from '../../../hooks'; import { useConfigActions, useEditToolsActions, useThemeValues, } from '../../../store'; +import type { ThemeItem } from '../../../store'; +import { CardValue, ExpandableCard } from '../../Card'; import { popperZIndex } from '../DrawerControls.style'; import { Select } from './DesignControls.style'; -import type { ThemeItem } from '../../../store'; -import { useThemeMode } from '../../../hooks'; + export const ThemeControl = () => { const { setConfigTheme } = useConfigActions(); const themeMode = useThemeMode(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx index ae63633d4..5ea5ed6d8 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx @@ -1,8 +1,8 @@ -import type { SyntheticEvent } from 'react'; import type { WidgetVariant } from '@lifi/widget'; +import type { SyntheticEvent } from 'react'; import { useConfigActions, useConfigVariant } from '../../../store'; -import { Tab, Tabs } from '../../Tabs'; import { CardValue, ExpandableCard } from '../../Card'; +import { Tab, Tabs } from '../../Tabs'; export const VariantControl = () => { const { variant } = useConfigVariant(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx index ce74a32c8..132ae3478 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx @@ -1,3 +1,5 @@ +import * as React from 'react'; +import { useConfigActions, useConfigWalletManagement } from '../../../store'; import { Card, CardRowContainer, @@ -5,8 +7,6 @@ import { CardValue, } from '../../Card'; import { Switch } from '../../Switch'; -import { useConfigActions, useConfigWalletManagement } from '../../../store'; -import * as React from 'react'; export const WalletManagementControl = () => { const { isExternalWalletManagement, replacementWalletConfig } = diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx index 73f9ccb52..4de0c51aa 100644 --- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx @@ -1,11 +1,12 @@ +import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; +import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; +import TabPanel from '@mui/lab/TabPanel'; import type { ButtonBaseProps, DrawerProps as MuiDrawerProps, } from '@mui/material'; import { Box, ButtonBase, Drawer as MuiDrawer, styled } from '@mui/material'; -import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; -import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; -import TabPanel from '@mui/lab/TabPanel'; + export const drawerZIndex = 1501; export const autocompletePopperZIndex = drawerZIndex + 1; export const tooltipPopperZIndex = drawerZIndex + 2; diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx index 4369158be..e6d52bc20 100644 --- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx @@ -4,13 +4,15 @@ import IntegrationInstructionsIcon from '@mui/icons-material/IntegrationInstruct import RestartAltIcon from '@mui/icons-material/RestartAlt'; import TabContext from '@mui/lab/TabContext'; import { Box, IconButton, Tooltip } from '@mui/material'; +import { useFontInitialisation } from '../../providers'; import { useConfigActions, - useEditToolsActions, useDrawerToolValues, + useEditToolsActions, } from '../../store'; import { ExpandableCardAccordion } from '../Card'; import { Tab, Tabs } from '../Tabs'; +import { CodeControl } from './CodeControl'; import { AppearanceControl, ButtonRadiusControl, @@ -29,12 +31,10 @@ import { Header, HeaderRow, TabContentContainer, - tooltipPopperZIndex, WidgetConfigControls, + tooltipPopperZIndex, } from './DrawerControls.style'; -import { CodeControl } from './CodeControl'; import { DrawerHandle } from './DrawerHandle'; -import { useFontInitialisation } from '../../providers'; export const DrawerControls = () => { const { isDrawerOpen, drawerWidth, visibleControls } = useDrawerToolValues(); diff --git a/packages/widget-playground/src/components/LifiLogo.tsx b/packages/widget-playground/src/components/LifiLogo.tsx index bca1cbcfd..c9906217a 100644 --- a/packages/widget-playground/src/components/LifiLogo.tsx +++ b/packages/widget-playground/src/components/LifiLogo.tsx @@ -1,5 +1,5 @@ -import type { FC, SVGProps } from 'react'; import { styled } from '@mui/material'; +import type { FC, SVGProps } from 'react'; const LifiLogoBase: FC> = (props) => { return ( diff --git a/packages/widget-playground/src/components/Switch.tsx b/packages/widget-playground/src/components/Switch.tsx index 1c0bc574e..fe043e2ac 100644 --- a/packages/widget-playground/src/components/Switch.tsx +++ b/packages/widget-playground/src/components/Switch.tsx @@ -1,6 +1,6 @@ import { Switch as MuiSwitch } from '@mui/material'; -import { alpha, styled } from '@mui/material/styles'; import { switchClasses } from '@mui/material/Switch'; +import { alpha, styled } from '@mui/material/styles'; export const Switch = styled(MuiSwitch)(({ theme }) => ({ width: 42, diff --git a/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx b/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx index 5d0b7a989..8892646ed 100644 --- a/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx +++ b/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx @@ -1,7 +1,7 @@ +import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; +import WalletIcon from '@mui/icons-material/Wallet'; import { Box } from '@mui/material'; import { useAccount, useConnect, useConnectors, useDisconnect } from 'wagmi'; -import WalletIcon from '@mui/icons-material/Wallet'; -import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; import { shortenAddress } from '../../utils'; import { ConnectionWalletButtonBase } from './WidgetView.style'; diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index 8fa9c6b93..b3ca1cedb 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -5,8 +5,8 @@ import type { PropsWithChildren } from 'react'; import { ExternalWalletProvider } from '../../providers'; import { useConfig, - useEditToolsActions, useDrawerToolValues, + useEditToolsActions, } from '../../store'; import { ToggleDrawerButton } from './ToggleDrawerButton'; import { diff --git a/packages/widget-playground/src/hooks/useThemeMode.ts b/packages/widget-playground/src/hooks/useThemeMode.ts index b695ece86..3d07bc5d9 100644 --- a/packages/widget-playground/src/hooks/useThemeMode.ts +++ b/packages/widget-playground/src/hooks/useThemeMode.ts @@ -1,5 +1,5 @@ -import { useConfigAppearance } from '../store'; import { useMediaQuery } from '@mui/material'; +import { useConfigAppearance } from '../store'; export type ThemeMode = 'dark' | 'light'; diff --git a/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx b/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx index 05ee1f2ab..387b50566 100644 --- a/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx +++ b/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx @@ -1,13 +1,13 @@ import { formatChain, useAvailableChains } from '@lifi/widget'; import { RainbowKitProvider, + type Theme as RainbowKitTheme, darkTheme, getDefaultConfig, lightTheme, - type Theme as RainbowKitTheme, } from '@rainbow-me/rainbowkit'; import '@rainbow-me/rainbowkit/styles.css'; -import { useMemo, type FC, type PropsWithChildren } from 'react'; +import { type FC, type PropsWithChildren, useMemo } from 'react'; import type { Chain } from 'viem'; import { WagmiProvider } from 'wagmi'; import { mainnet } from 'wagmi/chains'; diff --git a/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx b/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx index b7e0c2f6a..70392fa6f 100644 --- a/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx +++ b/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx @@ -1,4 +1,3 @@ -import type { FC, PropsWithChildren } from 'react'; import type { Adapter } from '@solana/wallet-adapter-base'; import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'; import { @@ -6,6 +5,7 @@ import { WalletProvider, } from '@solana/wallet-adapter-react'; import { clusterApiUrl } from '@solana/web3.js'; +import type { FC, PropsWithChildren } from 'react'; const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet); /** diff --git a/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx b/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx index aa8c33b44..a39ad19e3 100644 --- a/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx +++ b/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx @@ -1,7 +1,7 @@ -import type { PropsWithChildren } from 'react'; -import { createContext, useContext, useEffect, useState } from 'react'; import type { UseMutateAsyncFunction } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query'; +import type { PropsWithChildren } from 'react'; +import { createContext, useContext, useEffect, useState } from 'react'; import { allFonts } from '../../components/DrawerControls/DesignControls'; import { useConfigFontFamily, useEditToolsActions } from '../../store'; import type { Font } from './types'; diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx b/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx index 8df5dbcf8..4900c4b39 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx @@ -1,14 +1,14 @@ +import { CssBaseline, ThemeProvider } from '@mui/material'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import { CssBaseline, ThemeProvider } from '@mui/material'; -import { usePlaygroundSettingValues } from '../../store'; import { useThemeMode } from '../../hooks'; +import { usePlaygroundSettingValues } from '../../store'; import { theme } from './theme'; import { - lightPalette, - darkPalette, darkComponents, + darkPalette, lightComponents, + lightPalette, } from './themeOverrides'; const appearancePaletteOverrides = { diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts index 89fbbda75..6a223a34e 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts @@ -1,4 +1,5 @@ import type { WidgetTheme } from '@lifi/widget'; + export const lightPalette = { mode: 'light', text: { diff --git a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx index 55d624ed1..3b3e84233 100644 --- a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx +++ b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx @@ -1,9 +1,9 @@ import type { FC, PropsWithChildren } from 'react'; import { createContext, useContext, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import type { ToolsState, ToolsStore } from './types'; -import { createEditToolsStore } from './createEditToolsStore'; import { useConfigActions } from '../widgetConfig'; +import { createEditToolsStore } from './createEditToolsStore'; +import type { ToolsState, ToolsStore } from './types'; export const EditToolsContext = createContext(null); diff --git a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts index 0c6460fa6..725a98d6c 100644 --- a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts +++ b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts @@ -1,9 +1,9 @@ +import type { WidgetTheme } from '@lifi/widget'; import type { StateCreator } from 'zustand'; -import { createWithEqualityFn } from 'zustand/traditional'; import { persist } from 'zustand/middleware'; -import type { WidgetTheme } from '@lifi/widget'; -import type { ToolsState } from './types'; +import { createWithEqualityFn } from 'zustand/traditional'; import { defaultDrawerWidth } from './constants'; +import type { ToolsState } from './types'; export const createEditToolsStore = (initialTheme?: WidgetTheme) => createWithEqualityFn( diff --git a/packages/widget-playground/src/store/editTools/types.ts b/packages/widget-playground/src/store/editTools/types.ts index a5665f9e8..b41f70836 100644 --- a/packages/widget-playground/src/store/editTools/types.ts +++ b/packages/widget-playground/src/store/editTools/types.ts @@ -1,7 +1,7 @@ -import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; +import type { WidgetTheme } from '@lifi/widget'; import type { StoreApi } from 'zustand'; +import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; import type { Font } from '../../providers'; -import type { WidgetTheme } from '@lifi/widget'; type ControlType = 'design' | 'code'; type CodeControlTab = 'config' | 'examples'; diff --git a/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx b/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx index 4c4c2f74c..951afd957 100644 --- a/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx +++ b/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx @@ -1,16 +1,16 @@ -import type { FC, PropsWithChildren } from 'react'; +import type { WidgetConfig } from '@lifi/widget'; +import { useMediaQuery } from '@mui/material'; +import isEqual from 'lodash.isequal'; import diff from 'microdiff'; +import type { FC, PropsWithChildren } from 'react'; import { createContext, useContext, useEffect, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import type { WidgetConfig } from '@lifi/widget'; -import type { WidgetConfigStore, WidgetConfigState } from './types.js'; -import { createWidgetConfigStore } from './createWidgetConfigStore.js'; -import isEqual from 'lodash.isequal'; -import { cloneStructuredConfig } from '../../utils/cloneStructuredConfig'; import { patch } from '../../utils'; -import { getConfigOutput } from './utils/getConfigOutput'; +import { cloneStructuredConfig } from '../../utils/cloneStructuredConfig'; +import { createWidgetConfigStore } from './createWidgetConfigStore.js'; import { themeItems } from './themes'; -import { useMediaQuery } from '@mui/material'; +import type { WidgetConfigState, WidgetConfigStore } from './types.js'; +import { getConfigOutput } from './utils/getConfigOutput'; export const WidgetConfigContext = createContext( null, diff --git a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts index 13ff9b6f5..10ba78812 100644 --- a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts +++ b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts @@ -1,11 +1,11 @@ -import { createWithEqualityFn } from 'zustand/traditional'; import type { WidgetConfig, WidgetTheme } from '@lifi/widget'; import type { StateCreator } from 'zustand'; import { persist } from 'zustand/middleware'; +import { createWithEqualityFn } from 'zustand/traditional'; import { addValueFromPathString, cloneStructuredConfig } from '../../utils'; +import type { ThemeItem } from '../editTools/types'; import type { WidgetConfigState } from './types'; import { getLocalStorageOutput } from './utils/getLocalStorageOutput'; -import type { ThemeItem } from '../editTools/types'; import { setThemeAppearanceWithFallback } from './utils/setThemeWithFallback'; export const createWidgetConfigStore = ( diff --git a/packages/widget-playground/src/store/widgetConfig/types.ts b/packages/widget-playground/src/store/widgetConfig/types.ts index 6be9dc690..8c2431b0a 100644 --- a/packages/widget-playground/src/store/widgetConfig/types.ts +++ b/packages/widget-playground/src/store/widgetConfig/types.ts @@ -6,8 +6,8 @@ import type { WidgetVariant, WidgetWalletConfig, } from '@lifi/widget'; -import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; import type { StoreApi } from 'zustand'; +import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; import type { ThemeItem } from '../editTools/types'; export interface WidgetConfigValues { diff --git a/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts b/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts index 7fcd99a85..4aba8bea4 100644 --- a/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts +++ b/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts @@ -1,8 +1,8 @@ -import { shallow } from 'zustand/shallow'; import { palette, paletteDark, paletteLight } from '@lifi/widget'; -import { useWidgetConfigStore } from './WidgetConfigProvider'; -import { getValueFromPath } from '../../utils'; +import { shallow } from 'zustand/shallow'; import { useThemeMode } from '../../hooks'; +import { getValueFromPath } from '../../utils'; +import { useWidgetConfigStore } from './WidgetConfigProvider'; export const useConfigVariant = () => { const [variant] = useWidgetConfigStore( diff --git a/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts b/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts index f41011777..bfa0980cf 100644 --- a/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts +++ b/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts @@ -1,6 +1,6 @@ import type { WidgetTheme } from '@lifi/widget'; -import { replayLocalStorageChangesOnTheme } from './replayLocalStorageChangesOnTheme'; import type { WidgetConfigState } from '../types'; +import { replayLocalStorageChangesOnTheme } from './replayLocalStorageChangesOnTheme'; export const setThemeAppearanceWithFallback = ( state: WidgetConfigState, diff --git a/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts b/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts index 6e1635e2b..177c16453 100644 --- a/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts +++ b/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts @@ -1,6 +1,6 @@ -import { expect, test, describe } from 'vitest'; -import { cloneStructuredConfig } from './cloneStructuredConfig'; import type { WidgetConfig } from '@lifi/widget'; +import { describe, expect, test } from 'vitest'; +import { cloneStructuredConfig } from './cloneStructuredConfig'; describe('cloneStructuredConfig', () => { test('performs a deep clone', () => { diff --git a/packages/widget-playground/src/utils/cloneStructuredConfig.ts b/packages/widget-playground/src/utils/cloneStructuredConfig.ts index c540ec1ab..a64b9243e 100644 --- a/packages/widget-playground/src/utils/cloneStructuredConfig.ts +++ b/packages/widget-playground/src/utils/cloneStructuredConfig.ts @@ -1,6 +1,6 @@ -import { substituteFunctions } from './substituteFunctions'; import { rehydrateFunctions } from '../store/widgetConfig/utils/rehydrateFunctions'; import type { FunctionReference, ObjectWithFunctions } from '../types'; +import { substituteFunctions } from './substituteFunctions'; const shallowReferences = () => { let referencesDictionary: FunctionReference[] = []; diff --git a/packages/widget/package.json b/packages/widget/package.json index 0fe2734a4..735269b9a 100644 --- a/packages/widget/package.json +++ b/packages/widget/package.json @@ -18,7 +18,8 @@ "check:circular-deps": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx')", "check:circular-deps-graph": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx') --image graph.svg", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix", + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types & yarn check:circular-deps" }, "publishConfig": { diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx index 62d2f29cd..16cbe0e89 100644 --- a/packages/widget/src/App.tsx +++ b/packages/widget/src/App.tsx @@ -1,4 +1,5 @@ 'use client'; + import { forwardRef, useMemo } from 'react'; import { AppDefault } from './AppDefault.js'; import type { WidgetDrawer } from './AppDrawer.js'; diff --git a/packages/widget/src/AppDefault.tsx b/packages/widget/src/AppDefault.tsx index 2d24f5e84..c89652fe1 100644 --- a/packages/widget/src/AppDefault.tsx +++ b/packages/widget/src/AppDefault.tsx @@ -1,4 +1,5 @@ 'use client'; + import { AppRoutes } from './AppRoutes.js'; import { AppContainer, diff --git a/packages/widget/src/hooks/useGasRecommendation.ts b/packages/widget/src/hooks/useGasRecommendation.ts index 122469e2c..793c76df5 100644 --- a/packages/widget/src/hooks/useGasRecommendation.ts +++ b/packages/widget/src/hooks/useGasRecommendation.ts @@ -1,4 +1,4 @@ -import { getGasRecommendation, type ChainId } from '@lifi/sdk'; +import { type ChainId, getGasRecommendation } from '@lifi/sdk'; import { useQuery } from '@tanstack/react-query'; import { useAvailableChains } from './useAvailableChains.js'; diff --git a/packages/widget/src/hooks/useToken.ts b/packages/widget/src/hooks/useToken.ts index 52ddda2a8..9850e6fb8 100644 --- a/packages/widget/src/hooks/useToken.ts +++ b/packages/widget/src/hooks/useToken.ts @@ -1,6 +1,6 @@ import { useMemo } from 'react'; -import { useTokens } from './useTokens.js'; import { useTokenSearch } from './useTokenSearch.js'; +import { useTokens } from './useTokens.js'; export const useToken = (chainId?: number, tokenAddress?: string) => { const { tokens, isLoading } = useTokens(chainId); diff --git a/packages/widget/src/hooks/useTokenBalance.ts b/packages/widget/src/hooks/useTokenBalance.ts index 414613573..a923afd3a 100644 --- a/packages/widget/src/hooks/useTokenBalance.ts +++ b/packages/widget/src/hooks/useTokenBalance.ts @@ -1,5 +1,5 @@ import type { ExtendedChain } from '@lifi/sdk'; -import { getTokenBalances, type Token, type TokenAmount } from '@lifi/sdk'; +import { type Token, type TokenAmount, getTokenBalances } from '@lifi/sdk'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { useCallback, useMemo } from 'react'; import { useAccount } from './useAccount.js'; diff --git a/packages/widget/src/hooks/useTokenSearch.ts b/packages/widget/src/hooks/useTokenSearch.ts index b693704eb..7d63abc69 100644 --- a/packages/widget/src/hooks/useTokenSearch.ts +++ b/packages/widget/src/hooks/useTokenSearch.ts @@ -1,4 +1,4 @@ -import { getToken, type ChainId, type TokensResponse } from '@lifi/sdk'; +import { type ChainId, type TokensResponse, getToken } from '@lifi/sdk'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import type { TokenAmount } from '../types/token.js'; diff --git a/packages/widget/src/hooks/useTools.ts b/packages/widget/src/hooks/useTools.ts index 31f82717e..c065da4da 100644 --- a/packages/widget/src/hooks/useTools.ts +++ b/packages/widget/src/hooks/useTools.ts @@ -1,4 +1,4 @@ -import { getTools, type ToolsResponse } from '@lifi/sdk'; +import { type ToolsResponse, getTools } from '@lifi/sdk'; import { useQuery } from '@tanstack/react-query'; import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'; import { useSettingsStore } from '../stores/settings/useSettingsStore.js'; diff --git a/packages/widget/src/hooks/useTransactionDetails.ts b/packages/widget/src/hooks/useTransactionDetails.ts index 6c9729df8..d98f22b76 100644 --- a/packages/widget/src/hooks/useTransactionDetails.ts +++ b/packages/widget/src/hooks/useTransactionDetails.ts @@ -1,5 +1,5 @@ import type { FullStatusData } from '@lifi/sdk'; -import { getStatus, type StatusResponse } from '@lifi/sdk'; +import { type StatusResponse, getStatus } from '@lifi/sdk'; import { keepPreviousData, useQuery, diff --git a/packages/widget/src/hooks/useTransactionHistory.ts b/packages/widget/src/hooks/useTransactionHistory.ts index d3c056113..5fda1c760 100644 --- a/packages/widget/src/hooks/useTransactionHistory.ts +++ b/packages/widget/src/hooks/useTransactionHistory.ts @@ -1,5 +1,5 @@ import type { FullStatusData, StatusResponse } from '@lifi/sdk'; -import { getTransactionHistory, type ExtendedTransactionInfo } from '@lifi/sdk'; +import { type ExtendedTransactionInfo, getTransactionHistory } from '@lifi/sdk'; import type { QueryFunction } from '@tanstack/react-query'; import { useQueries } from '@tanstack/react-query'; import { useAccount } from './useAccount.js'; diff --git a/packages/widget/src/hooks/useWidgetEvents.ts b/packages/widget/src/hooks/useWidgetEvents.ts index a46b375f4..6a69a186d 100644 --- a/packages/widget/src/hooks/useWidgetEvents.ts +++ b/packages/widget/src/hooks/useWidgetEvents.ts @@ -1,5 +1,6 @@ import _mitt from 'mitt'; import type { WidgetEvents } from '../types/events.js'; + // https://github.com/developit/mitt/issues/191 const mitt = _mitt as unknown as typeof _mitt.default; diff --git a/packages/widget/src/pages/LanguagesPage.tsx b/packages/widget/src/pages/LanguagesPage.tsx index 9aa9c86a9..dfbfe4188 100644 --- a/packages/widget/src/pages/LanguagesPage.tsx +++ b/packages/widget/src/pages/LanguagesPage.tsx @@ -1,10 +1,10 @@ import { Check } from '@mui/icons-material'; import { List } from '@mui/material'; import { useTranslation } from 'react-i18next'; -import { useHeader } from '../hooks/useHeader.js'; import { ListItemText } from '../components/ListItemText.js'; import { PageContainer } from '../components/PageContainer.js'; import { SettingsListItemButton } from '../components/SettingsListItemButton.js'; +import { useHeader } from '../hooks/useHeader.js'; import { useLanguages } from '../hooks/useLanguages.js'; export const LanguagesPage: React.FC = () => { diff --git a/packages/widget/src/pages/MainPage/MainPage.tsx b/packages/widget/src/pages/MainPage/MainPage.tsx index 7230f61ac..06833224d 100644 --- a/packages/widget/src/pages/MainPage/MainPage.tsx +++ b/packages/widget/src/pages/MainPage/MainPage.tsx @@ -1,4 +1,5 @@ import { Box } from '@mui/material'; +import { useTranslation } from 'react-i18next'; import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTransactions.js'; import { AmountInput } from '../../components/AmountInput/AmountInput.js'; import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'; @@ -9,13 +10,12 @@ import { Routes } from '../../components/Routes/Routes.js'; import { SelectChainAndToken } from '../../components/SelectChainAndToken.js'; import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js'; import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useWideVariant } from '../../hooks/useWideVariant.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { HiddenUI } from '../../types/widget.js'; import { MainMessages } from './MainMessages.js'; import { ReviewButton } from './ReviewButton.js'; -import { useTranslation } from 'react-i18next'; export const MainPage: React.FC = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/RoutesPage/RoutesPage.tsx b/packages/widget/src/pages/RoutesPage/RoutesPage.tsx index 3028cc466..f4249e84c 100644 --- a/packages/widget/src/pages/RoutesPage/RoutesPage.tsx +++ b/packages/widget/src/pages/RoutesPage/RoutesPage.tsx @@ -2,20 +2,20 @@ import type { Route } from '@lifi/sdk'; import type { BoxProps } from '@mui/material'; import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'; import { RouteCard } from '../../components/RouteCard/RouteCard.js'; import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js'; import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js'; import { useAccount } from '../../hooks/useAccount.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useRoutes } from '../../hooks/useRoutes.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { Stack } from './RoutesPage.style.js'; -import { useTranslation } from 'react-i18next'; export const RoutesPage: React.FC = () => { const { navigate } = useNavigateBack(); diff --git a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx index 66324a909..e88e9206b 100644 --- a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx +++ b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx @@ -1,14 +1,14 @@ import type { ExtendedChain } from '@lifi/sdk'; import { Avatar, List, ListItemAvatar } from '@mui/material'; -import { useHeader } from '../../hooks/useHeader.js'; +import { useTranslation } from 'react-i18next'; import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js'; import { ListItemButton } from '../../components/ListItemButton.js'; import { ListItemText } from '../../components/ListItemText.js'; import { PageContainer } from '../../components/PageContainer.js'; import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import type { SelectChainPageProps } from './types.js'; -import { useTranslation } from 'react-i18next'; export const SelectChainPage: React.FC = ({ formType, diff --git a/packages/widget/src/pages/SelectEnabledToolsPage.tsx b/packages/widget/src/pages/SelectEnabledToolsPage.tsx index 39ce93e25..43b39328f 100644 --- a/packages/widget/src/pages/SelectEnabledToolsPage.tsx +++ b/packages/widget/src/pages/SelectEnabledToolsPage.tsx @@ -19,8 +19,8 @@ import { shallow } from 'zustand/shallow'; import { ListItemText } from '../components/ListItemText.js'; import { PageContainer } from '../components/PageContainer.js'; import { SettingsListItemButton } from '../components/SettingsListItemButton.js'; -import { useTools } from '../hooks/useTools.js'; import { useHeader } from '../hooks/useHeader.js'; +import { useTools } from '../hooks/useTools.js'; import { useSettingsStore } from '../stores/settings/useSettingsStore.js'; interface SelectAllCheckboxProps { diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx index c60369aa1..8736891b8 100644 --- a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx +++ b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx @@ -1,18 +1,18 @@ import { Box } from '@mui/material'; import type { FC } from 'react'; import { useLayoutEffect, useRef, useState } from 'react'; -import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; -import { useHeader } from '../../hooks/useHeader.js'; +import { useTranslation } from 'react-i18next'; import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'; import { PageContainer } from '../../components/PageContainer.js'; import { TokenList } from '../../components/TokenList/TokenList.js'; import { useContentHeight } from '../../hooks/useContentHeight.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'; import { useSwapOnly } from '../../hooks/useSwapOnly.js'; +import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import type { FormTypeProps } from '../../stores/form/types.js'; import { SearchTokenInput } from './SearchTokenInput.js'; -import { useTranslation } from 'react-i18next'; const minTokenListHeight = 360; diff --git a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx index 7f868a0e9..487ff5aec 100644 --- a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx +++ b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx @@ -18,12 +18,12 @@ import type { Connector } from 'wagmi'; import { useConnect, useAccount as useWagmiAccount } from 'wagmi'; import { Dialog } from '../../components/Dialog.js'; import { PageContainer } from '../../components/PageContainer.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { isItemAllowed } from '../../utils/item.js'; import { EVMListItemButton } from './EVMListItemButton.js'; import { SVMListItemButton } from './SVMListItemButton.js'; import { walletComparator } from './utils.js'; -import { useHeader } from '../../hooks/useHeader.js'; export const SelectWalletPage = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx index 5205b27ba..f2efedcca 100644 --- a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx +++ b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx @@ -15,13 +15,13 @@ import { ListItemButton } from '../../components/ListItem//ListItemButton.js'; import { ListItem } from '../../components/ListItem/ListItem.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; diff --git a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx index bc0b55146..553391d5b 100644 --- a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx +++ b/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx @@ -15,11 +15,11 @@ import { Menu } from '../../components/Menu.js'; import type { Account } from '../../hooks/useAccount.js'; import { useAccount } from '../../hooks/useAccount.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; import { EmptyListIndicator } from './EmptyListIndicator.js'; diff --git a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx index b08a8343d..3fbc25043 100644 --- a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx +++ b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx @@ -16,13 +16,13 @@ import { ListItem } from '../../components/ListItem/ListItem.js'; import { ListItemButton } from '../../components/ListItem/ListItemButton.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx index dbb208a1e..a8811fdb9 100644 --- a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx @@ -12,11 +12,11 @@ import { ListItem } from '../../components/ListItem/ListItem.js'; import { ListItemButton } from '../../components/ListItem/ListItemButton.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; -import { useHeader } from '../../hooks/useHeader.js'; import type { ToAddress } from '../../types/widget.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx index bc51afa92..66d40d5ae 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx @@ -13,13 +13,13 @@ import { useAddressValidation, } from '../../hooks/useAddressValidation.js'; import { useChain } from '../../hooks/useChain.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'; import { ConfirmAddressSheet } from './ConfirmAddressSheet.js'; diff --git a/packages/widget/src/pages/SettingsPage/SettingsPage.tsx b/packages/widget/src/pages/SettingsPage/SettingsPage.tsx index 2495012d9..51a629d91 100644 --- a/packages/widget/src/pages/SettingsPage/SettingsPage.tsx +++ b/packages/widget/src/pages/SettingsPage/SettingsPage.tsx @@ -1,4 +1,6 @@ +import { useTranslation } from 'react-i18next'; import { PageContainer } from '../../components/PageContainer.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js'; import { GasPriceSettings } from './GasPriceSettings.js'; import { LanguageSetting } from './LanguageSetting.js'; @@ -8,8 +10,6 @@ import { SettingsList } from './SettingsCard/SettingCard.style.js'; import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'; import { SlippageSettings } from './SlippageSettings/SlippageSettings.js'; import { ThemeSettings } from './ThemeSettings.js'; -import { useHeader } from '../../hooks/useHeader.js'; -import { useTranslation } from 'react-i18next'; export const SettingsPage = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx index 8d5439266..7d96c2824 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx @@ -10,6 +10,7 @@ import { ContractComponent } from '../../components/ContractComponent/ContractCo import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useTools } from '../../hooks/useTools.js'; import { useTransactionDetails } from '../../hooks/useTransactionDetails.js'; @@ -21,7 +22,6 @@ import { formatTokenAmount } from '../../utils/format.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { ContactSupportButton } from './ContactSupportButton.js'; import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'; -import { useHeader } from '../../hooks/useHeader.js'; export const TransactionDetailsPage: React.FC = () => { const { t, i18n } = useTranslation(); diff --git a/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx b/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx index 501e9f2c0..71d8deae3 100644 --- a/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx +++ b/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx @@ -2,14 +2,14 @@ import type { FullStatusData } from '@lifi/sdk'; import { List } from '@mui/material'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useRef } from 'react'; -import { useHeader } from '../../hooks/useHeader.js'; +import { useTranslation } from 'react-i18next'; import { PageContainer } from '../../components/PageContainer.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'; import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'; import { TransactionHistoryItem } from './TransactionHistoryItem.js'; import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'; import { minTransactionListHeight } from './constants.js'; -import { useTranslation } from 'react-i18next'; export const TransactionHistoryPage: React.FC = () => { // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue diff --git a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx index f3d30303d..63c7e7892 100644 --- a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx +++ b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx @@ -19,8 +19,8 @@ import { useTokenBalance } from '../../hooks/useTokenBalance.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { - RouteExecutionStatus, type RouteExecution, + RouteExecutionStatus, } from '../../stores/routes/types.js'; import { getSourceTxHash } from '../../stores/routes/utils.js'; import { hasEnumFlag } from '../../utils/enum.js'; diff --git a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx index 0a91a7a73..8377f2605 100644 --- a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx +++ b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx @@ -10,12 +10,12 @@ import { GasMessage } from '../../components/GasMessage/GasMessage.js'; import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useRouteExecution } from '../../hooks/useRouteExecution.js'; import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { RouteExecutionStatus } from '../../stores/routes/types.js'; import { WidgetEvent } from '../../types/events.js'; import { formatTokenAmount } from '../../utils/format.js'; diff --git a/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx b/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx index 90d689a7e..809ed7781 100644 --- a/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx +++ b/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx @@ -26,7 +26,7 @@ import { trust, xdefi, } from '@lifi/wallet-management'; -import { useMemo, type FC, type PropsWithChildren } from 'react'; +import { type FC, type PropsWithChildren, useMemo } from 'react'; import type { Chain } from 'viem'; import { createClient } from 'viem'; import type { CreateConnectorFn } from 'wagmi'; diff --git a/packages/widget/src/providers/WalletProvider/EVMProvider.tsx b/packages/widget/src/providers/WalletProvider/EVMProvider.tsx index bcb45662e..b4a4d7a15 100644 --- a/packages/widget/src/providers/WalletProvider/EVMProvider.tsx +++ b/packages/widget/src/providers/WalletProvider/EVMProvider.tsx @@ -1,5 +1,5 @@ import { ChainType } from '@lifi/sdk'; -import { useContext, type FC, type PropsWithChildren } from 'react'; +import { type FC, type PropsWithChildren, useContext } from 'react'; import { WagmiContext } from 'wagmi'; import { isItemAllowed } from '../../utils/item.js'; import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'; diff --git a/packages/widget/src/providers/WalletProvider/SVMProvider.tsx b/packages/widget/src/providers/WalletProvider/SVMProvider.tsx index c054ee8a3..f5c948017 100644 --- a/packages/widget/src/providers/WalletProvider/SVMProvider.tsx +++ b/packages/widget/src/providers/WalletProvider/SVMProvider.tsx @@ -1,6 +1,6 @@ import { ChainType } from '@lifi/sdk'; import { ConnectionContext } from '@solana/wallet-adapter-react'; -import { useContext, type FC, type PropsWithChildren } from 'react'; +import { type FC, type PropsWithChildren, useContext } from 'react'; import { isItemAllowed } from '../../utils/item.js'; import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'; import { SVMBaseProvider } from './SVMBaseProvider.js'; diff --git a/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx b/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx index 1328db5ef..5c885a1f6 100644 --- a/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx +++ b/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx @@ -1,4 +1,4 @@ -import { config, createConfig, type SDKConfig } from '@lifi/sdk'; +import { type SDKConfig, config, createConfig } from '@lifi/sdk'; import { createContext, useContext, useId, useMemo } from 'react'; import { version } from '../../config/version.js'; import { setDefaultSettings } from '../../stores/settings/useSettingsStore.js'; diff --git a/packages/widget/src/stores/form/createFormStore.ts b/packages/widget/src/stores/form/createFormStore.ts index ad7fa4d38..7d3219aee 100644 --- a/packages/widget/src/stores/form/createFormStore.ts +++ b/packages/widget/src/stores/form/createFormStore.ts @@ -1,5 +1,4 @@ import { createWithEqualityFn } from 'zustand/traditional'; - import type { DefaultValues, FormFieldArray, diff --git a/packages/widget/src/stores/form/useValidation.ts b/packages/widget/src/stores/form/useValidation.ts index 577839a50..da4b60f7f 100644 --- a/packages/widget/src/stores/form/useValidation.ts +++ b/packages/widget/src/stores/form/useValidation.ts @@ -1,6 +1,7 @@ import { shallow } from 'zustand/shallow'; import type { ValidationProps } from './types.js'; import { useFormStore } from './useFormStore.js'; + export const useValidation = (): Omit => { const [isValid, isValidating, errors] = useFormStore( (store) => [store.isValid, store.isValidating, store.errors], diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 000000000..ed94d5670 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,11 @@ +import prettierPluginSortImports from '@trivago/prettier-plugin-sort-imports'; + +const config = { + singleQuote: true, + trailingComma: 'all', + plugins: [prettierPluginSortImports], + importOrder: ['^components/(.*)$', '^[./]'], + importOrderSortSpecifiers: true, +}; + +export default config; diff --git a/yarn.lock b/yarn.lock index 99bf6f9a3..b40ec9e8b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -43,7 +43,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2": +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2": version: 7.24.2 resolution: "@babel/code-frame@npm:7.24.2" dependencies: @@ -97,7 +97,18 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": +"@babel/generator@npm:7.17.7": + version: 7.17.7 + resolution: "@babel/generator@npm:7.17.7" + dependencies: + "@babel/types": "npm:^7.17.0" + jsesc: "npm:^2.5.1" + source-map: "npm:^0.5.0" + checksum: 10/3303afa2b1310e67071d6c998121b2af1038d6450df266d24fe9a86329fb6288b8ab38bb71787917b3f81a1c4edbc5bc7e6735683fe1d0aa288b33e93daacd60 + languageName: node + linkType: hard + +"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": version: 7.24.4 resolution: "@babel/generator@npm:7.24.4" dependencies: @@ -322,7 +333,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-validator-identifier@npm:^7.22.20": +"@babel/helper-validator-identifier@npm:^7.16.7, @babel/helper-validator-identifier@npm:^7.22.20": version: 7.22.20 resolution: "@babel/helper-validator-identifier@npm:7.22.20" checksum: 10/df882d2675101df2d507b95b195ca2f86a3ef28cb711c84f37e79ca23178e13b9f0d8b522774211f51e40168bf5142be4c1c9776a150cddb61a0d5bf3e95750b @@ -370,7 +381,7 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.21.8, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4": +"@babel/parser@npm:^7.20.5, @babel/parser@npm:^7.21.8, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4": version: 7.24.4 resolution: "@babel/parser@npm:7.24.4" bin: @@ -1599,6 +1610,24 @@ __metadata: languageName: node linkType: hard +"@babel/traverse@npm:7.23.2": + version: 7.23.2 + resolution: "@babel/traverse@npm:7.23.2" + dependencies: + "@babel/code-frame": "npm:^7.22.13" + "@babel/generator": "npm:^7.23.0" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-hoist-variables": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + "@babel/parser": "npm:^7.23.0" + "@babel/types": "npm:^7.23.0" + debug: "npm:^4.1.0" + globals: "npm:^11.1.0" + checksum: 10/e4fcb8f8395804956df4ae1301230a14b6eb35b74a7058a0e0b40f6f4be7281e619e6dafe400e833d4512da5d61cf17ea177d04b00a8f7cf3d8d69aff83ca3d8 + languageName: node + linkType: hard + "@babel/traverse@npm:^7.24.1": version: 7.24.1 resolution: "@babel/traverse@npm:7.24.1" @@ -1617,7 +1646,17 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.24.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": +"@babel/types@npm:7.17.0": + version: 7.17.0 + resolution: "@babel/types@npm:7.17.0" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.16.7" + to-fast-properties: "npm:^2.0.0" + checksum: 10/535ccef360d0c74e2bb685050f3a45e6ab30f66c740bbdd0858148ed502043f1ae2006a9d0269ac3b7356b690091ae313efd912e408bc0198d80a14b2a6f1537 + languageName: node + linkType: hard + +"@babel/types@npm:^7.17.0, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.24.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": version: 7.24.0 resolution: "@babel/types@npm:7.24.0" dependencies: @@ -5182,6 +5221,26 @@ __metadata: languageName: node linkType: hard +"@trivago/prettier-plugin-sort-imports@npm:^4.3.0": + version: 4.3.0 + resolution: "@trivago/prettier-plugin-sort-imports@npm:4.3.0" + dependencies: + "@babel/generator": "npm:7.17.7" + "@babel/parser": "npm:^7.20.5" + "@babel/traverse": "npm:7.23.2" + "@babel/types": "npm:7.17.0" + javascript-natural-sort: "npm:0.7.1" + lodash: "npm:^4.17.21" + peerDependencies: + "@vue/compiler-sfc": 3.x + prettier: 2.x - 3.x + peerDependenciesMeta: + "@vue/compiler-sfc": + optional: true + checksum: 10/eb25cbeeaf85d3acd54019d1f3563447337a2faee7a35558adb69dff44ce3b93714a5b64ba4d0374f3df3191c32c993d441493fdc43a2c97c9b8a0e3d58702cf + languageName: node + linkType: hard + "@tufjs/canonical-json@npm:1.0.0": version: 1.0.0 resolution: "@tufjs/canonical-json@npm:1.0.0" @@ -12159,6 +12218,13 @@ __metadata: languageName: node linkType: hard +"javascript-natural-sort@npm:0.7.1": + version: 0.7.1 + resolution: "javascript-natural-sort@npm:0.7.1" + checksum: 10/7bf6eab67871865d347f09a95aa770f9206c1ab0226bcda6fdd9edec340bf41111a7f82abac30556aa16a21cfa3b2b1ca4a362c8b73dd5ce15220e5d31f49d79 + languageName: node + linkType: hard + "jayson@npm:^4.1.0": version: 4.1.0 resolution: "jayson@npm:4.1.0" @@ -16281,6 +16347,7 @@ __metadata: "@testing-library/jest-dom": "npm:^6.4.2" "@testing-library/react": "npm:^15.0.2" "@testing-library/user-event": "npm:^14.5.2" + "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0" "@types/eslint": "npm:^8.56.9" "@types/events": "npm:^3.0.3" "@types/node": "npm:^20.12.7" @@ -16764,7 +16831,7 @@ __metadata: languageName: node linkType: hard -"source-map@npm:^0.5.7": +"source-map@npm:^0.5.0, source-map@npm:^0.5.7": version: 0.5.7 resolution: "source-map@npm:0.5.7" checksum: 10/9b4ac749ec5b5831cad1f8cc4c19c4298ebc7474b24a0acf293e2f040f03f8eeccb3d01f12aa0f90cf46d555c887e03912b83a042c627f419bda5152d89c5269 From 447849774413a4851fa1c31d40d4ab8e5d514639 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Wed, 17 Apr 2024 15:28:30 +0200 Subject: [PATCH 2/6] Revert "chore: add prettier plugin to sort imports" This reverts commit f2fa9ea9d7a053253c423f7f8699c16deb02249d. --- .prettierrc | 4 + package.json | 1 - packages/wallet-management/package.json | 3 +- packages/widget-embedded/package.json | 3 +- .../NFTOpenSea/useOpenSeaFulfillment.tsx | 2 +- .../src/components/NFTOpenSea/utils.ts | 2 +- .../src/providers/WalletProvider.tsx | 2 +- packages/widget-playground-next/package.json | 3 +- .../widget-playground-next/src/app/layout.tsx | 2 +- .../widget-playground-next/src/app/page.tsx | 23 +++--- packages/widget-playground-vite/package.json | 3 +- packages/widget-playground-vite/src/App.tsx | 19 +++-- packages/widget-playground-vite/src/index.tsx | 2 +- packages/widget-playground/package.json | 3 +- .../Card/ExpandableCard/ExpandableCard.tsx | 4 +- .../CodeControl/CodeControl.tsx | 6 +- .../DrawerControls/CodeControl/CodeEditor.tsx | 10 +-- .../CodeControl/FontEmbedInfo.tsx | 16 ++-- .../CodeControl/ProjectButton.tsx | 2 +- .../DesignControls/AppearanceControl.tsx | 24 +++--- .../DesignControls/ColorControls.tsx | 6 +- .../DesignControls/DesignControls.style.tsx | 16 ++-- .../FontsControl/FontsControl.tsx | 12 +-- .../fontDefinitions/defaultFonts.ts | 2 +- .../PlaygroundSettingsControl.tsx | 4 +- .../DesignControls/SubvariantControl.tsx | 4 +- .../DesignControls/ThemeControl.tsx | 7 +- .../DesignControls/VariantControl.tsx | 4 +- .../WalletManagementControl.tsx | 4 +- .../DrawerControls/DrawerControls.style.tsx | 7 +- .../DrawerControls/DrawerControls.tsx | 8 +- .../src/components/LifiLogo.tsx | 2 +- .../src/components/Switch.tsx | 2 +- .../components/Widget/ConnectWalletButton.tsx | 4 +- .../components/Widget/WidgetViewContainer.tsx | 2 +- .../src/hooks/useThemeMode.ts | 2 +- .../ExternalWalletProvider/EVMProvider.tsx | 4 +- .../ExternalWalletProvider/SVMProvider.tsx | 2 +- .../FontLoaderProvider/FontLoaderProvider.tsx | 4 +- .../PlaygroundThemeProvider.tsx | 8 +- .../themeOverrides/light.ts | 1 - .../src/store/editTools/EditToolsProvider.tsx | 4 +- .../store/editTools/createEditToolsStore.ts | 6 +- .../src/store/editTools/types.ts | 4 +- .../widgetConfig/WidgetConfigProvider.tsx | 16 ++-- .../widgetConfig/createWidgetConfigStore.ts | 4 +- .../src/store/widgetConfig/types.ts | 2 +- .../src/store/widgetConfig/useConfigValues.ts | 6 +- .../utils/setThemeWithFallback.ts | 2 +- .../src/utils/cloneStructuredConfig.test.ts | 4 +- .../src/utils/cloneStructuredConfig.ts | 2 +- packages/widget/package.json | 3 +- packages/widget/src/App.tsx | 1 - packages/widget/src/AppDefault.tsx | 1 - .../widget/src/hooks/useGasRecommendation.ts | 2 +- packages/widget/src/hooks/useToken.ts | 2 +- packages/widget/src/hooks/useTokenBalance.ts | 2 +- packages/widget/src/hooks/useTokenSearch.ts | 2 +- packages/widget/src/hooks/useTools.ts | 2 +- .../widget/src/hooks/useTransactionDetails.ts | 2 +- .../widget/src/hooks/useTransactionHistory.ts | 2 +- packages/widget/src/hooks/useWidgetEvents.ts | 1 - packages/widget/src/pages/LanguagesPage.tsx | 2 +- .../widget/src/pages/MainPage/MainPage.tsx | 4 +- .../src/pages/RoutesPage/RoutesPage.tsx | 4 +- .../pages/SelectChainPage/SelectChainPage.tsx | 4 +- .../src/pages/SelectEnabledToolsPage.tsx | 2 +- .../pages/SelectTokenPage/SelectTokenPage.tsx | 6 +- .../SelectWalletPage/SelectWalletPage.tsx | 2 +- .../src/pages/SendToWallet/BookmarksPage.tsx | 2 +- .../SendToWallet/ConnectedWalletsPage.tsx | 2 +- .../pages/SendToWallet/RecentWalletsPage.tsx | 2 +- .../SendToConfiguredWalletPage.tsx | 2 +- .../pages/SendToWallet/SendToWalletPage.tsx | 2 +- .../src/pages/SettingsPage/SettingsPage.tsx | 4 +- .../TransactionDetailsPage.tsx | 2 +- .../TransactionHistoryPage.tsx | 4 +- .../TransactionPage/StatusBottomSheet.tsx | 2 +- .../pages/TransactionPage/TransactionPage.tsx | 2 +- .../WalletProvider/EVMBaseProvider.tsx | 2 +- .../providers/WalletProvider/EVMProvider.tsx | 2 +- .../providers/WalletProvider/SVMProvider.tsx | 2 +- .../WidgetProvider/WidgetProvider.tsx | 2 +- .../widget/src/stores/form/createFormStore.ts | 1 + .../widget/src/stores/form/useValidation.ts | 1 - prettier.config.js | 11 --- yarn.lock | 79 ++----------------- 87 files changed, 188 insertions(+), 269 deletions(-) create mode 100644 .prettierrc delete mode 100644 prettier.config.js diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..a20502b7f --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "all" +} diff --git a/package.json b/package.json index 8ffced69e..c6639dd18 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,6 @@ "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^15.0.2", "@testing-library/user-event": "^14.5.2", - "@trivago/prettier-plugin-sort-imports": "^4.3.0", "@types/eslint": "^8.56.9", "@types/events": "^3.0.3", "@types/node": "^20.12.7", diff --git a/packages/wallet-management/package.json b/packages/wallet-management/package.json index 5a442ca98..766d0042d 100644 --- a/packages/wallet-management/package.json +++ b/packages/wallet-management/package.json @@ -15,8 +15,7 @@ "clean": "yarn build:clean && rm -rf dist", "check:types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", - "format": "prettier --write ./src/", - "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", + "pre-commit:validate": "yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types" }, "publishConfig": { diff --git a/packages/widget-embedded/package.json b/packages/widget-embedded/package.json index 932a09fea..356648741 100644 --- a/packages/widget-embedded/package.json +++ b/packages/widget-embedded/package.json @@ -10,8 +10,7 @@ "clean": "rm -rf dist tsconfig.tsbuildinfo", "preview": "vite preview", "lint": "eslint --ext .tsx --ext .ts ./src", - "format": "prettier --write ./src/", - "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", + "pre-commit:validate": "yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types" }, "publishConfig": { diff --git a/packages/widget-embedded/src/components/NFTOpenSea/useOpenSeaFulfillment.tsx b/packages/widget-embedded/src/components/NFTOpenSea/useOpenSeaFulfillment.tsx index c092c479a..c047f4359 100644 --- a/packages/widget-embedded/src/components/NFTOpenSea/useOpenSeaFulfillment.tsx +++ b/packages/widget-embedded/src/components/NFTOpenSea/useOpenSeaFulfillment.tsx @@ -3,7 +3,7 @@ import type { NFTProps } from '@lifi/widget'; import { useAccount, useFieldValues } from '@lifi/widget'; import { Seaport } from '@opensea/seaport-js'; import { useQuery } from '@tanstack/react-query'; -import { type Connector, useConfig } from 'wagmi'; +import { useConfig, type Connector } from 'wagmi'; import { getEthersSigner } from './getEthersSigner'; import type { FulfillmentDataResponse, NFTNetwork } from './types'; import { ChainId as OpenSeaChainId } from './types'; diff --git a/packages/widget-embedded/src/components/NFTOpenSea/utils.ts b/packages/widget-embedded/src/components/NFTOpenSea/utils.ts index 4d23b076c..2f70099a4 100644 --- a/packages/widget-embedded/src/components/NFTOpenSea/utils.ts +++ b/packages/widget-embedded/src/components/NFTOpenSea/utils.ts @@ -11,8 +11,8 @@ import type { OpenSeaUser, Order, OrderJSON, - OrderV2, OrdersQueryOptions, + OrderV2, SerializedOrderV2, Transaction, } from './types'; diff --git a/packages/widget-embedded/src/providers/WalletProvider.tsx b/packages/widget-embedded/src/providers/WalletProvider.tsx index e106f3652..15952fc99 100644 --- a/packages/widget-embedded/src/providers/WalletProvider.tsx +++ b/packages/widget-embedded/src/providers/WalletProvider.tsx @@ -28,7 +28,7 @@ import { xdefi, } from '@lifi/wallet-management'; import { formatChain, useAvailableChains } from '@lifi/widget'; -import { type FC, type PropsWithChildren, useMemo } from 'react'; +import { useMemo, type FC, type PropsWithChildren } from 'react'; import type { Chain } from 'viem'; import { createClient } from 'viem'; import { WagmiProvider, createConfig, http } from 'wagmi'; diff --git a/packages/widget-playground-next/package.json b/packages/widget-playground-next/package.json index d79d5c5b0..a9bee56e9 100644 --- a/packages/widget-playground-next/package.json +++ b/packages/widget-playground-next/package.json @@ -6,8 +6,7 @@ "build": "next build", "start": "next start", "lint": "next lint", - "format": "prettier --write ./src/", - "pre-commit:validate": "yarn format && next lint --fix --max-warnings=0" + "pre-commit:validate": "next lint --fix --max-warnings=0" }, "publishConfig": { "access": "public" diff --git a/packages/widget-playground-next/src/app/layout.tsx b/packages/widget-playground-next/src/app/layout.tsx index 382e85885..25ab4244a 100644 --- a/packages/widget-playground-next/src/app/layout.tsx +++ b/packages/widget-playground-next/src/app/layout.tsx @@ -1,5 +1,5 @@ -import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; import type { Metadata } from 'next'; +import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; export const metadata: Metadata = { title: 'LI.FI Widget', diff --git a/packages/widget-playground-next/src/app/page.tsx b/packages/widget-playground-next/src/app/page.tsx index 6be07e0b0..e4bac3368 100644 --- a/packages/widget-playground-next/src/app/page.tsx +++ b/packages/widget-playground-next/src/app/page.tsx @@ -3,21 +3,24 @@ // This polyfill is only needed for the Next.js implementation // the lack of structureClone support for Next.js is currently a requested feature // https://github.com/vercel/next.js/discussions/33189 -import { WidgetNextView } from '@/app/WidgetNextView'; +import 'core-js/actual/structured-clone'; +import { type PropsWithChildren } from 'react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { Box } from '@mui/material'; + import { - DrawerControls, - EditToolsProvider, EnvVariablesProvider, - FontLoaderProvider, - PlaygroundThemeProvider, + EditToolsProvider, WidgetConfigProvider, + PlaygroundThemeProvider, + DrawerControls, + FontLoaderProvider, } from '@lifi/widget-playground'; -import '@lifi/widget-playground/fonts'; + import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; -import { Box } from '@mui/material'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import 'core-js/actual/structured-clone'; -import { type PropsWithChildren } from 'react'; + +import '@lifi/widget-playground/fonts'; +import { WidgetNextView } from '@/app/WidgetNextView'; const queryClient = new QueryClient(); diff --git a/packages/widget-playground-vite/package.json b/packages/widget-playground-vite/package.json index 3ce490a01..6b8162ec8 100644 --- a/packages/widget-playground-vite/package.json +++ b/packages/widget-playground-vite/package.json @@ -10,8 +10,7 @@ "preview": "vite preview", "check:types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", - "format": "prettier --write ./src/", - "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0" + "pre-commit:validate": "yarn lint --fix --max-warnings=0" }, "publishConfig": { "access": "public" diff --git a/packages/widget-playground-vite/src/App.tsx b/packages/widget-playground-vite/src/App.tsx index 159e52f71..13b2aacf2 100644 --- a/packages/widget-playground-vite/src/App.tsx +++ b/packages/widget-playground-vite/src/App.tsx @@ -1,17 +1,20 @@ +import { type PropsWithChildren } from 'react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { Box } from '@mui/material'; + import { - DrawerControls, - EditToolsProvider, EnvVariablesProvider, - FontLoaderProvider, - PlaygroundThemeProvider, + EditToolsProvider, WidgetConfigProvider, + PlaygroundThemeProvider, + DrawerControls, WidgetView, + FontLoaderProvider, } from '@lifi/widget-playground'; -import '@lifi/widget-playground/fonts'; + import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; -import { Box } from '@mui/material'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { type PropsWithChildren } from 'react'; + +import '@lifi/widget-playground/fonts'; const queryClient = new QueryClient(); diff --git a/packages/widget-playground-vite/src/index.tsx b/packages/widget-playground-vite/src/index.tsx index 7aba4a10e..4274b1de5 100644 --- a/packages/widget-playground-vite/src/index.tsx +++ b/packages/widget-playground-vite/src/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import { App } from './App'; -import './index.css'; import { reportWebVitals } from './reportWebVitals'; +import './index.css'; const rootElement = document.getElementById('root'); if (!rootElement) { diff --git a/packages/widget-playground/package.json b/packages/widget-playground/package.json index cc0364b8f..e1a298e64 100644 --- a/packages/widget-playground/package.json +++ b/packages/widget-playground/package.json @@ -12,11 +12,10 @@ "clean": "yarn build:clean && rm -rf dist", "types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", - "format": "prettier --write ./src/", "check:types": "tsc --noEmit", "test": "vitest run", "test:watch": "vitest", - "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", + "pre-commit:validate": "yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types & yarn test" }, "publishConfig": { diff --git a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx index 6d0e700ed..e462dcd03 100644 --- a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx +++ b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx @@ -1,11 +1,11 @@ -import { Collapse } from '@mui/material'; import type { FC, PropsWithChildren, ReactNode } from 'react'; import { useId } from 'react'; +import { Collapse } from '@mui/material'; import { Card, CardRowButton, - CardTitleContainer, CardValue, + CardTitleContainer, } from '../Card.style'; import { useExpandableCard } from './useExpandableCard'; diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx index 68caac033..ff7fa6d38 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx @@ -1,5 +1,6 @@ -import TabContext from '@mui/lab/TabContext'; import { Box, Typography } from '@mui/material'; +import TabContext from '@mui/lab/TabContext'; +import { useEditToolsActions, useCodeToolValues } from '../../../store'; import { CRALogo, GatsbyLogo, @@ -11,13 +12,12 @@ import { ViteLogo, VueLogo, } from '../../../logo'; -import { useCodeToolValues, useEditToolsActions } from '../../../store'; import { Card } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; import { TabContentContainer } from '../DrawerControls.style'; import { CodeEditor } from './CodeEditor'; -import { FontEmbedInfo } from './FontEmbedInfo'; import { ProjectButton } from './ProjectButton'; +import { FontEmbedInfo } from './FontEmbedInfo'; export const CodeControl = () => { const { codeControlTab } = useCodeToolValues(); diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx index cd5beb4d2..f8936844a 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx @@ -1,17 +1,17 @@ +import { useEffect, useRef, useState } from 'react'; +import { Tooltip, useTheme } from '@mui/material'; +import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import type { BeforeMount, OnMount } from '@monaco-editor/react'; import Editor from '@monaco-editor/react'; -import ContentCopyIcon from '@mui/icons-material/ContentCopy'; -import { Tooltip, useTheme } from '@mui/material'; -import { useEffect, useRef, useState } from 'react'; import { useThemeMode } from '../../../hooks'; -import { getConfigOutput, useConfig } from '../../../store'; import { tooltipPopperZIndex } from '../DrawerControls.style'; import { CodeContainer, - CodeCopyButton, EditorContainer, + CodeCopyButton, EditorSkeleton, } from './CodeControl.style'; +import { useConfig, getConfigOutput } from '../../../store'; import { stringifyConfig } from './utils/stringifyConfig'; interface MonacoEditor { diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx index 74ef347a8..068edbc93 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx @@ -1,23 +1,23 @@ -import CloseIcon from '@mui/icons-material/Close'; -import InfoIcon from '@mui/icons-material/Info'; -import OpenInNewIcon from '@mui/icons-material/OpenInNew'; +import type { MouseEventHandler } from 'react'; +import { useState } from 'react'; import { - Box, - ClickAwayListener, IconButton, Popper, Tooltip, Typography, + ClickAwayListener, + Box, } from '@mui/material'; -import type { MouseEventHandler } from 'react'; -import { useState } from 'react'; -import { useFontToolValues } from '../../../store'; +import InfoIcon from '@mui/icons-material/Info'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; +import CloseIcon from '@mui/icons-material/Close'; import { popperZIndex, tooltipPopperZIndex } from '../DrawerControls.style'; import { FontEmbedPopperContainer, FontMessageCloseButton, GoogleFontLink, } from './CodeControl.style'; +import { useFontToolValues } from '../../../store'; interface FontMessageProps { fontFamily: string; diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx index a6f2bc21b..66bcbe20e 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx @@ -1,5 +1,5 @@ import type { PropsWithChildren, ReactNode } from 'react'; -import { ProjectAvatar, ProjectButtonBase } from './CodeControl.style'; +import { ProjectButtonBase, ProjectAvatar } from './CodeControl.style'; interface ProjectButtonProps extends PropsWithChildren { href: string; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx index a010d69b4..3eaa86ce7 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx @@ -1,10 +1,3 @@ -import type { Appearance, WidgetTheme } from '@lifi/widget'; -import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; -import LightModeIcon from '@mui/icons-material/LightMode'; -import NightlightIcon from '@mui/icons-material/Nightlight'; -import type { TabProps } from '@mui/material'; -import { Box, Tooltip } from '@mui/material'; -import diff from 'microdiff'; import type { FC, PropsWithChildren, @@ -12,19 +5,26 @@ import type { SyntheticEvent, } from 'react'; import { useEffect } from 'react'; -import type { ThemeMode } from '../../../hooks'; -import { useThemeMode } from '../../../hooks'; +import type { TabProps } from '@mui/material'; +import { Box, Tooltip } from '@mui/material'; +import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; +import LightModeIcon from '@mui/icons-material/LightMode'; +import NightlightIcon from '@mui/icons-material/Nightlight'; +import diff from 'microdiff'; +import type { Appearance, WidgetTheme } from '@lifi/widget'; import { useConfigActions, useConfigAppearance, useEditToolsActions, useThemeValues, } from '../../../store'; -import type { ThemeItem } from '../../../store'; -import { cloneStructuredConfig, patch } from '../../../utils'; -import { CardValue, ExpandableCard } from '../../Card'; +import { ExpandableCard, CardValue } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; import { Badge, CapitalizeFirstLetter } from './DesignControls.style'; +import type { ThemeItem } from '../../../store'; +import type { ThemeMode } from '../../../hooks'; +import { useThemeMode } from '../../../hooks'; +import { cloneStructuredConfig, patch } from '../../../utils'; const appearanceIcons = { light: LightModeIcon, diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx index 83bb0f757..f3032a693 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx @@ -1,13 +1,13 @@ import type { BoxProps } from '@mui/material'; -import { useConfigActions, useConfigColorsFromPath } from '../../../store'; import { safe6DigitHexColor } from '../../../utils'; +import { useConfigActions, useConfigColorsFromPath } from '../../../store'; import { ExpandableCard } from '../../Card'; import { - CapitalizeFirstLetter, - ColorInput, ColorSelectorContainer, ColorSwatch, ColorSwatches, + ColorInput, + CapitalizeFirstLetter, } from './DesignControls.style'; const editableColors = { diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx index 17ecd617e..fd34f5911 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx @@ -1,25 +1,25 @@ +import { alpha, styled } from '@mui/material/styles'; +import { inputBaseClasses } from '@mui/material/InputBase'; +import { autocompleteClasses } from '@mui/material/Autocomplete'; +import { alertClasses } from '@mui/material/Alert'; import type { - AutocompleteProps, BoxProps, InputBaseProps, Theme, + AutocompleteProps, } from '@mui/material'; import { Box, ButtonBase, InputBase, - Alert as MuiAlert, Autocomplete as MuiAutocomplete, - Badge as MuiBadge, - Select as MuiSelect, Popper, + Alert as MuiAlert, + Select as MuiSelect, Typography, + Badge as MuiBadge, badgeClasses, } from '@mui/material'; -import { alertClasses } from '@mui/material/Alert'; -import { autocompleteClasses } from '@mui/material/Autocomplete'; -import { inputBaseClasses } from '@mui/material/InputBase'; -import { alpha, styled } from '@mui/material/styles'; import { getCardFieldsetBackgroundColor } from '../../../utils'; import { autocompletePopperZIndex } from '../DrawerControls.style'; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx index eb79f5265..5d742d1ba 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx @@ -1,17 +1,17 @@ -import InfoIcon from '@mui/icons-material/Info'; -import { CircularProgress, TextField } from '@mui/material'; import type { FocusEventHandler, SyntheticEvent } from 'react'; import { useCallback } from 'react'; -import type { Font } from '../../../../providers'; -import { useFontLoader } from '../../../../providers'; +import { CircularProgress, TextField } from '@mui/material'; +import InfoIcon from '@mui/icons-material/Info'; import { useConfigActions, useEditToolsActions, useFontToolValues, } from '../../../../store'; +import type { Font } from '../../../../providers'; +import { useFontLoader } from '../../../../providers'; import { ExpandableCard } from '../../../Card'; -import { Alert, Autocomplete, StyledPopper } from '../DesignControls.style'; -import { allFonts, defaultFont } from './fontDefinitions'; +import { Autocomplete, StyledPopper, Alert } from '../DesignControls.style'; +import { defaultFont, allFonts } from './fontDefinitions'; const getCompleteFontFamily = (font: Font) => font.fallbackFonts diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts index 3770fcc44..2c025d1e0 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts @@ -1,6 +1,6 @@ import type { Font } from '../../../../../providers'; -import { googleFonts } from './googleFonts'; import { systemFonts } from './systemFonts'; +import { googleFonts } from './googleFonts'; // NOTE: although this is a google font, as the widget playground itself is using Inter we don't // need to download the font files as they should already be downloaded - thus no fontFiles are defined diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx index c188f056d..13000c105 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx @@ -1,11 +1,11 @@ -import SettingsIcon from '@mui/icons-material/Settings'; import type { BoxProps } from '@mui/material'; import { useTheme } from '@mui/material'; +import SettingsIcon from '@mui/icons-material/Settings'; +import { safe6DigitHexColor } from '../../../utils'; import { useEditToolsActions, usePlaygroundSettingValues, } from '../../../store'; -import { safe6DigitHexColor } from '../../../utils'; import { ExpandableCard } from '../../Card'; import { CapitalizeFirstLetter, diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx index dc55fe006..87bdb2907 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx @@ -1,8 +1,8 @@ -import type { WidgetSubvariant } from '@lifi/widget'; import type { SyntheticEvent } from 'react'; +import type { WidgetSubvariant } from '@lifi/widget'; import { useConfigActions, useConfigSubvariant } from '../../../store'; -import { CardValue, ExpandableCard } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; +import { CardValue, ExpandableCard } from '../../Card'; export const SubvariantControl = () => { const { subvariant } = useConfigSubvariant(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx index fe0ac5628..c25e521d1 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx @@ -1,16 +1,15 @@ import type { SelectChangeEvent } from '@mui/material'; import { MenuItem } from '@mui/material'; -import { useThemeMode } from '../../../hooks'; +import { CardValue, ExpandableCard } from '../../Card'; import { useConfigActions, useEditToolsActions, useThemeValues, } from '../../../store'; -import type { ThemeItem } from '../../../store'; -import { CardValue, ExpandableCard } from '../../Card'; import { popperZIndex } from '../DrawerControls.style'; import { Select } from './DesignControls.style'; - +import type { ThemeItem } from '../../../store'; +import { useThemeMode } from '../../../hooks'; export const ThemeControl = () => { const { setConfigTheme } = useConfigActions(); const themeMode = useThemeMode(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx index 5ea5ed6d8..ae63633d4 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx @@ -1,8 +1,8 @@ -import type { WidgetVariant } from '@lifi/widget'; import type { SyntheticEvent } from 'react'; +import type { WidgetVariant } from '@lifi/widget'; import { useConfigActions, useConfigVariant } from '../../../store'; -import { CardValue, ExpandableCard } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; +import { CardValue, ExpandableCard } from '../../Card'; export const VariantControl = () => { const { variant } = useConfigVariant(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx index 132ae3478..ce74a32c8 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx @@ -1,5 +1,3 @@ -import * as React from 'react'; -import { useConfigActions, useConfigWalletManagement } from '../../../store'; import { Card, CardRowContainer, @@ -7,6 +5,8 @@ import { CardValue, } from '../../Card'; import { Switch } from '../../Switch'; +import { useConfigActions, useConfigWalletManagement } from '../../../store'; +import * as React from 'react'; export const WalletManagementControl = () => { const { isExternalWalletManagement, replacementWalletConfig } = diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx index 4de0c51aa..73f9ccb52 100644 --- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx @@ -1,12 +1,11 @@ -import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; -import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; -import TabPanel from '@mui/lab/TabPanel'; import type { ButtonBaseProps, DrawerProps as MuiDrawerProps, } from '@mui/material'; import { Box, ButtonBase, Drawer as MuiDrawer, styled } from '@mui/material'; - +import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; +import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; +import TabPanel from '@mui/lab/TabPanel'; export const drawerZIndex = 1501; export const autocompletePopperZIndex = drawerZIndex + 1; export const tooltipPopperZIndex = drawerZIndex + 2; diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx index e6d52bc20..4369158be 100644 --- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx @@ -4,15 +4,13 @@ import IntegrationInstructionsIcon from '@mui/icons-material/IntegrationInstruct import RestartAltIcon from '@mui/icons-material/RestartAlt'; import TabContext from '@mui/lab/TabContext'; import { Box, IconButton, Tooltip } from '@mui/material'; -import { useFontInitialisation } from '../../providers'; import { useConfigActions, - useDrawerToolValues, useEditToolsActions, + useDrawerToolValues, } from '../../store'; import { ExpandableCardAccordion } from '../Card'; import { Tab, Tabs } from '../Tabs'; -import { CodeControl } from './CodeControl'; import { AppearanceControl, ButtonRadiusControl, @@ -31,10 +29,12 @@ import { Header, HeaderRow, TabContentContainer, - WidgetConfigControls, tooltipPopperZIndex, + WidgetConfigControls, } from './DrawerControls.style'; +import { CodeControl } from './CodeControl'; import { DrawerHandle } from './DrawerHandle'; +import { useFontInitialisation } from '../../providers'; export const DrawerControls = () => { const { isDrawerOpen, drawerWidth, visibleControls } = useDrawerToolValues(); diff --git a/packages/widget-playground/src/components/LifiLogo.tsx b/packages/widget-playground/src/components/LifiLogo.tsx index c9906217a..bca1cbcfd 100644 --- a/packages/widget-playground/src/components/LifiLogo.tsx +++ b/packages/widget-playground/src/components/LifiLogo.tsx @@ -1,5 +1,5 @@ -import { styled } from '@mui/material'; import type { FC, SVGProps } from 'react'; +import { styled } from '@mui/material'; const LifiLogoBase: FC> = (props) => { return ( diff --git a/packages/widget-playground/src/components/Switch.tsx b/packages/widget-playground/src/components/Switch.tsx index fe043e2ac..1c0bc574e 100644 --- a/packages/widget-playground/src/components/Switch.tsx +++ b/packages/widget-playground/src/components/Switch.tsx @@ -1,6 +1,6 @@ import { Switch as MuiSwitch } from '@mui/material'; -import { switchClasses } from '@mui/material/Switch'; import { alpha, styled } from '@mui/material/styles'; +import { switchClasses } from '@mui/material/Switch'; export const Switch = styled(MuiSwitch)(({ theme }) => ({ width: 42, diff --git a/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx b/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx index 8892646ed..5d0b7a989 100644 --- a/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx +++ b/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx @@ -1,7 +1,7 @@ -import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; -import WalletIcon from '@mui/icons-material/Wallet'; import { Box } from '@mui/material'; import { useAccount, useConnect, useConnectors, useDisconnect } from 'wagmi'; +import WalletIcon from '@mui/icons-material/Wallet'; +import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; import { shortenAddress } from '../../utils'; import { ConnectionWalletButtonBase } from './WidgetView.style'; diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index b3ca1cedb..8fa9c6b93 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -5,8 +5,8 @@ import type { PropsWithChildren } from 'react'; import { ExternalWalletProvider } from '../../providers'; import { useConfig, - useDrawerToolValues, useEditToolsActions, + useDrawerToolValues, } from '../../store'; import { ToggleDrawerButton } from './ToggleDrawerButton'; import { diff --git a/packages/widget-playground/src/hooks/useThemeMode.ts b/packages/widget-playground/src/hooks/useThemeMode.ts index 3d07bc5d9..b695ece86 100644 --- a/packages/widget-playground/src/hooks/useThemeMode.ts +++ b/packages/widget-playground/src/hooks/useThemeMode.ts @@ -1,5 +1,5 @@ -import { useMediaQuery } from '@mui/material'; import { useConfigAppearance } from '../store'; +import { useMediaQuery } from '@mui/material'; export type ThemeMode = 'dark' | 'light'; diff --git a/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx b/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx index 387b50566..05ee1f2ab 100644 --- a/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx +++ b/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx @@ -1,13 +1,13 @@ import { formatChain, useAvailableChains } from '@lifi/widget'; import { RainbowKitProvider, - type Theme as RainbowKitTheme, darkTheme, getDefaultConfig, lightTheme, + type Theme as RainbowKitTheme, } from '@rainbow-me/rainbowkit'; import '@rainbow-me/rainbowkit/styles.css'; -import { type FC, type PropsWithChildren, useMemo } from 'react'; +import { useMemo, type FC, type PropsWithChildren } from 'react'; import type { Chain } from 'viem'; import { WagmiProvider } from 'wagmi'; import { mainnet } from 'wagmi/chains'; diff --git a/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx b/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx index 70392fa6f..b7e0c2f6a 100644 --- a/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx +++ b/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx @@ -1,3 +1,4 @@ +import type { FC, PropsWithChildren } from 'react'; import type { Adapter } from '@solana/wallet-adapter-base'; import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'; import { @@ -5,7 +6,6 @@ import { WalletProvider, } from '@solana/wallet-adapter-react'; import { clusterApiUrl } from '@solana/web3.js'; -import type { FC, PropsWithChildren } from 'react'; const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet); /** diff --git a/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx b/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx index a39ad19e3..aa8c33b44 100644 --- a/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx +++ b/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx @@ -1,7 +1,7 @@ -import type { UseMutateAsyncFunction } from '@tanstack/react-query'; -import { useMutation } from '@tanstack/react-query'; import type { PropsWithChildren } from 'react'; import { createContext, useContext, useEffect, useState } from 'react'; +import type { UseMutateAsyncFunction } from '@tanstack/react-query'; +import { useMutation } from '@tanstack/react-query'; import { allFonts } from '../../components/DrawerControls/DesignControls'; import { useConfigFontFamily, useEditToolsActions } from '../../store'; import type { Font } from './types'; diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx b/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx index 4900c4b39..8df5dbcf8 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx @@ -1,14 +1,14 @@ -import { CssBaseline, ThemeProvider } from '@mui/material'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import { useThemeMode } from '../../hooks'; +import { CssBaseline, ThemeProvider } from '@mui/material'; import { usePlaygroundSettingValues } from '../../store'; +import { useThemeMode } from '../../hooks'; import { theme } from './theme'; import { - darkComponents, + lightPalette, darkPalette, + darkComponents, lightComponents, - lightPalette, } from './themeOverrides'; const appearancePaletteOverrides = { diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts index 6a223a34e..89fbbda75 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts @@ -1,5 +1,4 @@ import type { WidgetTheme } from '@lifi/widget'; - export const lightPalette = { mode: 'light', text: { diff --git a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx index 3b3e84233..55d624ed1 100644 --- a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx +++ b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx @@ -1,9 +1,9 @@ import type { FC, PropsWithChildren } from 'react'; import { createContext, useContext, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import { useConfigActions } from '../widgetConfig'; -import { createEditToolsStore } from './createEditToolsStore'; import type { ToolsState, ToolsStore } from './types'; +import { createEditToolsStore } from './createEditToolsStore'; +import { useConfigActions } from '../widgetConfig'; export const EditToolsContext = createContext(null); diff --git a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts index 725a98d6c..0c6460fa6 100644 --- a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts +++ b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts @@ -1,9 +1,9 @@ -import type { WidgetTheme } from '@lifi/widget'; import type { StateCreator } from 'zustand'; -import { persist } from 'zustand/middleware'; import { createWithEqualityFn } from 'zustand/traditional'; -import { defaultDrawerWidth } from './constants'; +import { persist } from 'zustand/middleware'; +import type { WidgetTheme } from '@lifi/widget'; import type { ToolsState } from './types'; +import { defaultDrawerWidth } from './constants'; export const createEditToolsStore = (initialTheme?: WidgetTheme) => createWithEqualityFn( diff --git a/packages/widget-playground/src/store/editTools/types.ts b/packages/widget-playground/src/store/editTools/types.ts index b41f70836..a5665f9e8 100644 --- a/packages/widget-playground/src/store/editTools/types.ts +++ b/packages/widget-playground/src/store/editTools/types.ts @@ -1,7 +1,7 @@ -import type { WidgetTheme } from '@lifi/widget'; -import type { StoreApi } from 'zustand'; import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; +import type { StoreApi } from 'zustand'; import type { Font } from '../../providers'; +import type { WidgetTheme } from '@lifi/widget'; type ControlType = 'design' | 'code'; type CodeControlTab = 'config' | 'examples'; diff --git a/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx b/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx index 951afd957..4c4c2f74c 100644 --- a/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx +++ b/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx @@ -1,16 +1,16 @@ -import type { WidgetConfig } from '@lifi/widget'; -import { useMediaQuery } from '@mui/material'; -import isEqual from 'lodash.isequal'; -import diff from 'microdiff'; import type { FC, PropsWithChildren } from 'react'; +import diff from 'microdiff'; import { createContext, useContext, useEffect, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import { patch } from '../../utils'; -import { cloneStructuredConfig } from '../../utils/cloneStructuredConfig'; +import type { WidgetConfig } from '@lifi/widget'; +import type { WidgetConfigStore, WidgetConfigState } from './types.js'; import { createWidgetConfigStore } from './createWidgetConfigStore.js'; -import { themeItems } from './themes'; -import type { WidgetConfigState, WidgetConfigStore } from './types.js'; +import isEqual from 'lodash.isequal'; +import { cloneStructuredConfig } from '../../utils/cloneStructuredConfig'; +import { patch } from '../../utils'; import { getConfigOutput } from './utils/getConfigOutput'; +import { themeItems } from './themes'; +import { useMediaQuery } from '@mui/material'; export const WidgetConfigContext = createContext( null, diff --git a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts index 10ba78812..13ff9b6f5 100644 --- a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts +++ b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts @@ -1,11 +1,11 @@ +import { createWithEqualityFn } from 'zustand/traditional'; import type { WidgetConfig, WidgetTheme } from '@lifi/widget'; import type { StateCreator } from 'zustand'; import { persist } from 'zustand/middleware'; -import { createWithEqualityFn } from 'zustand/traditional'; import { addValueFromPathString, cloneStructuredConfig } from '../../utils'; -import type { ThemeItem } from '../editTools/types'; import type { WidgetConfigState } from './types'; import { getLocalStorageOutput } from './utils/getLocalStorageOutput'; +import type { ThemeItem } from '../editTools/types'; import { setThemeAppearanceWithFallback } from './utils/setThemeWithFallback'; export const createWidgetConfigStore = ( diff --git a/packages/widget-playground/src/store/widgetConfig/types.ts b/packages/widget-playground/src/store/widgetConfig/types.ts index 8c2431b0a..6be9dc690 100644 --- a/packages/widget-playground/src/store/widgetConfig/types.ts +++ b/packages/widget-playground/src/store/widgetConfig/types.ts @@ -6,8 +6,8 @@ import type { WidgetVariant, WidgetWalletConfig, } from '@lifi/widget'; -import type { StoreApi } from 'zustand'; import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; +import type { StoreApi } from 'zustand'; import type { ThemeItem } from '../editTools/types'; export interface WidgetConfigValues { diff --git a/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts b/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts index 4aba8bea4..7fcd99a85 100644 --- a/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts +++ b/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts @@ -1,8 +1,8 @@ -import { palette, paletteDark, paletteLight } from '@lifi/widget'; import { shallow } from 'zustand/shallow'; -import { useThemeMode } from '../../hooks'; -import { getValueFromPath } from '../../utils'; +import { palette, paletteDark, paletteLight } from '@lifi/widget'; import { useWidgetConfigStore } from './WidgetConfigProvider'; +import { getValueFromPath } from '../../utils'; +import { useThemeMode } from '../../hooks'; export const useConfigVariant = () => { const [variant] = useWidgetConfigStore( diff --git a/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts b/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts index bfa0980cf..f41011777 100644 --- a/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts +++ b/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts @@ -1,6 +1,6 @@ import type { WidgetTheme } from '@lifi/widget'; -import type { WidgetConfigState } from '../types'; import { replayLocalStorageChangesOnTheme } from './replayLocalStorageChangesOnTheme'; +import type { WidgetConfigState } from '../types'; export const setThemeAppearanceWithFallback = ( state: WidgetConfigState, diff --git a/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts b/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts index 177c16453..6e1635e2b 100644 --- a/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts +++ b/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts @@ -1,6 +1,6 @@ -import type { WidgetConfig } from '@lifi/widget'; -import { describe, expect, test } from 'vitest'; +import { expect, test, describe } from 'vitest'; import { cloneStructuredConfig } from './cloneStructuredConfig'; +import type { WidgetConfig } from '@lifi/widget'; describe('cloneStructuredConfig', () => { test('performs a deep clone', () => { diff --git a/packages/widget-playground/src/utils/cloneStructuredConfig.ts b/packages/widget-playground/src/utils/cloneStructuredConfig.ts index a64b9243e..c540ec1ab 100644 --- a/packages/widget-playground/src/utils/cloneStructuredConfig.ts +++ b/packages/widget-playground/src/utils/cloneStructuredConfig.ts @@ -1,6 +1,6 @@ +import { substituteFunctions } from './substituteFunctions'; import { rehydrateFunctions } from '../store/widgetConfig/utils/rehydrateFunctions'; import type { FunctionReference, ObjectWithFunctions } from '../types'; -import { substituteFunctions } from './substituteFunctions'; const shallowReferences = () => { let referencesDictionary: FunctionReference[] = []; diff --git a/packages/widget/package.json b/packages/widget/package.json index 735269b9a..0fe2734a4 100644 --- a/packages/widget/package.json +++ b/packages/widget/package.json @@ -18,8 +18,7 @@ "check:circular-deps": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx')", "check:circular-deps-graph": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx') --image graph.svg", "lint": "eslint --ext .tsx --ext .ts ./src", - "format": "prettier --write ./src/", - "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", + "pre-commit:validate": "yarn lint --fix", "pre-push:validate": "yarn check:types & yarn check:circular-deps" }, "publishConfig": { diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx index 16cbe0e89..62d2f29cd 100644 --- a/packages/widget/src/App.tsx +++ b/packages/widget/src/App.tsx @@ -1,5 +1,4 @@ 'use client'; - import { forwardRef, useMemo } from 'react'; import { AppDefault } from './AppDefault.js'; import type { WidgetDrawer } from './AppDrawer.js'; diff --git a/packages/widget/src/AppDefault.tsx b/packages/widget/src/AppDefault.tsx index c89652fe1..2d24f5e84 100644 --- a/packages/widget/src/AppDefault.tsx +++ b/packages/widget/src/AppDefault.tsx @@ -1,5 +1,4 @@ 'use client'; - import { AppRoutes } from './AppRoutes.js'; import { AppContainer, diff --git a/packages/widget/src/hooks/useGasRecommendation.ts b/packages/widget/src/hooks/useGasRecommendation.ts index 793c76df5..122469e2c 100644 --- a/packages/widget/src/hooks/useGasRecommendation.ts +++ b/packages/widget/src/hooks/useGasRecommendation.ts @@ -1,4 +1,4 @@ -import { type ChainId, getGasRecommendation } from '@lifi/sdk'; +import { getGasRecommendation, type ChainId } from '@lifi/sdk'; import { useQuery } from '@tanstack/react-query'; import { useAvailableChains } from './useAvailableChains.js'; diff --git a/packages/widget/src/hooks/useToken.ts b/packages/widget/src/hooks/useToken.ts index 9850e6fb8..52ddda2a8 100644 --- a/packages/widget/src/hooks/useToken.ts +++ b/packages/widget/src/hooks/useToken.ts @@ -1,6 +1,6 @@ import { useMemo } from 'react'; -import { useTokenSearch } from './useTokenSearch.js'; import { useTokens } from './useTokens.js'; +import { useTokenSearch } from './useTokenSearch.js'; export const useToken = (chainId?: number, tokenAddress?: string) => { const { tokens, isLoading } = useTokens(chainId); diff --git a/packages/widget/src/hooks/useTokenBalance.ts b/packages/widget/src/hooks/useTokenBalance.ts index a923afd3a..414613573 100644 --- a/packages/widget/src/hooks/useTokenBalance.ts +++ b/packages/widget/src/hooks/useTokenBalance.ts @@ -1,5 +1,5 @@ import type { ExtendedChain } from '@lifi/sdk'; -import { type Token, type TokenAmount, getTokenBalances } from '@lifi/sdk'; +import { getTokenBalances, type Token, type TokenAmount } from '@lifi/sdk'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { useCallback, useMemo } from 'react'; import { useAccount } from './useAccount.js'; diff --git a/packages/widget/src/hooks/useTokenSearch.ts b/packages/widget/src/hooks/useTokenSearch.ts index 7d63abc69..b693704eb 100644 --- a/packages/widget/src/hooks/useTokenSearch.ts +++ b/packages/widget/src/hooks/useTokenSearch.ts @@ -1,4 +1,4 @@ -import { type ChainId, type TokensResponse, getToken } from '@lifi/sdk'; +import { getToken, type ChainId, type TokensResponse } from '@lifi/sdk'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import type { TokenAmount } from '../types/token.js'; diff --git a/packages/widget/src/hooks/useTools.ts b/packages/widget/src/hooks/useTools.ts index c065da4da..31f82717e 100644 --- a/packages/widget/src/hooks/useTools.ts +++ b/packages/widget/src/hooks/useTools.ts @@ -1,4 +1,4 @@ -import { type ToolsResponse, getTools } from '@lifi/sdk'; +import { getTools, type ToolsResponse } from '@lifi/sdk'; import { useQuery } from '@tanstack/react-query'; import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'; import { useSettingsStore } from '../stores/settings/useSettingsStore.js'; diff --git a/packages/widget/src/hooks/useTransactionDetails.ts b/packages/widget/src/hooks/useTransactionDetails.ts index d98f22b76..6c9729df8 100644 --- a/packages/widget/src/hooks/useTransactionDetails.ts +++ b/packages/widget/src/hooks/useTransactionDetails.ts @@ -1,5 +1,5 @@ import type { FullStatusData } from '@lifi/sdk'; -import { type StatusResponse, getStatus } from '@lifi/sdk'; +import { getStatus, type StatusResponse } from '@lifi/sdk'; import { keepPreviousData, useQuery, diff --git a/packages/widget/src/hooks/useTransactionHistory.ts b/packages/widget/src/hooks/useTransactionHistory.ts index 5fda1c760..d3c056113 100644 --- a/packages/widget/src/hooks/useTransactionHistory.ts +++ b/packages/widget/src/hooks/useTransactionHistory.ts @@ -1,5 +1,5 @@ import type { FullStatusData, StatusResponse } from '@lifi/sdk'; -import { type ExtendedTransactionInfo, getTransactionHistory } from '@lifi/sdk'; +import { getTransactionHistory, type ExtendedTransactionInfo } from '@lifi/sdk'; import type { QueryFunction } from '@tanstack/react-query'; import { useQueries } from '@tanstack/react-query'; import { useAccount } from './useAccount.js'; diff --git a/packages/widget/src/hooks/useWidgetEvents.ts b/packages/widget/src/hooks/useWidgetEvents.ts index 6a69a186d..a46b375f4 100644 --- a/packages/widget/src/hooks/useWidgetEvents.ts +++ b/packages/widget/src/hooks/useWidgetEvents.ts @@ -1,6 +1,5 @@ import _mitt from 'mitt'; import type { WidgetEvents } from '../types/events.js'; - // https://github.com/developit/mitt/issues/191 const mitt = _mitt as unknown as typeof _mitt.default; diff --git a/packages/widget/src/pages/LanguagesPage.tsx b/packages/widget/src/pages/LanguagesPage.tsx index dfbfe4188..9aa9c86a9 100644 --- a/packages/widget/src/pages/LanguagesPage.tsx +++ b/packages/widget/src/pages/LanguagesPage.tsx @@ -1,10 +1,10 @@ import { Check } from '@mui/icons-material'; import { List } from '@mui/material'; import { useTranslation } from 'react-i18next'; +import { useHeader } from '../hooks/useHeader.js'; import { ListItemText } from '../components/ListItemText.js'; import { PageContainer } from '../components/PageContainer.js'; import { SettingsListItemButton } from '../components/SettingsListItemButton.js'; -import { useHeader } from '../hooks/useHeader.js'; import { useLanguages } from '../hooks/useLanguages.js'; export const LanguagesPage: React.FC = () => { diff --git a/packages/widget/src/pages/MainPage/MainPage.tsx b/packages/widget/src/pages/MainPage/MainPage.tsx index 06833224d..7230f61ac 100644 --- a/packages/widget/src/pages/MainPage/MainPage.tsx +++ b/packages/widget/src/pages/MainPage/MainPage.tsx @@ -1,5 +1,4 @@ import { Box } from '@mui/material'; -import { useTranslation } from 'react-i18next'; import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTransactions.js'; import { AmountInput } from '../../components/AmountInput/AmountInput.js'; import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'; @@ -10,12 +9,13 @@ import { Routes } from '../../components/Routes/Routes.js'; import { SelectChainAndToken } from '../../components/SelectChainAndToken.js'; import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js'; import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useWideVariant } from '../../hooks/useWideVariant.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { HiddenUI } from '../../types/widget.js'; import { MainMessages } from './MainMessages.js'; import { ReviewButton } from './ReviewButton.js'; +import { useTranslation } from 'react-i18next'; export const MainPage: React.FC = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/RoutesPage/RoutesPage.tsx b/packages/widget/src/pages/RoutesPage/RoutesPage.tsx index f4249e84c..3028cc466 100644 --- a/packages/widget/src/pages/RoutesPage/RoutesPage.tsx +++ b/packages/widget/src/pages/RoutesPage/RoutesPage.tsx @@ -2,20 +2,20 @@ import type { Route } from '@lifi/sdk'; import type { BoxProps } from '@mui/material'; import { useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'; import { RouteCard } from '../../components/RouteCard/RouteCard.js'; import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js'; import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js'; import { useAccount } from '../../hooks/useAccount.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useRoutes } from '../../hooks/useRoutes.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { Stack } from './RoutesPage.style.js'; +import { useTranslation } from 'react-i18next'; export const RoutesPage: React.FC = () => { const { navigate } = useNavigateBack(); diff --git a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx index e88e9206b..66324a909 100644 --- a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx +++ b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx @@ -1,14 +1,14 @@ import type { ExtendedChain } from '@lifi/sdk'; import { Avatar, List, ListItemAvatar } from '@mui/material'; -import { useTranslation } from 'react-i18next'; +import { useHeader } from '../../hooks/useHeader.js'; import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js'; import { ListItemButton } from '../../components/ListItemButton.js'; import { ListItemText } from '../../components/ListItemText.js'; import { PageContainer } from '../../components/PageContainer.js'; import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import type { SelectChainPageProps } from './types.js'; +import { useTranslation } from 'react-i18next'; export const SelectChainPage: React.FC = ({ formType, diff --git a/packages/widget/src/pages/SelectEnabledToolsPage.tsx b/packages/widget/src/pages/SelectEnabledToolsPage.tsx index 43b39328f..39ce93e25 100644 --- a/packages/widget/src/pages/SelectEnabledToolsPage.tsx +++ b/packages/widget/src/pages/SelectEnabledToolsPage.tsx @@ -19,8 +19,8 @@ import { shallow } from 'zustand/shallow'; import { ListItemText } from '../components/ListItemText.js'; import { PageContainer } from '../components/PageContainer.js'; import { SettingsListItemButton } from '../components/SettingsListItemButton.js'; -import { useHeader } from '../hooks/useHeader.js'; import { useTools } from '../hooks/useTools.js'; +import { useHeader } from '../hooks/useHeader.js'; import { useSettingsStore } from '../stores/settings/useSettingsStore.js'; interface SelectAllCheckboxProps { diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx index 8736891b8..c60369aa1 100644 --- a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx +++ b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx @@ -1,18 +1,18 @@ import { Box } from '@mui/material'; import type { FC } from 'react'; import { useLayoutEffect, useRef, useState } from 'react'; -import { useTranslation } from 'react-i18next'; +import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'; import { PageContainer } from '../../components/PageContainer.js'; import { TokenList } from '../../components/TokenList/TokenList.js'; import { useContentHeight } from '../../hooks/useContentHeight.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'; import { useSwapOnly } from '../../hooks/useSwapOnly.js'; -import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import type { FormTypeProps } from '../../stores/form/types.js'; import { SearchTokenInput } from './SearchTokenInput.js'; +import { useTranslation } from 'react-i18next'; const minTokenListHeight = 360; diff --git a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx index 487ff5aec..7f868a0e9 100644 --- a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx +++ b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx @@ -18,12 +18,12 @@ import type { Connector } from 'wagmi'; import { useConnect, useAccount as useWagmiAccount } from 'wagmi'; import { Dialog } from '../../components/Dialog.js'; import { PageContainer } from '../../components/PageContainer.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { isItemAllowed } from '../../utils/item.js'; import { EVMListItemButton } from './EVMListItemButton.js'; import { SVMListItemButton } from './SVMListItemButton.js'; import { walletComparator } from './utils.js'; +import { useHeader } from '../../hooks/useHeader.js'; export const SelectWalletPage = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx index f2efedcca..5205b27ba 100644 --- a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx +++ b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx @@ -15,13 +15,13 @@ import { ListItemButton } from '../../components/ListItem//ListItemButton.js'; import { ListItem } from '../../components/ListItem/ListItem.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; diff --git a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx index 553391d5b..bc0b55146 100644 --- a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx +++ b/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx @@ -15,11 +15,11 @@ import { Menu } from '../../components/Menu.js'; import type { Account } from '../../hooks/useAccount.js'; import { useAccount } from '../../hooks/useAccount.js'; import { useChains } from '../../hooks/useChains.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; import { EmptyListIndicator } from './EmptyListIndicator.js'; diff --git a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx index 3fbc25043..b08a8343d 100644 --- a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx +++ b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx @@ -16,13 +16,13 @@ import { ListItem } from '../../components/ListItem/ListItem.js'; import { ListItemButton } from '../../components/ListItem/ListItemButton.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx index a8811fdb9..dbb208a1e 100644 --- a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx @@ -12,11 +12,11 @@ import { ListItem } from '../../components/ListItem/ListItem.js'; import { ListItemButton } from '../../components/ListItem/ListItemButton.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; +import { useHeader } from '../../hooks/useHeader.js'; import type { ToAddress } from '../../types/widget.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx index 66d40d5ae..bc51afa92 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx @@ -13,13 +13,13 @@ import { useAddressValidation, } from '../../hooks/useAddressValidation.js'; import { useChain } from '../../hooks/useChain.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'; import { ConfirmAddressSheet } from './ConfirmAddressSheet.js'; diff --git a/packages/widget/src/pages/SettingsPage/SettingsPage.tsx b/packages/widget/src/pages/SettingsPage/SettingsPage.tsx index 51a629d91..2495012d9 100644 --- a/packages/widget/src/pages/SettingsPage/SettingsPage.tsx +++ b/packages/widget/src/pages/SettingsPage/SettingsPage.tsx @@ -1,6 +1,4 @@ -import { useTranslation } from 'react-i18next'; import { PageContainer } from '../../components/PageContainer.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js'; import { GasPriceSettings } from './GasPriceSettings.js'; import { LanguageSetting } from './LanguageSetting.js'; @@ -10,6 +8,8 @@ import { SettingsList } from './SettingsCard/SettingCard.style.js'; import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'; import { SlippageSettings } from './SlippageSettings/SlippageSettings.js'; import { ThemeSettings } from './ThemeSettings.js'; +import { useHeader } from '../../hooks/useHeader.js'; +import { useTranslation } from 'react-i18next'; export const SettingsPage = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx index 7d96c2824..8d5439266 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx @@ -10,7 +10,6 @@ import { ContractComponent } from '../../components/ContractComponent/ContractCo import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useTools } from '../../hooks/useTools.js'; import { useTransactionDetails } from '../../hooks/useTransactionDetails.js'; @@ -22,6 +21,7 @@ import { formatTokenAmount } from '../../utils/format.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { ContactSupportButton } from './ContactSupportButton.js'; import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'; +import { useHeader } from '../../hooks/useHeader.js'; export const TransactionDetailsPage: React.FC = () => { const { t, i18n } = useTranslation(); diff --git a/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx b/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx index 71d8deae3..501e9f2c0 100644 --- a/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx +++ b/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx @@ -2,14 +2,14 @@ import type { FullStatusData } from '@lifi/sdk'; import { List } from '@mui/material'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useRef } from 'react'; -import { useTranslation } from 'react-i18next'; -import { PageContainer } from '../../components/PageContainer.js'; import { useHeader } from '../../hooks/useHeader.js'; +import { PageContainer } from '../../components/PageContainer.js'; import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'; import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'; import { TransactionHistoryItem } from './TransactionHistoryItem.js'; import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'; import { minTransactionListHeight } from './constants.js'; +import { useTranslation } from 'react-i18next'; export const TransactionHistoryPage: React.FC = () => { // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue diff --git a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx index 63c7e7892..f3d30303d 100644 --- a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx +++ b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx @@ -19,8 +19,8 @@ import { useTokenBalance } from '../../hooks/useTokenBalance.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { - type RouteExecution, RouteExecutionStatus, + type RouteExecution, } from '../../stores/routes/types.js'; import { getSourceTxHash } from '../../stores/routes/utils.js'; import { hasEnumFlag } from '../../utils/enum.js'; diff --git a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx index 8377f2605..0a91a7a73 100644 --- a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx +++ b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx @@ -10,12 +10,12 @@ import { GasMessage } from '../../components/GasMessage/GasMessage.js'; import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useRouteExecution } from '../../hooks/useRouteExecution.js'; import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { RouteExecutionStatus } from '../../stores/routes/types.js'; import { WidgetEvent } from '../../types/events.js'; import { formatTokenAmount } from '../../utils/format.js'; diff --git a/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx b/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx index 809ed7781..90d689a7e 100644 --- a/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx +++ b/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx @@ -26,7 +26,7 @@ import { trust, xdefi, } from '@lifi/wallet-management'; -import { type FC, type PropsWithChildren, useMemo } from 'react'; +import { useMemo, type FC, type PropsWithChildren } from 'react'; import type { Chain } from 'viem'; import { createClient } from 'viem'; import type { CreateConnectorFn } from 'wagmi'; diff --git a/packages/widget/src/providers/WalletProvider/EVMProvider.tsx b/packages/widget/src/providers/WalletProvider/EVMProvider.tsx index b4a4d7a15..bcb45662e 100644 --- a/packages/widget/src/providers/WalletProvider/EVMProvider.tsx +++ b/packages/widget/src/providers/WalletProvider/EVMProvider.tsx @@ -1,5 +1,5 @@ import { ChainType } from '@lifi/sdk'; -import { type FC, type PropsWithChildren, useContext } from 'react'; +import { useContext, type FC, type PropsWithChildren } from 'react'; import { WagmiContext } from 'wagmi'; import { isItemAllowed } from '../../utils/item.js'; import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'; diff --git a/packages/widget/src/providers/WalletProvider/SVMProvider.tsx b/packages/widget/src/providers/WalletProvider/SVMProvider.tsx index f5c948017..c054ee8a3 100644 --- a/packages/widget/src/providers/WalletProvider/SVMProvider.tsx +++ b/packages/widget/src/providers/WalletProvider/SVMProvider.tsx @@ -1,6 +1,6 @@ import { ChainType } from '@lifi/sdk'; import { ConnectionContext } from '@solana/wallet-adapter-react'; -import { type FC, type PropsWithChildren, useContext } from 'react'; +import { useContext, type FC, type PropsWithChildren } from 'react'; import { isItemAllowed } from '../../utils/item.js'; import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'; import { SVMBaseProvider } from './SVMBaseProvider.js'; diff --git a/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx b/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx index 5c885a1f6..1328db5ef 100644 --- a/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx +++ b/packages/widget/src/providers/WidgetProvider/WidgetProvider.tsx @@ -1,4 +1,4 @@ -import { type SDKConfig, config, createConfig } from '@lifi/sdk'; +import { config, createConfig, type SDKConfig } from '@lifi/sdk'; import { createContext, useContext, useId, useMemo } from 'react'; import { version } from '../../config/version.js'; import { setDefaultSettings } from '../../stores/settings/useSettingsStore.js'; diff --git a/packages/widget/src/stores/form/createFormStore.ts b/packages/widget/src/stores/form/createFormStore.ts index 7d3219aee..ad7fa4d38 100644 --- a/packages/widget/src/stores/form/createFormStore.ts +++ b/packages/widget/src/stores/form/createFormStore.ts @@ -1,4 +1,5 @@ import { createWithEqualityFn } from 'zustand/traditional'; + import type { DefaultValues, FormFieldArray, diff --git a/packages/widget/src/stores/form/useValidation.ts b/packages/widget/src/stores/form/useValidation.ts index da4b60f7f..577839a50 100644 --- a/packages/widget/src/stores/form/useValidation.ts +++ b/packages/widget/src/stores/form/useValidation.ts @@ -1,7 +1,6 @@ import { shallow } from 'zustand/shallow'; import type { ValidationProps } from './types.js'; import { useFormStore } from './useFormStore.js'; - export const useValidation = (): Omit => { const [isValid, isValidating, errors] = useFormStore( (store) => [store.isValid, store.isValidating, store.errors], diff --git a/prettier.config.js b/prettier.config.js deleted file mode 100644 index ed94d5670..000000000 --- a/prettier.config.js +++ /dev/null @@ -1,11 +0,0 @@ -import prettierPluginSortImports from '@trivago/prettier-plugin-sort-imports'; - -const config = { - singleQuote: true, - trailingComma: 'all', - plugins: [prettierPluginSortImports], - importOrder: ['^components/(.*)$', '^[./]'], - importOrderSortSpecifiers: true, -}; - -export default config; diff --git a/yarn.lock b/yarn.lock index b40ec9e8b..99bf6f9a3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -43,7 +43,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2": +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2": version: 7.24.2 resolution: "@babel/code-frame@npm:7.24.2" dependencies: @@ -97,18 +97,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:7.17.7": - version: 7.17.7 - resolution: "@babel/generator@npm:7.17.7" - dependencies: - "@babel/types": "npm:^7.17.0" - jsesc: "npm:^2.5.1" - source-map: "npm:^0.5.0" - checksum: 10/3303afa2b1310e67071d6c998121b2af1038d6450df266d24fe9a86329fb6288b8ab38bb71787917b3f81a1c4edbc5bc7e6735683fe1d0aa288b33e93daacd60 - languageName: node - linkType: hard - -"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": +"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": version: 7.24.4 resolution: "@babel/generator@npm:7.24.4" dependencies: @@ -333,7 +322,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-validator-identifier@npm:^7.16.7, @babel/helper-validator-identifier@npm:^7.22.20": +"@babel/helper-validator-identifier@npm:^7.22.20": version: 7.22.20 resolution: "@babel/helper-validator-identifier@npm:7.22.20" checksum: 10/df882d2675101df2d507b95b195ca2f86a3ef28cb711c84f37e79ca23178e13b9f0d8b522774211f51e40168bf5142be4c1c9776a150cddb61a0d5bf3e95750b @@ -381,7 +370,7 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.20.5, @babel/parser@npm:^7.21.8, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4": +"@babel/parser@npm:^7.21.8, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4": version: 7.24.4 resolution: "@babel/parser@npm:7.24.4" bin: @@ -1610,24 +1599,6 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:7.23.2": - version: 7.23.2 - resolution: "@babel/traverse@npm:7.23.2" - dependencies: - "@babel/code-frame": "npm:^7.22.13" - "@babel/generator": "npm:^7.23.0" - "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-hoist-variables": "npm:^7.22.5" - "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/parser": "npm:^7.23.0" - "@babel/types": "npm:^7.23.0" - debug: "npm:^4.1.0" - globals: "npm:^11.1.0" - checksum: 10/e4fcb8f8395804956df4ae1301230a14b6eb35b74a7058a0e0b40f6f4be7281e619e6dafe400e833d4512da5d61cf17ea177d04b00a8f7cf3d8d69aff83ca3d8 - languageName: node - linkType: hard - "@babel/traverse@npm:^7.24.1": version: 7.24.1 resolution: "@babel/traverse@npm:7.24.1" @@ -1646,17 +1617,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:7.17.0": - version: 7.17.0 - resolution: "@babel/types@npm:7.17.0" - dependencies: - "@babel/helper-validator-identifier": "npm:^7.16.7" - to-fast-properties: "npm:^2.0.0" - checksum: 10/535ccef360d0c74e2bb685050f3a45e6ab30f66c740bbdd0858148ed502043f1ae2006a9d0269ac3b7356b690091ae313efd912e408bc0198d80a14b2a6f1537 - languageName: node - linkType: hard - -"@babel/types@npm:^7.17.0, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.24.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": +"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.24.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": version: 7.24.0 resolution: "@babel/types@npm:7.24.0" dependencies: @@ -5221,26 +5182,6 @@ __metadata: languageName: node linkType: hard -"@trivago/prettier-plugin-sort-imports@npm:^4.3.0": - version: 4.3.0 - resolution: "@trivago/prettier-plugin-sort-imports@npm:4.3.0" - dependencies: - "@babel/generator": "npm:7.17.7" - "@babel/parser": "npm:^7.20.5" - "@babel/traverse": "npm:7.23.2" - "@babel/types": "npm:7.17.0" - javascript-natural-sort: "npm:0.7.1" - lodash: "npm:^4.17.21" - peerDependencies: - "@vue/compiler-sfc": 3.x - prettier: 2.x - 3.x - peerDependenciesMeta: - "@vue/compiler-sfc": - optional: true - checksum: 10/eb25cbeeaf85d3acd54019d1f3563447337a2faee7a35558adb69dff44ce3b93714a5b64ba4d0374f3df3191c32c993d441493fdc43a2c97c9b8a0e3d58702cf - languageName: node - linkType: hard - "@tufjs/canonical-json@npm:1.0.0": version: 1.0.0 resolution: "@tufjs/canonical-json@npm:1.0.0" @@ -12218,13 +12159,6 @@ __metadata: languageName: node linkType: hard -"javascript-natural-sort@npm:0.7.1": - version: 0.7.1 - resolution: "javascript-natural-sort@npm:0.7.1" - checksum: 10/7bf6eab67871865d347f09a95aa770f9206c1ab0226bcda6fdd9edec340bf41111a7f82abac30556aa16a21cfa3b2b1ca4a362c8b73dd5ce15220e5d31f49d79 - languageName: node - linkType: hard - "jayson@npm:^4.1.0": version: 4.1.0 resolution: "jayson@npm:4.1.0" @@ -16347,7 +16281,6 @@ __metadata: "@testing-library/jest-dom": "npm:^6.4.2" "@testing-library/react": "npm:^15.0.2" "@testing-library/user-event": "npm:^14.5.2" - "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0" "@types/eslint": "npm:^8.56.9" "@types/events": "npm:^3.0.3" "@types/node": "npm:^20.12.7" @@ -16831,7 +16764,7 @@ __metadata: languageName: node linkType: hard -"source-map@npm:^0.5.0, source-map@npm:^0.5.7": +"source-map@npm:^0.5.7": version: 0.5.7 resolution: "source-map@npm:0.5.7" checksum: 10/9b4ac749ec5b5831cad1f8cc4c19c4298ebc7474b24a0acf293e2f040f03f8eeccb3d01f12aa0f90cf46d555c887e03912b83a042c627f419bda5152d89c5269 From f5ef9d6a0e7ca75c4b81be5b45a0b734af108d71 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Wed, 17 Apr 2024 15:43:19 +0200 Subject: [PATCH 3/6] chore: use prettier plug that supports not move side effect imports --- .prettierrc | 4 --- package.json | 1 + packages/wallet-management/package.json | 3 +- packages/widget-embedded/package.json | 3 +- .../src/providers/WalletProvider.tsx | 2 +- packages/widget-playground-next/package.json | 3 +- .../src/app/WidgetNextView.tsx | 2 +- .../widget-playground-next/src/app/layout.tsx | 2 +- .../widget-playground-next/src/app/page.tsx | 19 +++++------- packages/widget-playground-vite/package.json | 3 +- packages/widget-playground-vite/src/App.tsx | 17 +++++------ packages/widget-playground/package.json | 3 +- .../Card/ExpandableCard/ExpandableCard.tsx | 4 +-- .../ExpandableCardAccordion.tsx | 3 +- .../CodeControl/CodeControl.tsx | 6 ++-- .../DrawerControls/CodeControl/CodeEditor.tsx | 10 +++---- .../CodeControl/FontEmbedInfo.tsx | 16 +++++----- .../CodeControl/ProjectButton.tsx | 2 +- .../DesignControls/AppearanceControl.tsx | 24 +++++++-------- .../DesignControls/ColorControls.tsx | 6 ++-- .../DesignControls/DesignControls.style.tsx | 18 ++++++------ .../FontsControl/FontsControl.tsx | 12 ++++---- .../fontDefinitions/defaultFonts.ts | 2 +- .../PlaygroundSettingsControl.tsx | 4 +-- .../DesignControls/SubvariantControl.tsx | 4 +-- .../DesignControls/ThemeControl.tsx | 7 +++-- .../DesignControls/VariantControl.tsx | 4 +-- .../WalletManagementControl.tsx | 4 +-- .../DrawerControls/DrawerControls.style.tsx | 7 +++-- .../DrawerControls/DrawerControls.tsx | 6 ++-- .../src/components/LifiLogo.tsx | 2 +- .../components/Widget/ConnectWalletButton.tsx | 4 +-- .../components/Widget/WidgetViewContainer.tsx | 2 +- .../src/hooks/useThemeMode.ts | 2 +- .../ExternalWalletProvider/EVMProvider.tsx | 2 +- .../ExternalWalletProvider/SVMProvider.tsx | 2 +- .../FontLoaderProvider/FontLoaderProvider.tsx | 4 +-- .../PlaygroundThemeProvider.tsx | 8 ++--- .../themeOverrides/light.ts | 1 + .../src/store/editTools/EditToolsProvider.tsx | 4 +-- .../store/editTools/createEditToolsStore.ts | 6 ++-- .../src/store/editTools/types.ts | 4 +-- .../store/editTools/useDrawerToolValues.ts | 2 +- .../widgetConfig/WidgetConfigProvider.tsx | 16 +++++----- .../widgetConfig/createWidgetConfigStore.ts | 4 +-- .../src/store/widgetConfig/types.ts | 2 +- .../src/store/widgetConfig/useConfigValues.ts | 6 ++-- .../utils/setThemeWithFallback.ts | 2 +- .../src/utils/cloneStructuredConfig.test.ts | 4 +-- .../src/utils/cloneStructuredConfig.ts | 2 +- packages/widget/package.json | 3 +- packages/widget/src/App.tsx | 1 + packages/widget/src/AppDefault.tsx | 3 +- packages/widget/src/AppProvider.tsx | 4 +-- .../ActiveTransactions.style.ts | 2 +- .../AlertMessage/AlertMessage.style.tsx | 2 +- .../AmountInput/AmountInput.style.tsx | 2 +- .../widget/src/components/AppContainer.tsx | 2 +- .../src/components/Avatar/Avatar.style.tsx | 4 +-- packages/widget/src/components/Card/Card.tsx | 2 +- .../src/components/Card/CardButton.style.tsx | 2 +- .../widget/src/components/Card/CardHeader.tsx | 2 +- .../widget/src/components/Card/CardLabel.tsx | 2 +- .../widget/src/components/Card/CardTitle.tsx | 2 +- .../widget/src/components/Header/Header.tsx | 2 +- .../Header/SettingsButton.style.tsx | 4 +-- .../components/Header/WalletMenu.style.tsx | 2 +- .../src/components/ListItem/ListItem.tsx | 2 +- .../widget/src/components/ListItemText.tsx | 2 +- packages/widget/src/components/Menu.tsx | 2 +- .../components/RouteCard/RouteCard.style.ts | 2 +- packages/widget/src/components/Select.tsx | 2 +- .../SelectTokenButton.style.tsx | 2 +- .../Step/CircularProgress.style.tsx | 4 +-- .../StepActions/StepActions.style.tsx | 4 +-- packages/widget/src/components/Switch.tsx | 2 +- .../widget/src/components/Tabs/Tabs.style.tsx | 2 +- .../src/components/Token/Token.style.tsx | 2 +- .../src/components/TokenList/TokenList.tsx | 2 +- packages/widget/src/hooks/useContentHeight.ts | 2 +- packages/widget/src/hooks/useRoutes.ts | 2 +- .../src/hooks/useScrollableContainer.ts | 2 +- packages/widget/src/hooks/useWidgetEvents.ts | 1 + packages/widget/src/pages/LanguagesPage.tsx | 2 +- .../widget/src/pages/MainPage/MainPage.tsx | 4 +-- .../src/pages/RoutesPage/RoutesPage.tsx | 4 +-- .../pages/SelectChainPage/SelectChainPage.tsx | 4 +-- .../src/pages/SelectEnabledToolsPage.tsx | 2 +- .../pages/SelectTokenPage/SelectTokenPage.tsx | 6 ++-- .../SelectWalletPage/SelectWalletPage.tsx | 2 +- .../src/pages/SendToWallet/BookmarksPage.tsx | 2 +- .../SendToWallet/ConnectedWalletsPage.tsx | 2 +- .../pages/SendToWallet/RecentWalletsPage.tsx | 2 +- .../SendToConfiguredWalletPage.tsx | 2 +- .../SendToWallet/SendToWalletPage.style.tsx | 6 ++-- .../pages/SendToWallet/SendToWalletPage.tsx | 2 +- .../SettingsCard/SettingCard.style.tsx | 2 +- .../src/pages/SettingsPage/SettingsPage.tsx | 4 +-- .../SlippageSettings.style.tsx | 2 +- .../TransactionDetailsPage.tsx | 2 +- .../TransactionHistoryPage.tsx | 6 ++-- .../StatusBottomSheet.style.tsx | 2 +- .../pages/TransactionPage/TransactionPage.tsx | 4 +-- .../WalletProvider/EVMBaseProvider.tsx | 2 +- .../providers/WalletProvider/SDKProviders.tsx | 2 +- packages/widget/src/stores/form/FormStore.tsx | 2 +- .../widget/src/stores/form/createFormStore.ts | 1 - .../widget/src/stores/form/useValidation.ts | 1 + prettier.config.js | 11 +++++++ yarn.lock | 29 ++++++++++++++++--- 110 files changed, 250 insertions(+), 216 deletions(-) delete mode 100644 .prettierrc create mode 100644 prettier.config.js diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index a20502b7f..000000000 --- a/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "singleQuote": true, - "trailingComma": "all" -} diff --git a/package.json b/package.json index c6639dd18..64a1599d0 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "devDependencies": { "@commitlint/cli": "^19.2.2", "@commitlint/config-conventional": "^19.2.2", + "@ianvs/prettier-plugin-sort-imports": "^4.2.1", "@testing-library/dom": "^10.0.0", "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^15.0.2", diff --git a/packages/wallet-management/package.json b/packages/wallet-management/package.json index 766d0042d..5a442ca98 100644 --- a/packages/wallet-management/package.json +++ b/packages/wallet-management/package.json @@ -15,7 +15,8 @@ "clean": "yarn build:clean && rm -rf dist", "check:types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix --max-warnings=0", + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types" }, "publishConfig": { diff --git a/packages/widget-embedded/package.json b/packages/widget-embedded/package.json index 356648741..932a09fea 100644 --- a/packages/widget-embedded/package.json +++ b/packages/widget-embedded/package.json @@ -10,7 +10,8 @@ "clean": "rm -rf dist tsconfig.tsbuildinfo", "preview": "vite preview", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix --max-warnings=0", + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types" }, "publishConfig": { diff --git a/packages/widget-embedded/src/providers/WalletProvider.tsx b/packages/widget-embedded/src/providers/WalletProvider.tsx index 15952fc99..3c765d17b 100644 --- a/packages/widget-embedded/src/providers/WalletProvider.tsx +++ b/packages/widget-embedded/src/providers/WalletProvider.tsx @@ -31,7 +31,7 @@ import { formatChain, useAvailableChains } from '@lifi/widget'; import { useMemo, type FC, type PropsWithChildren } from 'react'; import type { Chain } from 'viem'; import { createClient } from 'viem'; -import { WagmiProvider, createConfig, http } from 'wagmi'; +import { createConfig, http, WagmiProvider } from 'wagmi'; import { mainnet } from 'wagmi/chains'; const connectors = [ diff --git a/packages/widget-playground-next/package.json b/packages/widget-playground-next/package.json index a9bee56e9..d79d5c5b0 100644 --- a/packages/widget-playground-next/package.json +++ b/packages/widget-playground-next/package.json @@ -6,7 +6,8 @@ "build": "next build", "start": "next start", "lint": "next lint", - "pre-commit:validate": "next lint --fix --max-warnings=0" + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && next lint --fix --max-warnings=0" }, "publishConfig": { "access": "public" diff --git a/packages/widget-playground-next/src/app/WidgetNextView.tsx b/packages/widget-playground-next/src/app/WidgetNextView.tsx index 0df9e67db..615f95f72 100644 --- a/packages/widget-playground-next/src/app/WidgetNextView.tsx +++ b/packages/widget-playground-next/src/app/WidgetNextView.tsx @@ -1,9 +1,9 @@ import type { WidgetDrawer } from '@lifi/widget'; import { LiFiWidget } from '@lifi/widget'; import { + useConfig, WidgetSkeleton, WidgetViewContainer, - useConfig, } from '@lifi/widget-playground'; import { useCallback, useRef } from 'react'; import { ClientOnly } from './ClientOnly'; diff --git a/packages/widget-playground-next/src/app/layout.tsx b/packages/widget-playground-next/src/app/layout.tsx index 25ab4244a..382e85885 100644 --- a/packages/widget-playground-next/src/app/layout.tsx +++ b/packages/widget-playground-next/src/app/layout.tsx @@ -1,5 +1,5 @@ -import type { Metadata } from 'next'; import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; +import type { Metadata } from 'next'; export const metadata: Metadata = { title: 'LI.FI Widget', diff --git a/packages/widget-playground-next/src/app/page.tsx b/packages/widget-playground-next/src/app/page.tsx index e4bac3368..7a8723922 100644 --- a/packages/widget-playground-next/src/app/page.tsx +++ b/packages/widget-playground-next/src/app/page.tsx @@ -4,23 +4,20 @@ // the lack of structureClone support for Next.js is currently a requested feature // https://github.com/vercel/next.js/discussions/33189 import 'core-js/actual/structured-clone'; -import { type PropsWithChildren } from 'react'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { Box } from '@mui/material'; - import { - EnvVariablesProvider, - EditToolsProvider, - WidgetConfigProvider, - PlaygroundThemeProvider, DrawerControls, + EditToolsProvider, + EnvVariablesProvider, FontLoaderProvider, + PlaygroundThemeProvider, + WidgetConfigProvider, } from '@lifi/widget-playground'; - import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; - +import { Box } from '@mui/material'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { type PropsWithChildren } from 'react'; import '@lifi/widget-playground/fonts'; -import { WidgetNextView } from '@/app/WidgetNextView'; +import { WidgetNextView } from './WidgetNextView'; const queryClient = new QueryClient(); diff --git a/packages/widget-playground-vite/package.json b/packages/widget-playground-vite/package.json index 6b8162ec8..3ce490a01 100644 --- a/packages/widget-playground-vite/package.json +++ b/packages/widget-playground-vite/package.json @@ -10,7 +10,8 @@ "preview": "vite preview", "check:types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix --max-warnings=0" + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0" }, "publishConfig": { "access": "public" diff --git a/packages/widget-playground-vite/src/App.tsx b/packages/widget-playground-vite/src/App.tsx index 13b2aacf2..c444536f8 100644 --- a/packages/widget-playground-vite/src/App.tsx +++ b/packages/widget-playground-vite/src/App.tsx @@ -1,19 +1,16 @@ -import { type PropsWithChildren } from 'react'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { Box } from '@mui/material'; - import { - EnvVariablesProvider, + DrawerControls, EditToolsProvider, - WidgetConfigProvider, + EnvVariablesProvider, + FontLoaderProvider, PlaygroundThemeProvider, - DrawerControls, + WidgetConfigProvider, WidgetView, - FontLoaderProvider, } from '@lifi/widget-playground'; - import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; - +import { Box } from '@mui/material'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { type PropsWithChildren } from 'react'; import '@lifi/widget-playground/fonts'; const queryClient = new QueryClient(); diff --git a/packages/widget-playground/package.json b/packages/widget-playground/package.json index e1a298e64..a661ab61a 100644 --- a/packages/widget-playground/package.json +++ b/packages/widget-playground/package.json @@ -15,7 +15,8 @@ "check:types": "tsc --noEmit", "test": "vitest run", "test:watch": "vitest", - "pre-commit:validate": "yarn lint --fix --max-warnings=0", + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types & yarn test" }, "publishConfig": { diff --git a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx index e462dcd03..6d0e700ed 100644 --- a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx +++ b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx @@ -1,11 +1,11 @@ +import { Collapse } from '@mui/material'; import type { FC, PropsWithChildren, ReactNode } from 'react'; import { useId } from 'react'; -import { Collapse } from '@mui/material'; import { Card, CardRowButton, - CardValue, CardTitleContainer, + CardValue, } from '../Card.style'; import { useExpandableCard } from './useExpandableCard'; diff --git a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx index 1591f2e33..6561ce952 100644 --- a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx +++ b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx @@ -1,5 +1,4 @@ -import type { PropsWithChildren } from 'react'; -import type { Dispatch, SetStateAction } from 'react'; +import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'; import { createContext, useState } from 'react'; export const ExpandableCardAccordionContext = createContext<{ diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx index ff7fa6d38..68caac033 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx @@ -1,6 +1,5 @@ -import { Box, Typography } from '@mui/material'; import TabContext from '@mui/lab/TabContext'; -import { useEditToolsActions, useCodeToolValues } from '../../../store'; +import { Box, Typography } from '@mui/material'; import { CRALogo, GatsbyLogo, @@ -12,12 +11,13 @@ import { ViteLogo, VueLogo, } from '../../../logo'; +import { useCodeToolValues, useEditToolsActions } from '../../../store'; import { Card } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; import { TabContentContainer } from '../DrawerControls.style'; import { CodeEditor } from './CodeEditor'; -import { ProjectButton } from './ProjectButton'; import { FontEmbedInfo } from './FontEmbedInfo'; +import { ProjectButton } from './ProjectButton'; export const CodeControl = () => { const { codeControlTab } = useCodeToolValues(); diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx index f8936844a..cd5beb4d2 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx @@ -1,17 +1,17 @@ -import { useEffect, useRef, useState } from 'react'; -import { Tooltip, useTheme } from '@mui/material'; -import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import type { BeforeMount, OnMount } from '@monaco-editor/react'; import Editor from '@monaco-editor/react'; +import ContentCopyIcon from '@mui/icons-material/ContentCopy'; +import { Tooltip, useTheme } from '@mui/material'; +import { useEffect, useRef, useState } from 'react'; import { useThemeMode } from '../../../hooks'; +import { getConfigOutput, useConfig } from '../../../store'; import { tooltipPopperZIndex } from '../DrawerControls.style'; import { CodeContainer, - EditorContainer, CodeCopyButton, + EditorContainer, EditorSkeleton, } from './CodeControl.style'; -import { useConfig, getConfigOutput } from '../../../store'; import { stringifyConfig } from './utils/stringifyConfig'; interface MonacoEditor { diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx index 068edbc93..74ef347a8 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx @@ -1,23 +1,23 @@ -import type { MouseEventHandler } from 'react'; -import { useState } from 'react'; +import CloseIcon from '@mui/icons-material/Close'; +import InfoIcon from '@mui/icons-material/Info'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import { + Box, + ClickAwayListener, IconButton, Popper, Tooltip, Typography, - ClickAwayListener, - Box, } from '@mui/material'; -import InfoIcon from '@mui/icons-material/Info'; -import OpenInNewIcon from '@mui/icons-material/OpenInNew'; -import CloseIcon from '@mui/icons-material/Close'; +import type { MouseEventHandler } from 'react'; +import { useState } from 'react'; +import { useFontToolValues } from '../../../store'; import { popperZIndex, tooltipPopperZIndex } from '../DrawerControls.style'; import { FontEmbedPopperContainer, FontMessageCloseButton, GoogleFontLink, } from './CodeControl.style'; -import { useFontToolValues } from '../../../store'; interface FontMessageProps { fontFamily: string; diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx index 66bcbe20e..a6f2bc21b 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx @@ -1,5 +1,5 @@ import type { PropsWithChildren, ReactNode } from 'react'; -import { ProjectButtonBase, ProjectAvatar } from './CodeControl.style'; +import { ProjectAvatar, ProjectButtonBase } from './CodeControl.style'; interface ProjectButtonProps extends PropsWithChildren { href: string; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx index 3eaa86ce7..a010d69b4 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx @@ -1,3 +1,10 @@ +import type { Appearance, WidgetTheme } from '@lifi/widget'; +import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; +import LightModeIcon from '@mui/icons-material/LightMode'; +import NightlightIcon from '@mui/icons-material/Nightlight'; +import type { TabProps } from '@mui/material'; +import { Box, Tooltip } from '@mui/material'; +import diff from 'microdiff'; import type { FC, PropsWithChildren, @@ -5,26 +12,19 @@ import type { SyntheticEvent, } from 'react'; import { useEffect } from 'react'; -import type { TabProps } from '@mui/material'; -import { Box, Tooltip } from '@mui/material'; -import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; -import LightModeIcon from '@mui/icons-material/LightMode'; -import NightlightIcon from '@mui/icons-material/Nightlight'; -import diff from 'microdiff'; -import type { Appearance, WidgetTheme } from '@lifi/widget'; +import type { ThemeMode } from '../../../hooks'; +import { useThemeMode } from '../../../hooks'; import { useConfigActions, useConfigAppearance, useEditToolsActions, useThemeValues, } from '../../../store'; -import { ExpandableCard, CardValue } from '../../Card'; -import { Tab, Tabs } from '../../Tabs'; -import { Badge, CapitalizeFirstLetter } from './DesignControls.style'; import type { ThemeItem } from '../../../store'; -import type { ThemeMode } from '../../../hooks'; -import { useThemeMode } from '../../../hooks'; import { cloneStructuredConfig, patch } from '../../../utils'; +import { CardValue, ExpandableCard } from '../../Card'; +import { Tab, Tabs } from '../../Tabs'; +import { Badge, CapitalizeFirstLetter } from './DesignControls.style'; const appearanceIcons = { light: LightModeIcon, diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx index f3032a693..83bb0f757 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx @@ -1,13 +1,13 @@ import type { BoxProps } from '@mui/material'; -import { safe6DigitHexColor } from '../../../utils'; import { useConfigActions, useConfigColorsFromPath } from '../../../store'; +import { safe6DigitHexColor } from '../../../utils'; import { ExpandableCard } from '../../Card'; import { + CapitalizeFirstLetter, + ColorInput, ColorSelectorContainer, ColorSwatch, ColorSwatches, - ColorInput, - CapitalizeFirstLetter, } from './DesignControls.style'; const editableColors = { diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx index fd34f5911..edc560510 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx @@ -1,25 +1,25 @@ -import { alpha, styled } from '@mui/material/styles'; -import { inputBaseClasses } from '@mui/material/InputBase'; -import { autocompleteClasses } from '@mui/material/Autocomplete'; -import { alertClasses } from '@mui/material/Alert'; import type { + AutocompleteProps, BoxProps, InputBaseProps, Theme, - AutocompleteProps, } from '@mui/material'; import { + badgeClasses, Box, ButtonBase, InputBase, - Autocomplete as MuiAutocomplete, - Popper, Alert as MuiAlert, + Autocomplete as MuiAutocomplete, + Badge as MuiBadge, Select as MuiSelect, + Popper, Typography, - Badge as MuiBadge, - badgeClasses, } from '@mui/material'; +import { alertClasses } from '@mui/material/Alert'; +import { autocompleteClasses } from '@mui/material/Autocomplete'; +import { inputBaseClasses } from '@mui/material/InputBase'; +import { alpha, styled } from '@mui/material/styles'; import { getCardFieldsetBackgroundColor } from '../../../utils'; import { autocompletePopperZIndex } from '../DrawerControls.style'; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx index 5d742d1ba..eb79f5265 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx @@ -1,17 +1,17 @@ +import InfoIcon from '@mui/icons-material/Info'; +import { CircularProgress, TextField } from '@mui/material'; import type { FocusEventHandler, SyntheticEvent } from 'react'; import { useCallback } from 'react'; -import { CircularProgress, TextField } from '@mui/material'; -import InfoIcon from '@mui/icons-material/Info'; +import type { Font } from '../../../../providers'; +import { useFontLoader } from '../../../../providers'; import { useConfigActions, useEditToolsActions, useFontToolValues, } from '../../../../store'; -import type { Font } from '../../../../providers'; -import { useFontLoader } from '../../../../providers'; import { ExpandableCard } from '../../../Card'; -import { Autocomplete, StyledPopper, Alert } from '../DesignControls.style'; -import { defaultFont, allFonts } from './fontDefinitions'; +import { Alert, Autocomplete, StyledPopper } from '../DesignControls.style'; +import { allFonts, defaultFont } from './fontDefinitions'; const getCompleteFontFamily = (font: Font) => font.fallbackFonts diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts index 2c025d1e0..3770fcc44 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts @@ -1,6 +1,6 @@ import type { Font } from '../../../../../providers'; -import { systemFonts } from './systemFonts'; import { googleFonts } from './googleFonts'; +import { systemFonts } from './systemFonts'; // NOTE: although this is a google font, as the widget playground itself is using Inter we don't // need to download the font files as they should already be downloaded - thus no fontFiles are defined diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx index 13000c105..c188f056d 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx @@ -1,11 +1,11 @@ +import SettingsIcon from '@mui/icons-material/Settings'; import type { BoxProps } from '@mui/material'; import { useTheme } from '@mui/material'; -import SettingsIcon from '@mui/icons-material/Settings'; -import { safe6DigitHexColor } from '../../../utils'; import { useEditToolsActions, usePlaygroundSettingValues, } from '../../../store'; +import { safe6DigitHexColor } from '../../../utils'; import { ExpandableCard } from '../../Card'; import { CapitalizeFirstLetter, diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx index 87bdb2907..dc55fe006 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx @@ -1,8 +1,8 @@ -import type { SyntheticEvent } from 'react'; import type { WidgetSubvariant } from '@lifi/widget'; +import type { SyntheticEvent } from 'react'; import { useConfigActions, useConfigSubvariant } from '../../../store'; -import { Tab, Tabs } from '../../Tabs'; import { CardValue, ExpandableCard } from '../../Card'; +import { Tab, Tabs } from '../../Tabs'; export const SubvariantControl = () => { const { subvariant } = useConfigSubvariant(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx index c25e521d1..fe0ac5628 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx @@ -1,15 +1,16 @@ import type { SelectChangeEvent } from '@mui/material'; import { MenuItem } from '@mui/material'; -import { CardValue, ExpandableCard } from '../../Card'; +import { useThemeMode } from '../../../hooks'; import { useConfigActions, useEditToolsActions, useThemeValues, } from '../../../store'; +import type { ThemeItem } from '../../../store'; +import { CardValue, ExpandableCard } from '../../Card'; import { popperZIndex } from '../DrawerControls.style'; import { Select } from './DesignControls.style'; -import type { ThemeItem } from '../../../store'; -import { useThemeMode } from '../../../hooks'; + export const ThemeControl = () => { const { setConfigTheme } = useConfigActions(); const themeMode = useThemeMode(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx index ae63633d4..5ea5ed6d8 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx @@ -1,8 +1,8 @@ -import type { SyntheticEvent } from 'react'; import type { WidgetVariant } from '@lifi/widget'; +import type { SyntheticEvent } from 'react'; import { useConfigActions, useConfigVariant } from '../../../store'; -import { Tab, Tabs } from '../../Tabs'; import { CardValue, ExpandableCard } from '../../Card'; +import { Tab, Tabs } from '../../Tabs'; export const VariantControl = () => { const { variant } = useConfigVariant(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx index ce74a32c8..132ae3478 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx @@ -1,3 +1,5 @@ +import * as React from 'react'; +import { useConfigActions, useConfigWalletManagement } from '../../../store'; import { Card, CardRowContainer, @@ -5,8 +7,6 @@ import { CardValue, } from '../../Card'; import { Switch } from '../../Switch'; -import { useConfigActions, useConfigWalletManagement } from '../../../store'; -import * as React from 'react'; export const WalletManagementControl = () => { const { isExternalWalletManagement, replacementWalletConfig } = diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx index 73f9ccb52..4de0c51aa 100644 --- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx @@ -1,11 +1,12 @@ +import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; +import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; +import TabPanel from '@mui/lab/TabPanel'; import type { ButtonBaseProps, DrawerProps as MuiDrawerProps, } from '@mui/material'; import { Box, ButtonBase, Drawer as MuiDrawer, styled } from '@mui/material'; -import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; -import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; -import TabPanel from '@mui/lab/TabPanel'; + export const drawerZIndex = 1501; export const autocompletePopperZIndex = drawerZIndex + 1; export const tooltipPopperZIndex = drawerZIndex + 2; diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx index 4369158be..acfdc704d 100644 --- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx @@ -4,13 +4,15 @@ import IntegrationInstructionsIcon from '@mui/icons-material/IntegrationInstruct import RestartAltIcon from '@mui/icons-material/RestartAlt'; import TabContext from '@mui/lab/TabContext'; import { Box, IconButton, Tooltip } from '@mui/material'; +import { useFontInitialisation } from '../../providers'; import { useConfigActions, - useEditToolsActions, useDrawerToolValues, + useEditToolsActions, } from '../../store'; import { ExpandableCardAccordion } from '../Card'; import { Tab, Tabs } from '../Tabs'; +import { CodeControl } from './CodeControl'; import { AppearanceControl, ButtonRadiusControl, @@ -32,9 +34,7 @@ import { tooltipPopperZIndex, WidgetConfigControls, } from './DrawerControls.style'; -import { CodeControl } from './CodeControl'; import { DrawerHandle } from './DrawerHandle'; -import { useFontInitialisation } from '../../providers'; export const DrawerControls = () => { const { isDrawerOpen, drawerWidth, visibleControls } = useDrawerToolValues(); diff --git a/packages/widget-playground/src/components/LifiLogo.tsx b/packages/widget-playground/src/components/LifiLogo.tsx index bca1cbcfd..c9906217a 100644 --- a/packages/widget-playground/src/components/LifiLogo.tsx +++ b/packages/widget-playground/src/components/LifiLogo.tsx @@ -1,5 +1,5 @@ -import type { FC, SVGProps } from 'react'; import { styled } from '@mui/material'; +import type { FC, SVGProps } from 'react'; const LifiLogoBase: FC> = (props) => { return ( diff --git a/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx b/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx index 5d0b7a989..8892646ed 100644 --- a/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx +++ b/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx @@ -1,7 +1,7 @@ +import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; +import WalletIcon from '@mui/icons-material/Wallet'; import { Box } from '@mui/material'; import { useAccount, useConnect, useConnectors, useDisconnect } from 'wagmi'; -import WalletIcon from '@mui/icons-material/Wallet'; -import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; import { shortenAddress } from '../../utils'; import { ConnectionWalletButtonBase } from './WidgetView.style'; diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index 8fa9c6b93..b3ca1cedb 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -5,8 +5,8 @@ import type { PropsWithChildren } from 'react'; import { ExternalWalletProvider } from '../../providers'; import { useConfig, - useEditToolsActions, useDrawerToolValues, + useEditToolsActions, } from '../../store'; import { ToggleDrawerButton } from './ToggleDrawerButton'; import { diff --git a/packages/widget-playground/src/hooks/useThemeMode.ts b/packages/widget-playground/src/hooks/useThemeMode.ts index b695ece86..3d07bc5d9 100644 --- a/packages/widget-playground/src/hooks/useThemeMode.ts +++ b/packages/widget-playground/src/hooks/useThemeMode.ts @@ -1,5 +1,5 @@ -import { useConfigAppearance } from '../store'; import { useMediaQuery } from '@mui/material'; +import { useConfigAppearance } from '../store'; export type ThemeMode = 'dark' | 'light'; diff --git a/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx b/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx index 05ee1f2ab..ec3646e79 100644 --- a/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx +++ b/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx @@ -1,9 +1,9 @@ import { formatChain, useAvailableChains } from '@lifi/widget'; import { - RainbowKitProvider, darkTheme, getDefaultConfig, lightTheme, + RainbowKitProvider, type Theme as RainbowKitTheme, } from '@rainbow-me/rainbowkit'; import '@rainbow-me/rainbowkit/styles.css'; diff --git a/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx b/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx index b7e0c2f6a..70392fa6f 100644 --- a/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx +++ b/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx @@ -1,4 +1,3 @@ -import type { FC, PropsWithChildren } from 'react'; import type { Adapter } from '@solana/wallet-adapter-base'; import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'; import { @@ -6,6 +5,7 @@ import { WalletProvider, } from '@solana/wallet-adapter-react'; import { clusterApiUrl } from '@solana/web3.js'; +import type { FC, PropsWithChildren } from 'react'; const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet); /** diff --git a/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx b/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx index aa8c33b44..a39ad19e3 100644 --- a/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx +++ b/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx @@ -1,7 +1,7 @@ -import type { PropsWithChildren } from 'react'; -import { createContext, useContext, useEffect, useState } from 'react'; import type { UseMutateAsyncFunction } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query'; +import type { PropsWithChildren } from 'react'; +import { createContext, useContext, useEffect, useState } from 'react'; import { allFonts } from '../../components/DrawerControls/DesignControls'; import { useConfigFontFamily, useEditToolsActions } from '../../store'; import type { Font } from './types'; diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx b/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx index 8df5dbcf8..4900c4b39 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx @@ -1,14 +1,14 @@ +import { CssBaseline, ThemeProvider } from '@mui/material'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import { CssBaseline, ThemeProvider } from '@mui/material'; -import { usePlaygroundSettingValues } from '../../store'; import { useThemeMode } from '../../hooks'; +import { usePlaygroundSettingValues } from '../../store'; import { theme } from './theme'; import { - lightPalette, - darkPalette, darkComponents, + darkPalette, lightComponents, + lightPalette, } from './themeOverrides'; const appearancePaletteOverrides = { diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts index 89fbbda75..6a223a34e 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts @@ -1,4 +1,5 @@ import type { WidgetTheme } from '@lifi/widget'; + export const lightPalette = { mode: 'light', text: { diff --git a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx index 55d624ed1..3b3e84233 100644 --- a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx +++ b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx @@ -1,9 +1,9 @@ import type { FC, PropsWithChildren } from 'react'; import { createContext, useContext, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import type { ToolsState, ToolsStore } from './types'; -import { createEditToolsStore } from './createEditToolsStore'; import { useConfigActions } from '../widgetConfig'; +import { createEditToolsStore } from './createEditToolsStore'; +import type { ToolsState, ToolsStore } from './types'; export const EditToolsContext = createContext(null); diff --git a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts index 0c6460fa6..725a98d6c 100644 --- a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts +++ b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts @@ -1,9 +1,9 @@ +import type { WidgetTheme } from '@lifi/widget'; import type { StateCreator } from 'zustand'; -import { createWithEqualityFn } from 'zustand/traditional'; import { persist } from 'zustand/middleware'; -import type { WidgetTheme } from '@lifi/widget'; -import type { ToolsState } from './types'; +import { createWithEqualityFn } from 'zustand/traditional'; import { defaultDrawerWidth } from './constants'; +import type { ToolsState } from './types'; export const createEditToolsStore = (initialTheme?: WidgetTheme) => createWithEqualityFn( diff --git a/packages/widget-playground/src/store/editTools/types.ts b/packages/widget-playground/src/store/editTools/types.ts index a5665f9e8..b41f70836 100644 --- a/packages/widget-playground/src/store/editTools/types.ts +++ b/packages/widget-playground/src/store/editTools/types.ts @@ -1,7 +1,7 @@ -import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; +import type { WidgetTheme } from '@lifi/widget'; import type { StoreApi } from 'zustand'; +import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; import type { Font } from '../../providers'; -import type { WidgetTheme } from '@lifi/widget'; type ControlType = 'design' | 'code'; type CodeControlTab = 'config' | 'examples'; diff --git a/packages/widget-playground/src/store/editTools/useDrawerToolValues.ts b/packages/widget-playground/src/store/editTools/useDrawerToolValues.ts index 0442f46f7..167ac954e 100644 --- a/packages/widget-playground/src/store/editTools/useDrawerToolValues.ts +++ b/packages/widget-playground/src/store/editTools/useDrawerToolValues.ts @@ -1,6 +1,6 @@ import { shallow } from 'zustand/shallow'; -import { useEditToolsStore } from './EditToolsProvider'; import { defaultDrawerWidth } from './constants'; +import { useEditToolsStore } from './EditToolsProvider'; export const useDrawerToolValues = () => { const [isDrawerOpen, codeDrawerWidth, visibleControls, codeControlTab] = diff --git a/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx b/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx index 4c4c2f74c..951afd957 100644 --- a/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx +++ b/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx @@ -1,16 +1,16 @@ -import type { FC, PropsWithChildren } from 'react'; +import type { WidgetConfig } from '@lifi/widget'; +import { useMediaQuery } from '@mui/material'; +import isEqual from 'lodash.isequal'; import diff from 'microdiff'; +import type { FC, PropsWithChildren } from 'react'; import { createContext, useContext, useEffect, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import type { WidgetConfig } from '@lifi/widget'; -import type { WidgetConfigStore, WidgetConfigState } from './types.js'; -import { createWidgetConfigStore } from './createWidgetConfigStore.js'; -import isEqual from 'lodash.isequal'; -import { cloneStructuredConfig } from '../../utils/cloneStructuredConfig'; import { patch } from '../../utils'; -import { getConfigOutput } from './utils/getConfigOutput'; +import { cloneStructuredConfig } from '../../utils/cloneStructuredConfig'; +import { createWidgetConfigStore } from './createWidgetConfigStore.js'; import { themeItems } from './themes'; -import { useMediaQuery } from '@mui/material'; +import type { WidgetConfigState, WidgetConfigStore } from './types.js'; +import { getConfigOutput } from './utils/getConfigOutput'; export const WidgetConfigContext = createContext( null, diff --git a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts index 13ff9b6f5..10ba78812 100644 --- a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts +++ b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts @@ -1,11 +1,11 @@ -import { createWithEqualityFn } from 'zustand/traditional'; import type { WidgetConfig, WidgetTheme } from '@lifi/widget'; import type { StateCreator } from 'zustand'; import { persist } from 'zustand/middleware'; +import { createWithEqualityFn } from 'zustand/traditional'; import { addValueFromPathString, cloneStructuredConfig } from '../../utils'; +import type { ThemeItem } from '../editTools/types'; import type { WidgetConfigState } from './types'; import { getLocalStorageOutput } from './utils/getLocalStorageOutput'; -import type { ThemeItem } from '../editTools/types'; import { setThemeAppearanceWithFallback } from './utils/setThemeWithFallback'; export const createWidgetConfigStore = ( diff --git a/packages/widget-playground/src/store/widgetConfig/types.ts b/packages/widget-playground/src/store/widgetConfig/types.ts index 6be9dc690..8c2431b0a 100644 --- a/packages/widget-playground/src/store/widgetConfig/types.ts +++ b/packages/widget-playground/src/store/widgetConfig/types.ts @@ -6,8 +6,8 @@ import type { WidgetVariant, WidgetWalletConfig, } from '@lifi/widget'; -import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; import type { StoreApi } from 'zustand'; +import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; import type { ThemeItem } from '../editTools/types'; export interface WidgetConfigValues { diff --git a/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts b/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts index 7fcd99a85..4aba8bea4 100644 --- a/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts +++ b/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts @@ -1,8 +1,8 @@ -import { shallow } from 'zustand/shallow'; import { palette, paletteDark, paletteLight } from '@lifi/widget'; -import { useWidgetConfigStore } from './WidgetConfigProvider'; -import { getValueFromPath } from '../../utils'; +import { shallow } from 'zustand/shallow'; import { useThemeMode } from '../../hooks'; +import { getValueFromPath } from '../../utils'; +import { useWidgetConfigStore } from './WidgetConfigProvider'; export const useConfigVariant = () => { const [variant] = useWidgetConfigStore( diff --git a/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts b/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts index f41011777..bfa0980cf 100644 --- a/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts +++ b/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts @@ -1,6 +1,6 @@ import type { WidgetTheme } from '@lifi/widget'; -import { replayLocalStorageChangesOnTheme } from './replayLocalStorageChangesOnTheme'; import type { WidgetConfigState } from '../types'; +import { replayLocalStorageChangesOnTheme } from './replayLocalStorageChangesOnTheme'; export const setThemeAppearanceWithFallback = ( state: WidgetConfigState, diff --git a/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts b/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts index 6e1635e2b..177c16453 100644 --- a/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts +++ b/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts @@ -1,6 +1,6 @@ -import { expect, test, describe } from 'vitest'; -import { cloneStructuredConfig } from './cloneStructuredConfig'; import type { WidgetConfig } from '@lifi/widget'; +import { describe, expect, test } from 'vitest'; +import { cloneStructuredConfig } from './cloneStructuredConfig'; describe('cloneStructuredConfig', () => { test('performs a deep clone', () => { diff --git a/packages/widget-playground/src/utils/cloneStructuredConfig.ts b/packages/widget-playground/src/utils/cloneStructuredConfig.ts index c540ec1ab..a64b9243e 100644 --- a/packages/widget-playground/src/utils/cloneStructuredConfig.ts +++ b/packages/widget-playground/src/utils/cloneStructuredConfig.ts @@ -1,6 +1,6 @@ -import { substituteFunctions } from './substituteFunctions'; import { rehydrateFunctions } from '../store/widgetConfig/utils/rehydrateFunctions'; import type { FunctionReference, ObjectWithFunctions } from '../types'; +import { substituteFunctions } from './substituteFunctions'; const shallowReferences = () => { let referencesDictionary: FunctionReference[] = []; diff --git a/packages/widget/package.json b/packages/widget/package.json index 0fe2734a4..735269b9a 100644 --- a/packages/widget/package.json +++ b/packages/widget/package.json @@ -18,7 +18,8 @@ "check:circular-deps": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx')", "check:circular-deps-graph": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx') --image graph.svg", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix", + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types & yarn check:circular-deps" }, "publishConfig": { diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx index 62d2f29cd..16cbe0e89 100644 --- a/packages/widget/src/App.tsx +++ b/packages/widget/src/App.tsx @@ -1,4 +1,5 @@ 'use client'; + import { forwardRef, useMemo } from 'react'; import { AppDefault } from './AppDefault.js'; import type { WidgetDrawer } from './AppDrawer.js'; diff --git a/packages/widget/src/AppDefault.tsx b/packages/widget/src/AppDefault.tsx index 2d24f5e84..e0707032e 100644 --- a/packages/widget/src/AppDefault.tsx +++ b/packages/widget/src/AppDefault.tsx @@ -1,4 +1,5 @@ 'use client'; + import { AppRoutes } from './AppRoutes.js'; import { AppContainer, @@ -10,7 +11,7 @@ import { Initializer } from './components/Initializer.js'; import { RoutesExpanded } from './components/Routes/RoutesExpanded.js'; import { useWideVariant } from './hooks/useWideVariant.js'; import { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'; -import { ElementId, createElementId } from './utils/elements.js'; +import { createElementId, ElementId } from './utils/elements.js'; export const AppDefault = () => { const { elementId } = useWidgetConfig(); diff --git a/packages/widget/src/AppProvider.tsx b/packages/widget/src/AppProvider.tsx index f8ea34ae8..5b4bc2522 100644 --- a/packages/widget/src/AppProvider.tsx +++ b/packages/widget/src/AppProvider.tsx @@ -7,11 +7,11 @@ import { I18nProvider } from './providers/I18nProvider/I18nProvider.js'; import { ThemeProvider } from './providers/ThemeProvider/ThemeProvider.js'; import { WalletProvider } from './providers/WalletProvider/WalletProvider.js'; import { - WidgetProvider, useWidgetConfig, + WidgetProvider, } from './providers/WidgetProvider/WidgetProvider.js'; -import { StoreProvider } from './stores/StoreProvider.js'; import { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'; +import { StoreProvider } from './stores/StoreProvider.js'; import type { WidgetConfigProps } from './types/widget.js'; export const AppProvider: React.FC> = ({ diff --git a/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts b/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts index 668d52886..ebe9c9ef6 100644 --- a/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts +++ b/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts @@ -1,8 +1,8 @@ import { Button, + listItemSecondaryActionClasses, ListItem as MuiListItem, ListItemButton as MuiListItemButton, - listItemSecondaryActionClasses, styled, } from '@mui/material'; import { getContrastAlphaColor } from '../../utils/colors.js'; diff --git a/packages/widget/src/components/AlertMessage/AlertMessage.style.tsx b/packages/widget/src/components/AlertMessage/AlertMessage.style.tsx index 7a3dcfd59..9a720d607 100644 --- a/packages/widget/src/components/AlertMessage/AlertMessage.style.tsx +++ b/packages/widget/src/components/AlertMessage/AlertMessage.style.tsx @@ -1,4 +1,4 @@ -import { Box, alpha, darken, lighten, styled } from '@mui/material'; +import { alpha, Box, darken, lighten, styled } from '@mui/material'; import { getInfoBackgroundColor, getWarningBackgroundColor, diff --git a/packages/widget/src/components/AmountInput/AmountInput.style.tsx b/packages/widget/src/components/AmountInput/AmountInput.style.tsx index 9400838cc..493ab559b 100644 --- a/packages/widget/src/components/AmountInput/AmountInput.style.tsx +++ b/packages/widget/src/components/AmountInput/AmountInput.style.tsx @@ -1,8 +1,8 @@ import { Box, InputBase, - FormControl as MuiFormControl, inputBaseClasses, + FormControl as MuiFormControl, styled, } from '@mui/material'; diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx index 7ac34b19b..a04d61aaa 100644 --- a/packages/widget/src/components/AppContainer.tsx +++ b/packages/widget/src/components/AppContainer.tsx @@ -2,7 +2,7 @@ import { Box, Container, ScopedCssBaseline, styled } from '@mui/material'; import type { PropsWithChildren } from 'react'; import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'; import type { WidgetVariant } from '../types/widget.js'; -import { ElementId, createElementId } from '../utils/elements.js'; +import { createElementId, ElementId } from '../utils/elements.js'; export const maxHeight = 682; diff --git a/packages/widget/src/components/Avatar/Avatar.style.tsx b/packages/widget/src/components/Avatar/Avatar.style.tsx index 99d71668a..fd12689fa 100644 --- a/packages/widget/src/components/Avatar/Avatar.style.tsx +++ b/packages/widget/src/components/Avatar/Avatar.style.tsx @@ -1,11 +1,11 @@ import type { CSSObject } from '@mui/material'; import { + avatarClasses, AvatarGroup, + badgeClasses, Box, Avatar as MuiAvatar, Skeleton, - avatarClasses, - badgeClasses, styled, } from '@mui/material'; import { avatarMask16 } from './utils.js'; diff --git a/packages/widget/src/components/Card/Card.tsx b/packages/widget/src/components/Card/Card.tsx index 4ecbebe5a..cb9e5af07 100644 --- a/packages/widget/src/components/Card/Card.tsx +++ b/packages/widget/src/components/Card/Card.tsx @@ -1,5 +1,5 @@ import type { CardProps as MuiCardProps } from '@mui/material'; -import { Card as MuiCard, alpha, darken, lighten, styled } from '@mui/material'; +import { alpha, darken, lighten, Card as MuiCard, styled } from '@mui/material'; export interface CardProps extends MuiCardProps { type?: 'default' | 'selected' | 'error'; diff --git a/packages/widget/src/components/Card/CardButton.style.tsx b/packages/widget/src/components/Card/CardButton.style.tsx index 2c41a2491..87d5a3fdc 100644 --- a/packages/widget/src/components/Card/CardButton.style.tsx +++ b/packages/widget/src/components/Card/CardButton.style.tsx @@ -1,4 +1,4 @@ -import { Box, ButtonBase, Typography, styled } from '@mui/material'; +import { Box, ButtonBase, styled, Typography } from '@mui/material'; export const CardRowButton = styled(ButtonBase)(({ theme }) => ({ background: 'none', diff --git a/packages/widget/src/components/Card/CardHeader.tsx b/packages/widget/src/components/Card/CardHeader.tsx index d4d4c304e..fd948c09d 100644 --- a/packages/widget/src/components/Card/CardHeader.tsx +++ b/packages/widget/src/components/Card/CardHeader.tsx @@ -1,6 +1,6 @@ import { - CardHeader as MuiCardHeader, cardHeaderClasses, + CardHeader as MuiCardHeader, styled, } from '@mui/material'; diff --git a/packages/widget/src/components/Card/CardLabel.tsx b/packages/widget/src/components/Card/CardLabel.tsx index f9eb0c8e2..cb6ff41d0 100644 --- a/packages/widget/src/components/Card/CardLabel.tsx +++ b/packages/widget/src/components/Card/CardLabel.tsx @@ -1,9 +1,9 @@ import { Box, - Typography, getContrastRatio, lighten, styled, + Typography, } from '@mui/material'; import { blend } from '../../utils/colors.js'; diff --git a/packages/widget/src/components/Card/CardTitle.tsx b/packages/widget/src/components/Card/CardTitle.tsx index 79c79560e..3bb2dcaf7 100644 --- a/packages/widget/src/components/Card/CardTitle.tsx +++ b/packages/widget/src/components/Card/CardTitle.tsx @@ -1,4 +1,4 @@ -import { Typography, styled } from '@mui/material'; +import { styled, Typography } from '@mui/material'; export const CardTitle = styled(Typography, { shouldForwardProp: (prop) => !['required'].includes(prop as string), diff --git a/packages/widget/src/components/Header/Header.tsx b/packages/widget/src/components/Header/Header.tsx index 5b8aad99b..f1c8a9e9e 100644 --- a/packages/widget/src/components/Header/Header.tsx +++ b/packages/widget/src/components/Header/Header.tsx @@ -1,7 +1,7 @@ import type { FC, PropsWithChildren } from 'react'; import { useLocation } from 'react-router-dom'; import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'; -import { ElementId, createElementId } from '../../utils/elements.js'; +import { createElementId, ElementId } from '../../utils/elements.js'; import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'; import { Container } from './Header.style.js'; import { NavigationHeader } from './NavigationHeader.js'; diff --git a/packages/widget/src/components/Header/SettingsButton.style.tsx b/packages/widget/src/components/Header/SettingsButton.style.tsx index 30f88a2f6..51b838c2c 100644 --- a/packages/widget/src/components/Header/SettingsButton.style.tsx +++ b/packages/widget/src/components/Header/SettingsButton.style.tsx @@ -1,8 +1,8 @@ import { - IconButton, - Badge as MuiBadge, badgeClasses, darken, + IconButton, + Badge as MuiBadge, styled, } from '@mui/material'; import { diff --git a/packages/widget/src/components/Header/WalletMenu.style.tsx b/packages/widget/src/components/Header/WalletMenu.style.tsx index 70992954d..1adfef4c2 100644 --- a/packages/widget/src/components/Header/WalletMenu.style.tsx +++ b/packages/widget/src/components/Header/WalletMenu.style.tsx @@ -1,7 +1,7 @@ import { - Menu as MuiMenu, menuClasses, menuItemClasses, + Menu as MuiMenu, styled, svgIconClasses, } from '@mui/material'; diff --git a/packages/widget/src/components/ListItem/ListItem.tsx b/packages/widget/src/components/ListItem/ListItem.tsx index 4573bf3bc..064ac0d20 100644 --- a/packages/widget/src/components/ListItem/ListItem.tsx +++ b/packages/widget/src/components/ListItem/ListItem.tsx @@ -1,7 +1,7 @@ import { - ListItem as MuiListItem, listItemSecondaryActionClasses, listItemTextClasses, + ListItem as MuiListItem, styled, } from '@mui/material'; diff --git a/packages/widget/src/components/ListItemText.tsx b/packages/widget/src/components/ListItemText.tsx index d1f67a73b..36a4bf25c 100644 --- a/packages/widget/src/components/ListItemText.tsx +++ b/packages/widget/src/components/ListItemText.tsx @@ -1,6 +1,6 @@ import { - ListItemText as MuiListItemText, listItemTextClasses, + ListItemText as MuiListItemText, styled, } from '@mui/material'; diff --git a/packages/widget/src/components/Menu.tsx b/packages/widget/src/components/Menu.tsx index a9a2bcd3d..49af9399e 100644 --- a/packages/widget/src/components/Menu.tsx +++ b/packages/widget/src/components/Menu.tsx @@ -1,7 +1,7 @@ import { - Menu as MuiMenu, menuClasses, menuItemClasses, + Menu as MuiMenu, styled, svgIconClasses, } from '@mui/material'; diff --git a/packages/widget/src/components/RouteCard/RouteCard.style.ts b/packages/widget/src/components/RouteCard/RouteCard.style.ts index 6ced9fa6b..5e03fea47 100644 --- a/packages/widget/src/components/RouteCard/RouteCard.style.ts +++ b/packages/widget/src/components/RouteCard/RouteCard.style.ts @@ -1,4 +1,4 @@ -import { Box, Typography, alpha, styled } from '@mui/material'; +import { alpha, Box, styled, Typography } from '@mui/material'; export const IconTypography = styled(Typography)(({ theme }) => ({ color: diff --git a/packages/widget/src/components/Select.tsx b/packages/widget/src/components/Select.tsx index 670dc25f8..1f4a8dc1d 100644 --- a/packages/widget/src/components/Select.tsx +++ b/packages/widget/src/components/Select.tsx @@ -1,7 +1,7 @@ import { - Select as MuiSelect, inputBaseClasses, listItemIconClasses, + Select as MuiSelect, outlinedInputClasses, selectClasses, styled, diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx index 6ccb96aaa..0413e3dc3 100644 --- a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx +++ b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx @@ -1,8 +1,8 @@ import { - CardContent as MuiCardContent, cardHeaderClasses, darken, lighten, + CardContent as MuiCardContent, styled, } from '@mui/material'; import type { FormType } from '../../stores/form/types.js'; diff --git a/packages/widget/src/components/Step/CircularProgress.style.tsx b/packages/widget/src/components/Step/CircularProgress.style.tsx index f175dd30d..f74774848 100644 --- a/packages/widget/src/components/Step/CircularProgress.style.tsx +++ b/packages/widget/src/components/Step/CircularProgress.style.tsx @@ -1,11 +1,11 @@ import type { Status, Substatus } from '@lifi/sdk'; import type { Theme } from '@mui/material'; import { - Box, - CircularProgress as MuiCircularProgress, alpha, + Box, circularProgressClasses, keyframes, + CircularProgress as MuiCircularProgress, styled, } from '@mui/material'; diff --git a/packages/widget/src/components/StepActions/StepActions.style.tsx b/packages/widget/src/components/StepActions/StepActions.style.tsx index f166fa620..6d8c25531 100644 --- a/packages/widget/src/components/StepActions/StepActions.style.tsx +++ b/packages/widget/src/components/StepActions/StepActions.style.tsx @@ -1,12 +1,12 @@ import { + alpha, Box, StepConnector as MuiStepConnector, StepLabel as MuiStepLabel, - Typography, - alpha, stepConnectorClasses, stepLabelClasses, styled, + Typography, } from '@mui/material'; import { AvatarMasked } from '../Avatar/Avatar.style.js'; diff --git a/packages/widget/src/components/Switch.tsx b/packages/widget/src/components/Switch.tsx index f1da29474..3e408499c 100644 --- a/packages/widget/src/components/Switch.tsx +++ b/packages/widget/src/components/Switch.tsx @@ -1,6 +1,6 @@ import { - Switch as MuiSwitch, alpha, + Switch as MuiSwitch, styled, switchClasses, } from '@mui/material'; diff --git a/packages/widget/src/components/Tabs/Tabs.style.tsx b/packages/widget/src/components/Tabs/Tabs.style.tsx index 1fc600846..07b4022ed 100644 --- a/packages/widget/src/components/Tabs/Tabs.style.tsx +++ b/packages/widget/src/components/Tabs/Tabs.style.tsx @@ -1,8 +1,8 @@ import type { TabProps } from '@mui/material'; import { + alpha, Tab as MuiTab, Tabs as MuiTabs, - alpha, styled, tabClasses, tabsClasses, diff --git a/packages/widget/src/components/Token/Token.style.tsx b/packages/widget/src/components/Token/Token.style.tsx index 664d418da..70edf1b44 100644 --- a/packages/widget/src/components/Token/Token.style.tsx +++ b/packages/widget/src/components/Token/Token.style.tsx @@ -1,4 +1,4 @@ -import { Box, Typography, alpha, styled } from '@mui/material'; +import { alpha, Box, styled, Typography } from '@mui/material'; export const TextSecondaryContainer = styled(Box)(() => ({ display: 'flex', diff --git a/packages/widget/src/components/TokenList/TokenList.tsx b/packages/widget/src/components/TokenList/TokenList.tsx index bf97e6f37..5c7a4941e 100644 --- a/packages/widget/src/components/TokenList/TokenList.tsx +++ b/packages/widget/src/components/TokenList/TokenList.tsx @@ -10,10 +10,10 @@ import { FormKeyHelper } from '../../stores/form/types.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; import type { TokenAmount } from '../../types/token.js'; import { TokenNotFound } from './TokenNotFound.js'; -import { VirtualizedTokenList } from './VirtualizedTokenList.js'; import type { TokenListProps } from './types.js'; import { useTokenSelect } from './useTokenSelect.js'; import { filteredTokensComparator } from './utils.js'; +import { VirtualizedTokenList } from './VirtualizedTokenList.js'; export const TokenList: FC = ({ formType, diff --git a/packages/widget/src/hooks/useContentHeight.ts b/packages/widget/src/hooks/useContentHeight.ts index 26560a9f6..a22ad7d7b 100644 --- a/packages/widget/src/hooks/useContentHeight.ts +++ b/packages/widget/src/hooks/useContentHeight.ts @@ -1,6 +1,6 @@ import type { MutableRefObject } from 'react'; import { useLayoutEffect, useState } from 'react'; -import { ElementId, createElementId } from '../utils/elements.js'; +import { createElementId, ElementId } from '../utils/elements.js'; import { useDefaultElementId } from './useDefaultElementId.js'; import { getScrollableContainer } from './useScrollableContainer.js'; diff --git a/packages/widget/src/hooks/useRoutes.ts b/packages/widget/src/hooks/useRoutes.ts index 66981447f..8f93fb144 100644 --- a/packages/widget/src/hooks/useRoutes.ts +++ b/packages/widget/src/hooks/useRoutes.ts @@ -1,5 +1,5 @@ import type { Route, RoutesResponse, Token } from '@lifi/sdk'; -import { LiFiErrorCode, getContractCallsQuote, getRoutes } from '@lifi/sdk'; +import { getContractCallsQuote, getRoutes, LiFiErrorCode } from '@lifi/sdk'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { v4 as uuidv4 } from 'uuid'; import { parseUnits } from 'viem'; diff --git a/packages/widget/src/hooks/useScrollableContainer.ts b/packages/widget/src/hooks/useScrollableContainer.ts index ae7508732..0ebbe962b 100644 --- a/packages/widget/src/hooks/useScrollableContainer.ts +++ b/packages/widget/src/hooks/useScrollableContainer.ts @@ -1,5 +1,5 @@ import { useCallback, useLayoutEffect, useState } from 'react'; -import { ElementId, createElementId } from '../utils/elements.js'; +import { createElementId, ElementId } from '../utils/elements.js'; import { useDefaultElementId } from './useDefaultElementId.js'; export const getScrollableContainer = (elementId: string) => diff --git a/packages/widget/src/hooks/useWidgetEvents.ts b/packages/widget/src/hooks/useWidgetEvents.ts index a46b375f4..6a69a186d 100644 --- a/packages/widget/src/hooks/useWidgetEvents.ts +++ b/packages/widget/src/hooks/useWidgetEvents.ts @@ -1,5 +1,6 @@ import _mitt from 'mitt'; import type { WidgetEvents } from '../types/events.js'; + // https://github.com/developit/mitt/issues/191 const mitt = _mitt as unknown as typeof _mitt.default; diff --git a/packages/widget/src/pages/LanguagesPage.tsx b/packages/widget/src/pages/LanguagesPage.tsx index 9aa9c86a9..dfbfe4188 100644 --- a/packages/widget/src/pages/LanguagesPage.tsx +++ b/packages/widget/src/pages/LanguagesPage.tsx @@ -1,10 +1,10 @@ import { Check } from '@mui/icons-material'; import { List } from '@mui/material'; import { useTranslation } from 'react-i18next'; -import { useHeader } from '../hooks/useHeader.js'; import { ListItemText } from '../components/ListItemText.js'; import { PageContainer } from '../components/PageContainer.js'; import { SettingsListItemButton } from '../components/SettingsListItemButton.js'; +import { useHeader } from '../hooks/useHeader.js'; import { useLanguages } from '../hooks/useLanguages.js'; export const LanguagesPage: React.FC = () => { diff --git a/packages/widget/src/pages/MainPage/MainPage.tsx b/packages/widget/src/pages/MainPage/MainPage.tsx index 7230f61ac..06833224d 100644 --- a/packages/widget/src/pages/MainPage/MainPage.tsx +++ b/packages/widget/src/pages/MainPage/MainPage.tsx @@ -1,4 +1,5 @@ import { Box } from '@mui/material'; +import { useTranslation } from 'react-i18next'; import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTransactions.js'; import { AmountInput } from '../../components/AmountInput/AmountInput.js'; import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'; @@ -9,13 +10,12 @@ import { Routes } from '../../components/Routes/Routes.js'; import { SelectChainAndToken } from '../../components/SelectChainAndToken.js'; import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js'; import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useWideVariant } from '../../hooks/useWideVariant.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { HiddenUI } from '../../types/widget.js'; import { MainMessages } from './MainMessages.js'; import { ReviewButton } from './ReviewButton.js'; -import { useTranslation } from 'react-i18next'; export const MainPage: React.FC = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/RoutesPage/RoutesPage.tsx b/packages/widget/src/pages/RoutesPage/RoutesPage.tsx index 3028cc466..f4249e84c 100644 --- a/packages/widget/src/pages/RoutesPage/RoutesPage.tsx +++ b/packages/widget/src/pages/RoutesPage/RoutesPage.tsx @@ -2,20 +2,20 @@ import type { Route } from '@lifi/sdk'; import type { BoxProps } from '@mui/material'; import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'; import { RouteCard } from '../../components/RouteCard/RouteCard.js'; import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js'; import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js'; import { useAccount } from '../../hooks/useAccount.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useRoutes } from '../../hooks/useRoutes.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { Stack } from './RoutesPage.style.js'; -import { useTranslation } from 'react-i18next'; export const RoutesPage: React.FC = () => { const { navigate } = useNavigateBack(); diff --git a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx index 66324a909..e88e9206b 100644 --- a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx +++ b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx @@ -1,14 +1,14 @@ import type { ExtendedChain } from '@lifi/sdk'; import { Avatar, List, ListItemAvatar } from '@mui/material'; -import { useHeader } from '../../hooks/useHeader.js'; +import { useTranslation } from 'react-i18next'; import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js'; import { ListItemButton } from '../../components/ListItemButton.js'; import { ListItemText } from '../../components/ListItemText.js'; import { PageContainer } from '../../components/PageContainer.js'; import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import type { SelectChainPageProps } from './types.js'; -import { useTranslation } from 'react-i18next'; export const SelectChainPage: React.FC = ({ formType, diff --git a/packages/widget/src/pages/SelectEnabledToolsPage.tsx b/packages/widget/src/pages/SelectEnabledToolsPage.tsx index 39ce93e25..43b39328f 100644 --- a/packages/widget/src/pages/SelectEnabledToolsPage.tsx +++ b/packages/widget/src/pages/SelectEnabledToolsPage.tsx @@ -19,8 +19,8 @@ import { shallow } from 'zustand/shallow'; import { ListItemText } from '../components/ListItemText.js'; import { PageContainer } from '../components/PageContainer.js'; import { SettingsListItemButton } from '../components/SettingsListItemButton.js'; -import { useTools } from '../hooks/useTools.js'; import { useHeader } from '../hooks/useHeader.js'; +import { useTools } from '../hooks/useTools.js'; import { useSettingsStore } from '../stores/settings/useSettingsStore.js'; interface SelectAllCheckboxProps { diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx index c60369aa1..8736891b8 100644 --- a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx +++ b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx @@ -1,18 +1,18 @@ import { Box } from '@mui/material'; import type { FC } from 'react'; import { useLayoutEffect, useRef, useState } from 'react'; -import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; -import { useHeader } from '../../hooks/useHeader.js'; +import { useTranslation } from 'react-i18next'; import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'; import { PageContainer } from '../../components/PageContainer.js'; import { TokenList } from '../../components/TokenList/TokenList.js'; import { useContentHeight } from '../../hooks/useContentHeight.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'; import { useSwapOnly } from '../../hooks/useSwapOnly.js'; +import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import type { FormTypeProps } from '../../stores/form/types.js'; import { SearchTokenInput } from './SearchTokenInput.js'; -import { useTranslation } from 'react-i18next'; const minTokenListHeight = 360; diff --git a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx index 7f868a0e9..487ff5aec 100644 --- a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx +++ b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx @@ -18,12 +18,12 @@ import type { Connector } from 'wagmi'; import { useConnect, useAccount as useWagmiAccount } from 'wagmi'; import { Dialog } from '../../components/Dialog.js'; import { PageContainer } from '../../components/PageContainer.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { isItemAllowed } from '../../utils/item.js'; import { EVMListItemButton } from './EVMListItemButton.js'; import { SVMListItemButton } from './SVMListItemButton.js'; import { walletComparator } from './utils.js'; -import { useHeader } from '../../hooks/useHeader.js'; export const SelectWalletPage = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx index 5205b27ba..f2efedcca 100644 --- a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx +++ b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx @@ -15,13 +15,13 @@ import { ListItemButton } from '../../components/ListItem//ListItemButton.js'; import { ListItem } from '../../components/ListItem/ListItem.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; diff --git a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx index bc0b55146..553391d5b 100644 --- a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx +++ b/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx @@ -15,11 +15,11 @@ import { Menu } from '../../components/Menu.js'; import type { Account } from '../../hooks/useAccount.js'; import { useAccount } from '../../hooks/useAccount.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; import { EmptyListIndicator } from './EmptyListIndicator.js'; diff --git a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx index b08a8343d..3fbc25043 100644 --- a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx +++ b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx @@ -16,13 +16,13 @@ import { ListItem } from '../../components/ListItem/ListItem.js'; import { ListItemButton } from '../../components/ListItem/ListItemButton.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx index dbb208a1e..a8811fdb9 100644 --- a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx @@ -12,11 +12,11 @@ import { ListItem } from '../../components/ListItem/ListItem.js'; import { ListItemButton } from '../../components/ListItem/ListItemButton.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; -import { useHeader } from '../../hooks/useHeader.js'; import type { ToAddress } from '../../types/widget.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx index 035103939..72fbbdd86 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx @@ -1,12 +1,12 @@ import { Alert, + alertClasses, Box, IconButton, - List, - Typography, - alertClasses, inputBaseClasses, + List, styled, + Typography, } from '@mui/material'; import { ButtonTertiary } from '../../components/ButtonTertiary.js'; import { InputCard } from '../../components/Card/InputCard.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx index bc51afa92..66d40d5ae 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx @@ -13,13 +13,13 @@ import { useAddressValidation, } from '../../hooks/useAddressValidation.js'; import { useChain } from '../../hooks/useChain.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'; import { ConfirmAddressSheet } from './ConfirmAddressSheet.js'; diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx index 983fb20b7..3b2e6e1d4 100644 --- a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx +++ b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx @@ -1,4 +1,4 @@ -import { Box, Badge as MuiBadge, badgeClasses, styled } from '@mui/material'; +import { badgeClasses, Box, Badge as MuiBadge, styled } from '@mui/material'; export const SettingsList = styled(Box)(({ theme }) => ({ display: 'flex', diff --git a/packages/widget/src/pages/SettingsPage/SettingsPage.tsx b/packages/widget/src/pages/SettingsPage/SettingsPage.tsx index 2495012d9..51a629d91 100644 --- a/packages/widget/src/pages/SettingsPage/SettingsPage.tsx +++ b/packages/widget/src/pages/SettingsPage/SettingsPage.tsx @@ -1,4 +1,6 @@ +import { useTranslation } from 'react-i18next'; import { PageContainer } from '../../components/PageContainer.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js'; import { GasPriceSettings } from './GasPriceSettings.js'; import { LanguageSetting } from './LanguageSetting.js'; @@ -8,8 +10,6 @@ import { SettingsList } from './SettingsCard/SettingCard.style.js'; import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'; import { SlippageSettings } from './SlippageSettings/SlippageSettings.js'; import { ThemeSettings } from './ThemeSettings.js'; -import { useHeader } from '../../hooks/useHeader.js'; -import { useTranslation } from 'react-i18next'; export const SettingsPage = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx b/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx index ea4eecd3f..5cb6483d5 100644 --- a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx +++ b/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx @@ -1,9 +1,9 @@ import type { Theme } from '@mui/material'; import { + alpha, Box, ButtonBase, InputBase, - alpha, inputBaseClasses, styled, } from '@mui/material'; diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx index 8d5439266..7d96c2824 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx @@ -10,6 +10,7 @@ import { ContractComponent } from '../../components/ContractComponent/ContractCo import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useTools } from '../../hooks/useTools.js'; import { useTransactionDetails } from '../../hooks/useTransactionDetails.js'; @@ -21,7 +22,6 @@ import { formatTokenAmount } from '../../utils/format.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { ContactSupportButton } from './ContactSupportButton.js'; import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'; -import { useHeader } from '../../hooks/useHeader.js'; export const TransactionDetailsPage: React.FC = () => { const { t, i18n } = useTranslation(); diff --git a/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx b/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx index 501e9f2c0..ad7938c92 100644 --- a/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx +++ b/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx @@ -2,14 +2,14 @@ import type { FullStatusData } from '@lifi/sdk'; import { List } from '@mui/material'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useRef } from 'react'; -import { useHeader } from '../../hooks/useHeader.js'; +import { useTranslation } from 'react-i18next'; import { PageContainer } from '../../components/PageContainer.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'; +import { minTransactionListHeight } from './constants.js'; import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'; import { TransactionHistoryItem } from './TransactionHistoryItem.js'; import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'; -import { minTransactionListHeight } from './constants.js'; -import { useTranslation } from 'react-i18next'; export const TransactionHistoryPage: React.FC = () => { // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue diff --git a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.style.tsx b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.style.tsx index 67d5bcc66..6e4d16851 100644 --- a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.style.tsx +++ b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.style.tsx @@ -1,5 +1,5 @@ import type { Theme } from '@mui/material'; -import { Box, alpha, darken, styled } from '@mui/material'; +import { alpha, Box, darken, styled } from '@mui/material'; import { RouteExecutionStatus } from '../../stores/routes/types.js'; type StatusColor = RouteExecutionStatus | 'warning'; diff --git a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx index 0a91a7a73..4c9166815 100644 --- a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx +++ b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx @@ -10,12 +10,12 @@ import { GasMessage } from '../../components/GasMessage/GasMessage.js'; import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useRouteExecution } from '../../hooks/useRouteExecution.js'; import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { RouteExecutionStatus } from '../../stores/routes/types.js'; import { WidgetEvent } from '../../types/events.js'; import { formatTokenAmount } from '../../utils/format.js'; @@ -27,8 +27,8 @@ import { } from './StartTransactionButton.js'; import { StatusBottomSheet } from './StatusBottomSheet.js'; import { - TokenValueBottomSheet, getTokenValueLossThreshold, + TokenValueBottomSheet, } from './TokenValueBottomSheet.js'; import { calcValueLoss } from './utils.js'; diff --git a/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx b/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx index 90d689a7e..6a9d5bd8a 100644 --- a/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx +++ b/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx @@ -30,7 +30,7 @@ import { useMemo, type FC, type PropsWithChildren } from 'react'; import type { Chain } from 'viem'; import { createClient } from 'viem'; import type { CreateConnectorFn } from 'wagmi'; -import { WagmiProvider, createConfig, http } from 'wagmi'; +import { createConfig, http, WagmiProvider } from 'wagmi'; import { mainnet } from 'wagmi/chains'; import { defaultWalletConnectProjectId } from '../../config/walletConnect.js'; import { useAvailableChains } from '../../hooks/useAvailableChains.js'; diff --git a/packages/widget/src/providers/WalletProvider/SDKProviders.tsx b/packages/widget/src/providers/WalletProvider/SDKProviders.tsx index 2880e0cf9..4d77c35ff 100644 --- a/packages/widget/src/providers/WalletProvider/SDKProviders.tsx +++ b/packages/widget/src/providers/WalletProvider/SDKProviders.tsx @@ -1,5 +1,5 @@ import type { SDKProvider } from '@lifi/sdk'; -import { ChainType, EVM, Solana, config } from '@lifi/sdk'; +import { ChainType, config, EVM, Solana } from '@lifi/sdk'; import type { WalletAdapter } from '@solana/wallet-adapter-base'; import { useWallet } from '@solana/wallet-adapter-react'; import { getWalletClient, switchChain } from '@wagmi/core'; diff --git a/packages/widget/src/stores/form/FormStore.tsx b/packages/widget/src/stores/form/FormStore.tsx index d6530a7fb..8c6250085 100644 --- a/packages/widget/src/stores/form/FormStore.tsx +++ b/packages/widget/src/stores/form/FormStore.tsx @@ -2,9 +2,9 @@ import type { PropsWithChildren } from 'react'; import { useMemo, useRef } from 'react'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { HiddenUI } from '../../types/widget.js'; +import { createFormStore, formDefaultValues } from './createFormStore.js'; import { FormStoreContext } from './FormStoreContext.js'; import { FormUpdater } from './FormUpdater.js'; -import { createFormStore, formDefaultValues } from './createFormStore.js'; import type { FormStoreStore } from './types.js'; export const FormStoreProvider: React.FC = ({ diff --git a/packages/widget/src/stores/form/createFormStore.ts b/packages/widget/src/stores/form/createFormStore.ts index ad7fa4d38..7d3219aee 100644 --- a/packages/widget/src/stores/form/createFormStore.ts +++ b/packages/widget/src/stores/form/createFormStore.ts @@ -1,5 +1,4 @@ import { createWithEqualityFn } from 'zustand/traditional'; - import type { DefaultValues, FormFieldArray, diff --git a/packages/widget/src/stores/form/useValidation.ts b/packages/widget/src/stores/form/useValidation.ts index 577839a50..da4b60f7f 100644 --- a/packages/widget/src/stores/form/useValidation.ts +++ b/packages/widget/src/stores/form/useValidation.ts @@ -1,6 +1,7 @@ import { shallow } from 'zustand/shallow'; import type { ValidationProps } from './types.js'; import { useFormStore } from './useFormStore.js'; + export const useValidation = (): Omit => { const [isValid, isValidating, errors] = useFormStore( (store) => [store.isValid, store.isValidating, store.errors], diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 000000000..4ccc04605 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,11 @@ +import prettierPluginSortImports from '@ianvs/prettier-plugin-sort-imports'; + +const config = { + singleQuote: true, + trailingComma: 'all', + plugins: [prettierPluginSortImports], + importOrder: ['^components/(.*)$', '^[./]'], +}; + +// eslint-disable-next-line import/no-default-export +export default config; diff --git a/yarn.lock b/yarn.lock index 99bf6f9a3..c6f97b31f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -60,7 +60,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.16.0": +"@babel/core@npm:^7.16.0, @babel/core@npm:^7.24.0": version: 7.24.4 resolution: "@babel/core@npm:7.24.4" dependencies: @@ -97,7 +97,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": +"@babel/generator@npm:^7.23.6, @babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": version: 7.24.4 resolution: "@babel/generator@npm:7.24.4" dependencies: @@ -1599,7 +1599,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.24.1": +"@babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1": version: 7.24.1 resolution: "@babel/traverse@npm:7.24.1" dependencies: @@ -2572,6 +2572,26 @@ __metadata: languageName: node linkType: hard +"@ianvs/prettier-plugin-sort-imports@npm:^4.2.1": + version: 4.2.1 + resolution: "@ianvs/prettier-plugin-sort-imports@npm:4.2.1" + dependencies: + "@babel/core": "npm:^7.24.0" + "@babel/generator": "npm:^7.23.6" + "@babel/parser": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.0" + "@babel/types": "npm:^7.24.0" + semver: "npm:^7.5.2" + peerDependencies: + "@vue/compiler-sfc": 2.7.x || 3.x + prettier: 2 || 3 + peerDependenciesMeta: + "@vue/compiler-sfc": + optional: true + checksum: 10/23125ef4fc0b6b490c5bb74fa43635eede12fd5cdcdce24b7c30bad547353d20136a0f664512a73cf373a7871d9e0652c4a1a2fb680e8b418ab74dd9df0df3ef + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -16277,6 +16297,7 @@ __metadata: dependencies: "@commitlint/cli": "npm:^19.2.2" "@commitlint/config-conventional": "npm:^19.2.2" + "@ianvs/prettier-plugin-sort-imports": "npm:^4.2.1" "@testing-library/dom": "npm:^10.0.0" "@testing-library/jest-dom": "npm:^6.4.2" "@testing-library/react": "npm:^15.0.2" @@ -16471,7 +16492,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0": +"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.2, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0": version: 7.6.0 resolution: "semver@npm:7.6.0" dependencies: From 7c1954a918d50b0bdc4ef5ac60d931faa81330e0 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Fri, 3 May 2024 16:40:08 +0200 Subject: [PATCH 4/6] Revert "chore: use prettier plug that supports not move side effect imports" This reverts commit f5ef9d6a0e7ca75c4b81be5b45a0b734af108d71. --- .prettierrc | 4 +++ package.json | 1 - packages/wallet-management/package.json | 3 +- packages/widget-embedded/package.json | 3 +- .../src/providers/WalletProvider.tsx | 2 +- packages/widget-playground-next/package.json | 3 +- .../src/app/WidgetNextView.tsx | 2 +- .../widget-playground-next/src/app/layout.tsx | 2 +- .../widget-playground-next/src/app/page.tsx | 19 +++++++----- packages/widget-playground-vite/package.json | 3 +- packages/widget-playground-vite/src/App.tsx | 17 ++++++----- packages/widget-playground/package.json | 3 +- .../Card/ExpandableCard/ExpandableCard.tsx | 4 +-- .../ExpandableCardAccordion.tsx | 3 +- .../CodeControl/CodeControl.tsx | 6 ++-- .../DrawerControls/CodeControl/CodeEditor.tsx | 10 +++---- .../CodeControl/FontEmbedInfo.tsx | 16 +++++----- .../CodeControl/ProjectButton.tsx | 2 +- .../DesignControls/AppearanceControl.tsx | 24 +++++++-------- .../DesignControls/ColorControls.tsx | 6 ++-- .../DesignControls/DesignControls.style.tsx | 18 ++++++------ .../FontsControl/FontsControl.tsx | 12 ++++---- .../fontDefinitions/defaultFonts.ts | 2 +- .../PlaygroundSettingsControl.tsx | 4 +-- .../DesignControls/SubvariantControl.tsx | 4 +-- .../DesignControls/ThemeControl.tsx | 7 ++--- .../DesignControls/VariantControl.tsx | 4 +-- .../WalletManagementControl.tsx | 4 +-- .../DrawerControls/DrawerControls.style.tsx | 7 ++--- .../DrawerControls/DrawerControls.tsx | 6 ++-- .../src/components/LifiLogo.tsx | 2 +- .../components/Widget/ConnectWalletButton.tsx | 4 +-- .../components/Widget/WidgetViewContainer.tsx | 2 +- .../src/hooks/useThemeMode.ts | 2 +- .../ExternalWalletProvider/EVMProvider.tsx | 2 +- .../ExternalWalletProvider/SVMProvider.tsx | 2 +- .../FontLoaderProvider/FontLoaderProvider.tsx | 4 +-- .../PlaygroundThemeProvider.tsx | 8 ++--- .../themeOverrides/light.ts | 1 - .../src/store/editTools/EditToolsProvider.tsx | 4 +-- .../store/editTools/createEditToolsStore.ts | 6 ++-- .../src/store/editTools/types.ts | 4 +-- .../store/editTools/useDrawerToolValues.ts | 2 +- .../widgetConfig/WidgetConfigProvider.tsx | 16 +++++----- .../widgetConfig/createWidgetConfigStore.ts | 4 +-- .../src/store/widgetConfig/types.ts | 2 +- .../src/store/widgetConfig/useConfigValues.ts | 6 ++-- .../utils/setThemeWithFallback.ts | 2 +- .../src/utils/cloneStructuredConfig.test.ts | 4 +-- .../src/utils/cloneStructuredConfig.ts | 2 +- packages/widget/package.json | 3 +- packages/widget/src/App.tsx | 1 - packages/widget/src/AppDefault.tsx | 3 +- packages/widget/src/AppProvider.tsx | 4 +-- .../ActiveTransactions.style.ts | 2 +- .../AlertMessage/AlertMessage.style.tsx | 2 +- .../AmountInput/AmountInput.style.tsx | 2 +- .../widget/src/components/AppContainer.tsx | 2 +- .../src/components/Avatar/Avatar.style.tsx | 4 +-- packages/widget/src/components/Card/Card.tsx | 2 +- .../src/components/Card/CardButton.style.tsx | 2 +- .../widget/src/components/Card/CardHeader.tsx | 2 +- .../widget/src/components/Card/CardLabel.tsx | 2 +- .../widget/src/components/Card/CardTitle.tsx | 2 +- .../widget/src/components/Header/Header.tsx | 2 +- .../Header/SettingsButton.style.tsx | 4 +-- .../components/Header/WalletMenu.style.tsx | 2 +- .../src/components/ListItem/ListItem.tsx | 2 +- .../widget/src/components/ListItemText.tsx | 2 +- packages/widget/src/components/Menu.tsx | 2 +- .../components/RouteCard/RouteCard.style.ts | 2 +- packages/widget/src/components/Select.tsx | 2 +- .../SelectTokenButton.style.tsx | 2 +- .../Step/CircularProgress.style.tsx | 4 +-- .../StepActions/StepActions.style.tsx | 4 +-- packages/widget/src/components/Switch.tsx | 2 +- .../widget/src/components/Tabs/Tabs.style.tsx | 2 +- .../src/components/Token/Token.style.tsx | 2 +- .../src/components/TokenList/TokenList.tsx | 2 +- packages/widget/src/hooks/useContentHeight.ts | 2 +- packages/widget/src/hooks/useRoutes.ts | 2 +- .../src/hooks/useScrollableContainer.ts | 2 +- packages/widget/src/hooks/useWidgetEvents.ts | 1 - packages/widget/src/pages/LanguagesPage.tsx | 2 +- .../widget/src/pages/MainPage/MainPage.tsx | 4 +-- .../src/pages/RoutesPage/RoutesPage.tsx | 4 +-- .../pages/SelectChainPage/SelectChainPage.tsx | 4 +-- .../src/pages/SelectEnabledToolsPage.tsx | 2 +- .../pages/SelectTokenPage/SelectTokenPage.tsx | 6 ++-- .../SelectWalletPage/SelectWalletPage.tsx | 2 +- .../src/pages/SendToWallet/BookmarksPage.tsx | 2 +- .../SendToWallet/ConnectedWalletsPage.tsx | 2 +- .../pages/SendToWallet/RecentWalletsPage.tsx | 2 +- .../SendToConfiguredWalletPage.tsx | 2 +- .../SendToWallet/SendToWalletPage.style.tsx | 6 ++-- .../pages/SendToWallet/SendToWalletPage.tsx | 2 +- .../SettingsCard/SettingCard.style.tsx | 2 +- .../src/pages/SettingsPage/SettingsPage.tsx | 4 +-- .../SlippageSettings.style.tsx | 2 +- .../TransactionDetailsPage.tsx | 2 +- .../TransactionHistoryPage.tsx | 6 ++-- .../StatusBottomSheet.style.tsx | 2 +- .../pages/TransactionPage/TransactionPage.tsx | 4 +-- .../WalletProvider/EVMBaseProvider.tsx | 2 +- .../providers/WalletProvider/SDKProviders.tsx | 2 +- packages/widget/src/stores/form/FormStore.tsx | 2 +- .../widget/src/stores/form/createFormStore.ts | 1 + .../widget/src/stores/form/useValidation.ts | 1 - prettier.config.js | 11 ------- yarn.lock | 29 +++---------------- 110 files changed, 216 insertions(+), 250 deletions(-) create mode 100644 .prettierrc delete mode 100644 prettier.config.js diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..a20502b7f --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "all" +} diff --git a/package.json b/package.json index 64a1599d0..c6639dd18 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,6 @@ "devDependencies": { "@commitlint/cli": "^19.2.2", "@commitlint/config-conventional": "^19.2.2", - "@ianvs/prettier-plugin-sort-imports": "^4.2.1", "@testing-library/dom": "^10.0.0", "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^15.0.2", diff --git a/packages/wallet-management/package.json b/packages/wallet-management/package.json index 5a442ca98..766d0042d 100644 --- a/packages/wallet-management/package.json +++ b/packages/wallet-management/package.json @@ -15,8 +15,7 @@ "clean": "yarn build:clean && rm -rf dist", "check:types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", - "format": "prettier --write ./src/", - "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", + "pre-commit:validate": "yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types" }, "publishConfig": { diff --git a/packages/widget-embedded/package.json b/packages/widget-embedded/package.json index 932a09fea..356648741 100644 --- a/packages/widget-embedded/package.json +++ b/packages/widget-embedded/package.json @@ -10,8 +10,7 @@ "clean": "rm -rf dist tsconfig.tsbuildinfo", "preview": "vite preview", "lint": "eslint --ext .tsx --ext .ts ./src", - "format": "prettier --write ./src/", - "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", + "pre-commit:validate": "yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types" }, "publishConfig": { diff --git a/packages/widget-embedded/src/providers/WalletProvider.tsx b/packages/widget-embedded/src/providers/WalletProvider.tsx index 3c765d17b..15952fc99 100644 --- a/packages/widget-embedded/src/providers/WalletProvider.tsx +++ b/packages/widget-embedded/src/providers/WalletProvider.tsx @@ -31,7 +31,7 @@ import { formatChain, useAvailableChains } from '@lifi/widget'; import { useMemo, type FC, type PropsWithChildren } from 'react'; import type { Chain } from 'viem'; import { createClient } from 'viem'; -import { createConfig, http, WagmiProvider } from 'wagmi'; +import { WagmiProvider, createConfig, http } from 'wagmi'; import { mainnet } from 'wagmi/chains'; const connectors = [ diff --git a/packages/widget-playground-next/package.json b/packages/widget-playground-next/package.json index d79d5c5b0..a9bee56e9 100644 --- a/packages/widget-playground-next/package.json +++ b/packages/widget-playground-next/package.json @@ -6,8 +6,7 @@ "build": "next build", "start": "next start", "lint": "next lint", - "format": "prettier --write ./src/", - "pre-commit:validate": "yarn format && next lint --fix --max-warnings=0" + "pre-commit:validate": "next lint --fix --max-warnings=0" }, "publishConfig": { "access": "public" diff --git a/packages/widget-playground-next/src/app/WidgetNextView.tsx b/packages/widget-playground-next/src/app/WidgetNextView.tsx index 615f95f72..0df9e67db 100644 --- a/packages/widget-playground-next/src/app/WidgetNextView.tsx +++ b/packages/widget-playground-next/src/app/WidgetNextView.tsx @@ -1,9 +1,9 @@ import type { WidgetDrawer } from '@lifi/widget'; import { LiFiWidget } from '@lifi/widget'; import { - useConfig, WidgetSkeleton, WidgetViewContainer, + useConfig, } from '@lifi/widget-playground'; import { useCallback, useRef } from 'react'; import { ClientOnly } from './ClientOnly'; diff --git a/packages/widget-playground-next/src/app/layout.tsx b/packages/widget-playground-next/src/app/layout.tsx index 382e85885..25ab4244a 100644 --- a/packages/widget-playground-next/src/app/layout.tsx +++ b/packages/widget-playground-next/src/app/layout.tsx @@ -1,5 +1,5 @@ -import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; import type { Metadata } from 'next'; +import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; export const metadata: Metadata = { title: 'LI.FI Widget', diff --git a/packages/widget-playground-next/src/app/page.tsx b/packages/widget-playground-next/src/app/page.tsx index 7a8723922..e4bac3368 100644 --- a/packages/widget-playground-next/src/app/page.tsx +++ b/packages/widget-playground-next/src/app/page.tsx @@ -4,20 +4,23 @@ // the lack of structureClone support for Next.js is currently a requested feature // https://github.com/vercel/next.js/discussions/33189 import 'core-js/actual/structured-clone'; +import { type PropsWithChildren } from 'react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { Box } from '@mui/material'; + import { - DrawerControls, - EditToolsProvider, EnvVariablesProvider, - FontLoaderProvider, - PlaygroundThemeProvider, + EditToolsProvider, WidgetConfigProvider, + PlaygroundThemeProvider, + DrawerControls, + FontLoaderProvider, } from '@lifi/widget-playground'; + import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; -import { Box } from '@mui/material'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { type PropsWithChildren } from 'react'; + import '@lifi/widget-playground/fonts'; -import { WidgetNextView } from './WidgetNextView'; +import { WidgetNextView } from '@/app/WidgetNextView'; const queryClient = new QueryClient(); diff --git a/packages/widget-playground-vite/package.json b/packages/widget-playground-vite/package.json index 3ce490a01..6b8162ec8 100644 --- a/packages/widget-playground-vite/package.json +++ b/packages/widget-playground-vite/package.json @@ -10,8 +10,7 @@ "preview": "vite preview", "check:types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", - "format": "prettier --write ./src/", - "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0" + "pre-commit:validate": "yarn lint --fix --max-warnings=0" }, "publishConfig": { "access": "public" diff --git a/packages/widget-playground-vite/src/App.tsx b/packages/widget-playground-vite/src/App.tsx index c444536f8..13b2aacf2 100644 --- a/packages/widget-playground-vite/src/App.tsx +++ b/packages/widget-playground-vite/src/App.tsx @@ -1,16 +1,19 @@ +import { type PropsWithChildren } from 'react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { Box } from '@mui/material'; + import { - DrawerControls, - EditToolsProvider, EnvVariablesProvider, - FontLoaderProvider, - PlaygroundThemeProvider, + EditToolsProvider, WidgetConfigProvider, + PlaygroundThemeProvider, + DrawerControls, WidgetView, + FontLoaderProvider, } from '@lifi/widget-playground'; + import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; -import { Box } from '@mui/material'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { type PropsWithChildren } from 'react'; + import '@lifi/widget-playground/fonts'; const queryClient = new QueryClient(); diff --git a/packages/widget-playground/package.json b/packages/widget-playground/package.json index a661ab61a..e1a298e64 100644 --- a/packages/widget-playground/package.json +++ b/packages/widget-playground/package.json @@ -15,8 +15,7 @@ "check:types": "tsc --noEmit", "test": "vitest run", "test:watch": "vitest", - "format": "prettier --write ./src/", - "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", + "pre-commit:validate": "yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types & yarn test" }, "publishConfig": { diff --git a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx index 6d0e700ed..e462dcd03 100644 --- a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx +++ b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx @@ -1,11 +1,11 @@ -import { Collapse } from '@mui/material'; import type { FC, PropsWithChildren, ReactNode } from 'react'; import { useId } from 'react'; +import { Collapse } from '@mui/material'; import { Card, CardRowButton, - CardTitleContainer, CardValue, + CardTitleContainer, } from '../Card.style'; import { useExpandableCard } from './useExpandableCard'; diff --git a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx index 6561ce952..1591f2e33 100644 --- a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx +++ b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx @@ -1,4 +1,5 @@ -import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'; +import type { PropsWithChildren } from 'react'; +import type { Dispatch, SetStateAction } from 'react'; import { createContext, useState } from 'react'; export const ExpandableCardAccordionContext = createContext<{ diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx index 68caac033..ff7fa6d38 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx @@ -1,5 +1,6 @@ -import TabContext from '@mui/lab/TabContext'; import { Box, Typography } from '@mui/material'; +import TabContext from '@mui/lab/TabContext'; +import { useEditToolsActions, useCodeToolValues } from '../../../store'; import { CRALogo, GatsbyLogo, @@ -11,13 +12,12 @@ import { ViteLogo, VueLogo, } from '../../../logo'; -import { useCodeToolValues, useEditToolsActions } from '../../../store'; import { Card } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; import { TabContentContainer } from '../DrawerControls.style'; import { CodeEditor } from './CodeEditor'; -import { FontEmbedInfo } from './FontEmbedInfo'; import { ProjectButton } from './ProjectButton'; +import { FontEmbedInfo } from './FontEmbedInfo'; export const CodeControl = () => { const { codeControlTab } = useCodeToolValues(); diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx index cd5beb4d2..f8936844a 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx @@ -1,17 +1,17 @@ +import { useEffect, useRef, useState } from 'react'; +import { Tooltip, useTheme } from '@mui/material'; +import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import type { BeforeMount, OnMount } from '@monaco-editor/react'; import Editor from '@monaco-editor/react'; -import ContentCopyIcon from '@mui/icons-material/ContentCopy'; -import { Tooltip, useTheme } from '@mui/material'; -import { useEffect, useRef, useState } from 'react'; import { useThemeMode } from '../../../hooks'; -import { getConfigOutput, useConfig } from '../../../store'; import { tooltipPopperZIndex } from '../DrawerControls.style'; import { CodeContainer, - CodeCopyButton, EditorContainer, + CodeCopyButton, EditorSkeleton, } from './CodeControl.style'; +import { useConfig, getConfigOutput } from '../../../store'; import { stringifyConfig } from './utils/stringifyConfig'; interface MonacoEditor { diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx index 74ef347a8..068edbc93 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx @@ -1,23 +1,23 @@ -import CloseIcon from '@mui/icons-material/Close'; -import InfoIcon from '@mui/icons-material/Info'; -import OpenInNewIcon from '@mui/icons-material/OpenInNew'; +import type { MouseEventHandler } from 'react'; +import { useState } from 'react'; import { - Box, - ClickAwayListener, IconButton, Popper, Tooltip, Typography, + ClickAwayListener, + Box, } from '@mui/material'; -import type { MouseEventHandler } from 'react'; -import { useState } from 'react'; -import { useFontToolValues } from '../../../store'; +import InfoIcon from '@mui/icons-material/Info'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; +import CloseIcon from '@mui/icons-material/Close'; import { popperZIndex, tooltipPopperZIndex } from '../DrawerControls.style'; import { FontEmbedPopperContainer, FontMessageCloseButton, GoogleFontLink, } from './CodeControl.style'; +import { useFontToolValues } from '../../../store'; interface FontMessageProps { fontFamily: string; diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx index a6f2bc21b..66bcbe20e 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx @@ -1,5 +1,5 @@ import type { PropsWithChildren, ReactNode } from 'react'; -import { ProjectAvatar, ProjectButtonBase } from './CodeControl.style'; +import { ProjectButtonBase, ProjectAvatar } from './CodeControl.style'; interface ProjectButtonProps extends PropsWithChildren { href: string; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx index a010d69b4..3eaa86ce7 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx @@ -1,10 +1,3 @@ -import type { Appearance, WidgetTheme } from '@lifi/widget'; -import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; -import LightModeIcon from '@mui/icons-material/LightMode'; -import NightlightIcon from '@mui/icons-material/Nightlight'; -import type { TabProps } from '@mui/material'; -import { Box, Tooltip } from '@mui/material'; -import diff from 'microdiff'; import type { FC, PropsWithChildren, @@ -12,19 +5,26 @@ import type { SyntheticEvent, } from 'react'; import { useEffect } from 'react'; -import type { ThemeMode } from '../../../hooks'; -import { useThemeMode } from '../../../hooks'; +import type { TabProps } from '@mui/material'; +import { Box, Tooltip } from '@mui/material'; +import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; +import LightModeIcon from '@mui/icons-material/LightMode'; +import NightlightIcon from '@mui/icons-material/Nightlight'; +import diff from 'microdiff'; +import type { Appearance, WidgetTheme } from '@lifi/widget'; import { useConfigActions, useConfigAppearance, useEditToolsActions, useThemeValues, } from '../../../store'; -import type { ThemeItem } from '../../../store'; -import { cloneStructuredConfig, patch } from '../../../utils'; -import { CardValue, ExpandableCard } from '../../Card'; +import { ExpandableCard, CardValue } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; import { Badge, CapitalizeFirstLetter } from './DesignControls.style'; +import type { ThemeItem } from '../../../store'; +import type { ThemeMode } from '../../../hooks'; +import { useThemeMode } from '../../../hooks'; +import { cloneStructuredConfig, patch } from '../../../utils'; const appearanceIcons = { light: LightModeIcon, diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx index 83bb0f757..f3032a693 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx @@ -1,13 +1,13 @@ import type { BoxProps } from '@mui/material'; -import { useConfigActions, useConfigColorsFromPath } from '../../../store'; import { safe6DigitHexColor } from '../../../utils'; +import { useConfigActions, useConfigColorsFromPath } from '../../../store'; import { ExpandableCard } from '../../Card'; import { - CapitalizeFirstLetter, - ColorInput, ColorSelectorContainer, ColorSwatch, ColorSwatches, + ColorInput, + CapitalizeFirstLetter, } from './DesignControls.style'; const editableColors = { diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx index edc560510..fd34f5911 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx @@ -1,25 +1,25 @@ +import { alpha, styled } from '@mui/material/styles'; +import { inputBaseClasses } from '@mui/material/InputBase'; +import { autocompleteClasses } from '@mui/material/Autocomplete'; +import { alertClasses } from '@mui/material/Alert'; import type { - AutocompleteProps, BoxProps, InputBaseProps, Theme, + AutocompleteProps, } from '@mui/material'; import { - badgeClasses, Box, ButtonBase, InputBase, - Alert as MuiAlert, Autocomplete as MuiAutocomplete, - Badge as MuiBadge, - Select as MuiSelect, Popper, + Alert as MuiAlert, + Select as MuiSelect, Typography, + Badge as MuiBadge, + badgeClasses, } from '@mui/material'; -import { alertClasses } from '@mui/material/Alert'; -import { autocompleteClasses } from '@mui/material/Autocomplete'; -import { inputBaseClasses } from '@mui/material/InputBase'; -import { alpha, styled } from '@mui/material/styles'; import { getCardFieldsetBackgroundColor } from '../../../utils'; import { autocompletePopperZIndex } from '../DrawerControls.style'; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx index eb79f5265..5d742d1ba 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx @@ -1,17 +1,17 @@ -import InfoIcon from '@mui/icons-material/Info'; -import { CircularProgress, TextField } from '@mui/material'; import type { FocusEventHandler, SyntheticEvent } from 'react'; import { useCallback } from 'react'; -import type { Font } from '../../../../providers'; -import { useFontLoader } from '../../../../providers'; +import { CircularProgress, TextField } from '@mui/material'; +import InfoIcon from '@mui/icons-material/Info'; import { useConfigActions, useEditToolsActions, useFontToolValues, } from '../../../../store'; +import type { Font } from '../../../../providers'; +import { useFontLoader } from '../../../../providers'; import { ExpandableCard } from '../../../Card'; -import { Alert, Autocomplete, StyledPopper } from '../DesignControls.style'; -import { allFonts, defaultFont } from './fontDefinitions'; +import { Autocomplete, StyledPopper, Alert } from '../DesignControls.style'; +import { defaultFont, allFonts } from './fontDefinitions'; const getCompleteFontFamily = (font: Font) => font.fallbackFonts diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts index 3770fcc44..2c025d1e0 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts @@ -1,6 +1,6 @@ import type { Font } from '../../../../../providers'; -import { googleFonts } from './googleFonts'; import { systemFonts } from './systemFonts'; +import { googleFonts } from './googleFonts'; // NOTE: although this is a google font, as the widget playground itself is using Inter we don't // need to download the font files as they should already be downloaded - thus no fontFiles are defined diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx index c188f056d..13000c105 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx @@ -1,11 +1,11 @@ -import SettingsIcon from '@mui/icons-material/Settings'; import type { BoxProps } from '@mui/material'; import { useTheme } from '@mui/material'; +import SettingsIcon from '@mui/icons-material/Settings'; +import { safe6DigitHexColor } from '../../../utils'; import { useEditToolsActions, usePlaygroundSettingValues, } from '../../../store'; -import { safe6DigitHexColor } from '../../../utils'; import { ExpandableCard } from '../../Card'; import { CapitalizeFirstLetter, diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx index dc55fe006..87bdb2907 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx @@ -1,8 +1,8 @@ -import type { WidgetSubvariant } from '@lifi/widget'; import type { SyntheticEvent } from 'react'; +import type { WidgetSubvariant } from '@lifi/widget'; import { useConfigActions, useConfigSubvariant } from '../../../store'; -import { CardValue, ExpandableCard } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; +import { CardValue, ExpandableCard } from '../../Card'; export const SubvariantControl = () => { const { subvariant } = useConfigSubvariant(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx index fe0ac5628..c25e521d1 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx @@ -1,16 +1,15 @@ import type { SelectChangeEvent } from '@mui/material'; import { MenuItem } from '@mui/material'; -import { useThemeMode } from '../../../hooks'; +import { CardValue, ExpandableCard } from '../../Card'; import { useConfigActions, useEditToolsActions, useThemeValues, } from '../../../store'; -import type { ThemeItem } from '../../../store'; -import { CardValue, ExpandableCard } from '../../Card'; import { popperZIndex } from '../DrawerControls.style'; import { Select } from './DesignControls.style'; - +import type { ThemeItem } from '../../../store'; +import { useThemeMode } from '../../../hooks'; export const ThemeControl = () => { const { setConfigTheme } = useConfigActions(); const themeMode = useThemeMode(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx index 5ea5ed6d8..ae63633d4 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx @@ -1,8 +1,8 @@ -import type { WidgetVariant } from '@lifi/widget'; import type { SyntheticEvent } from 'react'; +import type { WidgetVariant } from '@lifi/widget'; import { useConfigActions, useConfigVariant } from '../../../store'; -import { CardValue, ExpandableCard } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; +import { CardValue, ExpandableCard } from '../../Card'; export const VariantControl = () => { const { variant } = useConfigVariant(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx index 132ae3478..ce74a32c8 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx @@ -1,5 +1,3 @@ -import * as React from 'react'; -import { useConfigActions, useConfigWalletManagement } from '../../../store'; import { Card, CardRowContainer, @@ -7,6 +5,8 @@ import { CardValue, } from '../../Card'; import { Switch } from '../../Switch'; +import { useConfigActions, useConfigWalletManagement } from '../../../store'; +import * as React from 'react'; export const WalletManagementControl = () => { const { isExternalWalletManagement, replacementWalletConfig } = diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx index 4de0c51aa..73f9ccb52 100644 --- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx @@ -1,12 +1,11 @@ -import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; -import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; -import TabPanel from '@mui/lab/TabPanel'; import type { ButtonBaseProps, DrawerProps as MuiDrawerProps, } from '@mui/material'; import { Box, ButtonBase, Drawer as MuiDrawer, styled } from '@mui/material'; - +import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; +import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; +import TabPanel from '@mui/lab/TabPanel'; export const drawerZIndex = 1501; export const autocompletePopperZIndex = drawerZIndex + 1; export const tooltipPopperZIndex = drawerZIndex + 2; diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx index acfdc704d..4369158be 100644 --- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx @@ -4,15 +4,13 @@ import IntegrationInstructionsIcon from '@mui/icons-material/IntegrationInstruct import RestartAltIcon from '@mui/icons-material/RestartAlt'; import TabContext from '@mui/lab/TabContext'; import { Box, IconButton, Tooltip } from '@mui/material'; -import { useFontInitialisation } from '../../providers'; import { useConfigActions, - useDrawerToolValues, useEditToolsActions, + useDrawerToolValues, } from '../../store'; import { ExpandableCardAccordion } from '../Card'; import { Tab, Tabs } from '../Tabs'; -import { CodeControl } from './CodeControl'; import { AppearanceControl, ButtonRadiusControl, @@ -34,7 +32,9 @@ import { tooltipPopperZIndex, WidgetConfigControls, } from './DrawerControls.style'; +import { CodeControl } from './CodeControl'; import { DrawerHandle } from './DrawerHandle'; +import { useFontInitialisation } from '../../providers'; export const DrawerControls = () => { const { isDrawerOpen, drawerWidth, visibleControls } = useDrawerToolValues(); diff --git a/packages/widget-playground/src/components/LifiLogo.tsx b/packages/widget-playground/src/components/LifiLogo.tsx index c9906217a..bca1cbcfd 100644 --- a/packages/widget-playground/src/components/LifiLogo.tsx +++ b/packages/widget-playground/src/components/LifiLogo.tsx @@ -1,5 +1,5 @@ -import { styled } from '@mui/material'; import type { FC, SVGProps } from 'react'; +import { styled } from '@mui/material'; const LifiLogoBase: FC> = (props) => { return ( diff --git a/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx b/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx index 8892646ed..5d0b7a989 100644 --- a/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx +++ b/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx @@ -1,7 +1,7 @@ -import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; -import WalletIcon from '@mui/icons-material/Wallet'; import { Box } from '@mui/material'; import { useAccount, useConnect, useConnectors, useDisconnect } from 'wagmi'; +import WalletIcon from '@mui/icons-material/Wallet'; +import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; import { shortenAddress } from '../../utils'; import { ConnectionWalletButtonBase } from './WidgetView.style'; diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index b3ca1cedb..8fa9c6b93 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -5,8 +5,8 @@ import type { PropsWithChildren } from 'react'; import { ExternalWalletProvider } from '../../providers'; import { useConfig, - useDrawerToolValues, useEditToolsActions, + useDrawerToolValues, } from '../../store'; import { ToggleDrawerButton } from './ToggleDrawerButton'; import { diff --git a/packages/widget-playground/src/hooks/useThemeMode.ts b/packages/widget-playground/src/hooks/useThemeMode.ts index 3d07bc5d9..b695ece86 100644 --- a/packages/widget-playground/src/hooks/useThemeMode.ts +++ b/packages/widget-playground/src/hooks/useThemeMode.ts @@ -1,5 +1,5 @@ -import { useMediaQuery } from '@mui/material'; import { useConfigAppearance } from '../store'; +import { useMediaQuery } from '@mui/material'; export type ThemeMode = 'dark' | 'light'; diff --git a/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx b/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx index ec3646e79..05ee1f2ab 100644 --- a/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx +++ b/packages/widget-playground/src/providers/ExternalWalletProvider/EVMProvider.tsx @@ -1,9 +1,9 @@ import { formatChain, useAvailableChains } from '@lifi/widget'; import { + RainbowKitProvider, darkTheme, getDefaultConfig, lightTheme, - RainbowKitProvider, type Theme as RainbowKitTheme, } from '@rainbow-me/rainbowkit'; import '@rainbow-me/rainbowkit/styles.css'; diff --git a/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx b/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx index 70392fa6f..b7e0c2f6a 100644 --- a/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx +++ b/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx @@ -1,3 +1,4 @@ +import type { FC, PropsWithChildren } from 'react'; import type { Adapter } from '@solana/wallet-adapter-base'; import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'; import { @@ -5,7 +6,6 @@ import { WalletProvider, } from '@solana/wallet-adapter-react'; import { clusterApiUrl } from '@solana/web3.js'; -import type { FC, PropsWithChildren } from 'react'; const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet); /** diff --git a/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx b/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx index a39ad19e3..aa8c33b44 100644 --- a/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx +++ b/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx @@ -1,7 +1,7 @@ -import type { UseMutateAsyncFunction } from '@tanstack/react-query'; -import { useMutation } from '@tanstack/react-query'; import type { PropsWithChildren } from 'react'; import { createContext, useContext, useEffect, useState } from 'react'; +import type { UseMutateAsyncFunction } from '@tanstack/react-query'; +import { useMutation } from '@tanstack/react-query'; import { allFonts } from '../../components/DrawerControls/DesignControls'; import { useConfigFontFamily, useEditToolsActions } from '../../store'; import type { Font } from './types'; diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx b/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx index 4900c4b39..8df5dbcf8 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx @@ -1,14 +1,14 @@ -import { CssBaseline, ThemeProvider } from '@mui/material'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import { useThemeMode } from '../../hooks'; +import { CssBaseline, ThemeProvider } from '@mui/material'; import { usePlaygroundSettingValues } from '../../store'; +import { useThemeMode } from '../../hooks'; import { theme } from './theme'; import { - darkComponents, + lightPalette, darkPalette, + darkComponents, lightComponents, - lightPalette, } from './themeOverrides'; const appearancePaletteOverrides = { diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts index 6a223a34e..89fbbda75 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/light.ts @@ -1,5 +1,4 @@ import type { WidgetTheme } from '@lifi/widget'; - export const lightPalette = { mode: 'light', text: { diff --git a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx index 3b3e84233..55d624ed1 100644 --- a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx +++ b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx @@ -1,9 +1,9 @@ import type { FC, PropsWithChildren } from 'react'; import { createContext, useContext, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import { useConfigActions } from '../widgetConfig'; -import { createEditToolsStore } from './createEditToolsStore'; import type { ToolsState, ToolsStore } from './types'; +import { createEditToolsStore } from './createEditToolsStore'; +import { useConfigActions } from '../widgetConfig'; export const EditToolsContext = createContext(null); diff --git a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts index 725a98d6c..0c6460fa6 100644 --- a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts +++ b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts @@ -1,9 +1,9 @@ -import type { WidgetTheme } from '@lifi/widget'; import type { StateCreator } from 'zustand'; -import { persist } from 'zustand/middleware'; import { createWithEqualityFn } from 'zustand/traditional'; -import { defaultDrawerWidth } from './constants'; +import { persist } from 'zustand/middleware'; +import type { WidgetTheme } from '@lifi/widget'; import type { ToolsState } from './types'; +import { defaultDrawerWidth } from './constants'; export const createEditToolsStore = (initialTheme?: WidgetTheme) => createWithEqualityFn( diff --git a/packages/widget-playground/src/store/editTools/types.ts b/packages/widget-playground/src/store/editTools/types.ts index b41f70836..a5665f9e8 100644 --- a/packages/widget-playground/src/store/editTools/types.ts +++ b/packages/widget-playground/src/store/editTools/types.ts @@ -1,7 +1,7 @@ -import type { WidgetTheme } from '@lifi/widget'; -import type { StoreApi } from 'zustand'; import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; +import type { StoreApi } from 'zustand'; import type { Font } from '../../providers'; +import type { WidgetTheme } from '@lifi/widget'; type ControlType = 'design' | 'code'; type CodeControlTab = 'config' | 'examples'; diff --git a/packages/widget-playground/src/store/editTools/useDrawerToolValues.ts b/packages/widget-playground/src/store/editTools/useDrawerToolValues.ts index 167ac954e..0442f46f7 100644 --- a/packages/widget-playground/src/store/editTools/useDrawerToolValues.ts +++ b/packages/widget-playground/src/store/editTools/useDrawerToolValues.ts @@ -1,6 +1,6 @@ import { shallow } from 'zustand/shallow'; -import { defaultDrawerWidth } from './constants'; import { useEditToolsStore } from './EditToolsProvider'; +import { defaultDrawerWidth } from './constants'; export const useDrawerToolValues = () => { const [isDrawerOpen, codeDrawerWidth, visibleControls, codeControlTab] = diff --git a/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx b/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx index 951afd957..4c4c2f74c 100644 --- a/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx +++ b/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx @@ -1,16 +1,16 @@ -import type { WidgetConfig } from '@lifi/widget'; -import { useMediaQuery } from '@mui/material'; -import isEqual from 'lodash.isequal'; -import diff from 'microdiff'; import type { FC, PropsWithChildren } from 'react'; +import diff from 'microdiff'; import { createContext, useContext, useEffect, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import { patch } from '../../utils'; -import { cloneStructuredConfig } from '../../utils/cloneStructuredConfig'; +import type { WidgetConfig } from '@lifi/widget'; +import type { WidgetConfigStore, WidgetConfigState } from './types.js'; import { createWidgetConfigStore } from './createWidgetConfigStore.js'; -import { themeItems } from './themes'; -import type { WidgetConfigState, WidgetConfigStore } from './types.js'; +import isEqual from 'lodash.isequal'; +import { cloneStructuredConfig } from '../../utils/cloneStructuredConfig'; +import { patch } from '../../utils'; import { getConfigOutput } from './utils/getConfigOutput'; +import { themeItems } from './themes'; +import { useMediaQuery } from '@mui/material'; export const WidgetConfigContext = createContext( null, diff --git a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts index 10ba78812..13ff9b6f5 100644 --- a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts +++ b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts @@ -1,11 +1,11 @@ +import { createWithEqualityFn } from 'zustand/traditional'; import type { WidgetConfig, WidgetTheme } from '@lifi/widget'; import type { StateCreator } from 'zustand'; import { persist } from 'zustand/middleware'; -import { createWithEqualityFn } from 'zustand/traditional'; import { addValueFromPathString, cloneStructuredConfig } from '../../utils'; -import type { ThemeItem } from '../editTools/types'; import type { WidgetConfigState } from './types'; import { getLocalStorageOutput } from './utils/getLocalStorageOutput'; +import type { ThemeItem } from '../editTools/types'; import { setThemeAppearanceWithFallback } from './utils/setThemeWithFallback'; export const createWidgetConfigStore = ( diff --git a/packages/widget-playground/src/store/widgetConfig/types.ts b/packages/widget-playground/src/store/widgetConfig/types.ts index 8c2431b0a..6be9dc690 100644 --- a/packages/widget-playground/src/store/widgetConfig/types.ts +++ b/packages/widget-playground/src/store/widgetConfig/types.ts @@ -6,8 +6,8 @@ import type { WidgetVariant, WidgetWalletConfig, } from '@lifi/widget'; -import type { StoreApi } from 'zustand'; import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; +import type { StoreApi } from 'zustand'; import type { ThemeItem } from '../editTools/types'; export interface WidgetConfigValues { diff --git a/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts b/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts index 4aba8bea4..7fcd99a85 100644 --- a/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts +++ b/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts @@ -1,8 +1,8 @@ -import { palette, paletteDark, paletteLight } from '@lifi/widget'; import { shallow } from 'zustand/shallow'; -import { useThemeMode } from '../../hooks'; -import { getValueFromPath } from '../../utils'; +import { palette, paletteDark, paletteLight } from '@lifi/widget'; import { useWidgetConfigStore } from './WidgetConfigProvider'; +import { getValueFromPath } from '../../utils'; +import { useThemeMode } from '../../hooks'; export const useConfigVariant = () => { const [variant] = useWidgetConfigStore( diff --git a/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts b/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts index bfa0980cf..f41011777 100644 --- a/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts +++ b/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts @@ -1,6 +1,6 @@ import type { WidgetTheme } from '@lifi/widget'; -import type { WidgetConfigState } from '../types'; import { replayLocalStorageChangesOnTheme } from './replayLocalStorageChangesOnTheme'; +import type { WidgetConfigState } from '../types'; export const setThemeAppearanceWithFallback = ( state: WidgetConfigState, diff --git a/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts b/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts index 177c16453..6e1635e2b 100644 --- a/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts +++ b/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts @@ -1,6 +1,6 @@ -import type { WidgetConfig } from '@lifi/widget'; -import { describe, expect, test } from 'vitest'; +import { expect, test, describe } from 'vitest'; import { cloneStructuredConfig } from './cloneStructuredConfig'; +import type { WidgetConfig } from '@lifi/widget'; describe('cloneStructuredConfig', () => { test('performs a deep clone', () => { diff --git a/packages/widget-playground/src/utils/cloneStructuredConfig.ts b/packages/widget-playground/src/utils/cloneStructuredConfig.ts index a64b9243e..c540ec1ab 100644 --- a/packages/widget-playground/src/utils/cloneStructuredConfig.ts +++ b/packages/widget-playground/src/utils/cloneStructuredConfig.ts @@ -1,6 +1,6 @@ +import { substituteFunctions } from './substituteFunctions'; import { rehydrateFunctions } from '../store/widgetConfig/utils/rehydrateFunctions'; import type { FunctionReference, ObjectWithFunctions } from '../types'; -import { substituteFunctions } from './substituteFunctions'; const shallowReferences = () => { let referencesDictionary: FunctionReference[] = []; diff --git a/packages/widget/package.json b/packages/widget/package.json index 735269b9a..0fe2734a4 100644 --- a/packages/widget/package.json +++ b/packages/widget/package.json @@ -18,8 +18,7 @@ "check:circular-deps": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx')", "check:circular-deps-graph": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx') --image graph.svg", "lint": "eslint --ext .tsx --ext .ts ./src", - "format": "prettier --write ./src/", - "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", + "pre-commit:validate": "yarn lint --fix", "pre-push:validate": "yarn check:types & yarn check:circular-deps" }, "publishConfig": { diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx index 16cbe0e89..62d2f29cd 100644 --- a/packages/widget/src/App.tsx +++ b/packages/widget/src/App.tsx @@ -1,5 +1,4 @@ 'use client'; - import { forwardRef, useMemo } from 'react'; import { AppDefault } from './AppDefault.js'; import type { WidgetDrawer } from './AppDrawer.js'; diff --git a/packages/widget/src/AppDefault.tsx b/packages/widget/src/AppDefault.tsx index e0707032e..2d24f5e84 100644 --- a/packages/widget/src/AppDefault.tsx +++ b/packages/widget/src/AppDefault.tsx @@ -1,5 +1,4 @@ 'use client'; - import { AppRoutes } from './AppRoutes.js'; import { AppContainer, @@ -11,7 +10,7 @@ import { Initializer } from './components/Initializer.js'; import { RoutesExpanded } from './components/Routes/RoutesExpanded.js'; import { useWideVariant } from './hooks/useWideVariant.js'; import { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'; -import { createElementId, ElementId } from './utils/elements.js'; +import { ElementId, createElementId } from './utils/elements.js'; export const AppDefault = () => { const { elementId } = useWidgetConfig(); diff --git a/packages/widget/src/AppProvider.tsx b/packages/widget/src/AppProvider.tsx index 5b4bc2522..f8ea34ae8 100644 --- a/packages/widget/src/AppProvider.tsx +++ b/packages/widget/src/AppProvider.tsx @@ -7,11 +7,11 @@ import { I18nProvider } from './providers/I18nProvider/I18nProvider.js'; import { ThemeProvider } from './providers/ThemeProvider/ThemeProvider.js'; import { WalletProvider } from './providers/WalletProvider/WalletProvider.js'; import { - useWidgetConfig, WidgetProvider, + useWidgetConfig, } from './providers/WidgetProvider/WidgetProvider.js'; -import { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'; import { StoreProvider } from './stores/StoreProvider.js'; +import { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'; import type { WidgetConfigProps } from './types/widget.js'; export const AppProvider: React.FC> = ({ diff --git a/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts b/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts index ebe9c9ef6..668d52886 100644 --- a/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts +++ b/packages/widget/src/components/ActiveTransactions/ActiveTransactions.style.ts @@ -1,8 +1,8 @@ import { Button, - listItemSecondaryActionClasses, ListItem as MuiListItem, ListItemButton as MuiListItemButton, + listItemSecondaryActionClasses, styled, } from '@mui/material'; import { getContrastAlphaColor } from '../../utils/colors.js'; diff --git a/packages/widget/src/components/AlertMessage/AlertMessage.style.tsx b/packages/widget/src/components/AlertMessage/AlertMessage.style.tsx index 9a720d607..7a3dcfd59 100644 --- a/packages/widget/src/components/AlertMessage/AlertMessage.style.tsx +++ b/packages/widget/src/components/AlertMessage/AlertMessage.style.tsx @@ -1,4 +1,4 @@ -import { alpha, Box, darken, lighten, styled } from '@mui/material'; +import { Box, alpha, darken, lighten, styled } from '@mui/material'; import { getInfoBackgroundColor, getWarningBackgroundColor, diff --git a/packages/widget/src/components/AmountInput/AmountInput.style.tsx b/packages/widget/src/components/AmountInput/AmountInput.style.tsx index 493ab559b..9400838cc 100644 --- a/packages/widget/src/components/AmountInput/AmountInput.style.tsx +++ b/packages/widget/src/components/AmountInput/AmountInput.style.tsx @@ -1,8 +1,8 @@ import { Box, InputBase, - inputBaseClasses, FormControl as MuiFormControl, + inputBaseClasses, styled, } from '@mui/material'; diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx index a04d61aaa..7ac34b19b 100644 --- a/packages/widget/src/components/AppContainer.tsx +++ b/packages/widget/src/components/AppContainer.tsx @@ -2,7 +2,7 @@ import { Box, Container, ScopedCssBaseline, styled } from '@mui/material'; import type { PropsWithChildren } from 'react'; import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'; import type { WidgetVariant } from '../types/widget.js'; -import { createElementId, ElementId } from '../utils/elements.js'; +import { ElementId, createElementId } from '../utils/elements.js'; export const maxHeight = 682; diff --git a/packages/widget/src/components/Avatar/Avatar.style.tsx b/packages/widget/src/components/Avatar/Avatar.style.tsx index fd12689fa..99d71668a 100644 --- a/packages/widget/src/components/Avatar/Avatar.style.tsx +++ b/packages/widget/src/components/Avatar/Avatar.style.tsx @@ -1,11 +1,11 @@ import type { CSSObject } from '@mui/material'; import { - avatarClasses, AvatarGroup, - badgeClasses, Box, Avatar as MuiAvatar, Skeleton, + avatarClasses, + badgeClasses, styled, } from '@mui/material'; import { avatarMask16 } from './utils.js'; diff --git a/packages/widget/src/components/Card/Card.tsx b/packages/widget/src/components/Card/Card.tsx index cb9e5af07..4ecbebe5a 100644 --- a/packages/widget/src/components/Card/Card.tsx +++ b/packages/widget/src/components/Card/Card.tsx @@ -1,5 +1,5 @@ import type { CardProps as MuiCardProps } from '@mui/material'; -import { alpha, darken, lighten, Card as MuiCard, styled } from '@mui/material'; +import { Card as MuiCard, alpha, darken, lighten, styled } from '@mui/material'; export interface CardProps extends MuiCardProps { type?: 'default' | 'selected' | 'error'; diff --git a/packages/widget/src/components/Card/CardButton.style.tsx b/packages/widget/src/components/Card/CardButton.style.tsx index 87d5a3fdc..2c41a2491 100644 --- a/packages/widget/src/components/Card/CardButton.style.tsx +++ b/packages/widget/src/components/Card/CardButton.style.tsx @@ -1,4 +1,4 @@ -import { Box, ButtonBase, styled, Typography } from '@mui/material'; +import { Box, ButtonBase, Typography, styled } from '@mui/material'; export const CardRowButton = styled(ButtonBase)(({ theme }) => ({ background: 'none', diff --git a/packages/widget/src/components/Card/CardHeader.tsx b/packages/widget/src/components/Card/CardHeader.tsx index fd948c09d..d4d4c304e 100644 --- a/packages/widget/src/components/Card/CardHeader.tsx +++ b/packages/widget/src/components/Card/CardHeader.tsx @@ -1,6 +1,6 @@ import { - cardHeaderClasses, CardHeader as MuiCardHeader, + cardHeaderClasses, styled, } from '@mui/material'; diff --git a/packages/widget/src/components/Card/CardLabel.tsx b/packages/widget/src/components/Card/CardLabel.tsx index cb6ff41d0..f9eb0c8e2 100644 --- a/packages/widget/src/components/Card/CardLabel.tsx +++ b/packages/widget/src/components/Card/CardLabel.tsx @@ -1,9 +1,9 @@ import { Box, + Typography, getContrastRatio, lighten, styled, - Typography, } from '@mui/material'; import { blend } from '../../utils/colors.js'; diff --git a/packages/widget/src/components/Card/CardTitle.tsx b/packages/widget/src/components/Card/CardTitle.tsx index 3bb2dcaf7..79c79560e 100644 --- a/packages/widget/src/components/Card/CardTitle.tsx +++ b/packages/widget/src/components/Card/CardTitle.tsx @@ -1,4 +1,4 @@ -import { styled, Typography } from '@mui/material'; +import { Typography, styled } from '@mui/material'; export const CardTitle = styled(Typography, { shouldForwardProp: (prop) => !['required'].includes(prop as string), diff --git a/packages/widget/src/components/Header/Header.tsx b/packages/widget/src/components/Header/Header.tsx index f1c8a9e9e..5b8aad99b 100644 --- a/packages/widget/src/components/Header/Header.tsx +++ b/packages/widget/src/components/Header/Header.tsx @@ -1,7 +1,7 @@ import type { FC, PropsWithChildren } from 'react'; import { useLocation } from 'react-router-dom'; import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'; -import { createElementId, ElementId } from '../../utils/elements.js'; +import { ElementId, createElementId } from '../../utils/elements.js'; import { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'; import { Container } from './Header.style.js'; import { NavigationHeader } from './NavigationHeader.js'; diff --git a/packages/widget/src/components/Header/SettingsButton.style.tsx b/packages/widget/src/components/Header/SettingsButton.style.tsx index 51b838c2c..30f88a2f6 100644 --- a/packages/widget/src/components/Header/SettingsButton.style.tsx +++ b/packages/widget/src/components/Header/SettingsButton.style.tsx @@ -1,8 +1,8 @@ import { - badgeClasses, - darken, IconButton, Badge as MuiBadge, + badgeClasses, + darken, styled, } from '@mui/material'; import { diff --git a/packages/widget/src/components/Header/WalletMenu.style.tsx b/packages/widget/src/components/Header/WalletMenu.style.tsx index 1adfef4c2..70992954d 100644 --- a/packages/widget/src/components/Header/WalletMenu.style.tsx +++ b/packages/widget/src/components/Header/WalletMenu.style.tsx @@ -1,7 +1,7 @@ import { + Menu as MuiMenu, menuClasses, menuItemClasses, - Menu as MuiMenu, styled, svgIconClasses, } from '@mui/material'; diff --git a/packages/widget/src/components/ListItem/ListItem.tsx b/packages/widget/src/components/ListItem/ListItem.tsx index 064ac0d20..4573bf3bc 100644 --- a/packages/widget/src/components/ListItem/ListItem.tsx +++ b/packages/widget/src/components/ListItem/ListItem.tsx @@ -1,7 +1,7 @@ import { + ListItem as MuiListItem, listItemSecondaryActionClasses, listItemTextClasses, - ListItem as MuiListItem, styled, } from '@mui/material'; diff --git a/packages/widget/src/components/ListItemText.tsx b/packages/widget/src/components/ListItemText.tsx index 36a4bf25c..d1f67a73b 100644 --- a/packages/widget/src/components/ListItemText.tsx +++ b/packages/widget/src/components/ListItemText.tsx @@ -1,6 +1,6 @@ import { - listItemTextClasses, ListItemText as MuiListItemText, + listItemTextClasses, styled, } from '@mui/material'; diff --git a/packages/widget/src/components/Menu.tsx b/packages/widget/src/components/Menu.tsx index 49af9399e..a9a2bcd3d 100644 --- a/packages/widget/src/components/Menu.tsx +++ b/packages/widget/src/components/Menu.tsx @@ -1,7 +1,7 @@ import { + Menu as MuiMenu, menuClasses, menuItemClasses, - Menu as MuiMenu, styled, svgIconClasses, } from '@mui/material'; diff --git a/packages/widget/src/components/RouteCard/RouteCard.style.ts b/packages/widget/src/components/RouteCard/RouteCard.style.ts index 5e03fea47..6ced9fa6b 100644 --- a/packages/widget/src/components/RouteCard/RouteCard.style.ts +++ b/packages/widget/src/components/RouteCard/RouteCard.style.ts @@ -1,4 +1,4 @@ -import { alpha, Box, styled, Typography } from '@mui/material'; +import { Box, Typography, alpha, styled } from '@mui/material'; export const IconTypography = styled(Typography)(({ theme }) => ({ color: diff --git a/packages/widget/src/components/Select.tsx b/packages/widget/src/components/Select.tsx index 1f4a8dc1d..670dc25f8 100644 --- a/packages/widget/src/components/Select.tsx +++ b/packages/widget/src/components/Select.tsx @@ -1,7 +1,7 @@ import { + Select as MuiSelect, inputBaseClasses, listItemIconClasses, - Select as MuiSelect, outlinedInputClasses, selectClasses, styled, diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx index 0413e3dc3..6ccb96aaa 100644 --- a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx +++ b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.style.tsx @@ -1,8 +1,8 @@ import { + CardContent as MuiCardContent, cardHeaderClasses, darken, lighten, - CardContent as MuiCardContent, styled, } from '@mui/material'; import type { FormType } from '../../stores/form/types.js'; diff --git a/packages/widget/src/components/Step/CircularProgress.style.tsx b/packages/widget/src/components/Step/CircularProgress.style.tsx index f74774848..f175dd30d 100644 --- a/packages/widget/src/components/Step/CircularProgress.style.tsx +++ b/packages/widget/src/components/Step/CircularProgress.style.tsx @@ -1,11 +1,11 @@ import type { Status, Substatus } from '@lifi/sdk'; import type { Theme } from '@mui/material'; import { - alpha, Box, + CircularProgress as MuiCircularProgress, + alpha, circularProgressClasses, keyframes, - CircularProgress as MuiCircularProgress, styled, } from '@mui/material'; diff --git a/packages/widget/src/components/StepActions/StepActions.style.tsx b/packages/widget/src/components/StepActions/StepActions.style.tsx index 6d8c25531..f166fa620 100644 --- a/packages/widget/src/components/StepActions/StepActions.style.tsx +++ b/packages/widget/src/components/StepActions/StepActions.style.tsx @@ -1,12 +1,12 @@ import { - alpha, Box, StepConnector as MuiStepConnector, StepLabel as MuiStepLabel, + Typography, + alpha, stepConnectorClasses, stepLabelClasses, styled, - Typography, } from '@mui/material'; import { AvatarMasked } from '../Avatar/Avatar.style.js'; diff --git a/packages/widget/src/components/Switch.tsx b/packages/widget/src/components/Switch.tsx index 3e408499c..f1da29474 100644 --- a/packages/widget/src/components/Switch.tsx +++ b/packages/widget/src/components/Switch.tsx @@ -1,6 +1,6 @@ import { - alpha, Switch as MuiSwitch, + alpha, styled, switchClasses, } from '@mui/material'; diff --git a/packages/widget/src/components/Tabs/Tabs.style.tsx b/packages/widget/src/components/Tabs/Tabs.style.tsx index 07b4022ed..1fc600846 100644 --- a/packages/widget/src/components/Tabs/Tabs.style.tsx +++ b/packages/widget/src/components/Tabs/Tabs.style.tsx @@ -1,8 +1,8 @@ import type { TabProps } from '@mui/material'; import { - alpha, Tab as MuiTab, Tabs as MuiTabs, + alpha, styled, tabClasses, tabsClasses, diff --git a/packages/widget/src/components/Token/Token.style.tsx b/packages/widget/src/components/Token/Token.style.tsx index 70edf1b44..664d418da 100644 --- a/packages/widget/src/components/Token/Token.style.tsx +++ b/packages/widget/src/components/Token/Token.style.tsx @@ -1,4 +1,4 @@ -import { alpha, Box, styled, Typography } from '@mui/material'; +import { Box, Typography, alpha, styled } from '@mui/material'; export const TextSecondaryContainer = styled(Box)(() => ({ display: 'flex', diff --git a/packages/widget/src/components/TokenList/TokenList.tsx b/packages/widget/src/components/TokenList/TokenList.tsx index 5c7a4941e..bf97e6f37 100644 --- a/packages/widget/src/components/TokenList/TokenList.tsx +++ b/packages/widget/src/components/TokenList/TokenList.tsx @@ -10,10 +10,10 @@ import { FormKeyHelper } from '../../stores/form/types.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; import type { TokenAmount } from '../../types/token.js'; import { TokenNotFound } from './TokenNotFound.js'; +import { VirtualizedTokenList } from './VirtualizedTokenList.js'; import type { TokenListProps } from './types.js'; import { useTokenSelect } from './useTokenSelect.js'; import { filteredTokensComparator } from './utils.js'; -import { VirtualizedTokenList } from './VirtualizedTokenList.js'; export const TokenList: FC = ({ formType, diff --git a/packages/widget/src/hooks/useContentHeight.ts b/packages/widget/src/hooks/useContentHeight.ts index a22ad7d7b..26560a9f6 100644 --- a/packages/widget/src/hooks/useContentHeight.ts +++ b/packages/widget/src/hooks/useContentHeight.ts @@ -1,6 +1,6 @@ import type { MutableRefObject } from 'react'; import { useLayoutEffect, useState } from 'react'; -import { createElementId, ElementId } from '../utils/elements.js'; +import { ElementId, createElementId } from '../utils/elements.js'; import { useDefaultElementId } from './useDefaultElementId.js'; import { getScrollableContainer } from './useScrollableContainer.js'; diff --git a/packages/widget/src/hooks/useRoutes.ts b/packages/widget/src/hooks/useRoutes.ts index 8f93fb144..66981447f 100644 --- a/packages/widget/src/hooks/useRoutes.ts +++ b/packages/widget/src/hooks/useRoutes.ts @@ -1,5 +1,5 @@ import type { Route, RoutesResponse, Token } from '@lifi/sdk'; -import { getContractCallsQuote, getRoutes, LiFiErrorCode } from '@lifi/sdk'; +import { LiFiErrorCode, getContractCallsQuote, getRoutes } from '@lifi/sdk'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import { v4 as uuidv4 } from 'uuid'; import { parseUnits } from 'viem'; diff --git a/packages/widget/src/hooks/useScrollableContainer.ts b/packages/widget/src/hooks/useScrollableContainer.ts index 0ebbe962b..ae7508732 100644 --- a/packages/widget/src/hooks/useScrollableContainer.ts +++ b/packages/widget/src/hooks/useScrollableContainer.ts @@ -1,5 +1,5 @@ import { useCallback, useLayoutEffect, useState } from 'react'; -import { createElementId, ElementId } from '../utils/elements.js'; +import { ElementId, createElementId } from '../utils/elements.js'; import { useDefaultElementId } from './useDefaultElementId.js'; export const getScrollableContainer = (elementId: string) => diff --git a/packages/widget/src/hooks/useWidgetEvents.ts b/packages/widget/src/hooks/useWidgetEvents.ts index 6a69a186d..a46b375f4 100644 --- a/packages/widget/src/hooks/useWidgetEvents.ts +++ b/packages/widget/src/hooks/useWidgetEvents.ts @@ -1,6 +1,5 @@ import _mitt from 'mitt'; import type { WidgetEvents } from '../types/events.js'; - // https://github.com/developit/mitt/issues/191 const mitt = _mitt as unknown as typeof _mitt.default; diff --git a/packages/widget/src/pages/LanguagesPage.tsx b/packages/widget/src/pages/LanguagesPage.tsx index dfbfe4188..9aa9c86a9 100644 --- a/packages/widget/src/pages/LanguagesPage.tsx +++ b/packages/widget/src/pages/LanguagesPage.tsx @@ -1,10 +1,10 @@ import { Check } from '@mui/icons-material'; import { List } from '@mui/material'; import { useTranslation } from 'react-i18next'; +import { useHeader } from '../hooks/useHeader.js'; import { ListItemText } from '../components/ListItemText.js'; import { PageContainer } from '../components/PageContainer.js'; import { SettingsListItemButton } from '../components/SettingsListItemButton.js'; -import { useHeader } from '../hooks/useHeader.js'; import { useLanguages } from '../hooks/useLanguages.js'; export const LanguagesPage: React.FC = () => { diff --git a/packages/widget/src/pages/MainPage/MainPage.tsx b/packages/widget/src/pages/MainPage/MainPage.tsx index 06833224d..7230f61ac 100644 --- a/packages/widget/src/pages/MainPage/MainPage.tsx +++ b/packages/widget/src/pages/MainPage/MainPage.tsx @@ -1,5 +1,4 @@ import { Box } from '@mui/material'; -import { useTranslation } from 'react-i18next'; import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTransactions.js'; import { AmountInput } from '../../components/AmountInput/AmountInput.js'; import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'; @@ -10,12 +9,13 @@ import { Routes } from '../../components/Routes/Routes.js'; import { SelectChainAndToken } from '../../components/SelectChainAndToken.js'; import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js'; import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useWideVariant } from '../../hooks/useWideVariant.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { HiddenUI } from '../../types/widget.js'; import { MainMessages } from './MainMessages.js'; import { ReviewButton } from './ReviewButton.js'; +import { useTranslation } from 'react-i18next'; export const MainPage: React.FC = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/RoutesPage/RoutesPage.tsx b/packages/widget/src/pages/RoutesPage/RoutesPage.tsx index f4249e84c..3028cc466 100644 --- a/packages/widget/src/pages/RoutesPage/RoutesPage.tsx +++ b/packages/widget/src/pages/RoutesPage/RoutesPage.tsx @@ -2,20 +2,20 @@ import type { Route } from '@lifi/sdk'; import type { BoxProps } from '@mui/material'; import { useMemo } from 'react'; -import { useTranslation } from 'react-i18next'; import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'; import { RouteCard } from '../../components/RouteCard/RouteCard.js'; import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js'; import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js'; import { useAccount } from '../../hooks/useAccount.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useRoutes } from '../../hooks/useRoutes.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { Stack } from './RoutesPage.style.js'; +import { useTranslation } from 'react-i18next'; export const RoutesPage: React.FC = () => { const { navigate } = useNavigateBack(); diff --git a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx index e88e9206b..66324a909 100644 --- a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx +++ b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx @@ -1,14 +1,14 @@ import type { ExtendedChain } from '@lifi/sdk'; import { Avatar, List, ListItemAvatar } from '@mui/material'; -import { useTranslation } from 'react-i18next'; +import { useHeader } from '../../hooks/useHeader.js'; import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js'; import { ListItemButton } from '../../components/ListItemButton.js'; import { ListItemText } from '../../components/ListItemText.js'; import { PageContainer } from '../../components/PageContainer.js'; import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import type { SelectChainPageProps } from './types.js'; +import { useTranslation } from 'react-i18next'; export const SelectChainPage: React.FC = ({ formType, diff --git a/packages/widget/src/pages/SelectEnabledToolsPage.tsx b/packages/widget/src/pages/SelectEnabledToolsPage.tsx index 43b39328f..39ce93e25 100644 --- a/packages/widget/src/pages/SelectEnabledToolsPage.tsx +++ b/packages/widget/src/pages/SelectEnabledToolsPage.tsx @@ -19,8 +19,8 @@ import { shallow } from 'zustand/shallow'; import { ListItemText } from '../components/ListItemText.js'; import { PageContainer } from '../components/PageContainer.js'; import { SettingsListItemButton } from '../components/SettingsListItemButton.js'; -import { useHeader } from '../hooks/useHeader.js'; import { useTools } from '../hooks/useTools.js'; +import { useHeader } from '../hooks/useHeader.js'; import { useSettingsStore } from '../stores/settings/useSettingsStore.js'; interface SelectAllCheckboxProps { diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx index 8736891b8..c60369aa1 100644 --- a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx +++ b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx @@ -1,18 +1,18 @@ import { Box } from '@mui/material'; import type { FC } from 'react'; import { useLayoutEffect, useRef, useState } from 'react'; -import { useTranslation } from 'react-i18next'; +import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'; import { PageContainer } from '../../components/PageContainer.js'; import { TokenList } from '../../components/TokenList/TokenList.js'; import { useContentHeight } from '../../hooks/useContentHeight.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'; import { useSwapOnly } from '../../hooks/useSwapOnly.js'; -import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import type { FormTypeProps } from '../../stores/form/types.js'; import { SearchTokenInput } from './SearchTokenInput.js'; +import { useTranslation } from 'react-i18next'; const minTokenListHeight = 360; diff --git a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx index 487ff5aec..7f868a0e9 100644 --- a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx +++ b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx @@ -18,12 +18,12 @@ import type { Connector } from 'wagmi'; import { useConnect, useAccount as useWagmiAccount } from 'wagmi'; import { Dialog } from '../../components/Dialog.js'; import { PageContainer } from '../../components/PageContainer.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { isItemAllowed } from '../../utils/item.js'; import { EVMListItemButton } from './EVMListItemButton.js'; import { SVMListItemButton } from './SVMListItemButton.js'; import { walletComparator } from './utils.js'; +import { useHeader } from '../../hooks/useHeader.js'; export const SelectWalletPage = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx index f2efedcca..5205b27ba 100644 --- a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx +++ b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx @@ -15,13 +15,13 @@ import { ListItemButton } from '../../components/ListItem//ListItemButton.js'; import { ListItem } from '../../components/ListItem/ListItem.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; diff --git a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx index 553391d5b..bc0b55146 100644 --- a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx +++ b/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx @@ -15,11 +15,11 @@ import { Menu } from '../../components/Menu.js'; import type { Account } from '../../hooks/useAccount.js'; import { useAccount } from '../../hooks/useAccount.js'; import { useChains } from '../../hooks/useChains.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; import { EmptyListIndicator } from './EmptyListIndicator.js'; diff --git a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx index 3fbc25043..b08a8343d 100644 --- a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx +++ b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx @@ -16,13 +16,13 @@ import { ListItem } from '../../components/ListItem/ListItem.js'; import { ListItemButton } from '../../components/ListItem/ListItemButton.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx index a8811fdb9..dbb208a1e 100644 --- a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx @@ -12,11 +12,11 @@ import { ListItem } from '../../components/ListItem/ListItem.js'; import { ListItemButton } from '../../components/ListItem/ListItemButton.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; +import { useHeader } from '../../hooks/useHeader.js'; import type { ToAddress } from '../../types/widget.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx index 72fbbdd86..035103939 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.style.tsx @@ -1,12 +1,12 @@ import { Alert, - alertClasses, Box, IconButton, - inputBaseClasses, List, - styled, Typography, + alertClasses, + inputBaseClasses, + styled, } from '@mui/material'; import { ButtonTertiary } from '../../components/ButtonTertiary.js'; import { InputCard } from '../../components/Card/InputCard.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx index 66d40d5ae..bc51afa92 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx @@ -13,13 +13,13 @@ import { useAddressValidation, } from '../../hooks/useAddressValidation.js'; import { useChain } from '../../hooks/useChain.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'; import { ConfirmAddressSheet } from './ConfirmAddressSheet.js'; diff --git a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx index 3b2e6e1d4..983fb20b7 100644 --- a/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx +++ b/packages/widget/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx @@ -1,4 +1,4 @@ -import { badgeClasses, Box, Badge as MuiBadge, styled } from '@mui/material'; +import { Box, Badge as MuiBadge, badgeClasses, styled } from '@mui/material'; export const SettingsList = styled(Box)(({ theme }) => ({ display: 'flex', diff --git a/packages/widget/src/pages/SettingsPage/SettingsPage.tsx b/packages/widget/src/pages/SettingsPage/SettingsPage.tsx index 51a629d91..2495012d9 100644 --- a/packages/widget/src/pages/SettingsPage/SettingsPage.tsx +++ b/packages/widget/src/pages/SettingsPage/SettingsPage.tsx @@ -1,6 +1,4 @@ -import { useTranslation } from 'react-i18next'; import { PageContainer } from '../../components/PageContainer.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js'; import { GasPriceSettings } from './GasPriceSettings.js'; import { LanguageSetting } from './LanguageSetting.js'; @@ -10,6 +8,8 @@ import { SettingsList } from './SettingsCard/SettingCard.style.js'; import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'; import { SlippageSettings } from './SlippageSettings/SlippageSettings.js'; import { ThemeSettings } from './ThemeSettings.js'; +import { useHeader } from '../../hooks/useHeader.js'; +import { useTranslation } from 'react-i18next'; export const SettingsPage = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx b/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx index 5cb6483d5..ea4eecd3f 100644 --- a/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx +++ b/packages/widget/src/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx @@ -1,9 +1,9 @@ import type { Theme } from '@mui/material'; import { - alpha, Box, ButtonBase, InputBase, + alpha, inputBaseClasses, styled, } from '@mui/material'; diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx index 7d96c2824..8d5439266 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx @@ -10,7 +10,6 @@ import { ContractComponent } from '../../components/ContractComponent/ContractCo import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useTools } from '../../hooks/useTools.js'; import { useTransactionDetails } from '../../hooks/useTransactionDetails.js'; @@ -22,6 +21,7 @@ import { formatTokenAmount } from '../../utils/format.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { ContactSupportButton } from './ContactSupportButton.js'; import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'; +import { useHeader } from '../../hooks/useHeader.js'; export const TransactionDetailsPage: React.FC = () => { const { t, i18n } = useTranslation(); diff --git a/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx b/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx index ad7938c92..501e9f2c0 100644 --- a/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx +++ b/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx @@ -2,14 +2,14 @@ import type { FullStatusData } from '@lifi/sdk'; import { List } from '@mui/material'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useRef } from 'react'; -import { useTranslation } from 'react-i18next'; -import { PageContainer } from '../../components/PageContainer.js'; import { useHeader } from '../../hooks/useHeader.js'; +import { PageContainer } from '../../components/PageContainer.js'; import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'; -import { minTransactionListHeight } from './constants.js'; import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'; import { TransactionHistoryItem } from './TransactionHistoryItem.js'; import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'; +import { minTransactionListHeight } from './constants.js'; +import { useTranslation } from 'react-i18next'; export const TransactionHistoryPage: React.FC = () => { // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue diff --git a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.style.tsx b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.style.tsx index 6e4d16851..67d5bcc66 100644 --- a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.style.tsx +++ b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.style.tsx @@ -1,5 +1,5 @@ import type { Theme } from '@mui/material'; -import { alpha, Box, darken, styled } from '@mui/material'; +import { Box, alpha, darken, styled } from '@mui/material'; import { RouteExecutionStatus } from '../../stores/routes/types.js'; type StatusColor = RouteExecutionStatus | 'warning'; diff --git a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx index 4c9166815..0a91a7a73 100644 --- a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx +++ b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx @@ -10,12 +10,12 @@ import { GasMessage } from '../../components/GasMessage/GasMessage.js'; import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useRouteExecution } from '../../hooks/useRouteExecution.js'; import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { RouteExecutionStatus } from '../../stores/routes/types.js'; import { WidgetEvent } from '../../types/events.js'; import { formatTokenAmount } from '../../utils/format.js'; @@ -27,8 +27,8 @@ import { } from './StartTransactionButton.js'; import { StatusBottomSheet } from './StatusBottomSheet.js'; import { - getTokenValueLossThreshold, TokenValueBottomSheet, + getTokenValueLossThreshold, } from './TokenValueBottomSheet.js'; import { calcValueLoss } from './utils.js'; diff --git a/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx b/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx index 6a9d5bd8a..90d689a7e 100644 --- a/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx +++ b/packages/widget/src/providers/WalletProvider/EVMBaseProvider.tsx @@ -30,7 +30,7 @@ import { useMemo, type FC, type PropsWithChildren } from 'react'; import type { Chain } from 'viem'; import { createClient } from 'viem'; import type { CreateConnectorFn } from 'wagmi'; -import { createConfig, http, WagmiProvider } from 'wagmi'; +import { WagmiProvider, createConfig, http } from 'wagmi'; import { mainnet } from 'wagmi/chains'; import { defaultWalletConnectProjectId } from '../../config/walletConnect.js'; import { useAvailableChains } from '../../hooks/useAvailableChains.js'; diff --git a/packages/widget/src/providers/WalletProvider/SDKProviders.tsx b/packages/widget/src/providers/WalletProvider/SDKProviders.tsx index 4d77c35ff..2880e0cf9 100644 --- a/packages/widget/src/providers/WalletProvider/SDKProviders.tsx +++ b/packages/widget/src/providers/WalletProvider/SDKProviders.tsx @@ -1,5 +1,5 @@ import type { SDKProvider } from '@lifi/sdk'; -import { ChainType, config, EVM, Solana } from '@lifi/sdk'; +import { ChainType, EVM, Solana, config } from '@lifi/sdk'; import type { WalletAdapter } from '@solana/wallet-adapter-base'; import { useWallet } from '@solana/wallet-adapter-react'; import { getWalletClient, switchChain } from '@wagmi/core'; diff --git a/packages/widget/src/stores/form/FormStore.tsx b/packages/widget/src/stores/form/FormStore.tsx index 8c6250085..d6530a7fb 100644 --- a/packages/widget/src/stores/form/FormStore.tsx +++ b/packages/widget/src/stores/form/FormStore.tsx @@ -2,9 +2,9 @@ import type { PropsWithChildren } from 'react'; import { useMemo, useRef } from 'react'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { HiddenUI } from '../../types/widget.js'; -import { createFormStore, formDefaultValues } from './createFormStore.js'; import { FormStoreContext } from './FormStoreContext.js'; import { FormUpdater } from './FormUpdater.js'; +import { createFormStore, formDefaultValues } from './createFormStore.js'; import type { FormStoreStore } from './types.js'; export const FormStoreProvider: React.FC = ({ diff --git a/packages/widget/src/stores/form/createFormStore.ts b/packages/widget/src/stores/form/createFormStore.ts index 7d3219aee..ad7fa4d38 100644 --- a/packages/widget/src/stores/form/createFormStore.ts +++ b/packages/widget/src/stores/form/createFormStore.ts @@ -1,4 +1,5 @@ import { createWithEqualityFn } from 'zustand/traditional'; + import type { DefaultValues, FormFieldArray, diff --git a/packages/widget/src/stores/form/useValidation.ts b/packages/widget/src/stores/form/useValidation.ts index da4b60f7f..577839a50 100644 --- a/packages/widget/src/stores/form/useValidation.ts +++ b/packages/widget/src/stores/form/useValidation.ts @@ -1,7 +1,6 @@ import { shallow } from 'zustand/shallow'; import type { ValidationProps } from './types.js'; import { useFormStore } from './useFormStore.js'; - export const useValidation = (): Omit => { const [isValid, isValidating, errors] = useFormStore( (store) => [store.isValid, store.isValidating, store.errors], diff --git a/prettier.config.js b/prettier.config.js deleted file mode 100644 index 4ccc04605..000000000 --- a/prettier.config.js +++ /dev/null @@ -1,11 +0,0 @@ -import prettierPluginSortImports from '@ianvs/prettier-plugin-sort-imports'; - -const config = { - singleQuote: true, - trailingComma: 'all', - plugins: [prettierPluginSortImports], - importOrder: ['^components/(.*)$', '^[./]'], -}; - -// eslint-disable-next-line import/no-default-export -export default config; diff --git a/yarn.lock b/yarn.lock index c6f97b31f..99bf6f9a3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -60,7 +60,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.16.0, @babel/core@npm:^7.24.0": +"@babel/core@npm:^7.16.0": version: 7.24.4 resolution: "@babel/core@npm:7.24.4" dependencies: @@ -97,7 +97,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.23.6, @babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": +"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": version: 7.24.4 resolution: "@babel/generator@npm:7.24.4" dependencies: @@ -1599,7 +1599,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1": +"@babel/traverse@npm:^7.24.1": version: 7.24.1 resolution: "@babel/traverse@npm:7.24.1" dependencies: @@ -2572,26 +2572,6 @@ __metadata: languageName: node linkType: hard -"@ianvs/prettier-plugin-sort-imports@npm:^4.2.1": - version: 4.2.1 - resolution: "@ianvs/prettier-plugin-sort-imports@npm:4.2.1" - dependencies: - "@babel/core": "npm:^7.24.0" - "@babel/generator": "npm:^7.23.6" - "@babel/parser": "npm:^7.24.0" - "@babel/traverse": "npm:^7.24.0" - "@babel/types": "npm:^7.24.0" - semver: "npm:^7.5.2" - peerDependencies: - "@vue/compiler-sfc": 2.7.x || 3.x - prettier: 2 || 3 - peerDependenciesMeta: - "@vue/compiler-sfc": - optional: true - checksum: 10/23125ef4fc0b6b490c5bb74fa43635eede12fd5cdcdce24b7c30bad547353d20136a0f664512a73cf373a7871d9e0652c4a1a2fb680e8b418ab74dd9df0df3ef - languageName: node - linkType: hard - "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -16297,7 +16277,6 @@ __metadata: dependencies: "@commitlint/cli": "npm:^19.2.2" "@commitlint/config-conventional": "npm:^19.2.2" - "@ianvs/prettier-plugin-sort-imports": "npm:^4.2.1" "@testing-library/dom": "npm:^10.0.0" "@testing-library/jest-dom": "npm:^6.4.2" "@testing-library/react": "npm:^15.0.2" @@ -16492,7 +16471,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.2, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0": +"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0": version: 7.6.0 resolution: "semver@npm:7.6.0" dependencies: From 5b0728d2ef582a4c03ad32c17ca2cb6cd2682d07 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Fri, 3 May 2024 17:24:37 +0200 Subject: [PATCH 5/6] chore: try another prettier plugin - prettier-plugin-organize-imports --- .prettierrc | 3 ++- package.json | 1 + packages/wallet-management/package.json | 3 ++- packages/widget-embedded/package.json | 3 ++- packages/widget-playground-next/package.json | 3 ++- .../widget-playground-next/src/app/layout.tsx | 2 +- .../widget-playground-next/src/app/page.tsx | 16 ++++++------- packages/widget-playground-vite/package.json | 3 ++- packages/widget-playground-vite/src/App.tsx | 12 +++++----- packages/widget-playground-vite/src/index.tsx | 2 +- packages/widget-playground/package.json | 3 ++- .../Card/ExpandableCard/ExpandableCard.tsx | 4 ++-- .../ExpandableCardAccordion.tsx | 3 +-- .../src/components/Card/index.ts | 2 +- .../CodeControl/CodeControl.tsx | 6 ++--- .../DrawerControls/CodeControl/CodeEditor.tsx | 10 ++++---- .../CodeControl/FontEmbedInfo.tsx | 16 ++++++------- .../CodeControl/ProjectButton.tsx | 2 +- .../DesignControls/AppearanceControl.tsx | 24 +++++++++---------- .../DesignControls/ColorControls.tsx | 6 ++--- .../DesignControls/DesignControls.style.tsx | 16 ++++++------- .../FontsControl/FontsControl.tsx | 12 +++++----- .../fontDefinitions/defaultFonts.ts | 2 +- .../PlaygroundSettingsControl.tsx | 4 ++-- .../DesignControls/SubvariantControl.tsx | 4 ++-- .../DesignControls/ThemeControl.tsx | 6 ++--- .../DesignControls/VariantControl.tsx | 4 ++-- .../WalletManagementControl.tsx | 4 ++-- .../DrawerControls/DrawerControls.style.tsx | 6 ++--- .../DrawerControls/DrawerControls.tsx | 8 +++---- .../src/components/LifiLogo.tsx | 2 +- .../components/Widget/ConnectWalletButton.tsx | 4 ++-- .../components/Widget/WidgetViewContainer.tsx | 2 +- .../src/components/Widget/index.ts | 6 ++--- .../src/hooks/useThemeMode.ts | 2 +- packages/widget-playground/src/index.ts | 4 ++-- .../ExternalWalletProvider/SVMProvider.tsx | 2 +- .../FontLoaderProvider/FontLoaderProvider.tsx | 4 ++-- .../PlaygroundThemeProvider.tsx | 9 ++++--- .../themeOverrides/index.ts | 2 +- .../widget-playground/src/providers/index.ts | 4 ++-- .../src/store/editTools/EditToolsProvider.tsx | 4 ++-- .../store/editTools/createEditToolsStore.ts | 6 ++--- .../src/store/editTools/index.ts | 4 ++-- .../src/store/editTools/types.ts | 4 ++-- .../widgetConfig/WidgetConfigProvider.tsx | 16 ++++++------- .../widgetConfig/createWidgetConfigStore.ts | 4 ++-- .../src/store/widgetConfig/index.ts | 2 +- .../src/store/widgetConfig/types.ts | 2 +- .../src/store/widgetConfig/useConfigValues.ts | 6 ++--- .../utils/setThemeWithFallback.ts | 2 +- .../src/utils/cloneStructuredConfig.test.ts | 4 ++-- .../src/utils/cloneStructuredConfig.ts | 2 +- packages/widget-playground/src/utils/index.ts | 6 ++--- packages/widget/package.json | 3 ++- packages/widget/src/hooks/useToken.ts | 2 +- packages/widget/src/pages/LanguagesPage.tsx | 2 +- .../widget/src/pages/MainPage/MainPage.tsx | 4 ++-- .../src/pages/RoutesPage/RoutesPage.tsx | 4 ++-- .../pages/SelectChainPage/SelectChainPage.tsx | 4 ++-- .../src/pages/SelectEnabledToolsPage.tsx | 2 +- .../pages/SelectTokenPage/SelectTokenPage.tsx | 6 ++--- .../SelectWalletPage/SelectWalletPage.tsx | 2 +- .../src/pages/SendToWallet/BookmarksPage.tsx | 2 +- .../SendToWallet/ConnectedWalletsPage.tsx | 2 +- .../pages/SendToWallet/RecentWalletsPage.tsx | 2 +- .../SendToConfiguredWalletPage.tsx | 2 +- .../pages/SendToWallet/SendToWalletPage.tsx | 2 +- .../src/pages/SettingsPage/SettingsPage.tsx | 4 ++-- .../TransactionDetailsPage.tsx | 2 +- .../TransactionHistoryPage.tsx | 4 ++-- .../pages/TransactionPage/TransactionPage.tsx | 2 +- yarn.lock | 19 +++++++++++++++ 73 files changed, 194 insertions(+), 169 deletions(-) diff --git a/.prettierrc b/.prettierrc index a20502b7f..19dad0e03 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { "singleQuote": true, - "trailingComma": "all" + "trailingComma": "all", + "plugins": ["prettier-plugin-organize-imports"] } diff --git a/package.json b/package.json index c6639dd18..67f0ad864 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "lerna": "8.1.2", "lint-staged": "^15.2.2", "prettier": "^3.2.5", + "prettier-plugin-organize-imports": "^3.2.4", "react": "^18.2.0", "react-dom": "^18.2.0", "standard-version": "^9.5.0", diff --git a/packages/wallet-management/package.json b/packages/wallet-management/package.json index 766d0042d..5a442ca98 100644 --- a/packages/wallet-management/package.json +++ b/packages/wallet-management/package.json @@ -15,7 +15,8 @@ "clean": "yarn build:clean && rm -rf dist", "check:types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix --max-warnings=0", + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types" }, "publishConfig": { diff --git a/packages/widget-embedded/package.json b/packages/widget-embedded/package.json index 356648741..932a09fea 100644 --- a/packages/widget-embedded/package.json +++ b/packages/widget-embedded/package.json @@ -10,7 +10,8 @@ "clean": "rm -rf dist tsconfig.tsbuildinfo", "preview": "vite preview", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix --max-warnings=0", + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types" }, "publishConfig": { diff --git a/packages/widget-playground-next/package.json b/packages/widget-playground-next/package.json index a9bee56e9..d79d5c5b0 100644 --- a/packages/widget-playground-next/package.json +++ b/packages/widget-playground-next/package.json @@ -6,7 +6,8 @@ "build": "next build", "start": "next start", "lint": "next lint", - "pre-commit:validate": "next lint --fix --max-warnings=0" + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && next lint --fix --max-warnings=0" }, "publishConfig": { "access": "public" diff --git a/packages/widget-playground-next/src/app/layout.tsx b/packages/widget-playground-next/src/app/layout.tsx index 25ab4244a..382e85885 100644 --- a/packages/widget-playground-next/src/app/layout.tsx +++ b/packages/widget-playground-next/src/app/layout.tsx @@ -1,5 +1,5 @@ -import type { Metadata } from 'next'; import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter'; +import type { Metadata } from 'next'; export const metadata: Metadata = { title: 'LI.FI Widget', diff --git a/packages/widget-playground-next/src/app/page.tsx b/packages/widget-playground-next/src/app/page.tsx index e4bac3368..f503c9b1e 100644 --- a/packages/widget-playground-next/src/app/page.tsx +++ b/packages/widget-playground-next/src/app/page.tsx @@ -1,26 +1,26 @@ 'use client'; -// This polyfill is only needed for the Next.js implementation +import { Box } from '@mui/material'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +// The core-js/actual/structured-clone polyfill is only needed for the Next.js implementation // the lack of structureClone support for Next.js is currently a requested feature // https://github.com/vercel/next.js/discussions/33189 import 'core-js/actual/structured-clone'; import { type PropsWithChildren } from 'react'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import { Box } from '@mui/material'; import { - EnvVariablesProvider, - EditToolsProvider, - WidgetConfigProvider, - PlaygroundThemeProvider, DrawerControls, + EditToolsProvider, + EnvVariablesProvider, FontLoaderProvider, + PlaygroundThemeProvider, + WidgetConfigProvider, } from '@lifi/widget-playground'; import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; -import '@lifi/widget-playground/fonts'; import { WidgetNextView } from '@/app/WidgetNextView'; +import '@lifi/widget-playground/fonts'; const queryClient = new QueryClient(); diff --git a/packages/widget-playground-vite/package.json b/packages/widget-playground-vite/package.json index 6b8162ec8..3ce490a01 100644 --- a/packages/widget-playground-vite/package.json +++ b/packages/widget-playground-vite/package.json @@ -10,7 +10,8 @@ "preview": "vite preview", "check:types": "tsc --noEmit", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix --max-warnings=0" + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0" }, "publishConfig": { "access": "public" diff --git a/packages/widget-playground-vite/src/App.tsx b/packages/widget-playground-vite/src/App.tsx index 13b2aacf2..5b2d3c7c6 100644 --- a/packages/widget-playground-vite/src/App.tsx +++ b/packages/widget-playground-vite/src/App.tsx @@ -1,15 +1,15 @@ -import { type PropsWithChildren } from 'react'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { Box } from '@mui/material'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { type PropsWithChildren } from 'react'; import { - EnvVariablesProvider, + DrawerControls, EditToolsProvider, - WidgetConfigProvider, + EnvVariablesProvider, + FontLoaderProvider, PlaygroundThemeProvider, - DrawerControls, + WidgetConfigProvider, WidgetView, - FontLoaderProvider, } from '@lifi/widget-playground'; import { defaultWidgetConfig } from '@lifi/widget-playground/widget-config'; diff --git a/packages/widget-playground-vite/src/index.tsx b/packages/widget-playground-vite/src/index.tsx index 4274b1de5..7aba4a10e 100644 --- a/packages/widget-playground-vite/src/index.tsx +++ b/packages/widget-playground-vite/src/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import { App } from './App'; -import { reportWebVitals } from './reportWebVitals'; import './index.css'; +import { reportWebVitals } from './reportWebVitals'; const rootElement = document.getElementById('root'); if (!rootElement) { diff --git a/packages/widget-playground/package.json b/packages/widget-playground/package.json index e1a298e64..a661ab61a 100644 --- a/packages/widget-playground/package.json +++ b/packages/widget-playground/package.json @@ -15,7 +15,8 @@ "check:types": "tsc --noEmit", "test": "vitest run", "test:watch": "vitest", - "pre-commit:validate": "yarn lint --fix --max-warnings=0", + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types & yarn test" }, "publishConfig": { diff --git a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx index e462dcd03..6d0e700ed 100644 --- a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx +++ b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCard.tsx @@ -1,11 +1,11 @@ +import { Collapse } from '@mui/material'; import type { FC, PropsWithChildren, ReactNode } from 'react'; import { useId } from 'react'; -import { Collapse } from '@mui/material'; import { Card, CardRowButton, - CardValue, CardTitleContainer, + CardValue, } from '../Card.style'; import { useExpandableCard } from './useExpandableCard'; diff --git a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx index 1591f2e33..6561ce952 100644 --- a/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx +++ b/packages/widget-playground/src/components/Card/ExpandableCard/ExpandableCardAccordion.tsx @@ -1,5 +1,4 @@ -import type { PropsWithChildren } from 'react'; -import type { Dispatch, SetStateAction } from 'react'; +import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'; import { createContext, useState } from 'react'; export const ExpandableCardAccordionContext = createContext<{ diff --git a/packages/widget-playground/src/components/Card/index.ts b/packages/widget-playground/src/components/Card/index.ts index 41792758a..b2a03399c 100644 --- a/packages/widget-playground/src/components/Card/index.ts +++ b/packages/widget-playground/src/components/Card/index.ts @@ -1,2 +1,2 @@ -export * from './ExpandableCard'; export * from './Card.style'; +export * from './ExpandableCard'; diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx index ff7fa6d38..68caac033 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx @@ -1,6 +1,5 @@ -import { Box, Typography } from '@mui/material'; import TabContext from '@mui/lab/TabContext'; -import { useEditToolsActions, useCodeToolValues } from '../../../store'; +import { Box, Typography } from '@mui/material'; import { CRALogo, GatsbyLogo, @@ -12,12 +11,13 @@ import { ViteLogo, VueLogo, } from '../../../logo'; +import { useCodeToolValues, useEditToolsActions } from '../../../store'; import { Card } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; import { TabContentContainer } from '../DrawerControls.style'; import { CodeEditor } from './CodeEditor'; -import { ProjectButton } from './ProjectButton'; import { FontEmbedInfo } from './FontEmbedInfo'; +import { ProjectButton } from './ProjectButton'; export const CodeControl = () => { const { codeControlTab } = useCodeToolValues(); diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx index f8936844a..cd5beb4d2 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeEditor.tsx @@ -1,17 +1,17 @@ -import { useEffect, useRef, useState } from 'react'; -import { Tooltip, useTheme } from '@mui/material'; -import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import type { BeforeMount, OnMount } from '@monaco-editor/react'; import Editor from '@monaco-editor/react'; +import ContentCopyIcon from '@mui/icons-material/ContentCopy'; +import { Tooltip, useTheme } from '@mui/material'; +import { useEffect, useRef, useState } from 'react'; import { useThemeMode } from '../../../hooks'; +import { getConfigOutput, useConfig } from '../../../store'; import { tooltipPopperZIndex } from '../DrawerControls.style'; import { CodeContainer, - EditorContainer, CodeCopyButton, + EditorContainer, EditorSkeleton, } from './CodeControl.style'; -import { useConfig, getConfigOutput } from '../../../store'; import { stringifyConfig } from './utils/stringifyConfig'; interface MonacoEditor { diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx index 068edbc93..74ef347a8 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/FontEmbedInfo.tsx @@ -1,23 +1,23 @@ -import type { MouseEventHandler } from 'react'; -import { useState } from 'react'; +import CloseIcon from '@mui/icons-material/Close'; +import InfoIcon from '@mui/icons-material/Info'; +import OpenInNewIcon from '@mui/icons-material/OpenInNew'; import { + Box, + ClickAwayListener, IconButton, Popper, Tooltip, Typography, - ClickAwayListener, - Box, } from '@mui/material'; -import InfoIcon from '@mui/icons-material/Info'; -import OpenInNewIcon from '@mui/icons-material/OpenInNew'; -import CloseIcon from '@mui/icons-material/Close'; +import type { MouseEventHandler } from 'react'; +import { useState } from 'react'; +import { useFontToolValues } from '../../../store'; import { popperZIndex, tooltipPopperZIndex } from '../DrawerControls.style'; import { FontEmbedPopperContainer, FontMessageCloseButton, GoogleFontLink, } from './CodeControl.style'; -import { useFontToolValues } from '../../../store'; interface FontMessageProps { fontFamily: string; diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx index 66bcbe20e..a6f2bc21b 100644 --- a/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx +++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/ProjectButton.tsx @@ -1,5 +1,5 @@ import type { PropsWithChildren, ReactNode } from 'react'; -import { ProjectButtonBase, ProjectAvatar } from './CodeControl.style'; +import { ProjectAvatar, ProjectButtonBase } from './CodeControl.style'; interface ProjectButtonProps extends PropsWithChildren { href: string; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx index 3eaa86ce7..b7649466e 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx @@ -1,3 +1,10 @@ +import type { Appearance, WidgetTheme } from '@lifi/widget'; +import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; +import LightModeIcon from '@mui/icons-material/LightMode'; +import NightlightIcon from '@mui/icons-material/Nightlight'; +import type { TabProps } from '@mui/material'; +import { Box, Tooltip } from '@mui/material'; +import diff from 'microdiff'; import type { FC, PropsWithChildren, @@ -5,26 +12,19 @@ import type { SyntheticEvent, } from 'react'; import { useEffect } from 'react'; -import type { TabProps } from '@mui/material'; -import { Box, Tooltip } from '@mui/material'; -import BrightnessAutoIcon from '@mui/icons-material/BrightnessAuto'; -import LightModeIcon from '@mui/icons-material/LightMode'; -import NightlightIcon from '@mui/icons-material/Nightlight'; -import diff from 'microdiff'; -import type { Appearance, WidgetTheme } from '@lifi/widget'; +import type { ThemeMode } from '../../../hooks'; +import { useThemeMode } from '../../../hooks'; +import type { ThemeItem } from '../../../store'; import { useConfigActions, useConfigAppearance, useEditToolsActions, useThemeValues, } from '../../../store'; -import { ExpandableCard, CardValue } from '../../Card'; +import { cloneStructuredConfig, patch } from '../../../utils'; +import { CardValue, ExpandableCard } from '../../Card'; import { Tab, Tabs } from '../../Tabs'; import { Badge, CapitalizeFirstLetter } from './DesignControls.style'; -import type { ThemeItem } from '../../../store'; -import type { ThemeMode } from '../../../hooks'; -import { useThemeMode } from '../../../hooks'; -import { cloneStructuredConfig, patch } from '../../../utils'; const appearanceIcons = { light: LightModeIcon, diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx index f3032a693..83bb0f757 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx @@ -1,13 +1,13 @@ import type { BoxProps } from '@mui/material'; -import { safe6DigitHexColor } from '../../../utils'; import { useConfigActions, useConfigColorsFromPath } from '../../../store'; +import { safe6DigitHexColor } from '../../../utils'; import { ExpandableCard } from '../../Card'; import { + CapitalizeFirstLetter, + ColorInput, ColorSelectorContainer, ColorSwatch, ColorSwatches, - ColorInput, - CapitalizeFirstLetter, } from './DesignControls.style'; const editableColors = { diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx index fd34f5911..17ecd617e 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx @@ -1,25 +1,25 @@ -import { alpha, styled } from '@mui/material/styles'; -import { inputBaseClasses } from '@mui/material/InputBase'; -import { autocompleteClasses } from '@mui/material/Autocomplete'; -import { alertClasses } from '@mui/material/Alert'; import type { + AutocompleteProps, BoxProps, InputBaseProps, Theme, - AutocompleteProps, } from '@mui/material'; import { Box, ButtonBase, InputBase, - Autocomplete as MuiAutocomplete, - Popper, Alert as MuiAlert, + Autocomplete as MuiAutocomplete, + Badge as MuiBadge, Select as MuiSelect, + Popper, Typography, - Badge as MuiBadge, badgeClasses, } from '@mui/material'; +import { alertClasses } from '@mui/material/Alert'; +import { autocompleteClasses } from '@mui/material/Autocomplete'; +import { inputBaseClasses } from '@mui/material/InputBase'; +import { alpha, styled } from '@mui/material/styles'; import { getCardFieldsetBackgroundColor } from '../../../utils'; import { autocompletePopperZIndex } from '../DrawerControls.style'; diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx index 5d742d1ba..eb79f5265 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx @@ -1,17 +1,17 @@ +import InfoIcon from '@mui/icons-material/Info'; +import { CircularProgress, TextField } from '@mui/material'; import type { FocusEventHandler, SyntheticEvent } from 'react'; import { useCallback } from 'react'; -import { CircularProgress, TextField } from '@mui/material'; -import InfoIcon from '@mui/icons-material/Info'; +import type { Font } from '../../../../providers'; +import { useFontLoader } from '../../../../providers'; import { useConfigActions, useEditToolsActions, useFontToolValues, } from '../../../../store'; -import type { Font } from '../../../../providers'; -import { useFontLoader } from '../../../../providers'; import { ExpandableCard } from '../../../Card'; -import { Autocomplete, StyledPopper, Alert } from '../DesignControls.style'; -import { defaultFont, allFonts } from './fontDefinitions'; +import { Alert, Autocomplete, StyledPopper } from '../DesignControls.style'; +import { allFonts, defaultFont } from './fontDefinitions'; const getCompleteFontFamily = (font: Font) => font.fallbackFonts diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts index 2c025d1e0..3770fcc44 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/fontDefinitions/defaultFonts.ts @@ -1,6 +1,6 @@ import type { Font } from '../../../../../providers'; -import { systemFonts } from './systemFonts'; import { googleFonts } from './googleFonts'; +import { systemFonts } from './systemFonts'; // NOTE: although this is a google font, as the widget playground itself is using Inter we don't // need to download the font files as they should already be downloaded - thus no fontFiles are defined diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx index 13000c105..c188f056d 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl.tsx @@ -1,11 +1,11 @@ +import SettingsIcon from '@mui/icons-material/Settings'; import type { BoxProps } from '@mui/material'; import { useTheme } from '@mui/material'; -import SettingsIcon from '@mui/icons-material/Settings'; -import { safe6DigitHexColor } from '../../../utils'; import { useEditToolsActions, usePlaygroundSettingValues, } from '../../../store'; +import { safe6DigitHexColor } from '../../../utils'; import { ExpandableCard } from '../../Card'; import { CapitalizeFirstLetter, diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx index 87bdb2907..dc55fe006 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx @@ -1,8 +1,8 @@ -import type { SyntheticEvent } from 'react'; import type { WidgetSubvariant } from '@lifi/widget'; +import type { SyntheticEvent } from 'react'; import { useConfigActions, useConfigSubvariant } from '../../../store'; -import { Tab, Tabs } from '../../Tabs'; import { CardValue, ExpandableCard } from '../../Card'; +import { Tab, Tabs } from '../../Tabs'; export const SubvariantControl = () => { const { subvariant } = useConfigSubvariant(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx index c25e521d1..ad587d476 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx @@ -1,15 +1,15 @@ import type { SelectChangeEvent } from '@mui/material'; import { MenuItem } from '@mui/material'; -import { CardValue, ExpandableCard } from '../../Card'; +import { useThemeMode } from '../../../hooks'; +import type { ThemeItem } from '../../../store'; import { useConfigActions, useEditToolsActions, useThemeValues, } from '../../../store'; +import { CardValue, ExpandableCard } from '../../Card'; import { popperZIndex } from '../DrawerControls.style'; import { Select } from './DesignControls.style'; -import type { ThemeItem } from '../../../store'; -import { useThemeMode } from '../../../hooks'; export const ThemeControl = () => { const { setConfigTheme } = useConfigActions(); const themeMode = useThemeMode(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx index ae63633d4..5ea5ed6d8 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx @@ -1,8 +1,8 @@ -import type { SyntheticEvent } from 'react'; import type { WidgetVariant } from '@lifi/widget'; +import type { SyntheticEvent } from 'react'; import { useConfigActions, useConfigVariant } from '../../../store'; -import { Tab, Tabs } from '../../Tabs'; import { CardValue, ExpandableCard } from '../../Card'; +import { Tab, Tabs } from '../../Tabs'; export const VariantControl = () => { const { variant } = useConfigVariant(); diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx index ce74a32c8..132ae3478 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx @@ -1,3 +1,5 @@ +import * as React from 'react'; +import { useConfigActions, useConfigWalletManagement } from '../../../store'; import { Card, CardRowContainer, @@ -5,8 +7,6 @@ import { CardValue, } from '../../Card'; import { Switch } from '../../Switch'; -import { useConfigActions, useConfigWalletManagement } from '../../../store'; -import * as React from 'react'; export const WalletManagementControl = () => { const { isExternalWalletManagement, replacementWalletConfig } = diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx index 73f9ccb52..7fef7b1cc 100644 --- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.style.tsx @@ -1,11 +1,11 @@ +import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; +import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; +import TabPanel from '@mui/lab/TabPanel'; import type { ButtonBaseProps, DrawerProps as MuiDrawerProps, } from '@mui/material'; import { Box, ButtonBase, Drawer as MuiDrawer, styled } from '@mui/material'; -import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; -import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft'; -import TabPanel from '@mui/lab/TabPanel'; export const drawerZIndex = 1501; export const autocompletePopperZIndex = drawerZIndex + 1; export const tooltipPopperZIndex = drawerZIndex + 2; diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx index 4369158be..e6d52bc20 100644 --- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx @@ -4,13 +4,15 @@ import IntegrationInstructionsIcon from '@mui/icons-material/IntegrationInstruct import RestartAltIcon from '@mui/icons-material/RestartAlt'; import TabContext from '@mui/lab/TabContext'; import { Box, IconButton, Tooltip } from '@mui/material'; +import { useFontInitialisation } from '../../providers'; import { useConfigActions, - useEditToolsActions, useDrawerToolValues, + useEditToolsActions, } from '../../store'; import { ExpandableCardAccordion } from '../Card'; import { Tab, Tabs } from '../Tabs'; +import { CodeControl } from './CodeControl'; import { AppearanceControl, ButtonRadiusControl, @@ -29,12 +31,10 @@ import { Header, HeaderRow, TabContentContainer, - tooltipPopperZIndex, WidgetConfigControls, + tooltipPopperZIndex, } from './DrawerControls.style'; -import { CodeControl } from './CodeControl'; import { DrawerHandle } from './DrawerHandle'; -import { useFontInitialisation } from '../../providers'; export const DrawerControls = () => { const { isDrawerOpen, drawerWidth, visibleControls } = useDrawerToolValues(); diff --git a/packages/widget-playground/src/components/LifiLogo.tsx b/packages/widget-playground/src/components/LifiLogo.tsx index bca1cbcfd..c9906217a 100644 --- a/packages/widget-playground/src/components/LifiLogo.tsx +++ b/packages/widget-playground/src/components/LifiLogo.tsx @@ -1,5 +1,5 @@ -import type { FC, SVGProps } from 'react'; import { styled } from '@mui/material'; +import type { FC, SVGProps } from 'react'; const LifiLogoBase: FC> = (props) => { return ( diff --git a/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx b/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx index 5d0b7a989..8892646ed 100644 --- a/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx +++ b/packages/widget-playground/src/components/Widget/ConnectWalletButton.tsx @@ -1,7 +1,7 @@ +import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; +import WalletIcon from '@mui/icons-material/Wallet'; import { Box } from '@mui/material'; import { useAccount, useConnect, useConnectors, useDisconnect } from 'wagmi'; -import WalletIcon from '@mui/icons-material/Wallet'; -import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew'; import { shortenAddress } from '../../utils'; import { ConnectionWalletButtonBase } from './WidgetView.style'; diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx index 8fa9c6b93..b3ca1cedb 100644 --- a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx +++ b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx @@ -5,8 +5,8 @@ import type { PropsWithChildren } from 'react'; import { ExternalWalletProvider } from '../../providers'; import { useConfig, - useEditToolsActions, useDrawerToolValues, + useEditToolsActions, } from '../../store'; import { ToggleDrawerButton } from './ToggleDrawerButton'; import { diff --git a/packages/widget-playground/src/components/Widget/index.ts b/packages/widget-playground/src/components/Widget/index.ts index 52b5c8a74..cc4ad418f 100644 --- a/packages/widget-playground/src/components/Widget/index.ts +++ b/packages/widget-playground/src/components/Widget/index.ts @@ -1,5 +1,5 @@ -export * from './WidgetView'; -export * from './WidgetViewContainer'; +export * from './ConnectWalletButton'; export * from './WidgetSkeleton'; +export * from './WidgetView'; export * from './WidgetView.style'; -export * from './ConnectWalletButton'; +export * from './WidgetViewContainer'; diff --git a/packages/widget-playground/src/hooks/useThemeMode.ts b/packages/widget-playground/src/hooks/useThemeMode.ts index b695ece86..3d07bc5d9 100644 --- a/packages/widget-playground/src/hooks/useThemeMode.ts +++ b/packages/widget-playground/src/hooks/useThemeMode.ts @@ -1,5 +1,5 @@ -import { useConfigAppearance } from '../store'; import { useMediaQuery } from '@mui/material'; +import { useConfigAppearance } from '../store'; export type ThemeMode = 'dark' | 'light'; diff --git a/packages/widget-playground/src/index.ts b/packages/widget-playground/src/index.ts index 0e35d4cfe..f375abdc4 100644 --- a/packages/widget-playground/src/index.ts +++ b/packages/widget-playground/src/index.ts @@ -1,4 +1,4 @@ +export * from './components/DrawerControls'; +export * from './components/Widget'; export * from './providers'; export * from './store'; -export * from './components/Widget'; -export * from './components/DrawerControls'; diff --git a/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx b/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx index b7e0c2f6a..70392fa6f 100644 --- a/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx +++ b/packages/widget-playground/src/providers/ExternalWalletProvider/SVMProvider.tsx @@ -1,4 +1,3 @@ -import type { FC, PropsWithChildren } from 'react'; import type { Adapter } from '@solana/wallet-adapter-base'; import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'; import { @@ -6,6 +5,7 @@ import { WalletProvider, } from '@solana/wallet-adapter-react'; import { clusterApiUrl } from '@solana/web3.js'; +import type { FC, PropsWithChildren } from 'react'; const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet); /** diff --git a/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx b/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx index aa8c33b44..a39ad19e3 100644 --- a/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx +++ b/packages/widget-playground/src/providers/FontLoaderProvider/FontLoaderProvider.tsx @@ -1,7 +1,7 @@ -import type { PropsWithChildren } from 'react'; -import { createContext, useContext, useEffect, useState } from 'react'; import type { UseMutateAsyncFunction } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query'; +import type { PropsWithChildren } from 'react'; +import { createContext, useContext, useEffect, useState } from 'react'; import { allFonts } from '../../components/DrawerControls/DesignControls'; import { useConfigFontFamily, useEditToolsActions } from '../../store'; import type { Font } from './types'; diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx b/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx index 8df5dbcf8..af5dfc7d5 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/PlaygroundThemeProvider.tsx @@ -1,14 +1,13 @@ -import type { PropsWithChildren } from 'react'; -import React from 'react'; import { CssBaseline, ThemeProvider } from '@mui/material'; -import { usePlaygroundSettingValues } from '../../store'; +import type { PropsWithChildren } from 'react'; import { useThemeMode } from '../../hooks'; +import { usePlaygroundSettingValues } from '../../store'; import { theme } from './theme'; import { - lightPalette, - darkPalette, darkComponents, + darkPalette, lightComponents, + lightPalette, } from './themeOverrides'; const appearancePaletteOverrides = { diff --git a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/index.ts b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/index.ts index ba7f11f8e..4100599d4 100644 --- a/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/index.ts +++ b/packages/widget-playground/src/providers/PlaygroundThemeProvider/themeOverrides/index.ts @@ -1,2 +1,2 @@ -export * from './light'; export * from './dark'; +export * from './light'; diff --git a/packages/widget-playground/src/providers/index.ts b/packages/widget-playground/src/providers/index.ts index 95bc568e6..a65f91196 100644 --- a/packages/widget-playground/src/providers/index.ts +++ b/packages/widget-playground/src/providers/index.ts @@ -1,4 +1,4 @@ -export * from './PlaygroundThemeProvider'; -export * from './ExternalWalletProvider'; export * from './EnvVariablesProvider'; +export * from './ExternalWalletProvider'; export * from './FontLoaderProvider'; +export * from './PlaygroundThemeProvider'; diff --git a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx index 55d624ed1..3b3e84233 100644 --- a/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx +++ b/packages/widget-playground/src/store/editTools/EditToolsProvider.tsx @@ -1,9 +1,9 @@ import type { FC, PropsWithChildren } from 'react'; import { createContext, useContext, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import type { ToolsState, ToolsStore } from './types'; -import { createEditToolsStore } from './createEditToolsStore'; import { useConfigActions } from '../widgetConfig'; +import { createEditToolsStore } from './createEditToolsStore'; +import type { ToolsState, ToolsStore } from './types'; export const EditToolsContext = createContext(null); diff --git a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts index 0c6460fa6..725a98d6c 100644 --- a/packages/widget-playground/src/store/editTools/createEditToolsStore.ts +++ b/packages/widget-playground/src/store/editTools/createEditToolsStore.ts @@ -1,9 +1,9 @@ +import type { WidgetTheme } from '@lifi/widget'; import type { StateCreator } from 'zustand'; -import { createWithEqualityFn } from 'zustand/traditional'; import { persist } from 'zustand/middleware'; -import type { WidgetTheme } from '@lifi/widget'; -import type { ToolsState } from './types'; +import { createWithEqualityFn } from 'zustand/traditional'; import { defaultDrawerWidth } from './constants'; +import type { ToolsState } from './types'; export const createEditToolsStore = (initialTheme?: WidgetTheme) => createWithEqualityFn( diff --git a/packages/widget-playground/src/store/editTools/index.ts b/packages/widget-playground/src/store/editTools/index.ts index 5b8b16616..72b037ad9 100644 --- a/packages/widget-playground/src/store/editTools/index.ts +++ b/packages/widget-playground/src/store/editTools/index.ts @@ -1,8 +1,8 @@ -export * from './constants'; export * from './EditToolsProvider'; +export * from './constants'; +export * from './types'; export * from './useCodeToolValues'; export * from './useDrawerToolValues'; export * from './useEditToolsActions'; export * from './useFontToolValues'; export * from './usePlaygroundSettingValues'; -export * from './types'; diff --git a/packages/widget-playground/src/store/editTools/types.ts b/packages/widget-playground/src/store/editTools/types.ts index a5665f9e8..b41f70836 100644 --- a/packages/widget-playground/src/store/editTools/types.ts +++ b/packages/widget-playground/src/store/editTools/types.ts @@ -1,7 +1,7 @@ -import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; +import type { WidgetTheme } from '@lifi/widget'; import type { StoreApi } from 'zustand'; +import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; import type { Font } from '../../providers'; -import type { WidgetTheme } from '@lifi/widget'; type ControlType = 'design' | 'code'; type CodeControlTab = 'config' | 'examples'; diff --git a/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx b/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx index 4c4c2f74c..951afd957 100644 --- a/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx +++ b/packages/widget-playground/src/store/widgetConfig/WidgetConfigProvider.tsx @@ -1,16 +1,16 @@ -import type { FC, PropsWithChildren } from 'react'; +import type { WidgetConfig } from '@lifi/widget'; +import { useMediaQuery } from '@mui/material'; +import isEqual from 'lodash.isequal'; import diff from 'microdiff'; +import type { FC, PropsWithChildren } from 'react'; import { createContext, useContext, useEffect, useRef } from 'react'; import { shallow } from 'zustand/shallow'; -import type { WidgetConfig } from '@lifi/widget'; -import type { WidgetConfigStore, WidgetConfigState } from './types.js'; -import { createWidgetConfigStore } from './createWidgetConfigStore.js'; -import isEqual from 'lodash.isequal'; -import { cloneStructuredConfig } from '../../utils/cloneStructuredConfig'; import { patch } from '../../utils'; -import { getConfigOutput } from './utils/getConfigOutput'; +import { cloneStructuredConfig } from '../../utils/cloneStructuredConfig'; +import { createWidgetConfigStore } from './createWidgetConfigStore.js'; import { themeItems } from './themes'; -import { useMediaQuery } from '@mui/material'; +import type { WidgetConfigState, WidgetConfigStore } from './types.js'; +import { getConfigOutput } from './utils/getConfigOutput'; export const WidgetConfigContext = createContext( null, diff --git a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts index 13ff9b6f5..10ba78812 100644 --- a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts +++ b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts @@ -1,11 +1,11 @@ -import { createWithEqualityFn } from 'zustand/traditional'; import type { WidgetConfig, WidgetTheme } from '@lifi/widget'; import type { StateCreator } from 'zustand'; import { persist } from 'zustand/middleware'; +import { createWithEqualityFn } from 'zustand/traditional'; import { addValueFromPathString, cloneStructuredConfig } from '../../utils'; +import type { ThemeItem } from '../editTools/types'; import type { WidgetConfigState } from './types'; import { getLocalStorageOutput } from './utils/getLocalStorageOutput'; -import type { ThemeItem } from '../editTools/types'; import { setThemeAppearanceWithFallback } from './utils/setThemeWithFallback'; export const createWidgetConfigStore = ( diff --git a/packages/widget-playground/src/store/widgetConfig/index.ts b/packages/widget-playground/src/store/widgetConfig/index.ts index 873b3099e..0f5896396 100644 --- a/packages/widget-playground/src/store/widgetConfig/index.ts +++ b/packages/widget-playground/src/store/widgetConfig/index.ts @@ -1,5 +1,5 @@ +export * from './WidgetConfigProvider'; export * from './useConfig'; export * from './useConfigActions'; export * from './useConfigValues'; export * from './utils/getConfigOutput'; -export * from './WidgetConfigProvider'; diff --git a/packages/widget-playground/src/store/widgetConfig/types.ts b/packages/widget-playground/src/store/widgetConfig/types.ts index 6be9dc690..8c2431b0a 100644 --- a/packages/widget-playground/src/store/widgetConfig/types.ts +++ b/packages/widget-playground/src/store/widgetConfig/types.ts @@ -6,8 +6,8 @@ import type { WidgetVariant, WidgetWalletConfig, } from '@lifi/widget'; -import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; import type { StoreApi } from 'zustand'; +import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'; import type { ThemeItem } from '../editTools/types'; export interface WidgetConfigValues { diff --git a/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts b/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts index 7fcd99a85..4aba8bea4 100644 --- a/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts +++ b/packages/widget-playground/src/store/widgetConfig/useConfigValues.ts @@ -1,8 +1,8 @@ -import { shallow } from 'zustand/shallow'; import { palette, paletteDark, paletteLight } from '@lifi/widget'; -import { useWidgetConfigStore } from './WidgetConfigProvider'; -import { getValueFromPath } from '../../utils'; +import { shallow } from 'zustand/shallow'; import { useThemeMode } from '../../hooks'; +import { getValueFromPath } from '../../utils'; +import { useWidgetConfigStore } from './WidgetConfigProvider'; export const useConfigVariant = () => { const [variant] = useWidgetConfigStore( diff --git a/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts b/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts index f41011777..bfa0980cf 100644 --- a/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts +++ b/packages/widget-playground/src/store/widgetConfig/utils/setThemeWithFallback.ts @@ -1,6 +1,6 @@ import type { WidgetTheme } from '@lifi/widget'; -import { replayLocalStorageChangesOnTheme } from './replayLocalStorageChangesOnTheme'; import type { WidgetConfigState } from '../types'; +import { replayLocalStorageChangesOnTheme } from './replayLocalStorageChangesOnTheme'; export const setThemeAppearanceWithFallback = ( state: WidgetConfigState, diff --git a/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts b/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts index 6e1635e2b..177c16453 100644 --- a/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts +++ b/packages/widget-playground/src/utils/cloneStructuredConfig.test.ts @@ -1,6 +1,6 @@ -import { expect, test, describe } from 'vitest'; -import { cloneStructuredConfig } from './cloneStructuredConfig'; import type { WidgetConfig } from '@lifi/widget'; +import { describe, expect, test } from 'vitest'; +import { cloneStructuredConfig } from './cloneStructuredConfig'; describe('cloneStructuredConfig', () => { test('performs a deep clone', () => { diff --git a/packages/widget-playground/src/utils/cloneStructuredConfig.ts b/packages/widget-playground/src/utils/cloneStructuredConfig.ts index c540ec1ab..a64b9243e 100644 --- a/packages/widget-playground/src/utils/cloneStructuredConfig.ts +++ b/packages/widget-playground/src/utils/cloneStructuredConfig.ts @@ -1,6 +1,6 @@ -import { substituteFunctions } from './substituteFunctions'; import { rehydrateFunctions } from '../store/widgetConfig/utils/rehydrateFunctions'; import type { FunctionReference, ObjectWithFunctions } from '../types'; +import { substituteFunctions } from './substituteFunctions'; const shallowReferences = () => { let referencesDictionary: FunctionReference[] = []; diff --git a/packages/widget-playground/src/utils/index.ts b/packages/widget-playground/src/utils/index.ts index 40afd86da..565c6e73a 100644 --- a/packages/widget-playground/src/utils/index.ts +++ b/packages/widget-playground/src/utils/index.ts @@ -1,7 +1,7 @@ +export * from './addValue'; +export * from './cloneStructuredConfig'; export * from './color'; export * from './getValueFromPath'; -export * from './addValue'; +export { default as patch } from './patch'; export * from './shortenAddress'; -export * from './cloneStructuredConfig'; export * from './substituteFunctions'; -export { default as patch } from './patch'; diff --git a/packages/widget/package.json b/packages/widget/package.json index 0fe2734a4..735269b9a 100644 --- a/packages/widget/package.json +++ b/packages/widget/package.json @@ -18,7 +18,8 @@ "check:circular-deps": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx')", "check:circular-deps-graph": "madge --circular $(find ./src -name '*.ts' -o -name '*.tsx') --image graph.svg", "lint": "eslint --ext .tsx --ext .ts ./src", - "pre-commit:validate": "yarn lint --fix", + "format": "prettier --write ./src/", + "pre-commit:validate": "yarn format && yarn lint --fix --max-warnings=0", "pre-push:validate": "yarn check:types & yarn check:circular-deps" }, "publishConfig": { diff --git a/packages/widget/src/hooks/useToken.ts b/packages/widget/src/hooks/useToken.ts index 52ddda2a8..9850e6fb8 100644 --- a/packages/widget/src/hooks/useToken.ts +++ b/packages/widget/src/hooks/useToken.ts @@ -1,6 +1,6 @@ import { useMemo } from 'react'; -import { useTokens } from './useTokens.js'; import { useTokenSearch } from './useTokenSearch.js'; +import { useTokens } from './useTokens.js'; export const useToken = (chainId?: number, tokenAddress?: string) => { const { tokens, isLoading } = useTokens(chainId); diff --git a/packages/widget/src/pages/LanguagesPage.tsx b/packages/widget/src/pages/LanguagesPage.tsx index 9aa9c86a9..dfbfe4188 100644 --- a/packages/widget/src/pages/LanguagesPage.tsx +++ b/packages/widget/src/pages/LanguagesPage.tsx @@ -1,10 +1,10 @@ import { Check } from '@mui/icons-material'; import { List } from '@mui/material'; import { useTranslation } from 'react-i18next'; -import { useHeader } from '../hooks/useHeader.js'; import { ListItemText } from '../components/ListItemText.js'; import { PageContainer } from '../components/PageContainer.js'; import { SettingsListItemButton } from '../components/SettingsListItemButton.js'; +import { useHeader } from '../hooks/useHeader.js'; import { useLanguages } from '../hooks/useLanguages.js'; export const LanguagesPage: React.FC = () => { diff --git a/packages/widget/src/pages/MainPage/MainPage.tsx b/packages/widget/src/pages/MainPage/MainPage.tsx index 7230f61ac..06833224d 100644 --- a/packages/widget/src/pages/MainPage/MainPage.tsx +++ b/packages/widget/src/pages/MainPage/MainPage.tsx @@ -1,4 +1,5 @@ import { Box } from '@mui/material'; +import { useTranslation } from 'react-i18next'; import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTransactions.js'; import { AmountInput } from '../../components/AmountInput/AmountInput.js'; import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js'; @@ -9,13 +10,12 @@ import { Routes } from '../../components/Routes/Routes.js'; import { SelectChainAndToken } from '../../components/SelectChainAndToken.js'; import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js'; import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useWideVariant } from '../../hooks/useWideVariant.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { HiddenUI } from '../../types/widget.js'; import { MainMessages } from './MainMessages.js'; import { ReviewButton } from './ReviewButton.js'; -import { useTranslation } from 'react-i18next'; export const MainPage: React.FC = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/RoutesPage/RoutesPage.tsx b/packages/widget/src/pages/RoutesPage/RoutesPage.tsx index 3028cc466..f4249e84c 100644 --- a/packages/widget/src/pages/RoutesPage/RoutesPage.tsx +++ b/packages/widget/src/pages/RoutesPage/RoutesPage.tsx @@ -2,20 +2,20 @@ import type { Route } from '@lifi/sdk'; import type { BoxProps } from '@mui/material'; import { useMemo } from 'react'; +import { useTranslation } from 'react-i18next'; import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'; import { RouteCard } from '../../components/RouteCard/RouteCard.js'; import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js'; import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js'; import { useAccount } from '../../hooks/useAccount.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useRoutes } from '../../hooks/useRoutes.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { Stack } from './RoutesPage.style.js'; -import { useTranslation } from 'react-i18next'; export const RoutesPage: React.FC = () => { const { navigate } = useNavigateBack(); diff --git a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx index 66324a909..e88e9206b 100644 --- a/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx +++ b/packages/widget/src/pages/SelectChainPage/SelectChainPage.tsx @@ -1,14 +1,14 @@ import type { ExtendedChain } from '@lifi/sdk'; import { Avatar, List, ListItemAvatar } from '@mui/material'; -import { useHeader } from '../../hooks/useHeader.js'; +import { useTranslation } from 'react-i18next'; import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js'; import { ListItemButton } from '../../components/ListItemButton.js'; import { ListItemText } from '../../components/ListItemText.js'; import { PageContainer } from '../../components/PageContainer.js'; import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import type { SelectChainPageProps } from './types.js'; -import { useTranslation } from 'react-i18next'; export const SelectChainPage: React.FC = ({ formType, diff --git a/packages/widget/src/pages/SelectEnabledToolsPage.tsx b/packages/widget/src/pages/SelectEnabledToolsPage.tsx index 39ce93e25..43b39328f 100644 --- a/packages/widget/src/pages/SelectEnabledToolsPage.tsx +++ b/packages/widget/src/pages/SelectEnabledToolsPage.tsx @@ -19,8 +19,8 @@ import { shallow } from 'zustand/shallow'; import { ListItemText } from '../components/ListItemText.js'; import { PageContainer } from '../components/PageContainer.js'; import { SettingsListItemButton } from '../components/SettingsListItemButton.js'; -import { useTools } from '../hooks/useTools.js'; import { useHeader } from '../hooks/useHeader.js'; +import { useTools } from '../hooks/useTools.js'; import { useSettingsStore } from '../stores/settings/useSettingsStore.js'; interface SelectAllCheckboxProps { diff --git a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx index c60369aa1..8736891b8 100644 --- a/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx +++ b/packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx @@ -1,18 +1,18 @@ import { Box } from '@mui/material'; import type { FC } from 'react'; import { useLayoutEffect, useRef, useState } from 'react'; -import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; -import { useHeader } from '../../hooks/useHeader.js'; +import { useTranslation } from 'react-i18next'; import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'; import { PageContainer } from '../../components/PageContainer.js'; import { TokenList } from '../../components/TokenList/TokenList.js'; import { useContentHeight } from '../../hooks/useContentHeight.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'; import { useSwapOnly } from '../../hooks/useSwapOnly.js'; +import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import type { FormTypeProps } from '../../stores/form/types.js'; import { SearchTokenInput } from './SearchTokenInput.js'; -import { useTranslation } from 'react-i18next'; const minTokenListHeight = 360; diff --git a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx index 7f868a0e9..487ff5aec 100644 --- a/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx +++ b/packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx @@ -18,12 +18,12 @@ import type { Connector } from 'wagmi'; import { useConnect, useAccount as useWagmiAccount } from 'wagmi'; import { Dialog } from '../../components/Dialog.js'; import { PageContainer } from '../../components/PageContainer.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { isItemAllowed } from '../../utils/item.js'; import { EVMListItemButton } from './EVMListItemButton.js'; import { SVMListItemButton } from './SVMListItemButton.js'; import { walletComparator } from './utils.js'; -import { useHeader } from '../../hooks/useHeader.js'; export const SelectWalletPage = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx index 5205b27ba..f2efedcca 100644 --- a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx +++ b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx @@ -15,13 +15,13 @@ import { ListItemButton } from '../../components/ListItem//ListItemButton.js'; import { ListItem } from '../../components/ListItem/ListItem.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; diff --git a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx index bc0b55146..553391d5b 100644 --- a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx +++ b/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx @@ -15,11 +15,11 @@ import { Menu } from '../../components/Menu.js'; import type { Account } from '../../hooks/useAccount.js'; import { useAccount } from '../../hooks/useAccount.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; import { EmptyListIndicator } from './EmptyListIndicator.js'; diff --git a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx index b08a8343d..3fbc25043 100644 --- a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx +++ b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx @@ -16,13 +16,13 @@ import { ListItem } from '../../components/ListItem/ListItem.js'; import { ListItemButton } from '../../components/ListItem/ListItemButton.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { shortenAddress } from '../../utils/wallet.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx index dbb208a1e..a8811fdb9 100644 --- a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx @@ -12,11 +12,11 @@ import { ListItem } from '../../components/ListItem/ListItem.js'; import { ListItemButton } from '../../components/ListItem/ListItemButton.js'; import { Menu } from '../../components/Menu.js'; import { useChains } from '../../hooks/useChains.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; -import { useHeader } from '../../hooks/useHeader.js'; import type { ToAddress } from '../../types/widget.js'; import { defaultChainIdsByType } from '../../utils/chainType.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; diff --git a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx index bc51afa92..66d40d5ae 100644 --- a/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx +++ b/packages/widget/src/pages/SendToWallet/SendToWalletPage.tsx @@ -13,13 +13,13 @@ import { useAddressValidation, } from '../../hooks/useAddressValidation.js'; import { useChain } from '../../hooks/useChain.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'; import type { Bookmark } from '../../stores/bookmarks/types.js'; import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'; import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; import { useFieldValues } from '../../stores/form/useFieldValues.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'; import { ConfirmAddressSheet } from './ConfirmAddressSheet.js'; diff --git a/packages/widget/src/pages/SettingsPage/SettingsPage.tsx b/packages/widget/src/pages/SettingsPage/SettingsPage.tsx index 2495012d9..51a629d91 100644 --- a/packages/widget/src/pages/SettingsPage/SettingsPage.tsx +++ b/packages/widget/src/pages/SettingsPage/SettingsPage.tsx @@ -1,4 +1,6 @@ +import { useTranslation } from 'react-i18next'; import { PageContainer } from '../../components/PageContainer.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { BridgeAndExchangeSettings } from './BridgeAndExchangeSettings.js'; import { GasPriceSettings } from './GasPriceSettings.js'; import { LanguageSetting } from './LanguageSetting.js'; @@ -8,8 +10,6 @@ import { SettingsList } from './SettingsCard/SettingCard.style.js'; import { SettingsCardAccordion } from './SettingsCard/SettingsAccordian.js'; import { SlippageSettings } from './SlippageSettings/SlippageSettings.js'; import { ThemeSettings } from './ThemeSettings.js'; -import { useHeader } from '../../hooks/useHeader.js'; -import { useTranslation } from 'react-i18next'; export const SettingsPage = () => { const { t } = useTranslation(); diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx index 8d5439266..7d96c2824 100644 --- a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx +++ b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx @@ -10,6 +10,7 @@ import { ContractComponent } from '../../components/ContractComponent/ContractCo import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useTools } from '../../hooks/useTools.js'; import { useTransactionDetails } from '../../hooks/useTransactionDetails.js'; @@ -21,7 +22,6 @@ import { formatTokenAmount } from '../../utils/format.js'; import { navigationRoutes } from '../../utils/navigationRoutes.js'; import { ContactSupportButton } from './ContactSupportButton.js'; import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js'; -import { useHeader } from '../../hooks/useHeader.js'; export const TransactionDetailsPage: React.FC = () => { const { t, i18n } = useTranslation(); diff --git a/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx b/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx index 501e9f2c0..71d8deae3 100644 --- a/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx +++ b/packages/widget/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx @@ -2,14 +2,14 @@ import type { FullStatusData } from '@lifi/sdk'; import { List } from '@mui/material'; import { useVirtualizer } from '@tanstack/react-virtual'; import { useRef } from 'react'; -import { useHeader } from '../../hooks/useHeader.js'; +import { useTranslation } from 'react-i18next'; import { PageContainer } from '../../components/PageContainer.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'; import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'; import { TransactionHistoryItem } from './TransactionHistoryItem.js'; import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'; import { minTransactionListHeight } from './constants.js'; -import { useTranslation } from 'react-i18next'; export const TransactionHistoryPage: React.FC = () => { // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue diff --git a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx index 0a91a7a73..8377f2605 100644 --- a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx +++ b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx @@ -10,12 +10,12 @@ import { GasMessage } from '../../components/GasMessage/GasMessage.js'; import { Insurance } from '../../components/Insurance/Insurance.js'; import { PageContainer } from '../../components/PageContainer.js'; import { getStepList } from '../../components/Step/StepList.js'; +import { useHeader } from '../../hooks/useHeader.js'; import { useNavigateBack } from '../../hooks/useNavigateBack.js'; import { useRouteExecution } from '../../hooks/useRouteExecution.js'; import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'; import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'; import { useFieldActions } from '../../stores/form/useFieldActions.js'; -import { useHeader } from '../../hooks/useHeader.js'; import { RouteExecutionStatus } from '../../stores/routes/types.js'; import { WidgetEvent } from '../../types/events.js'; import { formatTokenAmount } from '../../utils/format.js'; diff --git a/yarn.lock b/yarn.lock index 99bf6f9a3..1ae7e74f1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2858,6 +2858,7 @@ __metadata: "@vitejs/plugin-react-swc": "npm:^3.6.0" cpy-cli: "npm:^5.0.0" jsdom: "npm:^24.0.0" + prettier-plugin-organize-imports: "npm:^3.2.4" typescript: "npm:^5.4.5" vite: "npm:^5.2.8" vitest: "npm:^1.5.0" @@ -15168,6 +15169,23 @@ __metadata: languageName: node linkType: hard +"prettier-plugin-organize-imports@npm:^3.2.4": + version: 3.2.4 + resolution: "prettier-plugin-organize-imports@npm:3.2.4" + peerDependencies: + "@volar/vue-language-plugin-pug": ^1.0.4 + "@volar/vue-typescript": ^1.0.4 + prettier: ">=2.0" + typescript: ">=2.9" + peerDependenciesMeta: + "@volar/vue-language-plugin-pug": + optional: true + "@volar/vue-typescript": + optional: true + checksum: 10/93c98d365af500aa4c72f5330d82c20a20d0e7661a9692e6f26a76a2f4f88b99e0f85dcb8871e98b6d687d6e19ea5f1dcc937f9e29fd0778e888675ecafed233 + languageName: node + linkType: hard + "prettier@npm:^3.2.5": version: 3.2.5 resolution: "prettier@npm:3.2.5" @@ -16303,6 +16321,7 @@ __metadata: lerna: "npm:8.1.2" lint-staged: "npm:^15.2.2" prettier: "npm:^3.2.5" + prettier-plugin-organize-imports: "npm:^3.2.4" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" standard-version: "npm:^9.5.0" From fc04c34fc0dc688082ec31c485c462648d522d66 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Wed, 8 May 2024 17:19:19 +0200 Subject: [PATCH 6/6] chore: update yarn lock --- yarn.lock | 1 - 1 file changed, 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index b3728d4d8..c8a93122b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2875,7 +2875,6 @@ __metadata: "@vitejs/plugin-react-swc": "npm:^3.6.0" cpy-cli: "npm:^5.0.0" jsdom: "npm:^24.0.0" - prettier-plugin-organize-imports: "npm:^3.2.4" typescript: "npm:^5.4.5" vite: "npm:^5.2.9" vitest: "npm:^1.5.0"