From fe282a54ca44a83831d1ea44295520921ba51f8d Mon Sep 17 00:00:00 2001
From: Zhiting Lin <zlin035@uottawa.ca>
Date: Wed, 5 Aug 2020 18:49:00 +0800
Subject: [PATCH] update list asset page

---
 src/assets/language/cn.js                          |  12 +-
 src/assets/style.css                               |  47 +++--
 src/components/backButton/button.vue               |  13 +-
 src/views/assetList.vue                            | 218 ++++++++++++---------
 src/views/home.vue                                 |  22 +--
 src/views/received.vue                             |   2 +-
 .../sendTransaction/crossChainTransaction.vue      |   2 +-
 src/views/sendTransaction/transfer.vue             |   2 +-
 src/views/sideMenu/homeMenu.vue                    |   2 +-
 src/views/transferDetail.vue                       |   2 +-
 src/views/vote/listCancel.vue                      |   2 +-
 src/views/vote/listVote.vue                        |   2 +-
 src/views/vote/veto.vue                            |   2 +-
 src/views/vote/vote.vue                            |   2 +-
 src/views/vote/voteRecord.vue                      |   2 +-
 src/views/vote/voteRegulation.vue                  |   2 +-
 16 files changed, 193 insertions(+), 141 deletions(-)

