From 58f64309ee44d8d765e3da411fadce3e3730afea Mon Sep 17 00:00:00 2001 From: Francisco Ramos Date: Fri, 24 Mar 2023 15:43:36 +0100 Subject: [PATCH] chore(bridge-ui): add eslint to the pipeline (#13444) --- .github/workflows/bridge-ui.yml | 14 ++- packages/bridge-ui/.eslintignore | 7 ++ packages/bridge-ui/.eslintrc.cjs | 94 +++++++++++++++++++ packages/bridge-ui/.lintstagedrc | 6 ++ packages/bridge-ui/.prettierignore | 4 + packages/bridge-ui/package.json | 9 +- packages/bridge-ui/src/App.svelte | 11 ++- .../src/components/Transaction.svelte | 2 +- .../src/components/buttons/Connect.svelte | 25 +++-- .../src/components/buttons/SelectToken.svelte | 15 +-- .../src/components/form/BridgeForm.svelte | 16 ++-- .../src/components/modals/FaucetModal.svelte | 4 +- packages/bridge-ui/src/domain/token.ts | 2 +- .../src/storage/CustomTokenService.ts | 2 +- .../src/storage/StorageService.spec.ts | 2 +- .../src/utils/recommendProcessingFee.spec.ts | 2 +- .../src/utils/switchEthereumChain.ts | 32 +++---- packages/bridge-ui/tsconfig.json | 8 +- pnpm-lock.yaml | 11 ++- 19 files changed, 197 insertions(+), 69 deletions(-) create mode 100644 packages/bridge-ui/.eslintignore create mode 100644 packages/bridge-ui/.eslintrc.cjs create mode 100644 packages/bridge-ui/.lintstagedrc diff --git a/.github/workflows/bridge-ui.yml b/.github/workflows/bridge-ui.yml index 4ea3c9d400..b8d254876a 100644 --- 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 new file mode 100644 index 0000000000..767d5d2689 --- /dev/null +++ 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 new file mode 100644 index 0000000000..79c8c7aac4 --- /dev/null +++ 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 new file mode 100644 index 0000000000..23019c250e --- /dev/null +++ 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 index 767d5d2689..e52ee7f9a1 100644 --- 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 index 7062811f62..7f605c1414 100644 --- 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 index d4c31e3c46..456d7eb91d 100644 --- 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(async (resolve) => { - await $signer.provider.waitForTransaction(tx.hash, 1); - resolve(index); + return new Promise((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 index 4b38047802..e59c47302a 100644 --- 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 index 72bcb6a18e..18f25f03e9 100644 --- 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 index 9d672d1b1b..c212c766f2 100644 --- 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}
  • -