fix: fetch

Author: alexiscolin

src/App.vue

@@ -45,7 +45,7 @@ onMounted(() => {
   <main class="js-main flex flex-col justify-between min-h-screen">
     <Header />
     <section class="px-4 md:px-14 lg:px-20 mx-auto max-w-[110rem] w-full grid grid-cols-12">
-      <h1 class="col-span-12 lg:col-span-5 font-termina text-600 md:text-700 text-center md:text-left" ref="DOMTitle">Welcome to Faucet Hub</h1>
+      <h1 class="col-span-12 lg:col-span-5 font-termina text-600 md:text-700 text-center md:text-left" ref="DOMTitle">Welcome to the Faucet Hub</h1>
       <FaucetsList />
     </section>
 

src/components/faucet/FaucetAvailability.vue

@@ -12,7 +12,7 @@ const props = defineProps<Props>()
     :class="props.available ? 'bg-green-900 before:bg-green-200' : 'bg-red-900 before:bg-red-200'"
   >
     <span :class="props.available ? 'text-green-200' : 'text-red-200'">{{
-      props.available ? 'Enough faucet' : 'Empty. Try Later'
-    }}</span>
+        props.available ? 'Available' : 'Unavailable'
+      }}</span>
   </div>
 </template>

src/components/faucet/FaucetCard.vue

@@ -1,9 +1,9 @@
 <template>
   <Card :tracker="tracker">
-    <FaucetAvailability :available="availability" class="self-end" />
+    <FaucetAvailability :available="true" class="self-end" />
     <div class="mt-28">
-      <span class="mb-2 text-grey-100 text-50 uppercase" v-if="faucet.Network">{{ faucet.Network }}</span>
-      <h2 class="text-500 text-grey-50">{{ faucet.Name }}</h2>
+      <span class="mb-2 text-grey-100 text-50 uppercase">{{ faucet.chain_id }}</span>
+      <h2 class="text-500 text-grey-50">{{ faucet.name }}</h2>
     </div>
   </Card>
 </template>

src/components/faucet/FaucetDetail.vue

@@ -6,7 +6,7 @@
     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">
-      <FaucetContentForm :name="store.selectedFaucet.Name ?? 'Faucet'" :options="store.faucetAmount" v-show="store.contentStep === 0" class="js-faucetform opacity-100" :error="error" @requestFaucet="requestFaucet" />
+      <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">
           <Vue3Lottie :animationData="GnoJSON" :loop="true" :height="200" :width="200" :autoPlay="true" />
@@ -32,7 +32,7 @@ import GnoJSON from '@/assets/lottie/logo.json'
 import { useFaucetDetail } from '@/stores/faucetDetail'
 
 // import { req } from '@/data/mockedRequest'
-import { Status, Request } from '@/types'
+import { Status, Request, FaucetResponse } from '@/types'
 
 const txLink = ref('')
 
@@ -60,26 +60,38 @@ const requestFaucet = async (address: string, amount: number, secret: string) =>
   })
   gsap.to(gnoRequestLogo.value, { autoAlpha: 1, delay: 0.5 })
 
-  const data: Request = {
-    To: address,
-    Amount: amount.toString(),
-    Captcha: secret,
-  }
-
   console.log(address)
   console.log(amount)
   console.log(secret)
 
-  await axios.get(store.selectedFaucet.URL, { data })
+  const opt: Request = {
+    to: address,
+    amount: amount.toString(),
+    captcha: secret,
+  }
 
-  const res = await req('success')
-  store.status = res.code
+  try {
+    const { data }: { data: FaucetResponse } = await axios.post(store.selectedFaucet.url, {
+      opt,
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json;charset=UTF-8',
+      },
+    })
 
-  if (store.status === 'error') {
-    error.value = res.status
-    store.contentStep = 0
-  } else {
-    txLink.value = res.txLink ?? ''
+    console.log(data)
+
+    //TODO: check types and error / result content
+    if (data.error) {
+      error.value = data.error
+      store.contentStep = 0
+      throw new Error(data.error)
+    } else {
+      store.status = 'success'
+      txLink.value = data.result ?? ''
+    }
+  } catch (e) {
+    console.error('error ' + e)
   }
 }
 

src/components/faucet/FaucetsList.vue

@@ -1,9 +1,11 @@
 <template>
   <div ref="projectCarouselEL" class="col-span-12 my-20">
     <Carousel name="Carousel">
