chore: enable organize imports to remove unused imports (#471)

* chore: enable organize imports to remove unused imports

* run organize imports on all files (#473)

.ladle/components.tsx

@@ -1,40 +1,41 @@
 import '@/polyfills';
+
 import { useEffect, useState } from 'react';
+
+import '@/index.css';
+import { GrazProvider } from 'graz';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 import styled from 'styled-components';
 import { WagmiConfig } from 'wagmi';
-import { GrazProvider } from 'graz';
-import { QueryClient, QueryClientProvider } from 'react-query';
 
 import { SupportedLocales } from '@/constants/localization';
 
 import { AccountsProvider } from '@/hooks/useAccounts';
 import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
-import { DydxProvider } from '@/hooks/useDydxClient';
 import { DialogAreaProvider } from '@/hooks/useDialogArea';
+import { DydxProvider } from '@/hooks/useDydxClient';
 import { LocaleProvider } from '@/hooks/useLocaleSeparators';
 import { PotentialMarketsProvider } from '@/hooks/usePotentialMarkets';
 import { RestrictionProvider } from '@/hooks/useRestrictions';
 import { SubaccountProvider } from '@/hooks/useSubaccount';
 
 import { GlobalStyle } from '@/styles/globalStyle';
 
-import { SelectMenu, SelectItem } from '@/components/SelectMenu';
+import { SelectItem, SelectMenu } from '@/components/SelectMenu';
 
+import { store } from '@/state/_store';
 import {
+  AppColorMode,
   AppTheme,
   AppThemeSystemSetting,
-  AppColorMode,
-  setAppThemeSetting,
   setAppColorMode,
+  setAppThemeSetting,
 } from '@/state/configs';
-
 import { setLocaleLoaded, setSelectedLocale } from '@/state/localization';
-import { store } from '@/state/_store';
 
 import { config } from '@/lib/wagmi';
 
-import '@/index.css';
 import './ladle.css';
 
 const queryClient = new QueryClient();

.vscode/settings.json

@@ -1,10 +1,13 @@
 {
-    "explorer.sortOrder": "mixed",
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "files.watcherExclude": {
-        "**/.git": true,
-        "**/node_modules/*": true,
-        "**/node_modules/@dydxprotocol/v4-abacus": false
-    }
+  "explorer.sortOrder": "mixed",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "files.watcherExclude": {
+    "**/.git": true,
+    "**/node_modules/*": true,
+    "**/node_modules/@dydxprotocol/v4-abacus": false
+  },
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit"
+  }
 }

__tests__/e2e/test.e2e.ts

@@ -1,4 +1,4 @@
-import { expect, browser, $ } from '@wdio/globals';
+import { $, browser, expect } from '@wdio/globals';
 
 describe('Smoke test', () => {
   it('should authenticate with vercel and load website', async () => {

src/App.tsx

@@ -11,11 +11,11 @@ import { WagmiConfig } from 'wagmi';
 import { AppRoute, DEFAULT_TRADE_ROUTE, MarketsRoute } from '@/constants/routes';
 
 import {
+  useAnalytics,
   useBreakpoints,
-  useTokenConfigs,
   useInitializePage,
   useShouldShowFooter,
-  useAnalytics,
+  useTokenConfigs,
 } from '@/hooks';
 import { AccountsProvider } from '@/hooks/useAccounts';
 import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';

src/components/Accordion.tsx

@@ -1,4 +1,4 @@
-import { Root, Item, Header, Trigger, Content } from '@radix-ui/react-accordion';
+import { Content, Header, Item, Root, Trigger } from '@radix-ui/react-accordion';
 import styled, { keyframes, type AnyStyledComponent } from 'styled-components';
 
 import { PlusIcon } from '@/icons';

src/components/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { Root, Indicator } from '@radix-ui/react-checkbox';
+import { Indicator, Root } from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
 import styled, { css, type AnyStyledComponent } from 'styled-components';
 

src/components/Collapsible.stories.tsx

@@ -46,7 +46,7 @@ export const CollapsibleStoryWithSlotTrigger: Story<CollapsibleProps> = (args) =
     <StoryWrapper>
       <Collapsible
         {...args}
-        slotTrigger={<Checkbox checked={checked} onCheckedChange={setChecked}/>}
+        slotTrigger={<Checkbox checked={checked} onCheckedChange={setChecked} />}
         open={checked}
         onOpenChange={setChecked}
       >

src/components/Collapsible.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Root, Trigger, Content } from '@radix-ui/react-collapsible';
+import { Content, Root, Trigger } from '@radix-ui/react-collapsible';
 import styled, { css, keyframes, type AnyStyledComponent } from 'styled-components';
 
 import { popoverMixins } from '@/styles/popoverMixins';

src/components/CollapsibleNavigationMenu.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 
-import { Root, List, Item, Sub, Link } from '@radix-ui/react-navigation-menu';
-import _ from 'lodash';
-import { matchPath, NavLink, useLocation } from 'react-router-dom';
+import { Item, Link, List, Root, Sub } from '@radix-ui/react-navigation-menu';
+import { NavLink, matchPath, useLocation } from 'react-router-dom';
 import styled, { css, type AnyStyledComponent } from 'styled-components';
 
 import { type MenuItem } from '@/constants/menus';

src/components/CollapsibleTabs.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, type ReactNode, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, type ReactNode } from 'react';
 
 import {
   Content as CollapsibleContent,
@@ -11,7 +11,7 @@ import {
   Root as TabsRoot,
   Trigger as TabsTrigger,
 } from '@radix-ui/react-tabs';
-import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components';
+import styled, { css, keyframes, type AnyStyledComponent } from 'styled-components';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 

src/components/ComboboxMenu.tsx

@@ -1,9 +1,9 @@
-import { Fragment, type ReactNode, useState } from 'react';
+import { Fragment, useState, type ReactNode } from 'react';
 
 import { Command } from 'cmdk';
-import styled, { type AnyStyledComponent, css } from 'styled-components';
+import styled, { css, type AnyStyledComponent } from 'styled-components';
 
-import { MenuItem, type MenuConfig } from '@/constants/menus';
+import { type MenuConfig } from '@/constants/menus';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { popoverMixins } from '@/styles/popoverMixins';

src/components/Details.tsx

@@ -1,10 +1,10 @@
 import { Fragment } from 'react';
 
 import styled, {
-  type AnyStyledComponent,
+  ThemeProps,
   css,
+  type AnyStyledComponent,
   type FlattenInterpolation,
-  ThemeProps,
 } from 'styled-components';
 
 import { LoadingContext } from '@/contexts/LoadingContext';

src/components/Dialog.tsx

@@ -1,16 +1,16 @@
 import { useRef } from 'react';
 
 import {
-  Root,
-  Trigger,
-  Overlay,
+  Close,
   Content,
-  Title,
   Description,
-  Close,
+  Overlay,
   Portal,
+  Root,
+  Title,
+  Trigger,
 } from '@radix-ui/react-dialog';
-import styled, { type AnyStyledComponent, keyframes, css } from 'styled-components';
+import styled, { css, keyframes, type AnyStyledComponent } from 'styled-components';
 
 import { useDialogArea } from '@/hooks/useDialogArea';
 

src/components/DiffOutput.tsx

@@ -1,9 +1,9 @@
-import styled, { type AnyStyledComponent, css } from 'styled-components';
+import styled, { css, type AnyStyledComponent } from 'styled-components';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { DiffArrow, type DiffArrowProps } from '@/components/DiffArrow';
-import { Output, type OutputProps, OutputType } from '@/components/Output';
+import { Output, OutputType, type OutputProps } from '@/components/Output';
 
 import { BigNumberish } from '@/lib/numbers';
 

src/components/DropdownHeaderMenu.tsx

@@ -1,4 +1,4 @@
-import { Root, Trigger, Content, Portal, Item } from '@radix-ui/react-dropdown-menu';
+import { Content, Item, Portal, Root, Trigger } from '@radix-ui/react-dropdown-menu';
 import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { type MenuItem } from '@/constants/menus';

src/components/DropdownMenu.tsx

@@ -1,7 +1,6 @@
-import { type Ref, forwardRef } from 'react';
-import { Fragment } from 'react';
+import { Fragment, forwardRef, type Ref } from 'react';
 
-import { Root, Trigger, Content, Portal, Item, Separator } from '@radix-ui/react-dropdown-menu';
+import { Content, Item, Portal, Root, Separator, Trigger } from '@radix-ui/react-dropdown-menu';
 import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { popoverMixins } from '@/styles/popoverMixins';

src/components/DropdownSelectMenu.tsx

@@ -1,13 +1,13 @@
 import { cloneElement } from 'react';
 
 import {
-  Root,
-  Trigger,
   Content,
   ItemIndicator,
+  Portal,
   RadioGroup,
   RadioItem,
-  Portal,
+  Root,
+  Trigger,
 } from '@radix-ui/react-dropdown-menu';
 import { CheckIcon } from '@radix-ui/react-icons';
 import styled, { type AnyStyledComponent } from 'styled-components';

src/components/GradientCard.tsx

@@ -1,4 +1,4 @@
-import styled, { type AnyStyledComponent, css } from 'styled-components';
+import styled, { css, type AnyStyledComponent } from 'styled-components';
 
 type GradientCardProps = React.PropsWithChildren<{
   className?: string;

src/components/Icon.tsx

@@ -11,12 +11,12 @@ import {
   BoxCloseIcon,
   CalculatorIcon,
   CaretIcon,
-  CautionCircleStrokeIcon,
   CautionCircleIcon,
+  CautionCircleStrokeIcon,
   ChaosLabsIcon,
   ChatIcon,
-  CheckIcon,
   CheckCircleIcon,
+  CheckIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   ClockIcon,
@@ -48,13 +48,13 @@ import {
   MigrateIcon,
   MintscanIcon,
   MoonIcon,
-  OrderbookIcon,
   OrderCanceledIcon,
   OrderFilledIcon,
   OrderOpenIcon,
   OrderPartiallyFilledIcon,
   OrderPendingIcon,
   OrderUntriggeredIcon,
+  OrderbookIcon,
   OverviewIcon,
   PencilIcon,
   PlayIcon,
@@ -69,10 +69,10 @@ import {
   SendIcon,
   ShareIcon,
   ShowIcon,
-  TogglesMenuIcon,
   StarIcon,
   SunIcon,
   TerminalIcon,
+  TogglesMenuIcon,
   TokenIcon,
   TradeIcon,
   TransferIcon,

src/components/Input.stories.tsx

@@ -1,6 +1,6 @@
 import type { Story } from '@ladle/react';
 
-import { Input, InputType, InputProps } from '@/components/Input';
+import { Input, InputProps, InputType } from '@/components/Input';
 
 import { StoryWrapper } from '.ladle/components';
 

src/components/Input.tsx

@@ -2,7 +2,7 @@ import { Dispatch, forwardRef, SetStateAction } from 'react';
 
 import { NumericFormat, type NumberFormatValues, type SourceInfo } from 'react-number-format';
 import type { SyntheticInputEvent } from 'react-number-format/types/types';
-import styled, { type AnyStyledComponent, css } from 'styled-components';
+import styled, { css, type AnyStyledComponent } from 'styled-components';
 
 import {
   LEVERAGE_DECIMALS,

src/components/Loading/LoadingSpinner.tsx

@@ -1,4 +1,4 @@
-import styled, { type AnyStyledComponent, keyframes } from 'styled-components';
+import styled, { keyframes, type AnyStyledComponent } from 'styled-components';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 

src/components/NavigationMenu.tsx

@@ -1,17 +1,17 @@
 import { forwardRef, Ref } from 'react';
 
 import {
-  Root,
-  List,
-  Trigger,
   Content,
   Item,
   Link,
+  List,
+  Root,
   Sub,
+  Trigger,
   Viewport,
 } from '@radix-ui/react-navigation-menu';
-import { NavLink, matchPath, useLocation } from 'react-router-dom';
-import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components';
+import { matchPath, NavLink, useLocation } from 'react-router-dom';
+import styled, { css, keyframes, type AnyStyledComponent } from 'styled-components';
 
 import { MenuConfig, MenuItem } from '@/constants/menus';
 

src/components/Output.tsx

@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import BigNumber from 'bignumber.js';
 import { DateTime } from 'luxon';
 import { useSelector } from 'react-redux';
-import styled, { type AnyStyledComponent, css } from 'styled-components';
+import styled, { css, type AnyStyledComponent } from 'styled-components';
 
 import {
   LEVERAGE_DECIMALS,
@@ -25,7 +25,7 @@ import { Tag } from '@/components/Tag';
 
 import { getSelectedLocale } from '@/state/localizationSelectors';
 
-import { type BigNumberish, MustBigNumber, isNumber } from '@/lib/numbers';
+import { MustBigNumber, isNumber, type BigNumberish } from '@/lib/numbers';
 import { getStringsForDateTimeDiff, getTimestamp } from '@/lib/timeUtils';
 
 import { LoadingOutput } from './Loading/LoadingOutput';

src/components/PageMenu/PageMenuRadioGroup.tsx

@@ -1,4 +1,4 @@
-import { Root, Item } from '@radix-ui/react-radio-group';
+import { Item, Root } from '@radix-ui/react-radio-group';
 import styled, { AnyStyledComponent } from 'styled-components';
 
 import type { MenuItem } from '@/constants/menus';

src/components/Popover.tsx

@@ -1,8 +1,8 @@
 import { useMemo, useState } from 'react';
 
-import { Root, Trigger, Content, Portal } from '@radix-ui/react-popover';
+import { Content, Portal, Root, Trigger } from '@radix-ui/react-popover';
 import { useRect } from '@radix-ui/react-use-rect';
-import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components';
+import styled, { css, keyframes, type AnyStyledComponent } from 'styled-components';
 
 import { popoverMixins } from '@/styles/popoverMixins';
 

src/components/RadioButtonCards.tsx

@@ -1,4 +1,4 @@
-import { Root, Item } from '@radix-ui/react-radio-group';
+import { Item, Root } from '@radix-ui/react-radio-group';
 import styled, { AnyStyledComponent } from 'styled-components';
 
 import { MenuItem } from '@/constants/menus';

src/components/SearchInput.tsx

@@ -6,7 +6,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Icon, IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
-import { Input, type InputProps, InputType } from '@/components/Input';
+import { Input, InputType, type InputProps } from '@/components/Input';
 
 type ElementProps = {
   onTextChange?: (value: string) => void;

src/components/SearchSelectMenu.tsx

@@ -1,6 +1,6 @@
-import { type ReactNode, useState, useRef } from 'react';
+import { useRef, useState, type ReactNode } from 'react';
 
-import styled, { type AnyStyledComponent, css } from 'styled-components';
+import styled, { css, type AnyStyledComponent } from 'styled-components';
 
 import { type MenuConfig } from '@/constants/menus';