ui+pool: disable buttons during account changes

Author: jamaljsr

app/src/components/pool/account/CloseAccountConfirm.tsx

@@ -57,7 +57,7 @@ const CloseAccountConfirm: React.FC = () => {
           <Button
             danger
             ghost
-            disabled={!closeAccountView.isValid}
+            disabled={!closeAccountView.isValid || closeAccountView.loading}
             onClick={closeAccountView.closeAccount}
           >
             {l('common.confirm')}

app/src/components/pool/account/FundAccountConfirm.tsx

@@ -49,7 +49,7 @@ const FundAccountConfirm: React.FC = () => {
           <Button
             primary
             ghost
-            disabled={!fundAccountView.isValid}
+            disabled={!fundAccountView.isValid || fundAccountView.loading}
             onClick={fundAccountView.fundAccount}
           >
             {l('common.confirm')}

app/src/components/pool/account/FundNewAccountConfirm.tsx

@@ -63,7 +63,7 @@ const FundNewAccountConfirm: React.FC = () => {
           <Button
             primary
             ghost
-            disabled={!fundNewAccountView.isValid}
+            disabled={!fundNewAccountView.isValid || fundNewAccountView.loading}
             onClick={fundNewAccountView.fundAccount}
           >
             {l('common.confirm')}

app/src/components/pool/account/RenewAccountConfirm.tsx

@@ -64,7 +64,7 @@ const RenewAccountConfirm: React.FC = () => {
           <Button
             primary
             ghost
-            disabled={!renewAccountView.isValid}
+            disabled={!renewAccountView.isValid || renewAccountView.loading}
             onClick={renewAccountView.renewAccount}
           >
             {l('common.confirm')}

app/src/store/views/closeAccountView.ts

@@ -10,6 +10,8 @@ export default class CloseAccountView {
   destination = '';
   satsPerVbyte = 0;
 
+  loading = false;
+
   constructor(store: Store) {
     makeAutoObservable(this, {}, { deep: false, autoBind: true });
 
@@ -55,6 +57,10 @@ export default class CloseAccountView {
     this.satsPerVbyte = satPerVbyte;
   }
 
+  setLoading(loading: boolean) {
+    this.loading = loading;
+  }
+
   //
   // Actions
   //
@@ -75,10 +81,12 @@ export default class CloseAccountView {
   async closeAccount() {
     if (!this.isValid) return;
 
+    this.setLoading(true);
     try {
       await this._store.orderStore.cancelAllOrders();
     } catch (error) {
-      this._store.appView.handleError(error, 'Unable to cancel all open orders');
+      this._store.appView.handleError(error as Error, 'Unable to cancel all open orders');
+      this.setLoading(false);
       return;
     }
 
@@ -92,5 +100,6 @@ export default class CloseAccountView {
     if (txid) {
       this.cancel();
     }
+    this.setLoading(false);
   }
 }

app/src/store/views/fundAccountView.ts

@@ -12,6 +12,8 @@ export default class FundAccountView {
   amount = 0;
   satsPerVbyte = 0;
 
+  loading = false;
+
   constructor(store: Store) {
     makeAutoObservable(this, {}, { deep: false, autoBind: true });
 
@@ -66,6 +68,10 @@ export default class FundAccountView {
     this.satsPerVbyte = satPerVbyte;
   }
 
+  setLoading(loading: boolean) {
+    this.loading = loading;
+  }
+
   //
   // Actions
   //
@@ -84,6 +90,7 @@ export default class FundAccountView {
 
   /** submits the deposit to the API and resets the form values if successful */
   async fundAccount() {
+    this.setLoading(true);
     const satsPerKWeight = this._store.api.pool.satsPerVByteToKWeight(this.satsPerVbyte);
 
     // if there is an error, it will be displayed by deposit
@@ -92,5 +99,6 @@ export default class FundAccountView {
     if (txid) {
       this.cancel();
     }
+    this.setLoading(false);
   }
 }

app/src/store/views/fundNewAccountView.ts

@@ -19,6 +19,8 @@ export default class FundNewAccountView {
   // response from quote
   minerFee = Big(0);
 
+  loading = false;
+
   constructor(store: Store) {
     makeAutoObservable(this, {}, { deep: false, autoBind: true });
 
@@ -104,6 +106,10 @@ export default class FundNewAccountView {
     this.expireBlocks = expireBlocks;
   }
 
+  setLoading(loading: boolean) {
+    this.loading = loading;
+  }
+
   //
   // Actions
   //
@@ -131,12 +137,13 @@ export default class FundNewAccountView {
 
       this._store.accountSectionView.showFundNewConfirm();
     } catch (error) {
-      this._store.appView.handleError(error, 'Unable to estimate miner fee');
+      this._store.appView.handleError(error as Error, 'Unable to estimate miner fee');
     }
   }
 
   /** submits the order to the API and resets the form values if successful */
   async fundAccount() {
+    this.setLoading(true);
     // if there is an error, it will be displayed by createAccount
     const traderKey = await this._store.accountStore.createAccount(
       this.amount,
@@ -147,5 +154,6 @@ export default class FundNewAccountView {
     if (traderKey) {
       this.cancel();
     }
+    this.setLoading(false);
   }
 }

app/src/store/views/renewAccountView.ts

@@ -12,6 +12,8 @@ export default class RenewAccountView {
   expiryBlocks = DEFAULT_EXPIRE_BLOCKS;
   satsPerVbyte = 0;
 
+  loading = false;
+
   constructor(store: Store) {
     makeAutoObservable(this, {}, { deep: false, autoBind: true });
 
@@ -55,6 +57,10 @@ export default class RenewAccountView {
     this.satsPerVbyte = satsPerVbyte;
   }
 
+  setLoading(loading: boolean) {
+    this.loading = loading;
+  }
+
   //
   // Actions
   //
@@ -75,6 +81,7 @@ export default class RenewAccountView {
   async renewAccount() {
     if (!this.isValid) return;
 
+    this.setLoading(true);
     const satsPerKWeight = this._store.api.pool.satsPerVByteToKWeight(this.satsPerVbyte);
     // if there is an error, it will be displayed by renewAccount
     const txid = await this._store.accountStore.renewAccount(
@@ -85,5 +92,6 @@ export default class RenewAccountView {
     if (txid) {
       this.cancel();
     }
+    this.setLoading(false);
   }
 }