Upstream merge

.github/workflows/deploy-site.yml

@@ -18,11 +18,11 @@ jobs:
         working-directory: client
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4.1.1
       - name: Install node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4.0.2
         with:
-          node-version: 18
+          node-version: 20
       - run: yarn install --frozen-lockfile
       - run: yarn run check
       - name: Install Playwright
@@ -33,11 +33,12 @@ jobs:
           PUBLIC_CAPTCHA_KEY: 6LcgFI4nAAAAAATrEMoJ6zBacsx5udc1UhGFXemH
           GITHUB_PAGES: "/${{ github.event.repository.name }}"
           STATIC: true
-      - uses: actions/upload-artifact@master
+      - uses: actions/upload-artifact@v4.3.1
         with:
           name: faucet
           path: ./client/build
           if-no-files-found: error
+          retention-days: 5
   deploy-to-github-pages:
     environment:
       name: github-pages
@@ -47,18 +48,18 @@ jobs:
     needs: [build-faucet]
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4.1.1
       - name: Download page
-        uses: actions/download-artifact@master
+        uses: actions/download-artifact@v4.1.4
         with:
           name: faucet
           path: ./dist
       - name: Setup Pages
-        uses: actions/configure-pages@v2
+        uses: actions/configure-pages@v4.0.0
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3.0.1
         with:
           path: ./dist
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4.0.5

.github/workflows/tag-client-pr.yml

@@ -1,7 +1,7 @@
 name: Label Client PRs
 
 on:
-  pull_request:
+  pull_request_target:
     paths: 
     - 'client/**'
 

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Parity Technologies
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

client/package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.40.0",
+    "@polkadot/util": "^12.6.2",
     "@sveltejs/adapter-auto": "^2.1.1",
     "@sveltejs/adapter-node": "^1.3.1",
     "@sveltejs/adapter-static": "^2.0.3",
@@ -30,7 +31,7 @@
     "tailwindcss": "^3.3.5",
     "tslib": "^2.6.2",
     "typescript": "^5.3.2",
-    "vite": "^5.0.12"
+    "vite": "^5.0.13"
   },
   "type": "module"
 }

client/src/lib/components/Faucet.svelte

@@ -9,6 +9,7 @@
   import { operation, testnet } from "$lib/utils/stores";
   import { onMount } from "svelte";
   import { fly } from "svelte/transition";
+  import MarkUp from "./MarkUp.svelte";
 
   export let faq: string;
   export let network: NetworkData;
@@ -25,6 +26,7 @@
 
 <main>
   <SocialTags />
+  <MarkUp {faq} />
   <div class="flex items-center justify-center mt-16 mb-4 md:my-16">
     <Card>
       {#if !$operation}

client/src/lib/components/MarkUp.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { serializeLd } from "$lib/utils";
+  import { onMount } from "svelte";
+
+  export let faq: string;
+
+  type QuestionAndAnswer = {
+    "@type": "Question";
+    name: string;
+    acceptedAnswer: {
+      "@type": "Answer";
+      text: string;
+    };
+  };
+
+  let faqHeader: string;
+
+  onMount(() => {
+    const lines = faq.split("\n").filter((line) => line.trim().length > 0);
+
+    let index = -1;
+    const questions: [string, string[]][] = [];
+    for (const line of lines) {
+      if (line.startsWith("#")) {
+        questions[++index] = [line, []];
+      } else {
+        questions[index][1].push(line);
+      }
+    }
+
+    const questionWithAnswers: QuestionAndAnswer[] = questions.map(
+      ([question, answer]) =>
+        ({
+          "@type": "Question",
+          name: question,
+          acceptedAnswer: {
+            "@type": "Answer",
+            text: `<p>${answer.join("<br/>")}</p>`,
+          },
+        }) as QuestionAndAnswer,
+    );
+
+    const faqSchema = {
+      "@context": "https://schema.org",
+      "@type": "FAQPage",
+      mainEntity: questionWithAnswers,
+    };
+
+    faqHeader = JSON.stringify(faqSchema);
+  });
+</script>
+
+<!-- eslint-disable svelte/no-at-html-tags -->
+<svelte:head>
+  {@html serializeLd(faqHeader)}
+</svelte:head>

client/src/lib/components/NetworkDropdown.svelte

@@ -25,7 +25,7 @@
       </li>
     {/each}
     <li>
-      <a href="https://faucet.rococo.frequency.xyz">Frequency</a>
+      <a href="https://faucet.testnet.frequency.xyz">Frequency</a>
     </li>
   </ul>
 </div>

client/src/lib/utils/index.ts

@@ -1 +1,3 @@
 export * from "./faucetRequest";
+
+export const serializeLd = (faqHeader: string): string => `<script type="application/ld+json">${faqHeader}</script>`;

client/tests/faucet.ts

@@ -1,4 +1,5 @@
 import { type Frame, type FullConfig, type Locator, type Page, expect, test } from "@playwright/test";
+import {stringToHex} from "@polkadot/util";
 
 type FormSubmit = {
   address: string;
@@ -40,11 +41,14 @@ const getFormElements = async (page: Page, captchaProvider: "recaptcha" | "proca
       const testProvider = "https://mockprovider.prosopo.io"; // Mock provider
 
       // Tell the page that a captcha provider has previously been used and inject the mock provider
-      await page.evaluate((provider) => localStorage.setItem("@prosopo/provider", provider), testProvider);
+      const testStorage = stringToHex(JSON.stringify({account: testAccount, providerUrl: testProvider, blockNumber: 1}));
+      await page.evaluate((storage) => {
+        localStorage.setItem("@prosopo/procaptcha", storage)
+      }, testStorage);
 
       // Mock the verify api call and inject Alice's address before clicking the captcha
       await page.route("*/**/v1/prosopo/provider/verify", async (route) => {
-        const json = { user: testAccount, dapp: testSiteKey };
+        const json = { user: testAccount, dapp: testSiteKey, blockNumber: 1 };
         await route.continue({ postData: json });
       });
       captcha = page.locator("#captcha_element input[type='checkbox']");