src/views/sendTransaction/transfer.vue

   1 <style lang="" scoped>
   2 .header {
   3   display: flex;
   4 }
   5 .header p{
   6   text-align: center;
   7   width: 270px;
   8   padding-top: 17px;
   9 }
  10 .balance {
  11   width: 280px;
  12   height: 40px;
  13     margin: 20px;
  14     padding: 20px;
  15   display: flex;
  16 }
  17 .balance .token-icon {
  18     height: 38px;
  19     width: 38px;
  20     margin-right: 5px;
  21 }
  22 .balance .token-amount {
  23     display: inline-block;
  24 }
  25 .balance .token-amount .asset {
  26     font-size: 18px;
  27     margin-left: 2px;
  28     text-transform: uppercase;
  29 }
  30 .form-container{
  31   margin: 20px;
  32 }
  33 .form {
  34     margin-bottom: 20px;
  35     padding: 10px 15px;
  36     border-radius:4px;
  37 }
  38 .form-container .btn{
  39     height: 48px;
  40     bottom: 20px;
  41     position: absolute;
  42     width: 320px;
  43 }
  44   .small{
  45     font-size: 12px;
  46   }
  47 .transfer-header{
  48   background-image: url("../../assets/img/backgroundHead/transfer.svg");
  49   background-size: 320px 80px;
  50 }
  51 .wallet{
  52   width: 40px;
  53   height: 40px;
  54   background: rgba(255,255,255,0.1);
  55   border-radius: 50%;
  56   color: white;
  57   margin-right: 20px;
  58   line-height: 40px;
  59   text-align: center;
  60 }
  61
  62 .asset-option{
  63   font-size: 15px;
  64   text-transform: uppercase;
  65 }
  66
  67 .asset-option  .asset-id{
  68   font-size: 13px;
  69 }
  70
  71 .v-select{
  72   height: 50px;
  73   width: 100%;
  74   background: rgba(247,247,247,1);
  75   font-size: 14px;
  76   margin: auto;
  77   border-bottom: 1px solid #E0E0E0;
  78 }
  79
  80 </style>
  81
  82 <template>
  83     <div class="warp-chlid bg-gray">
  84         <section class="header bg-header">
  85             <i class="iconfont icon-back" @click="close"></i>
  86             <p>{{ $t('main.send') }}</p>
  87         </section>
  88
  89         <section class="balance transfer-header">
  90           <div class="wallet">
  91             <i class="iconfont icon-wallet"></i>
  92           </div>
  93           <div>
  94             <div class="token-amount">
  95                 {{accountBalance}}
  96                 <span v-if="selectAsset.symbol" class="asset">{{selectAsset.symbol}}</span>
  97             </div>
  98             <div class="small color-grey">
  99               {{currentAccount.alias}}
 100             </div>
 101           </div>
 102         </section>
 103
 104         <section class="form-container">
 105           <div class="form bg-white">
 106               <div class="form-item">
 107                   <label class="form-item-label">{{ $t('transfer.asset') }}</label>
 108                   <div class="form-item-content" >
 109                     <v-select :options="assets" v-bind:colorBlack="true" :clearable="false" :value="selectAsset" :onChange="assetChange" label="assetId">
 110                       <template slot="selected-option" slot-scope="asset">
 111                         <div class="asset-option">
 112                           <div>{{asset.symbol || 'Asset'}}</div>
 113                           <div  class="color-grey asset-id">{{shortAddress(asset.assetId)}}</div>
 114                         </div>
 115                       </template>
 116                       <template slot="option" slot-scope="asset">
 117                         <div class="asset-option">
 118                           <div>{{asset.symbol || 'Asset'}}</div>
 119                           <div class="color-grey  asset-id">{{shortAddress(asset.assetId)}}</div>
 120                         </div>
 121                       </template>
 122                     </v-select>
 123                   </div>
 124               </div>
 125               <div class="form-item">
 126                 <label class="form-item-label">{{ $t('transfer.address') }}</label>
 127                 <input class="form-item-content"  type="text" v-model="transaction.to">
 128               </div>
 129               <div class="form-item">
 130                   <label class="form-item-label" for="tx-amount">
 131                     {{ $t('transfer.quantity') }}
 132
 133                     <small class="float-right" style="margin-right: 8px;">{{formatCurrency(transaction.cost||0)}}</small>
 134                   </label>
 135                   <div class="form-item-content" style=" display: flex;">
 136                     <input type="number" id="tx-amount" v-model="transaction.amount" placeholder="0" @keypress="limitAmount">
 137                       <span class="color-grey" style="font-size: 15px;position: absolute;right: 0;text-transform: uppercase;">{{unit}}</span>
 138                   </div>
 139               </div>
 140               <div class="form-item">
 141                   <label class="form-item-label">{{ $t('transfer.fee') }}</label>
 142                   <div class="form-item-content" >
 143                       <!--<v-select :clearable="false" v-model="fee" style="height: 32px;" :options="feeTypeOptions"></v-select>-->
 144                     <input type="text"  v-model="fee" disabled >
 145                   </div>
 146               </div>
 147           </div>
 148           <a class="btn btn-primary" @click="send">{{ $t('transfer.send') }}</a>
 149         </section>
 150     </div>
 151 </template>
 152
 153 <script>
 154   import address from "@/utils/address";
 155   import account from "@/models/account";
 156 import transaction from "@/models/transaction";
 157 import getLang from "@/assets/language/sdk";
 158 import Confirm from "./transferConfirm";
 159 import { BTM } from "@/utils/constants";
 160   import { Number as Num } from "@/utils/Number"
 161 import { mapActions, mapGetters, mapState } from 'vuex'
 162 import * as Actions from '@/store/constants';
 163   import _ from 'lodash'
 164
 165   const currencyInPrice = {
 166     in_cny: 'cnyPrice',
 167     in_usd: 'usdPrice',
 168     in_btc:'btcPrice',
 169     inCny: 'cnyPrice',
 170     inUsd: 'usdPrice',
 171     inBtc:'btcPrice'
 172   }
 173
 174 export default {
 175     components: {
 176         Confirm
 177     },
 178     data() {
 179         return {
 180             selectAsset: {
 181                 assetId: BTM,
 182                 symbol: "BTM",
 183                 decimals:8
 184             },
 185             show: false,
 186             address: null,
 187             guid: null,
 188             account: {},
 189             accountBalance: 0.00,
 190             fee: this.$t("transfer.feeType"),
 191             feeTypeOptions: [this.$t("transfer.feeType")],
 192             transaction: {
 193                 to: "",
 194                 asset: BTM,
 195                 amount: "",
 196                 fee: null,
 197                 cost: "",
 198                 confirmations: 1
 199             }
 200         };
 201     },
 202     computed: {
 203         assets(){
 204           if(this.netType === 'vapor'){
 205             if(!this.currentAccount.vpBalances ||this.currentAccount.vpBalances.length == 0){
 206               return [this.selectAsset]
 207             }else{
 208               return this.currentAccount.vpBalances.map(b=>b.asset)
 209             }
 210           }else{
 211             if(!this.currentAccount.balances ||this.currentAccount.balances.length == 0){
 212               return [this.selectAsset]
 213             }else{
 214               return this.currentAccount.balances.map(b=>b.asset)
 215             }
 216           }
 217         },
 218         unit() {
 219             return this.selectAsset.symbol;
 220         },
 221       ...mapState([
 222         'bytom'
 223       ]),
 224       ...mapGetters([
 225         'currentAccount',
 226         'accountList',
 227         'currency',
 228         'netType'
 229       ])
 230     },
 231     watch: {
 232         "transaction.amount": function (newAmount) {
 233             const singlePrice = this.selectAsset[currencyInPrice[this.currency]]||this.selectAsset[this.currency]||0
 234             this.transaction.cost = Number( singlePrice * newAmount).toFixed(2);
 235         },
 236         account: function (newAccount) {
 237             this.guid = newAccount.guid;
 238             this.address = this.netType === 'vapor'?  newAccount.vpAddress: newAccount.address;
 239         },
 240         address: function (newAddress) {
 241             account.balance(newAddress).then(obj => {
 242               const balances = obj.balances
 243               let balance = 0.00
 244               if(balances.length >0 ) {
 245                 const balanceObject = balances.filter(b => b.asset.assetId === this.selectAsset.assetId)[0]
 246                 balance = Num.formatNue(balanceObject.balance, balanceObject.decimals)
 247               }
 248                 this.accountBalance = balance;
 249             }).catch(error => {
 250                 console.log(error);
 251             });
 252         }
 253     },
 254     methods: {
 255         shortAddress: function (add) {
 256           return address.short(add)
 257         },
 258         formatCurrency: function (num) {
 259           return Num.formatCurrency(num, this.currency)
 260         },
 261         limitAmount ($event) {
 262           // restrict to 2 decimal places
 263           if(this.transaction.amount!=null && this.transaction.amount.indexOf(".")>-1 && (this.transaction.amount.split('.')[1].length > (this.selectAsset.decimals-1))){
 264             $event.preventDefault();
 265           }
 266         },
 267         assetChange: function (val) {
 268           console.log(val)
 269           if(val.assetId !== this.selectAsset.assetId){
 270             this.transaction.asset = val.assetId;
 271             const balances = this.netType === 'vapor'?this.currentAccount.vpBalances:this.currentAccount.balances
 272             let balance = 0.00
 273             if(balances.length >0 ) {
 274               console.log(balances)
 275               const balanceObject = balances.filter(b => b.asset.assetId === val.assetId)[0]
 276               balance = balanceObject.balance
 277             }
 278             this.accountBalance = balance;
 279
 280             transaction.asset(val.assetId).then(ret => {
 281               console.log(ret)
 282               this.selectAsset = Object.assign(ret,val)
 283               this.transaction.cost = Number(ret[currencyInPrice[this.currency]] * this.transaction.amount).toFixed(2);
 284             });
 285           }
 286         },
 287         close: function () {
 288             this.$router.go(-1)
 289             this.transaction.to = "";
 290             this.transaction.amount = "";
 291             if(this.$route.query.type == 'popup'){
 292                window.close();
 293             }
 294         },
 295         send: function () {
 296             if (this.transaction.to == "") {
 297                 this.$dialog.show({
 298                     body: this.$t("transfer.emptyTo")
 299                 });
 300                 return;
 301             }
 302
 303             if (this.transaction.amount <= 0) {
 304                 this.$dialog.show({
 305                     body: this.$t("transfer.noneBTM")
 306                 });
 307                 return;
 308             }
 309
 310             let loader = this.$loading.show({
 311                 // Optional parameters
 312                 container: null,
 313                 canCancel: true,
 314                 onCancel: this.onCancel
 315             });
 316             transaction.build(this.address, this.transaction.to, this.transaction.asset, this.transaction.amount, this.transaction.fee, this.transaction.confirmations).then(result => {
 317                 console.log(result)
 318                 loader.hide();
 319                 if(!this.transaction.fee){
 320                     this.transaction.fee = Number( _.sumBy(result, 'tx.fee'));
 321                 }
 322                 this.$router.push({ name: 'transfer-confirm', params: { account: this.account, transaction: this.transaction, rawData: result, assetAlias: this.selectAsset.symbol, type: this.$route.query.type } })
 323             }).catch(error => {
 324                 loader.hide();
 325                 this.$dialog.show({
 326                     body: getLang(error.message)
 327                 });
 328             });
 329         }
 330     }, mounted() {
 331         //detect injection
 332         if(this.$route.query.type === 'popup'){
 333           if (this.$route.query.from != undefined) {
 334               this.address = this.$route.query.from
 335               this.guid = this.currentAccount.guid
 336               this.account = this.currentAccount
 337           }
 338
 339           if (this.$route.query.asset != undefined) {
 340             const currentAssetId = this.$route.query.asset
 341
 342             this.transaction.asset= currentAssetId
 343
 344             const assets = this.assets
 345             this.selectAsset = assets.filter(b => b.assetId === currentAssetId.toLowerCase())[0]
 346           }
 347           if (this.$route.query.to != undefined) {
 348               this.transaction.to = this.$route.query.to
 349           }
 350           if (this.$route.query.amount != undefined) {
 351               this.transaction.amount = this.$route.query.amount
 352           }
 353           if (this.$route.query.gas != undefined) {
 354               this.transaction.fee = this.$route.query.gas
 355           }
 356           if(this.$route.query.confirmations != undefined) {
 357               this.transaction.confirmations = this.$route.query.confirmations
 358           }
 359         }else{
 360           this.account = this.currentAccount
 361
 362           const currentAsset = this.netType === 'vapor'? this.currentAccount.vpBalances[0]: this.currentAccount.balances[0]
 363
 364           if(currentAsset){
 365             transaction.asset(currentAsset.asset.assetId).then(ret => {
 366                 this.selectAsset = Object.assign(ret,currentAsset)
 367             });
 368           }
 369         }
 370
 371     }
 372 };
 373 </script>