From b2c0d5175191cd381537b92db1b9d59db7b71ef8 Mon Sep 17 00:00:00 2001 From: Thore Strassburg Date: Thu, 28 Oct 2021 18:35:43 +0200 Subject: [PATCH] dapp: add new warning message to quick pay route When the pathfinding servie is too expensive, the price was shown in red and the button to fetch a route was disabled. This leaves the user with no information why. To improve this, instead of the button a warning message gets displayed. This bascially makes the former 'no routes' approach more generic an allows to use it for other messages as well. The price will not be shown in red color anymore as this would be too much red then. --- raiden-dapp/src/locales/en.json | 3 +- raiden-dapp/src/views/QuickPayRoute.vue | 18 ++++++++++-- .../tests/unit/views/quick-pay-route.spec.ts | 28 +++++++------------ 3 files changed, 27 insertions(+), 22 deletions(-) diff --git a/raiden-dapp/src/locales/en.json b/raiden-dapp/src/locales/en.json index dc4fd0262a..8f1f42b48f 100644 --- a/raiden-dapp/src/locales/en.json +++ b/raiden-dapp/src/locales/en.json @@ -893,7 +893,8 @@ "token-amount": "Payment amount", "pathfinding-service-price": "Mediation possible, price for requesting route", "fetch-route-trigger": "Pay to find route", - "fetch-route-error": "No route available" + "fetch-route-error-too-expensive": "UDC balance too low", + "fetch-route-error-no-route": "No route available" }, "action-titles": { "channel-deposit": "Channel Deposit", diff --git a/raiden-dapp/src/views/QuickPayRoute.vue b/raiden-dapp/src/views/QuickPayRoute.vue index 9ff718dd9f..2347ce5672 100644 --- a/raiden-dapp/src/views/QuickPayRoute.vue +++ b/raiden-dapp/src/views/QuickPayRoute.vue @@ -29,7 +29,6 @@ :label="$t('quick-pay.transfer-information.pathfinding-service-price')" :amount="pathfindingServicePrice" :token="serviceToken" - :warning="pathfindingServiceTooExpensive" exact-amount full-width > @@ -56,10 +55,10 @@ - {{ $t('quick-pay.transfer-information.fetch-route-error') }} + {{ fetchMediationRouteError }} @@ -294,9 +293,22 @@ export default class QuickPayRoute extends Mixins(NavigationMixin) { } } + get showFetchMediationRouteError(): boolean { + return this.fetchMediationRouteFailed || this.pathfindingServiceTooExpensive; + } + + get fetchMediationRouteError(): string | undefined { + if (this.pathfindingServiceTooExpensive) { + return this.$t('quick-pay.transfer-information.fetch-route-error-too-expensive') as string; + } else if (this.fetchMediationRouteFailed) { + return this.$t('quick-pay.transfer-information.fetch-route-error-no-route') as string; + } + } + get showFetchMediationRouteButton(): boolean { return ( !this.mediationRoute && + !this.pathfindingServiceTooExpensive && !this.fetchMediationRouteInProgress && !this.fetchMediationRouteFailed ); diff --git a/raiden-dapp/tests/unit/views/quick-pay-route.spec.ts b/raiden-dapp/tests/unit/views/quick-pay-route.spec.ts index 2bf845ab69..04a12e43f3 100644 --- a/raiden-dapp/tests/unit/views/quick-pay-route.spec.ts +++ b/raiden-dapp/tests/unit/views/quick-pay-route.spec.ts @@ -312,7 +312,7 @@ describe('QuickPayRoute.vue', () => { expect(pathfindingServicePrice.html()).toContain('1'); }); - test('marks pathfinding service price with a warning when price is higher than user deposit capacity', async () => { + test('shows warning message when pathfinding service price is higher than user deposit capacity', async () => { const getUDCCapacity = jest.fn().mockResolvedValue(constants.One); const fetchServices = jest.fn().mockResolvedValue([{ price: constants.Two }]); const wrapper = createWrapper({ @@ -320,26 +320,15 @@ describe('QuickPayRoute.vue', () => { fetchServices, ...optionsForMediatedTransfer, }); - const pathfindingServicePrice = wrapper.find( - '.quick-pay__transfer-information__mediation__pathfinding-service-price', - ); await flushPromises(); // Fetch services must complete. - expect(pathfindingServicePrice.html()).toContain('warning'); - }); - - test('disables get route button when pathfinding service price is higher than user deposit capacity', () => { - const getUDCCapacity = jest.fn().mockResolvedValue(constants.One); - const fetchServices = jest.fn().mockResolvedValue([{ price: constants.Two }]); - const wrapper = createWrapper({ - getUDCCapacity, - fetchServices, - ...optionsForMediatedTransfer, - }); - const getRouteButton = wrapper.get('.quick-pay__transfer-information__mediation__button'); + const mediationError = wrapper.find('.quick-pay__transfer-information__mediation__error'); - expect(getRouteButton.attributes('disabled')).toBeTruthy(); + expect(mediationError.exists()).toBeTruthy(); + expect(mediationError.text()).toBe( + 'quick-pay.transfer-information.fetch-route-error-too-expensive', + ); }); test('fetches routes from cheapest pathfinding service when user click button', async () => { @@ -372,8 +361,11 @@ describe('QuickPayRoute.vue', () => { await clickGetRoutesButton(wrapper); const mediationError = wrapper.find('.quick-pay__transfer-information__mediation__error'); + expect(mediationError.exists()).toBeTruthy(); - expect(mediationError.text()).toBe('quick-pay.transfer-information.fetch-route-error'); + expect(mediationError.text()).toBe( + 'quick-pay.transfer-information.fetch-route-error-no-route', + ); }); test('selects the first returned route as cheapest', async () => {