Merge pull request #8 from gnolang/feat/fetch

feat: add fetch method

Author: alexiscolin

package.json

@@ -13,8 +13,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": {

src/components/faucet/FaucetCard.vue

@@ -9,7 +9,7 @@
 </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/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">
@@ -30,9 +30,6 @@ import GnoJSON from '@/assets/lottie/logo.json'
 
 import { useFaucetDetail } from '@/stores/faucetDetail'
 
-import { req } from '@/data/mockedRequest'
-import { Status } from '@/types'
-
 const txLink = ref('')
 
 const store = useFaucetDetail()
@@ -43,7 +40,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
@@ -59,19 +56,44 @@ const requestFaucet = async (address: string, amount: number, secret: string) =>
   })
   gsap.to(gnoRequestLogo.value, { autoAlpha: 1, delay: 0.5 })
 
-  //TODO: Request - replace fake request
-  console.log(address)
-  console.log(amount)
+  // min default loading timer
+  const minTimer = new Promise((resolve) => setTimeout(resolve, 2000))
   console.log(secret)
 
-  const res = await req('success')
-  store.status = res.code
-
-  if (store.status === 'error') {
-    error.value = res.status
+  const displayError = (e: string) => {
+    store.status = 'error'
+    error.value = e
     store.contentStep = 0
-  } else {
-    txLink.value = res.txLink ?? ''
+    console.error(e)
+  }
+  try {
+    const response = await fetch(store.selectedFaucet.url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        to: address,
+        amount: amount * 1000000 + 'ugnot',
+        captcha: secret,
+      }),
+    })
+
+    await minTimer
+    const faucetResponse = await response.json()
+
+    store.status = !faucetResponse.result ? 'error' : 'success'
+
+    // Check the faucet response
+    if (!response.ok || store.status === 'error') {
+      displayError(faucetResponse.error.message)
+    } else {
+      store.status = 'success'
+      txLink.value = faucetResponse.result ?? '' //TODO: get tx link
+    }
+  } catch (e) {
+    await minTimer
+    displayError(e as string)
   }
 }
 

src/components/faucet/FaucetsList.vue

@@ -14,19 +14,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)
@@ -37,7 +37,7 @@ let isLoading = false
 
 const { width } = useWindowSize()
 
-const { motions } = useMouseDelegation(projectCarouselEL, faucets, 'ref')
+const { motions } = useMouseDelegation(projectCarouselEL, faucets.value, 'ref')
 
 const store = useFaucetDetail()
 
@@ -48,7 +48,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/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>
@@ -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,12 +27,12 @@ import Recaptcha from '@/components/ui/Recaptcha.vue'
 import { useFaucetDetail } from '@/stores/faucetDetail'
 
 import { SelectOption } from '@/components/ui/Select.vue'
-import { Status } from '@/types'
+import { Faucet } from '@/types'
 
 type Props = {
-  name: string
+  name: Faucet['name']
   options: SelectOption[]
-  error?: Status | null
+  error?: string | null
 }
 defineProps<Props>()
 const store = useFaucetDetail()
@@ -56,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 }} {{ disabled }}</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/components/ui/Recaptcha.vue

@@ -10,7 +10,7 @@ const siteKey = ref(import.meta.env.VITE_reCAPTCHA_SITE_KEY ?? '')
 const emit = defineEmits(['validation'])
 
 const handleError = (res: string) => {
-  emit('validation', { code: 'error', secret: res })
+  emit('validation', { code: 'error', secret: res ?? 'error' })
 }
 
 const handleSuccess = (res: string) => {

src/data/faucets.json

@@ -3,13 +3,9 @@
     {
       "name": "Gno Portal Loop",
       "chain_id": "portal-loop",
-      "amounts": [
-        1,
-        5,
-        10
-      ],
-      "url": "https://rpc.gno.land:443",
-      "recaptcha": "6Lc245EpAAAAAJHI6WezI7VSsy6NiKTq1I7OLlUy"
+      "amounts": [1, 5, 10],
+      "url": "https://faucet-api.portal.gnoteam.com",
+      "recaptcha": "6Ldp0pgpAAAAANZxTw4oy4XkOKhhkmpDl8Yoq6uw"
     }
   ]
 }

src/data/mockedRequest.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { VueRecaptcha } from 'vue-recaptcha'
+
 import './style.css'
 import App from './App.vue'