Moves from vuex to pinia

.eslintrc.js

@@ -46,6 +46,7 @@ module.exports = {
         // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-file
         // required to lint *.vue files
         'vue',
+        'unused-imports',
     ],
 
     globals: {
@@ -145,5 +146,16 @@ module.exports = {
         'vue/component-options-name-casing': ['error', 'PascalCase'],
         'vue/component-definition-name-casing': ['error', 'PascalCase'],
         'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+        'no-unused-vars': 'off',
+        'unused-imports/no-unused-imports': 'error',
+        'unused-imports/no-unused-vars': [
+            'warn',
+            {
+                'vars': 'all',
+                'varsIgnorePattern': '^_',
+                'args': 'after-used',
+                'argsIgnorePattern': '^_'
+            }
+        ],
     }
 }

package.json

@@ -24,18 +24,18 @@
     "highcharts-vue": "^1.4.0",
     "moment": "^2.29.4",
     "ol": "^6.14.1",
+    "pinia": "^2.1.6",
     "quasar": "^2.6.2",
     "ual-anchor": "1.3.0",
     "universal-authenticator-library": "^0.3.0",
-    "vue": "^3.0.0",
-    "vue-class-component": "^7.2.6",
+    "vue": "^3.3.0",
     "vue-json-viewer": "^3.0.4",
     "vue-router": "^4.0.0",
-    "vue3-openlayers": "^0.1.63",
-    "vuex": "^4.0.1"
+    "vue3-openlayers": "^0.1.63"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",
+    "@pinia/testing": "^0.1.3",
     "@quasar/app-webpack": "^3.5.3",
     "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.10",
     "@types/jest": "^27.4.0",
@@ -45,6 +45,7 @@
     "dotenv": "^14.3.0",
     "eslint": "^7.14.0",
     "eslint-plugin-jest": "^25.2.2",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "eslint-plugin-vue": "^9.0.0",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "vue-property-decorator": "^9.1.2"

quasar.conf.js

