deps: dapp: fix vue-property-decorator issues with TS@4.3

See microsoft/TypeScript#44449 (comment)
raiden-network · Aug 6, 2021 · e306ee0 · e306ee0
1 parent e5fcc6e
commit e306ee0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/raiden-dapp/src/components/AmountInput.vue b/raiden-dapp/src/components/AmountInput.vue
@@ -58,16 +58,24 @@ export default class AmountInput extends Vue {
   private static numericRegex = /^\d*[.]?\d*$/;
 
   readonly rules: InputValidationRule[] = [
-    (value) => !!value || '',
-    (value) =>
-      !Number.isNaN(Number(value)) || (this.$parent.$t('amount-input.error.invalid') as string),
-    (value) =>
-      !this.limit ||
-      (value && this.noDecimalOverflow(value)) ||
-      (this.$parent.$t('amount-input.error.too-many-decimals', {
-        decimals: this.token!.decimals,
-      }) as string),
-    (value) => {
+    function (this: AmountInput, value) {
+      return !!value || '';
+    },
+    function (this: AmountInput, value) {
+      return (
+        !Number.isNaN(Number(value)) || (this.$parent.$t('amount-input.error.invalid') as string)
+      );
+    },
+    function (this: AmountInput, value) {
+      return (
+        !this.limit ||
+        (value && this.noDecimalOverflow(value)) ||
+        (this.$parent.$t('amount-input.error.too-many-decimals', {
+          decimals: this.token!.decimals,
+        }) as string)
+      );
+    },
+    function (this: AmountInput, value) {
       let parsedAmount;
       try {
         parsedAmount = BalanceUtils.parse(value, this.token!.decimals!);
@@ -78,18 +86,21 @@ export default class AmountInput extends Vue {
         (this.$parent.$t('amount-input.error.zero') as string)
       );
     },
-    (value) =>
-      !this.limit ||
-      (value && this.hasEnoughBalance(value, this.max)) ||
-      (this.$parent.$t('amount-input.error.not-enough-funds', {
-        funds: BalanceUtils.toUnits(this.max, this.token!.decimals ?? 18),
-        symbol: this.token!.symbol,
-      }) as string),
+    function (this: AmountInput, value) {
+      return (
+        !this.limit ||
+        (value && this.hasEnoughBalance(value, this.max)) ||
+        (this.$parent.$t('amount-input.error.not-enough-funds', {
+          funds: BalanceUtils.toUnits(this.max, this.token!.decimals ?? 18),
+          symbol: this.token!.symbol,
+        }) as string)
+      );
+    },
   ];
 
   get errorMessages(): string[] {
     return this.rules
-      .map((rule) => rule(this.value))
+      .map((rule) => rule.call(this, this.value))
       .filter((res) => {
         return res !== true;
       }) as string[];
@@ -98,7 +109,7 @@ export default class AmountInput extends Vue {
   private noDecimalOverflow(v: string) {
     return (
       AmountInput.numericRegex.test(v) &&
-      !BalanceUtils.decimalsOverflow(v, this.token!.decimals ?? 18)
+      !BalanceUtils.decimalsOverflow(v, this.token?.decimals ?? 18)
     );
   }
 

diff --git a/raiden-dapp/src/components/TextInputWithToggle.vue b/raiden-dapp/src/components/TextInputWithToggle.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import { Component, ModelSync, Prop, Vue } from 'vue-property-decorator';
 
-@Component
+@Component({})
 export default class TextInputWithToggle extends Vue {
   @ModelSync('value', 'input', { type: String })
   readonly syncedValue!: string;
@@ -43,6 +43,8 @@ export default class TextInputWithToggle extends Vue {
   created(): void {
     if (this.optional && this.syncedValue.length > 0) {
       this.disabled = false;
+    } else {
+      this.disabled = this.optional;
     }
   }
 }

diff --git a/raiden-dapp/tsconfig.json b/raiden-dapp/tsconfig.json
@@ -7,6 +7,7 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,