display:flex;
}
.topbar .topbar-left {
- width: 85px;
+ width: 87px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 20px;
border: 2px solid #fff;
border-radius: 18px;
- padding: 0 10px;
+ padding: 0 20px;
font: 12px system-ui;
text-align: center;
-}
-
-.topbar-middle .lamp {
- display: inline-block;
- width: 6px;
- height: 6px;
- border-radius: 50%;
- background-color: #02f823;
- margin-right: 2px;
- position: relative;
- top: -2px;
+ display: flex;
+ align-items: center;
}
.content {
.btn-send-transfer .btn {
width: 160px;
height: 48px;
- line-height: 27px;
+ line-height: 23px;
font-size: 16px;
}
padding: 10px 0 10px 20px;
}
.transactions {
- font-size: 15px;
- height: 273px;
- overflow: hidden;
+ font-size: 15px;
+ height: 340px;
+ overflow: auto;
}
.list-item {
position: relative;
display: block;
}
+ .btn-send-transfer .iconfont{
+ margin-right: 4px;
+ }
+
</style>
<template>
<i class="iconfont icon-menu"></i>
</a>
</div>
- <div class="topbar-middle bg-secondary">
- <i class="lamp"></i>
- <select v-model="network" @change="networkToggle">
- <option value="mainnet">{{ $t('main.mainNet') }}</option>
- <option value="testnet">{{ $t('main.testNet') }}</option>
- <option value="solonet">{{ $t('main.soloNet') }}</option>
- </select>
- </div>
+ <!--<div class="topbar-middle bg-secondary">-->
+ <!--<select v-model="network" @change="networkToggle">-->
+ <!--<option value="mainnet">{{ $t('main.mainNet') }}</option>-->
+ <!--<option value="testnet">{{ $t('main.testNet') }}</option>-->
+ <!--<option value="solonet">{{ $t('main.soloNet') }}</option>-->
+ <!--<option value="vaporTestnet">{{ $t('main.vaporTestnet') }}</option>-->
+ <!--</select>-->
+ <!--</div>-->
</div>
<div class="content">
<div v-if="currentAccount.address!=undefined" class="amount color-white">
</div>
</div>
<div class="btn-send-transfer">
- <a v-if="currentAccount.address!=undefined" class="btn btn-primary btn-received" @click="showQrcode">{{ $t('main.receive') }}</a>
- <a v-if="currentAccount.address!=undefined" class="btn btn-primary btn-transfer" @click="transferOpen">{{ $t('main.send') }}</a>
+ <a v-if="currentAccount.address!=undefined" class="btn btn-primary btn-received" @click="showQrcode">
+ <i class="iconfont icon-receive"></i>
+ {{ $t('main.receive') }}
+ </a>
+ <a v-if="currentAccount.address!=undefined" class="btn btn-primary btn-transfer" @click="transferOpen">
+ <i class="iconfont icon-send"></i>
+ {{ $t('main.send') }}
+ </a>
</div>
</section>
<div v-if="transactions.length != 0">
<vue-scroll @handle-scroll="handleScroll">
<ul class="list">
- <li class="list-item" v-for="(transcation, index) in transactions" :key="index" @click="$router.push({name: 'transfer-info', params: {transcation: transcation, address: currentAccount.address}})">
- <div class="value">{{transcation.direct}} {{transcation.val.toFixed(2)}} BTM</div>
+ <li class="list-item" v-for="(transaction, index) in transactions" :key="index" @click="$router.push({name: 'transfer-info', params: {transaction: transaction, address: currentAccount.address}})">
+ <div class="value">{{transaction.direct}} {{transaction.val.toFixed(2)}} BTM</div>
<div>
- <div v-if="transcation.is_confirmed" class="time">
- <div v-if="transcation.block_timestamp === 0">
- {{ $t('main.unconfirmed') }}
- </div>
- <div v-else>
- {{transcation.block_timestamp | moment}}
- </div>
+ <div v-if="transaction.hasOwnProperty('block_timestamp')">
+ {{transaction.submission_timestamp | moment}}
</div>
- <div v-else class="time">
- <div v-if="transcation.submission_timestamp === 0">
- {{ $t('main.unconfirmed') }}
- </div>
- <div v-else>
- {{transcation.submission_timestamp | moment}}
- </div>
+ <div v-else>
+ {{ $t('main.unconfirmed') }}
</div>
- <div class="addr color-grey">{{transcation.address}}</div>
+ <div class="addr color-grey">{{transaction.address}}</div>
</div>
</li>
</ul>
<router-view></router-view>
</transition>
- <!-- modal -->
- <Qrcode ref="qrcode"></Qrcode>
</div>
</template>
<script>
-import ClipboardJS from "clipboard";
-import Menu from "@/views/homeMenu";
-import Qrcode from "@/views/qrcode";
-import Transfer from "@/views/transfer";
-import TxInfo from "@/views/transferDetail";
import address from "@/utils/address";
import account from "@/models/account";
import transaction from "@/models/transaction";
import { BTM } from "@/utils/constants";
+import { mapGetters, mapState } from 'vuex'
const EnterActive = 'animated faster fadeInLeft';
const LeaveActive = 'animated faster fadeOutLeft';
export default {
name: "",
- components: {
- Qrcode,
- },
data() {
return {
- network: "mainnet",
- clipboard: new ClipboardJS(".address-text"),
- addressTitle: this.$t("main.copy"),
- accounts: [],
- currentAccount: {},
transactions: [],
maskShow: false,
start: 0,
},
currentAccount(newVal, oldVal) {
if (newVal.guid == undefined){
- localStorage.currentAccount = {}
return;
}
- localStorage.currentAccount = JSON.stringify(newVal);
this.refreshTransactions(newVal.guid, newVal.address).then(transactions => {
this.transactions = transactions
});
},
- 'currentAccount.guid'(guid) {
- if (guid == undefined) return;
-
- this.refreshBalance(guid);
- }
},
computed: {
shortAddress: function () {
return address.short(this.currentAccount.address)
},
accountBalance: function () {
- return this.currentAccount.balance != 0 ? this.currentAccount.balance : '0.00'
- }
+ let balance
+ const balances = this.currentAccount.balances
+ if(balances.length >0 ){
+ const balanceObject = balances.filter(b => b.asset === BTM)[0]
+ balance = balanceObject.balance/Math.pow(10,balanceObject.decimals)
+ }
+ return (balance != null && balance != 0) ? balance : '0.00'
+ },
+ ...mapState([
+ 'bytom'
+ ]),
+ ...mapGetters([
+ 'currentAccount',
+ 'accountList',
+ 'net'
+ ])
},
methods: {
- setupClipboard() {
- this.clipboard.on("success", e => {
- this.$dialog.show({
- header: this.$t("dialog.header"),
- body: this.$t("dialog.copy.success")
- });
- });
- this.clipboard.on("error", e => {
- this.$dialog.show({
- header: this.$t("dialog.header"),
- body: this.$t("dialog.copy.fail")
- });
- });
- },
setupRefreshTimer() {
- // todo refresh all accounts
-
setInterval(() => {
this.refreshBalance(this.currentAccount.guid)
}, 10000)
},
setupNetwork() {
- this.network = localStorage.bytomNet;
- account.setupNet(this.network);
+ account.setupNet(this.net);
},
networkToggle: function (val) {
localStorage.bytomNet = this.network;
this.refreshAccounts();
},
showQrcode: function () {
- this.$refs.qrcode.open(this.currentAccount.address);
+ this.$router.push('received')
},
openMenu: function () {
- this.$router.push({ name: 'menu', params: { accounts: this.accounts, selected: this.currentAccount } })
+ this.$router.push('menu')
},
transferOpen: function () {
- this.$router.push({ name: 'transfer', params: { account: this.currentAccount } })
+ this.$router.push('transfer')
},
handleScroll(vertical, horizontal, nativeEvent) {
if (vertical.process == 0) {
});
}
},
- refreshAccounts: function () {
- account.list().then(accounts => {
- this.accounts = accounts;
- if (accounts.length == 0) {
- return;
- }
-
- if (this.currentAccount.guid == undefined) {
- this.currentAccount = accounts[0];
- }
- })
- },
refreshBalance: function (guid) {
- account.balance(guid).then(balance => {
- this.currentAccount.balance = balance;
- this.currentAccount = Object.assign({}, this.currentAccount);
- }).catch(error => {
+ account.balance(guid)
+ .catch(error => {
console.log(error);
});
},
refreshTransactions: function (guid, address, start, limit) {
return new Promise((resolve, reject) => {
- transaction.list(guid, address, start, limit).then(ret => {
- let transactions = ret.result.data;
+ transaction.list(guid, address, start, limit).then(transactions => {
if (transactions == null) {
return;
}
const formattedTx = this.transactionsFormat(transactions);
- console.log("formatTx", formattedTx);
resolve(formattedTx)
}).catch(error => {
console.log(error);
},
},
mounted() {
- this.currentAccount = JSON.parse(localStorage.currentAccount);
this.setupNetwork();
- this.setupClipboard();
this.setupRefreshTimer();
- this.refreshAccounts();
+ this.refreshTransactions(this.currentAccount.guid, this.currentAccount.address).then(transactions => {
+ this.transactions = transactions
+ });
},
- beforeDestroy() {
- this.clipboard.destroy();
- }
-};
+ };
</script>
OSDN Git Service
