favicon update, rename a component

Integrate HCaptcha IDE failed to add these * Fix tests for hcaptcha * Some renames to reflect the switch Update .env.example
frequency-chain · Sep 21, 2024 · ca54072 · ca54072
1 parent a1c9b77
commit ca54072
Show file tree

Hide file tree

Showing 34 changed files with 149 additions and 370 deletions.
diff --git a/.env.example b/.env.example
@@ -1,4 +1,6 @@
+# See src/networkData for available configuration networks.
 SMF_CONFIG_NETWORK="frequencyPaseo"
+#SMF_CONFIG_NETWORK="localhost"
 
 SMF_CONFIG_PORT=5555
 SMF_CONFIG_DEPLOYED_REF=local
@@ -24,4 +26,5 @@ SMF_CONFIG_DEPLOYED_REF=local
 SMF_CONFIG_FAUCET_ACCOUNT_MNEMONIC="//Alice"
 
 # Only used with external access
-SMF_CONFIG_RECAPTCHA_SECRET="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" # Public testing secret, will accept all tokens.
+# HCaptcha Test secret, see https://docs.hcaptcha.com/#integration-testing-test-keys
+SMF_CONFIG_CAPTCHA_SECRET=0x0000000000000000000000000000000000000000
diff --git a/client/env.sample b/client/env.sample
@@ -1,9 +1,12 @@
+# leave blank to turn off demo mode
 PUBLIC_DEMO_MODE=
-PUBLIC_CAPTCHA_KEY=6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
+# test key for hcaptcha, see https://docs.hcaptcha.com/#integration-testing-test-keys
+PUBLIC_CAPTCHA_KEY=10000000-ffff-ffff-ffff-000000000001
 
-# Direct requests to local instance
+# Direct requests to local instance. Leave blank to use external default
 # PUBLIC_FAUCET_URL=http://localhost:5555/drip/web/
 PUBLIC_FAUCET_URL=
 
+# No need to edit these.
 PUBLIC_ISSUE_LINK=https://github.com/frequency-chain/testnet-faucet/issues/new/choose
 PUBLIC_FORUM="https://discord.com/channels/969001918460469250/969308337864867840"
diff --git a/client/package.json b/client/package.json
@@ -25,6 +25,7 @@
     "postcss-load-config": "^6.0.1",
     "svelte": "^4.2.19",
     "svelte-check": "^4.0.2",
+    "svelte-hcaptcha": "^0.1.1",
     "svelte-markdown": "^0.4.1",
     "svelte-meta-tags": "^3.1.4",
     "svelte-preprocess": "^6.0.2",

diff --git a/client/playwright.config.ts b/client/playwright.config.ts
@@ -5,10 +5,8 @@ const config: PlaywrightTestConfig = {
     command: "npm run build && npm run preview",
     port: 4173,
     env: {
-      PUBLIC_CAPTCHA_KEY: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI",
-      PUBLIC_DEMO_MODE: "",
+      PUBLIC_CAPTCHA_KEY: "10000000-ffff-ffff-ffff-000000000001",
       PUBLIC_FAUCET_URL: "https://example.com/test",
-      PUBLIC_FORUM: "",
     },
   },
   testDir: "tests",

diff --git a/client/src/app.html b/client/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon-frequency.png" />
+		<link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon-192.png" />
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>

diff --git a/client/src/lib/assets/logo.svg b/client/src/lib/assets/logo.svg
diff --git a/client/src/lib/components/CaptchaV2.svelte b/client/src/lib/components/CaptchaV2.svelte
@@ -1,66 +1,42 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from "svelte";
+  import { createEventDispatcher } from "svelte";
   import Cross from "./icons/Cross.svelte";
+  // @ts-ignore
+  import HCaptcha from 'svelte-hcaptcha';
+  import {PUBLIC_CAPTCHA_KEY} from '$env/static/public';
 
-  export let captchaKey: string;
+  const siteKey = PUBLIC_CAPTCHA_KEY;
 
-  const dispatch = createEventDispatcher<{ token: string }>();
+  const dispatch = createEventDispatcher();
 
   const captchaId = "captcha_element";
-  let captchaError: boolean = false;
-  export let theme: "dark" | "light" | "auto" = "auto";
+  let captchaError = false;
+  let captchaKey = '';
 
