feat: fetch

Author: alexiscolin

package.json

@@ -9,12 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/vue-query": "^5.28.7",
     "@vueuse/core": "^10.7.2",
+    "axios": "^1.6.8",
     "gsap": "^3.12.5",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
-    "vue-router": "^4.2.5",
     "vue-recaptcha": "2.0.3",
+    "vue-router": "^4.2.5",
     "vue3-lottie": "^3.2.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,15 +1,15 @@
 <template>
   <Card :tracker="tracker">
-    <FaucetAvailability :available="faucet.availability" class="self-end" />
+    <FaucetAvailability :available="availability" class="self-end" />
     <div class="mt-28">
-      <span class="mb-2 text-grey-100 text-50 uppercase">{{ faucet.network }}</span>
-      <h2 class="text-500 text-grey-50">{{ faucet.name }}</h2>
+      <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>
     </div>
   </Card>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 import Card from '@/components/ui/Card.vue'
 import FaucetAvailability from './FaucetAvailability.vue'
@@ -26,6 +26,9 @@ interface Props {
 
 const props = defineProps<Props>()
 
+//TODO: request to get availibility (or from props - parent req)
+const availability = ref(true)
+
 const tracker = computed(() => {
   return {
     x: props.motion?.value?.x ?? 0,

src/components/faucet/FaucetCard.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" />
@@ -22,6 +22,7 @@
 import { onMounted, ref, reactive, watch, nextTick } from 'vue'
 import { gsap } from 'gsap'
 import { Vue3Lottie } from 'vue3-lottie'
+import axios from 'axios'
 
 import FaucetContentForm from './content/FaucetContentForm.vue'
 import FaucetContentRequest from './content/FaucetContentRequest.vue'
@@ -30,8 +31,8 @@ import GnoJSON from '@/assets/lottie/logo.json'
 
 import { useFaucetDetail } from '@/stores/faucetDetail'
 
-import { req } from '@/data/mockedRequest'
-import { Status } from '@/types'
+// import { req } from '@/data/mockedRequest'
+import { Status, Request } from '@/types'
 
 const txLink = ref('')
 
@@ -59,11 +60,18 @@ const requestFaucet = async (address: string, amount: number, secret: string) =>
   })
   gsap.to(gnoRequestLogo.value, { autoAlpha: 1, delay: 0.5 })
 
-  //TODO: Request - replace fake request
+  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 res = await req('success')
   store.status = res.code
 

src/components/faucet/FaucetDetail.vue

@@ -12,19 +12,19 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { useWindowSize } from '@vueuse/core'
 
 import Carousel from '@/components/ui/Carousel.vue'
 import FaucetCard from '@/components/faucet/FaucetCard.vue'
 
 import { useMouseDelegation } from '@/composables/useMouseDelegation'
 import { useFaucetDetail } from '@/stores/faucetDetail'
 
-import { useWindowSize } from '@vueuse/core'
-
 import { Faucet } from '@/types'
 
-// TODO: Top replace with real data
-import { faucets } from '@/data/faucets.json'
+import { faucets as faucetJson } from '@/data/faucets.json'
+
+const faucets = ref(faucetJson as Faucet[])
 
 // slider & cards
 const projectCarouselEL = ref<HTMLElement | null>(null)
@@ -35,7 +35,7 @@ let isLoading = false
 
 const { width } = useWindowSize()
 
-const { motions } = useMouseDelegation(projectCarouselEL, faucets, 'ref')
+const { motions } = useMouseDelegation(projectCarouselEL, faucets.value, 'ref')
 
 const store = useFaucetDetail()
 
@@ -46,7 +46,6 @@ const openFaucet = (faucet: Faucet) => {
 
 onMounted(() => {
   window.addEventListener('load', () => {
-    // TODO: To custom with async data
     if (cards.value && cards.value?.length > 0) {
       store.DOM.cards = cards.value
       store.cardDisplay()

src/components/faucet/FaucetsList.vue

@@ -3,7 +3,7 @@
     <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">
@@ -19,8 +19,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import VueRecaptcha from 'vue-recaptcha'
-
 import Input from '@/components/ui/Input.vue'
 import Select from '@/components/ui/Select.vue'
 import Button from '@/components/ui/Button.vue'
@@ -29,14 +27,14 @@ import Recaptcha from '@/components/ui/Recaptcha.vue'
 import { useFaucetDetail } from '@/stores/faucetDetail'
 
 import { SelectOption } from '@/components/ui/Select.vue'
-import { Status } from '@/types'
+import { Status, Faucet } from '@/types'
 
 type Props = {
-  name: string
+  name: Faucet['Name']
   options: SelectOption[]
   error?: Status | null
 }
-defineProps<Props>()
+const props = defineProps<Props>()
 const store = useFaucetDetail()
 
 const bindAddress = ref('')
@@ -65,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>