feat: Store transaction page/cursor in url of accounts page

.eslintrc.js → eslint.config.js

@@ -1,28 +1,28 @@
 module.exports = {
-  root: true,
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    ecmaVersion: 2020,
-    extraFileExtensions: ['.vue'],
-    ecmaFeatures: {
-      jsx: false,
-    },
-  },
-  globals: {
-    defineProps: 'readonly',
-    defineEmits: 'readonly',
-    defineExpose: 'readonly',
-    withDefaults: 'readonly',
-  },
-  extends: [
-    'standard',
-    'plugin:vue/base',
-    'plugin:vue/vue3-recommended',
-    'plugin:import/recommended',
-    'eslint:recommended',
-    '@nuxtjs/eslint-config-typescript',
-  ],
-  plugins: ['prettier'],
+  files: ["src/*.ts", "src/*.js", "src/*.vue"],
+  // parser: 'vue-eslint-parser',
+  // parserOptions: {
+  //   ecmaVersion: 2020,
+  //   extraFileExtensions: ['.vue'],
+  //   ecmaFeatures: {
+  //     jsx: false,
+  //   },
+  // },
+  // globals: {
+  //   defineProps: 'readonly',
+  //   defineEmits: 'readonly',
+  //   defineExpose: 'readonly',
+  //   withDefaults: 'readonly',
+  // },
+  // extends: [
+  //   'standard',
+  //   'plugin:vue/base',
+  //   'plugin:vue/vue3-recommended',
+  //   'plugin:import/recommended',
+  //   'eslint:recommended',
+  //   '@nuxtjs/eslint-config-typescript',
+  // ],
+  // plugins: ['prettier'],
   rules: {
     'no-console': 'off',
     quotes: ['error', 'single'],
@@ -64,14 +64,14 @@ module.exports = {
     }],
     'vue/max-attributes-per-line': ['error', {
       singleline: 1,
-      multiline: { max: 1 },
+      multiline: {max: 1},
     }],
     'vue/require-v-for-key': 'error',
     'vue/no-v-html': 0,
     semi: ['error', 'never'],
     camelcase: ['error', {
       properties: 'never',
     }],
-    'max-len': ['error', { code: 120, ignoreUrls: true, ignoreStrings: true, ignoreTemplateLiterals: true }],
+    'max-len': ['error', {code: 120, ignoreUrls: true, ignoreStrings: true, ignoreTemplateLiterals: true}],
   },
 }

nuxt.config.ts

@@ -1,113 +1,113 @@
 import fs from 'fs/promises'
