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: 283px;
  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||'bytom'" @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!== 'Asset'">
 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             <ul class="list">
 232               <li class="list-item" v-for="(asset, index) in defaultBalances" :key="index" @click="assetOpen(asset)">
 233                 <div class="float-right text-align-right">
 234                   <div class="value">{{ itemBalance(asset) }}</div>
 235                   <div class="addr color-grey">{{ formatCurrency(asset[ currency ]) }}</div>
 236                 </div>
 237                 <div v-if="asset.symbol!== 'Asset'">
 238                   <div class="uppercase">
 239                     {{asset.symbol}}
 240                   </div>
 241
 242                   <div class="addr color-grey">{{asset.name}}</div>
 243                 </div>
 244                 <div v-else>
 245                   <div>
 246                     Asset
 247                   </div>
 248
 249                   <div class="addr color-grey uppercase">{{shortAddress(asset.asset)}}</div>
 250                 </div>
 251
 252               </li>
 253             </ul>
 254           </div>
 255         </div>
 256         <div v-else>
 257           <router-link :to="{name: 'menu-account-creation'}">
 258             <div class="bg-emptytx"></div>
 259             <div>
 260               <span class="color-lightgrey center-text no-record">{{$t('main.noAssetRecord')}}</span>
 261             </div>
 262             <a class="btn btn-primary btn-creation">{{ $t('main.create') }}</a>
 263           </router-link>
 264         </div>
 265       </section>
 266
 267         <!-- child page -->
 268         <div class="mask" v-show="maskShow"></div>
 269         <transition :enter-active-class="enterActive" :leave-active-class="leaveActive">
 270             <router-view></router-view>
 271         </transition>
 272
 273     </div>
 274 </template>
 275
 276 <script>
 277 import address from "@/utils/address";
 278 import account from "@/models/account";
 279 import transaction from "@/models/transaction";
 280 import { BTM } from "@/utils/constants";
 281 import { mapActions, mapGetters, mapState } from 'vuex'
 282 import * as Actions from '@/store/constants';
 283 import _ from 'lodash';
 284 import { Number as Num } from "@/utils/Number"
 285
 286
 287 const EnterActive = 'animated faster fadeInLeft';
 288 const LeaveActive = 'animated faster fadeOutLeft';
 289 export default {
 290     name: "",
 291     data() {
 292         return {
 293             transactions: [],
 294             maskShow: false,
 295             start: 0,
 296             limit: 10,
 297             enterActive: EnterActive,
 298             leaveActive: LeaveActive,
 299             defaultBalances: [
 300               {
 301                 alias: "btm",
 302                 asset: BTM,
 303                 name: "Bytom",
 304                 symbol: "BTM",
 305                 balance: 0,
 306                 decimals: 8,
 307                 in_btc: "0",
 308                 in_cny: "0",
 309                 in_usd: "0"
 310               }
 311             ],
 312         };
 313     },
 314     watch: {
 315         '$route'(to, from) {
 316             if (to.name.startsWith('menu')) {
 317                 this.maskShow = true
 318             } else if (from.name.startsWith('menu')) {
 319                 this.maskShow = false
 320             }
 321
 322             // remove transition for some page
 323             this.enterActive = EnterActive
 324             this.leaveActive = LeaveActive
 325             if (to.name == 'transfer-confirm' || from.name == 'transfer-confirm') {
 326                 this.enterActive = ''
 327                 this.leaveActive = ''
 328             }
 329             if (from.name == 'transfer-confirm') {
 330               this.setupNetwork()
 331             }
 332         },
 333         currentAccount(newVal, oldVal) {
 334             if (newVal.guid == undefined){
 335               return;
 336             }
 337
 338             let addr
 339             if(this.netType === 'vapor'){
 340               addr = newVal.vpAddress
 341             }else{
 342               addr = newVal.address
 343             }
 344         },
 345     },
 346     computed: {
 347         accountBalance: function () {
 348             let balance
 349             const balances = this.balances
 350
 351             if(balances && balances.length >0 ){
 352                 const currency = this.currency
 353                 balance = _.sumBy(balances, function(o) { return Number(o[currency]); })
 354             }
 355             return  Num.formatCurrency( (balance != null && balance != 0)? balance : '0.00', this.currency)
 356         },
 357         address: function(){
 358           if(this.netType === 'vapor'){
 359             return this.currentAccount.vpAddress
 360           }else{
 361             return this.currentAccount.address
 362           }
 363         },
 364         balances: function(){
 365           if(this.netType === 'vapor'){
 366             return this.currentAccount.vpBalances
 367           }else{
 368             return this.currentAccount.balances
 369           }
 370         },
 371         ...mapState([
 372           'bytom'
 373         ]),
 374         ...mapGetters([
 375           'currentAccount',
 376           'accountList',
 377           'net',
 378           'netType',
 379           'currency'
 380         ])
 381     },
 382     methods: {
 383       shortAddress: function (add) {
 384         return address.short(add)
 385       },
 386       formatCurrency: function (num) {
 387         return Num.formatCurrency(num, this.currency)
 388       },
 389       itemBalance: function(asset){
 390         if(asset.asset === BTM){
 391           return Num.formatNue(asset.balance,8)
 392         }else{
 393           return Num.formatNue(asset.balance,asset.decimals)
 394         }
 395       },
 396         setupRefreshTimer() {
 397             setInterval(() => {
 398                 this.refreshBalance(this.currentAccount.guid)
 399             }, 10000)
 400         },
 401         setupNetwork() {
 402             account.setupNet(`${this.net}${this.netType}`);
 403         },
 404         netTypeToggle: function (event) {
 405             const newNetType = event.target.value  ==='bytom'? '' :event.target.value;
 406
 407             if( newNetType !== this.netType){
 408               const bytom = this.bytom.clone();
 409
 410               bytom.settings.netType = newNetType;
 411
 412               account.setupNet(`${this.net}${newNetType}`)
 413               if(newNetType === 'vapor'&& !this.currentAccount.vpAddress){
 414                 account.copy(this.currentAccount.guid).then(accounts => {
 415                   //update currentAccount
 416                   bytom.currentAccount = accounts
 417
 418                   //update AccountList
 419                   const objectIndex = bytom.accountList.findIndex(a => a.guid == this.currentAccount.guid)
 420                   bytom.accountList[objectIndex].vpAddress = accounts.vpAddress
 421
 422                   this[Actions.UPDATE_STORED_BYTOM](bytom).then(()=>{
 423                     this.refreshBalance(this.currentAccount.guid)
 424                   })
 425                 }).catch(e =>{
 426                   if(e.message == 'Error: wallet has exist'){
 427                     account.listVapor(this.currentAccount.guid).then(accounts => {
 428                       //update currentAccount
 429                       bytom.currentAccount = accounts
 430
 431                       const objectIndex = bytom.accountList.findIndex(a => a.guid == this.currentAccount.guid)
 432                       bytom.accountList[objectIndex].vpAddress = accounts.vpAddress
 433
 434                       this[Actions.UPDATE_STORED_BYTOM](bytom).then(()=>{
 435                         this.refreshBalance(this.currentAccount.guid)
 436                       })
 437                     })
 438
 439                   }
 440                 })
 441               }else{
 442                 this[Actions.UPDATE_STORED_BYTOM](bytom).then(()=>{
 443                   this.refreshBalance(this.currentAccount.guid)
 444                 })
 445               }
 446             }
 447         },
 448         showQrcode: function () {
 449           this.$router.push('received')
 450         },
 451         openMenu: function () {
 452             this.$router.push('menu')
 453         },
 454         transferOpen: function () {
 455             this.$router.push('transfer')
 456         },
 457         crossChainOpen: function () {
 458             this.$router.push('crossChain')
 459         },
 460         listVoteOpen: function () {
 461             this.$router.push('listVote')
 462         },
 463         assetOpen: function (asset) {
 464             this[Actions.SET_CURRENT_ASSET](asset)
 465             this.$router.push('asset')
 466         },
 467         refreshBalance: function (guid) {
 468           if(guid){
 469             account.balance(guid)
 470               .then((obj)=>{
 471                 const balances = obj.balances
 472                 const votes = obj.votes
 473
 474                 const balanceNotEqual = !_.isEqual(this.balances, balances)
 475
 476                 const voteNotEqual = (this.netType === 'vapor' && !_.isEqual(this.currentAccount.votes, votes))
 477
 478                 if(balanceNotEqual || voteNotEqual){
 479                     //update AccountList
 480
 481                     const bytom = this.bytom.clone();
 482
 483                     const objectIndex = bytom.accountList.findIndex(a => a.guid == this.currentAccount.guid)
 484
 485                     if(balanceNotEqual){
 486                       if(this.netType === 'vapor'){
 487                         bytom.currentAccount.vpBalances = balances;
 488                         bytom.accountList[objectIndex].vpBalances = balances
 489                       }else{
 490                         bytom.currentAccount.balances = balances;
 491                         bytom.accountList[objectIndex].balances = balances
 492                       }
 493                     }
 494
 495                     if(voteNotEqual){
 496                       bytom.currentAccount.votes = votes;
 497                       bytom.accountList[objectIndex].votes = votes
 498                     }
 499
 500                     this[Actions.UPDATE_STORED_BYTOM](bytom)
 501                 }
 502               })
 503               .catch(error => {
 504                 console.log(error);
 505             });
 506           }
 507         },
 508       ...mapActions([
 509         Actions.UPDATE_STORED_BYTOM,
 510         Actions.SET_CURRENT_ASSET,
 511       ])
 512     },
 513     mounted() {
 514         this.setupNetwork();
 515         this.setupRefreshTimer();
 516         this.refreshBalance(this.currentAccount.guid)
 517     },
 518   };
 519 </script>