Merge pull request #212 from rsksmart/feat/autoupdate-blocks-txs

feat: automatic update of blocks and transactions

src/components/Home.vue

@@ -12,9 +12,8 @@
   </div>
 </template>
 <script>
-import { mapState, mapGetters, mapActions } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import LastBlocks from '@/components/home/Block/LastBlocks.vue'
-import { ROUTES as r } from '../config/types'
 import StatsContent from '@/components/home/StatsContent.vue'
 import LastBlock from '@/components/home/Block/LastBlock.vue'
 import TxDensityChart from '@/components/Charts/TxDensityChart.vue'
@@ -28,32 +27,13 @@ export default {
     LastBlock,
     TxDensityChart
   },
-  data () {
-    return {
-      topBoxHeight: 0,
-      r
-    }
-  },
   computed: {
     ...mapState({
-      lastBlocks: state => state.backend.lastBlocks,
-      autoUpdate: state => state.config.autoUpdateBlocks
+      lastBlocks: state => state.backend.lastBlocks
     }),
     ...mapGetters({
-      pending: 'pendingBlocks',
       appSize: 'getSize'
     })
-  },
-  methods: {
-    ...mapActions([
-      'updateBlocks',
-      'setAutoUpdate'
-    ]),
-    setAupdate (value) {
-      this.updateBlocks()
-      this.setAutoUpdate(value)
-    }
   }
-
 }
 </script>

src/components/Transactions/LastTransactions.vue

@@ -1,20 +1,22 @@
 <template>
   <div class="tx-wrapper box-block-tx">
     <div class="box-head">
-      <h2 class="title text-white-100">
-        <router-link :to="entity.listLink" class="text-white-100">
-          <span>{{ pageTitle }}</span>
-        </router-link>
-      </h2>
-      <div class="badge bg-pink-900 flex item-center">
-        <router-link :to="txPoolPath" class="text-primary flex justify-between item-center">
-          <div v-if="txsInPool === 0">{{ txsInPool }} tx in pool</div>
-          <div v-if="txsInPool === 1">{{ txsInPool }} tx in pool</div>
-          <div v-if="txsInPool > 1">{{ txsInPool }} txs in pool</div>
-        </router-link>
+      <div class="box-title">
+        <h2 class="title text-white-100">
+          <router-link :to="entity.listLink" class="text-white-100">
+            <span>{{ pageTitle }}</span>
+          </router-link>
+        </h2>
+        <div class="badge bg-pink-900 flex item-center">
+          <router-link :to="txPoolPath" class="text-primary flex justify-between item-center">
+            <div v-if="txsInPool === 0">{{ txsInPool }} tx in pool</div>
+            <div v-if="txsInPool === 1">{{ txsInPool }} tx in pool</div>
+            <div v-if="txsInPool > 1">{{ txsInPool }} txs in pool</div>
+          </router-link>
+        </div>
       </div>
     </div>
-    <div class="tx-container" v-for="(tx, index) in transactions" :key="index">
+    <div class="tx-container" v-for="(tx, index) in lastTxs" :key="index">
       <tx-box v-if="index <= 5" :tx="tx" />
     </div>
     <div class="btn-link">
@@ -26,7 +28,7 @@
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+import { mapActions, mapGetters, mapState } from 'vuex'
 import dataMixin from '@/mixins/dataMixin'
 import { ROUTES } from '@/config/types'
 import TxBox from './TxBox.vue'
