Migrate to Prosopo Procaptcha

.github/workflows/E2E.yml

@@ -28,8 +28,10 @@ jobs:
       - name: Run a local relaychain with a parachain using zombienet
         run: |
           export PATH=$(pwd):$PATH
-          npx --yes @zombienet/[email protected] -l text \
-            --provider native spawn zombienet.native.toml \
+          npx --yes @zombienet/[email protected] \
+            --provider native \
+            --dir zombienet_logs \
+            spawn zombienet.native.toml \
             > polkadot.txt 2>&1 &
           source wait_until.sh 'curl -s "127.0.0.1:9923"'
           source wait_until.sh 'curl -s "127.0.0.1:9934"'

README.md

@@ -91,7 +91,7 @@ const request = async () => {
 
 Where the `captcha_token` is either a
 
-- JSON payload that includes a verified rococo address [procaptcha](https://prosopo.io)
+- JSON payload that includes a verified rococo address [procaptcha](https://docs.prosopo.io)
 
 or
 

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",
@@ -22,8 +23,6 @@
     "autoprefixer": "^10.4.16",
     "daisyui": "^4.4.4",
     "postcss": "^8.4.31",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.1",
     "svelte-markdown": "^0.4.0",

client/src/app.d.ts

@@ -38,6 +38,7 @@ interface Procaptcha {
       callback?: string;
       theme?: "light" | "dark";
       "chalexpired-callback"?: string;
+      captchaType?: "image";
     },
   ) => void;
   default: (callback: () => void) => void;

client/src/lib/components/CaptchaV2.svelte

@@ -33,6 +33,7 @@
           theme: colorTheme,
           callback: "onToken",
           "chalexpired-callback": "onExpiredToken",
+          captchaType: "image",
         });
       } else if (captchaProvider === CaptchaProvider.recaptcha) {
         if (!window.grecaptcha) {
@@ -95,4 +96,4 @@
     </div>
   </div>
 {/if}
-<div id={captchaId} />
+<div id={captchaId} class="z-0" />

client/src/lib/components/Form.svelte

@@ -58,7 +58,7 @@
     />
   </div>
   {#if !webRequest}
-    <div class="grid place-items-center">
+    <div class="place-items-center">
       <CaptchaV2
         captchaKey={PUBLIC_CAPTCHA_PROVIDER === CaptchaProvider.procaptcha
           ? PUBLIC_PROSOPO_SITE_KEY

client/src/lib/components/NetworkDropdown.svelte

@@ -18,7 +18,7 @@
       <Chevron />
     </div>
   </div>
-  <ul tabindex="-1" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full text-white">
+  <ul tabindex="-1" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full text-white z-10">
     {#each Networks as { network, url }}
       <li class:selected={network.networkName === currentNetwork.networkName}>
         <a data-testid={`network-${network.networkName}`} href={url}>{network.networkName} </a>

client/src/lib/components/NetworkInput.svelte

@@ -59,7 +59,7 @@
           <Chevron />
         </div>
       </div>
-      <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full text-white">
+      <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full text-white z-10">
         {#each $testnet.chains as chain, i}
           <li class:selected={network === chain.id} data-testid={`network-${i}`}>
             <a on:click={() => selectChain(chain.id)}>{chain.name}</a>

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,16 @@ 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']");