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

@@ -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",

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 @@
           <spinner v-if="fetchMediationRouteInProgress" :size="25" :width="3" inline />
 
           <span
-            v-if="fetchMediationRouteFailed"
+            v-if="showFetchMediationRouteError"
             class="quick-pay__transfer-information__mediation__error"
           >
-            {{ $t('quick-pay.transfer-information.fetch-route-error') }}
+            {{ fetchMediationRouteError }}
           </span>
         </amount-display>
       </div>
@@ -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
     );

raiden-dapp/tests/unit/views/quick-pay-route.spec.ts

@@ -312,34 +312,23 @@ 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({
         getUDCCapacity,
         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 () => {