src/app/entry/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 .transactions {
  85     font-size: 15px;
  86     height: 275px;
  87 }
  88 .transactions h3 {
  89     font-size: 18px;
  90     font-weight: inherit;
  91     color: #cacaca;
  92     text-align: center;
  93     padding: 5px 0;
  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 id="app" 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" href="#">
 131                         <i class="iconfont icon-menu" @click="$refs.menu.open()"></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                         {{currentAccount.balance}}
 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">{{currentAccount.address_short}}</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         <section v-if="currentAccount.address!=undefined" class="transactions">
 153             <h3 class="bg-gray">{{ $t('main.record') }}</h3>
 154             <vue-scroll @handle-scroll="handleScroll">
 155                 <ul class="list">
 156                     <li class="list-item" v-for="(transcation, index) in transcations" :key="index" @click="$refs.trxInfo.open(transcation, currentAccount.address)">
 157                         <div class="value">{{transcation.direct}} {{transcation.val.toFixed(2)}} BTM</div>
 158                         <div>
 159                             <div v-if="transcation.is_confirmed" class="time">{{transcation.block_timestamp | moment}}</div>
 160                             <div v-else class="time">{{transcation.submission_timestamp | moment}}</div>
 161                             <div class="addr">{{transcation.address}}</div>
 162                         </div>
 163                     </li>
 164                 </ul>
 165             </vue-scroll>
 166         </section>
 167         <section v-else>
 168             <p style="width: 250px; margin: 30px auto; text-align: center;">{{ $t('main.noAccount') }}</p>
 169             <a class="btn btn-primary btn-creation bg-green" @click="$refs.menu.open('creation')">{{ $t('main.create') }}</a>
 170         </section>
 171
 172         <!-- modal -->
 173         <Qrcode ref="qrcode"></Qrcode>
 174         <Menu ref="menu" :accounts="accounts" :selectedAccount="currentAccount" @on-account-change="accountToggle"></Menu>
 175         <Transfer ref="transfer" :fee="fee" :feeTypeOptions="feeTypeOptions" @on-success="refreshAccounts"></Transfer>
 176         <TxInfo ref="trxInfo" @on-success="refreshTransactions"></TxInfo>
 177     </div>
 178 </template>
 179
 180 <script>
 181 import ClipboardJS from "clipboard";
 182 import Menu from "../home/menu";
 183 import Qrcode from "../transfer/qrcode";
 184 import Transfer from "../transfer/transfer";
 185 import TxInfo from "../transfer/detail";
 186 import account from "../../models/account";
 187 import transaction from "../../models/transaction";
 188 import utils from "../common/utils";
 189 export default {
 190     name: "",
 191     components: {
 192         Menu,
 193         Qrcode,
 194         Transfer,
 195         TxInfo
 196     },
 197     data() {
 198         return {
 199             feeTypeOptions: [this.$t("transfer.feeType")],
 200             fee: this.$t("transfer.feeType"),
 201             network: "mainnet",
 202             clipboard: new ClipboardJS(".address-text"),
 203             addressTitle: this.$t("main.copy"),
 204             menuOpen: false,
 205             maskOpen: false,
 206             accounts: [],
 207             currentAccount: {},
 208             transcations: [],
 209             start: 0,
 210             limit: 10
 211         };
 212     },
 213     watch: {
 214         currentAccount(newVal) {
 215             if (newVal.guid == undefined) {
 216                 return;
 217             }
 218
 219             this.setupShortAddr(newVal.address)
 220             this.refreshBalance(newVal.guid);
 221             this.refreshTransactions(newVal.guid, newVal.address).then(transcations => {
 222                 this.transcations = transcations
 223             });
 224         }
 225     },
 226     methods: {
 227         setupShortAddr(address) {
 228             this.currentAccount.address_short = utils.shortAddress(address);
 229         },
 230         setupClipboard() {
 231             this.clipboard.on("success", e => {
 232                 this.$dialog.show({
 233                     header: this.$t("dialog.header"),
 234                     body: this.$t("dialog.copy.success")
 235                 });
 236             });
 237             this.clipboard.on("error", e => {
 238                 this.$dialog.show({
 239                     header: this.$t("dialog.header"),
 240                     body: this.$t("dialog.copy.fail")
 241                 });
 242             });
 243         },
 244         setupRefreshTimer() {
 245             setInterval(() => {
 246                 this.refreshBalance(this.currentAccount.guid)
 247             }, 10000)
 248         },
 249         setupNetwork() {
 250             this.network = localStorage.bytomNet;
 251             account.setupNet(this.network);
 252         },
 253         networkToggle: function (val) {
 254             localStorage.bytomNet = this.network;
 255             account.setupNet(this.network);
 256             this.refreshAccounts();
 257         },
 258         accountToggle: function (selectedAccount) {
 259             localStorage.currentAccount = JSON.stringify(selectedAccount);
 260             this.currentAccount = selectedAccount;
 261             this.refreshAccounts();
 262         },
 263         showQrcode: function () {
 264             this.$refs.qrcode.open(this.currentAccount.address);
 265         },
 266         transferOpen: function () {
 267             this.fee = this.$t("transfer.feeType");
 268             this.feeTypeOptions = [this.$t("transfer.feeType")];
 269             this.$refs.transfer.open(this.currentAccount);
 270         },
 271         transcationsFormat: function (transactions) {
 272             transactions.forEach(transaction => {
 273                 let inputSum = 0;
 274                 let outputSum = 0;
 275                 let selfInputSum = 0;
 276                 let selfoutputSum = 0;
 277                 let inputAddresses = [];
 278                 let outputAddresses = [];
 279                 transaction.inputs.forEach(input => {
 280                     inputSum += input.amount;
 281                     if (input.address == this.currentAccount.address) {
 282                         selfInputSum += input.amount;
 283                         return;
 284                     }
 285
 286                     inputAddresses.push(input.address);
 287                 });
 288                 transaction.outputs.forEach(output => {
 289                     outputSum += output.amount;
 290                     if (output.address == this.currentAccount.address) {
 291                         selfoutputSum += output.amount;
 292                         return;
 293                     }
 294
 295                     outputAddresses.push(output.address);
 296                 });
 297
 298                 let val = selfoutputSum - selfInputSum;
 299                 if (val > 0) {
 300                     transaction.direct = "+";
 301                     transaction.address = utils.shortAddress(inputAddresses.pop());
 302                 } else {
 303                     val = selfInputSum - selfoutputSum;
 304                     transaction.direct = "-";
 305                     transaction.address = utils.shortAddress(outputAddresses.pop());
 306                 }
 307                 transaction.val = Number(val / 100000000);
 308                 transaction.fee = Number(inputSum - outputSum) / 100000000;
 309             });
 310         },
 311         refreshAccounts: function () {
 312             account.list().then(accounts => {
 313                 this.accounts = accounts;
 314                 if (accounts.length == 0) {
 315                     return;
 316                 }
 317
 318                 if (localStorage.currentAccount != undefined) {
 319                     this.currentAccount = JSON.parse(localStorage.currentAccount);
 320                 } else {
 321                     this.currentAccount = accounts[0];
 322                 }
 323             });
 324         },
 325         refreshBalance: function (guid) {
 326             account.balance(guid).then(balance => {
 327                 this.currentAccount.balance = balance
 328             }).catch(error => {
 329                 console.log(error);
 330             });
 331         },
 332         refreshTransactions: function (guid, address) {
 333             return new Promise((resolve, reject) => {
 334                 transaction.list(guid, address).then(ret => {
 335                     let transactions = ret.result.data;
 336                     if (transactions == null) {
 337                         return;
 338                     }
 339
 340                     this.transcationsFormat(transactions);
 341                     console.log("formatTx", transactions);
 342                     resolve(transactions)
 343                 }).catch(error => {
 344                     console.log(error);
 345                     reject(error)
 346                 });
 347             })
 348         },
 349         handleScroll(vertical, horizontal, nativeEvent) {
 350             if (vertical.process == 0) {
 351                 this.start = 0;
 352                 return;
 353             }
 354
 355             if (vertical.process == 1) {
 356                 this.start += this.limit;
 357                 this.refreshTransactions(this.currentAccount.guid, this.currentAccount.address).then(transcations => {
 358                     transactions.forEach(transaction => {
 359                         this.transcations.push(transaction);
 360                     });
 361                 });
 362             }
 363         }
 364     },
 365     mounted() {
 366         this.setupClipboard();
 367         this.setupRefreshTimer();
 368         this.setupNetwork();
 369         this.refreshAccounts();
 370     },
 371     beforeDestroy() {
 372         this.clipboard.destroy();
 373     }
 374 };
 375 </script>