refactor(es-linting): forged valid ts+eslint+prettified+stylelint setup

* added correct config files: https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/TYPED_LINTING.md https://github.com/typescript-eslint/typescript-eslint/tree/master/docs/getting-started/linting https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md vuejs/eslint-plugin-vue#811 https://eslint.vuejs.org/user-guide/#faq https://stackoverflow.com/questions/49129296/vue-js-eslint-parsing-error-unexpected-token * some fixes of the src/* files after running eslint
matter-labs · Apr 14, 2021 · 7d8d44d · 7d8d44d
1 parent 4c51359
commit 7d8d44d
Show file tree

Hide file tree

Showing 20 changed files with 103 additions and 92 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,13 +1,20 @@
 module.exports = {
+  extends: ["@nuxtjs/eslint-config-typescript", "plugin:prettier/recommended", "plugin:vue/base", "prettier"],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+    parser: "@typescript-eslint/parser",
+    ecmaVersion: 2018,
+    sourceType: "module",
+    extraFileExtensions: [".vue"],
+  },
   root: true,
   env: {
     node: true,
     browser: true,
   },
-  extends: ["@nuxtjs/eslint-config-typescript", "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
   rules: {
     // enable additional rules
-    indent: ["error", 2],
     "linebreak-style": ["error", "unix"],
     quotes: ["error", "double"],
     camelcase: "off",
@@ -18,16 +25,4 @@ module.exports = {
     "no-console": "off",
     "@typescript-eslint/no-empty-function": ["off"],
   },
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaVersion: 2021,
-    project: ["./tsconfig.json"],
-    tsconfigRootDir: __dirname,
-    sourceType: "module",
-    ecmaFeatures: {
-      jsx: false,
-    },
-
-    extraFileExtensions: ["*.vue", ".*.vue"],
-  },
 };
