Merge pull request #815 from telosnetwork/812-account-tabs

812 account tabs

package.json

@@ -29,7 +29,7 @@
     "universal-authenticator-library": "^0.3.0",
     "vue": "^3.0.0",
     "vue-class-component": "^7.2.6",
-    "vue-json-viewer": "3",
+    "vue-json-viewer": "^3.0.4",
     "vue-router": "^4.0.0",
     "vue3-openlayers": "^0.1.63",
     "vuex": "^4.0.1"

src/api/eosio_core.ts

@@ -23,7 +23,9 @@ const eosioCore = new APIClient({
 export const getAccount = async function (
     address: string,
 ): Promise<API.v1.AccountObject> {
-    return await eosioCore.v1.chain.get_account(address);
+    if (address){
+        return await eosioCore.v1.chain.get_account(address);
+    }
 };
 
 export const getKeyAccounts = async function (

src/components/AccountCard.vue

@@ -16,6 +16,7 @@ import { TableIndexType } from 'src/types/Api';
 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';
 
 const chain = getChain();
 export default defineComponent({
@@ -43,8 +44,6 @@ export default defineComponent({
         const createTime = ref<string>('2019-01-01T00:00:00.000');
         const createTransaction = ref<string>('');
         const creatingAccount = ref('');
-        const system_account = ref('eosio');
-
         const isLoading = ref<boolean>(true);
         const tokensLoading = ref<boolean>(true);
         const none = ref<UInt64>(UInt64.from(0));
@@ -177,7 +176,7 @@ export default defineComponent({
 
         const loadResources = () => {
             let ramDenominator;
-            if (props.account !== system_account.value) {
+            if (!isSystemAccount(props.account)) {
                 // display max resource unit value for readability
                 const ramMaxNumber = Number(accountData.value.ram_quota);
                 const ramUnitResult = determineUnit(ramMaxNumber);
@@ -443,7 +442,6 @@ export default defineComponent({
             rexStaked,
             rexDeposits,
             none,
-            system_account,
             radius,
             availableTokens,
             createTime,
@@ -459,6 +457,7 @@ export default defineComponent({
             resources,
             accountExists,
             loadAccountData,
+            isSystemAccount,
             setToken,
             fixDec,
             loadSystemToken,
@@ -479,13 +478,10 @@ export default defineComponent({
         <q-card-section class="resources-container">
             <div class="inline-section">
                 <div class="row justify-center full-height items-center">
-                    <div v-if="account !== system_account" class="col-6">
-                        <div class="text-title">{{ account }}</div>
-                    </div>
-                    <div v-else class="col-2">
+                    <div>
                         <div class="text-title">{{ account }}</div>
                     </div>
-                    <div class="col-1">
+                    <div>
                         <q-btn
                             class="float-right"
                             flat
@@ -517,7 +513,7 @@ export default defineComponent({
                 </div>
                 <q-space/>
             </div>
-            <div v-if="account !== system_account" class="resources">
+            <div v-if="!isSystemAccount(account)" class="resources">
                 <PercentCircle
                     v-if="!accountPageSettings.hideCpuInfo"
                     :radius="radius"

src/components/AccountSearch.vue

@@ -3,6 +3,7 @@ import { defineComponent, ref, watch, onMounted } from 'vue';
 import { OptionsObj, TableByScope } from 'src/types';
 import { api } from 'src/api';
 import { useQuasar } from 'quasar';
+import { systemAccounts } from 'src/utils/systemAccount';
 
 export default defineComponent({
     name: 'AccountSearch',
@@ -92,9 +93,13 @@ export default defineComponent({
 
                 // get table by scope for userres does not include system account
                 if (value.includes('eosio')) {
-                    accounts.unshift({
-                        payer: 'eosio',
-                    } as TableByScope);
+                    for (const systemAccount of systemAccounts){
+                        accounts.push(
+                            {
+                                payer: systemAccount,
+                            } as TableByScope,
+                        );
+                    }
                 }
 
                 if (accounts.length > 0) {

src/components/BpVotes.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineProps, onBeforeMount } from 'vue';
+import { ref, defineProps, onBeforeMount, watch } from 'vue';
 import { getHyperionAccountData } from 'src/api/hyperion';
 
 const  props = defineProps({
@@ -10,7 +10,7 @@ const  props = defineProps({
 });
 
 const bpVotes = ref([]);
-onBeforeMount(async () => {
+const fetchVotes = async () => {
     try {
         const {
             account: {
@@ -21,6 +21,11 @@ onBeforeMount(async () => {
     } catch(e) {
         console.error(e);
     }
+};
+onBeforeMount(fetchVotes);
+watch(() => props.account, async () => {
+    bpVotes.value = [];
+    await fetchVotes();
 });
 </script>
 

src/components/ChildrenPanel.vue

@@ -2,7 +2,7 @@
 import { useQuasar } from 'quasar';
 import { api } from 'src/api';
 import { Action, NewAccountData } from 'src/types';
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineComponent, onMounted, ref, watch } from 'vue';
 export default defineComponent({
     name: 'ChildrenPanel',
     components: {},
@@ -29,6 +29,10 @@ export default defineComponent({
                 formatAccount((el.act.data as NewAccountData).newact, 'account'),
             );
         };
+        watch(()=> props.account, async () => {
+            children.value = [];
+            await loadAccountData();
+        });
         // TODO Refactor
         const formatAccount = (
             name: string,

src/components/HeaderSearch.vue

@@ -3,8 +3,9 @@ import { defineComponent, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { OptionsObj, TableByScope } from 'src/types';
 import { api } from 'src/api';
-import { isValidTransactionHex } from 'src/utils/string-utils';
+import { ACCOUNT_LENGTH, TRANSACTION_HASH_LENGTH, isValidTransactionHex } from 'src/utils/string-utils';
 import { useQuasar } from 'quasar';
+import { systemAccounts } from 'src/utils/systemAccount';
 import { debounce } from 'src/utils/time';
 
 export default defineComponent({
@@ -31,7 +32,14 @@ export default defineComponent({
                 searchProposals(queryValue),
                 searchTransactions(queryValue),
             ]).then((results) => {
+                // flatten search results
                 options.value = ([] as OptionsObj[]).concat.apply([], results);
+
+                // trigger navigation on single result
+                const filteredResults = options.value.filter(result => !result.isHeader);
+                if (filteredResults.length === 1){
+                    void handleGoTo(filteredResults[0].to);
+                }
             });
 
             isLoading.value = false;
@@ -44,6 +52,9 @@ export default defineComponent({
         async function searchAccounts(value: string): Promise<OptionsObj[]> {
             try {
                 const results = [] as OptionsObj[];
+                if (value.length > ACCOUNT_LENGTH){
+                    return results;
+                }
                 const request = {
                     code: 'eosio',
                     limit: 5,
@@ -55,12 +66,17 @@ export default defineComponent({
 
                 // get table by scope for userres does not include system account
                 if (value.includes('eosio')) {
-                    accounts.unshift({
-                        payer: 'eosio',
-                    } as TableByScope);
+                    for (const systemAccount of systemAccounts){
+                        accounts.push(
+                            {
+                                payer: systemAccount,
+                            } as TableByScope,
+                        );
+                    }
                 }
 
                 if (accounts.length > 0) {
+
                     results.push({
                         label: 'Accounts',
                         to: '',
@@ -118,14 +134,14 @@ export default defineComponent({
         async function searchTransactions(value: string): Promise<OptionsObj[]> {
             const results = [] as OptionsObj[];
 
-            if (value.length !== 64) {
+            if (value.length !== TRANSACTION_HASH_LENGTH) {
                 return results;
             }
 
             try {
                 const transactions = await api.getTransaction(value);
 
-                if (transactions?.actions) {
+                if (transactions?.trx_id) {
                     results.push({
                         label: 'Transactions',
                         to: '',

src/components/KeysPanel.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { Permission, PermissionLinks } from 'src/types';
 import PermissionCard from 'components/PermissionCard.vue';
-import { computed, defineComponent, onMounted, ref } from 'vue';
+import { computed, defineComponent, onMounted, ref, watch } from 'vue';
 import { api } from 'src/api';
 import { useQuasar } from 'quasar';
 import { API } from '@greymass/eosio';
@@ -46,6 +46,10 @@ export default defineComponent({
 
             permission.value = sortPermissions(permissions);
         };
+        watch(account, async () => {
+            permission.value = null;
+            await loadAccountData();
+        });
         const sortPermissions = (perm: Permission[]) => {
             let result: Permission;
             result = perm.find(p => p.perm_name.toString() === 'owner');

src/components/TokensPanel.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { watch } from 'vue';
 import { api } from 'src/api';
 import { Token } from 'src/types';
 import { defineComponent, onMounted, ref, toRef } from 'vue';
@@ -25,6 +26,10 @@ export default defineComponent({
                 return [];
             }
         };
+        watch(account, async () => {
+            tokens.value = [];
+            await loadTokens();
+        });
 
         const loadTokens = async (): Promise<void> => {
             // TODO Refactor redundant getTokens in AccountCard

src/components/contract/ContractActions.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, ref, computed, onMounted } from 'vue';
+import { defineComponent, ref, computed, onMounted, watch } from 'vue';
 import { useStore } from 'src/store';
 import ViewTransaction from 'src/components/ViewTransanction.vue';
 
@@ -53,6 +53,11 @@ export default defineComponent({
             }
         }
 
+        watch(actions, () => {
+            action.value = actions.value[0];
+            memo.value = {};
+        });
+
         onMounted(async () => {
             actor.value = await store.state.account.user.getAccountName();
             permission.value = store.state.account.accountPermission;

src/components/contract/ContractTables.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, ref, computed, onMounted } from 'vue';
+import { defineComponent, ref, computed, onMounted, watch } from 'vue';
 import { useStore } from 'src/store';
 import { api } from 'src/api/index';
 import { GetTableRowsParams, GenericTable } from 'src/types';
@@ -67,6 +67,11 @@ export default defineComponent({
             await getRows();
         });
 
+        watch(account, async () => {
+            rows.value = []
+            table.value = options.value[0];
+        });
+
         async function showMore() {
             limit.value = (Number(limit.value) + Number(limit.value)).toString();
             await getRows();

src/pages/Account.vue

@@ -36,18 +36,40 @@ export default defineComponent({
 
         onMounted(async () => {
             await store.dispatch('account/updateABI', route.params.account);
+            if (route.query.tab !== tab.value) {
+                await updateQueryParams();
+            }
         });
 
+        watch([account], async () => {
+            await store.dispatch('account/updateABI', route.params.account);
+        });
+
+        const updateQueryParams =  async () => {
+            await router.replace({ query: { tab: tab.value } });
+        };
+
+        const onChangeTab = (newTab: string) => {
+            tab.value = newTab;
+        };
+
         watch([tab], () => {
             void router.push({
-                path: router.currentRoute.value.path,
                 query: {
                     tab: tab.value,
                 },
             });
         });
 
+        watch(route, () => {
+            // handle tab update on browser navigation
+            if (route.path.includes('/account/') && route.query.tab !== tab.value){
+                onChangeTab(route.query.tab as string);
+            }
+        });
+
         return {
+            onChangeTab,
             tab,
             account,
             abi,
@@ -64,7 +86,12 @@ export default defineComponent({
         <div class="row">
             <AccountCard class="account-card" :account="account" :tokens="tokenList"/>
         </div>
-        <q-tabs v-model="tab" class="account-view tabs" no-caps>
+        <q-tabs
+            v-model="tab"
+            class="account-view tabs"
+            no-caps
+            @update:model-value="onChangeTab"
+        >
             <q-tab v-if="!accountPageSettings.hideTransactionTab" name="transactions" label="Transactions"/>
             <q-tab v-if="!accountPageSettings.hideContractsTab && abi" name="contract" label="Contract"/>
             <q-tab v-if="!accountPageSettings.hideTokensTab" name="tokens" label="Tokens"/>

src/store/account/actions.ts

@@ -427,6 +427,7 @@ export const actions: ActionTree<AccountStateInterface, StateInterface> = {
         commit('setTransactionError', '');
     },
     async updateABI({ commit }, account: string) {
+        commit('setABI', {});
         const abi = await api.getABI(account);
         commit('setABI', abi);
     },

src/store/resources/actions.ts

@@ -54,6 +54,10 @@ export const actions: ActionTree<ResourcesStateInterface, StateInterface> = {
 
             const accountData = store.rootState.account.data;
 
+            if (!accountData) {
+                return;
+            }
+
             // self staked resources
             const self_net_weight = Number(accountData.self_delegated_bandwidth?.net_weight.value ?? 0);
             const self_cpu_weight = Number(accountData.self_delegated_bandwidth?.cpu_weight.value ?? 0);

src/types/Actions.ts

@@ -10,6 +10,7 @@ export interface ActionData {
     value: number;
     relation: string;
   };
+  trx_id?: string;
 }
 
 export interface GetActionsResponse {