src/views/sendTransaction/advancedTransfer.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 class="row">
 112             <td class="col label">{{ $t('transfer.fee') }}</td>
 113             <td class="col value">{{transaction.fee}}<span class="uint">BTM</span></td>
 114           </tr>
 115         </tbody>
 116       </table>
 117     </section>
 118     <section class="content bg-white">
 119       <div class="form">
 120         <div class="form-item">
 121           <label class="form-item-label">{{ $t('transfer.confirmPassword') }}</label>
 122           <div class="form-item-content">
 123             <input type="password"  v-model="password" autofocus>
 124           </div>
 125         </div>
 126       </div>
 127     </section>
 128
 129     <div class="row" style="margin: 20px;">
 130       <div class="btn bg-green" @click="transfer">{{ $t('transfer.confirm') }}</div>
 131     </div>
 132
 133   </div>
 134 </template>
 135
 136 <script>
 137 import transaction from "@/models/transaction";
 138 import getLang from "@/assets/language/sdk";
 139 import { LocalStream } from 'extension-streams';
 140 import {apis} from '@/utils/BrowserApis';
 141 import NotificationService from '../../services/NotificationService'
 142 import { mapActions, mapGetters, mapState } from 'vuex'
 143
 144 export default {
 145     data() {
 146         return {
 147             full: false,
 148             // full2: false,
 149             // account: {},
 150             transaction: {
 151                 input: "",
 152                 output: "",
 153                 args: "",
 154                 fee: "",
 155                 confirmations:1,
 156                 amounts: []
 157             },
 158             password:'',
 159             prompt:''
 160         };
 161     },
 162     computed: {
 163       ...mapGetters([
 164         'currentAccount',
 165       ])
 166     },
 167     watch: {
 168     },
 169     methods: {
 170         close: function () {
 171             NotificationService.close();
 172         },
 173         transfer: function () {
 174             let loader = this.$loading.show({
 175                 // Optional parameters
 176                 container: null,
 177                 canCancel: true,
 178                 onCancel: this.onCancel
 179             });
 180
 181             transaction.buildTransaction(this.currentAccount.guid,  this.transaction.input, this.transaction.output, this.transaction.fee * 100000000, this.transaction.confirmations).then(async (result) => {
 182
 183               let arrayData
 184               if(this.transaction.args){
 185                 arrayData =  await transaction.convertArgument(this.transaction.args)
 186               }
 187
 188               return transaction.advancedTransfer(this.currentAccount.guid, result, this.password, arrayData)
 189                   .then((resp) => {
 190                       loader.hide();
 191                       this.prompt.responder(resp);
 192                       this.$dialog.show({
 193                           type: 'success',
 194                           body: this.$t("transfer.success")
 195                       });
 196                     NotificationService.close();
 197                   })
 198                   .catch(error => {
 199                        throw error
 200                   });
 201             }).catch(error => {
 202                 loader.hide();
 203
 204                 this.$dialog.show({
 205                     body: getLang(error.message)
 206                 });
 207             });
 208         }
 209     }, mounted() {
 210           this.prompt = window.data || apis.extension.getBackgroundPage().notification || null;
 211
 212           if(this.prompt.data !== undefined){
 213               const inout = this.prompt.data
 214               if(inout.input !== undefined){
 215                  this.transaction.input = inout.input
 216               }
 217               if(inout.output !== undefined){
 218                   this.transaction.output = inout.output
 219               }
 220               if(inout.args !== undefined){
 221                  this.transaction.args = inout.args
 222               }
 223               if(inout.gas !== undefined){
 224                  this.transaction.fee = inout.gas/100000000
 225               }
 226               if(inout.confirmations !== undefined){
 227                  this.transaction.confirmations = inout.confirmations
 228               }
 229
 230               const array = inout.input.filter(action => action.type ==='spend_wallet')
 231               this.transaction.amounts = array
 232           }
 233       }
 234 };
 235 </script>