chore(bridge-ui): add eslint to the pipeline (#13444)

taikoxyz · Mar 24, 2023 · 58f6430 · 58f6430
1 parent 81ba617
commit 58f6430
Show file tree

Hide file tree

Showing 19 changed files with 197 additions and 69 deletions.
diff --git a/.github/workflows/bridge-ui.yml b/.github/workflows/bridge-ui.yml
@@ -13,7 +13,7 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - name: Cancel Previous Runs
+      - name: Cancel previous runs
         uses: styfle/cancel-workflow-action@0.11.0
         with:
           access_token: ${{ github.token }}
@@ -24,11 +24,19 @@ jobs:
       - name: Install pnpm dependencies
         uses: ./.github/actions/install-pnpm-dependencies
 
-      - name: Bridge UI - Unit Tests
+      - name: Svelte check
+        working-directory: ./packages/bridge-ui
+        run: pnpm svelte:check
+
+      - name: Linting
+        working-directory: ./packages/bridge-ui
+        run: pnpm lint
+
+      - name: Unit tests
         working-directory: ./packages/bridge-ui
         run: pnpm test
 
-      - name: Bridge UI - Upload coverage to Codecov
+      - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v3
         with:
           directory: ./packages/bridge-ui/coverage

diff --git a/packages/bridge-ui/.eslintignore b/packages/bridge-ui/.eslintignore
@@ -0,0 +1,7 @@
+dist
+build
+coverage
+node_modules
+example
+LICENSES
+public
diff --git a/packages/bridge-ui/.eslintrc.cjs b/packages/bridge-ui/.eslintrc.cjs
@@ -0,0 +1,94 @@
+module.exports = {
+  env: {
+    node: true,
+    browser: true,
+    es2021: true,
+    webextensions: true,
+  },
+  extends: ['eslint:recommended'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    extraFileExtensions: ['.svelte'],
+  },
+  plugins: ['svelte3', '@typescript-eslint' /*, 'simple-import-sort'*/],
+  rules: {
+    'linebreak-style': ['error', 'unix'],
+    // 'simple-import-sort/imports': 'error',
+    // 'simple-import-sort/exports': 'error',
+    semi: ['error', 'always'],
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+  },
+  ignorePatterns: ['node_modules'], // todo: lets lint that separately, or move it to its own package
+  settings: {
+    'svelte3/typescript': require('typescript'),
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.svelte'],
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended-requiring-type-checking',
+      ],
+      parserOptions: {
+        project: ['./tsconfig.json'],
+        tsconfigRootDir: __dirname,
+      },
+      rules: {
+        '@typescript-eslint/no-inferrable-types': 'off',
+        '@typescript-eslint/unbound-method': 'off',
+        '@typescript-eslint/no-empty-interface': 'off',
+
+        // TODO: fix all these errors and turn back on these rules
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+        '@typescript-eslint/no-unsafe-return': 'off',
+        '@typescript-eslint/no-unsafe-argument': 'off',
+        '@typescript-eslint/restrict-template-expressions': 'off',
+        '@typescript-eslint/no-misused-promises': 'off',
+        '@typescript-eslint/no-floating-promises': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+      },
+    },
+    {
+      files: ['*.svelte'],
+      processor: 'svelte3/svelte3',
+      // typescript and svelte dont work with template handlers yet.
+      // https://stackoverflow.com/questions/63337868/svelte-typescript-unexpected-tokensvelteparse-error-when-adding-type-to-an-ev
+      // we need these 3 rules to be able to do:
+      // on:change=(e) => anyFunctionHere().
+      // when svelte is updated, we can remove these 5 rules for svelte files.
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-implicit-any': 'off',
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-argument': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/restrict-template-expressions': [
+          'warn',
+          {
+            allowNumber: true,
+            allowBoolean: true,
+            allowNullish: true,
+            allowAny: true,
+          },
+        ],
+      },
+    },
+    {
+      files: ['*.spec.ts'],
+      plugins: ['jest'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+        '@typescript-eslint/unbound-method': 'off',
+        'jest/unbound-method': 'error',
+      },
+    },
+  ],
+};
diff --git a/packages/bridge-ui/.lintstagedrc b/packages/bridge-ui/.lintstagedrc
@@ -0,0 +1,6 @@
+{
+  "**/*.{js,ts,svelte}": [
+    "pnpm prettier:write",
+    "pnpm lint:fix"
+  ]
+}
diff --git a/packages/bridge-ui/.prettierignore b/packages/bridge-ui/.prettierignore
@@ -5,3 +5,7 @@ node_modules
 example
 LICENSES
 public
