Billy/454 tx info

CHANGELOG.md

@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 * Added COSMOS_MOCKED env variable to allow overwriting mocked mode from the command line @faboweb
 * User will now be logged out if switching between mocked and live connector @faboweb
 * recovery seed form validation & tests @okwme
+* added tx view to block explorer @okwme
 
 ### Changed
 

app/src/renderer/components/monitor/PageBlock.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 page(:title="pageBlockTitle")
   data-loading(v-if="blockchain.blockLoading")
-  data-empty(v-else-if="!block.header || !blockMeta")
+  data-empty(v-else-if="!block || !block.header || !blockMeta")
   template(v-else)
     div(slot="menu"): tool-bar
       router-link(:to="{ name: 'block', params: { block: block.header.height - 1 }}"
@@ -44,13 +44,23 @@ page(:title="pageBlockTitle")
     part(title='Transactions')
       data-loading(v-if="blockchain.blockLoading")
       data-empty(v-else-if="block.header.num_txs === 0" title="Empty Block" subtitle="There were no transactions in this block.")
-      list-item(v-else v-for="tx in block.data.txs" :key="tx.id" dt="Transaction" :dd="TODO")
+      template(
+        v-else-if="txs.length"
+        )
+        li-transaction(
+          :key="tkey + '-tx'"
+          v-for="(tx, tkey) in txs"
+          v-if="isObj(tx)"
+          :transaction-value="transactionValueify(tx)"
+          :address="tx.tx.msg.inputs[0].address"
+          :devMode="config.devMode")
 </template>
 
 <script>
 import { mapGetters } from "vuex"
 import moment from "moment"
 import num from "scripts/num"
+import LiTransaction from "wallet/LiTransaction"
 import DataLoading from "common/NiDataLoading"
 import DataEmpty from "common/NiDataEmpty"
 import ToolBar from "common/NiToolBar"
@@ -60,6 +70,7 @@ import Page from "common/NiPage"
 export default {
   name: "page-block",
   components: {
+    LiTransaction,
     DataLoading,
     DataEmpty,
     ToolBar,
@@ -68,12 +79,15 @@ export default {
     Page
   },
   computed: {
-    ...mapGetters(["blockchain"]),
+    ...mapGetters(["blockchain", "blockTxInfo", "config"]),
     blockchainHeight() {
       return this.blockchain.blocks.length > 0
         ? this.blockchain.blocks[0].header.height
         : 0
     },
+    txs() {
+      return this.blockTxInfo || (this.block.data && this.block.data.txs)
+    },
     block() {
       return this.blockchain.block
     },
@@ -96,13 +110,25 @@ export default {
     },
     nextBlockAvailable() {
       return (
-        this.block.header && this.block.header.height < this.blockchainHeight
+        this.block &&
+        this.block.header &&
+        this.block.header.height < this.blockchainHeight
       )
     }
   },
   methods: {
+    isObj(thing) {
+      return typeof thing === "object"
+    },
     fetchBlock() {
       this.$store.dispatch("getBlock", parseInt(this.$route.params.block))
+    },
+    transactionValueify(tv) {
+      tv = JSON.parse(JSON.stringify(tv))
+      tv.tx.inputs = tv.tx.msg.inputs
+      tv.tx.outputs = tv.tx.msg.outputs
+      tv.time = this.block && this.block.blockHeaderTime
+      return tv
     }
   },
   mounted() {

app/src/renderer/connectors/lcdClient.js

@@ -89,6 +89,8 @@ Object.assign(Client.prototype, {
   },
   coinTxs: argReq("GET", "/tx/coin"),
 
+  txs: argReq("GET", "/txs"),
+
   // staking
   candidate: argReq("GET", "/query/stake/candidate"),
   candidates: req("GET", "/query/stake/candidates"),

app/src/renderer/scripts/utils.js

@@ -0,0 +1,14 @@
+import createHash from "create-hash"
+import varint from "varint"
+import b64 from "base64-js"
+
+export default function(txstring) {
+  let txbytes = b64.toByteArray(txstring)
+  let varintlen = new Uint8Array(varint.encode(txbytes.length))
+  let tmp = new Uint8Array(varintlen.byteLength + txbytes.byteLength)
+  tmp.set(new Uint8Array(varintlen), 0)
+  tmp.set(new Uint8Array(txbytes), varintlen.byteLength)
+  return createHash("ripemd160")
+    .update(Buffer.from(tmp))
+    .digest("hex")
+}

app/src/renderer/vuex/getters.js

@@ -28,3 +28,13 @@ export const connected = state => state.node.connected
 export const lastHeader = state => state.node.lastHeader
 export const nodeIP = state => state.node.nodeIP
 export const mockedConnector = state => state.node.mocked
+
+//blockchain
+export const blockTxInfo = state => {
+  return (
+    state.blockchain.block &&
+    state.blockchain.blockTxs.find(
+      b => b.length && b[0].height === state.blockchain.block.header.height
+    )
+  )
+}

app/src/renderer/vuex/modules/blockchain.js

@@ -1,3 +1,5 @@
+import convertTx from "../../scripts/utils.js"
+
 export default ({ commit, node }) => {
   const state = {
     blocks: [],
@@ -7,7 +9,8 @@ export default ({ commit, node }) => {
     blockLoading: false,
     subscription: false,
     syncing: true,
-    blockMetas: []
+    blockMetas: [],
+    blockTxs: []
   }
 
   const mutations = {
@@ -19,6 +22,9 @@ export default ({ commit, node }) => {
     },
     setBlockMetaInfo(state, blockMetaInfo) {
       state.blockMetaInfo = blockMetaInfo
+    },
+    setBlockTxInfo(state, blockTxInfo) {
+      state.blockTxInfo = blockTxInfo
     }
   }
 
@@ -30,21 +36,33 @@ export default ({ commit, node }) => {
       dispatch("subscribeToBlocks")
     },
     async getBlock({ state, commit, dispatch }, height) {
-      state.blockLoading = true
-      state.blockHeight = height
-      return Promise.all([
-        dispatch("queryBlock", height).then(block => commit("setBlock", block)),
-        dispatch("queryBlockInfo", height).then(blockMetaInfo =>
-          commit("setBlockMetaInfo", blockMetaInfo)
-        )
-      ]).then(
-        () => {
-          state.blockLoading = false
-        },
-        () => {
-          state.blockLoading = false
-        }
-      )
+      return new Promise((resolve, reject) => {
+        state.blockLoading = true
+        state.blockHeight = height
+        return Promise.all([
+          dispatch("queryBlock", height).then(block =>
+            commit("setBlock", block)
+          ),
+          dispatch("queryBlockInfo", height).then(blockMetaInfo =>
+            commit("setBlockMetaInfo", blockMetaInfo)
+          )
+        ])
+          .then(() => {
+            state.blockLoading = false
+            dispatch("queryTxInfo", height)
+              .then(blockTxInfo => {
+                commit("setBlockTxInfo", blockTxInfo)
+                resolve()
+              })
+              .catch(error => {
+                return reject(error)
+              })
+          })
+          .catch(error => {
+            state.blockLoading = false
+            return reject(error)
+          })
+      })
     },
     async queryBlock({ state, commit }, height) {
       return new Promise(resolve => {
@@ -61,6 +79,60 @@ export default ({ commit, node }) => {
         })
       })
     },
+    async queryTxInfo({ state, dispatch }, height) {
+      let blockTxInfo = state.blockTxs.find(
+        b => b.length && b[0].height === height
+      )
+      if (blockTxInfo) {
+        return blockTxInfo
+      }
+      try {
+        blockTxInfo = await dispatch("getTxs", {
+          key: 0,
+          len:
+            state.block && state.block.data && state.block.data.txs
+              ? state.block.data.txs.length
+              : 0,
+          txs:
+            state.block && state.block.data && state.block.data.txs
+              ? state.block.data.txs.slice(0)
+              : []
+        })
+        blockTxInfo && state.blockTxs.push(blockTxInfo)
+        return blockTxInfo
+      } catch (error) {
+        return Promise.reject(error)
+      }
+    },
+    getTxs({ state, commit, dispatch }, { key, len, txs }) {
+      //  this function is recursice promie used as an async loop in order to query all tx
+      // found in a block. it's made similarly to queryBlockInfo only there
+      // is more than one async call to make. the txstring is included but might not
+      // actually be useful. etherscan.io includes something similar but it's seldom helpful
+      return new Promise(async (resolve, reject) => {
+        if (key >= len) return resolve(txs)
+        let txstring = atob(txs[key])
+        let hash = await convertTx(txs[key])
+        node
+          .txs(hash)
+          .then(data => {
+            data.string = txstring
+            txs[key] = data
+            dispatch("getTxs", { key: key + 1, len, txs })
+              .then(txs => {
+                resolve(txs)
+              })
+              .catch(reject)
+          })
+          .catch(err => {
+            commit("notifyError", {
+              title: `Couldn't query block`,
+              body: err.message
+            })
+            reject(err)
+          })
+      })
+    },
     async queryBlockInfo({ state, commit }, height) {
       let blockMetaInfo = state.blockMetas.find(b => b.header.height === height)
       if (blockMetaInfo) {
@@ -77,7 +149,7 @@ export default ({ commit, node }) => {
               })
               resolve(null)
             } else {
-              resolve(data.block_metas[0])
+              resolve(data.block_metas.length ? data.block_metas[0] : null)
             }
           }
         )

app/src/renderer/vuex/modules/wallet.js

@@ -37,7 +37,8 @@ export default ({ commit, node }) => {
     setTransactionTime(state, { blockHeight, blockMetaInfo }) {
       state.history = state.history.map(t => {
         if (t.height === blockHeight) {
-          t.time = blockMetaInfo.header.time
+          // console.log("blockMetaInfo", blockMetaInfo)
+          t.time = blockMetaInfo && blockMetaInfo.header.time
         }
         return t
       })
@@ -103,6 +104,10 @@ export default ({ commit, node }) => {
     },
     async queryTransactionTime({ commit, dispatch }, blockHeight) {
       let blockMetaInfo = await dispatch("queryBlockInfo", blockHeight)
+      // console.log(
+      //   "received blockMetaInfo at height " + blockHeight,
+      //   blockMetaInfo
+      // )
       commit("setTransactionTime", { blockHeight, blockMetaInfo })
     },
     async loadDenoms({ state, commit }) {

package.json

@@ -100,8 +100,10 @@
     "@vue/test-utils": "1.0.0-beta.11",
     "autosize": "4.0.2",
     "axios": "0.18.0",
+    "base64-js": "1.3.0",
     "casual": "1.5.19",
     "chart.js": "2.7.2",
+    "create-hash": "1.2.0",
     "electron": "1.8.6",
     "electron-chromedriver": "1.8.0",
     "electron-ga": "1.0.6",
@@ -128,6 +130,7 @@
     "tendermint-crypto": "github:mappum/js-crypto",
     "toml": "2.3.3",
     "user-home": "2.0.0",
+    "varint": "5.0.0",
     "vue": "2.5.16",
     "vue-directive-tooltip": "1.4.5",
     "vue-electron": "1.0.6",

test/unit/specs/components/common/NiModalSearch.spec.js

@@ -4,7 +4,7 @@ import Vuelidate from "vuelidate"
 
 describe("NiModalSearch", () => {
   let wrapper, store
-  let { mount, shallow, localVue } = setup()
+  let { mount, localVue } = setup()
 
   beforeEach(() => {
     let instance = mount(NiModalSearch, { propsData: { type: "transactions" } })
@@ -55,4 +55,14 @@ describe("NiModalSearch", () => {
         .trim()
     ).toBe("Find")
   })
+
+  it("should go to block", () => {
+    wrapper.vm.$router.go("balances")
+    wrapper.setProps({ type: "blocks" })
+    store.commit("setSearchVisible", ["blocks", true])
+    expect(wrapper.vm.$route.name).toBe("balances")
+    wrapper.vm.query = "1"
+    wrapper.vm.gotoBlock()
+    expect(wrapper.vm.$route.name).toBe("block")
+  })
 })