.topbar {
font-size: 19px;
+ display:flex;
}
.topbar .topbar-left {
- width: 120px;
+ width: 87px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.topbar-left .btn-menu i {
font-size: 100%;
}
-.topbar-left .alias {
+.alias {
height: 25px;
- font-size: 19px;
+ font-size: 16px;
line-height: 28px;
}
-.topbar .topbar-right {
- float: right;
+.topbar .topbar-middle {
margin-top: 20px;
margin-right: 20px;
border: 2px solid #fff;
border-radius: 18px;
- padding: 0 10px;
+ padding: 0 20px;
font: 12px system-ui;
text-align: center;
-}
-
-.topbar-right .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 {
- margin-top: 20px;
+ margin-top: 25px;
text-align: center;
- padding: 0 30px 20px;
+ padding: 0 30px 10px;
}
.content .token-icon {
display: inline-flex;
padding-bottom: 10px;
}
.content .token-amount {
- font-size: 45px;
+ font-size: 32px;
line-height: 45px;
}
.token-amount .asset {
vertical-align: middle;
cursor: pointer;
}
+
+.btn-send-transfer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.btn-send-transfer .btn {
+ width: 160px;
+ height: 48px;
+ line-height: 23px;
+ font-size: 16px;
+}
+
+.btn-received {
+ background: #0DBF37;
+ border-radius:4px 0px 0px 0px;
+}
+.btn-received:active,
+.btn-received:hover,.btn-received:focus {
+ background: #05A02A;
+}
+
.btn-transfer {
- width: 200px;
+ background: #035BD4;
+ border-radius:0px 4px 0px 0px;
+}
+.btn-transfer:active,
+.btn-transfer:hover,.btn-transfer:focus {
+ background: #044BAF;
}
.transaction-title h3 {
- font-size: 18px;
+ font-size: 16px;
font-weight: inherit;
- color: #cacaca;
- text-align: center;
- padding: 5px 0;
+ padding: 10px 0 10px 20px;
}
.transactions {
- font-size: 15px;
- height: 273px;
- overflow: hidden;
-}
-.transactions .list {
- padding: 0 20px;
+ font-size: 15px;
+ height: 340px;
+ overflow: auto;
}
.list-item {
+ position: relative;
display: block;
- padding: 5px 10px;
- border-bottom: 1px solid #5e5e5e;
+ padding: 10px 20px;
+}
+
+.list-item:after {
+ content:"";
+ background: #e0e0e0;
+ position: absolute;
+ bottom: 0;
+ left: 20px;
+ height: 1px;
+ width: 90%;
}
.list-item .value {
}
.btn-creation {
display: block;
- width: 200px;
- margin: 0 auto;
+ width: 310px;
+ height: 48px;
+ margin: auto;
+ padding: 15px 0;
+ position: absolute;
+ bottom: 20px;
+ left: 20px;
+}
+
+.time, .value{
+ font-weight: 500;
+ font-size: 16px;
+}
+.addr{
+ font-size: 12px;
}
+.no-tx-img{
+ width: 100px;
+ height: 100px;
+}
+.no-record{
+ display: block;
+}
+
+ .btn-send-transfer .iconfont{
+ margin-right: 4px;
+ }
+
</style>
<template>
<div class="warp">
- <section class="bg-green">
+ <section class="bg-image">
<div class="topbar">
- <div class="topbar-right">
- <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-left">
<a class="btn-menu" @click="openMenu">
<i class="iconfont icon-menu"></i>
</a>
- <span class="alias">{{currentAccount.alias}}</span>
</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">
- <img src="@/assets/logo.png" class="token-icon">
- <div v-if="currentAccount.address!=undefined" class="amount">
+ <div v-if="currentAccount.address!=undefined" class="amount color-white">
+ <span class="alias color-grey">{{currentAccount.alias}}</span>
<div class="token-amount">
{{accountBalance}}
<span class="asset">BTM</span>
</div>
- <p class="account-address">
- <span class="address-text" :title="addressTitle" :data-clipboard-text="currentAccount.address">{{shortAddress}}</span>
- <i class="iconfont qrcode" @click="showQrcode"></i>
- </p>
</div>
- <a v-if="currentAccount.address!=undefined" class="btn btn-primary btn-transfer" @click="transferOpen">{{ $t('main.transfer') }}</a>
+ <div v-else>
+ <p style="width: 250px; margin: 45px auto; text-align: center;">{{ $t('main.noAccount') }}</p>
+
+ </div>
+ </div>
+ <div class="btn-send-transfer">
+ <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="currentAccount.address!=undefined">
<section class="transaction-title">
- <h3 class="bg-gray">{{ $t('main.record') }}</h3>
+ <h3 class="bg-gray color-grey">{{ $t('main.record') }}</h3>
</section>
<section class="transactions">
- <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>
- <div>
- <div v-if="transcation.is_confirmed" class="time">{{transcation.block_timestamp | moment}}</div>
- <div v-else class="time">{{transcation.submission_timestamp | moment}}</div>
- <div class="addr">{{transcation.address}}</div>
- </div>
- </li>
- </ul>
- </vue-scroll>
+ <div v-if="currentAccount.address!=undefined">
+ <div v-if="transactions.length != 0">
+ <vue-scroll @handle-scroll="handleScroll">
+ <ul class="list">
+ <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="transaction.hasOwnProperty('block_timestamp')">
+ {{transaction.submission_timestamp | moment}}
+ </div>
+ <div v-else>
+ {{ $t('main.unconfirmed') }}
+ </div>
+ <div class="addr color-grey">{{transaction.address}}</div>
+ </div>
+ </li>
+ </ul>
+ </vue-scroll>
+ </div>
+ <div v-else>
+ <div class="bg-emptytx"></div>
+ <div>
+ <span class="color-lightgrey center-text no-record">{{$t('main.noRecord')}}</span>
+ </div>
+ </div>
+ </div>
+ <div v-else>
+ <router-link :to="{name: 'menu-account-creation'}">
+ <div class="bg-emptytx"></div>
+ <div>
+ <span class="color-lightgrey center-text no-record">{{$t('main.noRecord')}}</span>
+ </div>
+ <a class="btn btn-primary btn-creation">{{ $t('main.create') }}</a>
+ </router-link>
+ </div>
</section>
- </div>
- <div v-else>
- <p style="width: 250px; margin: 30px auto; text-align: center;">{{ $t('main.noAccount') }}</p>
- <router-link :to="{name: 'menu-account-creation'}">
- <a class="btn btn-primary btn-creation bg-green">{{ $t('main.create') }}</a>
- </router-link>
- </div>
<!-- child page -->
<div class="mask" v-show="maskShow"></div>
<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) return;
- localStorage.currentAccount = JSON.stringify(newVal);
+ if (newVal.guid == undefined){
+ return;
+ }
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>