From 6a7f9927f0b5bb9ba3ac08134066b4d46add5319 Mon Sep 17 00:00:00 2001
From: Sam <samuv.eth@gmail.com>
Date: Wed, 24 Jan 2024 21:42:35 +0700
Subject: [PATCH] Fix time left

---
 .eslintrc-auto-import.json                 |  3 ++-
 src/components/SpaceProposalBoostClaim.vue | 28 +++++++++++++++++-----
 src/components/SpaceProposalBoostItem.vue  |  4 +++-
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 67d443fea13..865250957c2 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -123,6 +123,7 @@
     "useBalances": true,
     "useAccount": true,
     "useNetwork": true,
-    "usePayment": true
+    "usePayment": true,
+    "useChangeNetwork": true
   }
 }
diff --git a/src/components/SpaceProposalBoostClaim.vue b/src/components/SpaceProposalBoostClaim.vue
index de575aa9449..f1783122646 100644
--- a/src/components/SpaceProposalBoostClaim.vue
+++ b/src/components/SpaceProposalBoostClaim.vue
@@ -167,6 +167,11 @@ async function loadVouchers(boosts: BoostSubgraph[]) {
     console.error('Get vouchers error:', e);
   }
 }
+
+const timeLeftToClaim = computed(() => {
+  if (!unclaimedBoosts.value.length) return 0;
+  return Number(unclaimedBoosts.value[0].end) - Math.floor(Date.now() / 1000);
+});
 </script>
 
 <template>
@@ -200,7 +205,12 @@ async function loadVouchers(boosts: BoostSubgraph[]) {
         <TuneButton
           variant="white"
           class="text-white"
-          @click="!loadingRewards && (claimModalOpen = true)"
+          :class="{
+            'cursor-not-allowed': loadingRewards || timeLeftToClaim <= 0
+          }"
+          @click="
+            !loadingRewards && timeLeftToClaim > 0 && (claimModalOpen = true)
+          "
         >
           <TuneLoadingSpinner v-if="loadingRewards" class="text-white" />
           <div v-else class="flex items-center">
@@ -211,12 +221,18 @@ async function loadVouchers(boosts: BoostSubgraph[]) {
         </TuneButton>
       </div>
       <div
-        v-if="boosts.length"
-        class="flex text-white justify-center items-center mt-2"
+        v-if="eligibleBoosts.length"
+        class="flex text-white justify-center mt-2"
       >
-        <i-ho-clock class="mr-1 text-sm" />
-        {{ formatDuration(Number(boosts[0].end) - Number(boosts[0].start)) }}
-        left
+        <span v-if="timeLeftToClaim > 0" class="flex items-center">
+          <i-ho-clock class="mr-1 text-sm" />
+          {{ formatDuration(timeLeftToClaim) }}
+          left
+        </span>
+        <span v-else class="flex items-center">
+          <i-ho-exclamation-circle class="mr-1 text-sm" />
+          Claiming period ended
+        </span>
       </div>
     </TuneBlock>
     <ModalTransactionStatus
diff --git a/src/components/SpaceProposalBoostItem.vue b/src/components/SpaceProposalBoostItem.vue
index 51f70d57f65..0e6fd65b5fc 100644
--- a/src/components/SpaceProposalBoostItem.vue
+++ b/src/components/SpaceProposalBoostItem.vue
@@ -205,7 +205,9 @@ async function withdraw(boost: BoostSubgraph) {
         <div class="mt-[2px] md:mt-0">
           Withdrawable in:
           <span class="text-skin-heading">
-            {{ formatDuration(Number(boost.end) - Number(boost.start)) }}
+            {{
+              formatDuration(Number(boost.end) - Math.floor(Date.now() / 1000))
+            }}
           </span>
         </div>
       </div>