Upgrade quasar to the latest version (#884)

* Upgrade to latest Quasar and compilation errors fix. * TokenBalance component refactoring * Jest config fix * Jest package * Deployment on staging check * Pipeline fix * TokenBalance fix * PR comments fix * Sidebar fix * Fixeed on chain data not showing
AstarNetwork · Jul 27, 2023 · ed29cec · ed29cec
1 parent 18e0d77
commit ed29cec
Show file tree

Hide file tree

Showing 13 changed files with 3,934 additions and 3,126 deletions.
diff --git a/.github/workflows/pull-request-preview.yml b/.github/workflows/pull-request-preview.yml
@@ -3,7 +3,7 @@
 
 name: Create Firebase Hosting Preview on PR
 on:
-  pull_request_target:
+  pull_request:
     inputs:
       astar_tag:
         description: 'Release tag version for astar collator'

diff --git a/jest.config.js b/jest.config.js
@@ -6,9 +6,9 @@ module.exports = {
     __DEV__: true,
     // TODO: Remove if resolved natively
     // See https://github.com/vuejs/vue-jest/issues/175
-    'vue-jest': {
-      pug: { doctype: 'html' },
-    },
+    // 'vue-jest': {
+    //   pug: { doctype: 'html' },
+    // },
   },
   // noStackTrace: true,
   // bail: true,
@@ -66,10 +66,10 @@ module.exports = {
     //  (async) .babelrc, .babelrc.js, package.json, babel.config.js
     //  (sync) .babelrc, .babelrc.js, babel.config.js, package.json
     // https://github.com/tleunen/find-babel-config/issues/33
-    '.*\\.vue$': 'vue-jest',
+    // '.*\\.vue$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
   },
   transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
-  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+  // snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
 };
diff --git a/package.json b/package.json
@@ -44,8 +44,8 @@
     "@polkadot/vue-identicon": "^3.5.1",
     "@polkadot/wasm-crypto": "^7.2.1",
     "@polkadot/x-randomvalues": "^12.3.2",
-    "@quasar/app": "^3.2.3",
-    "@quasar/extras": "^1.12.0",
+    "@quasar/app-webpack": "^3.9.2",
+    "@quasar/extras": "^1.16.5",
     "@vue/apollo-composable": "^4.0.0-beta.4",
     "animate.css": "^4.1.1",
     "apr-tools": "^0.1.3",
@@ -61,13 +61,14 @@
     "highcharts": "^10.0.0",
     "highcharts-vue": "^1.4.0",
     "inversify": "^6.0.1",
+    "jest": "^29.6.1",
     "keccak": "^3.0.2",
     "lodash-es": "^4.17.21",
     "luxon": "^2.1.1",
     "marked": "^4.0.15",
     "path": "^0.12.7",
     "polkasafe": "^1.1.10",
-    "quasar": "^2.3.3",
+    "quasar": "^2.12.3",
     "query-string": "^7.1.0",
     "reflect-metadata": "^0.1.13",
     "secp256k1": "^4.0.2",
@@ -77,8 +78,9 @@
     "stream": "^0.0.2",
     "v-odometer": "^2.0.1",
     "validator": "^13.7.0",
-    "vue-i18n": "^9.0.0-beta.0",
+    "vue-i18n": "^9.2.2",
     "vue-js-progress": "^1.0.2",
+    "vue-router": "^4.0.0",
     "vue3-autocounter": "^1.0.6",
     "vue3-click-away": "^1.2.4",
     "vue3-dropzone": "^0.0.7",
@@ -93,9 +95,9 @@
     "@playwright/test": "^1.31.0",
     "@polkadot/ts": "^0.4.22",
     "@quasar/quasar-app-extension-apollo": "^2.0.0-beta.5",
-    "@quasar/quasar-app-extension-qmarkdown": "^2.0.0-alpha.8",
-    "@quasar/quasar-app-extension-testing": "^2.0.1",
-    "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.6",
+    "@quasar/quasar-app-extension-qmarkdown": "^2.0.0-beta.10",
+    "@quasar/quasar-app-extension-testing": "^2.1.0",
+    "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-beta.5",
     "@tailwindcss/custom-forms": "^0.2.1",
     "@tailwindcss/postcss7-compat": "^2.0.3",
     "@types/bn.js": "^5.1.0",

diff --git a/src/apollo/index.ts b/src/apollo/index.ts
@@ -1,6 +1,6 @@
 import type { ApolloClientOptions } from '@apollo/client/core';
 import { createHttpLink, InMemoryCache } from '@apollo/client/core';
