Update imports order

.prettierrc.js

@@ -6,4 +6,5 @@ module.exports = {
   printWidth: 120,
   tabWidth: 2,
   bracketSameLine: true,
+  importOrder: ['.*react.*', '^@polkadot/(.*)$', '^@coong/(.*)$', '<THIRD_PARTY_MODULES>', '^[./]'],
 };

package.json

@@ -9,10 +9,12 @@
   "scripts": {
     "start": "yarn workspace @coong/ui start",
     "build": "yarn clean && npx lerna run build",
-    "clean": "npx lerna run clean"
+    "clean": "npx lerna run clean",
+    "prettify": "npx prettier --write ."
   },
   "author": "Thang X. Vu  - [email protected]",
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "prettier": "^2.8.1"
   },
   "dependencies": {

packages/base/src/requests/EmbedHandler.ts

@@ -1,10 +1,11 @@
-import { MessageId, RequestAuthorizedAccounts, RequestName, WalletRequest, WalletResponse } from 'types';
-import keyring from 'keyring';
 import { InjectedAccount } from '@polkadot/extension-inject/types';
 import { SingleAddress, SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { CoongError, ErrorCode } from '@coong/utils';
 import { KeypairType } from '@polkadot/util-crypto/types';
+import { CoongError, ErrorCode } from '@coong/utils';
+import keyring from 'keyring';
 import Handler from 'requests/Handler';
+import { MessageId, RequestAuthorizedAccounts, RequestName, WalletRequest, WalletResponse } from 'types';
+
 
 const sortOldestFirst = (a: SingleAddress, b: SingleAddress) => {
   return (a.json.meta.whenCreated || 0) - (b.json.meta.whenCreated || 0);

packages/base/src/requests/State.ts

@@ -1,5 +1,5 @@
-import { AccessStatus, RequestAppRequestAccess, ResponseAppRequestAccess } from 'types';
 import { assert } from '@coong/utils';
+import { AccessStatus, RequestAppRequestAccess, ResponseAppRequestAccess } from 'types';
 
 export type AppId = string;
 export interface AppInfo {

packages/base/src/requests/index.ts

@@ -1,10 +1,11 @@
-import State from 'requests/State';
+import { CoongError, ErrorCode } from '@coong/utils';
 import { EmbedHandler } from 'requests/EmbedHandler';
+import State from 'requests/State';
 import TabHandler from 'requests/TabHandler';
 import { MessageId, RequestName, WalletRequest, WalletResponse } from 'types';
-import { CoongError, ErrorCode } from '@coong/utils';
 import { isMessageId } from 'utils/messageId';
 
+
 export const state = new State();
 export const embedHandler = new EmbedHandler(state);
 export const tabHandler = new TabHandler(state);

packages/keyring/src/index.ts

@@ -1,8 +1,9 @@
-import CryptoJS from 'crypto-js';
+import { KeyringPair } from '@polkadot/keyring/types';
 import { Keyring as InnerKeyring } from '@polkadot/ui-keyring';
 import { KeyringAddress } from '@polkadot/ui-keyring/types';
-import { KeyringPair } from '@polkadot/keyring/types';
 import { assert, CoongError, ErrorCode } from '@coong/utils';
+import CryptoJS from 'crypto-js';
+
 
 const ENCRYPTED_MNEMONIC = 'ENCRYPTED_MNEMONIC';
 const ACCOUNTS_INDEX = 'ACCOUNTS_INDEX';

packages/sdk/src/CoongSdk.ts

@@ -1,9 +1,10 @@
-import { injectWalletAPI, setupWalletMessageHandler } from 'message';
-import TabInstance from 'wallet/TabInstance';
-import EmbedInstance from 'wallet/EmbedInstance';
-import { assert, assertFalse, ErrorCode } from '@coong/utils';
 import { MessageType, WalletEvent, WalletRequestEvent } from '@coong/base/types';
+import { assert, assertFalse, ErrorCode } from '@coong/utils';
 import { StandardCoongError } from '@coong/utils/errors';
+import { injectWalletAPI, setupWalletMessageHandler } from 'message';
+import EmbedInstance from 'wallet/EmbedInstance';
+import TabInstance from 'wallet/TabInstance';
+
 
 const DEFAULT_WALLET_URL = 'https://coongwallet.io';
 

packages/sdk/src/injection/CoongSigner.ts

@@ -1,6 +1,7 @@
 import type { Signer as SignerInterface, SignerResult } from '@polkadot/api/types';
-import { SendMessage } from 'types';
 import { SignerPayloadJSON, SignerPayloadRaw } from '@polkadot/types/types/extrinsic';
+import { SendMessage } from 'types';
+
 
 let sendMessage: SendMessage;
 

packages/sdk/src/injection/Injected.ts

@@ -1,6 +1,6 @@
 import { Injected } from '@polkadot/extension-inject/types';
-import CoongSigner from 'injection/CoongSigner';
 import Accounts from 'injection/Accounts';
+import CoongSigner from 'injection/CoongSigner';
 import { SendMessage } from 'types';
 
 export default class SubstrateInjected implements Injected {

packages/sdk/src/message.ts

@@ -1,8 +1,6 @@
-import { isMessageId, newMessageId } from '@coong/base';
-import { Handlers } from 'types';
+import { injectExtension } from '@polkadot/extension-inject';
 import { Injected } from '@polkadot/extension-inject/types';
-import SubstrateInjected from 'injection/Injected';
-import CoongSdk from 'CoongSdk';
+import { isMessageId, newMessageId } from '@coong/base';
 import {
   MessageType,
   RequestName,
@@ -11,8 +9,10 @@ import {
   WalletResponse,
   WalletResponseEvent,
 } from '@coong/base/types';
-import { injectExtension } from '@polkadot/extension-inject';
 import { assert } from '@coong/utils';
+import CoongSdk from 'CoongSdk';
+import SubstrateInjected from 'injection/Injected';
+import { Handlers } from 'types';
 
 const handlers: Handlers = {};
 

packages/sdk/src/wallet/TabInstance.ts

@@ -1,6 +1,6 @@
-import WalletInstance from 'wallet/WalletInstance';
-import { StandardCoongError } from '@coong/utils/errors';
 import { WalletSignal } from '@coong/base/types';
+import { StandardCoongError } from '@coong/utils/errors';
+import WalletInstance from 'wallet/WalletInstance';
 
 export default class TabInstance extends WalletInstance {
   async openWalletWindow(path = ''): Promise<Window> {

packages/ui/index.html

@@ -5,9 +5,11 @@
     <link rel="icon" type="image/svg+xml" href="/coong-lined-logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="A multichain cryto wallet for Polkadot & Kusama ecosystem" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet" />
     <title>Coong Wallet - A multichain cryto wallet for Polkadot & Kusama ecosystem</title>
   </head>
   <body>

packages/ui/src/components/layouts/MainLayout.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { Props } from 'types';
-import { Container, styled } from '@mui/material';
 import { Link, Outlet } from 'react-router-dom';
+import { Container, styled } from '@mui/material';
 import CoongLogo from 'assets/images/coong-text-logo.svg';
 import LockWalletButton from 'components/shared/LockWalletButton';
 import ResetWalletButton from 'components/shared/ResetWalletButton';
+import { Props } from 'types';
+
 
 const MainLayout: React.FC<Props> = ({ className = '' }: Props) => {
   return (

packages/ui/src/components/pages/Accounts/AccountAddress.tsx

@@ -1,9 +1,10 @@
 import { FC, useEffect, useState } from 'react';
-import { Props } from 'types';
-import { styled } from '@mui/material';
 import { useWindowSize } from 'react-use';
-import { shortenAddress } from 'utils/string';
+import { styled } from '@mui/material';
 import CopyAddressTooltip from 'components/shared/CopyAddressTooltip';
+import { Props } from 'types';
+import { shortenAddress } from 'utils/string';
+
 
 interface AccountAddressProps extends Props {
   address: string;

packages/ui/src/components/pages/Accounts/AccountCard.tsx

@@ -1,10 +1,11 @@
+import { Identicon } from '@polkadot/react-identicon';
 import { FC } from 'react';
-import { Props } from 'types';
 import { KeyringAddress } from '@polkadot/ui-keyring/types';
 import { styled } from '@mui/material';
-import { Identicon } from '@polkadot/react-identicon';
 import AccountAddress from 'components/pages/Accounts/AccountAddress';
 import CopyAddressTooltip from 'components/shared/CopyAddressTooltip';
+import { Props } from 'types';
+
 
 interface AccountCardProps extends Props {
   account: KeyringAddress;

packages/ui/src/components/pages/Accounts/index.tsx

@@ -1,12 +1,13 @@
-import { styled } from '@mui/material';
-import PageTitle from 'components/shared/PageTitle';
 import { FC, useState } from 'react';
-import { Props } from 'types';
-import { KeyringAddress } from '@polkadot/ui-keyring/types';
 import { useAsync } from 'react-use';
+import { KeyringAddress } from '@polkadot/ui-keyring/types';
 import { keyring } from '@coong/base';
+import { styled } from '@mui/material';
 import AccountCard from 'components/pages/Accounts/AccountCard';
 import NewAccountButton from 'components/shared/NewAccountButton';
+import PageTitle from 'components/shared/PageTitle';
+import { Props } from 'types';
+
 
 const Index: FC<Props> = ({ className = '' }) => {
   const [accounts, setAccounts] = useState<KeyringAddress[]>([]);

packages/ui/src/components/pages/MainScreen.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { RootState } from 'redux/store';
-import Welcome from 'components/pages/Welcome';
-import SplashScreen from 'components/pages/SplashScreen';
 import Accounts from 'components/pages/Accounts';
+import SplashScreen from 'components/pages/SplashScreen';
 import UnlockWallet from 'components/pages/UnlockWallet';
+import Welcome from 'components/pages/Welcome';
+import { RootState } from 'redux/store';
+
 
 const MainScreen: React.FC = () => {
   const { ready, seedReady, locked } = useSelector((state: RootState) => state.app);

packages/ui/src/components/pages/NewWallet/BackupSecretRecoveryPhrase.tsx

@@ -1,16 +1,17 @@
 import { ChangeEvent, FC, FormEvent, useState } from 'react';
-import { Props } from 'types';
-import { Box, Button, Checkbox, FormControlLabel, FormGroup, styled } from '@mui/material';
-import { setupWalletActions } from 'redux/slices/setup-wallet';
-import { NewWalletScreenStep } from 'components/pages/NewWallet/types';
 import { useDispatch, useSelector } from 'react-redux';
-import { RootState } from 'redux/store';
-import { generateMnemonic } from '@polkadot/util-crypto/mnemonic/bip39';
-import { LoadingButton } from '@mui/lab';
+import { useNavigate } from 'react-router-dom';
 import { useEffectOnce } from 'react-use';
+import { generateMnemonic } from '@polkadot/util-crypto/mnemonic/bip39';
 import { keyring } from '@coong/base';
+import { LoadingButton } from '@mui/lab';
+import { Box, Button, Checkbox, FormControlLabel, FormGroup, styled } from '@mui/material';
+import { NewWalletScreenStep } from 'components/pages/NewWallet/types';
 import { appActions } from 'redux/slices/app';
-import { useNavigate } from 'react-router-dom';
+import { setupWalletActions } from 'redux/slices/setup-wallet';
+import { RootState } from 'redux/store';
+import { Props } from 'types';
+
 
 const BackupSecretRecoveryPhrase: FC<Props> = ({ className = '' }: Props) => {
   const dispatch = useDispatch();

packages/ui/src/components/pages/NewWallet/ChooseWalletPassword.tsx

@@ -1,9 +1,10 @@
 import { ChangeEvent, FC, FormEvent, useEffect, useState } from 'react';
-import { Props } from 'types';
-import { Box, Button, TextField } from '@mui/material';
 import { useDispatch } from 'react-redux';
-import { setupWalletActions } from 'redux/slices/setup-wallet';
+import { Box, Button, TextField } from '@mui/material';
 import EmptySpace from 'components/shared/mics/EmptySpace';
+import { setupWalletActions } from 'redux/slices/setup-wallet';
+import { Props } from 'types';
+
 
 const ChooseWalletPassword: FC<Props> = ({ className = '' }: Props) => {
   const dispatch = useDispatch();

packages/ui/src/components/pages/NewWallet/ConfirmWalletPassword.tsx

@@ -1,11 +1,12 @@
 import { ChangeEvent, FC, FormEvent, useEffect, useState } from 'react';
-import { Props } from 'types';
+import { useDispatch, useSelector } from 'react-redux';
 import { Box, Button, TextField } from '@mui/material';
-import { setupWalletActions } from 'redux/slices/setup-wallet';
 import { NewWalletScreenStep } from 'components/pages/NewWallet/types';
-import { useDispatch, useSelector } from 'react-redux';
-import { RootState } from 'redux/store';
 import EmptySpace from 'components/shared/mics/EmptySpace';
+import { setupWalletActions } from 'redux/slices/setup-wallet';
+import { RootState } from 'redux/store';
+import { Props } from 'types';
+
 
 const ConfirmWalletPassword: FC<Props> = ({ className = '' }: Props) => {
   const dispatch = useDispatch();

packages/ui/src/components/pages/NewWallet/index.tsx

@@ -1,12 +1,13 @@
 import { FC } from 'react';
-import { Props } from 'types';
+import { useSelector } from 'react-redux';
 import { styled } from '@mui/material';
+import BackupSecretRecoveryPhrase from 'components/pages/NewWallet/BackupSecretRecoveryPhrase';
 import ChooseWalletPassword from 'components/pages/NewWallet/ChooseWalletPassword';
-import { useSelector } from 'react-redux';
-import { RootState } from 'redux/store';
-import { NewWalletScreenStep } from 'components/pages/NewWallet/types';
 import ConfirmWalletPassword from 'components/pages/NewWallet/ConfirmWalletPassword';
-import BackupSecretRecoveryPhrase from 'components/pages/NewWallet/BackupSecretRecoveryPhrase';
+import { NewWalletScreenStep } from 'components/pages/NewWallet/types';
+import { RootState } from 'redux/store';
+import { Props } from 'types';
+
 
 const ScreenStep = () => {
   const { newWalletScreenStep } = useSelector((state: RootState) => state.setupWallet);

packages/ui/src/components/pages/SplashScreen.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
-import { CircularProgress, styled } from '@mui/material';
-import { cryptoWaitReady } from '@polkadot/util-crypto';
 import { useDispatch } from 'react-redux';
+import { cryptoWaitReady } from '@polkadot/util-crypto';
+import { keyring } from '@coong/base';
+import { CircularProgress, styled } from '@mui/material';
 import { appActions } from 'redux/slices/app';
 import { Props } from 'types';
-import { keyring } from '@coong/base';
+
 
 const SplashScreen: React.FC<Props> = ({ className = '' }: Props) => {
   const dispatch = useDispatch();

packages/ui/src/components/pages/UnlockWallet.tsx

@@ -1,10 +1,11 @@
 import { ChangeEvent, FC, FormEvent, useEffect, useState } from 'react';
-import { Props } from 'types';
 import { useDispatch } from 'react-redux';
-import { Box, Button, styled, TextField } from '@mui/material';
 import { keyring } from '@coong/base';
-import { appActions } from 'redux/slices/app';
+import { Box, Button, styled, TextField } from '@mui/material';
 import EmptySpace from 'components/shared/mics/EmptySpace';
+import { appActions } from 'redux/slices/app';
+import { Props } from 'types';
+
 
 const UnlockWallet: FC<Props> = ({ className = '' }) => {
   const dispatch = useDispatch();

packages/ui/src/components/pages/Welcome.tsx

@@ -1,8 +1,9 @@
-import { Button, styled } from '@mui/material';
 import React from 'react';
-import { Props } from 'types';
-import { toast } from 'react-toastify';
 import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { Button, styled } from '@mui/material';
+import { Props } from 'types';
+
 
 const Welcome: React.FC<Props> = ({ className = '' }: Props) => {
   const navigate = useNavigate();

packages/ui/src/components/shared/CopyAddressTooltip.tsx

@@ -1,9 +1,10 @@
 import { FC, useState } from 'react';
-import { Props } from 'types';
-import { Tooltip } from '@mui/material';
 import { useCopyToClipboard } from 'react-use';
+import { Tooltip } from '@mui/material';
+import { Props } from 'types';
 import { isTouchDevice } from 'utils/device';
 
+
 interface AddressCopiedTooltipProps extends Props {
   address: string;
   name?: string;

packages/ui/src/components/shared/LockWalletButton.tsx

@@ -1,11 +1,12 @@
 import React, { FC } from 'react';
-import { Props } from 'types';
-import { Lock } from '@mui/icons-material';
-import { IconButton } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
-import { RootState } from 'redux/store';
 import { keyring } from '@coong/base';
+import { Lock } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
 import { appActions } from 'redux/slices/app';
+import { RootState } from 'redux/store';
+import { Props } from 'types';
+
 
 const LockWalletButton: FC<Props> = () => {
   const dispatch = useDispatch();

packages/ui/src/components/shared/NewAccountButton.tsx

@@ -1,5 +1,8 @@
 import { ChangeEvent, FC, FormEvent, useRef, useState } from 'react';
-import { Props } from 'types';
+import { toast } from 'react-toastify';
+import { useUpdateEffect } from 'react-use';
+import { KeyringPair } from '@polkadot/keyring/types';
+import { keyring } from '@coong/base';
 import { Add } from '@mui/icons-material';
 import {
   Box,
@@ -11,10 +14,7 @@ import {
   DialogTitle,
   TextField,
 } from '@mui/material';
-import { useUpdateEffect } from 'react-use';
-import { keyring } from '@coong/base';
-import { toast } from 'react-toastify';
-import { KeyringPair } from '@polkadot/keyring/types';
+import { Props } from 'types';
 
 interface NewAccountButtonProps extends Props {
   onCreated?: (account: KeyringPair) => void;