diff --git a/src/assets/language/cn.js b/src/assets/language/cn.js
index 9ce3c2b..3c76c77 100644
--- a/src/assets/language/cn.js
+++ b/src/assets/language/cn.js
@@ -17,7 +17,10 @@ const cn = {
     vote: '投票',
     transfer:'转账',
     issue:'资产发行',
-    retire:'资产销毁'
+    retire:'资产销毁',
+    transfer_in:'收款',
+    transfer_out:'转账',
+    cross_chain:'跨链'
   },
   welcome: {
     enterMain:'进入主界面',
@@ -81,6 +84,10 @@ const cn = {
     hideAll:'隐藏全部',
     types:'交易类型'
   },
+  listAsset: {
+    all:'全部',
+    fail:'失败'
+  },
   crossChain:{
     title:'跨链',
     detail:'跨链详情',
@@ -165,6 +172,9 @@ const cn = {
     network:'网络',
     totalAsset:'总资产'
   },
+  asset:{
+    title:'资产'
+  },
   transactionDetail: {
     title: '交易详情',
     fee: '矿工费用',
diff --git a/src/assets/style.css b/src/assets/style.css
index 509f0ca..8d82716 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -93,13 +93,14 @@ a {
   background: #FAFAFA;
   padding: 20px 20px 0;
 }
-.warp-chlid {
+.warp-child {
   position: absolute;
   top: 0;
   left: 0;
-  width: 360px;
-  height: 600px;
+  width: calc( 100% - 40px );
+  height:  calc( 100% - 20px );
   z-index: 995;
+  padding: 20px 20px 0;
 }
 
 .panel{
@@ -134,7 +135,6 @@ ul {
 li:active,
 li:hover,
 li.active {
-  background-color: #f7f7f7;
   cursor: pointer;
 }
 
@@ -362,6 +362,9 @@ hr {
 .bg-gray {
   background-color: #F0F0F0 !important;
 }
+.bg-grey {
+  background-color:  #FAFAFA !important;
+}
 .bg-white {
   background-color: #FFFFFF !important;
 }
@@ -378,12 +381,12 @@ hr {
   background-color: #035BD4 !important;
 }
 
-.bg-image{
-  background-image: url('img/background-1@2x.png');
-  background-repeat: no-repeat;
-  background-size: 360px 420px;
-}
+.bg-shadow-white{
+  background: #FFFFFF;
 
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.04);
+  border-radius: 8px;
+}
 .bg-secondary{
   background-color: #ffffff !important;
 }
@@ -539,13 +542,9 @@ hr {
   color: #010101;
 }
 
-.list-item {
-  padding: 5px 10px;
-}
 .list-item:active,
 .list-item:hover,
 .list-item.active {
-  background-color: #f7f7f7;
   cursor: pointer;
 }
 .list-item i {
@@ -659,3 +658,25 @@ label{
 .d-flex{
   display:flex;
 }
+
+.list-item {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  height: 49px;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.04);
+  border-radius: 8px;
+  padding: 14px;
+  margin-bottom: 12px;
+}
+
+.list-item:hover, .list-item:focus, .list-item:active{
+ border: 1px solid #004EE4;
+ padding: 13px;
+}
+
+.c-icon{
+  height: 36px;
+  padding-right: 12px;
+}
diff --git a/src/components/backButton/button.vue b/src/components/backButton/button.vue
index 3359ae8..91cac80 100644
--- a/src/components/backButton/button.vue
+++ b/src/components/backButton/button.vue
@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <i class="iconfont icon-back" @click="goBack()"></i>
+    <div >
+        <i :class="['iconfont icon-back',{small: small}]" @click="goBack()"></i>
     </div>
 </template>
 
@@ -8,6 +8,7 @@
 export default {
     props: {
       des:null,
+      small:false
     },
     methods: {
       goBack:function () {
@@ -29,4 +30,12 @@ export default {
 .iconfont:hover {
   background: #F5F5F5;
 }
+
+.small{
+  width: 56px;
+  height: 12px;
+  background: #EEEEEE;
+  border-radius: 20px;
+  padding: 2px 16px;
+}
 </style>
diff --git a/src/views/assetList.vue b/src/views/assetList.vue
index 2cc3d9e..f358e41 100644
--- a/src/views/assetList.vue
+++ b/src/views/assetList.vue
@@ -1,4 +1,4 @@
-<style lang="" scoped>
+<style lang="scss" scoped>
   .topbar {
     font-size: 19px;
     display:flex;
@@ -35,33 +35,32 @@
     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 {*/
+    /*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%;
+/*.list-item:after {*/
+    /*content:"";*/
+    /*background: #e0e0e0;*/
+    /*position: absolute;*/
+    /*bottom: 0;*/
+    /*left: 20px;*/
+    /*height: 1px;*/
+    /*width: 90%;*/
+/*}*/
+.value{
+font-size: 15px;
 }
 .addr{
   font-size: 12px;
+  color: rgba(0, 0, 0, 0.36);
 }
 
 
@@ -70,70 +69,108 @@
 }
 
   .symbol{
-    margin-bottom: -8px;
-    font-size:15px;
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    font-size: 15px;
+  }
+
+  .currency-banner{
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    align-items: center;
+  }
+
+  .back{
+      width: 56px;
+      height: 28px;
+
+      background: #EEEEEE;
+      border-radius: 20px;
+  }
+
+  .header{
+    display: flex;
+    margin-bottom: 20px;
+    h1{
+      margin-left: 12px;
+      font-size: 20px;
+    }
+  }
+
+  .list-item a{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    color: rgba(0, 0, 0, 0.88);
   }
 
 </style>
 
 <template>
-    <div class="warp-chlid bg-white">
-        <section class="bg-image">
-          <div class="topbar">
-            <div class="topbar-left">
-              <i class="iconfont icon-back" @click="close"></i>
-            </div>
-            <div class="topbar-middle">
-              <div v-if="currentAsset!=undefined" class="amount color-white">
-                <div v-if="currentAsset.asset.symbol!=='Asset'">
-                  <div class="symbol">
-                    {{currentAsset.asset.symbol}}
-                  </div>
+    <div class="warp-child bg-grey">
+        <section class="header">
+          <BackButton :small="true" :des="'home'"/>
+          <h1 class="color-black">
+            <div class="welcome-title">{{ $t('asset.title')}}</div>
+          </h1>
+        </section>
+        <section class="bg-shadow-white currency-banner">
+            <div class="color-black symbol" v-if="currentAsset && currentAsset.asset.symbol!=='Asset'">
+                <img :src="img(currentAsset.asset.symbol)" alt="" class="c-icon">
 
-                  <div class="alias color-grey">{{currentAsset.asset.name}}</div>
+                <div class="uppercase">
+                  {{currentAsset.asset.symbol}}
                 </div>
-                <div v-else>
-                  <div class="symbol">
-                    Asset
-                  </div>
+            </div>
 
-                  <div class="alias color-grey">{{shortAddress(currentAsset.asset.asset)}}</div>
-                </div>
+            <div class="color-black" v-else-if="currentAsset">
+              <div class="symbol">
+                Asset
               </div>
+
+              <div class="alias color-grey">{{shortAddress(currentAsset.asset.asset)}}</div>
             </div>
-          </div>
-            <div class="content">
-                <div v-if="currentAsset!=undefined" class="amount color-white">
-                    <div class="token-amount">
-                        {{itemBalance(currentAsset)}}
-                    </div>
-                    <div>{{formatCurrency(currentAsset[ camelize(currency) ])}}</div>
-                </div>
+
+            <div v-if="currentAsset!=undefined" class="amount text-align-right">
+                <div class="value color-black">{{ itemBalance(currentAsset) }}</div>
+                <div class="addr color-grey">≈{{ formatCurrency(currentAsset[ camelize(currency) ]) }}</div>
             </div>
         </section>
             <section class="transaction-title">
-                <h3 class="bg-gray color-grey">{{ $t('main.record') }}</h3>
+                <div class="bg-gray color-grey">{{ $t('listAsset.all') }}</div>
+                <div class="bg-gray color-grey">{{ $t('common.transfer_in') }}</div>
+                <div class="bg-gray color-grey">{{ $t('common.transfer_out') }}</div>
             </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}})">
+                          <li class="list-item" v-for="(transaction, index) in transactions" :key="index" >
+                            <a :href="blockmeta(transaction.hash)" target="_blank">
                               <div>
-                                  <div>{{transaction.address}}</div>
-                                  <div class="addr color-grey" v-if="transaction.hasOwnProperty('blockTimestamp')">
-                                    {{transaction.submissionTimestamp | moment}}
-                                  </div>
-                                  <div class="addr color-grey" v-else>
-                                    {{ $t('main.unconfirmed') }}
-                                  </div>
+                                <div >
+                                  {{transaction.type}}
+                                </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 class="addr color-grey" v-if="!transaction.status">
+                                  {{ $t('listAsset.fail') }}
+                                </div>
+                                <div class="addr color-grey" v-if="transaction.hasOwnProperty('blockTimestamp')">
+                                  {{transaction.submissionTimestamp | moment}}
+                                </div>
+                                <div class="addr color-grey" v-else>
+                                  {{ $t('main.unconfirmed') }}
+                                </div>
                               </div>
+                            </a>
                           </li>
                       </ul>
                   </vue-scroll>
@@ -222,6 +259,21 @@ export default {
         ])
     },
     methods: {
+      img:function (symbol) {
+        const _symbol = symbol.toLowerCase();
+        if(this.netType === 'vapor'){
+          return `https://cdn.blockmeta.com/resources/logo/vapor/${_symbol}.png`
+        }else{
+          return `https://cdn.blockmeta.com/resources/logo/bytom/${_symbol}.png`
+        }
+      },
+      blockmeta:function (txid) {
+        if(this.netType === 'vapor'){
+          return `https://vapor.blockmeta.com/tx/${txid}`
+        }else{
+          return `https://blockmeta.com/tx/${txid}`
+        }
+      },
       camelize: function (object) {
         return camelize(object)
       },
@@ -235,10 +287,10 @@ export default {
         return Num.formatCurrency(num, this.currency)
       },
       itemBalance: function(asset){
-        if(asset.asset === BTM){
+        if(asset.asset.assetId === BTM){
           return Num.formatNue(asset.availableBalance,8)
         }else{
-          return Num.formatNue(asset.availableBalance,asset.decimals)
+          return Num.formatNue(asset.availableBalance,asset.asset.decimals)
         }
 
       },
@@ -262,7 +314,7 @@ export default {
         },
         refreshTransactions: function (start, limit) {
             return new Promise((resolve, reject) => {
-                transaction.list(this.address, this.currentAsset.asset.assetId, start, limit).then(transactions => {
+                transaction.list(this.address, this.currentAsset.asset.assetId, start, limit, ['out_crosschain','in_crosschain',"ordinary"]).then(transactions => {
                   if (transactions == null) {
                         return;
                     }
@@ -283,36 +335,6 @@ export default {
             const balanceObject = transaction.balances
               .filter(b => b.asset.assetId === assetID);
 
-            const filterInput = _.find(transaction.inputs, function(o) { return o.type =='veto'; })
-            const filterOutput = _.find(transaction.outputs, function(o) { return o.type =='vote'; })
-
-            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.pubkey = filterInput.vote
-              transaction.vAmount =  Num.formatNue(inAmount-outAmount,8)
-            }else if(filterOutput){
-              const outAmount = _.sumBy((transaction.outputs.filter(i => i.type ==='vote')), 'amount')
-              transaction.pubkey = filterOutput.vote
-              transaction.vAmount =  Num.formatNue(outAmount,8)
-              transaction.type = 'vote'
-            }else if(transaction.types.includes('out_crosschain')){
-              transaction.type = 'crossChain'
-              if(this.netType === 'vapor'){
-                transaction.cDirection ='Vapor -> Bytom'
-              }else{
-                transaction.cDirection ='Bytom -> Vapor'
-              }
-            }else  if(transaction.types.includes('in_crosschain')){
-              transaction.type = 'crossChain'
-              if(this.netType === 'vapor'){
-                transaction.cDirection ='Bytom -> Vapor'
-              }else{
-                transaction.cDirection ='Vapor -> Bytom'
-              }
-            }
-
             const inputAddresses = transaction.inputs
               .filter(input => input.asset.assetId === assetID && input.address !== this.currentAccount.address)
               .map(input => input.address)
@@ -325,10 +347,18 @@ export default {
                 let val = Math.abs(balanceObject[0].amount)
 
                 if (Number(balanceObject[0].amount) > 0) {
+                    if(!transaction.type){
+                      transaction.type = this.$t("common.transfer_in");
+                    }
+
                     transaction.direct = "+";
                     const resultAddr = inputAddresses.pop()
                     transaction.address = (resultAddr && resultAddr.includes(' '))?resultAddr:address.short(resultAddr);
                 } else {
+                    if(!transaction.type) {
+                      transaction.type = this.$t("common.transfer_out");
+                    }
+
                     transaction.direct = "-";
                     const resultAddr = outputAddresses.pop()
                     transaction.address = (resultAddr && resultAddr.includes(' '))?resultAddr:address.short(resultAddr);
diff --git a/src/views/home.vue b/src/views/home.vue
index 23a6de3..f8810fe 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -79,22 +79,7 @@
   overflow: auto;
   flex-grow: 1;
 }
-.list-item {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  height: 49px;
-  background: #FFFFFF;
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.04);
-  border-radius: 8px;
-  padding: 14px;
-  margin-bottom: 12px;
-
-  &:hover, &:focus, &:active{
-    border: 1px solid #004EE4;
-    padding: 13px;
-  }
-}
+
 
 .network-select{
   text-transform: capitalize;
@@ -226,10 +211,7 @@ input:checked + .slider:before {
   color: rgba(0, 0, 0, 0.64);
 }
 
-  .c-icon{
-    height: 36px;
-    padding-right: 12px;
-  }
+
 
   .symbol{
     display: flex;
diff --git a/src/views/received.vue b/src/views/received.vue
index 20ec790..cae1e7c 100644
--- a/src/views/received.vue
+++ b/src/views/received.vue
@@ -37,7 +37,7 @@
 </style>
 
 <template>
-  <div class="warp-chlid bg-gray">
+  <div class="warp-child bg-gray">
     <section class="header bg-header">
       <i class="iconfont icon-back" @click="close"></i>
       <p>{{ $t('main.receive') }}</p>
diff --git a/src/views/sendTransaction/crossChainTransaction.vue b/src/views/sendTransaction/crossChainTransaction.vue
index 5699e85..3e54681 100644
--- a/src/views/sendTransaction/crossChainTransaction.vue
+++ b/src/views/sendTransaction/crossChainTransaction.vue
@@ -113,7 +113,7 @@
 </style>
 
 <template>
-    <div class="warp-chlid bg-white">
+    <div class="warp-child bg-white">
         <section class="header bg-header">
             <i class="iconfont icon-back" @click="close"></i>
             <p>{{ $t('crossChain.title') }}</p>
diff --git a/src/views/sendTransaction/transfer.vue b/src/views/sendTransaction/transfer.vue
index cf1936c..41a2ef9 100644
--- a/src/views/sendTransaction/transfer.vue
+++ b/src/views/sendTransaction/transfer.vue
@@ -80,7 +80,7 @@
 </style>
 
 <template>
-    <div class="warp-chlid bg-gray">
+    <div class="warp-child bg-gray">
         <section class="header bg-header">
             <i class="iconfont icon-back" @click="close"></i>
             <p>{{ $t('main.send') }}</p>
diff --git a/src/views/sideMenu/homeMenu.vue b/src/views/sideMenu/homeMenu.vue
index 578289f..53ad6fb 100644
--- a/src/views/sideMenu/homeMenu.vue
+++ b/src/views/sideMenu/homeMenu.vue
@@ -76,7 +76,7 @@
 </style>
 
 <template>
-    <div class="bg-sideBar menu-panel warp-chlid">
+    <div class="bg-sideBar menu-panel warp-child">
         <div>
             <i class="iconfont btn-close" @click="$router.go(-1)">&#xe614;</i>
             <div class="menu-title">{{$t('menu.title')}}</div>
diff --git a/src/views/transferDetail.vue b/src/views/transferDetail.vue
index a270361..93caebf 100644
--- a/src/views/transferDetail.vue
+++ b/src/views/transferDetail.vue
@@ -97,7 +97,7 @@
 </style>
 
 <template>
-    <div class="bg-gray warp-chlid">
+    <div class="bg-gray warp-child">
         <section class="header bg-header">
             <i class="iconfont icon-back" @click="$router.go(-1)"></i>
             <p >{{ $t('transactionDetail.title') }}</p>
diff --git a/src/views/vote/listCancel.vue b/src/views/vote/listCancel.vue
index bc99246..23c0247 100644
--- a/src/views/vote/listCancel.vue
+++ b/src/views/vote/listCancel.vue
@@ -64,7 +64,7 @@
 </style>
 
 <template>
-    <div class="warp-chlid bg-gray">
+    <div class="warp-child bg-gray">
       <section class="header bg-header">
         <i class="iconfont icon-back" @click="close"></i>
         <p>{{ $t('listCancel.selectVote') }}</p>
diff --git a/src/views/vote/listVote.vue b/src/views/vote/listVote.vue
index 14b2fbf..addd3b0 100644
--- a/src/views/vote/listVote.vue
+++ b/src/views/vote/listVote.vue
@@ -174,7 +174,7 @@
 </style>
 
 <template>
-    <div class="warp-chlid bg-white">
+    <div class="warp-child bg-white">
 
         <section class="bg-image">
           <div class="header">
diff --git a/src/views/vote/veto.vue b/src/views/vote/veto.vue
index c7d159d..935bda3 100644
--- a/src/views/vote/veto.vue
+++ b/src/views/vote/veto.vue
@@ -50,7 +50,7 @@
 </style>
 
 <template>
-    <div class="warp-chlid bg-gray">
+    <div class="warp-child bg-gray">
         <section class="header bg-header">
             <i class="iconfont icon-back" @click="close"></i>
             <p>{{ $t('listVote.cancelVote') }}</p>
diff --git a/src/views/vote/vote.vue b/src/views/vote/vote.vue
index 62efd87..9e223f5 100644
--- a/src/views/vote/vote.vue
+++ b/src/views/vote/vote.vue
@@ -50,7 +50,7 @@
 </style>
 
 <template>
-    <div class="warp-chlid bg-gray">
+    <div class="warp-child bg-gray">
         <section class="header bg-header">
             <i class="iconfont icon-back" @click="close"></i>
             <p>{{ $t('listVote.vote') }}</p>
diff --git a/src/views/vote/voteRecord.vue b/src/views/vote/voteRecord.vue
index 462fc8a..fe55c10 100644
--- a/src/views/vote/voteRecord.vue
+++ b/src/views/vote/voteRecord.vue
@@ -51,7 +51,7 @@
 </style>
 
 <template>
-    <div class="warp-chlid bg-white">
+    <div class="warp-child bg-white">
         <section class="header bg-header">
           <i class="iconfont icon-back" @click="close"></i>
           <p>{{ $t('listVote.voteRecord') }}</p>
diff --git a/src/views/vote/voteRegulation.vue b/src/views/vote/voteRegulation.vue
index caf744b..957c97a 100644
--- a/src/views/vote/voteRegulation.vue
+++ b/src/views/vote/voteRegulation.vue
@@ -52,7 +52,7 @@
 </style>
 
 <template>
-    <div class="warp-chlid bg-white">
+    <div class="warp-child bg-white">
         <section class="header bg-header">
           <i class="iconfont icon-back" @click="close"></i>
           <p>{{ $t('listVote.voteRules') }}</p>
-- 
2.11.0