Treasury: updated add tip modal

Author: vikiival

dashboard/src/components/shared/modals/Proposal.vue

@@ -44,7 +44,6 @@ export default class ProposalModal extends Vue {
   private accountId: string = '';
   private beneficiaryId: string = '';
 	private password: string = '';
-  private beneficiary: any = {};
   private amount: number = 0;
 	
   public async shipIt() {
@@ -67,7 +66,7 @@ export default class ProposalModal extends Vue {
   }
   
   get disabled() {
-    return !this.accountId || !this.beneficiary || !this.amount
+    return !this.accountId || !this.beneficiaryId || !this.amount
   }
   
 }

dashboard/src/components/shared/modals/Tip.vue

@@ -1,15 +1,12 @@
 <template>
 	<ModalWrapper label="Add Tip" icon="plus">
 		<div>
-		<Dropdown mode="accounts" @selected="handleAccountSelection" />
-    <Dropdown mode="accounts" @selected="handleBeneficiary" />
-    <b-field label="reason" class="password-wrapper">
+		<AccountSelect label="submit with account" v-model="accountId" />
+    <AccountSelect label="beneficiary" v-model="beneficiaryId" />
+    <b-field label="tip reason" >
       <b-input v-model="reason" > </b-input>
     </b-field>
-    
-		<b-field label="password 🤫 magic spell" class="password-wrapper">
-      <b-input v-model="password" type="password" password-reveal> </b-input>
-    </b-field>
+		<PasswordInput v-model="password" />
 
       <b-button
         type="is-primary"
@@ -33,51 +30,43 @@ import { KeyringPair } from '@polkadot/keyring/types';
 import { notificationTypes,  showNotification } from '@/utils/notification';
 import exec from '@/utils/transactionExecutor';
 import { urlBuilderTransaction } from '@/utils/explorerGuide';
-import C from '@vue-polkadot/vue-api'
+import Connector from '@vue-polkadot/vue-api';
+import AccountSelect from '@/components/shared/AccountSelect.vue'
+import PasswordInput from '@/components/shared/PasswordInput.vue';
 
 @Component({
 	components: {
 		ModalWrapper,
-		Dropdown,
+		AccountSelect,
+    PasswordInput
 	},
 })
 export default class TipModal extends Vue {
-	private account: any = {};
+	private accountId: string = '';
+  private beneficiaryId: string = '';
 	private password: string = '';
-  private beneficiary: any = {};
   private reason: string = '';
 	
-
-
-  public handleAccountSelection(account: KeyringPair) {
-		this.account = account;
-  }
-  
-  public handleBeneficiary(account: KeyringPair) {
-    console.log(account.address)
-    this.beneficiary = account;
-  }
-
   public async shipIt() {
-    const { api } = C.getInstance()
+    const { api } = Connector.getInstance();
 
     if (!api) {
       return;
     }
     
     try {
-      const { reason, beneficiary } = this;
+      const { reason, beneficiaryId, accountId, password } = this;
       showNotification('Dispatched');
-      const tx = await exec(this.account, this.password, api.tx.treasury.reportAwesome, [reason, beneficiary.address]);
-      // showNotification(`Second ${referendumId.toString()}`, { ...notificationTypes.success, onAction: this.onAction() });
+      const tx = await exec(accountId, this.password, api.tx.treasury.reportAwesome, [reason, beneficiaryId]);
+      showNotification('[TIP] Success', notificationTypes.success);
     } catch (e) {
       showNotification(e, notificationTypes.danger);
     }
 
   }
   
   get disabled() {
-    return !this.account || !this.password || !this.beneficiary || !this.reason
+    return !this.accountId || !this.beneficiaryId || !this.reason
   }
   
 }

dashboard/src/components/treasury/Tip.vue

@@ -64,11 +64,6 @@ export default class Tip extends Vue {
 </script>
 
 <style scoped>
-.proposal-adress__overflow {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 
 .proposal-tip__reason {
   word-break: break-word;