src/views/assetList.vue

   1 <style lang="" scoped>
   2   .topbar {
   3     font-size: 19px;
   4     display:flex;
   5   }
   6   .topbar .topbar-left {
   7     overflow:hidden;
   8     white-space:nowrap;
   9   }
  10
  11   .topbar .topbar-middle {
  12     margin-top: 10px;
  13     padding: 0 20px;
  14     text-align: center;
  15     width: 245px;
  16   }
  17
  18 .topbar-left .btn-menu i {
  19     font-size: 100%;
  20 }
  21 .alias {
  22     font-size: 13px;
  23 }
  24
  25 .content {
  26     text-align: center;
  27     padding: 20px 30px;
  28 }
  29
  30 .content .amount {
  31     padding-bottom: 10px;
  32 }
  33 .content .token-amount {
  34     font-size: 32px;
  35     line-height: 45px;
  36 }
  37
  38 .transaction-title h3 {
  39     font-size: 16px;
  40     font-weight: inherit;
  41     padding: 10px 0 10px 20px;
  42 }
  43 .transactions {
  44   font-size: 15px;
  45   height: 340px;
  46 }
  47 .list-item {
  48     padding: 10px 20px;
  49     display: flex;
  50     justify-content: space-between;
  51     position: relative;
  52 }
  53
  54 .list-item:after {
  55     content:"";
  56     background: #e0e0e0;
  57     position: absolute;
  58     bottom: 0;
  59     left: 20px;
  60     height: 1px;
  61     width: 90%;
  62 }
  63 .addr{
  64   font-size: 12px;
  65 }
  66
  67
  68 .no-record{
  69   display: block;
  70 }
  71
  72   .symbol{
  73     margin-bottom: -8px;
  74     font-size:15px;
  75   }
  76
  77 </style>
  78
  79 <template>
  80     <div class="warp-chlid bg-white">
  81         <section class="bg-image">
  82           <div class="topbar">
  83             <div class="topbar-left">
  84               <i class="iconfont icon-back" @click="close"></i>
  85             </div>
  86             <div class="topbar-middle">
  87               <div v-if="currentAsset!=undefined" class="amount color-white">
  88                 <div v-if="currentAsset.symbol!=='Asset'">
  89                   <div class="symbol">
  90                     {{currentAsset.symbol}}
  91                   </div>
  92
  93                   <div class="alias color-grey">{{currentAsset.name}}</div>
  94                 </div>
  95                 <div v-else>
  96                   <div class="symbol">
  97                     Asset
  98                   </div>
  99
 100                   <div class="alias color-grey">{{shortAddress(currentAsset.asset)}}</div>
 101                 </div>
 102               </div>
 103             </div>
 104           </div>
 105             <div class="content">
 106                 <div v-if="currentAsset!=undefined" class="amount color-white">
 107                     <div class="token-amount">
 108                         {{itemBalance(currentAsset)}}
 109                     </div>
 110                     <div>{{formatCurrency(currentAsset[ currency ])}}</div>
 111                 </div>
 112             </div>
 113         </section>
 114             <section class="transaction-title">
 115                 <h3 class="bg-gray color-grey">{{ $t('main.record') }}</h3>
 116             </section>
 117             <section class="transactions">
 118                   <div class="transactions" v-if="transactions.length != 0">
 119                       <vue-scroll ref="vs" @handle-scroll="handleScroll">
 120                       <ul class="list">
 121                           <li class="list-item" v-for="(transaction, index) in transactions" :key="index" @click="$router.push({name: 'transfer-info', params: {transaction: transaction, address: currentAccount.address}})">
 122                               <div>
 123                                   <div>{{transaction.address}}</div>
 124                                   <div class="addr color-grey" v-if="transaction.hasOwnProperty('block_timestamp')">
 125                                     {{transaction.submission_timestamp | moment}}
 126                                   </div>
 127                                   <div class="addr color-grey" v-else>
 128                                     {{ $t('main.unconfirmed') }}
 129                                   </div>
 130                               </div>
 131                               <div class="text-align-right">
 132                                 <div class="value">{{transaction.direct}} {{transaction.val}}</div>
 133                                 <div v-if="transaction.type == 'vote'" class="addr color-grey">{{ $t('listVote.vote')}} {{transaction.vAmount}}</div>
 134                                 <div v-else-if="transaction.type == 'veto'" class="addr color-grey">{{ $t('listVote.cancelVote')}}  {{transaction.vAmount}}</div>
 135                                 <div v-else-if="transaction.type == 'crossChain'" class="addr color-grey">{{ $t('crossChain.title')}}</div>
 136                               </div>
 137                           </li>
 138                       </ul>
 139                   </vue-scroll>
 140                   </div>
 141                   <div v-else>
 142                       <div class="bg-emptytx"></div>
 143                       <div>
 144                           <span class="color-lightgrey center-text no-record">{{$t('main.noRecord')}}</span>
 145                       </div>
 146                   </div>
 147             </section>
 148
 149     </div>
 150 </template>
 151
 152 <script>
 153 import address from "@/utils/address";
 154 import query from "@/models/query";
 155 import transaction from "@/models/transaction";
 156 import { BTM } from "@/utils/constants";
 157 import { mapActions, mapGetters, mapState } from 'vuex'
 158 import * as Actions from '@/store/constants';
 159 import _ from 'lodash';
 160 import { Number as Num } from "@/utils/Number"
 161
 162
 163 const EnterActive = 'animated faster fadeInLeft';
 164 const LeaveActive = 'animated faster fadeOutLeft';
 165 export default {
 166     name: "",
 167     data() {
 168         return {
 169             asset:null,
 170             transactions: [],
 171             maskShow: false,
 172             start: 0,
 173             limit: 10,
 174             enterActive: EnterActive,
 175             leaveActive: LeaveActive,
 176         };
 177     },
 178     watch: {
 179         '$route'(to, from) {
 180             if (to.name.startsWith('menu')) {
 181                 this.maskShow = true
 182             } else if (from.name.startsWith('menu')) {
 183                 this.maskShow = false
 184             }
 185
 186             // remove transition for some page
 187             this.enterActive = EnterActive
 188             this.leaveActive = LeaveActive
 189         },
 190       'currentAccount.balances'() {
 191         this.$refs['vs'].scrollTo(
 192           {
 193             y: 0
 194           },
 195           500,
 196           'easeInQuad'
 197         );
 198           this.start = 0
 199           this.refreshTransactions( this.start, this.limit).then(transactions => {
 200             this.transactions = transactions
 201           });
 202       },
 203     },
 204     computed: {
 205         ...mapState([
 206           'bytom',
 207           'currentAsset',
 208           'listVote'
 209         ]),
 210         ...mapGetters([
 211           'currentAccount',
 212           'currency',
 213           'netType'
 214         ])
 215     },
 216     methods: {
 217       close: function () {
 218         this.$router.go(-1)
 219       },
 220       shortAddress: function (add) {
 221         return address.short(add)
 222       },
 223       formatCurrency: function (num) {
 224         return Num.formatCurrency(num, this.currency)
 225       },
 226       itemBalance: function(asset){
 227         if(asset.asset === BTM){
 228           return Num.formatNue(asset.balance,8)
 229         }else{
 230           return Num.formatNue(asset.balance,asset.decimals)
 231         }
 232
 233       },
 234         handleScroll(vertical, horizontal, nativeEvent) {
 235             if (vertical.process == 0) {
 236                 this.start = 0;
 237                 this.refreshTransactions( this.start, this.limit).then(transactions => {
 238                     this.transactions = transactions
 239                 });
 240                 return;
 241             }
 242
 243             if ( (vertical.process == 1) && (this.transactions.length == (this.start+1)*this.limit) ) {
 244                 this.start += this.limit;
 245                 this.refreshTransactions( this.start, this.limit).then(transactions => {
 246                     transactions.forEach(transaction => {
 247                         this.transactions.push(transaction);
 248                     });
 249                 });
 250             }
 251         },
 252         refreshTransactions: function (start, limit) {
 253             return new Promise((resolve, reject) => {
 254                 transaction.list(this.currentAccount.guid, this.currentAsset.asset, start, limit).then(transactions => {
 255                     if (transactions == null) {
 256                         return;
 257                     }
 258
 259                     const formattedTx = this.transactionsFormat(transactions);
 260                     resolve(formattedTx)
 261                 }).catch(error => {
 262                     console.log(error);
 263                     reject(error)
 264                 });
 265             })
 266         },
 267         transactionsFormat: function (transactions) {
 268           const formattedTransactions = []
 269           const assetID = this.currentAsset.asset
 270
 271           transactions.forEach(transaction => {
 272             const balanceObject = transaction.balances
 273               .filter(b => b.asset === assetID);
 274
 275             const filterInput = _.find(transaction.inputs, function(o) { return o.type =='veto'; })
 276             const filterOutput = _.find(transaction.outputs, function(o) { return o.type =='vote'; })
 277
 278             if(filterInput){
 279               transaction.type = 'veto'
 280               const inAmount = _.sumBy((transaction.inputs.filter(i => i.type ==='veto')), 'amount')
 281               const outAmount = _.sumBy((transaction.outputs.filter(i => i.type ==='vote')), 'amount')
 282               transaction.pubkey = filterInput.vote
 283               transaction.vAmount =  Num.formatNue(inAmount-outAmount,8)
 284             }else if(filterOutput){
 285               const outAmount = _.sumBy((transaction.outputs.filter(i => i.type ==='vote')), 'amount')
 286               transaction.pubkey = filterOutput.vote
 287               transaction.vAmount =  Num.formatNue(outAmount,8)
 288               transaction.type = 'vote'
 289             }else if(_.find(transaction.outputs, function(o) { return o.type =='crosschain_output'; })){
 290               transaction.type = 'crossChain'
 291               transaction.cDirection ='Vapor -> Bytom'
 292             }else if(_.find(transaction.inputs, function(o) { return o.type =='crosschain_input'; })){
 293               transaction.type = 'crossChain'
 294               transaction.cDirection ='Bytom -> Vapor'
 295             }
 296
 297             if(balanceObject.length ===1 ){
 298                 const inputAddresses = transaction.inputs
 299                   .filter(input => input.asset === assetID && input.address !== this.currentAccount.address)
 300                   .map(input => input.address)
 301
 302                 const outputAddresses = transaction.outputs
 303                   .filter(output => output.asset === assetID && output.address !== this.currentAccount.address)
 304                   .map(output => output.address)
 305
 306                 let val = Math.abs(balanceObject[0].amount)
 307
 308                 if (Number(balanceObject[0].amount) > 0) {
 309                     transaction.direct = "+";
 310                     const resultAddr = inputAddresses.pop()
 311                     transaction.address = (resultAddr && resultAddr.includes(' '))?resultAddr:address.short(resultAddr);
 312                 } else {
 313                     transaction.direct = "-";
 314                     const resultAddr = outputAddresses.pop()
 315                     transaction.address = (resultAddr && resultAddr.includes(' '))?resultAddr:address.short(resultAddr);
 316                 }
 317
 318                 transaction.val =  Num.formatNue(val, this.currentAsset.decimals) ;
 319                 transaction.fee = transaction.fee / 100000000;
 320
 321                 formattedTransactions.push(transaction);
 322               }
 323             });
 324           return formattedTransactions;
 325         },
 326       ...mapActions([
 327         Actions.UPDATE_STORED_BYTOM,
 328         Actions.SET_LIST_VOTE
 329       ])
 330     },
 331     mounted() {
 332         this.refreshTransactions( this.start, this.limit).then(transactions => {
 333           this.transactions = transactions
 334         });
 335         if(this.listVote.length == 0 && this.netType === 'vapor'){
 336           query.chainStatus().then(resp => {
 337             if(resp){
 338               const votes =  resp.consensus_nodes.map( (item, index) => {
 339                 item.rank = index+1;
 340                 return item
 341               });
 342               this[Actions.SET_LIST_VOTE](votes)
 343             }
 344           })
 345         }
 346     },
 347   };
 348 </script>