src/views/home.vue

   1 <style lang="" scoped>
   2 .warp {
   3     z-index: 1;
   4 }
   5
   6 .topbar {
   7     font-size: 19px;
   8 }
   9 .topbar .topbar-left {
  10     width: 120px;
  11     overflow: hidden;
  12     text-overflow: ellipsis;
  13     white-space: nowrap;
  14     padding-top: 20px;
  15     padding-left: 20px;
  16 }
  17 .topbar-left .btn-menu {
  18     float: left;
  19     margin-right: 8px;
  20 }
  21 .topbar-left .btn-menu i {
  22     font-size: 100%;
  23 }
  24 .topbar-left .alias {
  25     height: 25px;
  26     font-size: 19px;
  27     line-height: 28px;
  28 }
  29
  30 .topbar .topbar-right {
  31     float: right;
  32     margin-top: 20px;
  33     margin-right: 20px;
  34     border: 2px solid #fff;
  35     border-radius: 18px;
  36     padding: 0 10px;
  37     font: 12px system-ui;
  38     text-align: center;
  39 }
  40
  41 .topbar-right .lamp {
  42     display: inline-block;
  43     width: 6px;
  44     height: 6px;
  45     border-radius: 50%;
  46     background-color: #02f823;
  47     margin-right: 2px;
  48     position: relative;
  49     top: -2px;
  50 }
  51
  52 .content {
  53     margin-top: 20px;
  54     text-align: center;
  55     padding: 0 30px 20px;
  56 }
  57 .content .token-icon {
  58     display: inline-flex;
  59     height: 40px;
  60     width: 40px;
  61     padding: 8px;
  62     margin: 8px;
  63 }
  64 .content .amount {
  65     padding-bottom: 10px;
  66 }
  67 .content .token-amount {
  68     font-size: 45px;
  69     line-height: 45px;
  70 }
  71 .token-amount .asset {
  72     font-size: 18px;
  73     margin-left: 2px;
  74 }
  75 .qrcode {
  76     margin-left: 5px;
  77     vertical-align: middle;
  78     cursor: pointer;
  79 }
  80 .btn-transfer {
  81     width: 200px;
  82 }
  83
  84 .transaction-title h3 {
  85     font-size: 18px;
  86     font-weight: inherit;
  87     color: #cacaca;
  88     text-align: center;
  89     padding: 5px 0;
  90 }
  91 .transactions {
  92     font-size: 15px;
  93     height: 275px;
  94 }
  95 .transactions .list {
  96     padding: 0 20px;
  97 }
  98 .list-item {
  99     display: block;
 100     padding: 5px 10px;
 101     border-bottom: 1px solid #5e5e5e;
 102 }
 103
 104 .list-item .value {
 105     float: right;
 106     margin-top: 13px;
 107 }
 108 .account-address {
 109     cursor: pointer;
 110 }
 111 .btn-creation {
 112     display: block;
 113     width: 200px;
 114     margin: 0 auto;
 115 }
 116 </style>
 117
 118 <template>
 119     <div class="warp">
 120         <section class="bg-green">
 121             <div class="topbar">
 122                 <div class="topbar-right">
 123                     <i class="lamp"></i>
 124                     <select v-model="network" @change="networkToggle">
 125                         <option value="mainnet">{{ $t('main.mainNet') }}</option>
 126                         <option value="testnet">{{ $t('main.testNet') }}</option>
 127                     </select>
 128                 </div>
 129                 <div class="topbar-left">
 130                     <a class="btn-menu" @click="openMenu">
 131                         <i class="iconfont icon-menu"></i>
 132                     </a>
 133                     <span class="alias">{{currentAccount.alias}}</span>
 134                 </div>
 135             </div>
 136             <div class="content">
 137                 <img src="@/assets/logo.png" class="token-icon">
 138                 <div v-if="currentAccount.address!=undefined" class="amount">
 139                     <div class="token-amount">
 140                         {{accountBalance}}
 141                         <span class="asset">BTM</span>
 142                     </div>
 143                     <p class="account-address">
 144                         <span class="address-text" :title="addressTitle" :data-clipboard-text="currentAccount.address">{{shortAddress}}</span>
 145                         <i class="iconfont qrcode" @click="showQrcode">&#xe7dd;</i>
 146                     </p>
 147                 </div>
 148                 <a v-if="currentAccount.address!=undefined" class="btn btn-primary btn-transfer" @click="transferOpen">{{ $t('main.transfer') }}</a>
 149             </div>
 150         </section>
 151
 152         <div v-if="currentAccount.address!=undefined">
 153             <section class="transaction-title">
 154                 <h3 class="bg-gray">{{ $t('main.record') }}</h3>
 155             </section>
 156             <section class="transactions">
 157                 <vue-scroll @handle-scroll="handleScroll">
 158                     <ul class="list">
 159                         <li class="list-item" v-for="(transcation, index) in transactions" :key="index" @click="$router.push({name: 'transfer-info', params: {transcation: transcation, address: currentAccount.address}})">
 160                             <div class="value">{{transcation.direct}} {{transcation.val.toFixed(2)}} BTM</div>
 161                             <div>
 162                                 <div v-if="transcation.is_confirmed" class="time">{{transcation.block_timestamp | moment}}</div>
 163                                 <div v-else class="time">{{transcation.submission_timestamp | moment}}</div>
 164                                 <div class="addr">{{transcation.address}}</div>
 165                             </div>
 166                         </li>
 167                     </ul>
 168                 </vue-scroll>
 169             </section>
 170         </div>
 171         <div v-else>
 172             <p style="width: 250px; margin: 30px auto; text-align: center;">{{ $t('main.noAccount') }}</p>
 173             <router-link :to="{name: 'menu-account-creation'}">
 174                 <a class="btn btn-primary btn-creation bg-green">{{ $t('main.create') }}</a>
 175             </router-link>
 176         </div>
 177
 178         <!-- child page -->
 179         <div class="mask" v-show="maskShow"></div>
 180         <transition :enter-active-class="enterActive" :leave-active-class="leaveActive">
 181             <router-view></router-view>
 182         </transition>
 183
 184         <!-- modal -->
 185         <Qrcode ref="qrcode"></Qrcode>
 186     </div>
 187 </template>
 188
 189 <script>
 190 import ClipboardJS from "clipboard";
 191 import Menu from "@/views/homeMenu";
 192 import Qrcode from "@/views/qrcode";
 193 import Transfer from "@/views/transfer";
 194 import TxInfo from "@/views/transferDetail";
 195 import address from "@/utils/address";
 196 import account from "@/models/account";
 197 import transaction from "@/models/transaction";
 198 const EnterActive = 'animated faster fadeInLeft';
 199 const LeaveActive = 'animated faster fadeOutLeft';
 200 export default {
 201     name: "",
 202     components: {
 203         Qrcode,
 204     },
 205     data() {
 206         return {
 207             network: "mainnet",
 208             clipboard: new ClipboardJS(".address-text"),
 209             addressTitle: this.$t("main.copy"),
 210             accounts: [],
 211             currentAccount: {
 212                 balance: 0.00
 213             },
 214             transactions: [],
 215             maskShow: false,
 216             start: 0,
 217             limit: 10,
 218             enterActive: EnterActive,
 219             leaveActive: LeaveActive,
 220         };
 221     },
 222     watch: {
 223         '$route'(to, from) {
 224             if (to.name.startsWith('menu')) {
 225                 this.maskShow = true
 226             } else if (from.name.startsWith('menu')) {
 227                 this.maskShow = false
 228             }
 229
 230             //account toggle by the list from menu
 231             if (to.name == 'home' && to.params.selectedAccount != undefined && from.name == 'menu') {
 232                 this.currentAccount = to.params.selectedAccount
 233             }
 234
 235             // remove transition for some page
 236             this.enterActive = EnterActive
 237             this.leaveActive = LeaveActive
 238             if (to.name == 'transfer-confirm' || from.name == 'transfer-confirm') {
 239                 this.enterActive = ''
 240                 this.leaveActive = ''
 241             }
 242         },
 243         currentAccount(newVal, oldVal) {
 244             localStorage.currentAccount = JSON.stringify(newVal);
 245             if (newVal.guid == undefined) {
 246                 return;
 247             }
 248
 249             this.refreshTransactions(newVal.guid, newVal.address).then(transactions => {
 250                 this.transactions = transactions
 251             });
 252         },
 253     },
 254     computed: {
 255         shortAddress: function () {
 256             return address.short(this.currentAccount.address)
 257         },
 258         accountBalance: function () {
 259             return this.currentAccount.balance
 260         }
 261     },
 262     methods: {
 263         setupShortAddr(rawAddress) {
 264             this.currentAccount.address_short = address.short(rawAddress);
 265         },
 266         setupClipboard() {
 267             this.clipboard.on("success", e => {
 268                 this.$dialog.show({
 269                     header: this.$t("dialog.header"),
 270                     body: this.$t("dialog.copy.success")
 271                 });
 272             });
 273             this.clipboard.on("error", e => {
 274                 this.$dialog.show({
 275                     header: this.$t("dialog.header"),
 276                     body: this.$t("dialog.copy.fail")
 277                 });
 278             });
 279         },
 280         setupRefreshTimer() {
 281             // todo refresh all accounts
 282
 283             setInterval(() => {
 284                 this.refreshBalance(this.currentAccount.guid)
 285             }, 10000)
 286         },
 287         setupNetwork() {
 288             this.network = localStorage.bytomNet;
 289             account.setupNet(this.network);
 290         },
 291         networkToggle: function (val) {
 292             localStorage.bytomNet = this.network;
 293             account.setupNet(this.network);
 294             this.refreshAccounts();
 295         },
 296         showQrcode: function () {
 297             this.$refs.qrcode.open(this.currentAccount.address);
 298         },
 299         openMenu: function () {
 300             this.$router.push({ name: 'menu', params: { accounts: this.accounts, selected: this.currentAccount } })
 301         },
 302         transferOpen: function () {
 303             this.$router.push({ name: 'transfer', params: { account: this.currentAccount } })
 304         },
 305         handleScroll(vertical, horizontal, nativeEvent) {
 306             if (vertical.process == 0) {
 307                 this.start = 0;
 308                 this.refreshTransactions(this.currentAccount.guid, this.currentAccount.address).then(transactions => {
 309                     this.transactions = transactions
 310                 });
 311                 return;
 312             }
 313
 314             if (vertical.process == 1) {
 315                 this.start += this.limit;
 316                 this.refreshTransactions(this.currentAccount.guid, this.currentAccount.address, this.start, this.limit).then(transactions => {
 317                     transactions.forEach(transaction => {
 318                         this.transactions.push(transaction);
 319                     });
 320                 });
 321             }
 322         },
 323         refreshAccounts: function () {
 324             account.list().then(accounts => {
 325                 this.accounts = accounts;
 326                 if (accounts.length == 0) {
 327                     this.currentAccount = {};
 328                     return;
 329                 }
 330
 331                 if (localStorage.currentAccount != undefined && localStorage.currentAccount != '{}') {
 332                     this.currentAccount = JSON.parse(localStorage.currentAccount);
 333                 } else {
 334                     this.currentAccount = accounts[0];
 335                 }
 336             })
 337         },
 338         refreshBalance: function (guid) {
 339             account.balance(guid).then(balance => {
 340                 this.currentAccount.balance = balance;
 341                 this.currentAccount = Object.assign({}, this.currentAccount);
 342             }).catch(error => {
 343                 console.log(error);
 344             });
 345         },
 346         refreshTransactions: function (guid, address, start, limit) {
 347             return new Promise((resolve, reject) => {
 348                 transaction.list(guid, address, start, limit).then(ret => {
 349                     let transactions = ret.result.data;
 350                     if (transactions == null) {
 351                         return;
 352                     }
 353
 354                     this.transactionsFormat(transactions);
 355                     console.log("formatTx", transactions);
 356                     resolve(transactions)
 357                 }).catch(error => {
 358                     console.log(error);
 359                     reject(error)
 360                 });
 361             })
 362         },
 363         transactionsFormat: function (transactions) {
 364             transactions.forEach(transaction => {
 365                 let inputSum = 0;
 366                 let outputSum = 0;
 367                 let selfInputSum = 0;
 368                 let selfoutputSum = 0;
 369                 let inputAddresses = [];
 370                 let outputAddresses = [];
 371                 transaction.inputs.forEach(input => {
 372                     inputSum += input.amount;
 373                     if (input.address == this.currentAccount.address) {
 374                         selfInputSum += input.amount;
 375                         return;
 376                     }
 377
 378                     inputAddresses.push(input.address);
 379                 });
 380                 transaction.outputs.forEach(output => {
 381                     outputSum += output.amount;
 382                     if (output.address == this.currentAccount.address) {
 383                         selfoutputSum += output.amount;
 384                         return;
 385                     }
 386
 387                     outputAddresses.push(output.address);
 388                 });
 389
 390                 let val = selfoutputSum - selfInputSum;
 391                 if (val > 0) {
 392                     transaction.direct = "+";
 393                     transaction.address = address.short(inputAddresses.pop());
 394                 } else {
 395                     val = selfInputSum - selfoutputSum;
 396                     transaction.direct = "-";
 397                     transaction.address = address.short(outputAddresses.pop());
 398                 }
 399                 transaction.val = Number(val / 100000000);
 400                 transaction.fee = Number(inputSum - outputSum) / 100000000;
 401             });
 402         },
 403     },
 404     mounted() {
 405         this.setupNetwork();
 406         this.setupClipboard();
 407         this.setupRefreshTimer();
 408         this.refreshAccounts();
 409     },
 410     beforeDestroy() {
 411         this.clipboard.destroy();
 412     }
 413 };
 414 </script>