OSDN Git Service

Add the asset list page.
authorZhiting Lin <zlin035@uottawa.ca>
Wed, 28 Aug 2019 05:41:46 +0000 (13:41 +0800)
committerZhiting Lin <zlin035@uottawa.ca>
Wed, 28 Aug 2019 05:41:46 +0000 (13:41 +0800)
21 files changed:
package-lock.json
package.json
src/assets/language/cn.js
src/assets/language/en.js
src/assets/style.css
src/models/account.js
src/models/transaction.js
src/popup.js
src/prompt.js
src/router.js
src/store/actions.js
src/store/constants.js
src/store/mutations.js
src/store/store.js
src/utils/Number.js
src/views/assetList.vue [new file with mode: 0644]
src/views/home.vue
src/views/sendTransaction/transferConfirm.vue
src/views/sideMenu/menuSettings.vue
src/views/transferDetail.vue
src/views/vote/listVote.vue

index ad2719f..c8ba886 100644 (file)
       "dev": true
     },
     "vuescroll": {
-      "version": "4.9.0-beta.5",
-      "resolved": "https://registry.npmjs.org/vuescroll/-/vuescroll-4.9.0-beta.5.tgz",
-      "integrity": "sha512-OItnSDVYPiHudq4Pm/MHhgig6Urc4oYzdV1/fGvxzCNWz8UNdozzEA4lLbBdqR99xH4b5I1ZzcJ1P3535sy/AA=="
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/vuescroll/-/vuescroll-4.14.0.tgz",
+      "integrity": "sha512-BQQcU0u9uRpmBTPoqgGcRD//g7/XUJzPxdEXupX4XSW0J+GZyUThjN0+cvvJlQyl/FmduMF6qF3JvKEfpNClQA=="
     },
     "vuex": {
       "version": "3.1.1",
index 595fb70..a077d15 100644 (file)
@@ -29,7 +29,7 @@
         "vue-i18n": "^8.2.1",
         "vue-loading-overlay": "^3.0.1",
         "vue-router": "^3.0.2",
-        "vuescroll": "^4.9.0-beta.5",
+        "vuescroll": "^4.14.0",
         "vuex": "^3.1.1"
     },
     "browserslist": [
index 265d611..486dc37 100644 (file)
@@ -104,6 +104,7 @@ const cn = {
     send: '发送',
     receive: '接收',
     record: '交易记录',
+    asset:'资产',
     noAccount: '当前网络无账户信息',
     create: '创建账户',
     unconfirmed :'未确认交易',
@@ -123,7 +124,8 @@ const cn = {
     success:'交易成功',
     fail:'交易失败',
     pending:'未确认交易',
-    tips:'提示:访问blockmeta.com来获取交易的相关信息。'
+    tips:'提示:访问blockmeta.com来获取交易的相关信息。',
+    assetId:'资产Id'
   },
   menu: {
     title: '切换账户',
@@ -157,7 +159,8 @@ const cn = {
     title: '设置',
     version: '钱包版本',
     lang: '语言',
-    unit: 'BTM数量单位'
+    unit: 'BTM数量单位',
+    currency:'货币'
   },
   backup: {
     title: '备份',
index a070f53..9f118a5 100644 (file)
@@ -106,6 +106,7 @@ const en = {
     send: 'Send',
     receive: 'Receive',
     record: 'Transaction Record',
+    asset:'Asset',
     noAccount: 'No account information on this network.',
     create: 'Create account',
     noRecord:"No transaction records found.",
@@ -125,7 +126,8 @@ const en = {
     success:'The transaction is succeed',
     fail:'The transaction is Failed.',
     pending:'The transaction is pending…',
-    tips:'Tip: Visit Blockmeta.com to check more information. '
+    tips:'Tip: Visit Blockmeta.com to check more information. ',
+    assetId:'Asset Id'
   },
   menu: {
     title: 'Switch Account',
@@ -160,7 +162,8 @@ const en = {
     title: 'Setting',
     version: 'Version',
     lang: 'Language',
-    unit: 'Btm Amount Unit'
+    unit: 'Btm Amount Unit',
+    currency:'Currency'
   },
   backup: {
     title: 'Backup',
index 81b580d..ab86b08 100644 (file)
@@ -89,8 +89,8 @@ a {
   float: right;
 }
 
-.text-aglin-right {
-  text-aglin: right;
+.text-align-right {
+  text-align: right;
 }
 
 h1,
index aa5f203..233505f 100644 (file)
@@ -69,9 +69,9 @@ account.balance = function(guid) {
             obj[balance.asset] = balance;
             delete obj[balance.asset]['total_received']
             delete obj[balance.asset]['total_sent']
-            delete obj[balance.asset]['in_btc']
-            delete obj[balance.asset]['in_cny']
-            delete obj[balance.asset]['in_usd']
+            // delete obj[balance.asset]['in_btc']
+            // delete obj[balance.asset]['in_cny']
+            // delete obj[balance.asset]['in_usd']
           }
         });
 
index b7df428..8af3553 100644 (file)
@@ -2,8 +2,9 @@ import bytom from "./bytom";
 
 let transaction = {};
 
-transaction.list = function(guid, address, start, limit) {
-  return bytom.transaction.list(guid, address, start, limit);
+transaction.list = function(guid, asset_id, start, limit) {
+  const filter = {asset_id}
+  return bytom.transaction.list(guid, filter, null, start, limit);
 };
 
 transaction.convertArgument = function(argArray) {
index f9d6c0c..444a548 100644 (file)
@@ -34,7 +34,9 @@ store.dispatch(Actions.LOAD_BYTOM).then(() => {
   Vue.component('v-select', vSelect)
 
   Vue.prototype.$vuescrollConfig = {
-    mode: 'pure-native',
+    mode: 'native',
+    sizeStrategy: 'percent',
+    detectResize: true,
     bar: {
       keepShow: true,
       background: '#c9c9c9'
index 0965b2b..a4b86ed 100644 (file)
@@ -35,7 +35,9 @@ store.dispatch(Actions.LOAD_BYTOM).then(() => {
     return moment(value * 1000).format(formatString)
   })
   Vue.prototype.$vuescrollConfig = {
-    mode: 'pure-native',
+    mode: 'native',
+    sizeStrategy: 'percent',
+    detectResize: true,
     bar: {
       keepShow: true,
       background: '#c9c9c9'
index 8dd7240..100930b 100644 (file)
@@ -18,6 +18,14 @@ const routers = [
         }
       },
       {
+        path: '/asset',
+        name: 'asset',
+        meta: { title: '资产' },
+        component: resolve => {
+          require(['@/views/assetList.vue'], resolve)
+        }
+      },
+      {
         path: '/listVote',
         name: 'listVote',
         meta: { title: '节点展示' },
index 54a2237..3fb0d6d 100644 (file)
@@ -7,6 +7,7 @@ import account from "../models/account";
 export const actions = {
     [Actions.SET_BYTOM]:({commit}, bytom) => commit(Actions.SET_BYTOM, bytom),
     [Actions.SET_LIST_VOTE]:({commit}, listVote) => commit(Actions.SET_LIST_VOTE, listVote),
+    [Actions.SET_CURRENT_ASSET]:({commit}, currentAsset) => commit(Actions.SET_CURRENT_ASSET, currentAsset),
     [Actions.SET_SELECTED_VOTE]:({commit}, selectVote) => commit(Actions.SET_SELECTED_VOTE, selectVote),
 
 
index 5d765d8..3221214 100644 (file)
@@ -8,6 +8,7 @@ export const CREATE_NEW_BYTOM_ACCOUNT = 'createNewAccount';
 export const IMPORT_BYTOM = 'importBytom';
 export const SET_AUTO_LOCK = 'setAutoLock';
 export const SET_LIST_VOTE = 'setListVote';
+export const SET_CURRENT_ASSET = 'setCurrentAsset';
 export const SET_SELECTED_VOTE = 'setSelectVote';
 export const LOCK = 'lock';
 export const DESTROY = 'destroy';
index f2365f7..96345d8 100644 (file)
@@ -10,6 +10,7 @@ export const mutations = {
     [Mutations.PUSH_PROMPT]:(state, prompt) => state.prompt = prompt,
     [Mutations.SET_LIST_VOTE]:(state, listVote) => state.listVote = listVote,
     [Mutations.SET_SELECTED_VOTE]:(state, selectVote) => state.selectVote = selectVote,
+    [Mutations.SET_CURRENT_ASSET]:(state, currentAsset) => state.currentAsset = currentAsset,
 
   // [Mutations.SET_AUTO_LOCK]:(state, inactivityInterval) =>
     //     state.bytom.settings.inactivityInterval = TimingHelpers.minutes(inactivityInterval),
index a1d41fe..40f4622 100644 (file)
@@ -15,6 +15,7 @@ const state = {
     prompt:null,
     listVote:[],
     selectVote: null,
+    currentAsset: null,
 };
 
 const getters = {
@@ -24,6 +25,7 @@ const getters = {
     netType:state => state.bytom.settings.netType,
     language:state => state.bytom.settings.language,
     login:state => state.bytom.settings.login,
+    currency:state => state.bytom.settings.currency,
 
     // FOR PROMPTS ONLY
     messages:state => state.prompt.data.messages || [],
index 4915d3b..5c650fc 100644 (file)
@@ -5,13 +5,13 @@ export class Number {
    * format num to BTM
    * @returns number
    */
-  static formatNue(num) {
+  static formatNue(num, dec) {
     let n = new BigNumber(num);
-    let base = new BigNumber(100000000)
+    let base = new BigNumber(10).exponentiatedBy(dec)
 
     let result = n.dividedBy(base)
 
-    return result.toFormat();
+    return result.toFormat(dec);
   }
 
   /***
@@ -25,6 +25,24 @@ export class Number {
     return result+'%';
   }
 
+  /***
+   * format num to currency value
+   * @returns percentage
+   */
+  static formatCurrency(num, type) {
+    let n = new BigNumber(num);
+    switch(type){
+      case "in_cny":
+        return `¥ ${n.toFormat()}`
+      case "in_usd":
+        return `$ ${n.toFormat()}`
+      case "in_btc":
+        return `₿ ${n.toFormat()}`
+      default:
+        return `¥ ${n.toFormat()}`
+    }
+  }
+
 }
 
 export default Number;
diff --git a/src/views/assetList.vue b/src/views/assetList.vue
new file mode 100644 (file)
index 0000000..d0a7748
--- /dev/null
@@ -0,0 +1,298 @@
+<style lang="" scoped>
+  .header {
+    display: flex;
+  }
+  .header p{
+    text-align: center;
+    width: 280px;
+    padding-top: 17px;
+  }
+
+.topbar-left .btn-menu i {
+    font-size: 100%;
+}
+.alias {
+    height: 25px;
+    font-size: 16px;
+    line-height: 28px;
+}
+
+.content {
+    text-align: center;
+    padding: 20px 30px;
+}
+
+.content .amount {
+    padding-bottom: 10px;
+}
+.content .token-amount {
+    font-size: 32px;
+    line-height: 45px;
+}
+
+.transaction-title h3 {
+    font-size: 16px;
+    font-weight: inherit;
+    padding: 10px 0 10px 20px;
+}
+.transactions {
+  font-size: 15px;
+  height: 340px;
+}
+.list-item {
+    padding: 10px 20px;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+}
+
+.list-item:after {
+    content:"";
+    background: #e0e0e0;
+    position: absolute;
+    bottom: 0;
+    left: 20px;
+    height: 1px;
+    width: 90%;
+}
+.addr{
+  font-size: 12px;
+}
+
+
+.no-record{
+  display: block;
+}
+
+
+</style>
+
+<template>
+    <div class="warp-chlid bg-white">
+        <section class="header bg-header">
+          <i class="iconfont icon-back" @click="close"></i>
+          <p>{{ $t('main.receive') }}</p>
+        </section>
+        <section class="bg-green">
+            <div class="content">
+                <div v-if="currentAsset!=undefined" class="amount color-white">
+                    <span class="alias color-grey">{{currentAsset.alias}}</span>
+                    <div class="token-amount">
+                        {{itemBalance(currentAsset)}}
+                    </div>
+                    <div>{{formatCurrency(currentAsset[ currency ])}}</div>
+                </div>
+            </div>
+        </section>
+            <section class="transaction-title">
+                <h3 class="bg-gray color-grey">{{ $t('main.record') }}</h3>
+            </section>
+            <section class="transactions">
+                  <div class="transactions" v-if="transactions.length != 0">
+                      <vue-scroll ref="vs" @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>
+                                  <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>
+                              <div class="text-align-right">
+                                <div class="value">{{transaction.direct}} {{transaction.val}}</div>
+                                <div v-if="transaction.type == 'vote'" class="addr color-grey">{{ $t('listVote.vote')}} {{transaction.vAmount}}</div>
+                                <div v-else-if="transaction.type == 'veto'" class="addr color-grey">{{ $t('listVote.cancelVote')}}  {{transaction.vAmount}}</div>
+                                <div v-else-if="transaction.type == 'crossChain'" class="addr color-grey">{{ $t('crossChain.title')}}</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>
+            </section>
+
+    </div>
+</template>
+
+<script>
+import address from "@/utils/address";
+import transaction from "@/models/transaction";
+import { BTM } from "@/utils/constants";
+import { mapActions, mapGetters, mapState } from 'vuex'
+import * as Actions from '@/store/constants';
+import _ from 'lodash';
+import { Number as Num } from "@/utils/Number"
+
+
+const EnterActive = 'animated faster fadeInLeft';
+const LeaveActive = 'animated faster fadeOutLeft';
+export default {
+    name: "",
+    data() {
+        return {
+            asset:null,
+            transactions: [],
+            maskShow: false,
+            start: 0,
+            limit: 10,
+            enterActive: EnterActive,
+            leaveActive: LeaveActive,
+        };
+    },
+    watch: {
+        '$route'(to, from) {
+            if (to.name.startsWith('menu')) {
+                this.maskShow = true
+            } else if (from.name.startsWith('menu')) {
+                this.maskShow = false
+            }
+
+            // remove transition for some page
+            this.enterActive = EnterActive
+            this.leaveActive = LeaveActive
+        },
+      'currentAccount.balances'() {
+        this.$refs['vs'].scrollTo(
+          {
+            y: 0
+          },
+          500,
+          'easeInQuad'
+        );
+          this.start = 0
+          this.refreshTransactions( this.start, this.limit).then(transactions => {
+            this.transactions = transactions
+          });
+      },
+    },
+    computed: {
+        ...mapState([
+          'bytom',
+          'currentAsset'
+        ]),
+        ...mapGetters([
+          'currentAccount',
+          'currency'
+        ])
+    },
+    methods: {
+      close: function () {
+        this.$router.go(-1)
+      },
+      shortAddress: function (add) {
+        return address.short(add)
+      },
+      formatCurrency: function (num) {
+        return Num.formatCurrency(num, this.currency)
+      },
+      itemBalance: function(asset){
+        if(asset.asset === BTM){
+          return Num.formatNue(asset.balance,8)
+        }else{
+          return Num.formatNue(asset.balance,asset.decimals)
+        }
+
+      },
+        handleScroll(vertical, horizontal, nativeEvent) {
+            if (vertical.process == 0) {
+                this.start = 0;
+                this.refreshTransactions( this.start, this.limit).then(transactions => {
+                    this.transactions = transactions
+                });
+                return;
+            }
+
+            if ( (vertical.process == 1) && (this.transactions.length == (this.start+1)*this.limit) ) {
+                this.start += this.limit;
+                this.refreshTransactions( this.start, this.limit).then(transactions => {
+                    transactions.forEach(transaction => {
+                        this.transactions.push(transaction);
+                    });
+                });
+            }
+        },
+        refreshTransactions: function (start, limit) {
+            return new Promise((resolve, reject) => {
+                transaction.list(this.currentAccount.guid, this.currentAsset.asset, start, limit).then(transactions => {
+                    if (transactions == null) {
+                        return;
+                    }
+
+                    const formattedTx = this.transactionsFormat(transactions);
+                    resolve(formattedTx)
+                }).catch(error => {
+                    console.log(error);
+                    reject(error)
+                });
+            })
+        },
+        transactionsFormat: function (transactions) {
+          const formattedTransactions = []
+          const assetID = this.currentAsset.asset
+
+          transactions.forEach(transaction => {
+            const balanceObject = transaction.balances
+              .filter(b => b.asset === assetID);
+
+            const filterInput = _.find(transaction.inputs, function(o) { return o.type =='veto'; })
+
+            if(filterInput){
+              transaction.type = 'veto'
+              const inAmount = _.sumBy((transaction.inputs.filter(i => i.type ==='veto')), 'amount')
+              const outAmount = _.sumBy((transaction.outputs.filter(i => i.type ==='vote')), 'amount')
+              transaction.vAmount =  Num.formatNue(inAmount-outAmount,8)
+            }else if(_.find(transaction.outputs, function(o) { return o.type =='vote'; })){
+              const outAmount = _.sumBy((transaction.outputs.filter(i => i.type ==='vote')), 'amount')
+              transaction.vAmount =  Num.formatNue(outAmount,8)
+              transaction.type = 'vote'
+            }else if(_.find(transaction.outputs, function(o) { return o.type =='crosschain_output'; })){
+              transaction.type = 'crossChain'
+            }
+
+            if(balanceObject.length ===1 ){
+                const inputAddresses = transaction.inputs
+                  .filter(input => input.asset === assetID && input.address !== this.currentAccount.address)
+                  .map(input => input.address)
+
+                const outputAddresses = transaction.outputs
+                  .filter(output => output.asset === assetID && output.address !== this.currentAccount.address)
+                  .map(output => output.address)
+
+                let val = Math.abs(balanceObject[0].amount)
+                val  = assetID===BTM ?  Num.formatNue(val, 8) + ' BTM': Num.formatNue(val, this.currentAsset.decimals)
+
+                if (Number(balanceObject[0].amount) > 0) {
+                    transaction.direct = "+";
+                    transaction.address = address.short(inputAddresses.pop());
+                } else {
+                    transaction.direct = "-";
+                    transaction.address = address.short(outputAddresses.pop());
+                }
+
+                transaction.val =  val ;
+                transaction.fee = transaction.fee / 100000000;
+
+                formattedTransactions.push(transaction);
+              }
+            });
+          return formattedTransactions;
+        },
+      ...mapActions([
+        Actions.UPDATE_STORED_BYTOM,
+      ])
+    },
+    mounted() {
+        this.refreshTransactions( this.start, this.limit).then(transactions => {
+          this.transactions = transactions
+        });
+    },
+  };
+</script>
index c6be665..54a88d1 100644 (file)
     text-align: center;
     padding: 0 30px 10px;
 }
-.content .token-icon {
-    display: inline-flex;
-    height: 40px;
-    width: 40px;
-    padding: 8px;
-    margin: 8px;
-}
+
 .content .amount {
     padding-bottom: 10px;
 }
     font-size: 32px;
     line-height: 45px;
 }
-.token-amount .asset {
-    font-size: 18px;
-    margin-left: 2px;
-}
-.qrcode {
-    margin-left: 5px;
-    vertical-align: middle;
-    cursor: pointer;
-}
 
 .btn-send-transfer {
     display: flex;
     position: relative;
     display: block;
     padding: 10px 20px;
+    height: 52px;
+    text-transform: uppercase;
 }
 
-.list-item:after {
-    content:"";
-    background: #e0e0e0;
-    position: absolute;
-    bottom: 0;
-    left: 20px;
-    height: 1px;
-    width: 90%;
+.network-select{
+  text-transform: capitalize;
 }
 
-.account-address {
-    cursor: pointer;
-}
 .btn-creation {
     display: block;
     width: 310px;
     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;
 }
                     </a>
                 </div>
                 <div class="topbar-middle bg-secondary">
-                    <select :value="netType" @change="netTypeToggle">
+                    <select class="network-select" :value="netType" @change="netTypeToggle">
                         <option value="bytom">{{ $t('main.bytom') }} {{net}}</option>
                         <option value="vapor">{{ $t('main.vapor') }} {{net}}</option>
                     </select>
                     <span class="alias color-grey">{{currentAccount.alias}}</span>
                     <div class="token-amount">
                         {{accountBalance}}
-                        <span class="asset">BTM</span>
                     </div>
                 </div>
                 <div v-else>
                 </a>
             </div>
         </section>
+      <section class="transaction-title">
+      <h3 class="bg-gray color-grey">{{ $t('main.asset') }}</h3>
+      </section>
+      <section class="transactions">
+        <div v-if="address!=undefined">
+        <div v-if="balances && balances.length > 0">
+          <ul class="list">
+            <li class="list-item" v-for="(asset, index) in balances.slice().reverse()" :key="index" @click="assetOpen(asset)">
+              <div class="float-right text-align-right">
+                <div class="value">{{ itemBalance(asset) }}</div>
+                <div class="addr color-grey">{{ formatCurrency(asset[ currency ]) }}</div>
+              </div>
+              <div>
+                <div v-if="asset.alias !== ''">
+                  {{asset.alias}}
+                </div>
+
+                <div class="addr color-grey">{{shortAddress(asset.asset)}}</div>
+              </div>
 
-            <section class="transaction-title">
-                <h3 class="bg-gray color-grey">{{ $t('main.record') }}</h3>
-            </section>
-            <section class="transactions">
-                 <div v-if="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="float-right text-aglin-right">
-                                <div class="value">{{transaction.direct}} {{transaction.val.toFixed(2)}} BTM</div>
-                                <div v-if="transaction.type == 'vote'" class="addr color-grey">{{ $t('listVote.vote')}} {{transaction.vAmount}}</div>
-                                <div v-else-if="transaction.type == 'veto'" class="addr color-grey">{{ $t('listVote.cancelVote')}}  {{transaction.vAmount}}</div>
-                                <div v-else-if="transaction.type == 'crossChain'" class="addr color-grey">{{ $t('crossChain.title')}}</div>
-                              </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>
+            </li>
+          </ul>
+        </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>
 
         <!-- child page -->
         <div class="mask" v-show="maskShow"></div>
@@ -314,9 +278,6 @@ export default {
             }
             if (from.name == 'transfer-confirm') {
               this.setupNetwork()
-              this.refreshTransactions(this.currentAccount.guid, this.address).then(transactions => {
-                this.transactions = transactions
-              });
             }
         },
         currentAccount(newVal, oldVal) {
@@ -330,24 +291,18 @@ export default {
             }else{
               addr = newVal.address
             }
-
-            this.refreshTransactions(newVal.guid, addr).then(transactions => {
-                this.transactions = transactions
-            });
         },
     },
     computed: {
-        shortAddress: function () {
-            return address.short(this.address)
-        },
         accountBalance: function () {
             let balance
             const balances = this.balances
+
             if(balances && balances.length >0 ){
-                const balanceObject = balances.filter(b => b.asset === BTM)[0]
-                balance = balanceObject.balance/Math.pow(10,balanceObject.decimals)
+                const currency = this.currency
+                balance = _.sumBy(balances, function(o) { return Number(o[currency]); })
             }
-            return (balance != null && balance != 0) ? balance : '0.00'
+            return  Num.formatCurrency( (balance != null && balance != 0)? balance : '0.00', this.currency)
         },
         address: function(){
           if(this.netType === 'vapor'){
@@ -370,10 +325,24 @@ export default {
           'currentAccount',
           'accountList',
           'net',
-          'netType'
+          'netType',
+          'currency'
         ])
     },
     methods: {
+      shortAddress: function (add) {
+        return address.short(add)
+      },
+      formatCurrency: function (num) {
+        return Num.formatCurrency(num, this.currency)
+      },
+      itemBalance: function(asset){
+        if(asset.asset === BTM){
+          return Num.formatNue(asset.balance,8)
+        }else{
+          return Num.formatNue(asset.balance,asset.decimals)
+        }
+      },
         setupRefreshTimer() {
             setInterval(() => {
                 this.refreshBalance(this.currentAccount.guid)
@@ -422,23 +391,9 @@ export default {
         listVoteOpen: function () {
             this.$router.push('listVote')
         },
-        handleScroll(vertical, horizontal, nativeEvent) {
-            if (vertical.process == 0) {
-                this.start = 0;
-                this.refreshTransactions(this.currentAccount.guid, this.address).then(transactions => {
-                    this.transactions = transactions
-                });
-                return;
-            }
-
-            if (vertical.process == 1) {
-                this.start += this.limit;
-                this.refreshTransactions(this.currentAccount.guid, this.address, this.start, this.limit).then(transactions => {
-                    transactions.forEach(transaction => {
-                        this.transactions.push(transaction);
-                    });
-                });
-            }
+        assetOpen: function (asset) {
+            this[Actions.SET_CURRENT_ASSET](asset)
+            this.$router.push('asset')
         },
         refreshBalance: function (guid) {
           if(guid){
@@ -480,82 +435,15 @@ export default {
             });
           }
         },
-        refreshTransactions: function (guid, address, start, limit) {
-            return new Promise((resolve, reject) => {
-                transaction.list(guid, address, start, limit).then(transactions => {
-                    if (transactions == null) {
-                        return;
-                    }
-
-                    const formattedTx = this.transactionsFormat(transactions);
-                    resolve(formattedTx)
-                }).catch(error => {
-                    console.log(error);
-                    reject(error)
-                });
-            })
-        },
-        transactionsFormat: function (transactions) {
-          const formattedTransactions = []
-          const assetID = BTM
-
-          transactions.forEach(transaction => {
-            const balanceObject = transaction.balances
-              .filter(b => b.asset === assetID);
-
-            const filterInput = _.find(transaction.inputs, function(o) { return o.type =='veto'; })
-
-            if(filterInput){
-              transaction.type = 'veto'
-              const inAmount = _.sumBy((transaction.inputs.filter(i => i.type ==='veto')), 'amount')
-              const outAmount = _.sumBy((transaction.outputs.filter(i => i.type ==='vote')), 'amount')
-              transaction.vAmount =  Num.formatNue(inAmount-outAmount)
-            }else if(_.find(transaction.outputs, function(o) { return o.type =='vote'; })){
-              const outAmount = _.sumBy((transaction.outputs.filter(i => i.type ==='vote')), 'amount')
-              transaction.vAmount =  Num.formatNue(outAmount)
-              transaction.type = 'vote'
-            }else if(_.find(transaction.outputs, function(o) { return o.type =='crosschain_output'; })){
-              transaction.type = 'crossChain'
-            }
-
-            if(balanceObject.length ===1 ){
-                const inputAddresses = transaction.inputs
-                  .filter(input => input.asset === assetID && input.address !== this.address)
-                  .map(input => input.address)
-
-                const outputAddresses = transaction.outputs
-                  .filter(output => output.asset === assetID && output.address !== this.address)
-                  .map(output => output.address)
-
-
-                const val  = assetID===BTM ? Number(balanceObject[0].amount)/ 100000000 : Number(balanceObject[0].amount);
-
-                if (val > 0) {
-                    transaction.direct = "+";
-                    transaction.address = address.short(inputAddresses.pop());
-                } else {
-                    transaction.direct = "-";
-                    transaction.address = address.short(outputAddresses.pop());
-                }
-
-                transaction.val = Math.abs(val);
-                transaction.fee = transaction.fee / 100000000;
-
-                formattedTransactions.push(transaction);
-              }
-            });
-          return formattedTransactions;
-        },
       ...mapActions([
         Actions.UPDATE_STORED_BYTOM,
+        Actions.SET_CURRENT_ASSET,
       ])
     },
     mounted() {
         this.setupNetwork();
         this.setupRefreshTimer();
-        this.refreshTransactions(this.currentAccount.guid, this.address).then(transactions => {
-          this.transactions = transactions
-        });
+        this.refreshBalance(this.currentAccount.guid)
     },
   };
 </script>
index 35b8a9c..8c3485c 100644 (file)
     margin:0;
     margin-bottom: 10px;
   }
+  .scorll-panel{
+    overflow: scroll;
+    height: 545px;
+  }
 </style>
 
 <template>
             <p>{{ $t('transfer.confirmTransaction') }}</p>
         </section>
 
-        <section class="content bg-white">
-            <table>
-                <tbody>
-                    <tr class="row">
-                        <td class="col label">{{ $t('transfer.from') }}</td>
-                        <td class="col value">{{account.alias}}</td>
-                    </tr>
-                    <tr class="row">
-                        <td class="col label">{{ $t('transfer.to') }}</td>
-                        <td class="col value">{{transaction.toShort}}</td>
-                    </tr>
-                    <div class="divider"></div>
-                    <tr class="row">
-                        <td class="col label">{{ $t('transfer.transferAmount') }}</td>
-                        <td class="col value">{{transaction.amount}}<span class="uint">BTM</span></td>
-                    </tr>
-                    <tr class="row">
-                        <td class="col label">{{ $t('transfer.fee') }}</td>
-                        <td class="col value">{{transaction.fee}}<span class="uint">BTM</span></td>
-                    </tr>
-
-                    <tr class="row">
-                        <td class="col label">{{ $t('transfer.total') }}</td>
-                        <td class="col value">
-                            <!--<p class="fee-intro">{{ $t('transfer.totalTip') }}</p>-->
-                            {{Number(transaction.amount)+Number(transaction.fee)}}<span class="uint">BTM</span>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </section>
-
-        <section class="content bg-white">
-          <div class="form">
-            <div class="form-item">
-              <label class="form-item-label">{{ $t('transfer.confirmPassword') }}</label>
-              <div class="form-item-content">
-                <input type="password"  v-model="password" autofocus>
+        <div class="scorll-panel">
+            <section class="content bg-white">
+                <table>
+                    <tbody>
+                        <tr class="row">
+                            <td class="col label">{{ $t('transfer.from') }}</td>
+                            <td class="col value">{{account.alias}}</td>
+                        </tr>
+                        <tr class="row">
+                            <td class="col label">{{ $t('transfer.to') }}</td>
+                            <td class="col value">{{transaction.toShort}}</td>
+                        </tr>
+                        <div class="divider"></div>
+                        <tr class="row">
+                            <td class="col label">{{ $t('transfer.transferAmount') }}</td>
+                            <td class="col value">{{transaction.amount}}<span class="uint">BTM</span></td>
+                        </tr>
+                        <tr class="row">
+                            <td class="col label">{{ $t('transfer.fee') }}</td>
+                            <td class="col value">{{transaction.fee}}<span class="uint">BTM</span></td>
+                        </tr>
+
+                        <tr class="row">
+                            <td class="col label">{{ $t('transfer.total') }}</td>
+                            <td class="col value">
+                                <!--<p class="fee-intro">{{ $t('transfer.totalTip') }}</p>-->
+                                {{Number(transaction.amount)+Number(transaction.fee)}}<span class="uint">BTM</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+
+            <section class="content bg-white">
+              <div class="form">
+                <div class="form-item">
+                  <label class="form-item-label">{{ $t('transfer.confirmPassword') }}</label>
+                  <div class="form-item-content">
+                    <input type="password"  v-model="password" autofocus>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </section>
+            </section>
 
-        <div class="row" style="margin: 20px;">
-            <div class="btn bg-green" @click="transfer">{{ $t('transfer.confirm') }}</div>
+            <div class="row" style="margin: 20px;">
+                <div class="btn bg-green" @click="transfer">{{ $t('transfer.confirm') }}</div>
+            </div>
         </div>
 
     </div>
index 6b4114a..9db48d9 100644 (file)
                 <v-select style="height: 32px;" class="select"  :value="network" :clearable="false" :options="networks" :onChange="networkToggle"></v-select>
             </div>
         </div>
+        <div class="row">
+            <div class="label">
+                <p>{{ $t("setting.currency") }}</p>
+            </div>
+            <div class="form-item setting">
+                <v-select style="height: 32px;" class="select"  :value="currentCurrency" :clearable="false" :options="currencyList" :onChange="currencyToggle"></v-select>
+            </div>
+        </div>
     </MenuPage>
 </template>
 
@@ -74,7 +82,13 @@ export default {
               { label: this.$t('main.soloNet'), value: "solonet" }
             ],
             selected: { label: "中文", value: "cn" },
-            hashVersion: ""
+            hashVersion: "",
+            currentCurrency: { label: "CNY", value: "in_cny" },
+            currencyList: [
+              { label: "CNY", value: "in_cny" },
+              { label: "USD", value: "in_usd" },
+              { label: "BTC", value: "in_btc" }
+            ],
         };
     },
     computed: {
@@ -84,7 +98,8 @@ export default {
       ...mapGetters([
         'net',
         'language',
-        'netType'
+        'netType',
+        'currency'
       ])
     },
     methods: {
@@ -123,6 +138,15 @@ export default {
             })
           }
         },
+        currencyToggle: function (val) {
+          const bytom = this.bytom.clone();
+
+          if (bytom.settings.currency != val.value) {
+            bytom.settings.currency = val.value;
+            this.currentCurrency = val;
+            this[Actions.UPDATE_STORED_BYTOM](bytom)
+          }
+        },
         refreshAccounts: function () {
           account.list().then(accounts => {
             this.accounts = accounts;
@@ -165,6 +189,20 @@ export default {
             this.setupNetwork(network);
           }
 
+          if(this.currency) {
+            switch(this.currency){
+              case 'in_cny':
+                this.currentCurrency = this.currencyList[0]
+                break;
+              case 'in_usd':
+                this.currentCurrency = this.currencyList[1]
+                break;
+              case 'in_btc':
+                this.currentCurrency = this.currencyList[2]
+                break;
+            }
+          }
+
     }
 };
 </script>
index 6613865..b02a470 100644 (file)
@@ -82,7 +82,7 @@
     color:rgba(255,255,255,0.50);
   }
   .asset{
-    margin-left: 3px;
+    text-transform: uppercase;
   }
   .divider{
     margin: 10px 0;
         <section class="panel">
             <div class="tx-header"
                  v-bind:class="classObject">
-              <p class="value">{{transaction.direct}}{{transaction.val}}<span class="asset">BTM</span></p>
+              <p class="value">{{transaction.direct}}{{transaction.val}}</p>
               <small class="header-text" v-if="transaction.status_fail">
                 {{ $t('transactionDetail.fail') }}
               </small>
 
                       <tr>
                         <td class="label">
+                          {{ $t('transactionDetail.assetId') }}
+                        </td>
+                        <td class="asset value">
+                          <p>{{currentAsset.asset}}</p>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td class="label">
                           {{ $t('transactionDetail.time') }}
                         </td>
                         <td class="value">
 </template>
 
 <script>
-  import {  mapGetters } from 'vuex'
+  import {  mapState, mapGetters } from 'vuex'
 
   export default {
     name: "",
           'fail-header': this.transaction.status_fail
         }
       },
+      ...mapState([
+        'currentAsset'
+      ]),
       ...mapGetters([
         'currentAccount',
         'netType'
index 41b5f1c..1891975 100644 (file)
@@ -197,7 +197,7 @@ export default {
         if(votes && votes.length >0 ){
           vote = _.sumBy(votes,'total')
         }
-        return (vote != null && vote != 0) ? Number.formatNue(vote) : '0.00'
+        return (vote != null && vote != 0) ? Number.formatNue(vote, 8) : '0.00'
       },
       filteredList() {
         return this.listVote.filter(post => {
@@ -222,7 +222,7 @@ export default {
             this.$router.go(-1)
             },
         formatNue: function (nue) {
-          return Number.formatNue(nue);
+          return Number.formatNue(nue, 8);
         },
         formatFraction: function (upper, lower) {
           return Number.fractionalNum(upper, lower);