12 text-overflow: ellipsis;
17 .topbar-left .btn-menu {
21 .topbar-left .btn-menu i {
30 .topbar .topbar-right {
34 border: 2px solid #fff;
42 display: inline-block;
46 background-color: #02f823;
57 .content .token-icon {
67 .content .token-amount {
71 .token-amount .asset {
77 vertical-align: middle;
84 .transaction-title h3 {
101 border-bottom: 1px solid #5e5e5e;
120 <section class="bg-green">
122 <div class="topbar-right">
124 <select v-model="network" @change="networkToggle">
125 <option value="mainnet">{{ $t('main.mainNet') }}</option>
126 <option value="testnet">{{ $t('main.testNet') }}</option>
129 <div class="topbar-left">
130 <a class="btn-menu" @click="openMenu">
131 <i class="iconfont icon-menu"></i>
133 <span class="alias">{{currentAccount.alias}}</span>
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">
141 <span class="asset">BTM</span>
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"></i>
148 <a v-if="currentAccount.address!=undefined" class="btn btn-primary btn-transfer" @click="transferOpen">{{ $t('main.transfer') }}</a>
152 <div v-if="currentAccount.address!=undefined">
153 <section class="transaction-title">
154 <h3 class="bg-gray">{{ $t('main.record') }}</h3>
156 <section class="transactions">
157 <vue-scroll @handle-scroll="handleScroll">
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>
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>
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>
179 <div class="mask" v-show="maskShow"></div>
180 <transition :enter-active-class="enterActive" :leave-active-class="leaveActive">
181 <router-view></router-view>
185 <Qrcode ref="qrcode"></Qrcode>
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';
208 clipboard: new ClipboardJS(".address-text"),
209 addressTitle: this.$t("main.copy"),
218 enterActive: EnterActive,
219 leaveActive: LeaveActive,
224 if (to.name.startsWith('menu')) {
226 } else if (from.name.startsWith('menu')) {
227 this.maskShow = false
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
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 = ''
243 currentAccount(newVal, oldVal) {
244 localStorage.currentAccount = JSON.stringify(newVal);
245 if (newVal.guid == undefined) {
249 this.refreshTransactions(newVal.guid, newVal.address).then(transactions => {
250 this.transactions = transactions
255 shortAddress: function () {
256 return address.short(this.currentAccount.address)
258 accountBalance: function () {
259 return this.currentAccount.balance
263 setupShortAddr(rawAddress) {
264 this.currentAccount.address_short = address.short(rawAddress);
267 this.clipboard.on("success", e => {
269 header: this.$t("dialog.header"),
270 body: this.$t("dialog.copy.success")
273 this.clipboard.on("error", e => {
275 header: this.$t("dialog.header"),
276 body: this.$t("dialog.copy.fail")
280 setupRefreshTimer() {
281 // todo refresh all accounts
284 this.refreshBalance(this.currentAccount.guid)
288 this.network = localStorage.bytomNet;
289 account.setupNet(this.network);
291 networkToggle: function (val) {
292 localStorage.bytomNet = this.network;
293 account.setupNet(this.network);
294 this.refreshAccounts();
296 showQrcode: function () {
297 this.$refs.qrcode.open(this.currentAccount.address);
299 openMenu: function () {
300 this.$router.push({ name: 'menu', params: { accounts: this.accounts, selected: this.currentAccount } })
302 transferOpen: function () {
303 this.$router.push({ name: 'transfer', params: { account: this.currentAccount } })
305 handleScroll(vertical, horizontal, nativeEvent) {
306 if (vertical.process == 0) {
308 this.refreshTransactions(this.currentAccount.guid, this.currentAccount.address).then(transactions => {
309 this.transactions = transactions
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);
323 refreshAccounts: function () {
324 account.list().then(accounts => {
325 this.accounts = accounts;
326 if (accounts.length == 0) {
327 this.currentAccount = {};
330 this.currentAccount = accounts[0];
331 this.refreshBalance(this.currentAccount.guid);
334 refreshBalance: function (guid) {
335 account.balance(guid).then(balance => {
336 this.currentAccount.balance = balance;
337 this.currentAccount = Object.assign({}, this.currentAccount);
342 refreshTransactions: function (guid, address, start, limit) {
343 return new Promise((resolve, reject) => {
344 transaction.list(guid, address, start, limit).then(ret => {
345 let transactions = ret.result.data;
346 if (transactions == null) {
350 this.transactionsFormat(transactions);
351 console.log("formatTx", transactions);
352 resolve(transactions)
359 transactionsFormat: function (transactions) {
360 transactions.forEach(transaction => {
363 let selfInputSum = 0;
364 let selfoutputSum = 0;
365 let inputAddresses = [];
366 let outputAddresses = [];
367 transaction.inputs.forEach(input => {
368 inputSum += input.amount;
369 if (input.address == this.currentAccount.address) {
370 selfInputSum += input.amount;
374 inputAddresses.push(input.address);
376 transaction.outputs.forEach(output => {
377 outputSum += output.amount;
378 if (output.address == this.currentAccount.address) {
379 selfoutputSum += output.amount;
383 outputAddresses.push(output.address);
386 let val = selfoutputSum - selfInputSum;
388 transaction.direct = "+";
389 transaction.address = address.short(inputAddresses.pop());
391 val = selfInputSum - selfoutputSum;
392 transaction.direct = "-";
393 transaction.address = address.short(outputAddresses.pop());
395 transaction.val = Number(val / 100000000);
396 transaction.fee = Number(inputSum - outputSum) / 100000000;
402 this.setupClipboard();
403 this.setupRefreshTimer();
404 this.refreshAccounts();
407 this.clipboard.destroy();