-      <li v-for="(faucet, idx) in faucets" :key="idx" class="js-card p-4 flex-none w-full" role="group" aria-roledescription="slide">
+      <li v-for="(faucet, idx) in faucets" :key="idx" class="js-card p-4 flex-none w-full" role="group"
+          aria-roledescription="slide">
         <div ref="cards" class="translate-x-12 opacity-0 h-full" @click.prevent="openFaucet(faucet)">
-          <FaucetCard :data-ref="motions[idx].value.id" :motion="width >= 768 ? motions[idx] : undefined" :data-index="idx" :faucet="faucet" :is-loading="isLoading" />
+          <FaucetCard :data-ref="motions[idx].value.id" :motion="width >= 768 ? motions[idx] : undefined"
+                      :data-index="idx" :faucet="faucet" :is-loading="isLoading" />
         </div>
       </li>
     </Carousel>

src/components/faucet/content/FaucetContentForm.vue

@@ -3,12 +3,12 @@
     <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" />
-      <Select v-if="store.selectedFaucet.Amounts" :label="'Select faucet amount'" :options="options" @update="(option) => SelectAmount(option)" />
+      <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 Faucet" class="w-full" type="submit" />
         </div>
         <div v-if="error" class="text-center text-red-200 mt-6">{{ errorDetail[error] }}</div>
       </div>
@@ -30,7 +30,7 @@ import { SelectOption } from '@/components/ui/Select.vue'
 import { Status, Faucet } from '@/types'
 
 type Props = {
-  name: Faucet['Name']
+  name: Faucet['name']
   options: SelectOption[]
   error?: Status | null
 }
@@ -63,6 +63,6 @@ const errorDetail = {
 
 const requestFaucet = () => {
   if (captchaValid.value === false) return
-  emit('requestFaucet', bindAddress.value, store.selectedFaucet.Amounts && amount.value?.value, captchaSecret.value)
+  emit('requestFaucet', bindAddress.value, store.selectedFaucet.amounts && amount.value?.value, captchaSecret.value)
 }
 </script>

src/data/faucets.json

@@ -1,18 +1,11 @@
 {
   "faucets": [
     {
-      "Name": "Very long network name 1",
-      "Network": "network name",
-      "Amounts": [5, 10, 20],
-      "URL": "",
-      "ReCaptcha": ""
-    },
-    {
-      "Name": "Very long network name 2",
-      "Network": "network name",
-      "Token": "$GNOT",
-      "URL": "",
-      "ReCaptcha": ""
+      "name": "Gno Portal Loop",
+      "chain_id": "portal-loop",
+      "amounts": [1, 5, 10],
+      "url": "https://rpc.gno.land:443",
+      "recaptcha": "6Lc245EpAAAAAJHI6WezI7VSsy6NiKTq1I7OLlUy"
     }
   ]
 }

src/stores/faucetDetail.ts

@@ -20,8 +20,8 @@ export const useFaucetDetail = defineStore('faucetDetail', {
   }),
   getters: {
     faucetAmount: (state) =>
-      state.selectedFaucet.Amounts?.map((amount: number) => ({
-        content: `${amount} ${state.selectedFaucet.Token ?? '$GNOT'}`,
+      state.selectedFaucet.amounts?.map((amount: number) => ({
+        content: `${amount} ${state.selectedFaucet?.token ?? '$GNOT'}`,
         value: amount,
       })) ?? [{ content: '', value: 0 }],
   },

src/types/index.ts

@@ -4,21 +4,21 @@ export type Status = 'FAIL' | 'EMPTY' | 'INVALID_ADDRESS' | 'BUSY_FAUCET' | unde
 export type Code = 'success' | 'error'
 
 export interface Faucet {
-  Name: string // name of the testnet
-  Amounts?: number[] // faucet serve amounts (UI)
-  URL: string // the faucet URL
-  ReCaptcha: string // the recaptcha site key, if any
-  Network?: string // name of the network if any
-  Token?: string // token name - $GNOT by default
+  name: string // name of the testnet
+  chain_id: string // name of the testnet
+  amounts: number[] // faucet serve amounts (UI)
+  url: string // the faucet URL
+  recaptcha: string // the recaptcha site key, if any
+  token?: string // token name: default $GNOT
 }
 
 export interface Request {
-  To: string // recipient address
-  Amount: string // <AMOUNT>ugnot
-  Captcha: string
+  to: string // recipient address
+  amount: string // <AMOUNT>ugnot
+  captcha: string
 }
 
-export interface Response {
-  Result: string //json: "result
-  Error: string //json: error,omitempty
+export interface FaucetResponse {
+  result: string //json: "result
+  error: Status //json: error,omitempty
 }