@@ -30,7 +30,7 @@ module.exports = configure(function (ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://quasar.dev/quasar-cli/boot-files
-    boot: ['config', 'axios', 'fathom', 'api', 'ual', 'fuel'],
+    boot: ['config', 'fathom', 'api', 'ual', 'fuel'],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: ['app.sass'],

src/api/hyperion.ts

@@ -38,15 +38,6 @@ const name = chain.getName();
 const url =
   `https://raw.githubusercontent.com/telosnetwork/token-list/main/tokens.${name}.json`;
 
-const tokenListPromise = fetch(url)
-    .then(response => response.text())
-    .then((fileContent: string) => JSON.parse(fileContent) as { account: string }[])
-    .then(originals => originals.map(token => token as unknown as Token))
-    .catch((error) => {
-        console.error(error);
-        return [];
-    });
-
 const MAX_REQUESTS_COUNT = 5;
 const INTERVAL_MS = 10;
 let PENDING_REQUESTS = 0;
@@ -97,23 +88,30 @@ export const getCreator = async function (address: string): Promise<AccountCreat
 };
 
 export const getTokens = async function (address?: string): Promise<Token[]> {
-    if (address) {
-        const response = await hyperion.get('v2/state/get_tokens', {
-            params: { account: address },
-        });
-        const tokens = await tokenListPromise;
-        const balances = (response.data as {tokens:Token[]}).tokens;
-        return balances.map((token:Token) => {
-            const tk = tokens.find((t:Token) => t.symbol === token.symbol) as Token;
-            if (tk && tk.logo) {
-                token.logo = tk?.logo;
-            } else {
-                token.logo = DEFAULT_ICON;
-            }
-            return token;
-        });
-    } else {
-        return await tokenListPromise;
+    try {
+        const tokens = await axios.get(url).then(response => response.data as Token[]);
+
+        if (address) {
+            const response = await hyperion.get('v2/state/get_tokens', {
+                params: { account: address },
+            });
+
+            const balances = (response.data as {tokens:Token[]}).tokens;
+            // return tokens;
+            return balances.map((token:Token) => {
+                const tk = tokens.find((t:Token) => t.symbol === token.symbol);
+                if (tk && tk.logo) {
+                    token.logo = tk?.logo;
+                } else {
+                    token.logo = DEFAULT_ICON;
+                }
+                return token;
+            });
+        } else {
+            return tokens;
+        }
+    } catch(e) {
+        console.error(e);
     }
 };
 

src/boot/api.ts

@@ -2,7 +2,7 @@ import { boot } from 'quasar/wrappers';
 import { ApiClient } from 'src/types/Api';
 import { api } from 'src/api';
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   interface ComponentCustomProperties {
     $api: ApiClient;
   }

src/components/AccountCard.vue

@@ -1,14 +1,12 @@
 <script lang="ts">
 import { Token, GetTableRowsParams, RexbalRows, RexPoolRows } from 'src/types';
 import { defineComponent, computed, ref, onMounted, watch } from 'vue';
-import { useAntelopeStore } from 'src/store/antelope.store';
 import PercentCircle from 'src/components/PercentCircle.vue';
 import SendDialog from 'src/components/SendDialog.vue';
 import ResourcesDialog from 'src/components/resources/ResourcesDialog.vue';
 import StakingDialog from 'src/components/staking/StakingDialog.vue';
 import DateField from 'src/components/DateField.vue';
-import { date, useQuasar } from 'quasar';
-import { copyToClipboard } from 'quasar';
+import { date, useQuasar, copyToClipboard } from 'quasar';
 import { getChain } from 'src/config/ConfigManager';
 import { api } from 'src/api';
 import { useRouter } from 'vue-router';
@@ -17,6 +15,9 @@ import { API, UInt64 } from '@greymass/eosio';
 import { formatCurrency } from 'src/utils/string-utils';
 import ConfigManager from 'src/config/ConfigManager';
 import { isSystemAccount } from 'src/utils/systemAccount';
+import { useResourceStore } from 'src/stores/resources';
+import { useChainStore } from 'src/stores/chain';
+import { useAccountStore } from 'src/stores/account';
 
 const chain = getChain();
 export default defineComponent({
@@ -37,7 +38,9 @@ export default defineComponent({
     setup(props) {
         const $q = useQuasar();
         const router = useRouter();
-        const store = useAntelopeStore();
+        const resourceStore = useResourceStore();
+        const chainStore = useChainStore();
+        const accountStore = useAccountStore();
 
         const accountPageSettings = computed(() => ConfigManager.get().getCurrentChain().getUiCustomization().accountPageSettings);
 
@@ -55,9 +58,7 @@ export default defineComponent({
         const ramUnit = ref<string>('kb');
         const resources = ref<number>(0);
         const delegatedByOthers = ref<number>(0.0);
-        const delegatedToOthers = computed(
-            (): number => store.resources.getDelegatedToOthersAggregated(),
-        );
+        const delegatedToOthers = computed(() => resourceStore.getDelegatedToOthersAggregated);
         const rexStaked = ref<number>(0);
         const rexProfits = ref<number>(0);
         const rexDeposits = ref<number>(0);
@@ -93,7 +94,7 @@ export default defineComponent({
 
         const staked = computed((): number => stakedRefund.value + stakedNET.value + stakedCPU.value);
 
-        const token = computed((): Token => store.state.chain.token);
+        const token = computed((): Token => chainStore.token);
 
         const liquidNative = computed((): number => accountData.value?.core_liquid_balance?.value
             ? accountData.value.core_liquid_balance.value
@@ -118,14 +119,14 @@ export default defineComponent({
             return result;
         });
 
-        const isAccount = computed((): boolean => store.state.account.accountName === props.account);
+        const isAccount = computed((): boolean => accountStore.accountName === props.account);
 
         const createTimeFormat = computed((): string =>
             date.formatDate(createTime.value, 'DD MMMM YYYY @ hh:mm A'),
         );
 
         const setToken = (value: Token) => {
-            void store.commit('chain/setToken', value);
+            void chainStore.setToken(value);
         };
 
         const loadAccountData = async (): Promise<void> => {
@@ -258,8 +259,7 @@ export default defineComponent({
             }
         };
 
-        const updateResources = (payload: {account:string, force: boolean}) =>
-            store.resources.updateResources(payload);
+        const updateResources = (payload: {account:string, force: boolean}) => resourceStore.updateResources(payload);
 
         const getRexFund = async () => {
             const paramsrexfund = {
@@ -393,26 +393,25 @@ export default defineComponent({
         onMounted(async () => {
             usdPrice.value = await chain.getUsdPrice();
             await loadAccountData();
-            await store.dispatch('account/updateRexData', {
+            await accountStore.updateRexData({
                 account: props.account,
             });
             loadSystemToken();
-            void store.dispatch('chain/updateRamPrice');
+            void chainStore.updateRamPrice();
         });
 
         watch(
             () => props.account,
             async () => {
                 resetBalances();
                 await loadAccountData();
-                await store.dispatch('account/updateRexData', {
+                await accountStore.updateRexData({
                     account: props.account,
                 });
             },
         );
-
         watch(
-            () => store.resources.getDelegatedToOthersAggregated(),
+            (): number => resourceStore.getDelegatedToOthersAggregated,
             () => {
                 setTotalBalance();
             },

src/components/Header.vue

@@ -5,9 +5,9 @@ import LoginHandler from 'components/LoginHandler.vue';
 import HeaderSearch from 'components/HeaderSearch.vue';
 import ChainsMenu from 'components/ChainsMenu.vue';
 import ConfigManager, { getChain } from 'src/config/ConfigManager';
-import { useStore } from 'src/store';
 import { useRouteDataNetwork } from 'src/router';
 import { HeaderSettings } from 'src/types/UiCustomization';
+import { useAccountStore } from 'src/stores/account';
 
 export default defineComponent({
     name: 'AppHeader',
@@ -18,11 +18,11 @@ export default defineComponent({
     },
     setup() {
         const $q = useQuasar();
-        const store = useStore();
-        const headerSettings = computed(() : HeaderSettings => ConfigManager.get().getCurrentChain().getUiCustomization().headerSettings);
+        const accountStore = useAccountStore();
+        const headerSettings = computed((): HeaderSettings => ConfigManager.get().getCurrentChain().getUiCustomization().headerSettings);
 
-        const account = computed(() => store.state.account.accountName);
-        const isLarge = computed((): boolean => $q.screen.gt.sm);
+        const account = computed(() => accountStore.accountName);
+        const isLarge = computed((): boolean => $q.screen.gt.md);
         const showMultichainSelector = computed(() => process.env.SHOW_MULTICHAIN_SELECTOR === 'true');
 
         const isTestnet = ref(getChain().isTestnet());

src/components/LoginHandler.vue

@@ -3,30 +3,30 @@ import { defineComponent, ref, onMounted, computed } from 'vue';
 import LoginHandlerDropdown from 'src/components/LoginHandlerDropdown.vue';
 import WalletModal from 'src/components/WalletModal.vue';
 import { Authenticator } from 'universal-authenticator-library';
-import { useStore } from 'src/store';
 import { getAuthenticators } from 'src/boot/ual';
 import { getChain } from 'src/config/ConfigManager';
+import { useAccountStore } from 'src/stores/account';
 
 export default defineComponent({
     name: 'LoginHandler',
     components: { LoginHandlerDropdown, WalletModal },
     setup() {
         const authenticators = getAuthenticators();
-        const store = useStore();
+        const accountStore = useAccountStore();
 
         const showDropdown = ref(false);
         const showModal = ref(false);
-        const account = computed(() => store.state.account.accountName);
+        const account = computed(() => accountStore.accountName);
 
         onMounted(() => {
             const storedAccount = localStorage.getItem('account_' + getChain().getChainId());
             if (storedAccount) {
-                void store.commit('account/setAccountName', storedAccount);
+                void accountStore.setAccountName(storedAccount);
                 const ualName = localStorage.getItem('autoLogin_' + getChain().getChainId());
                 const ual: Authenticator = authenticators.find(
                     a => a.getName() === ualName,
                 );
-                void store.dispatch('account/login', {
+                void accountStore.login({
                     account: storedAccount,
                     authenticator: ual,
                 });

src/components/LoginHandlerDropdown.vue

@@ -1,26 +1,25 @@
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import WalletModal from 'src/components/WalletModal.vue';
-import { useStore } from 'src/store';
 import { getAuthenticators } from 'src/boot/ual';
 import { Authenticator } from 'universal-authenticator-library';
 import { getChain } from 'src/config/ConfigManager';
+import { useAccountStore } from 'src/stores/account';
 
 export default defineComponent({
     name: 'LoginHandlerDropdown',
     components: { WalletModal },
     setup() {
         const authenticators = getAuthenticators();
-        const store = useStore();
-        const account = computed(() => store.state.account.accountName);
+        const accountStore = useAccountStore();
+        const account = computed(() => accountStore.accountName);
         const showModal = ref(false);
 
         const getAuthenticator = (): Authenticator => {
             const wallet = localStorage.getItem('autoLogin_' + getChain().getChainId());
-            const authenticator = authenticators.find(
+            return authenticators.find(
                 auth => auth.getName() === wallet,
             );
-            return authenticator;
         };
 
         const onLogout = async (): Promise<void> => {
@@ -35,7 +34,7 @@ export default defineComponent({
         };
 
         const clearAccount = (): void => {
-            void store.dispatch('account/logout');
+            void accountStore.logout();
         };
         return {
             account,

src/components/MapData.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import { useStore } from 'src/store';
+import { useChainStore } from 'src/stores/chain';
 
 export default defineComponent({
     name: 'MapData',
@@ -11,13 +11,13 @@ export default defineComponent({
         },
     },
     setup() {
-        const store = useStore();
+        const chainStore = useChainStore();
         const HeadBlockProducer = computed(
-            (): string => store.state.chain.head_block_producer,
+            (): string => chainStore.head_block_producer,
         );
-        const HeadBlock = computed((): number => store.state.chain.head_block_num);
+        const HeadBlock = computed((): number => chainStore.head_block_num);
         const lastIrreversibleBlock = computed(
-            (): number => store.state.chain.last_irreversible_block_num,
+            (): number => chainStore.last_irreversible_block_num,
         );
 
         return {