feat: add faucet fetch

Author: alexiscolin

src/components/faucet/FaucetDetail.vue

@@ -5,7 +5,7 @@
     ref="DOMpopup"
     class="popup fixed flex flex-col items-center rounded w-[90vw] max-w-[36rem] bg-grey-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1000] justify-center text-grey-50 before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:rounded before:bg-500 before:z-min after:absolute after:top-px after:left-px after:bottom-px after:right-px after:bg-grey-500 after:rounded after:z-min"
   >
-    <div ref="DOMFaucetRequest" class="p-12">
+    <div ref="DOMFaucetRequest" class="py-12 px-20 w-full">
       <FaucetContentForm :name="store.selectedFaucet.name ?? 'Faucet'" :options="store.faucetAmount" v-show="store.contentStep === 0" class="js-faucetform opacity-100" :error="error" @requestFaucet="requestFaucet" />
       <div>
         <div ref="gnoRequestLogo" v-show="store.contentStep >= 1" class="opacity-0">
@@ -31,8 +31,7 @@ import GnoJSON from '@/assets/lottie/logo.json'
 
 import { useFaucetDetail } from '@/stores/faucetDetail'
 
-// import { req } from '@/data/mockedRequest'
-import { Status, Request, FaucetResponse } from '@/types'
+import { Request, FaucetResponse } from '@/types'
 
 const txLink = ref('')
 
@@ -44,7 +43,7 @@ const DOMFaucetRequest = ref<HTMLElement | null>(null)
 const gnoRequestLogo = ref<HTMLElement | null>(null)
 
 const popupHeight = reactive({ from: 0, to: 0 })
-const error = ref<Status | null>(null)
+const error = ref<string | null>(null)
 
 const requestFaucet = async (address: string, amount: number, secret: string) => {
   popupHeight.from = DOMpopup.value?.getBoundingClientRect().height ?? 0
@@ -60,38 +59,36 @@ const requestFaucet = async (address: string, amount: number, secret: string) =>
   })
   gsap.to(gnoRequestLogo.value, { autoAlpha: 1, delay: 0.5 })
 
-  console.log(address)
-  console.log(amount)
-  console.log(secret)
-
-  const opt: Request = {
-    to: address,
-    amount: amount.toString(),
-    captcha: secret,
-  }
+  // default
+  const minTimer = new Promise((resolve) => setTimeout(resolve, 2000))
 
   try {
-    const { data }: { data: FaucetResponse } = await axios.post(store.selectedFaucet.url, {
-      opt,
+    const response = await fetch(store.selectedFaucet.url, {
+      method: 'POST',
       headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json;charset=UTF-8',
+        'Content-Type': 'application/json',
       },
+      body: JSON.stringify({
+        to: address,
+        amount: amount.toString(),
+        captcha: secret,
+      }),
     })
 
-    console.log(data)
+    await minTimer
+    const faucetResponse = await response.json()
+
+    store.status = !faucetResponse.result ? 'error' : 'success'
 
-    //TODO: check types and error / result content
-    if (data.error) {
-      error.value = data.error
+    // Check the faucet response
+    if (!response.ok || store.status === 'error') {
+      error.value = faucetResponse.error.message
       store.contentStep = 0
-      throw new Error(data.error)
     } else {
-      store.status = 'success'
-      txLink.value = data.result ?? ''
+      txLink.value = faucetResponse.result ?? ''
     }
   } catch (e) {
-    console.error('error ' + e)
+    console.log('error :' + e)
   }
 }
 

src/components/faucet/content/FaucetContentForm.vue

@@ -2,15 +2,15 @@
   <div>
     <h2 class="text-600 mb-12">{{ name }}</h2>
     <form class="w-full space-y-12" @submit.prevent="requestFaucet">
-      <Input :label="'Enter your wallet address'" :placeholder="'e.g. g1juwee0ynsdvaukvxk3j5s4cl6nn24uxwlydxrl'" v-model="bindAddress" />
+      <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" />
       <div>
         <div class="flex gap-4">
-          <Button text="Request drip" class="w-full" type="submit" />
           <Button text="Cancel" variant="outline" @click.prevent="() => closePopup()" class="w-full" />
+          <Button text="Request drip" class="w-full" type="submit" :disabled="captchaValid === false || bindAddress === ''" />
         </div>
-        <div v-if="error" class="text-center text-red-200 mt-6">{{ errorDetail[error] }}</div>
+        <div v-if="error" class="text-center text-red-200 mt-6">{{ error }}</div>
       </div>
     </form>
   </div>
@@ -27,14 +27,14 @@ import Recaptcha from '@/components/ui/Recaptcha.vue'
 import { useFaucetDetail } from '@/stores/faucetDetail'
 
 import { SelectOption } from '@/components/ui/Select.vue'
-import { Status, Faucet } from '@/types'
+import { Faucet } from '@/types'
 
 type Props = {
   name: Faucet['name']
   options: SelectOption[]
-  error?: Status | null
+  error?: string | null
 }
-const props = defineProps<Props>()
+defineProps<Props>()
 const store = useFaucetDetail()
 
 const bindAddress = ref('')
@@ -54,15 +54,8 @@ const closePopup = () => store.popupToggle()
 
 const emit = defineEmits(['requestFaucet'])
 
-const errorDetail = {
-  FAIL: 'Request failed',
-  EMPTY: 'Not sufficient tokens available on this network. Try lowering the requested amount or try again later.',
-  INVALID_ADDRESS: 'Invalid wallet address',
-  BUSY_FAUCET: 'Too many requests',
-}
-
 const requestFaucet = () => {
-  if (captchaValid.value === false) return
+  if (captchaValid.value === false || bindAddress.value === '') return
   emit('requestFaucet', bindAddress.value, store.selectedFaucet.amounts && amount.value?.value, captchaSecret.value)
 }
 </script>

src/components/ui/Button.vue

@@ -1,16 +1,16 @@
 <template>
-  <button class="p-4 rounded border border-light ease-in-out duration-300" :class="css[variant]">
-    {{ text }}
-  </button>
+  <button class="p-4 rounded border border-light ease-in-out duration-300" :class="[css[variant], disabled && ['bg-grey-100 border-grey-100 hover:bg-grey-100 hover:!border-grey-100 hover:cursor-not-allowed']]">{{ text }}</button>
 </template>
 
 <script setup lang="ts">
 type Props = {
   text: string
   variant?: 'default' | 'outline'
+  disabled?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
+  disabled: false,
 })
 
 const css = {

src/types/index.ts

@@ -1,6 +1,5 @@
 export type RequestStatus = 'pending' | 'success' | 'error' | 'null'
 
-export type Status = 'FAIL' | 'EMPTY' | 'INVALID_ADDRESS' | 'BUSY_FAUCET' | undefined
 export type Code = 'success' | 'error'
 
 export interface Faucet {
@@ -20,5 +19,5 @@ export interface Request {
 
 export interface FaucetResponse {
   result: string //json: "result
-  error: Status //json: error,omitempty
+  error: string //json: error,omitempty
 }