style: add imports sorting to prettier

apps/portal/.storybook/preview.tsx

@@ -1,10 +1,10 @@
+import { globalStyle } from '../src/App.Theme'
 import { Global } from '@emotion/react'
 import type { Preview } from '@storybook/react'
 import { theme as storybookTheme } from '@talismn/development/storybook'
 import { ThemeProvider } from '@talismn/ui'
 import React from 'react'
 import { MemoryRouter } from 'react-router-dom'
-import { globalStyle } from '../src/App.Theme'
 
 const preview: Preview = {
   parameters: {

apps/portal/generated/gql/crowdloan/gql/fragment-masking.ts

@@ -1,6 +1,6 @@
+import type { Incremental } from './graphql'
 import type { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core'
 import type { FragmentDefinitionNode } from 'graphql'
-import type { Incremental } from './graphql'
 
 export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> =
   TDocumentType extends DocumentTypeDecoration<infer TType, any>

apps/portal/generated/gql/crowdloan/gql/graphql.ts

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+
 export type Maybe<T> = T | null
 export type InputMaybe<T> = Maybe<T>
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] }

apps/portal/generated/gql/extrinsicHistory/gql/fragment-masking.ts

@@ -1,6 +1,6 @@
+import type { Incremental } from './graphql'
 import type { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core'
 import type { FragmentDefinitionNode } from 'graphql'
-import type { Incremental } from './graphql'
 
 export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> =
   TDocumentType extends DocumentTypeDecoration<infer TType, any>

apps/portal/generated/gql/extrinsicHistory/gql/graphql.ts

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
+
 export type Maybe<T> = T | null
 export type InputMaybe<T> = Maybe<T>
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] }

apps/portal/src/App.Theme.tsx

@@ -1,13 +1,12 @@
-import '@talismn/ui/assets/css/talismn.css'
-
-import { Global, css } from '@emotion/react'
-import { ThemeProvider, theme, type Theme } from '@talismn/ui'
-import { type PropsWithChildren } from 'react'
 import ATApocRevelations from './assets/fonts/AT-Apoc-Revelations.woff'
 import SurtRegular from './assets/fonts/Surt-Regular.woff'
 import SurtSemiBold from './assets/fonts/Surt-SemiBold.woff2'
 import SurtSemiBoldExpanded from './assets/fonts/Surt-SemiBoldExp.woff2'
 import SurtSemiBoldExtended from './assets/fonts/Surt-SemiBoldExtended.woff2'