-import type { BootFileParams } from '@quasar/app';
+import { BootFileParams } from '@quasar/app-webpack';
 
 export /* async */ function getClientOptions(
   /* {app, router, ...} */ options?: Partial<BootFileParams<any>>

diff --git a/src/boot/i18n.ts b/src/boot/i18n.ts
@@ -9,6 +9,7 @@ const languageCode = localStorage.getItem(LOCAL_STORAGE.SELECTED_LANGUAGE);
 const i18n = createI18n({
   locale: languageCode || 'en-US',
   fallbackLocale: 'en-US',
+  legacy: false,
   messages,
 });
 

diff --git a/src/components/assets/NativeAssetList.vue b/src/components/assets/NativeAssetList.vue
@@ -263,7 +263,7 @@ export default defineComponent({
     const isModalFaucet = ref<boolean>(false);
     const isModalEvmWithdraw = ref<boolean>(false);
     const isModalVesting = ref<boolean>(false);
-    const bal = ref<number | null>(null);
+    const bal = ref<number>(0);
     const balUsd = ref<number | null>(null);
     const vestingTtl = ref<number>(0);
     const lockInDappStaking = ref<number>(0);

diff --git a/src/components/common/Validators.spec.ts b/src/components/common/Validators.spec.ts
@@ -1,4 +1,3 @@
-import { describe, expect, it } from '@jest/globals';
 import { isEmailValid, isUrlValid } from './Validators';
 
 describe('isEmailValid', () => {

diff --git a/src/components/dapp-staking/my-staking/OnChainData.vue b/src/components/dapp-staking/my-staking/OnChainData.vue
@@ -13,7 +13,7 @@
                 :key="index"
                 v-close-popup
                 clickable
-                @click="filterBy = item"
+                @click="changeFilter(item)"
               >
                 <q-item-section>
                   <q-item-label>{{ $t(item) }}</q-item-label>
@@ -232,7 +232,6 @@ export default defineComponent({
 
           return '';
         }
-        return '0';
       } catch (error) {
         return '0';
       }
@@ -317,8 +316,17 @@ export default defineComponent({
       }, 700);
     };
 
+    const changeFilter = (filter: Filter): void => {
+      filterBy.value = filter;
+      page.value = 1;
+      changePage(false);
+    };
+
     watchEffect(setDataArray);
-    watchEffect(handlePageUpdate);
+
+    // The below cause problem with not showing the data (after uplift to a new Quasar version) when accessing the page directly
+    // watchEffect(handlePageUpdate);
+
     watch(
       [currentNetworkName],
       async () => {
@@ -347,6 +355,7 @@ export default defineComponent({
       getBorderStyle,
       Filter,
       goDappPageLink,
+      changeFilter,
     };
   },
 });

diff --git a/src/components/sidenav/SidebarOption.vue b/src/components/sidenav/SidebarOption.vue
@@ -178,7 +178,7 @@ import { computed, defineComponent, ref, reactive } from 'vue';
 import LightDarkMode from '../common/LightDarkMode.vue';
 import { useStore } from 'src/store';
 import { socialUrl, docsUrl } from 'src/links';
-import { languagesSelector } from 'src/i18n';
+import { CultureCode, languagesSelector } from 'src/i18n';
 import { i18n } from 'src/boot/i18n';
 
 export default defineComponent({
@@ -226,8 +226,8 @@ export default defineComponent({
       goLink(docsUrl.topPage);
     };
 
-    const selectLanguage = (code: string) => {
-      i18n.global.locale = code;
+    const selectLanguage = (code: CultureCode) => {
+      i18n.global.locale.value = code;
     };
 
     const closeMobileNavi = () => {

diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -53,3 +53,5 @@ export default {
   kr,
   it,
 };
+
+export type CultureCode = 'it' | 'en-US' | 'ja' | 'fr' | 'pt' | 'kr' | 'zh' | 'zh-TW';
diff --git a/src/router/routes.ts b/src/router/routes.ts
@@ -133,7 +133,6 @@ const routes: RouteRecordRaw[] = [
   // but you can also remove it
   {
     path: '/:catchAll(.*)*',
-    redirect: '/',
     component: () => import('pages/Error404.vue'),
   },
 ];

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@quasar/app/tsconfig-preset",
+  "extends": "@quasar/app-webpack/tsconfig-preset",
   "compilerOptions": {
     "baseUrl": ".",
     "esModuleInterop": true,
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,3 +53,5 @@ export default { @@
       kr,
       it,
     };
+    export type CultureCode = 'it' | 'en-US' | 'ja' | 'fr' | 'pt' | 'kr' | 'zh' | 'zh-TW';