diff --git a/raiden-dapp/src/components/AmountDisplay.vue b/raiden-dapp/src/components/AmountDisplay.vue
index 7d104dfa46..de3d07f792 100644
--- a/raiden-dapp/src/components/AmountDisplay.vue
+++ b/raiden-dapp/src/components/AmountDisplay.vue
@@ -8,30 +8,35 @@
     @mouseover="exactAmount ? (displayExactAmount = true) : null"
     @mouseleave="exactAmount ? (displayExactAmount = false) : null"
   >
-    <span v-if="label">{{ label }}</span>
-    <span v-if="displayExactAmount">
-      {{ sign }}{{ amount | toUnits(token.decimals) }} {{ token.symbol || '' }}
-    </span>
-    <span v-else>
-      {{ sign }}{{ amount | displayFormat(token.decimals) }}
-      {{ token.symbol || '' }}
+    <span v-if="showLabel" class="amount-display__label">
+      {{ label }}
     </span>
+
+    <slot>
+      <span
+        class="amount-display__formatted-amount"
+        :class="{ 'amount-display__formatted-amount--warning': warning }"
+      >
+        {{ formattedAmount }}
+      </span>
+    </slot>
   </div>
 </template>
 
 <script lang="ts">
-import type { BigNumber } from 'ethers';
+import { BigNumber } from 'ethers';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
+import Filters from '@/filters';
 import type { Token } from '@/model/types';
 