+import { Global, css } from '@emotion/react'
+import { ThemeProvider, theme, type Theme } from '@talismn/ui'
+import '@talismn/ui/assets/css/talismn.css'
+import { type PropsWithChildren } from 'react'
 
 /*
   base style definitions

apps/portal/src/App.tsx

@@ -1,13 +1,3 @@
-import '@polkadot/api-augment/polkadot'
-import '@polkadot/api-augment/substrate'
-import '@talismn/astar-types/augment-api'
-import '@talismn/astar-types/types-lookup'
-
-import { PolkadotApiProvider } from '@talismn/react-polkadot-api'
-import { PostHogProvider } from 'posthog-js/react'
-import { Suspense } from 'react'
-import { RouterProvider } from 'react-router-dom'
-import { RecoilRoot } from 'recoil'
 import ThemeProvider from './App.Theme'
 import { TalismanHandLoader } from './components/legacy/TalismanHandLoader'
 import FairyBreadBanner from './components/legacy/archetypes/FairyBreadBanner'
@@ -21,6 +11,15 @@ import { EvmProvider } from './domains/extension/wagmi'
 import * as Portfolio from './libs/portfolio'
 import TalismanProvider from './libs/talisman'
 import router from './routes'
+import '@polkadot/api-augment/polkadot'
+import '@polkadot/api-augment/substrate'
+import '@talismn/astar-types/augment-api'
+import '@talismn/astar-types/types-lookup'
+import { PolkadotApiProvider } from '@talismn/react-polkadot-api'
+import { PostHogProvider } from 'posthog-js/react'
+import { Suspense } from 'react'
+import { RouterProvider } from 'react-router-dom'
+import { RecoilRoot } from 'recoil'
 
 const Loader = () => {
   return (

apps/portal/src/components/legacy/Await.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import Loader from '../../assets/icons/loader.svg?react'
+import styled from '@emotion/styled'
 
 export const StyledLoader = styled(({ className }: { className?: string }) => (
   <div className={`await ${className ?? ''}`}>

apps/portal/src/components/legacy/Banner.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import { device } from '../../util/breakpoints'
+import styled from '@emotion/styled'
 
 type BannerProps = {
   backgroundImage?: string

apps/portal/src/components/legacy/CopyButton.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import Copy from '../../assets/icons/copy.svg?react'
+import styled from '@emotion/styled'
 
 type CopyButtonProps = {
   className?: string

apps/portal/src/components/legacy/DesktopRequired.tsx

@@ -1,6 +1,6 @@
+import { isMobileBrowser } from '../../util/helpers'
 import { Button, useModal } from './'
 import styled from '@emotion/styled'
-import { isMobileBrowser } from '../../util/helpers'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 

apps/portal/src/components/legacy/Draggable.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import { type DragAndDropCallbacks, useDragAndDrop } from '../../util/useDragAndDrop'
+import styled from '@emotion/styled'
 import { type ReactNode, useRef } from 'react'
 
 type DraggableProps = {

apps/portal/src/components/legacy/Droppable.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import { type DragAndDropCallbacks, useDragAndDrop } from '../../util/useDragAndDrop'
+import styled from '@emotion/styled'
 import { type ReactNode, useRef } from 'react'
 
 type DraggableProps = {

apps/portal/src/components/legacy/Field.tsx

@@ -1,10 +1,10 @@
-import styled from '@emotion/styled'
-import { useEffect } from 'react'
 import ChevronDown from '../../assets/icons/chevron-down.svg?react'
 import SearchIcon from '../../assets/icons/search.svg?react'
 import IconClear from '../../assets/icons/x-circle.svg?react'
 import { useBoolean } from '../../util/hooks'
 import { Pill } from './'
+import styled from '@emotion/styled'
+import { useEffect } from 'react'
 
 // framework
 

apps/portal/src/components/legacy/Filter.tsx

@@ -1,6 +1,6 @@
+import { useSet } from '../../util/hooks'
 import { Pill } from './'
 import styled from '@emotion/styled'
-import { useSet } from '../../util/hooks'
 import { useEffect } from 'react'
 
 const Filter = styled(({ value = [], options = {}, className, onChange = () => {}, ...rest }: any) => {

apps/portal/src/components/legacy/LeftRightPicker.tsx

@@ -1,7 +1,6 @@
-import styled from '@emotion/styled'
 import ChevronRight from '../../assets/icons/chevron-right.svg?react'
-
 import { ButtonIcon } from './Button'
+import styled from '@emotion/styled'
 
 type LeftRightPickerProps = {
   className?: string

apps/portal/src/components/legacy/Menu.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import useOnClickOutside from '../../util/useOnClickOutside'
+import styled from '@emotion/styled'
 import React, { useRef, useState } from 'react'
 
 type MenuDropdownAlignment = 'left' | 'right'

apps/portal/src/components/legacy/Modal.tsx

@@ -1,7 +1,6 @@
 // TODO: remove legacy modal completely
-
-import { AlertDialog } from '@talismn/ui'
 import useKeyDown from '../../util/useKeyDown'
+import { AlertDialog } from '@talismn/ui'
 import { createContext, useCallback, useContext, useMemo, useState, type PropsWithChildren } from 'react'
 
 type OpenModalOptions = {

apps/portal/src/components/legacy/Placeholder.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import { device } from '../../util/breakpoints'
+import styled from '@emotion/styled'
 
 type PlaceholderProps = {
   className?: string

apps/portal/src/components/legacy/Poster.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import useImageWithFallback from '../../util/useImageWithFallback'
+import styled from '@emotion/styled'
 import { type PropsWithChildren } from 'react'
 
 const Poster = styled(

apps/portal/src/components/legacy/SimplePlay.tsx

@@ -1,7 +1,7 @@
-import styled from '@emotion/styled'
 import PauseCircle from '../../assets/icons/pause-circle.svg?react'
 import PlayCircle from '../../assets/icons/play-circle.svg?react'
 import { useAudio } from '../../util/useAudio'
+import styled from '@emotion/styled'
 
 export const SimplePlay = styled(({ className, src }: { className?: string; src: string }) => {
   const { isPlaying, togglePlay } = useAudio(src)

apps/portal/src/components/legacy/Tags.tsx

@@ -1,6 +1,6 @@
+import { useSet } from '../../util/hooks'
 import { Pill } from './'
 import styled from '@emotion/styled'
-import { useSet } from '../../util/hooks'
 import { useEffect } from 'react'
 
 type StyledNoCrowdloansPlaceholderProps = {

apps/portal/src/components/legacy/Toggle.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import { useBoolean } from '../../util/hooks'
+import styled from '@emotion/styled'
 import { useEffect } from 'react'
 
 export type ToggleProps = {

apps/portal/src/components/legacy/archetypes/Crowdloan/Contribute.tsx

@@ -1,18 +1,18 @@
 import { Parachain } from '..'
-import XCircle from '../../../../assets/icons/x-circle.svg?react'
 import { Button, DesktopRequired, Field, MaterialLoader, useModal } from '../..'
-import { TalismanHandLike } from '../../TalismanHandLike'
-import { TalismanHandLoader } from '../../TalismanHandLoader'
-import { useAccountSelector } from '../../../widgets/AccountSelector'
+import XCircle from '../../../../assets/icons/x-circle.svg?react'
 import { writeableSubstrateAccountsState } from '../../../../domains/accounts'
-import { useTheme } from '@emotion/react'
-import styled from '@emotion/styled'
 import { ContributeEvent, useCrowdloanContribute } from '../../../../libs/crowdloans'
 import { Acala, Moonbeam, Polkadex, overrideByIds } from '../../../../libs/crowdloans/crowdloanOverrides'
 import { useCrowdloanById } from '../../../../libs/talisman'
-import { CircularProgressIndicator, Text } from '@talismn/ui'
 import { isMobileBrowser } from '../../../../util/helpers'
 import { Maybe } from '../../../../util/monads'
+import { useAccountSelector } from '../../../widgets/AccountSelector'
+import { TalismanHandLike } from '../../TalismanHandLike'
+import { TalismanHandLoader } from '../../TalismanHandLoader'
+import { useTheme } from '@emotion/react'
+import styled from '@emotion/styled'
+import { CircularProgressIndicator, Text } from '@talismn/ui'
 import { useCallback, useEffect, useMemo, useState, type MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRecoilValue } from 'recoil'

apps/portal/src/components/legacy/archetypes/Crowdloan/Countdown.tsx

@@ -1,6 +1,6 @@
 import { Countdown as Cd, Pendor } from '../..'
-import styled from '@emotion/styled'
 import { useChainmetaValue, useCrowdloanById } from '../../../../libs/talisman'
+import styled from '@emotion/styled'
 import { type ReactNode, useEffect, useState } from 'react'
 
 type OngoingProps = {

apps/portal/src/components/legacy/archetypes/Crowdloan/Indexx.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { Crowdloan } from '..'
 import { Await, Field, Grid, NoResults } from '../..'
-import styled from '@emotion/styled'
 import { useCrowdloanContributions } from '../../../../libs/crowdloans'
 import { TitlePortal } from '../../../../routes/layout'
-import { SearchBar } from '@talismn/ui'
 import { device } from '../../../../util/breakpoints'
-import { useTranslation } from 'react-i18next'
 import { RootNav } from './RootNav'
+import styled from '@emotion/styled'
+import { SearchBar } from '@talismn/ui'
+import { useTranslation } from 'react-i18next'
 
 const FilterBar = styled(
   ({

apps/portal/src/components/legacy/archetypes/Crowdloan/Raised.tsx

@@ -1,8 +1,8 @@
 import { Pendor, ProgressBar, Stat } from '../..'
-import styled from '@emotion/styled'
 import { useCrowdloanById } from '../../../../libs/talisman'
-import { CheckCircle } from '@talismn/web-icons'
 import { shortNumber } from '../../../../util/helpers'
+import styled from '@emotion/styled'
+import { CheckCircle } from '@talismn/web-icons'
 import { useTranslation } from 'react-i18next'
 
 const Raised = styled(

apps/portal/src/components/legacy/archetypes/Crowdloan/Rewards.tsx

@@ -1,6 +1,6 @@
 import { Stat } from '../..'
-import styled from '@emotion/styled'
 import { useCrowdloanById } from '../../../../libs/talisman'
+import styled from '@emotion/styled'
 
 const Rewards = styled(({ id, className }: { id?: string; className?: string }) => {
   const { crowdloan } = useCrowdloanById(id)

apps/portal/src/components/legacy/archetypes/Crowdloan/Teaser.tsx

@@ -1,13 +1,12 @@
 import { Parachain } from '..'
 import { Pill } from '../..'
-import styled from '@emotion/styled'
 import { useCrowdloanById, useParachainDetailsById } from '../../../../libs/talisman'
-import { useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
-
 import Bonus from './Bonus'
 import Countdown from './Countdown'
 import Raised from './Raised'
+import styled from '@emotion/styled'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
 
 const Teaser = styled(({ id, contributed, className }: { id: string; contributed?: boolean; className?: string }) => {
   const { t } = useTranslation()

apps/portal/src/components/legacy/archetypes/Explore/Card.tsx

@@ -1,10 +1,9 @@
-import styled from '@emotion/styled'
 import { device } from '../../../../util/breakpoints'
+import { type Dapp } from './hooks'
+import styled from '@emotion/styled'
 import { usePostHog } from 'posthog-js/react'
 import { useCallback } from 'react'
 
-import { type Dapp } from './hooks'
-
 type CardProps = {
   className?: string
   dapp: Dapp

apps/portal/src/components/legacy/archetypes/Explore/Loading.tsx

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled'
 import { device } from '../../../../util/breakpoints'
+import styled from '@emotion/styled'
 
 export const TagLoading = styled(({ className }: { className?: string }) => {
   return (

apps/portal/src/components/legacy/archetypes/Parachain/Asset.tsx

@@ -1,6 +1,6 @@
-import styled from '@emotion/styled'
 import { useParachainAssets } from '../../../../libs/talisman'
 import useImageWithFallback from '../../../../util/useImageWithFallback'
+import styled from '@emotion/styled'
 
 type ImageProps = {
   id: string

apps/portal/src/components/legacy/archetypes/Parachain/Links.tsx

@@ -1,6 +1,6 @@
 import { Pill } from '../..'
-import styled from '@emotion/styled'
 import { useParachainDetailsById } from '../../../../libs/talisman'
+import styled from '@emotion/styled'
 
 export type LinksProps = {
   id: number | string

apps/portal/src/components/legacy/archetypes/Wallet/Crowdloans.tsx

@@ -1,24 +1,24 @@
 import { Parachain } from '..'
 import { Countdown, PanelSection, Pendor } from '../..'
-import AccountIcon from '../../../molecules/AccountIcon'
-import SectionHeader from '../../../molecules/SectionHeader'
-import AnimatedFiatNumber from '../../../widgets/AnimatedFiatNumber'
-import RedactableBalance from '../../../widgets/RedactableBalance'
-import { WithdrawCrowdloanWidget } from '../../../widgets/WithdrawCrowdloanWidget'
 import { selectedSubstrateAccountsState, substrateAccountsState } from '../../../../domains/accounts/recoils'
 import { chainsState, tokenPriceState } from '../../../../domains/chains/recoils'
 import { useTotalCrowdloanTotalFiatAmount } from '../../../../domains/crowdloans/hooks'
-import { css } from '@emotion/react'
-import styled from '@emotion/styled'
 import crowdloanDataState from '../../../../libs/@talisman-crowdloans/provider'
 import { useCrowdloanContributions, type GqlContribution } from '../../../../libs/crowdloans'
 import { calculateGqlCrowdloanPortfolioAmounts, useTaggedAmountsInPortfolio } from '../../../../libs/portfolio'
 import { useParachainDetailsById } from '../../../../libs/talisman'
 import { supportedRelayChainsState } from '../../../../libs/talisman/util/_config'
+import { formatCommas, truncateAddress } from '../../../../util/helpers'
+import AccountIcon from '../../../molecules/AccountIcon'
+import SectionHeader from '../../../molecules/SectionHeader'
+import AnimatedFiatNumber from '../../../widgets/AnimatedFiatNumber'
+import RedactableBalance from '../../../widgets/RedactableBalance'
+import { WithdrawCrowdloanWidget } from '../../../widgets/WithdrawCrowdloanWidget'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
 import { Chip, ListItem, Skeleton, Text, TonalChip, useSurfaceColor, type SkeletonProps } from '@talismn/ui'
 import { encodeAnyAddress, planckToTokens } from '@talismn/util'
 import { Clock, Eye, Lock } from '@talismn/web-icons'
-import { formatCommas, truncateAddress } from '../../../../util/helpers'
 import BigNumber from 'bignumber.js'
 import { Suspense, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'

apps/portal/src/components/legacy/archetypes/Wallet/Total.tsx

@@ -1,5 +1,5 @@
-import AnimatedFiatNumber from '../../../widgets/AnimatedFiatNumber'
 import { selectedBalancesFiatSumState } from '../../../../domains/balances'
+import AnimatedFiatNumber from '../../../widgets/AnimatedFiatNumber'
 import { CircularProgressIndicator } from '@talismn/ui'
 import { Suspense } from 'react'
 import { useRecoilValue } from 'recoil'

apps/portal/src/components/molecules/AccountIcon/AccountIcon.stories.tsx

@@ -1,6 +1,5 @@
-import { type Meta, type StoryObj } from '@storybook/react'
-
 import AccountIcon from './AccountIcon'
+import { type Meta, type StoryObj } from '@storybook/react'
 
 export default {
   title: 'Molecules/AccountIcon',

apps/portal/src/components/molecules/AccountIcon/AccountIcon.tsx

@@ -1,7 +1,7 @@
 import type { Account } from '../../../domains/accounts'
 import { useTheme } from '@emotion/react'
-import { Eye } from '@talismn/web-icons'
 import { Badge, BadgedBox, Identicon, useSurfaceColorAtElevation, type IdenticonProps, Tooltip } from '@talismn/ui'
+import { Eye } from '@talismn/web-icons'
 
 export type AccountIconProps = Omit<IdenticonProps, 'value'> & { account: Pick<Account, 'readonly' | 'address'> }