Add Transfer Funds(STEEM/SBD) functionality

pages/wallet.vue

@@ -26,6 +26,35 @@
 			<span class="p-2">{{ this.steemPower }}</span>
 			<span class="p-2">{{ formattedSTEEMBalance() }}</span>
 			<span class="p-2">{{ formattedSTEEMBalance('1') }}</span>
+			<div class="p-2"><button v-on:click="transferFunds" class="btn btn-brand btn-lg w-20">{{ this.transferAction }}</button></div>
+			<div v-if="transferMode" class="text-center grid">
+				<div class="row">
+				<label for="transfer-recipient" class="w-25">To*</label>
+				<input type="text" id="transfer-recipient" name="transfer-recipient" ref="transfer-recipient" class="form-control-lg w-50 p-2">
+				</div>
+				<div class="row">
+				<label for="transfer-type" class="w-25">Type*</label>
+				<select @change="transferTypeChange" id="transfer-type" name="transfer-type" ref="transfer-type" text="Choose Type" class="form-control-lg w-50 p-2">
+				  <option value="STEEM">STEEM</option>
+				  <option value="SBD">SBD</option>
+				</select>
+				</div>
+				<div class="row">
+				<label for="transfer-amount" class="w-25">Amount*</label>
+				<input type="number" id="transfer-amount" name="transfer-amount" ref="transfer-amount" class="form-control-lg w-50 p-2">
+				</div>
+				<div class="row">
+				<label for="transfer-memo" class="w-25">Memo</label>
+				<input type="text" id="transfer-memo" name="transfer-memo" ref="transfer-memo" class="form-control-lg w-50 p-2">				
+				</div>
+				<div class="text-brand text-center" v-if="error_proceeding">
+				  {{ this.error_msg}}
+				</div>
+				<div class="row">
+					<div class="w-25"></div>
+					<button v-on:click="proceedTransfer" class="btn btn-brand btn-lg w-50">Send</button>
+				</div>
+			</div>
 		</h5>
 		<div v-if="isClaimableDataAvailable">
 			<h5>Claimable STEEM Rewards</h5>
@@ -67,6 +96,11 @@
 		claimVests: '',
 		claimSBD: '',
 		claimWindow: '',
+		transferMode: 0,
+		transferType: 'STEEM',
+		error_proceeding: '',
+		error_msg: '',
+		transferAction: 'Transfer Funds',
 	  }
 	},
     components: {
@@ -86,7 +120,7 @@
 	  },
 	  isClaimableDataAvailable () {
 	  //confirms whether we have useful claimable data to control display of the relevant section
-		console.log('isClaimableDataAvailable');
+		//console.log('isClaimableDataAvailable');
 		return (parseFloat(this.claimSTEEM)>0 ||
 			parseFloat(this.claimSP) ||
 			parseFloat(this.claimVests) ||
@@ -167,7 +201,7 @@
 
 		//console.log(link);
 		
-		this.claimWindow = window.open(link);
+		window.open(link);
 		
 		//Below would have been preferred approach, but claimRewardBalance keeps failing. Keeping here for future further exploration
 		/*
@@ -177,6 +211,48 @@
 		await this.$steemconnect.claimRewardBalance(this.user.account.name, this.claimSTEEM, this.claimSBD, this.claimSP);
 		console.log('done');*/
 	  },
+	  transferFunds () {
+		//function handles opening/closing transfer section
+		this.transferMode = !this.transferMode;
+		if (this.transferAction == 'Transfer Funds'){
+		  this.transferAction = 'Hide Transfer';
+		}else{
+		  this.transferAction = 'Transfer Funds';
+		}
+	  },
+	  proceedTransfer () {
+		//function handles the actual processing of the transfer
+		this.error_proceeding = false;
+		this.error_msg = '';
+		//ensure we have proper values
+		if (this.$refs["transfer-recipient"].value.trim() == '' ||
+			this.$refs["transfer-amount"].value.trim() == ''){
+		  this.error_proceeding = true;
+		  this.error_msg = 'Please ensure to fill all required transfer fields properly.';
+		  return;
+		}
+		if (isNaN(this.$refs["transfer-amount"].value.trim()) || this.$refs["transfer-amount"].value == 0){
+		  this.error_proceeding = true;
+		  this.error_msg = 'The amount needs to be a positive numeric value.';
+		  return;
+		}
+		
+		//https://steemconnect.com/sign/transfer?from=mcfarhat&to=mcfarhat&amount=20.000%20STEEM&memo=test
+		var link = this.$steemconnect.sign('transfer', {
+		  from: this.user.account.name,
+		  to: this.$refs["transfer-recipient"].value,
+		  amount: this.$refs["transfer-amount"].value + ' ' + this.transferType,
+		  memo: this.$refs["transfer-memo"].value,
+		}, window.location.origin + '/wallet');
+		//console.log(link);
+		window.open(link);
+	  },
+	  transferTypeChange (e) {
+	    //handles the drop down select option to ensure we have proper value
+		if(e.target.options.selectedIndex > -1) {
+		  this.transferType = e.target.options[e.target.options.selectedIndex].value;
+		}
+	  }
 	},
     async mounted () {
       // login