+.gitignore
+.eslintignore
+.lintstagedrc
+.prettierignore
diff --git a/packages/bridge-ui/package.json b/packages/bridge-ui/package.json
@@ -8,12 +8,11 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "svelte:check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "pnpm exec jest",
     "prettier": "pnpm exec prettier '**/*.{js,ts,svelte}'",
     "prettier:write": "pnpm run prettier '**/*.{js,ts,svelte}' --write",
-    "prettier:check": "pnpm run prettier '**/*.{js,ts,svelte}' --write",
-    "svelte:check": "npx svelte-check --ignore test-app",
+    "prettier:check": "pnpm run prettier '**/*.{js,ts,svelte}' --check",
     "lint": "pnpm exec eslint './**/*.{js,ts,svelte}' --ignore-path .eslintignore",
     "lint:fix": "pnpm exec eslint --fix './**/*.{js,ts,svelte}' --ignore-path .eslintignore",
     "lint-staged": "lint-staged --allow-empty"
@@ -35,6 +34,7 @@
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "daisyui": "1.16.6",
     "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "jest": "^27.5.1",
     "lint-staged": "^12.3.4",
@@ -75,8 +75,5 @@
     "identicon.js": "^2.3.3",
     "svelte-i18n": "^3.5.1",
     "svelte-spa-router": "^3.2.0"
-  },
-  "lint-staged": {
-    "**/*": "pnpm prettier:write"
   }
 }
diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
@@ -122,7 +122,7 @@
 
       transactions.set([...updatedStorageTxs, ...apiTxs]);
 
-      const tokens = await $tokenService.GetTokens(userAddress);
+      const tokens = $tokenService.GetTokens(userAddress);
       userTokens.set(tokens);
     }
   });
