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/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/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

@@ -38,6 +38,10 @@ export default defineComponent({
             await store.dispatch('account/updateABI', route.params.account);
         });
 
+        watch([account], async () => {
+            await store.dispatch('account/updateABI', route.params.account);
+        });
+
         watch([tab], () => {
             void router.push({
                 path: router.currentRoute.value.path,

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);
     },

yarn.lock

@@ -11302,7 +11302,7 @@ vue-jest@^5.0.0-alpha.10:
     source-map "0.5.6"
     tsconfig "^7.0.0"
 
-vue-json-viewer@3:
+vue-json-viewer@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/vue-json-viewer/-/vue-json-viewer-3.0.4.tgz#c1d65515e57d4036defbbc18fa942d7fd5fb9a8b"
   integrity sha512-pnC080rTub6YjccthVSNQod2z9Sl5IUUq46srXtn6rxwhW8QM4rlYn+CTSLFKXWfw+N3xv77Cioxw7B4XUKIbQ==