2023 更新

package.json

@@ -7,11 +7,13 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "uploadFromMacOS": "sudo scp -i 410.pem -r /Volumes/Code/Customer/410/ethereum_viewer_webapp/dist ec2-user@3.227.34.41:/webapp/frontend-blockchain",
-    "uploadFromWindows": "scp -i 410.pem -r C:/Users/skyfffire/WebstormProjects/ethereum_viewer_webapp/dist ec2-user@3.227.34.41:/webapp/frontend-blockchain"
+    "uploadFromWindows": "scp -i 410.pem -r C:/Users/skyfffire/WebstormProjnpm install jqueryects/ethereum_viewer_webapp/dist ec2-user@3.227.34.41:/webapp/frontend-blockchain"
   },
   "dependencies": {
     "@mdi/font": "^5.6.55",
     "core-js": "^3.6.5",
+    "jquery": "^3.6.3",
+    "jsdom": "^21.1.0",
     "md5-node": "^1.0.1",
     "vue": "^2.6.11",
     "vuetify": "^2.2.11"

src/App.vue

@@ -5,12 +5,13 @@
     <v-app-bar app elevation="1">
       <div class="d-flex align-center">
         <v-img contain
-               alt="Logo" class="shrink mr-2" src="./assets/logo-ether.png" transition="scale-transition" width="180" />
+               alt="Logo" class="shrink mr-2" src="./assets/logo-ether.png" transition="scale-transition" width="180"/>
       </div>
 
       <v-tabs v-if="calcPwdMD5() === pwdMD5" v-model="tab">
         <v-tab key="history">History</v-tab>
         <v-tab key="pending">Pending</v-tab>
+        <v-tab v-if="ifShowHl" key="houliang">houliang</v-tab>
       </v-tabs>
 
       <v-spacer></v-spacer>
@@ -27,12 +28,15 @@
         <v-container>
           <v-row>
             <v-col cols="4"></v-col>
-            <v-col cols="4"><v-img src="./assets/banner.svg"></v-img></v-col>
+            <v-col cols="4">
+              <v-img src="./assets/banner.svg"></v-img>
+            </v-col>
           </v-row>
           <v-row>
             <v-col cols="3"></v-col>
             <v-col cols="6">
-              <v-text-field outlined append-icon="mdi-cloud-search" label="Search Address" type="text" v-model="pwd" @click:append="jump"></v-text-field>
+              <v-text-field outlined append-icon="mdi-cloud-search" label="Search Address" type="text" v-model="pwd"
+                            @click:append="jump"></v-text-field>
             </v-col>
             <v-col cols="3"></v-col>
           </v-row>
@@ -44,8 +48,8 @@
             <v-col cols="3"></v-col>
             <v-col cols="6">
               <v-select persistent-hint return-object single-line
-                  item-text="networkName" item-value="id" label="请选择Chain"
-                  :items="chainList" :hint="`${chain.id}   ${chain.networkName}`" v-model="chain"></v-select>
+                        item-text="networkName" item-value="id" label="请选择Chain"
+                        :items="chainList" :hint="`${chain.id}   ${chain.networkName} ${chain.explorer}`" v-model="chain"></v-select>
             </v-col>
           </v-row>
           <v-row align="center" v-if="chain.id !== ''">
@@ -63,6 +67,9 @@
         <v-tab-item key="pending">
           <Pending :chain="chain"></Pending>
         </v-tab-item>
+        <v-tab-item v-if="ifShowHl" key="houliang">
+          <houliang :chain="chain"></houliang>
+        </v-tab-item>
       </v-tabs-items>
     </v-main>
   </v-app>
@@ -72,6 +79,7 @@
 
 import History from '@/components/History'
 import Pending from '@/components/Pending'
+import houliang from '@/components/hl/houliang'
 import HttpKit from "@/plugins/kit/HttpKit";
 import Chain from '@/plugins/model/Chain.js'
 import md5 from 'md5-node'
@@ -80,24 +88,27 @@ export default {
   name: 'App',
   components: {
     History,
-    Pending
+    Pending,
+    houliang,
   },
   data: () => ({
     tab: 'history',
     chain: {
       id: '',
-      networkName: ''
+      networkName: '',
+      explorer: '',
     },
     selected: false,
     chainList: [],
     pwdMD5: '7f5029bbd4daae18f3ae4cd910f0f4f0',
-    pwd: process.env.NODE_ENV === 'development' ? 'qwe410410' : ''
+    pwd: process.env.NODE_ENV === 'development' ? 'qwe410410' : '',
+    ifShowHl: process.env.NODE_ENV === 'development' ? true : false
   }),
   methods: {
-    calcPwdMD5 () {
+    calcPwdMD5() {
       return md5(this.pwd)
     },
-    jump () {
+    jump() {
       window.open('https://etherscan.io/address/' + this.pwd)
     },
     selectConfirm() {

src/components/History.vue

@@ -4,7 +4,7 @@
     <Top :query='query' :page='page' :table='table'></Top>
 
     <!-- 中间表格组件 -->
-    <Table :query='query' :page='page' :table='table' :tx="tx"></Table>
+    <Table :query='query' :page='page' :table='table' :tx="tx" :explorer="chain.explorer" ref="table"></Table>
   </v-card>
 </template>
 
@@ -22,7 +22,7 @@ export default {
     query: {
       tx: {
         block: '',
-        hash: '',
+        hash: '0x1a97a8fe340933a8b050dd3d1c823116d31178a253a74ea5a42ea909b37901c4',
         from: '',
         to: ''
       },
@@ -43,7 +43,7 @@ export default {
       groupDesc: true,
       sortBy: ['blockNumber', 'index'],
       sortDesc: [true, false],
-      pageSize: process.env.NODE_ENV === 'development' ? 20 : 200,
+      pageSize: process.env.NODE_ENV === 'development' ? 100 : 200,
       pageNum: 1,
       data: [],
       headers: [
@@ -75,7 +75,9 @@ export default {
       const rst = await this.tx.find(this.query, this.table.pageNum, this.table.pageSize)
 
       if (rst.state) {
+        console.log("data--:",rst)
         this.table.data = TxModel.parseLocalRecordList(rst.data)
+        console.log("data--_:", this.table.data)
         this.$msgkit.success(rst.msg)
       } else {
         this.$msgkit.error(rst.msg)
@@ -85,15 +87,17 @@ export default {
     },
     createTx() {
       if (!this.tx) this.tx = new TxModel(this.chain.id, TxModel.MODULES.HISTORY)
-    }
+    },
   },
   provide() {
     return {
       generateTableData: this.generateTableData
     }
   },
-  async mounted () {
+  async mounted() {
+    await this.$refs.table.remButRegroup()
     await this.generateTableData()
+    await this.$refs.table.addButRegroup()
   }
 }
 </script>

src/components/Pending.vue

@@ -4,7 +4,7 @@
     <Top :query='query' :page='page' :table='table'></Top>
 
     <!-- 中间表格组件 -->
-    <Table :query='query' :page='page' :table='table' :tx="tx"></Table>
+    <Table :query='query' :page='page' :table='table' :tx="tx" :explorer="chain.explorer" ref="table"></Table>
   </v-card>
 </template>
 

src/components/hl/houliang.vue

@@ -0,0 +1,99 @@
+<template>
+  <v-card elevation="1">
+    <!-- 顶部组件 -->
+    <Top :query='query' :page='page' :table='table'></Top>
+
+    <!-- 中间表格组件 -->
+    <Table :query='query' :page='page' :table='table' :tx="tx"></Table>
+  </v-card>
+</template>
+
+<script>
+import Top from '@/components/viewer/Top'
+import Table from '@/components/viewer/Table'
+import TxModel from '@/plugins/model/TxModel'
+
+export default {
+  name: 'houliang',
+  components: {Top, Table},
+  props: ['chain'],
+  data: () => ({
+    tx: undefined,
+    query: {
+      tx: {
+        block: '',
+        hash: '',
+        from: '',
+        to: ''
+      },
+      transfer: {
+        from: '',
+        to: '',
+        token: ''
+      },
+      autoFlushTime: 0
+    },
+    page: {
+      name: 'houliang Page'
+    },
+    table: {
+      search: '',
+      loading: false,
+      groupBy: 'blockNumber',
+      groupDesc: true,
+      sortBy: ['blockNumber', 'index'],
+      sortDesc: [true, false],
+      pageSize: process.env.NODE_ENV === 'development' ? 20 : 200,
+      pageNum: 1,
+      data: [],
+      headers: [
+        {text: "Option", value: 'option'},
+        {text: 'Block', value: 'blockNumber'},
+        {text: 'Hash', value: 'hash', width: '10%'},
+        {text: 'From', value: 'from'},
+        {text: 'To', value: 'to'},
+        {text: 'GasPrice', value: 'gasPrice'},
+        {text: 'Type', value: 'type'},
+        {text: 'Index', value: 'index'},
+        {text: 'status', value: 'status'},
+        {text: 'isMev', value: 'isMev'},
+        {text: 'isBot', value: 'isBot'},
+        {text: 'timestamp', value: 'timestamp'},
+        {text: 'transfer', value: 'transferList'},
+        {text: 'comment', value: 'comment'}
+      ]
+    },
+  }),
+  methods: {
+    // 获取数据
+    async generateTableData() {
+      this.createTx()
+
+      this.table.loading = true
+      this.table.data.length = 0
+
+      const rst = await this.tx.find(this.query, this.table.pageNum, this.table.pageSize)
+
+      if (rst.state) {
+        this.table.data = TxModel.parseLocalRecordList(rst.data)
+        this.$msgkit.success(rst.msg)
+      } else {
+        this.$msgkit.error(rst.msg)
+      }
+
+      this.table.loading = false
+    },
+    createTx() {
+      if (!this.tx) this.tx = new TxModel(this.chain.id, TxModel.MODULES.HISTORY)
+    }
+  },
+  provide() {
+    return {
+      generateTableData: this.generateTableData
+    }
+  },
+  async mounted () {
+    await this.generateTableData()
+  }
+}
+</script>

src/components/viewer/Table.vue

@@ -9,7 +9,8 @@
               {{ page.name }}
             </v-col>
             <v-col cols="8">
-              <v-text-field hide-details single-line label="Local Search" append-icon="mdi-magnify" v-model="table.search"/>
+              <v-text-field hide-details single-line label="Local Search" append-icon="mdi-magnify"
+                            v-model="table.search"/>
             </v-col>
           </v-row>
         </v-container>
@@ -20,16 +21,37 @@
         <v-row>
           <v-col cols="2"></v-col>
           <v-col cols="2">
-            <v-text-field required type="number" label="page" v-model="tempPage" @change="inputPageNum" />
+            <v-text-field required type="number" label="page" v-model="tempPage" @change="inputPageNum"/>
           </v-col>
           <v-col cols="4">
-            <v-pagination color="teal" :disabled="table.loading" :length="99" v-model="table.pageNum" @input="generateTableDataAgain"></v-pagination>
+            <v-pagination color="teal" :disabled="table.loading" :length="99" v-model="table.pageNum"
+                          @input="generateTableDataAgain"></v-pagination>
           </v-col>
         </v-row>
       </div>
 
       <!-- 表格主体 -->
       <v-data-table calculate-widths multi-sort hide-default-footer
+                    @current-items="currentItems"
+                    @input="input"
+                    @item-selected="itemSelected"
+                    @item-expanded="itemExpanded"
+                    @page-count="pageCount"
+                    @pagination="pagination"
+                    @toggle-select-all="toggleSelectAll"
+                    @update:expanded="updateExpanded"
+                    @update:group-by="updateGroupBy"
+                    @update:group-desc="updateGroupEesc"
+                    @update:items-per-page="updateItemsPerPage"
+                    @update:multi-sort="updateMultiSort"
+                    @update:must-sort="updateMustSort"
+                    @update:options="updateOptions"
+                    @update:page="updatePage"
+                    @update:sort-by="updateSortBy"
+                    @update:sort-desc="updateSortDesc"
+                    @toggle="toggle"
+
+                    @dblclick:row="dblclickRow"
                     :group-by="table.groupBy" :group-desc="table.groupDesc"
                     :headers="table.headers" :items="table.data" :search="table.search" :loading="table.loading"
                     :items-per-page="table.pageSize"
@@ -54,7 +76,8 @@
         </template>
         <!-- Hash -->
         <template v-slot:item.hash="{ item }">
-          <v-btn v-if="item.hash.indexOf('0x') !== -1" outlined text target="_blank" @click="httpKit.jumpToExplorer(item.hash, 'tx')">
+          <v-btn v-if="item.hash.indexOf('0x') !== -1" outlined text target="_blank"
+                 @click="httpKit.jumpToExplorer(item.hash, 'tx')">
             {{ hashKit.head5(item.hash) + '..' }}
           </v-btn>
           <v-chip v-else label target="_blank">
@@ -63,7 +86,7 @@
         </template>
         <!-- From -->
         <template v-slot:item.from="{ item }">
-          <v-chip v-if="!item.fromName" label color="indigo lighten-3"  @click="httpKit.jumpToExplorer(item.to)">
+          <v-chip v-if="!item.fromName" label color="indigo lighten-3" @click="httpKit.jumpToExplorer(item.to)">
             {{ hashKit.headAndEnd2(item.from) }}
           </v-chip>
           <v-chip v-else label color="green lighten-3" target="_blank" @click="httpKit.jumpToExplorer(item.from)">
@@ -72,7 +95,7 @@
         </template>
         <!-- to -->
         <template v-slot:item.to="{ item }">
-          <v-chip v-if="!item.toName" label color="indigo lighten-4"  @click="httpKit.jumpToExplorer(item.to)">
+          <v-chip v-if="!item.toName" label color="indigo lighten-4" @click="httpKit.jumpToExplorer(item.to)">
             {{ hashKit.headAndEnd2(item.to) }}
           </v-chip>
           <v-chip v-else label color="indigo lighten-4" @click="httpKit.jumpToExplorer(item.to)">
@@ -136,8 +159,11 @@
           <div v-if="page.name === 'Pending Page'">
             <div class="tradeInfoBtn" @click="showTradeInfo(item)">
               <v-chip v-for="tokenAddress in item.tokenAddressList" :key='tokenAddress'
-                      :color="item.tokenMap[tokenAddress] ? hashKit.generateColorByHash(tokenAddress) : undefined" class="tokenChip">
-                {{ item.tokenMap[tokenAddress] ? item.tokenMap[tokenAddress] : '**' + hashKit.headAndEnd2(tokenAddress) }}
+                      :color="item.tokenMap[tokenAddress] ? hashKit.generateColorByHash(tokenAddress) : undefined"
+                      class="tokenChip">
+                {{
+                  item.tokenMap[tokenAddress] ? item.tokenMap[tokenAddress] : '**' + hashKit.headAndEnd2(tokenAddress)
+                }}
               </v-chip>
             </div>
           </div>
@@ -152,10 +178,11 @@
         <v-row>
           <v-col cols="2"></v-col>
           <v-col cols="2">
-            <v-text-field type="number" required label="page" v-model="tempPage" @change="inputPageNum" />
+            <v-text-field type="number" required label="page" v-model="tempPage" @change="inputPageNum"/>
           </v-col>
           <v-col cols="4">
-            <v-pagination :disabled="table.loading" :length="99" v-model="table.pageNum" @input="generateTableDataAgain"></v-pagination>
+            <v-pagination :disabled="table.loading" :length="99" v-model="table.pageNum"
+                          @input="generateTableDataAgain"></v-pagination>
           </v-col>
         </v-row>
       </div>
@@ -165,7 +192,9 @@
     <v-dialog v-model="transferDetailsDialog.visible" max-width="800">
       <v-card elevation="0">
         <v-card-title>交易详情</v-card-title>
-        <v-card-text><TradeInfo :item="transferDetailsDialog.data"></TradeInfo></v-card-text>
+        <v-card-text>
+          <TradeInfo :item="transferDetailsDialog.data"></TradeInfo>
+        </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn text color="primary" @click="transferDetailsDialog.visible = false">我知道了</v-btn>
@@ -221,11 +250,12 @@ import HashKit from '@/plugins/kit/HashKit'
 import HttpKit from '@/plugins/kit/HttpKit'
 import TimeKit from '@/plugins/kit/TimeKit'
 import AddressModel from "@/plugins/model/AddressModel";
+import jquery from 'jquery'
 
 export default {
   name: 'Table',
   components: {BooleanViewer, TradeInfo},
-  props: ['query', 'page', 'table', 'tx'],
+  props: ['query', 'page', 'table', 'tx', 'explorer'],
   inject: ['generateTableData'],
   data: () => ({
     hashKit: HashKit,
@@ -240,7 +270,8 @@ export default {
       visible: false
     },
     tempPage: 1,
-    addressModel: undefined
+    addressModel: undefined,
+    dblclickRowUrl:"https://tools.blocksec.com/tx/eth/",
   }),
   methods: {
     async deleteByHash(hash_code, item) {
@@ -299,7 +330,9 @@ export default {
       this.tempPage = this.table.pageNum
       this.table.data = []
 
+
       await this.generateTableData()
+      await this.addButRegroup()
     },
     formatTimeBySixBitTimestamp(sixBitTimestamp) {
       let lastThreeBit = (sixBitTimestamp + '').slice(-3)
@@ -311,7 +344,181 @@ export default {
     },
     createAddressModel() {
       if (!this.addressModel) this.addressModel = new AddressModel(this.tx.chainId, AddressModel.MODULES.unknown)
-    }
+    },
+
+
+    currentItems(val) {
+      console.log("currentItems:", val)
+      if(val.length == 0){
+        this.showIfHide(true)
+        console.log("currentItems:---")
+
+      }else {
+        this.showIfHide(false)
+        console.log("currentItems:+++++++++++")
+
+      }
+    },
+    input(val) {
+      console.log("input:", val)
+    },
+    itemSelected(val) {
+      console.log("itemSelected:", val)
+    },
+    pageCount(val) {
+      console.log("pageCount:", val)
+    },
+    pagination(val) {/*12312312312*/
+      console.log("pagination:", val)
+    },
+    toggleSelectAll(val) {
+      console.log("toggleSelectAll:", val)
+    },
+    updateExpanded(val) {
+      console.log("updateExpanded:", val)
+    },
+    updateGroupBy(val) {
+      console.log("updateGroupBy:", val)
+    },
+    updateGroupEesc(val) {
+      console.log("updateGroupEesc:", val)
+    },
+    updateItemsPerPage(val) {
+      console.log("updateItemsPerPage:", val)
+    },
+
+    updateMultiSort(val) {
+      console.log("updateMultiSort:", val)
+    },
+
+    updateMustSort(val) {
+      console.log("updateMustSort:", val)
+    },
+
+    updateOptions(val) {
+      console.log("updateOptions:", val)
+    },
+
+    updatePage(val) {
+      console.log("updatePage:", val)
+    },
+    updateSortBy(val) {
+      console.log("updateSortBy:", val)
+    },
+    updateSortDesc(val) {
+      console.log("updateSortDesc:", val)
+    },
+
+    itemExpanded(item, val) {
+      console.log("itemExpanded:", item, val)
+    },
+
+    toggle(val) {
+      console.log("toggle:", val)
+    },
+    dblclickRow(event,value){
+      console.log("dblclickRow:", event,value)
+    },
+
+
+    //赋予按钮第二个点击事件
+    addButClick(explorer) {
+      jquery("div.v-data-table__wrapper table tbody").on("click", ".v-row-group__header td.text-start", function (dom) {
+        //需要移除临时 并已经作废的标签
+        var array_del = jquery("a.temporary_label")
+        for (var d = 0; d < array_del.length; d++) {
+          var a = array_del.eq(d)[0]
+          var tr = jquery(jquery(a).parent().parent())[0]
+          var className = tr.className
+          console.log("addButRegroup--移除---", a,)
+          if(className.indexOf("v-row-group__header") === -1){
+            jquery(a).remove()
+          }
+        }
+
+        var array = jquery("div.v-data-table__wrapper table tbody .v-row-group__header td.text-start");
+        console.log("addButRegroup-监听-----", array)
+        for (var i = 0; i < array.length; i++) {
+          console.log("index:", array.eq(i))
+          //思路：根据 jq 拿到对应的td 然后循环遍历  动态添加元素标签
+          var td = array.eq(i)[0]
+          var innerText = td.innerText
+          var but_x = jquery(td).children()[1]
+          console.log("addButRegroup--对象获取---", but_x)
+          if (jquery(td).children().length > 2) {
+
+          } else {
+            //添加
+            var href = explorer + "/block/" + innerText.split(": ")[1];
+            var a = '<a  class="temporary_label" href="' + href + '" target="_blank"> 跳转 </a>';
+            jquery(but_x).before(a)
+          }
+        }
+      })
+    },
+    //添加跳转标签
+    addButRegroup() {
+      var array = jquery("div.v-data-table__wrapper table tbody .v-row-group__header td.text-start");
+      console.log("addButRegroup-监听-----", array)
+      for (var i = 0; i < array.length; i++) {
+        console.log("index:", array.eq(i))
+        //思路：根据 jq 拿到对应的td 然后循环遍历  动态添加元素标签
+        var td = array.eq(i)[0]
+        var innerText = td.innerText
+
+        var but_x = jquery(td).children()[1]
+        console.log("addButRegroup--对象获取---", but_x)
+        if (jquery(td).children().length > 2) {
+
+        } else {
+          //添加
+          var href = this.explorer + "/block/" + innerText.split(": ")[1];
+          var a = '<a class="temporary_label" href="' + href + '" target="_blank"> 跳转 </a>';
+          jquery(but_x).before(a)
+        }
+      }
+    },
+    //移除
+    remButRegroup() {
+      //需要移除临时 并已经作废的标签
+      var array_del = jquery("a.temporary_label")
+      for (var d = 0; d < array_del.length; d++) {
+        var a = array_del.eq(d)[0]
+        var tr = jquery(jquery(a).parent().parent())[0]
+        var className = tr.className
+        console.log("addButRegroup--移除---", a,)
+        if(className.indexOf("v-row-group__header") === -1){
+          jquery(a).remove()
+        }
+      }
+    },
+    showIfHide(boo){
+     var array =  jquery("a.temporary_label")
+      console.log("array",array)
+      if(array.length > 0){
+        var a = array[0]
+        console.log("a",a)
+        if(boo)
+          jquery(a).hide()
+        else
+          jquery(a).show()
+      }
+
+    },
+
+  },
+  async mounted() {
+    this.addButClick(this.explorer)
+    // let vm = new Vue({
+    //   el: "td.text-start",
+    //   click: () => {
+    //     console.log('点击')
+    //   }
+    // });
+
+    // $("td.text-start").on("click",this,function (){
+    //   console.log('点击')
+    // });
   }
 }
 </script>
@@ -324,21 +531,25 @@ export default {
 #dataTableHeader {
   max-width: none;
 }
+
 .tokenChip {
   margin-top: 5px;
   margin-left: 5px;
   margin-bottom: 5px;
 }
+
 .tradeInfoBtn {
   padding: 15px !important;
   border: grey 2px solid;
 }
+
 .tradeInfoBtn:hover {
   background: beige;
 }
+
 .memo-span {
   width: 200px;
-  display:block;
+  display: block;
   padding: 10px;
 }
 </style>

src/components/viewer/Top.vue

@@ -24,6 +24,7 @@
         </v-btn>
       </v-col>
     </v-row>
+
     <v-row>
       <!-- transfer信息过滤 -->
       <v-col cols="18" md="2">

src/components/viewer/table/TradeInfoDetails.vue

@@ -17,6 +17,8 @@
             <div class="tokenName">{{ trade.tokenSymbol === '' ? '[no name]' : trade.tokenSymbol }}</div>
             <div class="tokenAmount">{{ numKit.getSubFloat(trade.amount, 4) }}</div>
           </v-chip>
+
+
           <!--from-->
           <div>
             <v-chip v-if="trade.from === item.from"

src/main.js

@@ -3,6 +3,8 @@ import App from './App.vue'
 import vuetify from './plugins/vuetify';
 import MsgKit from '@/plugins/kit/MsgKit.js'
 import './plugins/network'
+import jquery from 'jquery'
+
 
 // 标题指令
 Vue.directive('title', {
@@ -16,5 +18,6 @@ Vue.prototype.$msgkit = MsgKit
 
 new Vue({
   vuetify,
+  jquery, //添加该行即可
   render: h => h(App)
 }).$mount('#app')

src/plugins/model/TxModel.js

@@ -1,101 +1,106 @@
 import http from 'axios'
 
 export default class TxModel {
-  static MODULES = {
-    HISTORY: 'history',
-    PENDING: 'pending'
-  }
-
-  constructor(chainId, module) {
-    if (!chainId || !module) throw "Must have [chainId, module]."
-
-    this.chainId = chainId
-    this.module = module
-  }
-
-  async find(conditions, pageNumber=1, pageSize=200) {
-    const url = `/${this.module}/findByChainId`
-    const rst = await http.post(url, {
-      chainId: this.chainId,
-      pageNumber: pageNumber,
-      pageSize: pageSize,
-      conditions: conditions
-    })
-
-    return rst.data
-  }
-
-  async findByHash(hash) {
-    const url = `/${this.module}/findByChainIdAndHash`
-    const rst = await http.post(url, {
-      chainId: this.chainId,
-      hash: hash
-    })
-
-    return rst.data
-  }
-
-  async updateTxBaseModel(txBaseItem) {
-    const url = `/tx/update`
-
-    txBaseItem.chainId = this.chainId
-    const rst = await http.post(url, txBaseItem)
-
-    return rst.data
-  }
-
-  static parseLocalRecordList(remoteRecordList) {
-    let localRecordList = []
-    for (let remoteRecord of remoteRecordList) {
-      let localRecord = TxModel.parseLocalRecord(remoteRecord)
-
-      if (localRecord) localRecordList.push(localRecord)
+    static MODULES = {
+        HISTORY: 'history',
+        PENDING: 'pending'
     }
 
-    return localRecordList
-  }
-
-  static parseLocalRecord(remoteRecord) {
-    try {
-      let localRecord = {}
-
-      localRecord.hash = remoteRecord.hash
-      localRecord.blockNumber = remoteRecord.blockNumber
-      localRecord.comment= remoteRecord.comment
-      localRecord.from = remoteRecord.fromAddress
-      localRecord.to = remoteRecord.toAddress
-      localRecord.gasPrice = TxModel.parseGasPrice(remoteRecord.gasPriceStr)
-      localRecord.timestamp = remoteRecord.timestamp ? remoteRecord.timestamp : 0
-      localRecord.transferList = remoteRecord.transferList
-      localRecord.fromName = remoteRecord.fromName
-      localRecord.toName = remoteRecord.toName
-      localRecord.status = parseInt(remoteRecord.status)
-      localRecord.index = parseInt(remoteRecord.transactionIndex)
-      localRecord.type = parseInt(remoteRecord.tradeType)
-
-      // transferList的format
-      for (const transfer of localRecord.transferList) {
+    constructor(chainId, module) {
+        if (!chainId || !module) throw "Must have [chainId, module]."
+
+        this.chainId = chainId
+        this.module = module
+    }
+
+    async find(conditions, pageNumber = 1, pageSize = 200) {
+        const url = `/${this.module}/findByChainId`
+        const rst = await http.post(url, {
+            chainId: this.chainId,
+            pageNumber: pageNumber,
+            pageSize: pageSize,
+            conditions: conditions
+        })
+
+        return rst.data
+    }
+
+    async findByHash(hash) {
+        const url = `/${this.module}/findByChainIdAndHash`
+        const rst = await http.post(url, {
+            chainId: this.chainId,
+            hash: hash
+        })
+
+        return rst.data
+    }
+
+    async updateTxBaseModel(txBaseItem) {
+        const url = `/tx/update`
+
+        txBaseItem.chainId = this.chainId
+        const rst = await http.post(url, txBaseItem)
+
+        return rst.data
+    }
+
+    static parseLocalRecordList(remoteRecordList) {
+        let localRecordList = []
+        for (let remoteRecord of remoteRecordList) {
+            let localRecord = TxModel.parseLocalRecord(remoteRecord)
+
+            if (localRecord) localRecordList.push(localRecord)
+        }
+
+        return localRecordList
+    }
+
+    static parseLocalRecord(remoteRecord) {
         try {
-          transfer.amount = parseInt(transfer.amountStr) / (10 ** transfer.tokenDecimals)
+            let localRecord = {}
+
+            localRecord.hash = remoteRecord.hash
+            localRecord.blockNumber = remoteRecord.blockNumber
+            localRecord.comment = remoteRecord.comment
+            localRecord.from = remoteRecord.fromAddress
+            localRecord.to = remoteRecord.toAddress
+            localRecord.gasPrice = TxModel.parseGasPrice(remoteRecord.gasPriceStr)
+            localRecord.timestamp = remoteRecord.timestamp ? remoteRecord.timestamp : 0
+            localRecord.transferList = remoteRecord.transferList
+            localRecord.fromName = remoteRecord.fromName
+            localRecord.toName = remoteRecord.toName
+            localRecord.status = parseInt(remoteRecord.status)
+            localRecord.index = parseInt(remoteRecord.transactionIndex)
+            localRecord.type = parseInt(remoteRecord.tradeType)
+            if (isNaN( localRecord.type))
+                localRecord.type = ''
+
+            // transferList的format
+            for (const transfer of localRecord.transferList) {
+                try {
+                    transfer.amount = parseInt(transfer.amountStr) / (10 ** transfer.tokenDecimals)
+                } catch (e) {
+                    transfer.amount = parseInt(transfer.amountStr)
+                }
+
+                if (isNaN(transfer.amount))
+                    transfer.amount = 0
+            }
+            localRecord.isMev = remoteRecord.isMev === true
+            localRecord.isBot = remoteRecord.isBot === true
+            localRecord.maybeBot = remoteRecord.maybeBot === true
+
+            return localRecord
         } catch (e) {
-          transfer.amount = parseInt(transfer.amountStr)
+            return undefined
         }
-      }
-      localRecord.isMev = remoteRecord.isMev === true
-      localRecord.isBot = remoteRecord.isBot === true
-      localRecord.maybeBot = remoteRecord.maybeBot === true
-
-      return localRecord
-    } catch (e) {
-      return undefined
     }
-  }
 
-  static parseGasPrice(gasPriceStr) {
-    try {
-      return parseFloat(gasPriceStr) / 1e9
-    } catch (e) {
-      return gasPriceStr
+    static parseGasPrice(gasPriceStr) {
+        try {
+            return parseFloat(gasPriceStr) / 1e9
+        } catch (e) {
+            return gasPriceStr
+        }
     }
-  }
 }