@@ -40,21 +42,61 @@ export default {
   ],
   data () {
     return {
-      type: 'transactions'
+      type: 'transactions',
+      lastTxsStore: []
+    }
+  },
+  watch: {
+    transactions () {
+      if (this.lastTxsStore.length === 0) {
+        this.lastTxsStore = this.lastTransactions?.length > 0 ? this.lastTransactions : this.transactions
+      }
+    },
+    blocks () {
+      this.fetchTxsData()
     }
   },
   computed: {
     ...mapGetters({
+      lastTransactions: 'lastTransactions',
       transactions: 'transactions',
       pending: 'getTxPoolPending',
       queued: 'getTxPoolQueued'
     }),
+    ...mapState({
+      blocks: state => state.backend.blocks
+    }),
     txPoolPath () {
       return ROUTES.txPool
     },
     txsInPool () {
       return this.pending + this.queued
+    },
+    lastTxs () {
+      if (this.lastTransactions?.length > 0) {
+        this.updateTxs(this.lastTransactions)
+      }
+      const value = this.lastTransactions?.length > 0 ? this.lastTransactions : this.lastTxsStore
+      return value
     }
+  },
+  methods: {
+    ...mapActions([
+      'fetchRouteData'
+    ]),
+    updateTxs (data) {
+      this.lastTxsStore = data
+    },
+    fetchTxsData () {
+      const action = 'getTransactions'
+      const params = undefined
+      const module = 'transactions'
+      const key = 'data'
+      this.fetchRouteData({ action, params, module, key })
+    }
+  },
+  created () {
+    this.fetchTxsData()
   }
 }
 </script>

src/components/Transactions/TxBox.vue

@@ -19,22 +19,19 @@
         <div class="flex item-end">
           <div class="box-info">
             <div class="flex text-white-400 field-content">
-              <div class="half from-to flex item-center" v-if="tx.txType == 'normal'">
+              <div class="half from-to flex item-center">
                 <render-field class="small from" :field="fields.from" :row="tx" />
                 <icon class="from-to-arrow" name="arrow-right"></icon>
                 <render-field class="small to" :field="fields.to" :row="tx" />
               </div>
-              <div class="half contract" v-else>
-                <span>{{ tx.txType }}</span>
-              </div>
               <div class="half soft">
                 <field-title class="small" :field="fields.time"></field-title>
                 <render-field :field="fields.time" :row="tx" />
                 <router-link :to="txLink" class="link-icon">
                   <icon name="triangle-arrow-right" />
                 </router-link>
               </div>
-              <div class="half flex" v-if="tx.txType == 'normal'">
+              <div class="half flex">
                 <img src="@/assets/svg/btc-orange.svg" alt="">
                 <render-field :field="fields.value" :row="tx" />
               </div>

src/components/home/Block/LastBlocks.vue

@@ -1,15 +1,24 @@
 <template>
   <div class="blocks-wrapper box-block-tx" v-show="blocks.length">
     <div class="box-head">
-      <h2 class="title text-white-100">
-        <router-link :to="entity.listLink" class="text-white-100">
-          <span>{{ pageTitle }}</span>
-        </router-link>
-      </h2>
-      <div class="badge pending-msg flex item-center bg-orange-900" v-if="pending">
-        <button @click="updateBlocks">
-          <div class="text-primary">{{ pending }} new {{ pending > 1 ? 'blocks' : 'block' }}</div>
-        </button>
+      <div class="box-title">
+        <h2 class="title text-white-100">
+          <router-link :to="entity.listLink" class="text-white-100">
+            <span>{{ pageTitle }}</span>
+          </router-link>
+        </h2>
+        <div class="badge pending-msg flex item-center bg-orange-900" v-if="pending">
+          <button @click="updateBlocks">
+            <div class="text-primary">{{ pending }} new {{ pending > 1 ? 'blocks' : 'block' }}</div>
+          </button>
+        </div>
+      </div>
+      <div class="auto-update">
+        autoupdate
+        <label class="checkbox-container">
+          <input type="checkbox" @change="handleAutoUpdate" :checked="autoUpdate" class="custom-checkbox">
+          <span class="checkmark"></span>
+        </label>
       </div>
     </div>
     <div class="blocks" v-if="blocks.length">
@@ -48,14 +57,22 @@ export default {
   computed: {
     ...mapState({
       blocks: state => state.backend.blocks,
-      lastBlocks: state => state.backend.lastBlocks
+      lastBlocks: state => state.backend.lastBlocks,
+      autoUpdate: state => state.config.autoUpdateBlocks
     }),
     ...mapGetters({
       pending: 'pendingBlocks'
     })
   },
   methods: {
-    ...mapActions(['updateBlocks'])
+    ...mapActions([
+      'updateBlocks',
+      'setAutoUpdate'
+    ]),
+    handleAutoUpdate (event) {
+      const value = event.target.checked
+      this.setAutoUpdate(value)
+    }
   }
 }
 </script>

