Improve ext connection and linting (#1053)

* Improve extensions connection

* Improve linting

* Update deps

* Update yarn.lock

* Improve config

* Exec lint

---------

Co-authored-by: Stefan Popov <17688105+stefashkaa@users.noreply.github.com>

.eslintrc.js

@@ -17,6 +17,20 @@ module.exports = {
   rules: {
     'no-console': [process.env.NODE_ENV === 'production' ? 'error' : 'warn', { allow: ['warn', 'error', 'info'] }],
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always',
+        alphabetize: { order: 'asc', caseInsensitive: true },
+        pathGroups: [
+          {
+            pattern: '@/**',
+            group: 'internal',
+          },
+        ],
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
+      },
+    ],
     'vue/html-closing-bracket-newline': [
       'error',
       {

package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^2.0.0",
-    "@soramitsu/soraneo-wallet-web": "1.17.6",
+    "@soramitsu/soraneo-wallet-web": "1.17.8",
     "@walletconnect/web3-provider": "^1.8.0",
     "base-64": "^1.0.0",
     "core-js": "^3.26.0",
@@ -72,10 +72,11 @@
     "electron": "^13.0.0",
     "electron-devtools-installer": "^3.1.0",
     "eslint": "^7.29.0",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-promise": "^5.1.1",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-vue": "^7.20.0",
     "jest": "^27.2.2",
     "jsdom": "^16.6.0",

src/App.vue

@@ -43,32 +43,31 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Watch } from 'vue-property-decorator';
 import { connection } from '@sora-substrate/util';
 import { components, mixins, settingsStorage } from '@soramitsu/soraneo-wallet-web';
-import type { History, HistoryItem } from '@sora-substrate/util';
-import type { WALLET_CONSTS, WALLET_TYPES } from '@soramitsu/soraneo-wallet-web';
-import type Theme from '@soramitsu/soramitsu-js-ui/lib/types/Theme';
-import type DesignSystem from '@soramitsu/soramitsu-js-ui/lib/types/DesignSystem';
-import type { WhitelistArrayItem } from '@sora-substrate/util/build/assets/types';
-import type { EvmNetwork } from '@sora-substrate/util/build/evm/types';
-
-import NodeErrorMixin from '@/components/mixins/NodeErrorMixin';
+import { Component, Mixins, Watch } from 'vue-property-decorator';
 
-import SoraLogo from '@/components/shared/Logo/Sora.vue';
-import AppHeader from '@/components/App/Header/AppHeader.vue';
+import axiosInstance, { updateBaseUrl } from '@/api';
 import AppFooter from '@/components/App/Footer/AppFooter.vue';
+import AppHeader from '@/components/App/Header/AppHeader.vue';
 import AppMenu from '@/components/App/Menu/AppMenu.vue';
-
+import NodeErrorMixin from '@/components/mixins/NodeErrorMixin';
+import SoraLogo from '@/components/shared/Logo/Sora.vue';
 import { PageNames, Components, Language } from '@/consts';
-import axiosInstance, { updateBaseUrl } from '@/api';
+import { getLocale } from '@/lang';
 import router, { goTo, lazyComponent } from '@/router';
 import { action, getter, mutation, state } from '@/store/decorators';
-import { preloadFontFace, updateDocumentTitle } from '@/utils';
-import { getLocale } from '@/lang';
-import type { ConnectToNodeOptions, Node } from '@/types/nodes';
 import type { FeatureFlags } from '@/store/settings/types';
 import type { EthBridgeSettings } from '@/store/web3/types';
+import type { ConnectToNodeOptions, Node } from '@/types/nodes';
+import { preloadFontFace, updateDocumentTitle } from '@/utils';
+
+import type { History, HistoryItem } from '@sora-substrate/util';
+import type { WhitelistArrayItem } from '@sora-substrate/util/build/assets/types';
+import type { EvmNetwork } from '@sora-substrate/util/build/evm/types';
+import type DesignSystem from '@soramitsu/soramitsu-js-ui/lib/types/DesignSystem';
+import type Theme from '@soramitsu/soramitsu-js-ui/lib/types/Theme';
+import type { WALLET_CONSTS, WALLET_TYPES } from '@soramitsu/soraneo-wallet-web';
 
 @Component({
   components: {

src/api/index.ts

@@ -1,4 +1,5 @@
 import { axiosInstance } from '@sora-substrate/util';
+
 import type VueRouter from 'vue-router';
 
 export const BASE_URL = process.env.BASE_URL;

src/background.ts

@@ -1,6 +1,6 @@
 import { app, protocol, BrowserWindow, shell } from 'electron';
-import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
 

src/components/App/Alerts/AlertList.vue

@@ -40,16 +40,17 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
-import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 import { FPNumber } from '@sora-substrate/math';
-import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
-import type { Alert, WhitelistIdsBySymbol } from '@soramitsu/soraneo-wallet-web/lib/types/common';
+import { components, mixins } from '@soramitsu/soraneo-wallet-web';
+import { Component, Mixins } from 'vue-property-decorator';
 
-import { getter, mutation, state } from '@/store/decorators';
 import { MAX_ALERTS_NUMBER } from '@/consts';
+import { getter, mutation, state } from '@/store/decorators';
 import { getDeltaPercent } from '@/utils';
 
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
+import type { Alert, WhitelistIdsBySymbol } from '@soramitsu/soraneo-wallet-web/lib/types/common';
+
 @Component({
   components: {
     AccountCard: components.AccountCard,

src/components/App/Alerts/Alerts.vue

@@ -20,14 +20,15 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
 import { mixins, components } from '@soramitsu/soraneo-wallet-web';
-import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
+import { Component, Mixins } from 'vue-property-decorator';
 
 import { Components, NumberedAlert } from '@/consts';
 import { lazyComponent } from '@/router';
 import { mutation, state } from '@/store/decorators';
 
+import type { AccountAsset } from '@sora-substrate/util/build/assets/types';
+
 enum AlertPages {
   AlertList,
   CreateAlert,

src/components/App/Alerts/CreateAlert.vue

@@ -75,18 +75,19 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop } from 'vue-property-decorator';
-import { components, mixins } from '@soramitsu/soraneo-wallet-web';
 import { FPNumber } from '@sora-substrate/math';
-import type { AccountAsset, Asset, WhitelistIdsBySymbol } from '@sora-substrate/util/build/assets/types';
-import type { Alert } from '@soramitsu/soraneo-wallet-web/lib/types/common';
+import { components, mixins } from '@soramitsu/soraneo-wallet-web';
+import { Component, Mixins, Prop } from 'vue-property-decorator';
 
-import { getter, mutation, state } from '@/store/decorators';
-import { formatAddress, getDeltaPercent } from '@/utils';
-import { lazyComponent } from '@/router';
 import { Components, MAX_ALERTS_NUMBER } from '@/consts';
-import { AlertFrequencyTabs, AlertTypeTabs } from '@/types/tabs';
 import type { EditableAlertObject, NumberedAlert } from '@/consts';
+import { lazyComponent } from '@/router';
+import { getter, mutation, state } from '@/store/decorators';
+import { AlertFrequencyTabs, AlertTypeTabs } from '@/types/tabs';
+import { formatAddress, getDeltaPercent } from '@/utils';
+
+import type { AccountAsset, Asset, WhitelistIdsBySymbol } from '@sora-substrate/util/build/assets/types';
+import type { Alert } from '@soramitsu/soraneo-wallet-web/lib/types/common';
 
 @Component({
   components: {

src/components/App/BrowserNotification/BrowserNotifsBlockedDialog.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
 import { mixins, components } from '@soramitsu/soraneo-wallet-web';
+import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 

src/components/App/BrowserNotification/BrowserNotifsEnableDialog.vue

@@ -18,8 +18,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
 import { components, mixins } from '@soramitsu/soraneo-wallet-web';
+import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { state, mutation } from '@/store/decorators';

src/components/App/Footer/AppFooter.vue

@@ -58,21 +58,22 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
-import { getExplorerLinks, WALLET_TYPES } from '@soramitsu/soraneo-wallet-web';
 import { FPNumber } from '@sora-substrate/util';
 import { Status } from '@soramitsu/soramitsu-js-ui/lib/types';
-import type { WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
+import { getExplorerLinks, WALLET_TYPES } from '@soramitsu/soraneo-wallet-web';
+import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
+import { Components } from '@/consts';
+import { lazyComponent } from '@/router';
+import { state, getter, mutation } from '@/store/decorators';
+import type { Node } from '@/types/nodes';
+
 import FooterPopper from './FooterPopper.vue';
+import { formatLocation } from './Node/utils';
 import NoInternetDialog from './NoInternetDialog.vue';
 
-import { formatLocation } from './Node/utils';
-import { state, getter, mutation } from '@/store/decorators';
-import { lazyComponent } from '@/router';
-import { Components } from '@/consts';
-import type { Node } from '@/types/nodes';
+import type { WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
 
 /** Max limit provided by navigator.connection.downlink */
 const MAX_INTERNET_CONNECTION_LIMIT = 10;

src/components/App/Footer/FooterPopper.vue

@@ -36,8 +36,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Ref, Watch } from 'vue-property-decorator';
 import { Status } from '@soramitsu/soramitsu-js-ui/lib/types';
+import { Component, Prop, Vue, Ref, Watch } from 'vue-property-decorator';
+
 import { delay } from '@/utils';
 
 const cssPopperClass = 'app-status__tooltip';

src/components/App/Footer/NoInternetDialog.vue

@@ -22,7 +22,6 @@
 import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
-
 import { getter } from '@/store/decorators';
 
 @Component

src/components/App/Footer/Node/NodeInfo.vue

@@ -62,16 +62,15 @@
 <script lang="ts">
 import { Component, Mixins, Prop } from 'vue-property-decorator';
 
-import { lazyComponent } from '@/router';
+import TranslationMixin from '@/components/mixins/TranslationMixin';
 import { Components, Links } from '@/consts';
+import { lazyComponent } from '@/router';
+import type { Node, NodeItem } from '@/types/nodes';
 import { wsRegexp, dnsPathRegexp, ipv4Regexp } from '@/utils/regexp';
+
 import { NodeModel } from './consts';
 import { formatLocation } from './utils';
 
-import TranslationMixin from '@/components/mixins/TranslationMixin';
-
-import type { Node, NodeItem } from '@/types/nodes';
-
 const checkAddress = (
   translate: TranslationMixin['t']
 ): ((rule: unknown, value: Nullable<string>, callback: (error?: Error) => void) => void) => {

src/components/App/Footer/Node/SelectNode.vue

@@ -48,10 +48,10 @@
 import { Component, Mixins, Prop, ModelSync } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
-import { formatLocation } from './utils';
-
 import type { NodeItem } from '@/types/nodes';
 
+import { formatLocation } from './utils';
+
 @Component
 export default class SelectNode extends Mixins(TranslationMixin) {
   @Prop({ default: () => [], type: Array }) nodes!: Array<NodeItem>;

src/components/App/Footer/SelectNodeDialog.vue

@@ -27,16 +27,16 @@
 </template>
 
 <script lang="ts">
+import { components, mixins, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
 import pick from 'lodash/fp/pick';
 import { Component, Mixins } from 'vue-property-decorator';
-import { components, mixins, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
 
-import { lazyComponent } from '@/router';
+import NodeErrorMixin from '@/components/mixins/NodeErrorMixin';
 import { Components } from '@/consts';
+import { lazyComponent } from '@/router';
+import { getter, state, action } from '@/store/decorators';
 import { Node, NodeItem, ConnectToNodeOptions } from '@/types/nodes';
 import { AppHandledError } from '@/utils/error';
-import { getter, state, action } from '@/store/decorators';
-import NodeErrorMixin from '@/components/mixins/NodeErrorMixin';
 
 import { NodeModel } from './Node/consts';
 

src/components/App/Footer/StatisticsDialog.vue

@@ -30,12 +30,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
 import { components, mixins, WALLET_TYPES } from '@soramitsu/soraneo-wallet-web';
+import { Component, Mixins } from 'vue-property-decorator';
 
-import TranslationMixin from '../../mixins/TranslationMixin';
 import { state } from '@/store/decorators';
 
+import TranslationMixin from '../../mixins/TranslationMixin';
+
 type StatisticsModel = {
   fiat: Nullable<string>;
   chartsAndActivity: Nullable<string>;

src/components/App/Header/AppAccountButton.vue

@@ -16,13 +16,12 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
 import { components, WALLET_TYPES } from '@soramitsu/soraneo-wallet-web';
+import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
-
-import { formatAddress } from '@/utils';
 import { getter } from '@/store/decorators';
+import { formatAddress } from '@/utils';
 
 @Component({
   components: {

src/components/App/Header/AppDisclaimer.vue

@@ -39,9 +39,9 @@
 import { Component, Mixins } from 'vue-property-decorator';
 
 import TranslationMixin from '@/components/mixins/TranslationMixin';
-import { delay } from '@/utils';
-import { mutation, state } from '@/store/decorators';
 import { Links } from '@/consts';
+import { mutation, state } from '@/store/decorators';
+import { delay } from '@/utils';
 
 @Component
 export default class AppDisclaimer extends Mixins(TranslationMixin) {

src/components/App/Header/AppHeader.vue

@@ -30,21 +30,21 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop } from 'vue-property-decorator';
 import { XOR } from '@sora-substrate/util/build/assets/consts';
 import { components, WALLET_CONSTS } from '@soramitsu/soraneo-wallet-web';
-import type Theme from '@soramitsu/soramitsu-js-ui/lib/types/Theme';
+import { Component, Mixins, Prop } from 'vue-property-decorator';
 
 import WalletConnectMixin from '@/components/mixins/WalletConnectMixin';
-
 import PolkaswapLogo from '@/components/shared/Logo/Polkaswap.vue';
+import { PageNames, Components } from '@/consts';
+import { lazyComponent, goTo } from '@/router';
+import { getter, mutation } from '@/store/decorators';
+
 import AppAccountButton from './AppAccountButton.vue';
 import AppHeaderMenu from './AppHeaderMenu.vue';
 import AppLogoButton from './AppLogoButton.vue';
 
-import { lazyComponent, goTo } from '@/router';
-import { PageNames, Components } from '@/consts';
-import { getter, mutation } from '@/store/decorators';
+import type Theme from '@soramitsu/soramitsu-js-ui/lib/types/Theme';
 
 @Component({
   components: {

src/components/App/Header/AppHeaderMenu.vue

@@ -60,9 +60,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
 import Theme from '@soramitsu/soramitsu-js-ui/lib/types/Theme';
 import { switchTheme } from '@soramitsu/soramitsu-js-ui/lib/utils';
+import { Component, Mixins } from 'vue-property-decorator';
 
 import BellIcon from '@/assets/img/browser-notification/bell.svg?inline';
 import TranslationMixin from '@/components/mixins/TranslationMixin';

src/components/App/Header/AppLogoButton.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
 import Theme from '@soramitsu/soramitsu-js-ui/lib/types/Theme';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 
 import PolkaswapLogo from '@/components/shared/Logo/Polkaswap.vue';