-  let componentMounted: boolean;
-
-  onMount(() => {
-    window.captchaLoaded = () => {
-      const colorTheme =
-        theme === "auto"
-          ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
-            ? "dark"
-            : "light"
-          : theme;
-      const mobileScreen = window.innerHeight > window.innerWidth;
-
-      if (!window.grecaptcha) {
-        captchaError = true;
-        throw new Error("grecaptcha is undefined!");
-      }
-      window.grecaptcha.render(captchaId, {
-        sitekey: captchaKey,
-        theme: colorTheme,
-        callback: "onToken",
-        size: mobileScreen ? "compact" : "normal",
-        "expired-callback": "onExpiredToken",
-      });
-    };
-
-    window.onToken = (token) => {
-      dispatch("token", token);
-    };
-
-    // clean the token so the form becomes invalid
-    window.onExpiredToken = () => {
-      dispatch("token", "");
-    };
-
-    // once we have mounted all the required methods, we import the script
-    componentMounted = true;
+  const handleSuccess = (payload: { detail?: {token: string}}) => {
+    const token =  payload?.detail?.token || '';
+    dispatch("token", token);
     captchaError = false;
-  });
-</script>
+  }
 
-<svelte:head>
-  {#if componentMounted}
-    <script src="https://www.google.com/recaptcha/api.js?onload=captchaLoaded&render=explicit" async defer></script>
-  {/if}
-</svelte:head>
+  const handleError = (error: Error) => {
+    captchaError = true;
+    console.error(error)
+  }
+</script>
+<HCaptcha
+  sitekey={siteKey}
+  bind:this={captchaKey}
+  theme=dark
+  on:success={handleSuccess}
+  on:error={handleError}
+/>
 
 {#if captchaError}
   <div class="alert alert-error shadow-lg" data-testid="error">
     <div>
       <Cross />
-      <span>Error loading Google Captcha. Please reload the page.</span>
+      <span>Error loading HCaptcha. Please reload the page.</span>
     </div>
   </div>
 {/if}

diff --git a/...nt/src/lib/components/NetworkInput.svelte → ...t/src/lib/components/ChainDropdown.svelte b/...nt/src/lib/components/NetworkInput.svelte → ...t/src/lib/components/ChainDropdown.svelte
diff --git a/client/src/lib/components/Form.svelte b/client/src/lib/components/Form.svelte
@@ -1,11 +1,10 @@
 <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";
+  import NetworkInput from "./ChainDropdown.svelte";
   import {validateAddress} from "@polkadot/util-crypto";
 
   let address: string = "";
@@ -74,7 +73,7 @@
   </div>
   {#if !webRequest}
     <div class="grid place-items-center">
-      <CaptchaV2 captchaKey={PUBLIC_CAPTCHA_KEY ?? ""} on:token={onToken} theme="dark" />
+      <CaptchaV2 on:token={onToken} />
     </div>
     <button class="submit-btn" type="submit" data-testid="submit-button" disabled={!formValid}>
       Get some {$testnet.currency}s

diff --git a/client/src/lib/utils/networkData.ts b/client/src/lib/utils/networkData.ts
@@ -30,35 +30,6 @@ export const Frequency: NetworkData = {
 	explorer: null
 };
 
-export const Rococo: NetworkData = {
-	networkName: "Rococo",
-	currency: "ROC",
-	chains: [
-		{ name: "Rococo Relay", id: -1 },
-		{ name: "AssetHub", id: 1000 },
-		{ name: "Contracts", id: 1002 },
-		{ name: "Encointer Lietaer", id: 1003 },
-		{ name: "Coretime", id: 1005 },
-		{ name: "Bridgehub", id: 1013 }
-	],
-	endpoint: faucetUrl("https://rococo-faucet.parity-testnet.parity.io/drip/web"),
-	explorer: "https://rococo.subscan.io"
-};
-
-export const Westend: NetworkData = {
-	networkName: "Westend",
-	currency: "WND",
-	chains: [
-		{ name: "Westend Relay", id: -1 },
-		{ name: "AssetHub", id: 1000 },
-		{ name: "Collectives", id: 1001 },
-		{ name: "BridgeHub", id: 1002 },
-		{ name: "People", id: 1004 }
-	],
-	endpoint: faucetUrl("https://westend-faucet.polkadot.io/drip/web"),
-	explorer: "https://westend.subscan.io"
-};
-
 export const Paseo: NetworkData = {
 	networkName: "Paseo",
 	currency: "PAS",
@@ -67,20 +38,9 @@ export const Paseo: NetworkData = {
 	explorer: null
 };
 
-export const Trappist: NetworkData = {
-	networkName: "Trappist",
-	currency: "HOP",
-	chains: [{ name: "Trappist rococo parachain", id: -1 }],
-	endpoint: faucetUrl("https://trappist-faucet.parity-testnet.parity.io/drip/web"),
-	explorer: null
-};
-
 export const Networks: { network: NetworkData; url: string }[] = [
-	{ network: Frequency, url: "/" },
-	{ network: Rococo, url: "https://faucet.polkadot.io" },
+  { network: Frequency, url: "/" },
 	{ network: Paseo, url: "https://faucet.polkadot.io/paseo" },
-	{ network: Westend, url: "https://faucet.polkadot.io/westend" },
-	{ network: Trappist, url: "https://faucet.polkadot.io/trappist" }
 ];
 
 export function getChainName(network: NetworkData, id: number): string | null {

diff --git a/client/src/lib/utils/stores.ts b/client/src/lib/utils/stores.ts
@@ -1,9 +1,9 @@
 import { derived, writable } from "svelte/store";
 
-import { type NetworkData, Rococo } from "./networkData";
+import { type NetworkData, Frequency } from "./networkData";
 
 // If we want to have a new network we need to change this hardcoded value.
-export const testnet = writable<NetworkData>(Rococo);
+export const testnet = writable<NetworkData>(Frequency);
 
 export const testnetName = derived(testnet, ($net) => $net.networkName);
 

diff --git a/client/src/routes/trappist/+page.svelte b/client/src/routes/trappist/+page.svelte
diff --git a/client/src/routes/westend/+page.svelte b/client/src/routes/westend/+page.svelte
diff --git a/client/static/favicon-192.png b/client/static/favicon-192.png
diff --git a/client/static/favicon-512.png b/client/static/favicon-512.png
diff --git a/client/static/favicon.ico b/client/static/favicon.ico
diff --git a/client/static/favicon.svg b/client/static/favicon.svg
diff --git a/client/tests/faucet.ts b/client/tests/faucet.ts
@@ -1,10 +1,10 @@
 import {
-	type Frame,
-	type FullConfig,
-	type Locator,
-	type Page,
-	expect,
-	test
+  type Frame,
+  type FullConfig,
+  type Locator,
+  type Page,
+  expect,
+  test, type ElementHandle, type Route
 } from "@playwright/test";
 
 type FormSubmit = {
@@ -17,29 +17,7 @@ const getFormElements = async (page: Page, getCaptcha = false) => {
 	// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 	let captcha: Locator = {} as Locator;
 	if (getCaptcha) {
-		// ?: Hack. We need to wait for the frame to load and then invade it.
-		await page.reload();
-		const captchaFrame = await new Promise<Frame>((resolve, reject) => {
-			let i = 0;
-			// function that waits for the frame and timeouts after 3 seconds
-			// FIXME consider "until" from "@eng-automation/js"?
-			// eslint-disable-next-line no-restricted-syntax
-			(function waitForFrame() {
-				const captchaFrames = page
-					.frames()
-					.filter((f) => f.url().includes("https://www.google.com/recaptcha/api2/"));
-				if (captchaFrames.length > 0) {
-					return resolve(captchaFrames[0]);
-				} else {
-					i++;
-					if (i > 10) {
-						reject(new Error("Timeout"));
-					}
-				}
-				setTimeout(waitForFrame, 300);
-			})();
-		});
-		captcha = captchaFrame?.locator("#recaptcha-anchor") as Locator;
+    captcha = await page.locator('iframe[title="Widget containing checkbox for hCaptcha security challenge"]');
 	}
 	return {
 		address: page.getByTestId("address"),
@@ -222,10 +200,10 @@ export class FaucetTests {
 					const { address, captcha, submit } = await getFormElements(page, true);
 					await expect(submit).toBeDisabled();
 					await address.fill(validAddress);
-					await captcha.click();
+					await captcha.contentFrame().getByLabel('hCaptcha checkbox with text').click();
 					const faucetUrl = this.getFaucetUrl(config);
 
-					await page.route(faucetUrl, (route) =>
+					await page.route(faucetUrl, (route: Route) =>
 						route.fulfill({ body: JSON.stringify({ hash: "hash" }) })
 					);
 
@@ -254,7 +232,7 @@ export class FaucetTests {
 						const networkBtn = page.getByTestId(`network-${i}`);
 						await expect(networkBtn).toBeVisible();
 						await networkBtn.click();
-						await captcha.click();
+            await captcha.contentFrame().getByLabel('hCaptcha checkbox with text').click();
 						await expect(submit).toBeEnabled();
 						const faucetUrl = this.getFaucetUrl(config);
 						await page.route(faucetUrl, (route) =>
@@ -284,7 +262,7 @@ export class FaucetTests {
 					const customChainDiv = page.getByTestId("custom-network-button");
 					await customChainDiv.click();
 					await network.fill("9999");
-					await captcha.click();
+          await captcha.contentFrame().getByLabel('hCaptcha checkbox with text').click();
 					await expect(submit).toBeEnabled();
 					const faucetUrl = this.getFaucetUrl(config);
 					await page.route(faucetUrl, (route) =>