#ATOR-306: Visualize Redeem Processing Steps (#33)

* Prepere for hardhat * Refactor useFacilitatorStore to check for positive alocatedTokens in hasClaimableRewards * add redeem rewards progress * revert commit prepare for hardhat * update Uprogress component --------- Co-authored-by: Sapozhnyk Dmytro <[email protected]>
anyone-protocol · Jun 10, 2024 · 770a0e8 · 770a0e8
1 parent 29704a1
commit 770a0e8
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 19 deletions.
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -79,4 +79,8 @@
 
 body {
   font-family: "Inter", sans-serif;
+}
+
+progress {
+  border: 2px solid rgb(6 182 212) !important;
 }
diff --git a/composables/facilitator/index.ts b/composables/facilitator/index.ts
@@ -15,6 +15,7 @@ import { saveRedeemProcessSessionStorage } from '@/utils/redeemSessionStorage';
 import { useDistribution } from '../distribution';
 
 const runtimeConfig = useRuntimeConfig();
+const contactSupportLink = runtimeConfig.public.githubNewIssueUrl;
 
 export const FACILITATOR_EVENTS = {
   AllocationUpdated: 'AllocationUpdated',
@@ -282,14 +283,54 @@ export class Facilitator {
       const to = await this.contract.getAddress();
       const result = await this.signer.sendTransaction({ to, value });
       await result.wait();
+      toast.add({
+        icon: 'i-heroicons-check-circle',
+        color: 'primary',
+        title: 'Request Accepted',
+        description: `Your request was accepted. Now is going to be processed.`,
+        actions: [
+          {
+            label: 'Copy transaction hash',
+            click: () => {
+              navigator.clipboard.writeText(result.hash);
+            },
+          },
+        ],
+      });
       const block = await result.getBlock();
       const timestamp = block?.timestamp || Math.floor(Date.now() / 1000);
       useFacilitatorStore().addPendingClaim(result.hash, timestamp);
 
       return result;
     } catch (error) {
       const msg = (error as Error)?.message;
-
+      if (msg.includes('send ETH to contract address to refill')) {
+        toast.add({
+          icon: 'i-heroicons-exclamation-circle',
+          color: 'red',
+          title: 'Accepting Request Failed',
+          description: `Request failed to be send for processing. Please try again. \n  
+          If need guidance or have any questions Contact Support.`,
+          timeout: 0,
+          actions: [
+            {
+              label: 'Contact Support',
+              click: () => {
+                window.open(contactSupportLink, '_blank');
+              },
+            },
+          ],
+        });
+      }
+      if (msg.includes('insufficient funds')) {
+        toast.add({
+          icon: 'i-heroicons-x-circle',
+          color: 'amber',
+          title: 'Insufficient Balance',
+          description: `Your current balance is not enough to complete the transaction. \n
+          Please ensure your wallet has enough ETH to cover the transaction fee and try again.`,
+        });
+      }
       if (!msg.includes('User denied transaction signature.')) {
         toast.add({
           icon: 'i-heroicons-x-circle',

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -53,6 +53,8 @@ export default defineNuxtConfig({
       distributionContract: 'GeyCU06plVtWiudHxgXIu4863wwRByBmsP5AMBdhyj4',
       metricsDeployer: 'x0cuVieEDTFjtxI5m5i22u2IMr-WpBiTS-Vir8U3dbw',
       warpGateway: 'https://gw.warp.cc/gateway/v2',
+      githubNewIssueUrl:
+        'https://github.com/ATOR-Development/ator-dashboard/issues/new',
     },
   },
 });
diff --git a/pages/index.vue b/pages/index.vue
@@ -7,20 +7,27 @@ import { formatEther } from 'ethers';
 import { useAccount } from 'use-wagmi';
 import { config } from '@/config/wagmi.config';
 import { useFacilitatorStore } from '@/stores/useFacilitatorStore';
+import { useMetricsStore } from '@/stores/useMetricsStore';
 
 import Card from '@/components/ui-kit/Card.vue';
 import Ticker from '@/components/ui-kit/Ticker.vue';
 import Button from '@/components/ui-kit/Button.vue';
 import { useFacilitator } from '@/composables/facilitator';
+
 import { getRedeemProcessSessionStorage } from '@/utils/redeemSessionStorage';
 import { initDistribution, useDistribution } from '@/composables/distribution';
-// import { useMetricsStore } from '@/stores/useMetricsStore';
+
+import type { ClaimProcess } from '~/types/facilitator';
+
 
 const userStore = useUserStore();
 const facilitatorStore = useFacilitatorStore();
 const { address } = storeToRefs(userStore);
 const { isConnected } = useAccount({ config });
+const facilitator = useFacilitator();
 const isRedeemLoading = ref(false);
+const progressLoading = ref(0);
+
 const toast = useToast();
 
 // Initialize data fetch and cache
@@ -59,7 +66,7 @@ initDistribution();
 
 watch(
   () => userStore.userData.address,
-  async (newAddress) => {
+  async (newAddress?: string) => {
     facilitatorStore.pendingClaim = getRedeemProcessSessionStorage(newAddress);
     const facilitator = useFacilitator();
     await facilitator?.refresh();
@@ -68,8 +75,17 @@ watch(
   }
 );
 
+watch(
+  () => facilitatorStore.pendingClaim,
+  (updatedPendingClaim: ClaimProcess | null) => {
+    progressLoading.value = updatedPendingClaim ? 2 : 0;
+  }
+);
+
 const handleClaimAllRewards = async () => {
   isRedeemLoading.value = true;
+  progressLoading.value = 1;
+
   try {
     const facilitator = useFacilitator();
     await facilitator?.claim();
@@ -83,6 +99,7 @@ const handleClaimAllRewards = async () => {
   }
 
   isRedeemLoading.value = false;
+  progressLoading.value = 0;
 };
 </script>
 
@@ -125,23 +142,40 @@ const handleClaimAllRewards = async () => {
             </div>
             <div v-if="isConnected" class="redeem flex gap-6 items-center">
               <div class="divider"></div>
-
-              <Button
-                :disabled="
-                  !facilitatorStore.hasClaimableRewards ||
-                  isRedeemLoading ||
-                  !!facilitatorStore.pendingClaim
-                "
-                @onClick="handleClaimAllRewards"
-              >
-                <span v-if="isRedeemLoading || !!facilitatorStore.pendingClaim"
-                  >Processing...</span
-                >
-                <span v-else-if="facilitatorStore.hasClaimableRewards"
-                  >Redeem Rewards</span
+              <div>
+                <Button
+                  :disabled="
+                    !facilitatorStore.hasClaimableRewards ||
+                    isRedeemLoading ||
+                    !!facilitatorStore.pendingClaim
+                  "
+                  @onClick="handleClaimAllRewards"
+                  class="mb-2"
                 >
-                <span v-else>Nothing to Redeem</span>
-              </Button>
+                  <span
+                    v-if="isRedeemLoading || !!facilitatorStore.pendingClaim"
+                    >Processing...</span
+                  >
+                  <span v-else-if="facilitatorStore.hasClaimableRewards"
+                    >Redeem Rewards</span
+                  >
+                  <span v-else>Nothing to Redeem</span>
+                </Button>
+                <div v-if="progressLoading" class="text-center">
+                  <UProgress animation="carousel">
+                    <template #indicator="{ progressLoading }">
+                      <div class="text-center">
+                        <span v-if="progressLoading === 1" class="text-xs">
+                          1 / 2 Accepting Request...
+                        </span>
+                        <span v-else class="text-xs">
+                          2 / 2 Accepting Request...
+                        </span>
+                      </div>
+                    </template>
+                  </UProgress>
+                </div>
+              </div>
             </div>
           </div>