disable button when fee is fetching (#223)

Co-authored-by: Stefan Popov <[email protected]>
sora-xor · Apr 28, 2021 · be685a4 · be685a4
1 parent 4e2672d
commit be685a4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/store/rewards.ts b/src/store/rewards.ts
@@ -27,6 +27,7 @@ const types = flow(
 
 interface RewardsState {
   fee: CodecString;
+  feeFetching: boolean;
   rewards: Array<RewardInfo>;
   rewardsFetching: boolean;
   rewardsClaiming: boolean;
@@ -40,6 +41,7 @@ interface RewardsState {
 function initialState (): RewardsState {
   return {
     fee: '',
+    feeFetching: false,
     rewards: [],
     rewardsFetching: false,
     rewardsClaiming: false,
@@ -146,11 +148,16 @@ const mutations = {
     state.rewardsFetching = false
   },
 
-  [types.GET_FEE_REQUEST] (state: RewardsState) {},
+  [types.GET_FEE_REQUEST] (state: RewardsState) {
+    state.feeFetching = true
+  },
   [types.GET_FEE_SUCCESS] (state: RewardsState, fee: CodecString) {
     state.fee = fee
+    state.feeFetching = false
   },
-  [types.GET_FEE_FAILURE] (state: RewardsState) {}
+  [types.GET_FEE_FAILURE] (state: RewardsState) {
+    state.feeFetching = false
+  }
 }
 
 const actions = {

diff --git a/src/views/Rewards.vue b/src/views/Rewards.vue
@@ -77,6 +77,7 @@ export default class Rewards extends Mixins(WalletConnectMixin, TransactionMixin
   @Prop({ type: Boolean, default: false }) readonly parentLoading!: boolean
 
   @State(state => state.rewards.fee) fee!: CodecString
+  @State(state => state.rewards.feeFetching) feeFetching!: boolean
   @State(state => state.rewards.rewardsFetching) rewardsFetching!: boolean
   @State(state => state.rewards.rewardsClaiming) rewardsClaiming!: boolean
   @State(state => state.rewards.rewardsRecieved) rewardsRecieved!: boolean
@@ -199,11 +200,11 @@ export default class Rewards extends Mixins(WalletConnectMixin, TransactionMixin
   }
 
   get actionButtonDisabled (): boolean {
-    return this.rewardsClaiming || (this.rewardsAvailable && this.isInsufficientBalance)
+    return this.feeFetching || this.rewardsClaiming || (this.rewardsAvailable && this.isInsufficientBalance)
   }
 
   get actionButtonLoading (): boolean {
-    return this.isExternalWalletConnecting || this.rewardsFetching
+    return this.isExternalWalletConnecting || this.rewardsFetching || this.feeFetching
   }
 
   async handleAction (): Promise<void> {