diff --git a/src/blocks/Balances.vue b/src/blocks/Balances.vue
@@ -112,9 +112,11 @@ export default Vue.extend({
     },
     displayedList(): DisplayToken[] {
       const allTokenPrices = this.$accessor.tokens.getTokenPrices;
-      const returnTokens = <{
-        [symbol: string]: DisplayToken;
-      }>{};
+      const returnTokens = <
+        {
+          [symbol: string]: DisplayToken;
+        }
+      >{};
       this.zkBalances.forEach((token) => {
         returnTokens[token.symbol] = {
           symbol: token.symbol,
@@ -143,9 +145,11 @@ export default Vue.extend({
       this.$accessor.transaction.getForceUpdateTick; // Force to update the list
       const deposits = this.$accessor.transaction.depositList;
       const activeDeposits = <ZkInDeposits>{};
-      const finalDeposits = <{
-        [tokenSymbol: string]: BigNumber;
-      }>{};
+      const finalDeposits = <
+        {
+          [tokenSymbol: string]: BigNumber;
+        }
+      >{};
       for (const tokenSymbol in deposits) {
         activeDeposits[tokenSymbol] = deposits[tokenSymbol].filter((tx) => tx.status === "Initiated");
       }

diff --git a/src/blocks/ChooseContact.vue b/src/blocks/ChooseContact.vue
@@ -188,10 +188,10 @@ export default Vue.extend({
         this.saveContactModalError = "Name can't be empty";
         return;
       }
-      if(this.chosenContact) {
+      if (this.chosenContact) {
         const contact = {
           name: this.saveContactInput,
-        address: (this.chosenContact as ZkInContact).address,
+          address: (this.chosenContact as ZkInContact).address,
         };
         this.$accessor.contacts.saveContact(contact);
         this.chooseContact(contact);

diff --git a/src/blocks/ChooseToken.vue b/src/blocks/ChooseToken.vue
@@ -62,11 +62,11 @@ export default Vue.extend({
     };
   },
   computed: {
-    balances: <ZkInBalance>() => {
+    balances(): ZkInBalance[] {
       return this.tokensType === "L2" ? this.$accessor.wallet.getzkBalances : this.$accessor.wallet.getInitialBalances;
     },
-    displayedList(): Array<ZkInBalance> {
-      let list: Array<ZkInBalance> = utils.searchInArr(this.search, this.balances, (e) => (e as ZkInBalance).symbol) as ZkInBalance[];
+    displayedList(): ZkInBalance[] {
+      let list: ZkInBalance[] = utils.searchInArr(this.search, this.balances, (e) => (e as ZkInBalance).symbol) as ZkInBalance[];
       if (this.onlyAllowed) {
         list = list.filter((e) => !e.restricted);
       }

diff --git a/src/blocks/Header.vue b/src/blocks/Header.vue
@@ -49,9 +49,7 @@
 import logo from "@/blocks/Logo.vue";
 import userImg from "@/components/userImg.vue";
 import accountModal from "@/blocks/modals/AccountModal.vue";
-import {formatters} from "stylelint";
 import Vue from "vue";
-import string = formatters.string;
 
 export default Vue.extend({
   components: {
@@ -60,11 +58,11 @@ export default Vue.extend({
     accountModal,
   },
   computed: {
-    walletName: string () => {
-      return this.$accessor.account.name || '';
+    walletName(): string {
+      return this.$accessor.account.name || "";
     },
     walletAddressFull(): string {
-      return this.$accessor.account.address || '';
+      return this.$accessor.account.address || "";
     },
     accountModal: {
       get(): boolean {

diff --git a/src/blocks/Mint.vue b/src/blocks/Mint.vue
@@ -31,7 +31,7 @@ export default Vue.extend({
     };
   },
   computed: {
-    networkName() {
+    networkName(): string {
       return ETHER_NETWORK_NAME;
     },
   },

diff --git a/src/blocks/Transaction.vue b/src/blocks/Transaction.vue
@@ -190,7 +190,7 @@ import amountInput from "@/components/AmountInput.vue";
 import loadingBlock from "@/components/LoadingBlock.vue";
 import successBlock from "@/components/SuccessBlock.vue";
 import { APP_ZKSYNC_BLOCK_EXPLORER } from "@/plugins/build";
-import { Address, TokenSymbol, TransactionReceipt } from "zksync/build/types";
+import { Address, TransactionReceipt, Transfer } from "zksync/build/types";
 import { Transaction } from "zksync/build/wallet";
 import { closestPackableTransactionAmount } from "zksync";
 
@@ -201,6 +201,7 @@ import { walletData } from "@/plugins/walletData";
 
 import { BigNumber } from "ethers";
 import Vue, { PropOptions } from "vue";
+import { ChangePubKey, CloseAccount, ForcedExit, TxEthSignature, Withdraw } from "zksync/src/types";
 
 export default Vue.extend({
   components: {
@@ -396,8 +397,8 @@ export default Vue.extend({
       this.chosenToken = token;
       this.chooseTokenModal = false;
       this.transactionMode = "normal";
-      const balances = <Array<ZkInBalance>>JSON.parse(JSON.stringify(this.$accessor.wallet.getzkBalances)).sort(
-        (a: ZkInBalance, b: ZkInBalance) => parseFloat(b.balance) - parseFloat(a.balance),
+      const balances = <Array<ZkInBalance>>(
+        JSON.parse(JSON.stringify(this.$accessor.wallet.getzkBalances)).sort((a: ZkInBalance, b: ZkInBalance) => parseFloat(b.balance) - parseFloat(a.balance))
       );
       if (this.chosenToken.restricted) {
         let tokenFound = false;
@@ -497,15 +498,19 @@ export default Vue.extend({
       if (this.feesObj === undefined) {
         throw new Error("Fee fetching error :(");
       }
-      const withdrawTransaction = (await withdraw({
+      const withdrawTransaction:
+        | Array<{ tx?: Transfer | Withdraw | ChangePubKey | CloseAccount | ForcedExit; signature?: TxEthSignature }>[]
+        | Transaction
+        | undefined = await withdraw({
         address: this.inputtedAddress,
         token: (this.chosenToken as ZkInBalance).symbol,
         feeToken: this.feeToken.symbol,
         amount: txAmount.toString(),
         fastWithdraw: this.transactionMode === "fast",
         fees: (this.transactionMode === "fast" ? (this.feesObj as ZkInFeesObj)?.fast : (this.feesObj as ZkInFeesObj)?.normal) as string,
         store: this.$accessor,
-      }));
+      });
+
       let receipt: TransactionReceipt;
       this.transactionInfo.amount!.amount = txAmount.toString();
       this.transactionInfo.amount!.token = this.chosenToken as ZkInBalance;
@@ -519,7 +524,7 @@ export default Vue.extend({
           name: this.chosenContact ? this.chosenContact.name : "",
         };
         this.tip = "Waiting for the transaction to be mined...";
-        receipt = await withdrawTransaction.awaitReceipt();
+        receipt = await withdrawTransaction?.awaitReceipt();
       } else {
         this.transactionInfo.hash = withdrawTransaction[0].txHash;
         this.transactionInfo.explorerLink = APP_ZKSYNC_BLOCK_EXPLORER + "/transactions/" + withdrawTransaction[0].txHash;

diff --git a/src/components/AllowanceInput.vue b/src/components/AllowanceInput.vue
@@ -119,7 +119,7 @@ export default Vue.extend({
       try {
         inputAmount = utils.parseToken(this.token.symbol, val);
       } catch (error) {
-        let errorInfo = `Amount processing error. Common reason behind it — inaccurate amount. Try again paying attention to the decimal amount number format — it should help`;
+        let errorInfo = "Amount processing error. Common reason behind it — inaccurate amount. Try again paying attention to the decimal amount number format — it should help";
         if (error.message && error.message.search("fractional component exceeds decimals") !== -1) {
           errorInfo = `Precision exceeded: ${this.token.symbol} doesn't support that many decimal digits`;
         }
@@ -134,7 +134,7 @@ export default Vue.extend({
 
       if (this.minAmount) {
         if (inputAmount.lt(this.minAmount)) {
-          this.error = `Inputted amount is lower than the minimum amount`;
+          this.error = "Inputted amount is lower than the minimum amount";
           return;
         }
       }
@@ -143,7 +143,9 @@ export default Vue.extend({
     },
     chooseMinAmount() {
       try {
-        if(!this.token){return}
+        if (!this.token) {
+          return;
+        }
         this.inputtedAmount = utils.handleFormatToken(this.token.symbol, this.minAmount);
       } catch (error) {
         console.log("Error choose max amount", error);

diff --git a/src/components/AmountInput.vue b/src/components/AmountInput.vue
@@ -132,7 +132,7 @@ export default Vue.extend({
       try {
         inputAmount = utils.parseToken(this.token.symbol, val);
       } catch (error) {
-        let errorInfo = `Amount processing error. Common reason behind it — inaccurate amount. Try again paying attention to the decimal amount number format — it should help`;
+        let errorInfo = "Amount processing error. Common reason behind it — inaccurate amount. Try again paying attention to the decimal amount number format — it should help";
         if (error.message && error.message.search("fractional component exceeds decimals") !== -1) {
           errorInfo = `Precision exceeded: ${this.token.symbol} doesn't support that many decimal digits`;
         }

diff --git a/src/components/SingleTransaction.vue b/src/components/SingleTransaction.vue
@@ -38,9 +38,8 @@
 import utils from "@/plugins/utils";
 import { APP_ETH_BLOCK_EXPLORER, APP_ZKSYNC_BLOCK_EXPLORER } from "@/plugins/build";
 import { ZkInTx } from "@/plugins/types";
-import { Address } from "zksync/build/types";
+import { Address, TokenSymbol } from "zksync/build/types";
 import { walletData } from "@/plugins/walletData";
-import { TokenSymbol } from "zksync/build/types";
 
 import moment from "moment";
 import Vue, { PropOptions } from "vue";
@@ -68,18 +67,17 @@ export default Vue.extend({
       );
     },
     walletAddressFull(): Address {
-      return this.$accessor.account.address || '';
+      return this.$accessor.account.address || "";
     },
     displayedAddress(): Address {
-      if(this.singleTransaction.tx.type === "Transfer") {
-        if(this.isSameAddress(this.singleTransaction.tx.to || '')) {
+      if (this.singleTransaction.tx.type === "Transfer") {
+        if (this.isSameAddress(this.singleTransaction.tx.to || "")) {
           return this.singleTransaction.tx.from;
         }
-      }
-      else if(this.singleTransaction.tx.priority_op) {
+      } else if (this.singleTransaction.tx.priority_op) {
         return this.singleTransaction.tx.priority_op.to;
       }
-      return this.singleTransaction.tx.to || '';
+      return this.singleTransaction.tx.to || "";
     },
     transactionStatus(): { text: string; icon: string } {
       if (this.singleTransaction.success === false) {
@@ -119,7 +117,8 @@ export default Vue.extend({
             showAddress: false,
             tooltip: {
               icon: "ri-information-fill",
-              html: `Activation is required single-time payment to set the signing key associated with the account.<br>Without it no operation can be authorized by your corresponding account.`,
+              html:
+                "Activation is required single-time payment to set the signing key associated with the account.<br>Without it no operation can be authorized by your corresponding account.",
             },
           };
         case "Deposit":
@@ -161,12 +160,10 @@ export default Vue.extend({
         if (this.singleTransaction.tx.priority_op) {
           return this.singleTransaction.tx.priority_op.token;
         }
-      } else {
-        if (typeof this.singleTransaction.tx.feeToken === "number") {
-          return this.$accessor.tokens.getTokenByID(this.singleTransaction.tx.feeToken)!.symbol
-        } else if (this.singleTransaction.tx.priority_op) {
-          return this.singleTransaction.tx.priority_op.token;
-        }
+      } else if (typeof this.singleTransaction.tx.feeToken === "number") {
+        return this.$accessor.tokens.getTokenByID(this.singleTransaction.tx.feeToken)!.symbol;
+      } else if (this.singleTransaction.tx.priority_op) {
+        return this.singleTransaction.tx.priority_op.token;
       }
       return this.singleTransaction.tx.token!;
     },
@@ -192,10 +189,10 @@ export default Vue.extend({
       return moment(time).fromNow();
     },
     getFormattedAmount({ tx: { type, priority_op, amount, fee } }: ZkInTx): string {
-      if(!this.isFeeTransaction) {
-        return utils.handleFormatToken(this.tokenSymbol, type === "Deposit" && priority_op ? priority_op.amount : amount) || '';
+      if (!this.isFeeTransaction) {
+        return utils.handleFormatToken(this.tokenSymbol, type === "Deposit" && priority_op ? priority_op.amount : amount) || "";
       } else {
-        return utils.handleFormatToken(this.tokenSymbol, fee) || '';
+        return utils.handleFormatToken(this.tokenSymbol, fee) || "";
       }
     },
     getAddressName(address: string): string {

diff --git a/src/components/userImg.vue b/src/components/userImg.vue
@@ -16,11 +16,8 @@ export default Vue.extend({
     } as PropOptions<Address>,
   },
   computed: {
-    walletImg() {
-      if (!this.wallet) {
-        return "";
-      }
-      return blockie(this.wallet);
+    walletImg(): string {
+      return !this.wallet ? "" : blockie(this.wallet);
     },
   },
 });

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -21,6 +21,7 @@ import loggingInLoader from "@/blocks/LoggingInLoader.vue";
 
 import { APP_ZK_SCAN } from "@/plugins/build";
 import Vue from "vue";
+import {Address} from "zksync/src/types";
 
 export default Vue.extend({
   components: {
@@ -29,16 +30,16 @@ export default Vue.extend({
     loggingInLoader,
   },
   computed: {
-    loggingIn:boolean () => {
+    loggingIn(): boolean{
       return this.$accessor.account.loader;
     },
-    loggedIn() {
+    loggedIn(): boolean {
       return this.$accessor.account.loggedIn;
     },
-    walletAddressFull() {
+    walletAddressFull(): Address {
       return this.$accessor.account.address;
     },
-    getZkScanBaseUrl() {
+    getZkScanBaseUrl(): string {
       return APP_ZK_SCAN;
     },
   },

diff --git a/src/pages/_symbol.vue b/src/pages/_symbol.vue
@@ -39,6 +39,7 @@
 import transactions from "@/blocks/Transactions.vue";
 import { ZkInBalance } from "@/plugins/types";
 import Vue from "vue";
+import { TokenSymbol } from "zksync/src/types";
 
 export default Vue.extend({
   components: {
@@ -56,7 +57,7 @@ export default Vue.extend({
     };
   },
   computed: {
-    symbol() {
+    symbol(): TokenSymbol {
       return this.$route.params.symbol.toUpperCase();
     },
   },

diff --git a/src/pages/account/_symbol.vue b/src/pages/account/_symbol.vue
@@ -39,6 +39,7 @@
 import transactions from "@/blocks/Transactions.vue";
 import { ZkInBalance } from "@/plugins/types";
 import Vue from "vue";
+import { TokenSymbol } from "zksync/src/types";
 
 export default Vue.extend({
   components: {
@@ -56,7 +57,7 @@ export default Vue.extend({
     };
   },
   computed: {
-    symbol() {
+    symbol(): TokenSymbol {
       return this.$route.params.symbol.toUpperCase();
     },
   },