src/views/home.vue

   1 <style lang="" scoped>
   2 .warp {
   3     z-index: 1;
   4 }
   5
   6 .topbar {
   7     font-size: 19px;
   8     display:flex;
   9 }
  10 .topbar .topbar-left {
  11     width: 85px;
  12     overflow: hidden;
  13     text-overflow: ellipsis;
  14     white-space: nowrap;
  15     padding-top: 20px;
  16     padding-left: 20px;
  17 }
  18 .topbar-left .btn-menu {
  19     float: left;
  20     margin-right: 8px;
  21 }
  22 .topbar-left .btn-menu i {
  23     font-size: 100%;
  24 }
  25 .alias {
  26     height: 25px;
  27     font-size: 16px;
  28     line-height: 28px;
  29 }
  30
  31 .topbar .topbar-middle {
  32     margin-top: 20px;
  33     margin-right: 20px;
  34     border: 2px solid #fff;
  35     border-radius: 18px;
  36     padding: 0 20px;
  37     font: 12px system-ui;
  38     text-align: center;
  39     display: flex;
  40     align-items: center;
  41 }
  42
  43 .content {
  44     margin-top: 25px;
  45     text-align: center;
  46     padding: 0 30px 10px;
  47 }
  48
  49 .content .amount {
  50     padding-bottom: 10px;
  51 }
  52 .content .token-amount {
  53     font-size: 32px;
  54     line-height: 45px;
  55 }
  56
  57 .btn-send-transfer {
  58   display: flex;
  59   align-items: center;
  60   justify-content: space-evenly;
  61   text-align:center;
  62   position: absolute;
  63   width: 320px;
  64   height: 102px;
  65   left: 20px;
  66   top: 165px;
  67   background: #FFFFFF;
  68   box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.08);
  69   border-radius: 4px;
  70   color: black;
  71   font-size: 12px;
  72 }
  73
  74 .transaction-title{
  75   margin-top: 55px;
  76 }
  77
  78 .transaction-title h3 {
  79     font-size: 14px;
  80     font-weight: inherit;
  81     padding: 10px 0 10px 20px;
  82 }
  83 .transactions {
  84   font-size: 15px;
  85   height: 340px;
  86   overflow: auto;
  87 }
  88 .list-item {
  89     position: relative;
  90     display: block;
  91     padding: 10px 20px;
  92     height: 52px;
  93      border-bottom: solid 1px rgba(0, 0, 0, 0.04)
  94 }
  95
  96 .network-select{
  97   text-transform: capitalize;
  98 }
  99
 100 .btn-creation {
 101     display: block;
 102     width: 310px;
 103     height: 48px;
 104     margin: auto;
 105     padding: 15px 0;
 106     position: absolute;
 107     bottom: 20px;
 108     left: 20px;
 109 }
 110
 111 .addr{
 112   font-size: 12px;
 113 }
 114
 115 .no-record{
 116   display: block;
 117 }
 118
 119   .bg-image{
 120     height: 216px;
 121   }
 122
 123 .icon{
 124   width: 40px;
 125   height: 40px;
 126 }
 127 .icon-crosschain-svg{
 128   background-image: url('../assets/img/icon/crosschain.svg');
 129 }
 130 .icon-vote-svg{
 131   background-image: url('../assets/img/icon/vote.svg');
 132 }
 133 .icon-receive-svg{
 134   background-image: url('../assets/img/icon/receive.svg');
 135 }
 136 .icon-send-svg{
 137   background-image: url('../assets/img/icon/send.svg');
 138 }
 139
 140 </style>
 141
 142 <template>
 143     <div class="warp">
 144         <section class="bg-image">
 145             <div class="topbar">
 146                 <div class="topbar-left">
 147                     <a class="btn-menu" @click="openMenu">
 148                         <i class="iconfont icon-menu"></i>
 149                     </a>
 150                 </div>
 151                 <div class="topbar-middle bg-secondary">
 152                     <select class="network-select" :value="netType" @change="netTypeToggle">
 153                         <option value="bytom">{{ $t('main.bytom') }} {{net}}</option>
 154                         <option value="vapor">{{ $t('main.vapor') }} {{net}}</option>
 155                     </select>
 156                 </div>
 157             </div>
 158             <div class="content">
 159                 <div v-if="address!=undefined" class="amount color-white">
 160                     <span class="alias color-grey">{{currentAccount.alias}}</span>
 161                     <div class="token-amount">
 162                         {{accountBalance}}
 163                     </div>
 164                 </div>
 165                 <div v-else>
 166                   <p style="width: 250px; margin: 45px auto; text-align: center;">{{ $t('main.noAccount') }}</p>
 167
 168                 </div>
 169             </div>
 170             <div v-if="netType =='vapor' && address!=undefined" class="btn-send-transfer">
 171
 172                 <a @click="listVoteOpen">
 173                   <div class="icon icon-vote-svg"></div>
 174                   <div>{{ $t('main.vote') }}</div>
 175                 </a>
 176                 <a @click="crossChainOpen">
 177                   <div class="icon icon-crosschain-svg"></div>
 178                   <div>{{ $t('main.crossChain') }}</div>
 179                 </a>
 180                 <a  @click="showQrcode">
 181                   <div class="icon icon-receive-svg"></div>
 182                   <div>{{ $t('main.receive') }}</div>
 183                 </a>
 184                 <a  @click="transferOpen">
 185                   <div class="icon icon-send-svg"></div>
 186                   <div>{{ $t('main.send') }}</div>
 187                 </a>
 188             </div>
 189             <div v-else-if="address!=undefined" class="btn-send-transfer">
 190                 <a @click="showQrcode">
 191                   <div class="icon icon-receive-svg"></div>
 192                   <div>{{ $t('main.receive') }}</div>
 193                 </a>
 194                 <a @click="transferOpen">
 195                   <div class="icon icon-send-svg"></div>
 196                   <div>{{ $t('main.send') }}</div>
 197                 </a>
 198             </div>
 199         </section>
 200       <section v-if="address!=undefined" class="transaction-title">
 201       <h3 class="color-black">{{ $t('main.asset') }}</h3>
 202       </section>
 203       <section class="transactions">
 204         <div v-if="address!=undefined">
 205         <div v-if="balances && balances.length > 0">
 206           <ul class="list">
 207             <li class="list-item" v-for="(asset, index) in balances" :key="index" @click="assetOpen(asset)">
 208               <div class="float-right text-align-right">
 209                 <div class="value">{{ itemBalance(asset) }}</div>
 210                 <div class="addr color-grey">{{ formatCurrency(asset[ currency ]) }}</div>
 211               </div>
 212               <div v-if="asset.symbol">
 213                 <div class="uppercase">
 214                   {{asset.symbol}}
 215                 </div>
 216
 217                 <div class="addr color-grey">{{asset.name}}</div>
 218               </div>
 219               <div v-else>
 220                 <div>
 221                   Asset
 222                 </div>
 223
 224                 <div class="addr color-grey uppercase">{{shortAddress(asset.asset)}}</div>
 225               </div>
 226
 227             </li>
 228           </ul>
 229         </div>
 230           <div v-else>
 231             <div class="bg-emptytx"></div>
 232             <div>
 233               <span class="color-lightgrey center-text no-record">{{$t('main.noAssetRecord')}}</span>
 234             </div>
 235           </div>
 236         </div>
 237         <div v-else>
 238           <router-link :to="{name: 'menu-account-creation'}">
 239             <div class="bg-emptytx"></div>
 240             <div>
 241               <span class="color-lightgrey center-text no-record">{{$t('main.noAssetRecord')}}</span>
 242             </div>
 243             <a class="btn btn-primary btn-creation">{{ $t('main.create') }}</a>
 244           </router-link>
 245         </div>
 246       </section>
 247
 248         <!-- child page -->
 249         <div class="mask" v-show="maskShow"></div>
 250         <transition :enter-active-class="enterActive" :leave-active-class="leaveActive">
 251             <router-view></router-view>
 252         </transition>
 253
 254     </div>
 255 </template>
 256
 257 <script>
 258 import address from "@/utils/address";
 259 import account from "@/models/account";
 260 import transaction from "@/models/transaction";
 261 import { BTM } from "@/utils/constants";
 262 import { mapActions, mapGetters, mapState } from 'vuex'
 263 import * as Actions from '@/store/constants';
 264 import _ from 'lodash';
 265 import { Number as Num } from "@/utils/Number"
 266
 267
 268 const EnterActive = 'animated faster fadeInLeft';
 269 const LeaveActive = 'animated faster fadeOutLeft';
 270 export default {
 271     name: "",
 272     data() {
 273         return {
 274             transactions: [],
 275             maskShow: false,
 276             start: 0,
 277             limit: 10,
 278             enterActive: EnterActive,
 279             leaveActive: LeaveActive,
 280         };
 281     },
 282     watch: {
 283         '$route'(to, from) {
 284             if (to.name.startsWith('menu')) {
 285                 this.maskShow = true
 286             } else if (from.name.startsWith('menu')) {
 287                 this.maskShow = false
 288             }
 289
 290             // remove transition for some page
 291             this.enterActive = EnterActive
 292             this.leaveActive = LeaveActive
 293             if (to.name == 'transfer-confirm' || from.name == 'transfer-confirm') {
 294                 this.enterActive = ''
 295                 this.leaveActive = ''
 296             }
 297             if (from.name == 'transfer-confirm') {
 298               this.setupNetwork()
 299             }
 300         },
 301         currentAccount(newVal, oldVal) {
 302             if (newVal.guid == undefined){
 303               return;
 304             }
 305
 306             let addr
 307             if(this.netType === 'vapor'){
 308               addr = newVal.vpAddress
 309             }else{
 310               addr = newVal.address
 311             }
 312         },
 313     },
 314     computed: {
 315         accountBalance: function () {
 316             let balance
 317             const balances = this.balances
 318
 319             if(balances && balances.length >0 ){
 320                 const currency = this.currency
 321                 balance = _.sumBy(balances, function(o) { return Number(o[currency]); })
 322             }
 323             return  Num.formatCurrency( (balance != null && balance != 0)? balance : '0.00', this.currency)
 324         },
 325         address: function(){
 326           if(this.netType === 'vapor'){
 327             return this.currentAccount.vpAddress
 328           }else{
 329             return this.currentAccount.address
 330           }
 331         },
 332         balances: function(){
 333           if(this.netType === 'vapor'){
 334             return this.currentAccount.vpBalances
 335           }else{
 336             return this.currentAccount.balances
 337           }
 338         },
 339         ...mapState([
 340           'bytom'
 341         ]),
 342         ...mapGetters([
 343           'currentAccount',
 344           'accountList',
 345           'net',
 346           'netType',
 347           'currency'
 348         ])
 349     },
 350     methods: {
 351       shortAddress: function (add) {
 352         return address.short(add)
 353       },
 354       formatCurrency: function (num) {
 355         return Num.formatCurrency(num, this.currency)
 356       },
 357       itemBalance: function(asset){
 358         if(asset.asset === BTM){
 359           return Num.formatNue(asset.balance,8)
 360         }else{
 361           return Num.formatNue(asset.balance,asset.decimals)
 362         }
 363       },
 364         setupRefreshTimer() {
 365             setInterval(() => {
 366                 this.refreshBalance(this.currentAccount.guid)
 367             }, 10000)
 368         },
 369         setupNetwork() {
 370             account.setupNet(`${this.net}${this.netType}`);
 371         },
 372         netTypeToggle: function (event) {
 373             const newNetType = event.target.value
 374             if( newNetType !== this.netType){
 375               const bytom = this.bytom.clone();
 376
 377               bytom.settings.netType = newNetType;
 378
 379               account.setupNet(`${this.net}${newNetType}`)
 380               if(newNetType === 'vapor'&& !this.currentAccount.vpAddress){
 381                 account.copy(this.currentAccount.guid).then(accounts => {
 382                   //update currentAccount
 383                   bytom.currentAccount = accounts
 384
 385                   //update AccountList
 386                   const objectIndex = bytom.accountList.findIndex(a => a.guid == this.currentAccount.guid)
 387                   bytom.accountList[objectIndex].vpAddress = accounts.vpAddress
 388
 389                   this[Actions.UPDATE_STORED_BYTOM](bytom)
 390                 })
 391               }else{
 392                 this[Actions.UPDATE_STORED_BYTOM](bytom)
 393               }
 394               this.refreshBalance(this.currentAccount.guid)
 395             }
 396         },
 397         showQrcode: function () {
 398           this.$router.push('received')
 399         },
 400         openMenu: function () {
 401             this.$router.push('menu')
 402         },
 403         transferOpen: function () {
 404             this.$router.push('transfer')
 405         },
 406         crossChainOpen: function () {
 407             this.$router.push('crossChain')
 408         },
 409         listVoteOpen: function () {
 410             this.$router.push('listVote')
 411         },
 412         assetOpen: function (asset) {
 413             this[Actions.SET_CURRENT_ASSET](asset)
 414             this.$router.push('asset')
 415         },
 416         refreshBalance: function (guid) {
 417           if(guid){
 418             account.balance(guid)
 419               .then((obj)=>{
 420                 const balances = obj.balances
 421                 const votes = obj.votes
 422
 423                 const balanceNotEqual = !_.isEqual(this.balances, balances)
 424
 425                 const voteNotEqual = (this.netType === 'vapor' && !_.isEqual(this.currentAccount.votes, votes))
 426
 427                 if(balanceNotEqual || voteNotEqual){
 428                     //update AccountList
 429
 430                     const bytom = this.bytom.clone();
 431
 432                     const objectIndex = bytom.accountList.findIndex(a => a.guid == this.currentAccount.guid)
 433
 434                     if(balanceNotEqual){
 435                       if(this.netType === 'vapor'){
 436                         bytom.currentAccount.vpBalances = balances;
 437                         bytom.accountList[objectIndex].vpBalances = balances
 438                       }else{
 439                         bytom.currentAccount.balances = balances;
 440                         bytom.accountList[objectIndex].balances = balances
 441                       }
 442                     }
 443
 444                     if(voteNotEqual){
 445                       bytom.currentAccount.votes = votes;
 446                       bytom.accountList[objectIndex].votes = votes
 447                     }
 448
 449                     this[Actions.UPDATE_STORED_BYTOM](bytom)
 450                 }
 451               })
 452               .catch(error => {
 453                 console.log(error);
 454             });
 455           }
 456         },
 457       ...mapActions([
 458         Actions.UPDATE_STORED_BYTOM,
 459         Actions.SET_CURRENT_ASSET,
 460       ])
 461     },
 462     mounted() {
 463         this.setupNetwork();
 464         this.setupRefreshTimer();
 465         this.refreshBalance(this.currentAccount.guid)
 466     },
 467   };
 468 </script>