Feature/dapp quick pay show additional costs

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>

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

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;

raiden-dapp/src/components/channels/ChannelOpenAndTransferAction.vue

@@ -1,13 +1,18 @@
 <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';
 
 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;

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>

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>

raiden-dapp/src/components/transfer/TransferAction.vue → 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;