Add portal loop entry (#7)

Author: zivkovicmilos

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,8 +1,8 @@
 <template>
   <Card :tracker="tracker">
-    <FaucetAvailability :available="faucet.availability" class="self-end" />
+    <FaucetAvailability :available="true" class="self-end" />
     <div class="mt-28">
-      <span class="mb-2 text-grey-100 text-50 uppercase">{{ faucet.network }}</span>
+      <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>

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

@@ -7,8 +7,8 @@
       <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>

src/data/faucets.json

@@ -1,58 +1,15 @@
 {
   "faucets": [
     {
-      "name": "Very long network name 1",
-      "availability": true,
-      "network": "network name",
-      "token": "$GNOT",
-      "amounts": [5, 10, 20]
-    },
-    {
-      "name": "Very long network name 2",
-      "availability": false,
-      "network": "network name",
-      "token": "$GNOT"
-    },
-    {
-      "name": "Very long network name 3",
-      "availability": true,
-      "network": "network name",
-      "token": "$GNOT",
-      "amounts": [5, 10, 15]
-    },
-    {
-      "name": "Very long network name 4",
-      "availability": true,
-      "network": "network name",
-      "token": "$GNOT",
-      "amounts": [5, 10, 15]
-    },
-    {
-      "name": "Very long network name 1",
-      "availability": true,
-      "network": "network name",
-      "token": "$GNOT",
-      "amounts": [5, 10, 15]
-    },
-    {
-      "name": "Very long network name 2",
-      "availability": false,
-      "network": "network name",
-      "token": "$GNOT",
-      "amounts": [5, 10, 15]
-    },
-    {
-      "name": "Very long network name 3",
-      "availability": true,
-      "network": "network name",
-      "token": "$GNOT",
-      "amounts": [5, 10, 15]
-    },
-    {
-      "name": "Very long network name 4",
-      "availability": true,
-      "network": "network name",
-      "token": "$GNOT"
+      "name": "Gno Portal Loop",
+      "chain_id": "portal-loop",
+      "amounts": [
+        1,
+        5,
+        10
+      ],
+      "url": "https://rpc.gno.land:443",
+      "recaptcha": "6Lc245EpAAAAAJHI6WezI7VSsy6NiKTq1I7OLlUy"
     }
   ]
 }

src/types/index.ts

@@ -4,9 +4,9 @@ export type Status = 'FAIL' | 'EMPTY' | 'INVALID_ADDRESS' | 'BUSY_FAUCET' | unde
 export type Code = 'success' | 'error'
 
 export interface Faucet {
-  name: string
-  availability: boolean
-  network: string
-  token: string
-  amounts?: number[]
-}
+  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
+}