Added chain selection to form (#363)

Updated interface to have the chain dropdown inside the form:

![image](https://github.com/paritytech/polkadot-testnet-faucet/assets/8524599/99c2bade-5fb0-4efa-932c-9bedd6ff989e)

We can modify this to add new chains like @helloitsbirdo suggested.

Also, updated all dependencies to latest

This resolves #329

client/package.json

@@ -11,23 +11,23 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
-    "@playwright/test": "^1.28.1",
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/adapter-node": "^1.2.3",
-    "@sveltejs/adapter-static": "^2.0.1",
-    "@sveltejs/kit": "^1.15.2",
-    "@tailwindcss/typography": "^0.5.9",
-    "autoprefixer": "^10.4.14",
-    "daisyui": "^2.51.4",
+    "@playwright/test": "^1.40.0",
+    "@sveltejs/adapter-auto": "^2.1.1",
+    "@sveltejs/adapter-node": "^1.3.1",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.27.6",
+    "@tailwindcss/typography": "^0.5.10",
+    "autoprefixer": "^10.4.16",
+    "daisyui": "^4.4.4",
     "postcss": "^8.4.31",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.0.1",
-    "svelte-markdown": "^0.2.3",
-    "svelte-meta-tags": "^2.7.0",
-    "tailwindcss": "^3.2.7",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
-    "vite": "^4.2.3"
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.1",
+    "svelte-markdown": "^0.4.0",
+    "svelte-meta-tags": "^3.1.0",
+    "tailwindcss": "^3.3.5",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2"
   },
   "type": "module"
 }

client/src/app.css

@@ -40,7 +40,7 @@ body {
 
 @media (min-width: 768px) {
   .background {
-    background-image: url("/circle.svg"), url("/circle.svg"), url("/circle.svg");
+    background-image: url("$lib/assets/circle.svg"), url("$lib/assets/circle.svg"), url("$lib/assets/circle.svg");
     background-repeat: no-repeat;
     position: absolute;
     background-position-y: 10%, 73%, 50%;

client/src/lib/components/Faucet.svelte

@@ -28,7 +28,7 @@
   <div class="flex items-center justify-center mt-16 mb-4 md:my-16">
     <Card>
       {#if !$operation}
-        <Form network={parachain ?? -1} />
+        <Form network={parachain ?? -1} networkData={network} />
       {:else}
         <div in:fly={{ y: 30, duration: 500 }}>
           {#if $operation.success}

client/src/lib/components/Form.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import { PUBLIC_CAPTCHA_KEY } from "$env/static/public";
+  import type { NetworkData } from "$lib/utils/networkData";
   import { operation, testnet } from "$lib/utils/stores";
   import { request as faucetRequest } from "../utils";
   import CaptchaV2 from "./CaptchaV2.svelte";
+  import NetworkDropdown from "./NetworkDropdown.svelte";
   import NetworkInput from "./NetworkInput.svelte";
 
   let address: string = "";
   export let network: number = -1;
+  export let networkData: NetworkData;
   let token: string = "";
   let formValid: boolean;
   $: formValid = !!address && !!token && !!network;
@@ -34,7 +37,10 @@
 </script>
 
 <form on:submit|preventDefault={onSubmit} class="w-full">
-  <NetworkInput bind:network />
+  <div class="grid md:grid-cols-2 md:gap-x-4">
+    <NetworkInput bind:network />
+    <NetworkDropdown currentNetwork={networkData} />
+  </div>
 
   <div class="inputs-container">
     <label class="label" for="address">

client/src/lib/components/NavBar.svelte

@@ -1,23 +1,6 @@
 <script lang="ts">
-  import logo from "$lib/assets/logo.svg";
-  import NetworkDropdown from "./NetworkDropdown.svelte";
   import { base } from "$app/paths";
-
-  import { Networks, type NetworkData } from "$lib/utils/networkData";
-
-  export let currentUrl: string;
-
-  let currentNetwork: NetworkData;
-
-  function getCurrentNetwork(url: string): NetworkData {
-    const index = Networks.findIndex((n) => n.url === url);
-    if (index < 0) {
-      throw new Error(`Network for ${url} not found!`);
-    }
-    return Networks[index].network;
-  }
-
-  $: currentNetwork = getCurrentNetwork(currentUrl);
+  import logo from "$lib/assets/logo.svg";
 </script>
 
 <div class="navigation-bar">
@@ -27,7 +10,6 @@
     </div>
   </div>
   <div class="flex-none">
-    <NetworkDropdown {currentNetwork} />
     <a class="questions-btn" href="#faq"> &#8594; Questions? </a>
   </div>
 </div>

client/src/lib/components/NetworkDropdown.svelte

@@ -6,13 +6,16 @@
   export let currentNetwork: NetworkData;
 </script>
 
-<div class="dropdown w-full md:mr-8">
-  <div tabindex="-1" class="chain-dropdown" data-testid="network-select">
-    <div class="dropdown-button">
-      <div class="dropdowns">
+<div class="dropdown w-full mb-14">
+  <label class="label" for="address">
+    <span class="form-label">Chain</span>
+  </label>
+  <div tabindex="-1" class="chain-dropdown w-full" data-testid="network-select">
+    <div class="w-full flex justify-between bg-transparent">
+      <div>
         {currentNetwork.networkName}
-        <Chevron />
       </div>
+      <Chevron />
     </div>
   </div>
   <ul tabindex="-1" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full text-white">
@@ -21,18 +24,26 @@
         <a data-testid={`network-${network.networkName}`} href={url}>{network.networkName} </a>
       </li>
     {/each}
+    <li>
+      <a href="https://faucet.rococo.frequency.xyz">Frequency</a>
+    </li>
   </ul>
 </div>
 
 <style lang="postcss">
-  .dropdowns {
-    @apply btn text-white hover:text-opacity-70;
+  .chain-dropdown {
+    @apply input w-full text-sm text-white flex flex-col justify-center items-center cursor-pointer;
     background-color: #191924;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    /* button/none */
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  .form-label {
+    @apply label-text text-white;
+    font-weight: 500;
+    font-size: 16px;
+  }
 
-    box-shadow: 0px 0px 0px #000000;
-    border-radius: 9999px;
-    text-transform: none;
+  .selected {
+    @apply bg-primary;
   }
 </style>

client/src/lib/components/NetworkInput.svelte

@@ -50,7 +50,7 @@
     class:hidden={!customValue}
   />
   {#if !customValue}
-    <div class="dropdown w-full">
+    <div class="dropdown dropdown-top md:dropdown-bottom w-full">
       <div tabindex="0" class="chain-dropdown" data-testid="dropdown">
         <div class="w-full flex justify-between">
           <div>

client/src/routes/+layout.svelte

@@ -2,11 +2,10 @@
   import Footer from "$lib/components/Footer.svelte";
   import NavBar from "$lib/components/NavBar.svelte";
   import "../app.css";
-  import { page } from "$app/stores";
 </script>
 
 <div class="w-full">
-  <NavBar currentUrl={$page.url.pathname} />
+  <NavBar />
   <slot />
   <Footer />
 </div>