src/store/modules/backend/actions.js

@@ -30,10 +30,14 @@ export const socketNewTransactions = ({ state, commit, getters }, result) => {
   }
 }
 // handle newBlocks from blocks channel
-export const socketNewBlocks = ({ state, commit, getters }, result) => {
+export const socketNewBlocks = ({ state, commit, getters, dispatch, rootState }, result) => {
   const blocks = result.data || []
   const autoUpdate = getters.autoUpdate
   commit('LAST_BLOCKS', blocks)
+  if (rootState.autoUpdateBlocks) dispatch('updateBlocks')
+  if (rootState.route.path === '/') {
+    dispatch('fetchRouteData', { action: 'getTransactions', params: undefined, module: 'transactions', key: 'data' })
+  }
   if (!state.lastBlocksTime) commit('LAST_BLOCKS_TIME')
   if (!state.blocks.length || autoUpdate) {
     commit('SET_BLOCKS', blocks.slice())

src/store/modules/backend/getters.js

@@ -10,6 +10,10 @@ export const transactions = state => {
   return state.transactions
 }
 
+export const lastTransactions = state => {
+  return state.responses?.data?.data
+}
+
 export const pendingBlocks = state => {
   return Object.keys(state.pendingBlocks).length
 }

src/styles/_controls.scss

@@ -171,56 +171,60 @@ li {
     .item {
       margin: 0 24px;
     }
-
-    label {
-      display: flex;
-      justify-items: center;
-      input {
-        margin-right: 10px;
-      }
-    }
-    .checkbox-container {
-      display: flex;
-      align-items: center;
-    }
-
-    .custom-checkbox {
-      opacity: 0;
-      position: absolute;
-    }
-
-    .checkmark {
-      height: 20px;
-      width: 20px;
-      cursor: pointer;
-      background-color: transparent;
-      border-radius: 5px;
-      margin-right: 10px;
-      display: inline-block;
-      position: relative;
-      border: 1px solid #575757;
-    }
-
-    .custom-checkbox:checked + .checkmark {
-      background-color: orange; 
-    }
-
-    .custom-checkbox:checked + .checkmark:after {
-      content: "";
-      position: absolute;
-      display: block;
-      left: 5px;
-      top: 3px;
-      width: 4px;
-      height: 8px;
-      border: solid black;
-      border-width: 0 3px 3px 0;
-      transform: rotate(45deg);
-    }    
   }
+}
+.checkbox-container {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  input {
+    margin-right: 10px;
+  }
+}
 
+.custom-checkbox {
+  opacity: 0;
+  position: absolute;
 }
 
+.checkmark {
+  height: 20px;
+  width: 20px;
+  cursor: pointer;
+  background-color: transparent;
+  border-radius: 5px;
+  margin-right: 10px;
+  display: inline-block;
+  position: relative;
+  border: 1px solid #575757;
+}
+
+.custom-checkbox:checked + .checkmark {
+  background-color: orange; 
+}
+
+.custom-checkbox:checked + .checkmark:after {
+  content: "";
+  position: absolute;
+  display: block;
+  left: 5px;
+  top: 3px;
+  width: 4px;
+  height: 8px;
+  border: solid black;
+  border-width: 0 3px 3px 0;
+  transform: rotate(45deg);
+}
+.auto-update {
+  .checkmark {
+    height: 18px;
+    width: 18px;
+  }
+  .custom-checkbox:checked + .checkmark:after {
+    width: 3px;
+    height: 6px;
+  }
+}
 .waiting-result {
   display: flex;
   flex-direction: column;

src/styles/_home.scss

@@ -257,9 +257,20 @@
     .box-head {
       display: flex;
       align-items: center;
-      padding: 0 24px;
+      justify-content: space-between;
+      padding-left: 24px;
       margin-bottom: 10px;
     }
+    .box-title {
+      display: flex;
+      align-items: center;
+    }
+    .auto-update {
+      color: $white_400;
+      display: flex;
+      gap: 5px;
+      width: max-content;
+    }
     .title {
       &::first-letter {
         text-transform: uppercase;