@@ -131,9 +131,10 @@
     (async () => {
       const confirmedPendingTxIndex = await Promise.race(
         store.map((tx, index) => {
-          return new Promise<number>(async (resolve) => {
-            await $signer.provider.waitForTransaction(tx.hash, 1);
-            resolve(index);
+          return new Promise<number>((resolve) => {
+            $signer.provider
+              .waitForTransaction(tx.hash, 1)
+              .then(() => resolve(index));
           });
         }),
       );
@@ -148,7 +149,7 @@
 
   transactions.subscribe((store) => {
     if (store) {
-      store.forEach(async (tx) => {
+      store.forEach((tx) => {
         const txInterval = transactionToIntervalMap.get(tx.hash);
         if (txInterval) {
           clearInterval(txInterval);

diff --git a/packages/bridge-ui/src/components/Transaction.svelte b/packages/bridge-ui/src/components/Transaction.svelte
@@ -141,7 +141,7 @@
 
       successToast($_('toast.transactionSent'));
     } catch (e) {
-      console.log(e);
+      console.error(e);
       errorToast($_('toast.errorSendingTransaction'));
     } finally {
       loading = false;

diff --git a/packages/bridge-ui/src/components/buttons/Connect.svelte b/packages/bridge-ui/src/components/buttons/Connect.svelte
@@ -26,7 +26,7 @@
 
   export let isConnectWalletModalOpen = false;
 
-  const changeChain = async (chainId: number) => {
+  const changeChain = (chainId: number) => {
     if (chainId === taikoChain.id) {
       fromChain.set(taikoChain);
       toChain.set(mainnetChain);
@@ -47,13 +47,24 @@
   async function onConnect() {
     const { chain } = getNetwork();
     await setSigner();
-    await changeChain(chain.id);
-    watchNetwork(async (network) => await changeChain(network.chain.id));
+
+    changeChain(chain.id);
+
+    watchNetwork((network) => {
+      if (network.chain?.id) {
+        changeChain(network.chain.id);
+      }
+    });
+
     watchAccount(async () => {
-      const s = await setSigner();
-      transactions.set(
-        await $transactioner.GetAllByAddress(await s.getAddress()),
-      );
+      const wagmiSigner = await setSigner();
+      if (wagmiSigner) {
+        const signerAddress = await wagmiSigner.getAddress();
+        const signerTransactions = await $transactioner.GetAllByAddress(
+          signerAddress,
+        );
+        transactions.set(signerTransactions);
+      }
     });
   }
 

diff --git a/packages/bridge-ui/src/components/buttons/SelectToken.svelte b/packages/bridge-ui/src/components/buttons/SelectToken.svelte
@@ -19,7 +19,7 @@
   let showAddressField = false;
   let loading = false;
 
-  async function select(t: Token) {
+  function select(t: Token) {
     if (t === $token) return;
 
     token.set(t);
@@ -84,10 +84,7 @@
         logoComponent: null,
       } as Token;
 
-      const updateTokensList = await $tokenService.StoreToken(
-        token,
-        userAddress,
-      );
+      const updateTokensList = $tokenService.StoreToken(token, userAddress);
 
       select(token);
 
@@ -126,9 +123,7 @@
     class="token-dropdown dropdown-content menu my-2 shadow-xl bg-dark-2 rounded-box p-2">
     {#each tokens as t}
       <li class="cursor-pointer w-full hover:bg-dark-5 rounded-none">
-        <button
-          on:click={async () => await select(t)}
-          class="flex hover:bg-dark-5 p-4">
+        <button on:click={() => select(t)} class="flex hover:bg-dark-5 p-4">
           <svelte:component this={t.logoComponent} height={22} width={22} />
           <span class="text-sm font-medium bg-transparent px-2"
             >{t.symbol.toUpperCase()}</span>
@@ -137,9 +132,7 @@
     {/each}
     {#each $userTokens as t}
       <li class="cursor-pointer w-full hover:bg-dark-5">
-        <button
-          on:click={async () => await select(t)}
-          class="flex hover:bg-dark-5 p-4">
+        <button on:click={() => select(t)} class="flex hover:bg-dark-5 p-4">
           <Erc20 height={22} width={22} />
           <span class="text-sm font-medium bg-transparent px-2"
             >{t.symbol.toUpperCase()}</span>

diff --git a/packages/bridge-ui/src/components/form/BridgeForm.svelte b/packages/bridge-ui/src/components/form/BridgeForm.svelte
@@ -122,7 +122,7 @@
     return allowance;
   }
 
-  async function isBtnDisabled(
+  function isBtnDisabled(
     signer: Signer,
     amount: string,
     token: Token,
@@ -176,7 +176,7 @@
 
       requiresAllowance = false;
     } catch (e) {
-      console.log(e);
+      console.error(e);
       errorToast($_('toast.errorSendingTransaction'));
     } finally {
       loading = false;
@@ -298,7 +298,7 @@
       await $signer.provider.waitForTransaction(tx.hash, 1);
       memo = '';
     } catch (e) {
-      console.log(e);
+      console.error(e);
       errorToast($_('toast.errorSendingTransaction'));
     } finally {
       loading = false;
@@ -331,7 +331,7 @@
         amount = ethers.utils.formatEther(balanceAvailableForTx);
         amountInput.value = ethers.utils.formatEther(balanceAvailableForTx);
       } catch (error) {
-        console.log(error);
+        console.error(error);
 
         // In case of error default to using the full amount of ETH available.
         // The user would still not be able to make the restriction and will have to manually set the amount.
@@ -364,20 +364,18 @@
 
   $: getUserBalance($signer, $token, $fromChain);
 
-  $: isBtnDisabled(
+  $: btnDisabled = isBtnDisabled(
     $signer,
     amount,
     $token,
     tokenBalance,
     requiresAllowance,
     memoError,
-  )
-    .then((d) => (btnDisabled = d))
-    .catch((e) => console.log(e));
+  );
 
   $: checkAllowance(amount, $token, $bridgeType, $fromChain, $signer)
     .then((a) => (requiresAllowance = a))
-    .catch((e) => console.log(e));
+    .catch((e) => console.error(e));
 
   // TODO: we need to simplify this crazy condition
   $: showFaucet =

diff --git a/packages/bridge-ui/src/components/modals/FaucetModal.svelte b/packages/bridge-ui/src/components/modals/FaucetModal.svelte
@@ -84,7 +84,7 @@
 
       await onMint();
     } catch (e) {
-      console.log(e);
+      console.error(e);
       errorToast($_('toast.errorSendingTransaction'));
     }
   }
@@ -97,7 +97,7 @@
     ? import.meta.env.VITE_TAIKO_CHAIN_NAME
     : 'Taiko A2';
 
-  onMount(async () => {
+  onMount(() => {
     shouldEnableButton();
   });
 </script>

diff --git a/packages/bridge-ui/src/domain/token.ts b/packages/bridge-ui/src/domain/token.ts
@@ -22,7 +22,7 @@ export type TokenDetails = {
 };
 
 export interface TokenService {
-  StoreToken(token: Token, address: string): Promise<Token[]>;
+  StoreToken(token: Token, address: string): Token[];
   GetTokens(address: string): Token[];
   RemoveToken(token: Token, address: string): Token[];
 }