Cancel fee calculation on input (#1239)

app/config.js

@@ -32,6 +32,6 @@ export default {
     }
   },
   forms: {
-    FORM_VALIDATION_DEBOUNCE_WAIT: 250
+    FORM_VALIDATION_DEBOUNCE_WAIT: 500
   },
 };

app/stores/ada/AdaTransactionBuilderStore.js

@@ -45,8 +45,7 @@ export default class AdaTransactionBuilderStore extends Store {
 
   setup(): void {
     super.setup();
-    this._preWaitReset();
-    this._postWaitReset();
+    this._reset();
     const actions = this.actions.ada.txBuilderActions;
     actions.updateReceiver.listen(this._updateReceiver);
     actions.updateAmount.listen(this._updateAmount);
@@ -136,8 +135,7 @@ export default class AdaTransactionBuilderStore extends Store {
       // need to recalculate when there are no more pending transactions
       this.stores.substores.ada.transactions.hasAnyPending,
     ],
-    // $FlowFixMe error in mobx types
-    async () => await this._updateTxBuilder(),
+    () => this._updateTxBuilder(),
   )
 
   _canCompute(): boolean {
@@ -157,7 +155,7 @@ export default class AdaTransactionBuilderStore extends Store {
    * Note: need to check state outside of runInAction
    * Otherwise reaction won't trigger
    */
-  _updateTxBuilder = async (): Promise<void> => {
+  _updateTxBuilder = (): void => {
     runInAction(() => {
       this.createUnsignedTx.reset();
       this.plannedTx = null;
@@ -176,9 +174,8 @@ export default class AdaTransactionBuilderStore extends Store {
       : '0'; // value is not relevant in sendall case
     const shouldSendAll = this.shouldSendAll;
 
-    if (this.createUnsignedTx.promise) {
-      // eslint-disable-next-line no-unused-vars
-      await this.createUnsignedTx.promise.catch(err => { /* do nothing */ });
+    if (this.createUnsignedTx.isExecuting) {
+      this.createUnsignedTx.cancel();
     }
 
     const withUtxos = asGetAllUtxos(publicDeriver.self);
@@ -229,34 +226,15 @@ export default class AdaTransactionBuilderStore extends Store {
   }
 
   @action
-  _preWaitReset = () => {
-    // resets that have to happen BEFORE waiting for createUnsignedTx to finish
+  _reset = () => {
     this.plannedTxInfo = [{ address: undefined, value: undefined }];
     this.shouldSendAll = false;
-  }
-  @action
-  _postWaitReset = () => {
-    // resets that have to happen AFTER waiting for createUnsignedTx to finish
+    this.createUnsignedTx.cancel();
     this.createUnsignedTx.reset();
     this.plannedTx = null;
     this.tentativeTx = null;
   }
 
-  @action
-  _reset = async () => {
-    this._preWaitReset();
-
-    // creation of unsigned tx may still be running when we try and reset
-    // we need to wait for it to finish then clear the result since we can't cancel the promise
-    try {
-      await this.createUnsignedTx.promise;
-    } catch (err) {
-      // ignore
-    }
-
-    this._postWaitReset();
-  }
-
   // =======================================
   //   logic to handle confirmation screen
   // =======================================

app/stores/lib/CachedRequest.js

@@ -41,10 +41,18 @@ export default class CachedRequest<
       }
     }), 0);
 
+    const executionId = Math.random();
+    this.currentlyExecuting.add(executionId);
     // Issue api call & save it as promise that is handled to update the results of the operation
     this.promise = new Promise((resolve, reject) => {
       this._method(...callArgs)
         .then((result) => {
+          if (this.currentlyExecuting.has(executionId)) {
+            this.currentlyExecuting.delete(executionId);
+          } else {
+            resolve(result);
+            return;
+          }
           setTimeout(action(() => {
             this.result = result;
             if (this._currentApiCall) this._currentApiCall.result = result;
@@ -57,6 +65,12 @@ export default class CachedRequest<
           return result;
         })
         .catch(action((error) => {
+          if (this.currentlyExecuting.has(executionId)) {
+            this.currentlyExecuting.delete(executionId);
+          } else {
+            reject(error);
+            return;
+          }
           setTimeout(action(() => {
             this.error = error;
             this.isExecuting = false;

app/stores/lib/Request.js

@@ -29,6 +29,7 @@ export default class Request<Func: (...args: any) => Promise<any>, Err> {
   @observable isError: boolean = false;
   @observable wasExecuted: boolean = false;
 
+  currentlyExecuting: Set<number> = new Set();
   promise: ?Promise<PromisslessReturnType<Func>> = null;
 
   _method: Func;
@@ -49,13 +50,21 @@ export default class Request<Func: (...args: any) => Promise<any>, Err> {
       this.isExecuting = true;
     }), 0);
 
+    const executionId = Math.random();
+    this.currentlyExecuting.add(executionId);
     // Issue api call & save it as promise that is handled to update the results of the operation
     this.promise = new Promise((resolve, reject) => {
       if (!this._method) {
         reject(new ApiMethodNotYetImplementedError());
       }
       this._method(...callArgs)
         .then((result) => {
+          if (this.currentlyExecuting.has(executionId)) {
+            this.currentlyExecuting.delete(executionId);
+          } else {
+            resolve(result);
+            return;
+          }
           setTimeout(action('Request::execute/then', () => {
             if (this.result != null && isObservableArray(this.result) && Array.isArray(result)) {
               this.result.replace(result);
@@ -73,6 +82,12 @@ export default class Request<Func: (...args: any) => Promise<any>, Err> {
           return result;
         })
         .catch(action('Request::execute/catch', (error) => {
+          if (this.currentlyExecuting.has(executionId)) {
+            this.currentlyExecuting.delete(executionId);
+          } else {
+            reject(error);
+            return;
+          }
           setTimeout(action(() => {
             this.error = error;
             this.result = null;
@@ -136,6 +151,12 @@ export default class Request<Func: (...args: any) => Promise<any>, Err> {
     });
   }
 
+  @action cancel(): Request<Func, Err> {
+    this.isExecuting = false;
+    this._isWaitingForResponse = false;
+    this._currentApiCall = null;
+    return this;
+  }
   @action reset(): Request<Func, Err> {
     this.result = null;
     this.error = null;