feat: Disable reward button when not enough meeds - MEED-7597 - Meeds-io/MIPs#154

wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/RewardApp.vue

@@ -29,7 +29,12 @@
           class="d-flex flex-column justify-space-between"
           width="40%"
           flat>
-          <wallet-current-balance :loading="loading" :reward-settings="rewardSettings" />
+          <wallet-current-balance
+            :loading="loading"
+            :reward-settings="rewardSettings"
+            :configured-budget="configuredBudget"
+            :admin-wallet="adminWallet"
+            :contract-details="contractDetails" />
           <extension-registry-components
             name="WalletRewardingCard"
             type="wallet-reward-cards-extensions" />
@@ -58,6 +63,8 @@
         :reward-report="selectedRewardReport"
         :transaction-ether-scan-link="transactionEtherScanLink"
         :contract-details="contractDetails"
+        :admin-wallet="adminWallet"
+        :configured-budget="configuredBudget"
         @reward-report-updated="rewardReportUpdated"
         @back="showRewardDetails = false" />
     </template>
@@ -77,7 +84,9 @@ export default {
     rewardsPage: 0,
     rewardsPageSize: 12,
     transactionEtherScanLink: null,
-    contractDetails: null
+    contractDetails: null,
+    distributionForecast: null,
+    adminWallet: null,
   }),
   computed: {
     rewardReport() {
@@ -89,6 +98,9 @@ export default {
     selectedDate() {
       return this.rewardPeriod?.startDate.substring(0, 10) || new Date().toISOString().substring(0, 10);
     },
+    configuredBudget() {
+      return this.distributionForecast?.budget;
+    },
   },
   created() {
     this.init()
@@ -106,7 +118,9 @@ export default {
       return this.walletUtils.initSettings(false, true, true)
         .then(() => {
           this.contractDetails = window.walletSettings.contractDetail;
+          return this.addressRegistry.searchWalletByTypeAndId('admin', 'admin');
         })
+        .then((adminWallet) => this.adminWallet = adminWallet)
         .then(() => this.walletUtils.initWeb3(false, true))
         .then(() => {
           if (this.contractDetails) {
@@ -129,6 +143,7 @@ export default {
           this.rewardSettings = settings || {};
         })
         .then(() => this.refreshRewards())
+        .then(() => this.computeDistributionForecast())
         .finally(() => this.loading = false);
     },
     refreshRewards(period) {
@@ -167,7 +182,13 @@ export default {
       if (index !== -1) {
         this.rewardReports[index] = rewardReport;
       }
-    }
+    },
+    computeDistributionForecast() {
+      return this.$rewardService.computeDistributionForecast(this.rewardSettings)
+        .then(distributionForecast => {
+          this.distributionForecast = distributionForecast;
+        });
+    },
   },
 };
 </script>

wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/CurrentBalance.vue

@@ -20,7 +20,7 @@
 -->
 <template>
   <v-card
-    :loading="loading || loadingWallet"
+    :loading="loading"
     class="border-radius border-color ma-5 mb-2"
     flat>
     <div class="d-flex flex-column flex-grow-1">
@@ -105,18 +105,26 @@ export default {
       type: Object,
       default: null
     },
+    adminWallet: {
+      type: Object,
+      default: null
+    },
+    contractDetails: {
+      type: Object,
+      default: null
+    },
+    configuredBudget: {
+      type: Number,
+      default: 0
+    },
     loading: {
       type: Boolean,
       default: false,
     },
   },
   data () {
     return {
-      loadingWallet: false,
-      adminWallet: null,
-      contractDetails: null,
       walletAdminUri: '/portal/administration/home/rewards/wallet',
-      configuredBudget: null
     };
   },
   computed: {
@@ -148,39 +156,5 @@ export default {
       return this.lowEtherBalance ? this.$t('wallet.administration.lowEtherBalance') : this.$t('wallet.administration.lowTokenBalance');
     }
   },
-  watch: {
-    rewardSettings() {
-      this.computeDistributionForecast();
-    }
-  },
-  created() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.loadingWallet = true;
-      this.error = null;
-      return this.walletUtils.initSettings(false, true)
-        .then(() => {
-          this.contractDetails = window.walletSettings.contractDetail;
-          return this.addressRegistry.searchWalletByTypeAndId('admin', 'admin');
-        })
-        .then((adminWallet) => this.adminWallet = adminWallet)
-        .then(() => {
-          this.$nextTick().then(() => {
-            this.computeDistributionForecast();
-          });
-        })
-        .finally(() => {
-          this.loadingWallet = false;
-        });
-    },
-    computeDistributionForecast() {
-      return this.$rewardService.computeDistributionForecast(this.rewardSettings)
-        .then(distributionForecast => {
-          this.configuredBudget = distributionForecast?.budget || 0;
-        });
-    },
-  }
 };
 </script>

wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardDetails.vue

@@ -54,19 +54,19 @@
         <div v-else-if="tokensToSend > 0 && !sendingInProgress" class="text-subtitle pe-2">{{ rewardsToSend }}</div>
         <v-tooltip
           bottom
-          :disabled="!isNotPastPeriod">
+          :disabled="!disabledSendButton">
           <template #activator="{ on }">
             <div v-on="on" class="d-inline-block">
               <v-btn
                 :loading="loadingSending"
-                :disabled="isNotPastPeriod || sendingInProgress"
+                :disabled="disabledSendButton || sendingInProgress"
                 class="btn btn-primary"
                 @click="sendRewards">
                 {{ $t('wallet.administration.rewardDetails.label.reward') }}
               </v-btn>
             </div>
           </template>
-          <span>{{ $t('wallet.administration.rewardCard.status.inPeriod') }}</span>
+          <span> {{ disabledSendButtonLabel }} </span>
         </v-tooltip>
       </template>
       <extension-registry-components
@@ -120,10 +120,18 @@ export default {
       type: Object,
       default: null
     },
+    adminWallet: {
+      type: Object,
+      default: null
+    },
     contractDetails: {
       type: Object,
       default: null
     },
+    configuredBudget: {
+      type: Number,
+      default: 0
+    },
     transactionEtherScanLink: {
       type: String,
       default: function () {
@@ -228,6 +236,30 @@ export default {
         0: this.formattedTokensToSend,
         1: this.points
       });
+    },
+    tokenBalance() {
+      return this.adminWallet?.tokenBalance || 0;
+    },
+    etherBalance() {
+      return this.adminWallet?.etherBalance || 0;
+    },
+    lowEtherBalance() {
+      return this.etherBalance < 1;
+    },
+    lowTokenBalance() {
+      return this.configuredBudget > this.tokenBalance;
+    },
+    balanceBelowBudget() {
+      return this.lowEtherBalance || this.lowTokenBalance;
+    },
+    balanceBelowBudgetLabel() {
+      return this.lowEtherBalance ? this.$t('wallet.administration.lowEtherBalance') : this.$t('wallet.administration.lowTokenBalance');
+    },
+    disabledSendButton() {
+      return this.isNotPastPeriod || this.balanceBelowBudget;
+    },
+    disabledSendButtonLabel() {
+      return this.isNotPastPeriod ? this.$t('wallet.administration.rewardCard.status.inPeriod') : this.balanceBelowBudgetLabel;
     }
   },
   methods: {

wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardDetailsItem.vue

@@ -269,8 +269,10 @@ export default {
       return this.success ? 'success' : 'error';
     },
     statusIconTitle() {
-      return this.success ? this.$t('wallet.administration.rewardDetails.successfullyProceeded') :
-        this.pending ? this.$t('wallet.administration.rewardDetails.transactionInProgress') : this.$t('wallet.administration.rewardDetails.transactionError');
+      if (this.success) {
+        return this.$t('wallet.administration.rewardDetails.successfullyProceeded');
+      }
+      return this.pending ? this.$t('wallet.administration.rewardDetails.transactionInProgress') : this.$t('wallet.administration.rewardDetails.transactionError');
     },
     amount() {
       return this.completelyProceeded ? this.reward?.tokensSent : this.reward?.amount;