From f110e6f777b648897ae849ab5d4feee016d27e7d Mon Sep 17 00:00:00 2001 From: Zhiting Lin Date: Wed, 28 Aug 2019 13:41:46 +0800 Subject: [PATCH] Add the asset list page. --- package-lock.json | 6 +- package.json | 2 +- src/assets/language/cn.js | 7 +- src/assets/language/en.js | 7 +- src/assets/style.css | 4 +- src/models/account.js | 6 +- src/models/transaction.js | 5 +- src/popup.js | 4 +- src/prompt.js | 4 +- src/router.js | 8 + src/store/actions.js | 1 + src/store/constants.js | 1 + src/store/mutations.js | 1 + src/store/store.js | 2 + src/utils/Number.js | 24 ++- src/views/assetList.vue | 298 ++++++++++++++++++++++++++ src/views/home.vue | 252 ++++++---------------- src/views/sendTransaction/transferConfirm.vue | 92 ++++---- src/views/sideMenu/menuSettings.vue | 42 +++- src/views/transferDetail.vue | 17 +- src/views/vote/listVote.vue | 4 +- 21 files changed, 535 insertions(+), 252 deletions(-) create mode 100644 src/views/assetList.vue diff --git a/package-lock.json b/package-lock.json index ad2719f..c8ba886 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9875,9 +9875,9 @@ "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", diff --git a/package.json b/package.json index 595fb70..a077d15 100644 --- a/package.json +++ b/package.json @@ -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": [ diff --git a/src/assets/language/cn.js b/src/assets/language/cn.js index 265d611..486dc37 100644 --- a/src/assets/language/cn.js +++ b/src/assets/language/cn.js @@ -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: '备份', diff --git a/src/assets/language/en.js b/src/assets/language/en.js index a070f53..9f118a5 100644 --- a/src/assets/language/en.js +++ b/src/assets/language/en.js @@ -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', diff --git a/src/assets/style.css b/src/assets/style.css index 81b580d..ab86b08 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -89,8 +89,8 @@ a { float: right; } -.text-aglin-right { - text-aglin: right; +.text-align-right { + text-align: right; } h1, diff --git a/src/models/account.js b/src/models/account.js index aa5f203..233505f 100644 --- a/src/models/account.js +++ b/src/models/account.js @@ -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'] } }); diff --git a/src/models/transaction.js b/src/models/transaction.js index b7df428..8af3553 100644 --- a/src/models/transaction.js +++ b/src/models/transaction.js @@ -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) { diff --git a/src/popup.js b/src/popup.js index f9d6c0c..444a548 100644 --- a/src/popup.js +++ b/src/popup.js @@ -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' diff --git a/src/prompt.js b/src/prompt.js index 0965b2b..a4b86ed 100644 --- a/src/prompt.js +++ b/src/prompt.js @@ -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' diff --git a/src/router.js b/src/router.js index 8dd7240..100930b 100644 --- a/src/router.js +++ b/src/router.js @@ -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: '节点展示' }, diff --git a/src/store/actions.js b/src/store/actions.js index 54a2237..3fb0d6d 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -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), diff --git a/src/store/constants.js b/src/store/constants.js index 5d765d8..3221214 100644 --- a/src/store/constants.js +++ b/src/store/constants.js @@ -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'; diff --git a/src/store/mutations.js b/src/store/mutations.js index f2365f7..96345d8 100644 --- a/src/store/mutations.js +++ b/src/store/mutations.js @@ -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), diff --git a/src/store/store.js b/src/store/store.js index a1d41fe..40f4622 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -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 || [], diff --git a/src/utils/Number.js b/src/utils/Number.js index 4915d3b..5c650fc 100644 --- a/src/utils/Number.js +++ b/src/utils/Number.js @@ -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 index 0000000..d0a7748 --- /dev/null +++ b/src/views/assetList.vue @@ -0,0 +1,298 @@ + + + + + diff --git a/src/views/home.vue b/src/views/home.vue index c6be665..54a88d1 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -45,13 +45,7 @@ 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; } @@ -59,15 +53,6 @@ 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; @@ -114,21 +99,14 @@ 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; @@ -140,17 +118,10 @@ 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; } @@ -171,7 +142,7 @@
- @@ -182,7 +153,6 @@ {{currentAccount.alias}}
{{accountBalance}} - BTM
@@ -216,52 +186,46 @@
+
+

{{ $t('main.asset') }}

+
+
+
+
+
    +
  • +
    +
    {{ itemBalance(asset) }}
    +
    {{ formatCurrency(asset[ currency ]) }}
    +
    +
    +
    + {{asset.alias}} +
    + +
    {{shortAddress(asset.asset)}}
    +
    -
    -

    {{ $t('main.record') }}

    -
    -
    -
    -
    - -
      -
    • -
      -
      {{transaction.direct}} {{transaction.val.toFixed(2)}} BTM
      -
      {{ $t('listVote.vote')}} {{transaction.vAmount}}
      -
      {{ $t('listVote.cancelVote')}} {{transaction.vAmount}}
      -
      {{ $t('crossChain.title')}}
      -
      -
      -
      - {{transaction.submission_timestamp | moment}} -
      -
      - {{ $t('main.unconfirmed') }} -
      -
      {{transaction.address}}
      -
      -
      • -
    -     -
    -
    -
    -
    - {{$t('main.noRecord')}} -
    -
    -
    -
    - -
    -
    - {{$t('main.noRecord')}} -
    - {{ $t('main.create') }} -     -
    -
    +
    • +
+
+
+
+
+ {{$t('main.noRecord')}} +
+
+
+
+ +
+
+ {{$t('main.noRecord')}} +
+ {{ $t('main.create') }} + +
+
@@ -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) }, }; diff --git a/src/views/sendTransaction/transferConfirm.vue b/src/views/sendTransaction/transferConfirm.vue index 35b8a9c..8c3485c 100644 --- a/src/views/sendTransaction/transferConfirm.vue +++ b/src/views/sendTransaction/transferConfirm.vue @@ -93,6 +93,10 @@ margin:0; margin-bottom: 10px; } + .scorll-panel{ + overflow: scroll; + height: 545px; + } @@ -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; + } + } + } }; diff --git a/src/views/transferDetail.vue b/src/views/transferDetail.vue index 6613865..b02a470 100644 --- a/src/views/transferDetail.vue +++ b/src/views/transferDetail.vue @@ -82,7 +82,7 @@ color:rgba(255,255,255,0.50); } .asset{ - margin-left: 3px; + text-transform: uppercase; } .divider{ margin: 10px 0; @@ -106,7 +106,7 @@
-

{{transaction.direct}}{{transaction.val}}BTM

+

{{transaction.direct}}{{transaction.val}}

{{ $t('transactionDetail.fail') }} @@ -135,6 +135,14 @@ + {{ $t('transactionDetail.assetId') }} + + +

{{currentAsset.asset}}

+ + + + {{ $t('transactionDetail.time') }} @@ -193,7 +201,7 @@