-@Component({})
+@Component
 export default class AmountDisplay extends Vue {
   @Prop({ required: false, default: false, type: Boolean })
   exactAmount!: boolean;
 
-  @Prop({ type: String, default: '' })
-  label!: string;
+  @Prop({ type: String, required: false })
+  label?: string;
 
   @Prop({ required: true })
   amount!: string | BigNumber;
@@ -48,11 +53,37 @@ export default class AmountDisplay extends Vue {
   @Prop({ type: Boolean, default: false })
   fullWidth!: boolean;
 
+  @Prop({ type: Boolean, default: false })
+  warning!: boolean;
+
   displayExactAmount = false;
+
+  get showLabel(): boolean {
+    return this.label !== undefined;
+  }
+
+  get exactAmountValue(): string {
+    const amount = BigNumber.from(this.amount);
+    return Filters.toUnits(amount, this.token.decimals);
+  }
+
+  get roundedAmountValue(): string {
+    const amount = BigNumber.from(this.amount);
+    return Filters.displayFormat(amount, this.token.decimals);
+  }
+
+  get formattedAmount(): string {
+    let formattedAmount = this.sign;
+    formattedAmount += this.displayExactAmount ? this.exactAmountValue : this.roundedAmountValue;
+    formattedAmount += ' ' + this.token.symbol;
+    return formattedAmount;
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+@import '@/scss/colors';
+
 .amount-display {
   display: flex;
   flex-direction: row;
@@ -66,5 +97,11 @@ export default class AmountDisplay extends Vue {
   &--full-width {
     width: 100%;
   }
+
+  &__formatted-amount {
+    &--warning {
+      color: $error-color;
+    }
+  }
 }
 </style>
diff --git a/raiden-dapp/src/components/channels/ChannelActionForm.vue b/raiden-dapp/src/components/channels/ChannelActionForm.vue
index f280200459..ab3e338d47 100644
--- a/raiden-dapp/src/components/channels/ChannelActionForm.vue
+++ b/raiden-dapp/src/components/channels/ChannelActionForm.vue
@@ -168,6 +168,9 @@ export default class ChannelActionForm extends Vue {
   @Prop({ type: Boolean, default: false })
   readonly stickyButton!: boolean;
 
+  @Prop({ type: Boolean, default: false })
+  readonly autofocusDisabled!: boolean;
+
   @Prop({ required: true })
   readonly runAction!: (options: unknown) => Promise<void>;
 
@@ -203,15 +206,18 @@ export default class ChannelActionForm extends Vue {
   }
 
   get tokenAddressInputFocused(): boolean {
-    return this.tokenAddressEditable;
+    return !this.autofocusDisabled && this.tokenAddressEditable;
   }
 
   get partnerAddressInputFocused(): boolean {
-    return !this.tokenAddressInputFocused && this.partnerAddressEditable;
+    return (
+      !this.autofocusDisabled && !this.tokenAddressInputFocused && this.partnerAddressEditable
+    );
   }
 
   get tokenAmountInputFocused(): boolean {
     return (
+      !this.autofocusDisabled &&
       !this.tokenAddressInputFocused &&
       !this.partnerAddressInputFocused &&
       this.tokenAmountEditable
diff --git a/raiden-dapp/src/components/channels/ChannelDepositAndTransferAction.vue b/raiden-dapp/src/components/channels/ChannelDepositAndTransferAction.vue
index 6a1627f091..978ddedc2b 100644
--- a/raiden-dapp/src/components/channels/ChannelDepositAndTransferAction.vue
+++ b/raiden-dapp/src/components/channels/ChannelDepositAndTransferAction.vue
@@ -1,10 +1,15 @@
 <script lang="ts">
 import type { BigNumber } from 'ethers';
-import { Component, Mixins, Prop } from 'vue-property-decorator';
+import { Component, Mixins } from 'vue-property-decorator';
 
 import ActionMixin from '@/mixins/action-mixin';
 import type { ActionProgressStep } from '@/model/types';
 
+type FixedRunOptions = {
+  transferTokenAmount: BigNumber;
+  paymentIdentifier: BigNumber;
+};
+
 const cleanDepositStep: ActionProgressStep = {
   title: 'channel-deposit-and-transfer-action.steps.deposit.title',
   description: 'channel-deposit-and-transfer-action.steps.deposit.description',
@@ -23,12 +28,6 @@ const cleanTransferStep: ActionProgressStep = {
 
 @Component
 export default class ChannelDepositAndTransferAction extends Mixins(ActionMixin) {
-  @Prop({ required: true })
-  readonly transferTokenAmount!: BigNumber;
-
-  @Prop({ required: true })
-  readonly paymentIdentifier!: BigNumber;
-
   depositStep = Object.assign({}, cleanDepositStep);
   transferStep = Object.assign({}, cleanTransferStep);
 
@@ -50,19 +49,22 @@ export default class ChannelDepositAndTransferAction extends Mixins(ActionMixin)
     partnerAddress: string;
     tokenAmount: BigNumber;
   }): Promise<void> {
+    const { tokenAddress, partnerAddress, tokenAmount: depositTokenAmount } = options;
+    const { transferTokenAmount, paymentIdentifier } = this.fixedRunOptions as FixedRunOptions;
+
     this.depositStep.active = true;
 
-    await this.$raiden.deposit(options.tokenAddress, options.partnerAddress, options.tokenAmount);
+    await this.$raiden.deposit(tokenAddress, partnerAddress, depositTokenAmount);
 
     this.depositStep.completed = true;
     this.depositStep.active = false;
     this.transferStep.active = true;
 
     await this.$raiden.transfer(
-      options.tokenAddress,
-      options.partnerAddress,
-      this.transferTokenAmount,
-      this.paymentIdentifier,
+      tokenAddress,
+      partnerAddress,
+      transferTokenAmount,
+      paymentIdentifier,
     );
 
     this.transferStep.completed = true;
diff --git a/raiden-dapp/src/components/channels/ChannelOpenAndTransferAction.vue b/raiden-dapp/src/components/channels/ChannelOpenAndTransferAction.vue
index 7c87527078..618fa60a7c 100644
--- a/raiden-dapp/src/components/channels/ChannelOpenAndTransferAction.vue
+++ b/raiden-dapp/src/components/channels/ChannelOpenAndTransferAction.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { BigNumber } from 'ethers';
-import { Component, Mixins, Prop } from 'vue-property-decorator';
+import { Component, Mixins } from 'vue-property-decorator';
 
 import type { ChangeEvent } from 'raiden-ts';
 import { EventTypes } from 'raiden-ts';
@@ -8,6 +8,11 @@ import { EventTypes } from 'raiden-ts';
 import ActionMixin from '@/mixins/action-mixin';
 import type { ActionProgressStep } from '@/model/types';
 
+type FixedRunOptions = {
+  transferTokenAmount: BigNumber;
+  paymentIdentifier: BigNumber;
+};
+
 const cleanOpenStep: ActionProgressStep = {
   title: 'channel-open-and-transfer-action.steps.open.title',
   description: 'channel-open-and-transfer-action.steps.open.description',
@@ -34,12 +39,6 @@ const cleanTransferStep: ActionProgressStep = {
 
 @Component
 export default class ChannelOpenAndTransferAction extends Mixins(ActionMixin) {
-  @Prop({ required: true })
-  readonly transferTokenAmount!: BigNumber;
-
-  @Prop({ required: true })
-  readonly paymentIdentifier!: BigNumber;
-
   openStep = Object.assign({}, cleanOpenStep);
   depositStep = Object.assign({}, cleanDepositStep);
   transferStep = Object.assign({}, cleanTransferStep);
@@ -76,12 +75,15 @@ export default class ChannelOpenAndTransferAction extends Mixins(ActionMixin) {
     partnerAddress: string;
     tokenAmount: BigNumber;
   }): Promise<void> {
+    const { tokenAddress, partnerAddress, tokenAmount: depositTokenAmount } = options;
+    const { transferTokenAmount, paymentIdentifier } = this.fixedRunOptions as FixedRunOptions;
+
     this.openStep.active = true;
 
     await this.$raiden.openChannel(
-      options.tokenAddress,
-      options.partnerAddress,
-      options.tokenAmount,
+      tokenAddress,
+      partnerAddress,
+      depositTokenAmount,
       this.handleOpenEvents,
     );
 
@@ -90,10 +92,10 @@ export default class ChannelOpenAndTransferAction extends Mixins(ActionMixin) {
     this.transferStep.active = true;
 
     await this.$raiden.transfer(
-      options.tokenAddress,
-      options.partnerAddress,
-      this.transferTokenAmount,
-      this.paymentIdentifier,
+      tokenAddress,
+      partnerAddress,
+      transferTokenAmount,
+      paymentIdentifier,
     );
 
     this.transferStep.completed = true;
diff --git a/raiden-dapp/src/components/icons/Spinner.vue b/raiden-dapp/src/components/icons/Spinner.vue
index b36808d723..6aefaec6d6 100644
--- a/raiden-dapp/src/components/icons/Spinner.vue
+++ b/raiden-dapp/src/components/icons/Spinner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="spinner my-4" :class="{ 'spinner--blocking': !inline }">
+  <div class="spinner" :class="{ 'spinner--blocking': !inline }">
     <div class="spinner__circle" :style="style" />
   </div>
 </template>
diff --git a/raiden-dapp/src/components/transfer/DirectTransferAction.vue b/raiden-dapp/src/components/transfer/DirectTransferAction.vue
new file mode 100644
index 0000000000..1b23c9be31
--- /dev/null
+++ b/raiden-dapp/src/components/transfer/DirectTransferAction.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+import type { BigNumber } from 'ethers';
+import { Component, Mixins } from 'vue-property-decorator';
+
+import ActionMixin from '@/mixins/action-mixin';
+import type { ActionProgressStep } from '@/model/types';
+
+type FixedRunOptions = {
+  transferTokenAmount: BigNumber;
+  paymentIdentifier: BigNumber;
+};
+
+const cleanTransferStep: ActionProgressStep = {
+  title: 'direct-transfer-action.steps.transfer.title',
+  description: 'direct-transfer-action.steps.transfer.description',
+  active: false,
+  completed: false,
+  failed: false,
+};
+
+@Component
+export default class DirectTransferAction extends Mixins(ActionMixin) {
+  transferStep = Object.assign({}, cleanTransferStep);
+
+  get confirmButtonLabel(): string {
+    return this.$t('direct-transfer-action.confirm-button-label') as string;
+  }
+
+  get steps(): ActionProgressStep[] {
+    return [this.transferStep];
+  }
+
+  resetStepsState(): void {
+    this.transferStep = Object.assign({}, cleanTransferStep);
+  }
+
+  async handleAction(options: { tokenAddress: string; partnerAddress: string }): Promise<void> {
+    const { tokenAddress, partnerAddress } = options;
+    const { transferTokenAmount, paymentIdentifier } = this.fixedRunOptions as FixedRunOptions;
+
+    this.transferStep.active = true;
+
+    const route = await this.$raiden.directRoute(
+      tokenAddress,
+      partnerAddress,
+      transferTokenAmount,
+    );
+
+    if (route === undefined) {
+      throw new Error(this.$t('direct-transfer-action.no-route-error') as string);
+    }
+
+    await this.$raiden.transfer(
+      tokenAddress,
+      partnerAddress,
+      transferTokenAmount,
+      paymentIdentifier,
+      route,
+    );
+
+    this.transferStep.completed = true;
+    this.transferStep.active = false;
+  }
+}
+</script>
diff --git a/raiden-dapp/src/components/transfer/TransferAction.vue b/raiden-dapp/src/components/transfer/MediatedTransferAction.vue
similarity index 51%
rename from raiden-dapp/src/components/transfer/TransferAction.vue
rename to raiden-dapp/src/components/transfer/MediatedTransferAction.vue
index 76b651dfdd..024e745a7a 100644
--- a/raiden-dapp/src/components/transfer/TransferAction.vue
+++ b/raiden-dapp/src/components/transfer/MediatedTransferAction.vue
@@ -1,30 +1,32 @@
 <script lang="ts">
 import type { BigNumber } from 'ethers';
-import { Component, Mixins, Prop } from 'vue-property-decorator';
+import { Component, Mixins } from 'vue-property-decorator';
+
+import type { RaidenPaths } from 'raiden-ts';
 
 import ActionMixin from '@/mixins/action-mixin';
 import type { ActionProgressStep } from '@/model/types';
 
+type FixedRunOptions = {
+  transferTokenAmount: BigNumber;
+  paymentIdentifier: BigNumber;
+  route: RaidenPaths[number];
+};
+
 const cleanTransferStep: ActionProgressStep = {
-  title: 'transfer-action.steps.transfer.title',
-  description: 'transfer-action.steps.transfer.description',
+  title: 'mediated-transfer-action.steps.transfer.title',
+  description: 'mediated-transfer-action.steps.transfer.description',
   active: false,
   completed: false,
   failed: false,
 };
 
 @Component
-export default class ChannelOpenAndTransferAction extends Mixins(ActionMixin) {
-  @Prop({ required: true })
-  readonly transferTokenAmount!: BigNumber;
-
-  @Prop({ required: true })
-  readonly paymentIdentifier!: BigNumber;
-
+export default class MediatedTransferAction extends Mixins(ActionMixin) {
   transferStep = Object.assign({}, cleanTransferStep);
 
   get confirmButtonLabel(): string {
-    return this.$t('transfer-action.confirm-button-label') as string;
+    return this.$t('mediated-transfer-action.confirm-button-label') as string;
   }
 
   get steps(): ActionProgressStep[] {
@@ -36,13 +38,17 @@ export default class ChannelOpenAndTransferAction extends Mixins(ActionMixin) {
   }
 
   async handleAction(options: { tokenAddress: string; partnerAddress: string }): Promise<void> {
+    const { tokenAddress, partnerAddress } = options;
+    const { transferTokenAmount, paymentIdentifier, route } = this
+      .fixedRunOptions as FixedRunOptions;
     this.transferStep.active = true;
 
     await this.$raiden.transfer(
-      options.tokenAddress,
-      options.partnerAddress,
-      this.transferTokenAmount,
-      this.paymentIdentifier,
+      tokenAddress,
+      partnerAddress,
+      transferTokenAmount,
+      paymentIdentifier,
+      [route],
     );
 
     this.transferStep.completed = true;
diff --git a/raiden-dapp/src/locales/en.json b/raiden-dapp/src/locales/en.json
index c798dae4e3..8f1f42b48f 100644
--- a/raiden-dapp/src/locales/en.json
+++ b/raiden-dapp/src/locales/en.json
@@ -304,12 +304,22 @@
       "label": "Amount"
     }
   },
-  "transfer-action": {
+  "mediated-transfer-action": {
     "confirm-button-label": "Confirm Payment",
     "steps": {
       "transfer": {
-        "title": "Transfering tokens",
-        "description": "Please wait"
+        "title": "Transfering tokens via route",
+        "description": "Transfer in progress"
+      }
+    }
+  },
+  "direct-transfer-action": {
+    "confirm-button-label": "Confirm Payment",
+    "no-route-error": "Please verify that the recipient is online and receives payments before trying again.",
+    "steps": {
+      "transfer": {
+        "title": "Transfering tokens directly",
+        "description": "Transfer in progress"
       }
     }
   },
@@ -877,10 +887,14 @@
     }
   },
   "quick-pay": {
-    "transfer-information-labels": {
+    "transfer-information": {
       "header": "Payment Information",
       "target-address": "Receiver",
-      "token-amount": "Payment amount"
+      "token-amount": "Payment amount",
+      "pathfinding-service-price": "Mediation possible, price for requesting route",
+      "fetch-route-trigger": "Pay to find route",
+      "fetch-route-error-too-expensive": "UDC balance too low",
+      "fetch-route-error-no-route": "No route available"
     },
     "action-titles": {
       "channel-deposit": "Channel Deposit",
@@ -889,7 +903,8 @@
       "channel-open-and-transfer": "Channel Open and Pay"
     },
     "action-messages": {
-      "transfer": "Please confirm the above payment information.",
+      "direct-transfer": "Please confirm the above payment information.",
+      "mediated-transfer": "Please confirm the above payment information including the mediation fees for the to use route.",
       "channel-deposit-and-transfer": "{deposit} will be deposited into the existing channel and {payment} will be paid out.",
       "channel-open-and-transfer": "{deposit} will be deposited into a new channel and {payment} will be paid out."
     },
diff --git a/raiden-dapp/src/mixins/action-mixin.ts b/raiden-dapp/src/mixins/action-mixin.ts
index f1dc765ad3..3e7f5c00f1 100644
--- a/raiden-dapp/src/mixins/action-mixin.ts
+++ b/raiden-dapp/src/mixins/action-mixin.ts
@@ -14,6 +14,9 @@ export default class ChannelDepositAction extends Vue {
   @Prop({ type: String, default: '' })
   readonly dialogTitle!: string;
 
+  @Prop({ required: false })
+  readonly fixedRunOptions?: Record<string, unknown>;
+
   @Prop({ type: Number, default: 5000 })
   readonly completionDelayTimeout!: number;
 
diff --git a/raiden-dapp/src/router/guards/no-connected-token.ts b/raiden-dapp/src/router/guards/no-connected-token.ts
index f3b7a85f0e..0640808d44 100644
--- a/raiden-dapp/src/router/guards/no-connected-token.ts
+++ b/raiden-dapp/src/router/guards/no-connected-token.ts
@@ -20,10 +20,11 @@ export const redirectIfNoConnectedToken: NavigationGuardChild = (to, store) => {
   const { tokensWithChannels } = store.getters;
   const noTokenWithChannel = Object.keys(tokensWithChannels).length === 0;
   const routingToNoTokens = to.name === RouteNames.NO_CONNECTED_TOKEN;
+  const routingToQuickPayRoute = to.name === RouteNames.QUICK_PAY;
   const routingToAccountRoute = accountRoutes.includes(to.name ?? '');
   const routingToConnectTokenRoute = connectTokenRoutes.includes(to.name ?? '');
 
-  if (routingToAccountRoute) return undefined;
+  if (routingToAccountRoute || routingToQuickPayRoute) return undefined;
 
   if (routingToConnectTokenRoute) return null;
 
diff --git a/raiden-dapp/src/views/QuickPayRoute.vue b/raiden-dapp/src/views/QuickPayRoute.vue
index 540bfca22b..2347ce5672 100644
--- a/raiden-dapp/src/views/QuickPayRoute.vue
+++ b/raiden-dapp/src/views/QuickPayRoute.vue
@@ -2,43 +2,82 @@
   <div class="quick-pay">
     <div v-if="token" class="quick-pay__transfer-information">
       <span class="quick-pay__transfer-information__header">
-        {{ $t('quick-pay.transfer-information-labels.header') }}
+        {{ $t('quick-pay.transfer-information.header') }}
       </span>
 
       <token-information class="quick-pay__transfer-information__token" :token="token" />
 
       <address-display
         class="quick-pay__transfer-information__target"
-        :label="$t('quick-pay.transfer-information-labels.target-address')"
+        :label="$t('quick-pay.transfer-information.target-address')"
         :address="targetAddress"
         full-width
       />
 
       <amount-display
         class="quick-pay__transfer-information__amount"
-        :label="$t('quick-pay.transfer-information-labels.token-amount')"
+        :label="$t('quick-pay.transfer-information.token-amount')"
         :amount="tokenAmount"
         :token="token"
         exact-amount
         full-width
       />
+
+      <div v-if="mediationTransferIsPossible" class="quick-pay__transfer-information__mediation">
+        <amount-display
+          class="quick-pay__transfer-information__mediation__pathfinding-service-price"
+          :label="$t('quick-pay.transfer-information.pathfinding-service-price')"
+          :amount="pathfindingServicePrice"
+          :token="serviceToken"
+          exact-amount
+          full-width
+        >
+          <spinner v-if="!pathfindingServicePrice" :size="25" :width="3" inline />
+        </amount-display>
+
+        <amount-display
+          class="quick-pay__transfer-information__mediation__fees"
+          label=""
+          :amount="mediationFees"
+          :token="token"
+          exact-amount
+          full-width
+        >
+          <button
+            v-if="showFetchMediationRouteButton"
+            class="quick-pay__transfer-information__mediation__button"
+            :disabled="fetchMediationRouteDisabled"
+            @click="fetchCheapestMediationRoute"
+          >
+            {{ $t('quick-pay.transfer-information.fetch-route-trigger') }}
+          </button>
+
+          <spinner v-if="fetchMediationRouteInProgress" :size="25" :width="3" inline />
+
+          <span
+            v-if="showFetchMediationRouteError"
+            class="quick-pay__transfer-information__mediation__error"
+          >
+            {{ fetchMediationRouteError }}
+          </span>
+        </amount-display>
+      </div>
     </div>
 
-    <div class="quick-pay__action">
+    <div v-if="actionComponent" class="quick-pay__action">
       <span v-if="actionHeader" class="quick-pay__action__header">{{ actionHeader }}</span>
 
       <component
         :is="actionComponent"
         #default="{ runAction, confirmButtonLabel }"
         class="quick-pay__action__component"
-        :transfer-token-amount="tokenAmount"
-        :payment-identifier="paymentIdentifier"
+        :fixed-run-options="actionFixedRunOptions"
         :dialog-title="actionDialogTitle"
         :completion-delay-timeout="1500"
         show-progress-in-dialog
         @started="setActionInProgress"
+        @failed="setActionFailed"
         @completed="redirect"
-        @failed="handleActionError"
         @dialogClosed="redirect"
       >
         <channel-action-form
@@ -47,6 +86,7 @@
           :token-amount="formattedDepositAmount"
           :minimum-token-amount="depositAmount"
           :confirm-button-label="confirmButtonLabel"
+          :autofocus-disabled="actionFormAutofocusDisabled"
           :run-action="runAction"
           hide-token-address
           hide-partner-address
@@ -75,12 +115,12 @@
 <script lang="ts">
 import { BigNumber, constants } from 'ethers';
 import { Component, Mixins, Watch } from 'vue-property-decorator';
-import { mapGetters } from 'vuex';
+import { createNamespacedHelpers, mapGetters } from 'vuex';
 
-import type { RaidenChannel, RaidenError } from 'raiden-ts';
-import { ChannelState, ErrorCodes } from 'raiden-ts';
+import type { RaidenChannel, RaidenPaths, RaidenPFS } from 'raiden-ts';
+import { ChannelState } from 'raiden-ts';
 
-import ActionProgressCard from '@/components/ActionProgressCard.vue';
+import ActionButton from '@/components/ActionButton.vue';
 import AddressDisplay from '@/components/AddressDisplay.vue';
 import AmountDisplay from '@/components/AmountDisplay.vue';
 import ChannelActionForm from '@/components/channels/ChannelActionForm.vue';
@@ -89,21 +129,18 @@ import ChannelOpenAndTransferAction from '@/components/channels/ChannelOpenAndTr
 import ErrorDialog from '@/components/dialogs/ErrorDialog.vue';
 import Spinner from '@/components/icons/Spinner.vue';
 import TokenInformation from '@/components/TokenInformation.vue';
-import TransferAction from '@/components/transfer/TransferAction.vue';
+import DirectTransferAction from '@/components/transfer/DirectTransferAction.vue';
+import MediatedTransferAction from '@/components/transfer/MediatedTransferAction.vue';
 import NavigationMixin from '@/mixins/navigation-mixin';
 import type { Token } from '@/model/types';
 import { BalanceUtils } from '@/utils/balance-utils';
 import { getAddress, getAmount, getPaymentId } from '@/utils/query-params';
 
-function isRecoverableTransferError(error: RaidenError): boolean {
-  return [ErrorCodes.PFS_NO_ROUTES_FOUND, ErrorCodes.PFS_NO_ROUTES_BETWEEN_NODES].includes(
-    error.message,
-  );
-}
+const { mapState: mapUserDepositContractState } = createNamespacedHelpers('userDepositContract');
 
 @Component({
   components: {
-    ActionProgressCard,
+    ActionButton,
     AddressDisplay,
     AmountDisplay,
     ChannelActionForm,
@@ -112,24 +149,36 @@ function isRecoverableTransferError(error: RaidenError): boolean {
     ErrorDialog,
     Spinner,
     TokenInformation,
-    TransferAction,
+    DirectTransferAction,
+    MediatedTransferAction,
   },
   computed: {
     ...mapGetters({
       getChannels: 'channels',
       getToken: 'token',
     }),
+    ...mapUserDepositContractState({
+      serviceToken: 'token',
+    }),
   },
 })
 export default class QuickPayRoute extends Mixins(NavigationMixin) {
   getChannels!: (tokenAddress: string) => RaidenChannel[];
   getToken!: (tokenAddress: string) => Token | null;
+  serviceToken!: Token;
 
+  pathfindingService: RaidenPFS | null = null;
+  serviceTokenCapacity = constants.Zero;
+  fetchMediationRouteInProgress = false;
+  fetchMediationRouteFailed = false;
+  mediationRoute: RaidenPaths[number] | null = null;
   depositAmountInput = constants.Zero;
   actionComponent:
-    | typeof TransferAction
+    | typeof DirectTransferAction
+    | typeof MediatedTransferAction
     | typeof ChannelOpenAndTransferAction
-    | typeof ChannelDepositAndTransferAction = TransferAction;
+    | typeof ChannelDepositAndTransferAction
+    | null = null;
   actionInProgress = false;
   actionFailed = false;
   error: Error | null = null; // Note that action errors are not set here.
@@ -170,7 +219,11 @@ export default class QuickPayRoute extends Mixins(NavigationMixin) {
   }
 
   get tokenAmountInputHidden(): boolean {
-    return this.actionComponent === TransferAction;
+    return (
+      this.actionComponent === null ||
+      this.actionComponent === DirectTransferAction ||
+      this.actionComponent === MediatedTransferAction
+    );
   }
 
   get paymentIdentifier(): BigNumber | undefined {
@@ -222,9 +275,57 @@ export default class QuickPayRoute extends Mixins(NavigationMixin) {
     return channelsWithEnoughCapacity.length > 0;
   }
 
+  get mediationTransferIsPossible(): boolean {
+    return this.hasAnyChannelWithEnoughCapacity && !this.directChannelHasEnoughCapacity;
+  }
+
+  get pathfindingServicePrice(): BigNumber | undefined {
+    return this.pathfindingService?.price
+      ? BigNumber.from(this.pathfindingService.price)
+      : undefined;
+  }
+
+  get pathfindingServiceTooExpensive(): boolean {
+    if (this.pathfindingServicePrice === undefined) {
+      return false;
+    } else {
+      return this.pathfindingServicePrice.gt(this.serviceTokenCapacity);
+    }
+  }
+
+  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
+    );
+  }
+
+  get fetchMediationRouteDisabled(): boolean {
+    return this.pathfindingService === null || this.pathfindingServiceTooExpensive;
+  }
+
+  get mediationFees(): BigNumber | undefined {
+    return this.mediationRoute?.fee ? BigNumber.from(this.mediationRoute.fee) : undefined;
+  }
+
   get actionHeader(): string {
     switch (this.actionComponent) {
-      case TransferAction:
+      case DirectTransferAction:
+      case MediatedTransferAction:
         return ''; // Empty on purpose. No header for this case.
       case ChannelDepositAndTransferAction:
         return this.$t('quick-pay.action-titles.channel-deposit') as string;
@@ -235,9 +336,18 @@ export default class QuickPayRoute extends Mixins(NavigationMixin) {
     }
   }
 
+  get actionFixedRunOptions(): { [key: string]: unknown } {
+    return {
+      transferTokenAmount: this.tokenAmount,
+      paymentIdentifier: this.paymentIdentifier,
+      route: this.mediationRoute,
+    };
+  }
+
   get actionDialogTitle(): string {
     switch (this.actionComponent) {
-      case TransferAction:
+      case DirectTransferAction:
+      case MediatedTransferAction:
         return ''; // Empty on purpose. No title for this case.
       case ChannelDepositAndTransferAction:
         return this.$t('quick-pay.action-titles.channel-deposit-and-transfer') as string;
@@ -250,8 +360,10 @@ export default class QuickPayRoute extends Mixins(NavigationMixin) {
 
   get actionMessagePath(): string {
     switch (this.actionComponent) {
-      case TransferAction:
-        return 'quick-pay.action-messages.transfer';
+      case DirectTransferAction:
+        return 'quick-pay.action-messages.direct-transfer';
+      case MediatedTransferAction:
+        return 'quick-pay.action-messages.mediated-transfer';
       case ChannelDepositAndTransferAction:
         return 'quick-pay.action-messages.channel-deposit-and-transfer';
       case ChannelOpenAndTransferAction:
@@ -261,6 +373,50 @@ export default class QuickPayRoute extends Mixins(NavigationMixin) {
     }
   }
 
+  get actionFormAutofocusDisabled(): boolean {
+    // In this case the it could be that the user can fetch a route for
+    // a mediated transfer. In such a case the active action and its form will
+    // be either the channel deposit and transfer or channel open and transfer.
+    // Focusing their form in such a case it not nice as the user theoretically
+    // should prefer the mediated transfer if possible.
+    // In case of a direct transfer this does basically nothing.
+    // In case no direct transfer nor a mediated transfer is possible, this will
+    // still autofocus the respective form.
+    return this.hasAnyChannelWithEnoughCapacity;
+  }
+
+  created(): void {
+    this.fetchServiceTokenCapacity();
+    this.fetchCheapestPathfindingService();
+  }
+
+  async fetchServiceTokenCapacity(): Promise<void> {
+    this.serviceTokenCapacity = await this.$raiden.getUDCCapacity();
+  }
+
+  async fetchCheapestPathfindingService(): Promise<void> {
+    const allServiceSorted = await this.$raiden.fetchServices();
+    this.pathfindingService = allServiceSorted[0];
+  }
+
+  async fetchCheapestMediationRoute(): Promise<void> {
+    try {
+      this.fetchMediationRouteFailed = false;
+      this.fetchMediationRouteInProgress = true;
+      const allRoutesSorted = await this.$raiden.findRoutes(
+        this.tokenAddress,
+        this.targetAddress,
+        this.tokenAmount!,
+        this.pathfindingService!,
+      );
+      this.mediationRoute = allRoutesSorted[0];
+    } catch (error) {
+      this.fetchMediationRouteFailed = true;
+    } finally {
+      this.fetchMediationRouteInProgress = false;
+    }
+  }
+
   @Watch('$route.query', { immediate: true })
   onRouteQueryChanged(): void {
     if (this.anyRequiredQueryParameterInvalid) {
@@ -271,6 +427,11 @@ export default class QuickPayRoute extends Mixins(NavigationMixin) {
     }
   }
 
+  @Watch('mediationRoute')
+  onMediationRouteChanged(): void {
+    this.decideOnActionComponent();
+  }
+
   onActionFromInputsChanged(event: { tokenAmount: string }): void {
     this.depositAmountInput = BalanceUtils.parse(event.tokenAmount, this.token?.decimals ?? 18);
   }
@@ -279,30 +440,27 @@ export default class QuickPayRoute extends Mixins(NavigationMixin) {
     this.actionInProgress = true;
   }
 
-  decideOnActionComponent(): void {
-    this.actionComponent = this.hasAnyChannelWithEnoughCapacity
-      ? TransferAction
-      : this.directChannelWithTarget
-      ? ChannelDepositAndTransferAction
-      : ChannelOpenAndTransferAction;
+  setActionFailed(): void {
+    this.actionFailed = true;
   }
 
-  decideToDepositOrOpenChannel(): void {
-    this.actionComponent = this.directChannelWithTarget
+  decideOnActionComponent(): void {
+    if (this.actionInProgress) {
+      return;
+    }
+
+    // Note that the mediated transfer takes precedence here because the user
+    // manually fetches a route. If a direct transfer is possible, the user
+    // can't fetch such a route, so this case will never happen.
+    this.actionComponent = this.mediationRoute
+      ? MediatedTransferAction
+      : this.directChannelHasEnoughCapacity
+      ? DirectTransferAction
+      : this.directChannelWithTarget
       ? ChannelDepositAndTransferAction
       : ChannelOpenAndTransferAction;
   }
 
-  async handleActionError(error: RaidenError): Promise<void> {
-    this.actionInProgress = false;
-
-    if (isRecoverableTransferError(error)) {
-      this.decideToDepositOrOpenChannel();
-    } else {
-      this.actionFailed = true;
-    }
-  }
-
   async redirect(): Promise<void> {
     if (this.redirectionTarget) {
       // Save getter into variable to preserve it over the automatic unloading
@@ -351,13 +509,34 @@ export default class QuickPayRoute extends Mixins(NavigationMixin) {
   &__transfer-information {
     &__token,
     &__target,
-    &__amount {
+    &__amount,
+    &__mediation {
       height: 48px;
       margin: 10px 0;
       padding: 0 22px 0 16px;
       border-radius: 8px;
       background-color: $input-background;
     }
+
+    &__mediation {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      height: 80px;
+      width: 100%;
+
+      &__button {
+        color: $primary-color;
+
+        &:disabled {
+          color: $primary-disabled-color;
+        }
+      }
+
+      &__error {
+        color: $error-color;
+      }
+    }
   }
 }
 </style>
diff --git a/raiden-dapp/tests/unit/components/amount-display.spec.ts b/raiden-dapp/tests/unit/components/amount-display.spec.ts
index 81622108a0..bc23d40ff1 100644
--- a/raiden-dapp/tests/unit/components/amount-display.spec.ts
+++ b/raiden-dapp/tests/unit/components/amount-display.spec.ts
@@ -1,10 +1,12 @@
 import type { Wrapper } from '@vue/test-utils';
 import { mount } from '@vue/test-utils';
+import type { BigNumber } from 'ethers';
 import { constants } from 'ethers';
 import Vue from 'vue';
 
 import AmountDisplay from '@/components/AmountDisplay.vue';
 import Filters from '@/filters';
+import type { Token } from '@/model/types';
 
 import { generateToken } from '../utils/data-generator';
 
@@ -13,18 +15,22 @@ Vue.filter('displayFormat', Filters.displayFormat);
 const token = generateToken({ balance: constants.One });
 
 function createWrapper(options?: {
+  token?: Token;
+  amount?: BigNumber;
   exactAmount?: boolean;
   sign?: string;
   label?: string;
+  slot?: string;
 }): Wrapper<AmountDisplay> {
   return mount(AmountDisplay, {
     propsData: {
-      token: token,
-      amount: token.balance,
+      token: options?.token ?? token,
+      amount: options?.amount ?? constants.One,
       exactAmount: options?.exactAmount,
       sign: options?.sign,
       label: options?.label,
     },
+    slots: { default: options?.slot ?? '' },
   });
 }
 
@@ -38,42 +44,68 @@ async function triggerHoverEvent(
 
 describe('AmountDisplay.vue', () => {
   test('does not display full amount when "exactAmount" prop is set to false', async () => {
-    const wrapper = createWrapper({ exactAmount: false });
+    const token = generateToken({ decimals: 7 });
+    const wrapper = createWrapper({ exactAmount: false, token, amount: constants.One });
+    const formattedAmount = wrapper.get('.amount-display__formatted-amount');
 
     await triggerHoverEvent(wrapper);
 
-    expect(wrapper.text()).toContain('<0.000001');
+    expect(formattedAmount.text()).toContain('<0.000001');
   });
 
   test('does display full amount when "exactAmount" prop is set to true', async () => {
-    const wrapper = createWrapper({ exactAmount: true });
+    const token = generateToken({ decimals: 7 });
+    const wrapper = createWrapper({ exactAmount: true, token, amount: constants.One });
+    const formattedAmount = wrapper.get('.amount-display__formatted-amount');
 
     await triggerHoverEvent(wrapper);
 
-    expect(wrapper.text()).toContain('0.000000000000000001');
+    expect(formattedAmount.text()).toContain('0.0000001');
   });
 
   test('toggles between displaying full amount and not displaying full amount', async () => {
-    const wrapper = createWrapper({ exactAmount: true });
+    const token = generateToken({ decimals: 7 });
+    const wrapper = createWrapper({ exactAmount: true, token, amount: constants.One });
+    const formattedAmount = wrapper.get('.amount-display__formatted-amount');
 
     await triggerHoverEvent(wrapper, 'mouseover');
 
-    expect(wrapper.text()).toContain('0.000000000000000001');
+    expect(formattedAmount.text()).toContain('0.0000001');
 
     await triggerHoverEvent(wrapper, 'mouseleave');
 
-    expect(wrapper.text()).toContain('<0.000001');
+    expect(formattedAmount.text()).toContain('<0.000001');
   });
 
   test('displays sign if propery is set', () => {
     const wrapper = createWrapper({ sign: '+' });
+    const formattedAmount = wrapper.get('.amount-display__formatted-amount');
 
-    expect(wrapper.text()).toContain('+');
+    expect(formattedAmount.text()).toContain('+');
   });
 
   test('displays label if propery is set', () => {
     const wrapper = createWrapper({ label: 'test label' });
+    const label = wrapper.find('.amount-display__label');
 
-    expect(wrapper.text()).toContain('test label');
+    expect(label.exists()).toBeTruthy();
+    expect(label.text()).toBe('test label');
+  });
+
+  test('displays also an empty label if propery is set', () => {
+    const wrapper = createWrapper({ label: '' });
+    const label = wrapper.find('.amount-display__label');
+
+    expect(label.exists()).toBeTruthy();
+    expect(label.text()).toBe('');
+  });
+
+  test('displays slot instead of amount if defined', () => {
+    const wrapper = createWrapper({ slot: "<span id='test'>test</span>" });
+    const slot = wrapper.find('#test');
+    const formattedAmount = wrapper.find('.amount-display__formatted-amount');
+
+    expect(slot.exists()).toBeTruthy();
+    expect(formattedAmount.exists()).toBeFalsy();
   });
 });
diff --git a/raiden-dapp/tests/unit/components/channels/channel-action-form.spec.ts b/raiden-dapp/tests/unit/components/channels/channel-action-form.spec.ts
index f87c3283d1..04111a6e4c 100644
--- a/raiden-dapp/tests/unit/components/channels/channel-action-form.spec.ts
+++ b/raiden-dapp/tests/unit/components/channels/channel-action-form.spec.ts
@@ -39,6 +39,7 @@ async function createWrapper(options?: {
   minimumTokenAmount?: BigNumber;
   confirmButtonLabel?: string;
   stickyButton?: boolean;
+  autofocusDisabled?: boolean;
   runAction?: () => void;
   inputsAreValid?: boolean;
   fetchAndUpdateTokenData?: () => void;
@@ -75,6 +76,7 @@ async function createWrapper(options?: {
       minimumTokenAmount: options?.minimumTokenAmount,
       confirmButtonLabel: options?.confirmButtonLabel ?? 'confirm label',
       stickyButton: options?.stickyButton,
+      autofocusDisabled: options?.autofocusDisabled,
       runAction: options?.runAction ?? jest.fn(),
     },
     stubs: ['v-form'],
@@ -313,6 +315,48 @@ describe('ChannelActionForm.vue', () => {
     });
   });
 
+  describe('autofocus', () => {
+    test('focuses the partner address input if it is editable', async () => {
+      const wrapper = await createWrapper({ partnerAddressEditable: true });
+      const input = wrapper.get(
+        '.channel-action-form__partner-address.channel-action-form__editable-input',
+      );
+
+      expect(input.attributes('autofocus')).toBeTruthy();
+    });
+
+    test('focuses the token amount input if it is editable, but partner address is not editable', async () => {
+      const wrapper = await createWrapper({
+        tokenAmountEditable: true,
+        partnerAddressEditable: false,
+      });
+      const input = wrapper.get(
+        '.channel-action-form__token-amount.channel-action-form__editable-input',
+      );
+
+      expect(input.attributes('autofocus')).toBeTruthy();
+    });
+
+    test('focuses no input if autofocus is disabled, even if inputs are editable', async () => {
+      const wrapper = await createWrapper({
+        autofocusDisabled: true,
+        tokenAmountEditable: true,
+        partnerAddressEditable: true,
+      });
+
+      const partnerAddressInput = wrapper.get(
+        '.channel-action-form__partner-address.channel-action-form__editable-input',
+      );
+
+      const tokenAmountInput = wrapper.get(
+        '.channel-action-form__token-amount.channel-action-form__editable-input',
+      );
+
+      expect(partnerAddressInput.attributes('autofocus')).toBeFalsy();
+      expect(tokenAmountInput.attributes('autofocus')).toBeFalsy();
+    });
+  });
+
   describe('emit input update event', () => {
     test('emits event', async () => {
       const wrapper = await createWrapper({
diff --git a/raiden-dapp/tests/unit/components/channels/channel-deposit-and-transfer-action.spec.ts b/raiden-dapp/tests/unit/components/channels/channel-deposit-and-transfer-action.spec.ts
index d8eeb4f453..27b6a2dc25 100644
--- a/raiden-dapp/tests/unit/components/channels/channel-deposit-and-transfer-action.spec.ts
+++ b/raiden-dapp/tests/unit/components/channels/channel-deposit-and-transfer-action.spec.ts
@@ -26,12 +26,13 @@ function createWrapper(options?: {
     transfer: options?.transfer ?? jest.fn(),
   };
 
+  const fixedRunOptions = {
+    transferTokenAmount: options?.transferTokenAmount ?? constants.One,
+    paymentIdentifier: options?.paymentIdentifier ?? constants.Two,
+  };
+
   return shallowMount(ChannelDepositAndTransferAction, {
-    propsData: {
-      transferTokenAmount: options?.transferTokenAmount ?? constants.One,
-      paymentIdentifier: options?.paymentIdentifier ?? constants.Two,
-      completionDelayTimeout: 0,
-    },
+    propsData: { fixedRunOptions, completionDelayTimeout: 0 },
     mocks: { $raiden, $t },
   });
 }
diff --git a/raiden-dapp/tests/unit/components/channels/channel-open-and-transfer-action.spec.ts b/raiden-dapp/tests/unit/components/channels/channel-open-and-transfer-action.spec.ts
index c1ac217c70..2776e056f3 100644
--- a/raiden-dapp/tests/unit/components/channels/channel-open-and-transfer-action.spec.ts
+++ b/raiden-dapp/tests/unit/components/channels/channel-open-and-transfer-action.spec.ts
@@ -46,12 +46,13 @@ function createWrapper(options?: {
     transfer: options?.transfer ?? jest.fn(),
   };
 
+  const fixedRunOptions = {
+    transferTokenAmount: options?.transferTokenAmount ?? constants.One,
+    paymentIdentifier: options?.paymentIdentifier ?? constants.Two,
+  };
+
   return shallowMount(ChannelOpenAndTransferAction, {
-    propsData: {
-      transferTokenAmount: options?.transferTokenAmount ?? constants.One,
-      paymentIdentifier: options?.paymentIdentifier ?? constants.Two,
-      completionDelayTimeout: 0,
-    },
+    propsData: { fixedRunOptions, completionDelayTimeout: 0 },
     mocks: { $raiden, $t },
   });
 }
diff --git a/raiden-dapp/tests/unit/components/transfer/direct-transfer-action.spec.ts b/raiden-dapp/tests/unit/components/transfer/direct-transfer-action.spec.ts
new file mode 100644
index 0000000000..f299f0555e
--- /dev/null
+++ b/raiden-dapp/tests/unit/components/transfer/direct-transfer-action.spec.ts
@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { $t } from '../../utils/mocks';
+
+import type { Wrapper } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import type { BigNumber } from 'ethers';
+import { constants } from 'ethers';
+import flushPromises from 'flush-promises';
+
+import DirectTransferAction from '@/components/transfer/DirectTransferAction.vue';
+
+const defaultTransferOptions = {
+  tokenAddress: '0xToken',
+  partnerAddress: '0xPartner',
+};
+
+function createWrapper(options?: {
+  transferTokenAmount?: BigNumber;
+  paymentIdentifier?: BigNumber;
+  directRoute?: (...args: any[]) => void;
+  transfer?: (...args: any[]) => void;
+}): Wrapper<DirectTransferAction> {
+  const $raiden = {
+    directRoute: options?.directRoute ?? jest.fn().mockResolvedValue(['no-actual-route']),
+    transfer: options?.transfer ?? jest.fn(),
+  };
+
+  const fixedRunOptions = {
+    transferTokenAmount: options?.transferTokenAmount ?? constants.One,
+    paymentIdentifier: options?.paymentIdentifier ?? constants.Two,
+  };
+
+  return shallowMount(DirectTransferAction, {
+    propsData: { fixedRunOptions, completionDelayTimeout: 0 },
+    mocks: { $raiden, $t },
+  });
+}
+
+describe('DirectTransferAction', () => {
+  afterEach(() => {
+    flushPromises();
+  });
+
+  test('fetches route from raiden service with correct arguments', async () => {
+    const directRoute = jest.fn();
+    const wrapper = createWrapper({ directRoute, transferTokenAmount: constants.One });
+
+    await (wrapper.vm as any).runAction({
+      tokenAddress: '0xToken',
+      partnerAddress: '0xPartner',
+    });
+
+    expect(directRoute).toHaveBeenCalledTimes(1);
+    expect(directRoute).toHaveBeenLastCalledWith('0xToken', '0xPartner', constants.One);
+  });
+
+  test('executes raiden service deposit with correct arguments', async () => {
+    const directRoute = jest.fn().mockResolvedValue(['no-actual-route']);
+    const transfer = jest.fn();
+    const wrapper = createWrapper({
+      directRoute,
+      transfer,
+      transferTokenAmount: constants.One,
+      paymentIdentifier: constants.Two,
+    });
+
+    await (wrapper.vm as any).runAction({
+      tokenAddress: '0xToken',
+      partnerAddress: '0xPartner',
+    });
+
+    expect(transfer).toHaveBeenCalledTimes(1);
+    expect(transfer).toHaveBeenLastCalledWith(
+      '0xToken',
+      '0xPartner',
+      constants.One,
+      constants.Two,
+      ['no-actual-route'],
+    );
+  });
+
+  test('sets transfer step to be active before calling raiden service', async () => {
+    const directRoute = jest.fn().mockReturnValue(new Promise(() => undefined));
+    const wrapper = createWrapper({ directRoute });
+
+    (wrapper.vm as any).runAction(defaultTransferOptions);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(wrapper.vm.$data.transferStep.active).toBeTruthy();
+  });
+
+  test('completes transfer step when transfer finishes', async () => {
+    const wrapper = createWrapper();
+
+    (wrapper.vm as any).runAction(defaultTransferOptions);
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(wrapper.vm.$data.transferStep.completed).toBeTruthy();
+    expect(wrapper.vm.$data.transferStep.active).toBeFalsy();
+  });
+});
diff --git a/raiden-dapp/tests/unit/components/transfer/transfer-action.spec.ts b/raiden-dapp/tests/unit/components/transfer/mediated-transfer-action.spec.ts
similarity index 73%
rename from raiden-dapp/tests/unit/components/transfer/transfer-action.spec.ts
rename to raiden-dapp/tests/unit/components/transfer/mediated-transfer-action.spec.ts
index f832f1dc47..4e72da5650 100644
--- a/raiden-dapp/tests/unit/components/transfer/transfer-action.spec.ts
+++ b/raiden-dapp/tests/unit/components/transfer/mediated-transfer-action.spec.ts
@@ -7,7 +7,9 @@ import type { BigNumber } from 'ethers';
 import { constants } from 'ethers';
 import flushPromises from 'flush-promises';
 
-import TransferAction from '@/components/transfer/TransferAction.vue';
+import type { RaidenPaths } from 'raiden-ts';
+
+import MediatedTransfer from '@/components/transfer/MediatedTransferAction.vue';
 
 const defaultTransferOptions = {
   tokenAddress: '0xToken',
@@ -17,32 +19,36 @@ const defaultTransferOptions = {
 function createWrapper(options?: {
   transferTokenAmount?: BigNumber;
   paymentIdentifier?: BigNumber;
+  route?: RaidenPaths[number];
   transfer?: (...args: any[]) => void;
-}): Wrapper<TransferAction> {
+}): Wrapper<MediatedTransfer> {
   const $raiden = {
     transfer: options?.transfer ?? jest.fn(),
   };
 
-  return shallowMount(TransferAction, {
-    propsData: {
-      transferTokenAmount: options?.transferTokenAmount ?? constants.One,
-      paymentIdentifier: options?.paymentIdentifier ?? constants.Two,
-      completionDelayTimeout: 0,
-    },
+  const fixedRunOptions = {
+    transferTokenAmount: options?.transferTokenAmount ?? constants.One,
+    paymentIdentifier: options?.paymentIdentifier ?? constants.Two,
+    route: options?.route ?? 'no-actual-route',
+  };
+
+  return shallowMount(MediatedTransfer, {
+    propsData: { fixedRunOptions, completionDelayTimeout: 0 },
     mocks: { $raiden, $t },
   });
 }
 
-describe('TransferAction', () => {
+describe('MediatedTransferAction', () => {
   afterEach(() => {
     flushPromises();
   });
 
-  test('executes raiden service deposit with correct arguments', async () => {
+  test('executes raiden service transfer with correct arguments', async () => {
     const transfer = jest.fn().mockResolvedValue(undefined);
     const wrapper = createWrapper({
       transferTokenAmount: constants.One,
       paymentIdentifier: constants.Two,
+      route: 'no-actual-route' as unknown as RaidenPaths[number],
       transfer,
     });
 
@@ -57,6 +63,7 @@ describe('TransferAction', () => {
       '0xPartner',
       constants.One,
       constants.Two,
+      ['no-actual-route'],
     );
   });
 
diff --git a/raiden-dapp/tests/unit/router/guards/no-connected-token.spec.ts b/raiden-dapp/tests/unit/router/guards/no-connected-token.spec.ts
index 8e783f4887..e7dd519e8f 100644
--- a/raiden-dapp/tests/unit/router/guards/no-connected-token.spec.ts
+++ b/raiden-dapp/tests/unit/router/guards/no-connected-token.spec.ts
@@ -21,6 +21,7 @@ const {
   [RouteNames.SELECT_TOKEN]: selectTokenRoute,
   [RouteNames.SELECT_HUB]: selectHubRoute,
   [RouteNames.OPEN_CHANNEL]: openChannelRoute,
+  [RouteNames.QUICK_PAY]: quickPayRoute,
   ...protectedRoutes
 } = transformRouteConfigsToRoutes();
 
@@ -97,4 +98,10 @@ describe('redirectIfNoConnectedToken()', () => {
       expect(redirectIfNoConnectedToken(route, store)).toBeUndefined();
     });
   });
+
+  test('do nothing if navigating to quick pay route', () => {
+    const store = createStore();
+
+    expect(redirectIfNoConnectedToken(quickPayRoute, store)).toBeUndefined();
+  });
 });
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 607b668c7f..04a12e43f3 100644
--- a/raiden-dapp/tests/unit/views/quick-pay-route.spec.ts
+++ b/raiden-dapp/tests/unit/views/quick-pay-route.spec.ts
@@ -3,6 +3,7 @@ import { $t } from '../utils/mocks';
 import type { Wrapper } from '@vue/test-utils';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { constants } from 'ethers';
+import flushPromises from 'flush-promises';
 import Vuex, { Store } from 'vuex';
 
 import type { Address, RaidenChannel } from 'raiden-ts';
@@ -10,7 +11,9 @@ import type { Address, RaidenChannel } from 'raiden-ts';
 import ChannelDepositAndTransferAction from '@/components/channels/ChannelDepositAndTransferAction.vue';
 import ChannelOpenAndTransferAction from '@/components/channels/ChannelOpenAndTransferAction.vue';
 import ErrorDialog from '@/components/dialogs/ErrorDialog.vue';
-import TransferAction from '@/components/transfer/TransferAction.vue';
+import Spinner from '@/components/icons/Spinner.vue';
+import DirectTransferAction from '@/components/transfer/DirectTransferAction.vue';
+import MediatedTransferAction from '@/components/transfer/MediatedTransferAction.vue';
 import type { Token } from '@/model/types';
 import { RouteNames } from '@/router/route-names';
 import QuickPayRoute from '@/views/QuickPayRoute.vue';
@@ -20,6 +23,8 @@ import { generateChannel, generateRoute, generateToken } from '../utils/data-gen
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
+const userDepositToken = generateToken({ balance: constants.One });
+
 function createWrapper(options?: {
   tokenAddress?: string;
   targetAddress?: string;
@@ -29,6 +34,9 @@ function createWrapper(options?: {
   token?: Token;
   channels?: RaidenChannel[];
   accountAddress?: string;
+  getUDCCapacity?: () => void;
+  fetchServices?: () => void;
+  findRoutes?: () => void;
   disconnect?: () => void;
   push?: () => void;
 }): Wrapper<QuickPayRoute> {
@@ -39,11 +47,23 @@ function createWrapper(options?: {
     token: () => () => token,
   };
 
-  const store = new Store({ getters });
+  const userDepositContractModule = {
+    namespaced: true,
+    state: { token: userDepositToken },
+  };
+
+  const store = new Store({
+    getters,
+    modules: { userDepositContract: userDepositContractModule },
+  });
 
   const $raiden = {
     getAccount: () => options?.accountAddress,
     disconnect: options?.disconnect ?? jest.fn(),
+    getUDCCapacity: options?.getUDCCapacity ?? jest.fn().mockResolvedValue(constants.Two),
+    fetchServices:
+      options?.fetchServices ?? jest.fn().mockResolvedValue([{ price: constants.One }]),
+    findRoutes: options?.findRoutes ?? jest.fn().mockResolvedValue(['no-actual-route']),
   };
 
   const $route = generateRoute({
@@ -68,51 +88,57 @@ function createWrapper(options?: {
   });
 }
 
-const channelWithTarget = generateChannel({
-  partner: '0x1F916ab5cf1B30B22f24Ebf435f53Ee665344Acf' as Address,
-  capacity: constants.Zero,
-});
+async function clickGetRoutesButton(wrapper: Wrapper<QuickPayRoute>): Promise<void> {
+  const getRouteButton = wrapper.get('.quick-pay__transfer-information__mediation__button');
+  await flushPromises(); // Fetching services must complete
+  getRouteButton.trigger('click');
+  await flushPromises(); // Fetching routes must complete
+}
+
+const partnerAddress = '0x1F916ab5cf1B30B22f24Ebf435f53Ee665344Acf';
+const foreignAddress = '0xdA75b5Cd196C6C8292B567Fdc78B33A886ce0d80';
 
-const otherChannel = generateChannel({
-  partner: '0x3D389c9B67cA85F1de2EbeF648C54d740365c366' as Address,
-  capacity: constants.Two,
+const channelWithPartner = generateChannel({
+  partner: partnerAddress as Address,
+  capacity: constants.One,
 });
 
-const optionsForStraightTransfer = {
+const optionsForDirectTransfer = {
+  targetAddress: partnerAddress,
   tokenAmount: '1',
-  channels: [otherChannel],
-};
-
-const optionsForChannelDepositAndTransfer = {
-  targetAddress: '0x1F916ab5cf1B30B22f24Ebf435f53Ee665344Acf',
-  tokenAmount: '5',
-  channels: [channelWithTarget, otherChannel],
+  channels: [channelWithPartner],
 };
 
-const optionsForChannelDepositAndTransferWithTransferFirst = {
-  ...optionsForChannelDepositAndTransfer,
+const optionsForMediatedTransfer = {
+  targetAddress: foreignAddress,
   tokenAmount: '1',
+  channels: [channelWithPartner],
 };
 
-const optionsForChannelOpenAndTransfer = {
-  targetAddress: '0xdA75b5Cd196C6C8292B567Fdc78B33A886ce0d80',
+const optionsForChannelDepositAndTransfer = {
+  targetAddress: partnerAddress,
   tokenAmount: '5',
-  channels: [otherChannel],
+  channels: [channelWithPartner],
 };
 
-const optionsForChannelOpenAndTransferWithTransferFirst = {
-  ...optionsForChannelOpenAndTransfer,
+const optionsForChannelOpenAndTransfer = {
+  targetAddress: foreignAddress,
   tokenAmount: '1',
+  channels: [],
 };
 
 describe('QuickPayRoute.vue', () => {
+  afterEach(() => {
+    flushPromises();
+  });
+
   describe('transfer information', () => {
     test('displays header', () => {
       const wrapper = createWrapper();
       const header = wrapper.find('.quick-pay__transfer-information__header');
 
       expect(header.exists()).toBeTruthy();
-      expect(header.text()).toContain('quick-pay.transfer-information-labels.header');
+      expect(header.text()).toContain('quick-pay.transfer-information.header');
     });
 
     test('displays token information', () => {
@@ -132,9 +158,7 @@ describe('QuickPayRoute.vue', () => {
 
       expect(addressDisplay.exists()).toBeTruthy();
       expect(addressDisplay.html()).toContain('0x1F916ab5cf1B30B22f24Ebf435f53Ee665344Acf');
-      expect(addressDisplay.html()).toContain(
-        'quick-pay.transfer-information-labels.target-address',
-      );
+      expect(addressDisplay.html()).toContain('quick-pay.transfer-information.target-address');
     });
 
     test('displays token amount', () => {
@@ -145,7 +169,7 @@ describe('QuickPayRoute.vue', () => {
       expect(amountDisplay.exists()).toBeTruthy();
       expect(amountDisplay.html()).toContain('1');
       expect(amountDisplay.html()).toContain(token.toString());
-      expect(amountDisplay.html()).toContain('quick-pay.transfer-information-labels.token-amount');
+      expect(amountDisplay.html()).toContain('quick-pay.transfer-information.token-amount');
     });
   });
 
@@ -211,57 +235,201 @@ describe('QuickPayRoute.vue', () => {
     });
   });
 
-  describe('transfer action', () => {
-    test('displays no header', () => {
-      const wrapper = createWrapper(optionsForStraightTransfer);
-      const header = wrapper.find('.quick-pay__action__header');
+  describe('direct transfer', () => {
+    test('displays direct transfer action if direct channel exists and has enough capacity', () => {
+      const wrapper = createWrapper(optionsForDirectTransfer);
+      const action = wrapper.findComponent(DirectTransferAction);
 
-      expect(header.exists()).toBeFalsy();
+      expect(action.exists()).toBeTruthy();
     });
 
-    test('displays action component if any channel has enough capacity', () => {
-      const wrapper = createWrapper({ ...optionsForStraightTransfer, paymentIdentifier: '501' });
-      const action = wrapper.findComponent(TransferAction);
+    test('displays no action header', () => {
+      const wrapper = createWrapper(optionsForDirectTransfer);
+      const header = wrapper.find('.quick-pay__action__header');
 
-      expect(action.exists()).toBeTruthy();
-      expect(action.html()).toContain('1'); // token amount
-      expect(action.html()).toContain('501'); // payment identifier
+      expect(header.exists()).toBeFalsy();
     });
 
-    test('displays message', () => {
-      const wrapper = createWrapper(optionsForStraightTransfer);
+    test('displays correct action message', () => {
+      const wrapper = createWrapper(optionsForDirectTransfer);
       const message = wrapper.find('.quick-pay__action__message');
 
       expect(message.exists()).toBeTruthy();
-      expect(message.html()).toContain('quick-pay.action-messages.transfer');
+      expect(message.html()).toContain('quick-pay.action-messages.direct-transfer');
     });
   });
 
-  describe('channel deposit and transfer action', () => {
-    test('displays header', () => {
-      const wrapper = createWrapper(optionsForChannelDepositAndTransfer);
-      const header = wrapper.find('.quick-pay__action__header');
+  describe('mediated transfer', () => {
+    test('displays medidation information if any channel has enough capacity but not the direct one', () => {
+      const wrapper = createWrapper(optionsForMediatedTransfer);
+      const mediationInformation = wrapper.find('.quick-pay__transfer-information__mediation');
 
-      expect(header.exists()).toBeTruthy();
-      expect(header.text()).toBe('quick-pay.action-titles.channel-deposit');
+      expect(mediationInformation.exists()).toBeTruthy();
+    });
+
+    test('initially fetches user deposit capacity', () => {
+      const getUDCCapacity = jest.fn();
+      createWrapper({ getUDCCapacity });
+
+      expect(getUDCCapacity).toHaveBeenCalledTimes(1);
+    });
+
+    test('initially fetches pathfinding service', () => {
+      const fetchServices = jest.fn().mockResolvedValue(['no-pathfinding-serivce']);
+      createWrapper({ fetchServices });
+
+      expect(fetchServices).toHaveBeenCalledTimes(1);
+    });
+
+    test('shows spinner while pathfinding service is fetched', async () => {
+      const fetchServices = jest.fn(() => new Promise(() => undefined));
+      const wrapper = createWrapper({ fetchServices, ...optionsForMediatedTransfer });
+      const spinner = wrapper.findComponent(Spinner);
+
+      expect(spinner.exists()).toBeTruthy();
+    });
+
+    test('disables get route button while pathfinding service is fetched', async () => {
+      const fetchServices = jest.fn(() => new Promise(() => undefined));
+      const wrapper = createWrapper({ fetchServices, ...optionsForMediatedTransfer });
+      const getRouteButton = wrapper.get('.quick-pay__transfer-information__mediation__button');
+
+      expect(getRouteButton.attributes('disabled')).toBeTruthy();
+    });
+
+    test('selects the first returned pathfinding service as cheapest', async () => {
+      const fetchServices = jest
+        .fn()
+        .mockResolvedValue([{ price: constants.One }, { price: constants.Two }]);
+      const wrapper = createWrapper({ fetchServices, ...optionsForMediatedTransfer });
+      const pathfindingServicePrice = wrapper.find(
+        '.quick-pay__transfer-information__mediation__pathfinding-service-price',
+      );
+
+      await flushPromises(); // Fetch services must complete.
+
+      expect(pathfindingServicePrice.exists()).toBeTruthy();
+      expect(pathfindingServicePrice.html()).toContain('1');
     });
 
-    test('displays action component if no channel has enoug capacity but there is a direct one', () => {
+    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({
-        ...optionsForChannelDepositAndTransfer,
-        tokenAmount: '5',
-        paymentIdentifier: '501',
+        getUDCCapacity,
+        fetchServices,
+        ...optionsForMediatedTransfer,
       });
+
+      await flushPromises(); // Fetch services must complete.
+
+      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-too-expensive',
+      );
+    });
+
+    test('fetches routes from cheapest pathfinding service when user click button', async () => {
+      const fetchServices = jest.fn().mockResolvedValue(['no-actual-service']);
+      const findRoutes = jest.fn();
+      const wrapper = createWrapper({
+        ...optionsForMediatedTransfer,
+        tokenAddress: '0x59105441977ecD9d805A4f5b060E34676F50F806',
+        targetAddress: '0xdA75b5Cd196C6C8292B567Fdc78B33A886ce0d80',
+        tokenAmount: '1',
+        fetchServices,
+        findRoutes,
+      });
+
+      await clickGetRoutesButton(wrapper);
+
+      expect(findRoutes).toHaveBeenCalledTimes(1);
+      expect(findRoutes).toHaveBeenLastCalledWith(
+        '0x59105441977ecD9d805A4f5b060E34676F50F806',
+        '0xdA75b5Cd196C6C8292B567Fdc78B33A886ce0d80',
+        constants.One,
+        'no-actual-service',
+      );
+    });
+
+    test('shows warning message if no route was found', async () => {
+      const findRoutes = jest.fn().mockRejectedValue(new Error('No route between nodes'));
+      const wrapper = createWrapper({ findRoutes, ...optionsForMediatedTransfer });
+
+      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-no-route',
+      );
+    });
+
+    test('selects the first returned route as cheapest', async () => {
+      const findRoutes = jest
+        .fn()
+        .mockResolvedValue([{ fee: constants.One }, { fee: constants.Two }]);
+      const wrapper = createWrapper({ findRoutes, ...optionsForMediatedTransfer });
+
+      await clickGetRoutesButton(wrapper);
+
+      const mediationFees = wrapper.find('.quick-pay__transfer-information__mediation__fees');
+      expect(mediationFees.exists()).toBeTruthy();
+      expect(mediationFees.html()).toContain('1');
+    });
+
+    test('displays mediated transfer action when a route has been found', async () => {
+      const findRoutes = jest.fn().mockResolvedValue(['no-actual-route']);
+      const wrapper = createWrapper({ findRoutes, ...optionsForMediatedTransfer });
+
+      await clickGetRoutesButton(wrapper);
+
+      const action = wrapper.findComponent(MediatedTransferAction);
+      expect(action.exists()).toBeTruthy();
+    });
+
+    test('displays no action header', async () => {
+      const findRoutes = jest.fn().mockResolvedValue(['no-actual-route']);
+      const wrapper = createWrapper({ findRoutes, ...optionsForMediatedTransfer });
+
+      await clickGetRoutesButton(wrapper);
+
+      const header = wrapper.find('.quick-pay__action__header');
+      expect(header.exists()).toBeFalsy();
+    });
+
+    test('displays correct action message', async () => {
+      const findRoutes = jest.fn().mockResolvedValue(['no-actual-route']);
+      const wrapper = createWrapper({ findRoutes, ...optionsForMediatedTransfer });
+
+      await clickGetRoutesButton(wrapper);
+
+      const message = wrapper.find('.quick-pay__action__message');
+      expect(message.exists()).toBeTruthy();
+      expect(message.html()).toContain('quick-pay.action-messages.mediated-transfer');
+    });
+  });
+
+  describe('channel deposit and transfer', () => {
+    test('displays channel deposit and transfer action if no channel has enough capacity but there is a direct one', () => {
+      const wrapper = createWrapper(optionsForChannelDepositAndTransfer);
       const action = wrapper.findComponent(ChannelDepositAndTransferAction);
 
       expect(action.exists()).toBeTruthy();
-      expect(action.html()).toContain('5');
-      expect(action.html()).toContain('501');
-      expect(action.html()).toContain('showprogressindialog');
-      expect(action.html()).toContain('quick-pay.action-titles.channel-deposit-and-transfer');
     });
 
-    test('displays message', () => {
+    test('displays correct action header', () => {
+      const wrapper = createWrapper(optionsForChannelDepositAndTransfer);
+      const header = wrapper.find('.quick-pay__action__header');
+
+      expect(header.exists()).toBeTruthy();
+      expect(header.text()).toBe('quick-pay.action-titles.channel-deposit');
+    });
+
+    test('displays correct action message', () => {
       const wrapper = createWrapper(optionsForChannelDepositAndTransfer);
       const message = wrapper.find('.quick-pay__action__message');
 
@@ -270,32 +438,23 @@ describe('QuickPayRoute.vue', () => {
     });
   });
 
-  describe('channel open and transfer action', () => {
-    test('displays header', () => {
+  describe('channel open and transfer', () => {
+    test('displays channel open and transfer action if no channel has enough capacity and there is no direct one', () => {
       const wrapper = createWrapper(optionsForChannelOpenAndTransfer);
-      const header = wrapper.find('.quick-pay__action__header');
+      const action = wrapper.findComponent(ChannelOpenAndTransferAction);
 
-      expect(header.exists()).toBeTruthy();
-      expect(header.text()).toBe('quick-pay.action-titles.channel-open');
+      expect(action.exists()).toBeTruthy();
     });
 
-    test('displays action component if no channel has enoug capacity and there is no direct one', () => {
-      const wrapper = createWrapper({
-        ...optionsForChannelOpenAndTransfer,
-        tokenAmount: '5',
-        paymentIdentifier: '501',
-      });
-      const action = wrapper.findComponent(ChannelOpenAndTransferAction);
+    test('displays correct action header', () => {
+      const wrapper = createWrapper(optionsForChannelOpenAndTransfer);
+      const header = wrapper.find('.quick-pay__action__header');
 
-      expect(action.exists()).toBeTruthy();
-      expect(action.exists()).toBeTruthy();
-      expect(action.html()).toContain('5');
-      expect(action.html()).toContain('501');
-      expect(action.html()).toContain('showprogressindialog');
-      expect(action.html()).toContain('quick-pay.action-titles.channel-open-and-transfer');
+      expect(header.exists()).toBeTruthy();
+      expect(header.text()).toBe('quick-pay.action-titles.channel-open');
     });
 
-    test('displays message', () => {
+    test('displays correct action message', () => {
       const wrapper = createWrapper(optionsForChannelOpenAndTransfer);
       const message = wrapper.find('.quick-pay__action__message');
 
@@ -304,161 +463,89 @@ describe('QuickPayRoute.vue', () => {
     });
   });
 
-  describe('action events', () => {
-    describe('redirections', () => {
-      const originalWindowLocation = global.window.location;
-      let windowReplaceSpy: jest.Mock;
-
-      beforeAll(() => {
-        windowReplaceSpy = jest.fn();
-        Reflect.deleteProperty(global.window, 'location');
-        global.window.location = {
-          ...originalWindowLocation,
-          replace: windowReplaceSpy,
-        };
-      });
+  describe('redirections after action has finished', () => {
+    const originalWindowLocation = global.window.location;
+    let windowReplaceSpy: jest.Mock;
+
+    beforeAll(() => {
+      windowReplaceSpy = jest.fn();
+      Reflect.deleteProperty(global.window, 'location');
+      global.window.location = {
+        ...originalWindowLocation,
+        replace: windowReplaceSpy,
+      };
+    });
 
-      beforeEach(() => {
-        jest.resetAllMocks();
-      });
+    beforeEach(() => {
+      jest.resetAllMocks();
+    });
 
-      afterAll(() => {
-        global.window.location = originalWindowLocation;
-      });
+    afterAll(() => {
+      global.window.location = originalWindowLocation;
+    });
 
-      test('includes payment information parameters to specified target on completed action', async () => {
-        const wrapper = createWrapper({
-          redirectTo: 'https://redirect.target',
-          paymentIdentifier: '501',
-          accountAddress: '0x3D389c9B67cA85F1de2EbeF648C54d740365c366',
-        });
-        const action = wrapper.get('.quick-pay__action__component');
-
-        action.vm.$emit('completed');
-        await wrapper.vm.$nextTick();
-
-        expect(windowReplaceSpy).toHaveBeenCalledTimes(1);
-        expect(windowReplaceSpy).toHaveBeenLastCalledWith(
-          'https://redirect.target?identifier=501&payerAddress=0x3D389c9B67cA85F1de2EbeF648C54d740365c366',
-        );
+    test('includes payment information parameters to specified target on completed action', async () => {
+      const wrapper = createWrapper({
+        redirectTo: 'https://redirect.target',
+        paymentIdentifier: '501',
+        accountAddress: '0x3D389c9B67cA85F1de2EbeF648C54d740365c366',
       });
+      const action = wrapper.get('.quick-pay__action__component');
 
-      test('shuts down raiden before redirect', async () => {
-        const disconnect = jest.fn();
-        const wrapper = createWrapper({ disconnect, redirectTo: 'https://redirect.target' });
-        const action = wrapper.get('.quick-pay__action__component');
+      action.vm.$emit('completed');
+      await wrapper.vm.$nextTick();
 
-        action.vm.$emit('completed');
-        await wrapper.vm.$nextTick();
+      expect(windowReplaceSpy).toHaveBeenCalledTimes(1);
+      expect(windowReplaceSpy).toHaveBeenLastCalledWith(
+        'https://redirect.target?identifier=501&payerAddress=0x3D389c9B67cA85F1de2EbeF648C54d740365c366',
+      );
+    });
 
-        expect(disconnect).toHaveBeenCalledTimes(1);
-      });
+    test('shuts down raiden before redirect', async () => {
+      const disconnect = jest.fn();
+      const wrapper = createWrapper({ disconnect, redirectTo: 'https://redirect.target' });
+      const action = wrapper.get('.quick-pay__action__component');
 
-      test('redirects to transfer screen of given token if no redirect target given', async () => {
-        const push = jest.fn();
-        const wrapper = createWrapper({
-          push,
-          redirectTo: '',
-          tokenAddress: '0x59105441977ecD9d805A4f5b060E34676F50F806',
-        });
-        const action = wrapper.get('.quick-pay__action__component');
-
-        action.vm.$emit('completed');
-        await wrapper.vm.$nextTick();
-
-        expect(push).toHaveBeenCalledTimes(1);
-        expect(push).toHaveBeenLastCalledWith({
-          name: RouteNames.TRANSFER,
-          params: { token: '0x59105441977ecD9d805A4f5b060E34676F50F806' },
-        });
-      });
+      action.vm.$emit('completed');
+      await wrapper.vm.$nextTick();
 
-      test('includes failed state if there is an error and the user dismisses the dialog', async () => {
-        const wrapper = createWrapper({
-          redirectTo: 'https://redirect.target',
-          paymentIdentifier: '501',
-        });
-        const action = wrapper.get('.quick-pay__action__component');
-
-        action.vm.$emit('failed', new Error());
-        action.vm.$emit('dialogClosed');
-        await wrapper.vm.$nextTick();
-
-        expect(windowReplaceSpy).toHaveBeenCalledTimes(1);
-        expect(windowReplaceSpy).toHaveBeenLastCalledWith(
-          'https://redirect.target?identifier=501&failed=true',
-        );
-      });
+      expect(disconnect).toHaveBeenCalledTimes(1);
     });
 
-    describe('failed action handling', () => {
-      test('remains same action when error is not recoverable', async () => {
-        const wrapper = createWrapper(optionsForStraightTransfer);
-        const firstAction = wrapper.getComponent(TransferAction);
-
-        const error = new Error('The requested target is offline.');
-        firstAction.vm.$emit('failed', error);
-        await wrapper.vm.$nextTick();
-
-        const secondAction = wrapper.get('.quick-pay__action__component');
-        expect(secondAction.vm).toEqual(firstAction.vm);
+    test('redirects to transfer screen of given token if no redirect target given', async () => {
+      const push = jest.fn();
+      const wrapper = createWrapper({
+        push,
+        redirectTo: '',
+        tokenAddress: '0x59105441977ecD9d805A4f5b060E34676F50F806',
       });
+      const action = wrapper.get('.quick-pay__action__component');
 
-      describe('can recover from no valid routes found error', () => {
-        test('switches to channel deposit and transfer action if there is a direct channel', async () => {
-          const wrapper = createWrapper(optionsForChannelDepositAndTransferWithTransferFirst);
-          const transferAction = wrapper.getComponent(TransferAction);
-
-          const error = new Error('No valid routes found.');
-          transferAction.vm.$emit('failed', error);
-          await wrapper.vm.$nextTick();
+      action.vm.$emit('completed');
+      await wrapper.vm.$nextTick();
 
-          const channelDepositAndTransferAction = wrapper.findComponent(
-            ChannelDepositAndTransferAction,
-          );
-          expect(channelDepositAndTransferAction.exists()).toBeTruthy();
-        });
-
-        test('switches to channel open and transfer action if there is no direct channel', async () => {
-          const wrapper = createWrapper(optionsForChannelOpenAndTransferWithTransferFirst);
-          const transferAction = wrapper.getComponent(TransferAction);
-
-          const error = new Error('No valid routes found.');
-          transferAction.vm.$emit('failed', error);
-          await wrapper.vm.$nextTick();
-
-          const channelOpenAndTransferAction = wrapper.findComponent(ChannelOpenAndTransferAction);
-          expect(channelOpenAndTransferAction.exists()).toBeTruthy();
-        });
+      expect(push).toHaveBeenCalledTimes(1);
+      expect(push).toHaveBeenLastCalledWith({
+        name: RouteNames.TRANSFER,
+        params: { token: '0x59105441977ecD9d805A4f5b060E34676F50F806' },
       });
+    });
 
-      describe('can recover from no route between nodes found error', () => {
-        test('switches to channel deposit and transfer action if there is a direct channel', async () => {
-          const wrapper = createWrapper(optionsForChannelDepositAndTransferWithTransferFirst);
-          const transferAction = wrapper.getComponent(TransferAction);
-
-          const error = new Error('No route between nodes found.');
-          transferAction.vm.$emit('failed', error);
-          await wrapper.vm.$nextTick();
-
-          const channelDepositAndTransferAction = wrapper.findComponent(
-            ChannelDepositAndTransferAction,
-          );
-          expect(channelDepositAndTransferAction.exists()).toBeTruthy();
-        });
-
-        test('switches to channel open and transfer action if there is no direct channel', async () => {
-          const wrapper = createWrapper(optionsForChannelOpenAndTransferWithTransferFirst);
-          const transferAction = wrapper.getComponent(TransferAction);
+    test('includes failed state if there is an error and the user dismisses the dialog', async () => {
+      const wrapper = createWrapper({
+        redirectTo: 'https://redirect.target',
+        paymentIdentifier: '501',
+      });
+      const action = wrapper.get('.quick-pay__action__component');
 
-          const error = new Error('No route between nodes found.');
-          transferAction.vm.$emit('failed', error);
-          await wrapper.vm.$nextTick();
+      action.vm.$emit('failed', new Error());
+      action.vm.$emit('dialogClosed');
+      await wrapper.vm.$nextTick();
 
-          const channelOpenAndTransferAction = wrapper.findComponent(ChannelOpenAndTransferAction);
-          expect(channelOpenAndTransferAction.exists()).toBeTruthy();
-        });
-      });
+      expect(windowReplaceSpy).toHaveBeenCalledTimes(1);
+      expect(windowReplaceSpy).toHaveBeenLastCalledWith(
+        'https://redirect.target?identifier=501&failed=true',
+      );
     });
   });
 });