fix: error system

Author: alexiscolin

src/components/faucet/FaucetDetail.vue

@@ -62,9 +62,9 @@ const requestFaucet = async (address: string, amount: number, secret: string) =>
   const minTimer = new Promise((resolve) => setTimeout(resolve, 2000))
 
   const displayError = (e: string) => {
-    store.status = 'error'
     error.value = e
-    store.contentStep = 0
+    store.status = 'error'
+
     console.error(e)
   }
   try {
@@ -75,22 +75,22 @@ const requestFaucet = async (address: string, amount: number, secret: string) =>
       },
       body: JSON.stringify({
         to: address,
-        amount: amount * 1000000 + 'ugnot',
+        amount: amount * 1000000 + 'ugnot', //TODO: need to be dynamyc if different token
         captcha: secret,
       }),
     })
 
     await minTimer
     const faucetResponse = await response.json()
 
-    store.status = !faucetResponse.result ? 'error' : 'success'
+    store.status = response.status !== 200 || faucetResponse.error ? 'error' : 'success'
 
     // Check the faucet response
-    if (!response.ok || store.status === 'error') {
-      displayError(faucetResponse.error.message)
-    } else {
+    if (response.status === 200 && store.status === 'success') {
       store.status = 'success'
       txLink.value = faucetResponse.result ?? '' //TODO: get tx link
+    } else {
+      displayError(faucetResponse.error)
     }
   } catch (e) {
     await minTimer
@@ -143,9 +143,20 @@ watch(
           toggleLoader(false)
           setPopupHeight()
 
-          gsap.to('.js-faucetform', {
-            autoAlpha: 1,
-            duration: 0.5,
+          gsap.to('.js-faucetpending', {
+            autoAlpha: 0,
+            duration: 0.6,
+            onComplete: () => {
+              store.contentStep = 0
+              popupHeight.from = popupHeight.to
+              gsap.set(DOMpopup.value, { height: 'auto' })
+
+              gsap.to('.js-faucetform', {
+                autoAlpha: 1,
+                duration: 0.5,
+              })
+              gsap.set('.js-faucetpending', { autoAlpha: 1 })
+            },
           })
           break
 

src/components/faucet/content/FaucetContentForm.vue

@@ -4,7 +4,7 @@
     <form class="w-full space-y-7 md:space-y-12" @submit.prevent="isAddressValid && captchaValid && requestFaucet()">
       <Input :label="'Enter your wallet address'" :placeholder="'e.g. g1juwee0ynsdvaukvxk3j5s4cl6nn24uxwlydxrl'" v-model="bindAddress" required />
       <Select v-if="store.selectedFaucet.amounts" :label="'Select faucet amount'" :options="options" @update="(option) => SelectAmount(option)" />
-      <Recaptcha @validation="captchaValidation" :captchakey="store.selectedFaucet.recaptcha" />
+      <Recaptcha :key="store.status" @validation="captchaValidation" :captchakey="store.selectedFaucet.recaptcha" />
       <div>
         <div class="flex flex-col md:flex-row gap-4">
           <Button text="Cancel" variant="outline" @click.prevent="() => closePopup()" class="w-full" />