view per account transactions

src/router/details.js

@@ -7,7 +7,7 @@ export default [
   },
   {
     path: '/accounts/:account/transactions',
-    name: 'wallet transaction details',
+    name: 'account transaction details',
     component: () =>
       import(/* webpackChunkName: "accountidtransactions" */ '../views/DetailedPage'),
     props: {

src/views/Accounts.vue

@@ -9,22 +9,33 @@
     <template v-slot:address="slotProps">
       <Copy :value="slotProps.row.address" :shrink="slotProps.shrink" />
     </template>
+    <template v-slot:view="slotProps">
+      <div class="flex">
+        <Button
+          value="View transactions"
+          @click.stop.prevent="viewAccountTransactions(slotProps.row.address)"
+        />
+      </div>
+    </template>
   </DataTable>
 </template>
 
 <script>
 import { computed, inject, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { _transformMonetaryUnit } from '../utils';
 import { DETAIL_MODAL } from '../components/modals/constants';
 
 import Navbar from '../components/Navbar';
 import DataTable from '../components/DataTable';
 import Copy from '../components/Copy';
+import Button from '../components/Button.vue';
 
 export default {
   name: 'Accounts',
   setup() {
     const store = inject('store');
+    const router = useRouter();
 
     const columns = ref([
       // { name: 'type', label: 'type', field: 'type', sortable: false },
@@ -54,13 +65,23 @@ export default {
         sorted: 'desc',
         shrinkable: false,
       },
+      {
+        name: 'view',
+        label: 'Inspect account',
+        field: 'view',
+        sortable: false,
+        active: true,
+        slot: true,
+      },
     ]);
 
     return {
       columns,
+      viewAccountTransactions: address =>
+        router.push(`/accounts/${address}/transactions`),
     };
   },
-  components: { DataTable, Navbar, Copy },
+  components: { DataTable, Navbar, Copy, Button },
 };
 </script>
 

src/views/Delegates.vue

@@ -136,15 +136,19 @@ export default {
         );
       }
 
-      delegateCount.value = (await store.client.value.getForgingDelegates()).length;
+      delegateCount.value = (
+        await store.client.value.getForgingDelegates()
+      ).length;
 
       let latestBlocks = await store.client.value.getBlocksBetweenHeights(
         Math.max(0, maxBlockHeight.value - delegateCount.value),
         maxBlockHeight.value,
-        delegateCount.value
+        delegateCount.value,
       );
 
-      recentForgers.value = new Set(latestBlocks.map(block => block.forgerAddress));
+      recentForgers.value = new Set(
+        latestBlocks.map(block => block.forgerAddress),
+      );
     });
 
     const voteForDelegate = async (wallet, unvote) => {

src/views/DetailedPage.vue

@@ -40,6 +40,7 @@ export default {
     const data = ref({});
 
     onMounted(async () => {
+      // dataTable is passed by the router
       if (!dataTable) {
         const key = Object.keys(route.params)[0];
 
@@ -58,14 +59,15 @@ export default {
         data.value = await (sw[key] || sw.default)();
       } else {
         const sw = {
-          'Account transaction details': () => ({
+          // This is relative to the route name
+          'account transaction details': () => ({
             arg: route.params.account,
             fn: 'getAccountTransactions',
           }),
           default: () => {},
         };
 
-        data.value = await (sw[route.name] || sw.default)();
+        data.value = (sw[route.name] || sw.default)();
       }
     });