-import { compileTemplate } from 'vue/compiler-sfc'
-import { sentryVitePlugin } from '@sentry/vite-plugin'
+import {compileTemplate} from 'vue/compiler-sfc'
+import {sentryVitePlugin} from '@sentry/vite-plugin'
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  srcDir: './src',
-  css: ['@/assets/styles/main.css'],
-  devServer: {
-    port: 8080,
-  },
-  nitro: {
-    routeRules: {
-      '/proxy/nodes': { proxy: 'http://138.68.22.27:3113/v2/debug/network', cors: true },
-      '/proxy/gate': { proxy: 'https://api.gateio.ws/api/v4/spot/tickers?currency_pair=AE_USDT', cors: true },
-      '/proxy/mexc': { proxy: 'https://api.mexc.com/api/v3/ticker/24hr?symbol=AEUSDT', cors: true },
-      '/proxy/coinw': { proxy: 'https://api.coinw.com/api/v1/public?command=returnTicker', cors: true },
+    srcDir: './src',
+    css: ['@/assets/styles/main.css'],
+    devServer: {
+        port: 8080,
     },
-  },
-  modules: [
-    '@pinia/nuxt',
-    '@nuxtjs/plausible',
-    'nuxt-monaco-editor',
-    'nuxt-booster',
-  ],
-  imports: {
-    dirs: ['./stores'],
-  },
-  plausible: {
-    apiHost: 'https://plausible.dev.service.aepps.com',
-    trackLocalhost: false,
-  },
-  appConfig: {
-    APP_VERSION: process.env.APP_VERSION,
-  },
-  runtimeConfig: {
-    public: {
-      SENTRY_AUTH_TOKEN: undefined,
-      SENTRY_DSN: undefined,
-      APP_DOMAIN: undefined,
-      MIDDLEWARE_URL: undefined,
-      NODE_URL: undefined,
-      WEBSOCKET_URL: undefined,
-      DEX_BACKEND_URL: undefined,
-      NETWORK_NAME: undefined,
-      ALTERNATIVE_NETWORK_URL: undefined,
-      ALTERNATIVE_NETWORK_NAME: undefined,
-      AE_TOKEN_ID: undefined,
-      DEBUG_MODE: undefined,
-      CONTRACT_VERIFICATION_SERVICE_URL: undefined,
-      SH_DEX_CONTRACTS: undefined,
+    nitro: {
+        routeRules: {
+            '/proxy/nodes': {proxy: 'http://138.68.22.27:3113/v2/debug/network', cors: true},
+            '/proxy/gate': {proxy: 'https://api.gateio.ws/api/v4/spot/tickers?currency_pair=AE_USDT', cors: true},
+            '/proxy/mexc': {proxy: 'https://api.mexc.com/api/v3/ticker/24hr?symbol=AEUSDT', cors: true},
+            '/proxy/coinw': {proxy: 'https://api.coinw.com/api/v1/public?command=returnTicker', cors: true},
+        },
+    },
+    modules: [
+        '@pinia/nuxt',
+        '@nuxtjs/plausible',
+        'nuxt-monaco-editor',
+        'nuxt-booster',
+    ],
+    imports: {
+        dirs: ['./stores'],
     },
-  },
-  postcss: {
-    plugins: {
-      autoprefixer: {},
-      '@csstools/postcss-global-data': {
-        files: ['src/assets/styles/settings/_variables.css'],
-      },
-      'postcss-custom-media': {},
-      'postcss-import': {},
-      'postcss-nested': {},
+    plausible: {
+        apiHost: 'https://plausible.dev.service.aepps.com',
+        trackLocalhost: false,
     },
-  },
-  sourcemap: true,
-  vite: {
-    build: { target: 'es2020' },
-    optimizeDeps: {
-      esbuildOptions: { target: 'es2020' },
+    appConfig: {
+        APP_VERSION: process.env.APP_VERSION,
+    },
+    runtimeConfig: {
+        public: {
+            SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
+            SENTRY_DSN: process.env.SENTRY_DSN,
+            APP_DOMAIN: process.env.APP_DOMAIN,
+            MIDDLEWARE_URL: process.env.MIDDLEWARE_URL,
+            NODE_URL: process.env.NODE_URL,
+            WEBSOCKET_URL: process.env.WEBSOCKET_URL,
+            DEX_BACKEND_URL: process.env.DEX_BACKEND_URL,
+            NETWORK_NAME: process.env.NETWORK_NAME,
+            ALTERNATIVE_NETWORK_URL: process.env.ALTERNATIVE_NETWORK_URL,
+            ALTERNATIVE_NETWORK_NAME: process.env.ALTERNATIVE_NETWORK_NAME,
+            AE_TOKEN_ID: process.env.AE_TOKEN_ID,
+            DEBUG_MODE: process.env.DEBUG_MODE,
+            CONTRACT_VERIFICATION_SERVICE_URL: process.env.CONTRACT_VERIFICATION_SERVICE_URL,
+            SH_DEX_CONTRACTS: process.env.SH_DEX_CONTRACTS?.split(';'),
+        },
     },
-    define: {
-      __VUE_PROD_DEVTOOLS__: process.env.MODE !== 'production',
+    postcss: {
+        plugins: {
+            autoprefixer: {},
+            '@csstools/postcss-global-data': {
+                files: ['src/assets/styles/settings/_variables.css'],
+            },
+            'postcss-custom-media': {},
+            'postcss-import': {},
+            'postcss-nested': {},
+        },
     },
-    plugins: [
-      {
-        name: 'icon-svg-loader',
-        enforce: 'pre',
-        async load(path) {
-          if (!path.match(/icons\/.*.svg$/)) {
-            return
-          }
+    sourcemap: true,
+    vite: {
+        build: {target: 'es2020'},
+        optimizeDeps: {
+            esbuildOptions: {target: 'es2020'},
+        },
+        define: {
+            __VUE_PROD_DEVTOOLS__: process.env.MODE !== 'production',
+        },
+        plugins: [
+            {
+                name: 'icon-svg-loader',
+                enforce: 'pre',
+                async load(path) {
+                    if (!path.match(/icons\/.*.svg$/)) {
+                        return
+                    }
 
-          const { code } = compileTemplate({
-            id: JSON.stringify(path),
-            filename: path,
-            source: await fs.readFile(path, 'utf-8'),
-            transformAssetUrls: false,
-          })
+                    const {code} = compileTemplate({
+                        id: JSON.stringify(path),
+                        filename: path,
+                        source: await fs.readFile(path, 'utf-8'),
+                        transformAssetUrls: false,
+                    })
 
-          return `${code}\nexport default { render: render }`
+                    return `${code}\nexport default { render: render }`
+                },
+            },
+            sentryVitePlugin({
+                authToken: process.env.SENTRY_AUTH_TOKEN,
+                org: 'sentry',
+                project: 'aescan-develop',
+                url: 'https://sentry.dev.service.aepps.com/',
+            }),
+            sentryVitePlugin({
+                authToken: process.env.SENTRY_AUTH_TOKEN,
+                org: 'sentry',
+                project: 'aescan-production',
+                url: 'https://sentry.dev.service.aepps.com/',
+            }),
+        ],
+    },
+    monacoEditor: {
+        locale: 'en',
+        componentName: {
+            codeEditor: 'MonacoEditor',
         },
-      },
-      sentryVitePlugin({
-        authToken: process.env.SENTRY_AUTH_TOKEN,
-        org: 'sentry',
-        project: 'aescan-develop',
-        url: 'https://sentry.dev.service.aepps.com/',
-      }),
-      sentryVitePlugin({
-        authToken: process.env.SENTRY_AUTH_TOKEN,
-        org: 'sentry',
-        project: 'aescan-production',
-        url: 'https://sentry.dev.service.aepps.com/',
-      }),
-    ],
-  },
-  monacoEditor: {
-    locale: 'en',
-    componentName: {
-      codeEditor: 'MonacoEditor',
     },
-  },
 })

package.json

@@ -21,7 +21,7 @@
     "lint": "yarn lint:js && yarn lint:style",
     "lint:ci": "yarn lint:js --max-warnings=0 && yarn lint:style --mw 0",
     "lint:fix": "yarn lint:js --fix && yarn lint:style --fix",
-    "lint:js": "eslint --ext .ts,.js,.vue src",
+    "lint:js": "eslint",
     "lint:style": "stylelint \"./src/**/*.vue\" \"src/**/*.css\"",
     "reinstall": "rm -rf node_modules/ && yarn cache clean && yarn install",
     "reset": "yarn reinstall && yarn dev",

src/components/TransactionsPanel.vue

@@ -22,25 +22,20 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useRoute, useRouter } from 'nuxt/app'
 import { useTransactionsStore } from '@/stores/transactions'
 import { TX_TYPES_OPTIONS } from '@/utils/constants'
 import { isDesktop } from '@/utils/screen'
 
 const transactionsStore = useTransactionsStore()
-const {
-  transactions,
-  transactionsCount,
-} = storeToRefs(transactionsStore)
-const { fetchTransactions, fetchTransactionsCount } = transactionsStore
+const { transactions, transactionsCount, isHydrated, pageIndex, selectedTxType } = storeToRefs(transactionsStore)
+const { fetchTransactions, fetchTransactionsCount, setPageIndex, setSelectedTxType } = transactionsStore
 const route = useRoute()
 const { push } = useRouter()
 
-const selectedTxType = ref(TX_TYPES_OPTIONS[0])
 const limit = computed(() => process.client && isDesktop() ? 10 : 3)
-const pageIndex = ref(1)
 
 async function loadPrevTransactions() {
   await fetchTransactions(transactions.value.prev)
@@ -53,22 +48,25 @@ async function loadNextTransactions() {
 async function loadTransactions() {
   const { txType } = route.query
   const txTypeOption = TX_TYPES_OPTIONS.find(option => option.typeQuery === txType)
-  selectedTxType.value = txTypeOption || TX_TYPES_OPTIONS[0]
+  setSelectedTxType(txTypeOption || TX_TYPES_OPTIONS[0])
   await fetchTransactions(`/v3/transactions?limit=${limit.value}${selectedTxType.value.typeQuery ? '&type=' + selectedTxType.value.typeQuery : ''}`)
   await fetchTransactionsCount(selectedTxType.value.typeQuery)
-  pageIndex.value = 1
+  setPageIndex(1)
 }
 
 if (process.client) {
   watch(() => route.fullPath, () => {
     loadTransactions()
   })
+
   watch(selectedTxType, () => {
     const typeQuery = selectedTxType.value?.typeQuery
     const slug = `${typeQuery ? '?txType=' + typeQuery : ''}`
     push(`/transactions${slug}`)
   })
 
-  loadTransactions()
+  if (!isHydrated?.value) {
+    loadTransactions()
+  }
 }
 </script>