Eslint imports (#4037)

* Add eslint configuration

* Patch eslint plugin for sorting imports

* Apply eslint rules for imports

.eslintrc.js

@@ -6,6 +6,7 @@ const base = require('@polkadot/dev/config/eslint.cjs');
 // add override for any (a metric ton of them, initial conversion)
 module.exports = {
   ...base,
+  plugins: [...base.plugins, 'simple-import-sort'],
   ignorePatterns: [
     '.eslintrc.js',
     '.github/**',
@@ -26,6 +27,16 @@ module.exports = {
     // needs to be switched on at some point
     '@typescript-eslint/no-explicit-any': 'off',
     // this seems very broken atm, false positives
-    '@typescript-eslint/unbound-method': 'off'
+    '@typescript-eslint/unbound-method': 'off',
+    'simple-import-sort/imports': [
+      'error',
+      { 
+        groups: [ 
+            ['^[^\/\\.]'],
+            ['^@polkadot'],
+            ['^\\.']
+        ],
+      },
+    ]
   }
 };

jest/globalSetup.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { GenericContainer, Wait } from 'testcontainers';
+
 import { SubstrateTestsGlobal } from './substrateTestsGlobal';
 
 declare const global: SubstrateTestsGlobal;

package.json

@@ -54,6 +54,7 @@
     "lint:css": "stylelint './packages/**/src/**/*.tsx'",
     "postinstall": "polkadot-dev-yarn-only",
     "postinstall:electron": "electron-builder install-app-deps",
+    "prepare": "patch-package",
     "test": "polkadot-dev-run-test --selectProjects=fast-tests --silent --testPathIgnorePatterns slow --testNamePattern='^((?!--SLOW--).)*$'",
     "test:all": "polkadot-dev-run-test --selectProjects=all-tests --silent",
     "test:one": "polkadot-dev-run-test",
@@ -84,7 +85,10 @@
     "electron": "^10.1.6",
     "electron-builder": "^22.9.1",
     "electron-builder-notarize": "^1.2.0",
+    "eslint-plugin-simple-import-sort": "^6.0.1",
     "i18next-scanner": "^2.11.0",
+    "patch-package": "^6.2.2",
+    "postinstall-prepare": "^1.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-is": "^17.0.1",

packages/apps-config/src/api/bundle/spec/acala.ts

@@ -1,8 +1,8 @@
 // Copyright 2017-2020 @polkadot/apps-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { OverrideBundleDefinition } from '@polkadot/types/types';
-
 import { typesBundleForPolkadot } from '@acala-network/type-definitions';
 
+import type { OverrideBundleDefinition } from '@polkadot/types/types';
+
 export default typesBundleForPolkadot.spec.acala as OverrideBundleDefinition;

packages/apps-config/src/api/bundle/spec/laminar.ts

@@ -1,8 +1,8 @@
 // Copyright 2017-2020 @polkadot/apps-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { OverrideBundleDefinition } from '@polkadot/types/types';
-
 import { typesBundleForPolkadot } from '@laminar/type-definitions';
 
+import type { OverrideBundleDefinition } from '@polkadot/types/types';
+
 export default typesBundleForPolkadot.spec.acala as OverrideBundleDefinition;

packages/apps-config/src/api/bundle/spec/soraSubstrate.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { slimOverrideBundle } from '@sora-substrate/type-definitions';
+
 import { OverrideBundleDefinition } from '@polkadot/types/types';
 
 export default slimOverrideBundle.spec.sora as OverrideBundleDefinition;

packages/apps-config/src/api/constants.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import BN from 'bn.js';
+
 import networks from '@polkadot/networks';
 import { assert } from '@polkadot/util';
 

packages/apps-config/src/api/params/inflation.ts

@@ -3,7 +3,7 @@
 
 import type { ApiPromise } from '@polkadot/api';
 
-import { POLKADOT_GENESIS, KUSAMA_GENESIS } from '../constants';
+import { KUSAMA_GENESIS, POLKADOT_GENESIS } from '../constants';
 
 interface InflationParams {
   falloff: number;

packages/apps-config/src/api/params/proposalThresholds.ts

@@ -3,7 +3,7 @@
 
 import type { ApiPromise } from '@polkadot/api';
 
-import { POLKADOT_GENESIS, KULUPU_GENESIS, KUSAMA_GENESIS } from '../constants';
+import { KULUPU_GENESIS, KUSAMA_GENESIS, POLKADOT_GENESIS } from '../constants';
 
 const PROPOSE_THRESHOLDS: Record<string, number> = {
   [KULUPU_GENESIS]: 1,

packages/apps-config/src/api/rpc/soraSubstrate.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { rpc } from '@sora-substrate/type-definitions';
+
 import { DefinitionRpc } from '@polkadot/types/types';
 
 export default rpc as Record<string, Record<string, DefinitionRpc>>;

packages/apps-config/src/api/spec/index.ts

@@ -6,10 +6,11 @@ import canvas from './canvas';
 import centrifugeChain from './centrifuge-chain';
 import crab from './crab';
 import crust from './crust';
+import testPara from './cumulus-test-parachain';
 import darwinia from './darwinia';
 import darwiniaParachain from './darwinia-parachain';
 import dock from './dock';
-import testPara from './cumulus-test-parachain';
+import dusty from './dusty';
 import edgeware from './edgeware';
 import encointerNodeNotee from './encointer-node-notee';
 import encointerNodeTeeproxy from './encointer-node-teeproxy';
@@ -21,7 +22,6 @@ import moonbeam from './moonbeam';
 import nodeTemplate from './node-template';
 import nodle from './nodle';
 import plasm from './plasm';
-import dusty from './dusty';
 import robonomics from './robonomics';
 import stablePoc from './stable-poc';
 import stafi from './stafi';

packages/apps-config/src/links/index.ts

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ExternalDef } from './types';
-
 import Commonwealth from './commonwealth';
 import Polkascan from './polkascan';
 import Polkassembly from './polkassembly';

packages/apps-config/src/settings/endpoints.ts

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { LinkOption } from './types';
 
+import type { LinkOption } from './types';
 import { CUSTOM_ENDPOINT_KEY } from './constants';
 
 interface EnvWindow {

packages/apps-config/src/settings/languages.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
+
 import type { Option } from './types';
 
 export function createLanguages (t: TFunction): Option[] {

packages/apps-config/src/settings/ss58.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Option } from './types';
 
 import known from '@polkadot/networks';
 
+import type { Option } from './types';
+
 // Definitions here are with the following values -
 //   info: the name of a logo as defined in ../logos, specifically in namedLogos
 //   text: The text you wish to display in the dropdown

packages/apps-config/src/ui/logos/index.ts

@@ -8,11 +8,22 @@
 // alphabetical
 import chainDusty from './chains/dusty.png';
 import chainKusama from './chains/kusama-128.gif';
-import chainRococo from './chains/rococo.svg';
 import chainRococoTick from './chains/rococo-tick.svg';
 import chainRococoTrack from './chains/rococo-track.svg';
 import chainRococoTrick from './chains/rococo-trick.svg';
-
+import chainRococo from './chains/rococo.svg';
+// last-resort fallback, just something empty
+import emptyLogo from './empty.svg';
+// extensions
+// alphabetical
+import extensionPolkadotJs from './extensions/polkadot-js.svg';
+// external links
+// alphabetical
+import externalCommonwealth from './external/commonwealth.png';
+import externalPolkascan from './external/polkascan.png';
+import externalPolkassembly from './external/polkassembly.png';
+import externalPolkastats from './external/polkastats.png';
+import externalSubscan from './external/subscan.svg';
 // defaults for the node type, assuming we don't have a specific chain, but rather match on the implementation
 // alphabetical
 import nodeAcala from './nodes/acala-circle.svg';
@@ -28,37 +39,22 @@ import nodeEdgeware from './nodes/edgeware-circle.svg';
 import nodeEncointerNotee from './nodes/encointer-notee.svg';
 import nodeEncointerTeeproxy from './nodes/encointer-teeproxy.svg';
 import nodeEquilibrium from './nodes/equilibrium.svg';
-import nodeNodle from './nodes/nodle.svg';
 import nodeHanonycash from './nodes/hanonycash.svg';
 import nodeKilt from './nodes/kilt.svg';
 import nodeKulupu from './nodes/kulupu.svg';
 import nodeLaminar from './nodes/laminar-circle.svg';
 import moonbeam from './nodes/moonbeam.png';
+import nodeNodle from './nodes/nodle.svg';
 import nodePhala from './nodes/phala.svg';
 import nodePlasm from './nodes/plasm.png';
 import nodePolkadot from './nodes/polkadot-circle.svg';
 import nodePolkadotJs from './nodes/polkadot-js.svg';
-import nodeSora from './nodes/sora-substrate.svg';
 import nodeRobonomics from './nodes/robonomics.svg';
+import nodeSora from './nodes/sora-substrate.svg';
 import nodeStafi from './nodes/stafi.png';
 import nodeSubsocial from './nodes/subsocial.svg';
 import nodeSubstrate from './nodes/substrate-hexagon.svg';
 
-// extensions
-// alphabetical
-import extensionPolkadotJs from './extensions/polkadot-js.svg';
-
-// external links
-// alphabetical
-import externalCommonwealth from './external/commonwealth.png';
-import externalPolkascan from './external/polkascan.png';
-import externalPolkassembly from './external/polkassembly.png';
-import externalPolkastats from './external/polkastats.png';
-import externalSubscan from './external/subscan.svg';
-
-// last-resort fallback, just something empty
-import emptyLogo from './empty.svg';
-
 // Alphabetical overrides based on the actual matched chain name
 // NOTE: This is as retrieved via system.chain RPC
 export const chainLogos: Record<string, unknown> = [

packages/apps-electron/src/electron/index.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { app, shell } from 'electron';
+
 import { registerAccountStoreHandlers } from '../main/account-store';
 import { setupAutoUpdater } from './autoUpdater';
 import { setupContentSecurityPolicy } from './contentSecurityPolicy';

packages/apps-electron/src/index.tsx

@@ -5,9 +5,9 @@
 import '@polkadot/apps/initSettings';
 import 'semantic-ui-css/semantic.min.css';
 import '@polkadot/react-components/i18n';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import Root from '@polkadot/apps/Root';
 
 import { electronMainApi } from './api/global-exported-api';

packages/apps-electron/src/main/account-store.spec.ts

@@ -1,9 +1,9 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { KeyringJson } from '@polkadot/ui-keyring/types';
-
 import * as tmp from 'tmp';
+
+import type { KeyringJson } from '@polkadot/ui-keyring/types';
 import { FileStore } from '@polkadot/ui-keyring/stores';
 
 import { accountStoreIpcHandler } from './account-store';

packages/apps-electron/src/main/account-store.ts

@@ -1,10 +1,10 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { KeyringJson } from '@polkadot/ui-keyring/types';
-
 import { app } from 'electron';
 import path from 'path';
+
+import type { KeyringJson } from '@polkadot/ui-keyring/types';
 import { FileStore } from '@polkadot/ui-keyring/stores';
 
 import { IpcMainHandler } from './ipc-main-handler';

packages/apps-electron/src/main/register-ipc-handler.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ipcMain } from 'electron';
+
 import { IpcMainHandler } from './ipc-main-handler';
 
 export const registerIpcHandler = (ipcHandler: IpcMainHandler): void => {

packages/apps-electron/src/preload.ts

@@ -1,10 +1,10 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { KeyringJson } from '@polkadot/ui-keyring/types';
-
 import { contextBridge, ipcRenderer } from 'electron';
 
+import type { KeyringJson } from '@polkadot/ui-keyring/types';
+
 contextBridge.exposeInMainWorld('ElectronMain', {
   accountStore: {
     all: () => ipcRenderer.invoke('account-store-all'),

packages/apps-routing/src/accounts.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-accounts';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/addresses.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-addresses';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/calendar.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-calendar';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/claims.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-claims';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/contracts.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-contracts';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/council.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-council';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/democracy.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-democracy';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/explorer.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-explorer';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/extrinsics.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-extrinsics';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/generic-asset.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-generic-asset';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/index.ts

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Routes } from './types';
 
+import type { Routes } from './types';
 import accounts from './accounts';
 import addresses from './addresses';
 import calendar from './calendar';

packages/apps-routing/src/js.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-js';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/parachains.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-parachains';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/poll.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-poll';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/rpc.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-rpc';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/settings.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-settings';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/signing.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-signing';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/society.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-society';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/staking.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-staking';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/storage.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-storage';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/sudo.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component from '@polkadot/app-sudo';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/techcomm.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-tech-comm';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/transfer.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Modal from '@polkadot/app-accounts/modals/Transfer';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component: Modal,

packages/apps-routing/src/treasury.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { TFunction } from 'i18next';
-import type { Route } from './types';
 
 import Component, { useCounter } from '@polkadot/app-treasury';
 
+import type { Route } from './types';
+
 export default function create (t: TFunction): Route {
   return {
     Component,

packages/apps-routing/src/types.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
+
 import type { AppProps, BareProps } from '@polkadot/react-components/types';
 
 export type RouteGroup = 'accounts' | 'developer' | 'governance' | 'network' | 'settings';

packages/apps/src/Apps.tsx

@@ -1,19 +1,19 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { BareProps as Props, ThemeDef, ThemeProps } from '@polkadot/react-components/types';
-
 import React, { useContext, useMemo } from 'react';
 import styled, { ThemeContext } from 'styled-components';
+
+import type { BareProps as Props, ThemeDef, ThemeProps } from '@polkadot/react-components/types';
 import AccountSidebar from '@polkadot/app-accounts/Sidebar';
 import { getSystemChainColor } from '@polkadot/apps-config';
 import GlobalStyle from '@polkadot/react-components/styles';
 import { useApi } from '@polkadot/react-hooks';
 import Signer from '@polkadot/react-signer';
 
-import ConnectingOverlay from './overlays/Connecting';
 import Content from './Content';
 import Menu from './Menu';
+import ConnectingOverlay from './overlays/Connecting';
 import WarmUp from './WarmUp';
 
 export const PORTAL_ID = 'portals';

packages/apps/src/Content/NotFound.tsx

@@ -1,11 +1,11 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { RouteProps } from '@polkadot/apps-routing/types';
-
 import React from 'react';
 import { Redirect } from 'react-router';
 
+import type { RouteProps } from '@polkadot/apps-routing/types';
+
 interface Props extends RouteProps {
   missingApis?: (string | string[])[];
 }

packages/apps/src/Content/Status.tsx

@@ -1,11 +1,11 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import React, { useContext, useEffect } from 'react';
+
+import type { ActionStatus } from '@polkadot/react-components/Status/types';
 import type { EventRecord } from '@polkadot/types/interfaces';
 import type { KeyringOptions } from '@polkadot/ui-keyring/options/types';
-import type { ActionStatus } from '@polkadot/react-components/Status/types';
-
-import React, { useContext, useEffect } from 'react';
 import { Status as StatusDisplay, StatusContext } from '@polkadot/react-components';
 import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 import { stringToU8a } from '@polkadot/util';

packages/apps/src/Content/index.tsx

@@ -1,11 +1,11 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Route } from '@polkadot/apps-routing/types';
-
 import React, { Suspense, useContext, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
+
+import type { Route } from '@polkadot/apps-routing/types';
 import createRoutes from '@polkadot/apps-routing';
 import { ErrorBoundary, Spinner, StatusContext } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';

packages/apps/src/Endpoints/Group.tsx

@@ -1,13 +1,13 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
-import type { Group } from './types';
-
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
+
+import type { ThemeProps } from '@polkadot/react-components/types';
 import { Icon } from '@polkadot/react-components';
 
+import type { Group } from './types';
 import Network from './Network';
 
 interface Props {

packages/apps/src/Endpoints/Network.tsx

@@ -1,13 +1,13 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
-import type { Network } from './types';
-
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
+
+import type { ThemeProps } from '@polkadot/react-components/types';
 import { ChainImg } from '@polkadot/react-components';
 
+import type { Network } from './types';
 import Url from './Url';
 
 interface Props {

packages/apps/src/Endpoints/Url.tsx

@@ -3,6 +3,7 @@
 
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
+
 import { Toggle } from '@polkadot/react-components';
 
 interface Props {

packages/apps/src/Endpoints/index.tsx

@@ -1,20 +1,20 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { LinkOption } from '@polkadot/apps-config/settings/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
-import type { Group } from './types';
-
-import React, { useCallback, useMemo, useState } from 'react';
 // ok, this seems to be an eslint bug, this _is_ a package import
 /* eslint-disable-next-line node/no-deprecated-api */
 import punycode from 'punycode';
+import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
-import { CUSTOM_ENDPOINT_KEY, createWsEndpoints } from '@polkadot/apps-config';
+
+import type { LinkOption } from '@polkadot/apps-config/settings/types';
+import type { ThemeProps } from '@polkadot/react-components/types';
+import { createWsEndpoints, CUSTOM_ENDPOINT_KEY } from '@polkadot/apps-config';
 import { Button, Input, Sidebar } from '@polkadot/react-components';
 import uiSettings from '@polkadot/ui-settings';
 import { isAscii } from '@polkadot/util';
 
+import type { Group } from './types';
 import { useTranslation } from '../translate';
 import GroupDisplay from './Group';
 

packages/apps/src/Menu/ChainInfo.tsx

@@ -1,10 +1,10 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { RuntimeVersion } from '@polkadot/types/interfaces';
-
 import React from 'react';
 import styled from 'styled-components';
+
+import type { RuntimeVersion } from '@polkadot/types/interfaces';
 import { ChainImg, Icon } from '@polkadot/react-components';
 import { useApi, useCall, useIpfs, useToggle } from '@polkadot/react-hooks';
 import { BestNumber, Chain } from '@polkadot/react-query';

packages/apps/src/Menu/Grouping.tsx

@@ -1,13 +1,13 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
-import type { Group } from './types';
-
 import React from 'react';
 import styled from 'styled-components';
+
+import type { ThemeProps } from '@polkadot/react-components/types';
 import { Icon } from '@polkadot/react-components';
 
+import type { Group } from './types';
 import Item from './Item';
 
 interface Props extends Group {

packages/apps/src/Menu/Item.tsx

@@ -1,13 +1,14 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ItemRoute } from './types';
-
 import React from 'react';
 import styled from 'styled-components';
+
 import { Badge, Icon } from '@polkadot/react-components';
 import { useToggle } from '@polkadot/react-hooks';
 
+import type { ItemRoute } from './types';
+
 interface Props {
   className?: string;
   isToplevel?: boolean;

packages/apps/src/Menu/NodeInfo.tsx

@@ -1,10 +1,10 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { BareProps as Props } from '@polkadot/react-components/types';
-
 import React from 'react';
 import styled from 'styled-components';
+
+import type { BareProps as Props } from '@polkadot/react-components/types';
 import { useApi } from '@polkadot/react-hooks';
 import { NodeName, NodeVersion } from '@polkadot/react-query';
 

packages/apps/src/Menu/index.tsx

@@ -1,20 +1,20 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Route, Routes } from '@polkadot/apps-routing/types';
-import type { ApiProps } from '@polkadot/react-api/types';
-import type { ThemeProps } from '@polkadot/react-components/types';
-import type { AccountId } from '@polkadot/types/interfaces';
-import type { Group, Groups, ItemRoute } from './types';
-
 import type { TFunction } from 'i18next';
 import React, { useMemo, useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
+
+import type { Route, Routes } from '@polkadot/apps-routing/types';
+import type { ApiProps } from '@polkadot/react-api/types';
+import type { ThemeProps } from '@polkadot/react-components/types';
+import type { AccountId } from '@polkadot/types/interfaces';
 import createRoutes from '@polkadot/apps-routing';
 import { Icon } from '@polkadot/react-components';
 import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 
+import type { Group, Groups, ItemRoute } from './types';
 import { findMissingApis } from '../endpoint';
 import { useTranslation } from '../translate';
 import ChainInfo from './ChainInfo';

packages/apps/src/Menu/types.tsx

@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
-import type { Routes } from '@polkadot/apps-routing/types';
-
 import React from 'react';
 
+import type { Routes } from '@polkadot/apps-routing/types';
+
 export interface ItemRoute {
   Modal?: React.ComponentType<any>;
   href?: string;

packages/apps/src/Root.tsx

@@ -1,20 +1,20 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import React, { Suspense, useEffect, useState } from 'react';
+import { HashRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+
 import type { ThemeDef } from '@polkadot/react-components/types';
 import type { KeyringStore } from '@polkadot/ui-keyring/types';
-
-import React, { Suspense, useEffect, useState } from 'react';
-import { ThemeProvider } from 'styled-components';
-import { HashRouter } from 'react-router-dom';
 import { Api } from '@polkadot/react-api';
 import Queue from '@polkadot/react-components/Status/Queue';
 import { BlockAuthors, Events } from '@polkadot/react-query';
 import settings from '@polkadot/ui-settings';
 
 import Apps from './Apps';
-import WindowDimensions from './WindowDimensions';
 import { darkTheme, lightTheme } from './themes';
+import WindowDimensions from './WindowDimensions';
 
 interface Props {
   store?: KeyringStore;

packages/apps/src/TopBar.tsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
+
 import { BestNumber, Chain, NodeName, NodeVersion } from '@polkadot/react-query';
 
 interface Props {

packages/apps/src/WarmUp.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useEffect, useState } from 'react';
+
 import { useApi, useCall } from '@polkadot/react-hooks';
 
 function WarmUp (): React.ReactElement {

packages/apps/src/index.tsx

@@ -5,7 +5,6 @@
 import './initSettings';
 import 'semantic-ui-css/semantic.min.css';
 import '@polkadot/react-components/i18n';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 

packages/apps/src/initSettings.ts

@@ -3,6 +3,7 @@
 
 import queryString from 'query-string';
 import store from 'store';
+
 import { createWsEndpoints } from '@polkadot/apps-config';
 import { extractIpfsDetails } from '@polkadot/react-hooks/useIpfs';
 import settings from '@polkadot/ui-settings';

packages/apps/src/overlays/Base.tsx

@@ -1,11 +1,11 @@
 // Copyright 2017-2020 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
-
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import React from 'react';
 import styled from 'styled-components';
-import type { IconName } from '@fortawesome/fontawesome-svg-core';
+
+import type { ThemeProps } from '@polkadot/react-components/types';
 import { Button, Icon } from '@polkadot/react-components';
 import { useToggle } from '@polkadot/react-hooks';
 

packages/apps/src/overlays/Connecting.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
+
 import { useApi } from '@polkadot/react-hooks';
 import settings from '@polkadot/ui-settings';
 

packages/page-accounts/src/Accounts/Account.tsx

@@ -1,18 +1,17 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { SubmittableExtrinsic } from '@polkadot/api/types';
+import BN from 'bn.js';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import styled, { ThemeContext } from 'styled-components';
+
 import type { DeriveBalancesAll, DeriveDemocracyLock } from '@polkadot/api-derive/types';
+import type { SubmittableExtrinsic } from '@polkadot/api/types';
 import type { ActionStatus } from '@polkadot/react-components/Status/types';
 import type { ThemeDef } from '@polkadot/react-components/types';
 import type { Option } from '@polkadot/types';
 import type { ProxyDefinition, RecoveryConfig } from '@polkadot/types/interfaces';
 import type { KeyringAddress } from '@polkadot/ui-keyring/types';
-import type { Delegation } from '../types';
-
-import BN from 'bn.js';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import styled, { ThemeContext } from 'styled-components';
 import { ApiPromise } from '@polkadot/api';
 import { getLedger } from '@polkadot/react-api';
 import { AddressInfo, AddressMini, AddressSmall, Badge, Button, ChainLock, CryptoType, Forget, Icon, IdentityIcon, LinkExternal, Menu, Popup, StatusContext, Tags } from '@polkadot/react-components';
@@ -20,20 +19,21 @@ import { useAccountInfo, useApi, useCall, useToggle } from '@polkadot/react-hook
 import keyring from '@polkadot/ui-keyring';
 import { BN_ZERO, formatBalance, formatNumber } from '@polkadot/util';
 
-import { useTranslation } from '../translate';
-import { createMenuGroup } from '../util';
+import type { Delegation } from '../types';
 import Backup from '../modals/Backup';
 import ChangePass from '../modals/ChangePass';
 import DelegateModal from '../modals/Delegate';
 import Derive from '../modals/Derive';
 import IdentityMain from '../modals/IdentityMain';
 import IdentitySub from '../modals/IdentitySub';
-import ProxyOverview from '../modals/ProxyOverview';
 import MultisigApprove from '../modals/MultisigApprove';
+import ProxyOverview from '../modals/ProxyOverview';
 import RecoverAccount from '../modals/RecoverAccount';
 import RecoverSetup from '../modals/RecoverSetup';
 import Transfer from '../modals/Transfer';
 import UndelegateModal from '../modals/Undelegate';
+import { useTranslation } from '../translate';
+import { createMenuGroup } from '../util';
 import useMultisigApprovals from './useMultisigApprovals';
 import useProxies from './useProxies';
 

packages/page-accounts/src/Accounts/BannerClaims.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
+
 import useClaimCounter from '@polkadot/app-claims/useCounter'; // exceptionally CRAP idea
 
 import { useTranslation } from '../translate';

packages/page-accounts/src/Accounts/BannerExtension.tsx

@@ -4,12 +4,13 @@
 import { detect } from 'detect-browser';
 import React from 'react';
 import { Trans } from 'react-i18next';
+
 import useExtensionCounter from '@polkadot/app-settings/useCounter';
 import { availableExtensions } from '@polkadot/apps-config';
 import { isWeb3Injected } from '@polkadot/extension-dapp';
-import { stringUpperFirst } from '@polkadot/util';
 import { onlyOnWeb } from '@polkadot/react-api/hoc';
 import { useApi } from '@polkadot/react-hooks';
+import { stringUpperFirst } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import Banner from './Banner';

packages/page-accounts/src/Accounts/index.tsx

@@ -1,30 +1,30 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ActionStatus } from '@polkadot/react-components/Status/types';
-import type { AccountId, ProxyDefinition, ProxyType, Voting } from '@polkadot/types/interfaces';
-import type { Delegation, SortedAccount } from '../types';
-
 import BN from 'bn.js';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
+
+import type { ActionStatus } from '@polkadot/react-components/Status/types';
+import type { AccountId, ProxyDefinition, ProxyType, Voting } from '@polkadot/types/interfaces';
 import { isLedger } from '@polkadot/react-api';
-import { useApi, useAccounts, useCall, useFavorites, useIpfs, useLoadingDelay, useToggle } from '@polkadot/react-hooks';
-import { FormatBalance } from '@polkadot/react-query';
 import { Button, Input, Table } from '@polkadot/react-components';
+import { useAccounts, useApi, useCall, useFavorites, useIpfs, useLoadingDelay, useToggle } from '@polkadot/react-hooks';
+import { FormatBalance } from '@polkadot/react-query';
 import { BN_ZERO } from '@polkadot/util';
 
-import { useTranslation } from '../translate';
+import type { Delegation, SortedAccount } from '../types';
 import CreateModal from '../modals/Create';
 import ImportModal from '../modals/Import';
 import Ledger from '../modals/Ledger';
 import Multisig from '../modals/MultisigCreate';
 import Proxy from '../modals/ProxiedAdd';
 import Qr from '../modals/Qr';
+import { useTranslation } from '../translate';
+import { sortAccounts } from '../util';
 import Account from './Account';
 import BannerClaims from './BannerClaims';
 import BannerExtension from './BannerExtension';
-import { sortAccounts } from '../util';
 
 interface Balances {
   accounts: Record<string, BN>;

packages/page-accounts/src/Accounts/types.ts

@@ -1,11 +1,11 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { WithTranslation } from 'react-i18next';
+
 import type { ActionStatus } from '@polkadot/react-components/Status/types';
 import type { KeyringAddress } from '@polkadot/ui-keyring/types';
 
-import { WithTranslation } from 'react-i18next';
-
 export { AppProps as ComponentProps } from '@polkadot/react-components/types';
 
 export interface BareProps {

packages/page-accounts/src/Accounts/useKnownAddresses.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useMemo } from 'react';
+
 import { useAccounts, useAddresses } from '@polkadot/react-hooks';
 
 export default function useKnownAddresses (exclude?: string): string[] {

packages/page-accounts/src/Accounts/useMultisigApprovals.ts

@@ -1,10 +1,10 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { useContext, useEffect, useState } from 'react';
+
 import type { Option, StorageKey } from '@polkadot/types';
 import type { H256, Multisig } from '@polkadot/types/interfaces';
-
-import { useContext, useEffect, useState } from 'react';
 import { useApi, useIncrement, useIsMountedRef } from '@polkadot/react-hooks';
 import { EventsContext } from '@polkadot/react-query';
 

packages/page-accounts/src/Accounts/useProxies.ts

@@ -1,12 +1,12 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import BN from 'bn.js';
+import { useEffect, useState } from 'react';
+
 import type { Vec } from '@polkadot/types';
 import type { AccountId, BalanceOf, ProxyDefinition, ProxyType } from '@polkadot/types/interfaces';
 import type { ITuple } from '@polkadot/types/types';
-
-import BN from 'bn.js';
-import { useEffect, useState } from 'react';
 import { useAccounts, useApi, useIsMountedRef } from '@polkadot/react-hooks';
 import { BN_ZERO } from '@polkadot/util';
 

packages/page-accounts/src/CreateAccount.slow.spec.tsx

@@ -1,16 +1,17 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import '@polkadot/react-components/i18n';
+import { fireEvent, render, waitForElementToBeRemoved } from '@testing-library/react';
+import React, { PropsWithChildren } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+
 import AccountsApp from '@polkadot/app-accounts';
 import { MemoryStore } from '@polkadot/app-accounts/test-support/MemoryStore';
 import { lightTheme } from '@polkadot/apps/themes';
 import { Api } from '@polkadot/react-api';
-import '@polkadot/react-components/i18n';
 import { useApi } from '@polkadot/react-hooks';
-import { fireEvent, render, waitForElementToBeRemoved } from '@testing-library/react';
-import React, { PropsWithChildren } from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import { ThemeProvider } from 'styled-components';
 
 const SUBSTRATE_PORT = Number.parseInt(process.env.TEST_SUBSTRATE_PORT || '30333');
 

packages/page-accounts/src/Sidebar/Balances.tsx

@@ -3,6 +3,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
+
 import { AddressInfo, Icon } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';

packages/page-accounts/src/Sidebar/Flags.tsx

@@ -1,9 +1,9 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AddressFlags } from '@polkadot/react-hooks/types';
-
 import React from 'react';
+
+import type { AddressFlags } from '@polkadot/react-hooks/types';
 import { Tag } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';

packages/page-accounts/src/Sidebar/Identity.tsx

@@ -1,10 +1,10 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
+
 import type { AddressIdentity } from '@polkadot/react-hooks/types';
 import type { AccountId, BalanceOf } from '@polkadot/types/interfaces';
-
-import React from 'react';
 import { AddressMini, AvatarItem, Expander, Icon, IconLink, Tag } from '@polkadot/react-components';
 import { useApi, useCall, useRegistrars, useToggle } from '@polkadot/react-hooks';
 import { isHex } from '@polkadot/util';

packages/page-accounts/src/Sidebar/Multisig.tsx

@@ -1,9 +1,9 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { KeyringJson$Meta } from '@polkadot/ui-keyring/types';
-
 import React from 'react';
+
+import type { KeyringJson$Meta } from '@polkadot/ui-keyring/types';
 import { AddressMini, Icon, Static } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';

packages/page-accounts/src/Sidebar/RegistrarJudgement.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useEffect, useState } from 'react';
+
 import { Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';

packages/page-accounts/src/Sidebar/Sidebar.tsx

@@ -1,13 +1,13 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
-
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
-import { useAccountInfo, useToggle } from '@polkadot/react-hooks';
-import { colorLink } from '@polkadot/react-components/styles/theme';
+
+import type { ThemeProps } from '@polkadot/react-components/types';
 import { AccountName, Button, Icon, IdentityIcon, Input, LinkExternal, Sidebar, Tags } from '@polkadot/react-components';
+import { colorLink } from '@polkadot/react-components/styles/theme';
+import { useAccountInfo, useToggle } from '@polkadot/react-hooks';
 
 import Transfer from '../modals/Transfer';
 import { useTranslation } from '../translate';

packages/page-accounts/src/Sidebar/index.tsx

@@ -1,10 +1,10 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { StringOrNull, VoidFn } from '@polkadot/react-components/types';
-
 import React, { useCallback, useState } from 'react';
 
+import type { StringOrNull, VoidFn } from '@polkadot/react-components/types';
+
 import Sidebar from './Sidebar';
 
 type ToggleContext = undefined | (([address, onUpdateName]: [StringOrNull, VoidFn | null]) => void);

packages/page-accounts/src/Vanity/Match.tsx

@@ -1,10 +1,10 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '@polkadot/react-components/types';
-
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
+
+import type { ThemeProps } from '@polkadot/react-components/types';
 import { Button, IdentityIcon } from '@polkadot/react-components';
 import { u8aToHex } from '@polkadot/util';
 

packages/page-accounts/src/Vanity/index.tsx

@@ -1,12 +1,12 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ActionStatus } from '@polkadot/react-components/Status/types';
-import type { KeypairType } from '@polkadot/util-crypto/types';
-import type { GeneratorMatches, GeneratorMatch, GeneratorResult } from '@polkadot/vanitygen/types';
-
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
+
+import type { ActionStatus } from '@polkadot/react-components/Status/types';
+import type { KeypairType } from '@polkadot/util-crypto/types';
+import type { GeneratorMatch, GeneratorMatches, GeneratorResult } from '@polkadot/vanitygen/types';
 import { Button, Dropdown, Input, Table } from '@polkadot/react-components';
 import { useApi, useIsMountedRef } from '@polkadot/react-hooks';
 import uiSettings from '@polkadot/ui-settings';

packages/page-accounts/src/index.tsx

@@ -1,17 +1,17 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AppProps as Props } from '@polkadot/react-components/types';
-
 import React, { useRef } from 'react';
 import { Route, Switch } from 'react-router';
-import { useAccounts, useIpfs } from '@polkadot/react-hooks';
-import { HelpOverlay, Tabs } from '@polkadot/react-components';
 
+import type { AppProps as Props } from '@polkadot/react-components/types';
+import { HelpOverlay, Tabs } from '@polkadot/react-components';
+import { useAccounts, useIpfs } from '@polkadot/react-hooks';
+
+import Accounts from './Accounts';
 import basicMd from './md/basic.md';
 import { useTranslation } from './translate';
 import useCounter from './useCounter';
-import Accounts from './Accounts';
 import Vanity from './Vanity';
 
 export { useCounter };

packages/page-accounts/src/modals/Backup.tsx

@@ -3,6 +3,7 @@
 
 import FileSaver from 'file-saver';
 import React, { useCallback, useState } from 'react';
+
 import { AddressRow, Button, Modal, Password } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 

packages/page-accounts/src/modals/ChangePass.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useCallback, useState } from 'react';
+
 import { AddressRow, Button, Modal, Password, PasswordStrength } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 

packages/page-accounts/src/modals/Create.tsx

@@ -1,23 +1,23 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ActionStatus } from '@polkadot/react-components/Status/types';
-import type { CreateResult } from '@polkadot/ui-keyring/types';
-import type { KeypairType } from '@polkadot/util-crypto/types';
-import type { ModalProps } from '../types';
-
 import FileSaver from 'file-saver';
 import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
+
+import type { ActionStatus } from '@polkadot/react-components/Status/types';
+import type { CreateResult } from '@polkadot/ui-keyring/types';
+import type { KeypairType } from '@polkadot/util-crypto/types';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
+import { getEnvironment } from '@polkadot/react-api/util';
 import { AddressRow, Button, Checkbox, CopyButton, Dropdown, Expander, Input, InputAddress, Modal, TextArea } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
 import { isHex, u8aToHex } from '@polkadot/util';
 import { keyExtractSuri, mnemonicGenerate, mnemonicValidate, randomAsU8a } from '@polkadot/util-crypto';
-import { getEnvironment } from '@polkadot/react-api/util';
 
+import type { ModalProps } from '../types';
 import { useTranslation } from '../translate';
 import CreateConfirmation from './CreateConfirmation';
 import ExternalWarning from './ExternalWarning';

packages/page-accounts/src/modals/CreateConfirmation.tsx

@@ -1,9 +1,9 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { KeypairType } from '@polkadot/util-crypto/types';
-
 import React from 'react';
+
+import type { KeypairType } from '@polkadot/util-crypto/types';
 import { AddressRow, Modal, Static } from '@polkadot/react-components';
 import { isHex } from '@polkadot/util';
 

packages/page-accounts/src/modals/Delegate.tsx

@@ -1,15 +1,15 @@
 // Copyright 2017-2020 @polkadot/app-staking authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Conviction } from '@polkadot/types/interfaces';
-import type { AmountValidateState } from '../Accounts/types';
-
 import BN from 'bn.js';
 import React, { useState } from 'react';
+
+import type { Conviction } from '@polkadot/types/interfaces';
 import { ConvictionDropdown, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { BalanceFree } from '@polkadot/react-query';
 import { BN_ZERO } from '@polkadot/util';
 
+import type { AmountValidateState } from '../Accounts/types';
 import { useTranslation } from '../translate';
 import ValidateAmount from './InputValidateAmount';
 

packages/page-accounts/src/modals/Derive.tsx

@@ -1,11 +1,11 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+
 import type { KeyringPair } from '@polkadot/keyring/types';
 import type { ActionStatus } from '@polkadot/react-components/Status/types';
 import type { KeypairType } from '@polkadot/util-crypto/types';
-
-import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { AddressRow, Button, Input, InputAddress, Modal, Password, StatusContext } from '@polkadot/react-components';
 import { useApi, useDebounce, useToggle } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';

packages/page-accounts/src/modals/IdentityMain.tsx

@@ -1,11 +1,11 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Data, Option } from '@polkadot/types';
-import type { Registration } from '@polkadot/types/interfaces';
-
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+
+import type { Data, Option } from '@polkadot/types';
+import type { Registration } from '@polkadot/types/interfaces';
 import { Input, InputBalance, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { getAddressMeta } from '@polkadot/react-components/util';
 import { useApi, useCall } from '@polkadot/react-hooks';

packages/page-accounts/src/modals/IdentitySub.tsx

@@ -1,11 +1,11 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import React, { useCallback, useEffect, useState } from 'react';
+
 import type { Data, Option, Vec } from '@polkadot/types';
 import type { AccountId, Balance } from '@polkadot/types/interfaces';
 import type { ITuple } from '@polkadot/types/types';
-
-import React, { useCallback, useEffect, useState } from 'react';
 import { Button, Columar, Input, InputAddress, Modal, Spinner, TxButton } from '@polkadot/react-components';
 import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 import { u8aToString } from '@polkadot/util';

packages/page-accounts/src/modals/Import.tsx

@@ -1,16 +1,16 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import React, { useCallback, useMemo, useState } from 'react';
+
 import type { KeyringPair, KeyringPair$Json } from '@polkadot/keyring/types';
 import type { ActionStatus } from '@polkadot/react-components/Status/types';
-import type { ModalProps } from '../types';
-
-import React, { useCallback, useMemo, useState } from 'react';
 import { AddressRow, Button, InputAddress, InputFile, Modal, Password } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
-import { u8aToString } from '@polkadot/util';
 import keyring from '@polkadot/ui-keyring';
+import { u8aToString } from '@polkadot/util';
 
+import type { ModalProps } from '../types';
 import { useTranslation } from '../translate';
 import ExternalWarning from './ExternalWarning';
 

packages/page-accounts/src/modals/InputValidateAmount.tsx

@@ -1,14 +1,14 @@
 // Copyright 2017-2020 @polkadot/app-staking authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { DeriveBalancesAll } from '@polkadot/api-derive/types';
-import type { AmountValidateState } from '../Accounts/types';
-
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
+
+import type { DeriveBalancesAll } from '@polkadot/api-derive/types';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { BN_ZERO } from '@polkadot/util';
 
+import type { AmountValidateState } from '../Accounts/types';
 import { useTranslation } from '../translate';
 
 interface Props {

packages/page-accounts/src/modals/Ledger.tsx

@@ -2,9 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useCallback, useRef, useState } from 'react';
-import keyring from '@polkadot/ui-keyring';
+
 import { getLedger } from '@polkadot/react-api';
 import { Button, Dropdown, Modal } from '@polkadot/react-components';
+import keyring from '@polkadot/ui-keyring';
 
 import { useTranslation } from '../translate';
 

packages/page-accounts/src/modals/MultisigApprove.tsx

@@ -1,13 +1,13 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AccountId, Call, H256, Multisig } from '@polkadot/types/interfaces';
-import type { SubmittableExtrinsic } from '@polkadot/api/types';
-
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
+
+import type { SubmittableExtrinsic } from '@polkadot/api/types';
+import type { AccountId, Call, H256, Multisig } from '@polkadot/types/interfaces';
 import { registry } from '@polkadot/react-api';
-import { Dropdown, InputAddress, Modal, Toggle, TxButton, Input } from '@polkadot/react-components';
+import { Dropdown, Input, InputAddress, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { useAccounts, useApi, useWeight } from '@polkadot/react-hooks';
 import { assert, isHex } from '@polkadot/util';
 

packages/page-accounts/src/modals/MultisigCreate.tsx

@@ -1,17 +1,17 @@
 // Copyright 2017-2020 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ActionStatus } from '@polkadot/react-components/Status/types';
-import type { ModalProps } from '../types';
-
 import BN from 'bn.js';
 import React, { useCallback, useState } from 'react';
+
+import type { ActionStatus } from '@polkadot/react-components/Status/types';
 import { Button, Input, InputAddressMulti, InputNumber, Modal } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 
-import { useTranslation } from '../translate';
+import type { ModalProps } from '../types';
 import useKnownAddresses from '../Accounts/useKnownAddresses';
+import { useTranslation } from '../translate';
 
 interface Props extends ModalProps {
   className?: string;