fix: link recapcha e2e

Author: alexiscolin

.env-example

@@ -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="py-12 px-20 w-full">
+    <div ref="DOMFaucetRequest" class="py-12 px-20 w-full" v-if="store.isOpen">
       <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">

src/components/faucet/FaucetDetail.vue

@@ -4,7 +4,7 @@
     <form class="w-full space-y-12" @submit.prevent="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" />
+      <Recaptcha @validation="captchaValidation" :captchakey="store.selectedFaucet.recaptcha" />
       <div>
         <div class="flex gap-4">
           <Button text="Cancel" variant="outline" @click.prevent="() => closePopup()" class="w-full" />

src/components/faucet/content/FaucetContentForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <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>
+  <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">

src/components/ui/Button.vue

@@ -1,12 +1,17 @@
 <template>
-  <vue-recaptcha theme="dark" :sitekey="siteKey" @verify="handleSuccess" @error="handleError"></vue-recaptcha>
+  <vue-recaptcha theme="dark" :sitekey="captchakey ?? 'a'" @verify="handleSuccess" @error="handleError"></vue-recaptcha>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted } from 'vue'
 
-const siteKey = ref(import.meta.env.VITE_reCAPTCHA_SITE_KEY ?? '')
+type Props = {
+  captchakey: string
+}
+const props = defineProps<Props>()
 
+console.log(props.captchakey)
+onMounted(() => console.log(props.captchakey))
 const emit = defineEmits(['validation'])
 
 const handleError = (res: string) => {