Skip to content
This repository has been archived by the owner on Mar 23, 2023. It is now read-only.

Commit

Permalink
refactor: transfer multipayment ux (#2392)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexbarnsley
alexbarnsley authored Jul 8, 2020
1 parent 39bc17d commit 3787acd
Show file tree
Hide file tree
Showing 7 changed files with 216 additions and 91 deletions.
60 changes: 48 additions & 12 deletions __tests__/unit/components/Transaction/TransactionForm/TransactionFormTransfer.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,12 @@ describe('TransactionFormTransfer', () => {
expect(wrapper.contains('.TransactionFormTransfer__amount')).toBe(true)
})

it('should have add button', () => {
it('should have add button on multiple tab', async () => {
expect(wrapper.contains('.TransactionFormTransfer__add')).toBe(false)

wrapper.vm.onSendTypeChange('Multiple')
await wrapper.vm.$nextTick()

expect(wrapper.contains('.TransactionFormTransfer__add')).toBe(true)
})

Expand Down Expand Up @@ -233,7 +238,20 @@ describe('TransactionFormTransfer', () => {
})

describe('next button', () => {
it('should be enabled if recipients form is valid', async () => {
it('should be enabled for single if recipients form is valid', async () => {
wrapper.vm.$v.recipientId.$model = 'address-1'
wrapper.vm.$v.amount.$model = 10
wrapper.vm.$v.form.fee.$model = 0.1
wrapper.vm.$v.form.vendorField.$model = 'vendorfield test'
wrapper.vm.$v.form.passphrase.$model = 'passphrase'

await wrapper.vm.$nextTick()

expect(wrapper.find('.TransactionFormTransfer__next').attributes('disabled')).toBeFalsy()
})

it('should be enabled for multiple if recipients form is valid', async () => {
wrapper.vm.onSendTypeChange('Multiple')
wrapper.vm.$v.form.recipients.$model = [{
address: 'address-2',
amount: 10
Expand Down Expand Up @@ -284,6 +302,7 @@ describe('TransactionFormTransfer', () => {
})

it('should return true if it is multipayment transaction', () => {
wrapper.vm.onSendTypeChange('Multiple')
wrapper.vm.$v.form.recipients.$model = [{
address: 'address-2',
amount: 10
Expand Down Expand Up @@ -394,7 +413,11 @@ describe('TransactionFormTransfer', () => {
expect(wrapper.vm.maximumAvailableAmount).toEqual((new BigNumber(1000)).minus(0.1))
})

it('should return value including all recipients', async () => {
it('should return value including all recipients for multiple', async () => {
wrapper.vm.onSendTypeChange('Multiple')

await wrapper.vm.$nextTick()

wrapper.vm.$v.form.fee.$model = 0.1
wrapper.vm.$v.recipientId.$model = Identities.Address.fromPassphrase('test')
wrapper.vm.$v.amount.$model = 10
Expand Down Expand Up @@ -812,22 +835,26 @@ describe('TransactionFormTransfer', () => {

describe('methods', () => {
describe('getTransactionData', () => {
it('should return correct data with passphrase for normal transaction', () => {
it('should return correct data with passphrase for normal transaction', async () => {
wrapper.vm.$v.form.fee.$model = 0.1
wrapper.vm.$v.form.vendorField.$model = 'vendorfield test'
wrapper.vm.$v.form.passphrase.$model = 'passphrase'
wrapper.vm.$v.form.recipients.$model = [{
address: 'address-2',
amount: (1 * 1e8).toString()
}]
wrapper.vm.$v.recipientId.$model = wrapper.vm.$v.form.recipients.$model[0].address
wrapper.vm.$v.amount.$model = wrapper.vm.$v.form.recipients.$model[0].amount
wrapper.vm.$v.recipientId.$model = 'address-1'
wrapper.vm.$v.amount.$model = 50
// wrapper.vm.$v.recipientId.$model = wrapper.vm.$v.form.recipients.$model[0].address
// wrapper.vm.$v.amount.$model = wrapper.vm.$v.form.recipients.$model[0].amount

await wrapper.vm.$nextTick()

expect(wrapper.vm.getTransactionData()).toEqual({
address: 'address-1',
passphrase: 'passphrase',
recipientId: 'address-2',
amount: (1 * 1e8).toString(),
recipientId: 'address-1',
amount: new BigNumber(50 * 1e8),
fee: new BigNumber(0.1 * 1e8),
vendorField: 'vendorfield test',
wif: undefined,
Expand All @@ -838,6 +865,7 @@ describe('TransactionFormTransfer', () => {
})

it('should return correct data with passphrase for multipayment transaction', () => {
wrapper.vm.onSendTypeChange('Multiple')
wrapper.vm.$v.form.fee.$model = 0.1
wrapper.vm.$v.form.vendorField.$model = 'vendorfield test'
wrapper.vm.$v.form.passphrase.$model = 'passphrase'
Expand Down Expand Up @@ -874,6 +902,7 @@ describe('TransactionFormTransfer', () => {
secondPublicKey: Identities.PublicKey.fromPassphrase('second passphrase')
})

wrapper.vm.onSendTypeChange('Multiple')
wrapper.vm.$v.form.fee.$model = 0.1
wrapper.vm.$v.form.vendorField.$model = 'vendorfield test'
wrapper.vm.$v.form.passphrase.$model = 'passphrase'
Expand Down Expand Up @@ -920,6 +949,7 @@ describe('TransactionFormTransfer', () => {
})

it('should build multipayment transaction', async () => {
wrapper.vm.onSendTypeChange('Multiple')
wrapper.vm.$v.form.recipients.$model = [{
address: 'address-2',
amount: 10
Expand Down Expand Up @@ -952,6 +982,7 @@ describe('TransactionFormTransfer', () => {
})

it('should build multipayment transaction with default arguments', async () => {
wrapper.vm.onSendTypeChange('Multiple')
wrapper.vm.$v.form.recipients.$model = [{
address: 'address-2',
amount: 10
Expand Down Expand Up @@ -994,8 +1025,8 @@ describe('TransactionFormTransfer', () => {

wrapper.vm.populateSchema()

expect(wrapper.vm.form.recipients[0].address).toBe('address-5')
expect(wrapper.vm.form.recipients[0].amount).toEqual(new BigNumber(100 * 1e8))
expect(wrapper.vm.recipientId).toBe('address-5')
expect(wrapper.vm.amount).toEqual(100)
expect(wrapper.vm.form.vendorField).toBe('test vendorfield')
})

Expand Down Expand Up @@ -1129,6 +1160,7 @@ describe('TransactionFormTransfer', () => {
})

it('should generate error for multipayment transaction', () => {
wrapper.vm.onSendTypeChange('Multiple')
wrapper.vm.$v.form.recipients.$model = [{
address: 'address-2',
amount: 10
Expand Down Expand Up @@ -1395,9 +1427,9 @@ describe('TransactionFormTransfer', () => {
it('should submit form data', async () => {
const spy = jest.spyOn(wrapper.vm, 'onSubmit').mockImplementation()

wrapper.vm.nextStep()
await wrapper.vm.nextStep()

expect(spy).toHaveBeenCalledTimes(0)
expect(spy).toHaveBeenCalledTimes(1)
})
})

Expand Down Expand Up @@ -1606,9 +1638,13 @@ describe('TransactionFormTransfer', () => {
})

it('should be above minimum if set', () => {
wrapper.vm.onSendTypeChange('Multiple')
wrapper.vm.$v.form.recipients.$model = [{
address: 'address-1',
amount: 10
}, {
address: 'address-1',
amount: 10
}]

expect(wrapper.vm.$v.form.recipients.aboveMinimum).toBe(true)
Expand Down
27 changes: 21 additions & 6 deletions src/renderer/components/Input/InputFee.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
</p>

<div
v-if="isStaticFee && !isAdvancedFee"
v-if="!hideStaticFeeNotice && isStaticFee && !isAdvancedFee"
class="mt-6 mb-4"
>
{{ $t(`INPUT_FEE.UNIQUE`, { fee: parseFloat(fee) }) }}
Expand Down Expand Up @@ -121,6 +121,12 @@ export default {
type: Object,
required: false,
default: null
},
hideStaticFeeNotice: {
type: Boolean,
required: false,
default: false
}
},
Expand Down Expand Up @@ -260,22 +266,31 @@ export default {
}
},
watch: {
transactionType () {
this.triggerTypeUpdate()
}
},
created () {
// Fees should be synchronized only when this component is active
this.$synchronizer.appendFocus('fees')
if (this.lastFee && this.session_profile.defaultChosenFee === 'LAST') {
this.onChoice(this.session_profile.defaultChosenFee)
} else {
this.emitFee(this.feeChoices.AVERAGE)
}
this.triggerTypeUpdate()
},
beforeDestroy () {
this.$synchronizer.removeFocus('fees')
},
methods: {
triggerTypeUpdate () {
if (this.lastFee && this.session_profile.defaultChosenFee === 'LAST') {
this.onChoice(this.session_profile.defaultChosenFee)
} else {
this.emitFee(this.feeChoices.AVERAGE)
}
},
focusInput () {
this.$refs.input.focus()
},
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/Input/InputToggle/InputToggleChoice.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
'rounded-l': isFirst,
'rounded-r': isLast,
'InputToggleChoice--selected bg-blue text-white font-semibold shadow-lg': isSelected,
'bg-theme-input-toggle-choice text-theme-input-toggle-choice-text': !isSelected
'bg-theme-input-toggle-choice text-theme-input-toggle-choice-text hover:bg-theme-input-toggle-choice-hover': !isSelected
}"
type="button"
@click="emitSelect(choice)"
Expand Down
Loading

0 comments on commit 3787acd

Please sign in to comment.