src/views/sendTransaction/signTransaction.vue

   1 <style lang="" scoped>
   2   .warp {
   3     position: absolute;
   4     top: 0;
   5     left: 0;
   6     right: 0;
   7     height: 600px;
   8     z-index: 2;
   9     overflow: scroll;
  10   }
  11   .header {
  12     display: flex;
  13   }
  14   .header p{
  15     text-align: center;
  16     width: 280px;
  17     padding-top: 17px;
  18   }
  19
  20   .content {
  21     margin: 20px;
  22     padding: 20px;
  23     overflow: hidden;
  24     border-radius:4px;
  25     width: 280px;
  26   }
  27   .divider {
  28     margin: 12px 0;
  29   }
  30
  31   .value .uint {
  32     font-size: 12px;
  33     margin-left: 3px;
  34   }
  35   .btn-inline .btn {
  36     margin: 10px 15px;
  37   }
  38   .row{
  39     word-break: break-all;
  40   }
  41   .col{
  42     font-size: 14px;
  43     width: 35%;
  44   }
  45   .label{
  46     color: #7B7B7B;
  47   }
  48   .value{
  49     color: #282828;
  50     width: 60%;
  51   }
  52   table{
  53     width: 100%;
  54   }
  55   .form-item{
  56     padding:0;
  57     margin:0;
  58     margin-bottom: 10px;
  59   }
  60   .hide{
  61     width: 175px;
  62     overflow: hidden;
  63     text-overflow: ellipsis;
  64     white-space: nowrap;
  65   }
  66   .view-link{
  67     font-size: 14px;
  68     color: #035BD4;
  69     width: 275px;
  70     display: block;
  71   }
  72 </style>
  73
  74 <template>
  75   <div class="warp bg-gray">
  76     <section class="header bg-header">
  77       <i class="iconfont icon-back" @click="close"></i>
  78       <p>{{ $t('transfer.confirmTransaction') }}</p>
  79     </section>
  80
  81     <section class="content bg-white">
  82       <table>
  83         <tbody>
  84           <tr class="row">
  85             <td class="col label">{{ $t('transfer.from') }}</td>
  86             <td class="col value">{{currentAccount.alias}}</td>
  87           </tr>
  88           <div class="divider"></div>
  89           <tr class="row">
  90             <td class="col label">Input</td>
  91             <td class="col value" v-bind:class="{ hide: !full }" >{{transaction.input}}</td>
  92           </tr>
  93           <tr class="row">
  94             <td class="col label">Output</td>
  95             <td class="col value" v-bind:class="{ hide: !full }" >{{transaction.output}}</td>
  96           </tr>
  97           <tr v-if="transaction.args" class="row">
  98             <td class="col label">Args</td>
  99             <td class="col value" v-bind:class="{ hide: !full }" >{{transaction.args}}</td>
 100           </tr>
 101           <tr class="row">
 102             <td colspan="2" class="center-text">
 103               <a v-on:click="full = !full"  class="view-link">
 104                 {{ full? $t('transfer.hideAll'): $t('transfer.viewAll') }} >>
 105               </a>
 106             </td>
 107           </tr>
 108
 109           <div class="divider"></div>
 110
 111           <tr v-for="(amountInput, index) in transaction.amounts" :key="index" class="row">
 112             <td class="col label">{{index ==0 && $t('transfer.transferAmount') }}</td>
 113             <td class="col value">{{amountInput.amount}}<span class="uint uppercase">{{amountInput.alias || amountInput.asset}}</span></td>
 114           </tr>
 115
 116           <tr class="row">
 117             <td class="col label">{{ $t('transfer.fee') }}</td>
 118             <td class="col value">{{transaction.fee}}<span class="uint">BTM</span></td>
 119           </tr>
 120
 121         </tbody>
 122       </table>
 123     </section>
 124     <section class="content bg-white">
 125       <div class="form">
 126         <div class="form-item">
 127           <label class="form-item-label">{{ $t('transfer.confirmPassword') }}</label>
 128           <div class="form-item-content">
 129             <input type="password"  v-model="password" autofocus>
 130           </div>
 131         </div>
 132       </div>
 133     </section>
 134
 135     <div class="row" style="margin: 20px;">
 136       <div class="btn bg-green" @click="transfer">{{ $t('transfer.confirm') }}</div>
 137     </div>
 138
 139   </div>
 140 </template>
 141
 142 <script>
 143 import transaction from "@/models/transaction";
 144 import getLang from "@/assets/language/sdk";
 145 import { LocalStream } from 'extension-streams';
 146 import {apis} from '@/utils/BrowserApis';
 147 import NotificationService from '../../services/NotificationService'
 148 import { mapActions, mapGetters, mapState } from 'vuex'
 149 import _ from 'lodash';
 150 import account from "@/models/account";
 151 import { Number as Num } from "@/utils/Number"
 152
 153
 154
 155 export default {
 156     data() {
 157         return {
 158             full: false,
 159             transaction: {
 160                 input: "",
 161                 output: "",
 162                 args: "",
 163                 fee: "",
 164                 confirmations:1,
 165                 amounts: []
 166             },
 167             password:'',
 168             prompt:''
 169         };
 170     },
 171     computed: {
 172       ...mapGetters([
 173         'currentAccount',
 174         'net',
 175         'netType',
 176       ])
 177     },
 178     watch: {
 179     },
 180     methods: {
 181         close: function () {
 182             NotificationService.close();
 183         },
 184         transfer: function () {
 185             let loader = this.$loading.show({
 186                 // Optional parameters
 187                 container: null,
 188                 canCancel: true,
 189                 onCancel: this.onCancel
 190             });
 191
 192             if(Array.isArray(this.prompt.data)){
 193                 Promise.all(this.prompt.data.map( (rawdata) => transaction.signTransaction(this.currentAccount.guid, rawdata, this.password)))
 194                     .then( (result) => {
 195                         loader.hide();
 196                         this.prompt.responder(result);
 197                         this.$dialog.show({
 198                             type: 'success',
 199                             body: this.$t("transfer.success")
 200                         });
 201                       NotificationService.close();
 202                     }).catch(error => {
 203                         loader.hide();
 204
 205                         this.$dialog.show({
 206                             body: getLang(error.message)
 207                         });
 208                     });
 209             }else{
 210                 transaction.signTransaction(this.currentAccount.guid,  this.prompt.data,  this.password).then( (result) => {
 211                     loader.hide();
 212                     this.prompt.responder(result);
 213                     this.$dialog.show({
 214                         type: 'success',
 215                         body: this.$t("transfer.success")
 216                     });
 217                     NotificationService.close();
 218                 }).catch(error => {
 219                     loader.hide();
 220
 221                     this.$dialog.show({
 222                         body: getLang(error.message)
 223                     });
 224                 });
 225             }
 226
 227         },
 228       queryAsset: function(assetID){
 229         return transaction.asset(assetID)
 230       }
 231     }, mounted() {
 232           this.prompt = window.data || apis.extension.getBackgroundPage().notification || null;
 233
 234           if(this.prompt.data !== undefined){
 235               const param = Array.isArray(this.prompt.data)? this.prompt.data[0].tx : this.prompt.data.tx
 236               if(param.inputs !== undefined){
 237                  this.transaction.input = param.inputs
 238               }
 239               if(param.outputs !== undefined){
 240                   this.transaction.output = param.outputs
 241               }
 242               if(param.fee !== undefined){
 243                  this.transaction.fee = param.fee
 244               }
 245
 246               const array = param.inputs.filter(action => action.type ==='spend')
 247
 248               if(array.length>0){
 249                 account.setupNet(`${this.net}${this.netType}`)
 250               const promise =
 251                 _(array)
 252                   .groupBy('asset')
 253                   .map((objs, key) => {
 254                     return this.queryAsset(key).then(resp =>{
 255                       return {
 256                         'asset': key,
 257                         'alias':resp.alias,
 258                         'amount':Num.formatNue( _.sumBy(objs, 'amount'), resp.decimals)
 259                       }
 260                     })
 261                   })
 262
 263                 let that = this;
 264                 Promise.all(promise).then(function(output) {
 265                   that.transaction.amounts = output
 266                 })
 267
 268               }
 269
 270
 271           }
 272       }
 273 };
 274 </script>