Import sort option 1: prettier-plugin-import-sort (#50)

* feat: added prettier-plugin-import-sort

* fix: prettier config

Co-authored-by: Kheops <[email protected]>
Co-authored-by: Chid Gilovitz <[email protected]>

.eslintignore

@@ -0,0 +1 @@
+!.prettierrc.js

.importsortrc

@@ -0,0 +1,6 @@
+{
+  ".ts, .tsx, .js, .jsx": {
+    "style": "module",
+    "parser": "typescript"
+  }
+}

apps/extension/src/@talisman/components/Button.tsx

@@ -1,5 +1,6 @@
 import { FC, ReactNode } from "react"
 import styled from "styled-components"
+
 import Link, { ILinkProps } from "./Link"
 
 interface IButtonGroupProps {

apps/extension/src/@talisman/components/Drawer.tsx

@@ -1,8 +1,8 @@
+import { useOpenableComponent } from "@talisman/hooks/useOpenableComponent"
+import { classNames } from "@talisman/util/classNames"
 import { FC, ReactNode } from "react"
 import { createPortal } from "react-dom"
 import styled from "styled-components"
-import { classNames } from "@talisman/util/classNames"
-import { useOpenableComponent } from "@talisman/hooks/useOpenableComponent"
 
 export type DrawerAnchor = "left" | "right" | "top" | "bottom"
 

apps/extension/src/@talisman/components/ErrorBoundary.tsx

@@ -1,7 +1,8 @@
-import { FC, ReactNode } from "react"
 import { ErrorBoundary as SentryErrorBoundary } from "@sentry/react"
 import STATIC from "@talisman/theme/images/hand_open_static_dark.gif"
+import { FC, ReactNode } from "react"
 import styled from "styled-components"
+
 import Button from "./Button"
 
 const ErrorContainer = styled.section`

apps/extension/src/@talisman/components/Link.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent, ReactNode, useCallback } from "react"
-import { NavLink as RouterLink, NavLinkProps, useNavigate } from "react-router-dom"
+import { NavLinkProps, NavLink as RouterLink, useNavigate } from "react-router-dom"
 import styled from "styled-components"
 
 export interface ILinkProps {

apps/extension/src/@talisman/components/Modal.tsx

@@ -3,6 +3,7 @@ import { classNames } from "@talisman/util/classNames"
 import { FC, MouseEventHandler, ReactNode, useRef } from "react"
 import { createPortal } from "react-dom"
 import styled from "styled-components"
+
 import { TooltipBoundaryProvider } from "./Tooltip"
 
 const Container = styled.div`

apps/extension/src/@talisman/components/ModalDialog.tsx

@@ -1,7 +1,7 @@
-import styled from "styled-components"
 import { ReactComponent as IconClose } from "@talisman/theme/icons/x.svg"
 import { classNames } from "@talisman/util/classNames"
 import { FC, MouseEvent, ReactNode } from "react"
+import styled from "styled-components"
 
 const Container = styled.div`
   overflow: hidden;

apps/extension/src/@talisman/components/Setting.tsx

@@ -1,6 +1,6 @@
-import styled from "styled-components"
 import Panel from "@talisman/components/Panel"
 import { ReactNode } from "react"
+import styled from "styled-components"
 
 interface SettingsProps {
   title: string

apps/extension/src/@talisman/util/provideContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, FC, ReactNode, useContext } from "react"
+import { FC, ReactNode, createContext, useContext } from "react"
 
 // This utility generates a context provider from a react hook passed as argument
 // Returns an array containing the provider and the consumer hook

apps/extension/src/core/domains/ethereum/handler.tabs.ts

@@ -1,37 +1,37 @@
-import type {
-  RequestTypes,
-  ResponseType,
-  RequestSignatures,
-  Port,
-  RequestAuthorizeTab,
-  AuthorizedSiteAddresses,
-  AuthorizedSite,
-  CustomErc20Token,
-} from "@core/types"
-import { db } from "@core/libs/db"
-
-import { TabsHandler } from "@core/libs/Handler"
+import { DEFAULT_ETH_CHAIN_ID } from "@core/constants"
+import { stripUrl } from "@core/handlers/helpers"
 import {
-  EthProviderRpcError,
-  EthRequestArguments,
   AnyEthRequest,
-  EthRequestSignatures,
-  EthProviderMessage,
+  ETH_ERROR_EIP1474_INVALID_PARAMS,
   ETH_ERROR_EIP1993_CHAIN_DISCONNECTED,
+  ETH_ERROR_EIP1993_DISCONNECTED,
   ETH_ERROR_EIP1993_UNAUTHORIZED,
   ETH_ERROR_EIP1993_USER_REJECTED,
-  ETH_ERROR_EIP1993_DISCONNECTED,
-  ETH_ERROR_EIP1474_INVALID_PARAMS,
   ETH_ERROR_UNKNOWN_CHAIN_NOT_CONFIGURED,
+  EthProviderMessage,
+  EthProviderRpcError,
+  EthRequestArguments,
+  EthRequestSignatures,
 } from "@core/injectEth/types"
-import { filterAccountsByAddresses } from "../accounts/helpers"
+import { db } from "@core/libs/db"
+import { TabsHandler } from "@core/libs/Handler"
+import type {
+  AuthorizedSite,
+  AuthorizedSiteAddresses,
+  CustomErc20Token,
+  Port,
+  RequestAuthorizeTab,
+  RequestSignatures,
+  RequestTypes,
+  ResponseType,
+} from "@core/types"
+import { getErc20TokenInfo } from "@core/util/getErc20TokenInfo"
+import keyring from "@polkadot/ui-keyring"
 import { accounts as accountsObservable } from "@polkadot/ui-keyring/observable/accounts"
 import { ethers, providers } from "ethers"
-import keyring from "@polkadot/ui-keyring"
-import { getProviderForEvmNetworkId, getProviderForEthereumNetwork } from "./networksStore"
-import { getErc20TokenInfo } from "@core/util/getErc20TokenInfo"
-import { DEFAULT_ETH_CHAIN_ID } from "@core/constants"
-import { stripUrl } from "@core/handlers/helpers"
+
+import { filterAccountsByAddresses } from "../accounts/helpers"
+import { getProviderForEthereumNetwork, getProviderForEvmNetworkId } from "./networksStore"
 
 interface EthAuthorizedSite extends AuthorizedSite {
   ethChainId: number

apps/extension/src/core/injectEth/TalismanEthProvider.ts

@@ -1,12 +1,14 @@
-import { SendRequest } from "@core/types"
 import EventEmitter from "events"
+
+import { SendRequest } from "@core/types"
+
 import {
+  ETH_ERROR_EIP1474_INTERNAL_ERROR,
   EthProvider,
-  EthRequestArguments,
   EthProviderRpcError,
+  EthRequestArguments,
   EthRequestSignatures,
   EthResponseType,
-  ETH_ERROR_EIP1474_INTERNAL_ERROR,
 } from "./types"
 
 export class TalismanEthProvider extends EventEmitter implements EthProvider {

apps/extension/src/core/libs/rpc/Events.ts

@@ -1,7 +1,7 @@
-import RpcFactory from "@core/libs/RpcFactory"
 import BlocksRpc from "@core/libs/rpc/Blocks"
+import RpcFactory from "@core/libs/RpcFactory"
+import { ChainId, EventList, SubscriptionCallback, UnsubscribeFn } from "@core/types"
 import { getRegistry } from "@substrate/txwrapper-polkadot"
-import { EventList, ChainId, SubscriptionCallback, UnsubscribeFn } from "@core/types"
 
 // System.Events is the state_storage key prefix for events
 const systemHash = "26aa394eea5630e07c48ae0c9558cef7" // util_crypto.xxhashAsHex("System", 128);

apps/extension/src/core/types.ts

@@ -1,27 +1,28 @@
+import type { TransactionRequest as EthTransactionRequest } from "@ethersproject/abstract-provider"
+import type { JsonRpcProvider } from "@ethersproject/providers"
 import type {
+  AccountJson,
+  MetadataRequest,
   RequestAuthorizeTab as PolkadotRequestAuthorizeTab,
   RequestSignatures as PolkadotRequestSignatures,
-  AccountJson,
-  ResponseAccountExport,
-  RequestAuthorizeSubscribe,
-  RequestAccountSubscribe,
-  RequestSigningSubscribe,
   SigningRequest as PolkadotSigningRequest,
-  RequestMetadataSubscribe,
-  MetadataRequest,
   RequestAccountCreateHardware,
+  RequestAccountSubscribe,
+  RequestAuthorizeSubscribe,
+  RequestMetadataSubscribe,
   RequestSigningApproveSignature,
+  RequestSigningSubscribe,
+  ResponseAccountExport,
 } from "@polkadot/extension-base/background/types"
-import { Runtime } from "webextension-polyfill"
-import posthog from "posthog-js"
+import type { Codec } from "@polkadot/types-codec/types"
 import type { ExtrinsicStatus, Hash, Phase } from "@polkadot/types/interfaces"
-import type { TransactionRequest as EthTransactionRequest } from "@ethersproject/abstract-provider"
-import type { JsonRpcProvider } from "@ethersproject/providers"
 import type { IEventData } from "@polkadot/types/types"
-import type { Codec } from "@polkadot/types-codec/types"
-import { AnyEthRequest, EthProviderMessage, EthResponseTypes } from "./injectEth/types"
 import type { SignerPayloadJSON, SignerPayloadRaw, TypeDef } from "@polkadot/types/types"
 import { BigNumber } from "ethers"
+import posthog from "posthog-js"
+import { Runtime } from "webextension-polyfill"
+
+import { AnyEthRequest, EthProviderMessage, EthResponseTypes } from "./injectEth/types"
 
 export type {
   ExtrinsicStatus,

apps/extension/src/core/util/getAccountAvatarDataUri.tsx

@@ -1,9 +1,9 @@
 import { IdenticonType } from "@core/types"
 import Identicon from "@polkadot/react-identicon"
 import { isEthereumAddress } from "@polkadot/util-crypto"
+import * as Sentry from "@sentry/browser"
 import { TalismanOrb } from "@talisman/components/TalismanOrb"
 import { renderToString } from "react-dom/server"
-import * as Sentry from "@sentry/browser"
 
 const generateAccountAvatarDataUri = (address: string, iconType: IdenticonType) => {
   try {

apps/extension/src/ui/apps/dashboard/layout.tsx

@@ -1,23 +1,23 @@
-import { FC, PropsWithChildren, lazy, Suspense, useCallback, ReactNode } from "react"
-import { useNavigate } from "react-router-dom"
-import styled from "styled-components"
-import { ReactComponent as Logo } from "@talisman/theme/logos/talisman-full-color.svg"
-import Nav, { NavItem } from "@talisman/components/Nav"
 import Button from "@talisman/components/Button"
-import { ReactComponent as IconUser } from "@talisman/theme/icons/user.svg"
+import { Card } from "@talisman/components/Card"
+import { Modal } from "@talisman/components/Modal"
+import { ModalDialog } from "@talisman/components/ModalDialog"
+import Nav, { NavItem } from "@talisman/components/Nav"
+import { useOpenClose } from "@talisman/hooks/useOpenClose"
+import { ReactComponent as IconAlert } from "@talisman/theme/icons/alert-circle.svg"
+import { ReactComponent as IconChevron } from "@talisman/theme/icons/chevron-left.svg"
 import { ReactComponent as IconPlus } from "@talisman/theme/icons/plus.svg"
 import { ReactComponent as IconSettings } from "@talisman/theme/icons/settings.svg"
-import { ReactComponent as IconChevron } from "@talisman/theme/icons/chevron-left.svg"
-import { ReactComponent as IconAlert } from "@talisman/theme/icons/alert-circle.svg"
+import { ReactComponent as IconUser } from "@talisman/theme/icons/user.svg"
+import { ReactComponent as Logo } from "@talisman/theme/logos/talisman-full-color.svg"
+import Mnemonic from "@ui/domains/Account/Mnemonic"
+import { SendTokensModal } from "@ui/domains/Asset/Send/SendTokensModal"
 import Build from "@ui/domains/Build"
 import useAccounts from "@ui/hooks/useAccounts"
-import Mnemonic from "@ui/domains/Account/Mnemonic"
-import { Card } from "@talisman/components/Card"
 import { useMnemonicBackupConfirmed } from "@ui/hooks/useMnemonicBackupConfirmed"
-import { SendTokensModal } from "@ui/domains/Asset/Send/SendTokensModal"
-import { Modal } from "@talisman/components/Modal"
-import { ModalDialog } from "@talisman/components/ModalDialog"
-import { useOpenClose } from "@talisman/hooks/useOpenClose"
+import { FC, PropsWithChildren, ReactNode, Suspense, lazy, useCallback } from "react"
+import { useNavigate } from "react-router-dom"
+import styled from "styled-components"
 
 const BraveWarningBanner = lazy(
   () => import("@ui/domains/Settings/BraveWarning/BraveWarningBanner")

apps/extension/src/ui/apps/dashboard/routes/Settings/Options.tsx

@@ -1,21 +1,21 @@
-import { useCallback, useEffect, useState } from "react"
-import HeaderBlock from "@talisman/components/HeaderBlock"
-import Spacer from "@talisman/components/Spacer"
-import Grid from "@talisman/components/Grid"
-import Field from "@talisman/components/Field"
-import Setting from "@talisman/components/Setting"
-import Layout from "@ui/apps/dashboard/layout"
 import { SettingsStoreData } from "@core/domains/app"
-import { AvatarTypeSelect } from "@ui/domains/Settings/AvatarTypeSelect"
-import { useSettings } from "@ui/hooks/useSettings"
-import { useOpenClose } from "@talisman/hooks/useOpenClose"
+import { EvmNetwork } from "@core/types"
+import Field from "@talisman/components/Field"
+import Grid from "@talisman/components/Grid"
+import HeaderBlock from "@talisman/components/HeaderBlock"
 import { Modal } from "@talisman/components/Modal"
 import { ModalDialog } from "@talisman/components/ModalDialog"
+import Setting from "@talisman/components/Setting"
 import { SimpleButton } from "@talisman/components/SimpleButton"
+import Spacer from "@talisman/components/Spacer"
+import { useOpenClose } from "@talisman/hooks/useOpenClose"
 import { api } from "@ui/api"
-import styled from "styled-components"
-import { EvmNetwork } from "@core/types"
+import Layout from "@ui/apps/dashboard/layout"
+import { AvatarTypeSelect } from "@ui/domains/Settings/AvatarTypeSelect"
 import { useEvmNetworks } from "@ui/hooks/useEvmNetworks"
+import { useSettings } from "@ui/hooks/useSettings"
+import { useCallback, useEffect, useState } from "react"
+import styled from "styled-components"
 
 const Button = styled(SimpleButton)`
   width: auto;

apps/extension/src/ui/apps/onboard/context.tsx

@@ -1,7 +1,7 @@
-import { FC, ReactNode } from "react"
+import { provideContext } from "@talisman/util/provideContext"
 import useAppOnboard from "@ui/hooks/useAppOnboard"
 import { useIsOnboarded } from "@ui/hooks/useIsOnboarded"
-import { provideContext } from "@talisman/util/provideContext"
+import { FC, ReactNode } from "react"
 
 const [AppOnboardProvider, useAppOnboardContext] = provideContext(useAppOnboard)
 

apps/extension/src/ui/apps/onboard/layout.tsx

@@ -1,7 +1,7 @@
+import { BackButton } from "@talisman/components/BackButton"
+import { Transition, Variants, motion } from "framer-motion"
 import { FC, ReactNode } from "react"
 import styled from "styled-components"
-import { BackButton } from "@talisman/components/BackButton"
-import { motion, Transition, Variants } from "framer-motion"
 
 const Main = styled.main`
   //force dimensions and overflow to allow scrolling if very small screen

apps/extension/src/ui/apps/onboard/routes/Analytics.tsx

@@ -8,6 +8,7 @@ import { motion } from "framer-motion"
 import { useCallback } from "react"
 import { useNavigate } from "react-router-dom"
 import styled from "styled-components"
+
 import { Layout } from "../layout"
 
 const Image = styled(motion.img)`

apps/extension/src/ui/domains/Account/Item.tsx

@@ -1,21 +1,22 @@
-import styled from "styled-components"
-import Name, { IAccountNameOptions } from "./Name"
-import useBoolean from "@talisman/hooks/useBoolean"
 import PopNav from "@talisman/components/PopNav"
+import useBoolean from "@talisman/hooks/useBoolean"
+import { useOpenableComponent } from "@talisman/hooks/useOpenableComponent"
+import { IconChevron, IconMore, PaperPlaneIcon } from "@talisman/theme/icons"
 import { ReactComponent as IconLoader } from "@talisman/theme/icons/loader.svg"
-import { PaperPlaneIcon, IconMore, IconChevron } from "@talisman/theme/icons"
-import useBalancesByAddress from "@ui/hooks/useBalancesByAddress"
+import downloadJson from "@talisman/util/downloadJson"
+import { api } from "@ui/api"
+import Asset, { IAssetRowOptions } from "@ui/domains/Asset"
 import useAccountByAddress from "@ui/hooks/useAccountByAddress"
+import useBalancesByAddress from "@ui/hooks/useBalancesByAddress"
 import useEmptyBalancesFilter from "@ui/hooks/useEmptyBalancesFilter"
-import Asset, { IAssetRowOptions } from "@ui/domains/Asset"
-import downloadJson from "@talisman/util/downloadJson"
 import { MouseEventHandler, useCallback } from "react"
-import { api } from "@ui/api"
+import styled from "styled-components"
+
 import { useSendTokensModal } from "../Asset/Send"
-import { useAddressFormatterModal } from "./AddressFormatterModal"
-import { useAccountRenameModal } from "./AccountRenameModal"
 import { useAccountRemoveModal } from "./AccountRemoveModal"
-import { useOpenableComponent } from "@talisman/hooks/useOpenableComponent"
+import { useAccountRenameModal } from "./AccountRenameModal"
+import { useAddressFormatterModal } from "./AddressFormatterModal"
+import Name, { IAccountNameOptions } from "./Name"
 
 export interface IAccountItemOptions extends IAccountNameOptions, IAssetRowOptions {
   withBalanceInline?: boolean

apps/extension/src/ui/domains/Account/Name.tsx

@@ -1,16 +1,17 @@
-import styled from "styled-components"
-import Avatar from "./Avatar"
-import CopyToClipboard from "@talisman/components/CopyToClipboard"
+import { Balances } from "@core/types"
 import { AccountJson } from "@polkadot/extension-base/background/types"
-import { FC, useCallback } from "react"
+import CopyToClipboard from "@talisman/components/CopyToClipboard"
+import { WithTooltip } from "@talisman/components/Tooltip"
 import { LinkIcon, UsbIcon } from "@talisman/theme/icons"
-import { ReactComponent as IconLoader } from "@talisman/theme/icons/loader.svg"
 import { ReactComponent as IconCopy } from "@talisman/theme/icons/copy.svg"
-import { Balances } from "@core/types"
-import useAccountByAddress from "@ui/hooks/useAccountByAddress"
+import { ReactComponent as IconLoader } from "@talisman/theme/icons/loader.svg"
 import Asset from "@ui/domains/Asset"
+import useAccountByAddress from "@ui/hooks/useAccountByAddress"
+import { FC, useCallback } from "react"
+import styled from "styled-components"
+
 import { useAddressFormatterModal } from "./AddressFormatterModal"
-import { WithTooltip } from "@talisman/components/Tooltip"
+import Avatar from "./Avatar"
 
 export interface IAccountNameOptions {
   withAvatar?: boolean

apps/extension/src/ui/domains/Asset/Fiat.tsx

@@ -1,9 +1,9 @@
-import CountUp from "react-countup"
-import { FC, useCallback, useMemo } from "react"
 import { TokenRateCurrency } from "@core/types"
-import { fiatDecimalSeparator, fiatGroupSeparator, formatFiat } from "@talisman/util/formatFiat"
 import { classNames } from "@talisman/util/classNames"
+import { fiatDecimalSeparator, fiatGroupSeparator, formatFiat } from "@talisman/util/formatFiat"
 import { useRevealableBalance } from "@ui/hooks/useRevealableBalance"
+import { FC, useCallback, useMemo } from "react"
+import CountUp from "react-countup"
 
 type FiatProps = {
   amount?: number | null