From d73f29c29be04ad81fc6b9316bfee1ff4a71bb7b Mon Sep 17 00:00:00 2001
From: Azmi TOUIL <42934070+AzmiTouil@users.noreply.github.com>
Date: Fri, 11 Oct 2024 16:19:20 +0200
Subject: [PATCH] feat: Disable reward button when not enough meeds - MEED-7597
 - Meeds-io/MIPs#154 (#589)

Disable reward button when admin wallet has not enough Meeds or has less
than 1 Gas Token
---
 .../wallet-reward/components/RewardApp.vue    | 27 ++++++++--
 .../components/reward/CurrentBalance.vue      | 52 +++++--------------
 .../components/reward/RewardDetails.vue       | 38 ++++++++++++--
 .../components/reward/RewardDetailsItem.vue   |  6 ++-
 4 files changed, 76 insertions(+), 47 deletions(-)

diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/RewardApp.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/RewardApp.vue
index 3241543f5..7cf83ca34 100644
--- a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/RewardApp.vue
+++ b/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>
diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/CurrentBalance.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/CurrentBalance.vue
index 0034bae04..8f855d002 100644
--- a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/CurrentBalance.vue
+++ b/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,6 +105,18 @@ 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,
@@ -112,11 +124,7 @@ export default {
   },
   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>
\ No newline at end of file
diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardDetails.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardDetails.vue
index 52f5e600d..c42aae1e1 100644
--- a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardDetails.vue
+++ b/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: {
diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardDetailsItem.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardDetailsItem.vue
index 683ab9150..abd3adbdf 100644
--- a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/RewardDetailsItem.vue
+++ b/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;