@prosopo/procaptcha-puzzle 2.10.8 → 2.10.9

package/dist/cjs/components/PuzzleCanvas.cjs

@@ -0,0 +1,275 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const CONTAINER_WIDTH = 300;
+const CONTAINER_HEIGHT = 200;
+const TARGET_SIZE = 30;
+const PIECE_SIZE = 24;
+const SHAKE_KEYFRAMES = `
+@keyframes prosopo-puzzle-shake {
+	0%, 100% { transform: translateX(0); }
+	10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
+	20%, 40%, 60%, 80% { transform: translateX(4px); }
+}
+`;
+const PuzzleCanvas = ({
+  originX,
+  originY,
+  targetX,
+  targetY,
+  onComplete,
+  showRetry,
+  submitting
+}) => {
+  const [posX, setPosX] = react.useState(originX);
+  const [posY, setPosY] = react.useState(originY);
+  const isDragging = react.useRef(false);
+  const puzzleEvents = react.useRef([]);
+  const containerRef = react.useRef(null);
+  const offsetRef = react.useRef({ x: 0, y: 0 });
+  const [visible, setVisible] = react.useState(false);
+  const [shaking, setShaking] = react.useState(false);
+  react.useEffect(() => {
+    setPosX(originX);
+    setPosY(originY);
+  }, [originX, originY]);
+  react.useEffect(() => {
+    const frame = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+  react.useEffect(() => {
+    if (showRetry) {
+      setShaking(true);
+      const timer = setTimeout(() => setShaking(false), 500);
+      return () => clearTimeout(timer);
+    }
+    return () => {
+    };
+  }, [showRetry]);
+  const clamp = react.useCallback(
+    (value, min, max) => {
+      return Math.max(min, Math.min(max, value));
+    },
+    []
+  );
+  const getContainerOffset = react.useCallback(() => {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      return { x: rect.left, y: rect.top };
+    }
+    return { x: 0, y: 0 };
+  }, []);
+  const handleMoveEvent = react.useCallback(
+    (clientX, clientY) => {
+      if (!isDragging.current) {
+        return;
+      }
+      const containerOffset = getContainerOffset();
+      const newX = clamp(
+        clientX - containerOffset.x - offsetRef.current.x,
+        0,
+        CONTAINER_WIDTH
+      );
+      const newY = clamp(
+        clientY - containerOffset.y - offsetRef.current.y,
+        0,
+        CONTAINER_HEIGHT
+      );
+      setPosX(newX);
+      setPosY(newY);
+      puzzleEvents.current.push({ x: newX, y: newY, t: Date.now() });
+    },
+    [clamp, getContainerOffset]
+  );
+  const handleEndEvent = react.useCallback(() => {
+    if (!isDragging.current) {
+      return;
+    }
+    isDragging.current = false;
+    const currentEvents = [...puzzleEvents.current];
+    const lastEvent = currentEvents[currentEvents.length - 1];
+    const finalX = lastEvent ? lastEvent.x : originX;
+    const finalY = lastEvent ? lastEvent.y : originY;
+    onComplete(finalX, finalY, currentEvents);
+  }, [onComplete, originX, originY]);
+  const handleMouseMove = react.useCallback(
+    (event) => {
+      handleMoveEvent(event.clientX, event.clientY);
+    },
+    [handleMoveEvent]
+  );
+  const handleTouchMove = react.useCallback(
+    (event) => {
+      const touch = event.touches[0];
+      if (touch) {
+        handleMoveEvent(touch.clientX, touch.clientY);
+      }
+    },
+    [handleMoveEvent]
+  );
+  const handleMouseUp = react.useCallback(() => {
+    handleEndEvent();
+  }, [handleEndEvent]);
+  const handleTouchEnd = react.useCallback(() => {
+    handleEndEvent();
+  }, [handleEndEvent]);
+  react.useEffect(() => {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("touchmove", handleTouchMove);
+    document.addEventListener("touchend", handleTouchEnd);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
+  const handlePieceMouseDown = react.useCallback(
+    (event) => {
+      if (submitting) return;
+      isDragging.current = true;
+      puzzleEvents.current = [];
+      const containerOffset = getContainerOffset();
+      offsetRef.current = {
+        x: event.clientX - containerOffset.x - posX,
+        y: event.clientY - containerOffset.y - posY
+      };
+    },
+    [getContainerOffset, posX, posY, submitting]
+  );
+  const handlePieceTouchStart = react.useCallback(
+    (event) => {
+      if (submitting) return;
+      const touch = event.touches[0];
+      if (touch) {
+        isDragging.current = true;
+        puzzleEvents.current = [];
+        const containerOffset = getContainerOffset();
+        offsetRef.current = {
+          x: touch.clientX - containerOffset.x - posX,
+          y: touch.clientY - containerOffset.y - posY
+        };
+      }
+    },
+    [getContainerOffset, posX, posY, submitting]
+  );
+  const instructionText = showRetry ? "Not quite — try again" : "Drag the piece to the target";
+  const headerBorderColor = showRetry ? "rgba(220, 53, 69, 0.4)" : "transparent";
+  const headerTextColor = showRetry ? "#dc3545" : "#333";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483646,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: visible ? "rgba(0, 0, 0, 0.4)" : "rgba(0, 0, 0, 0)",
+        transition: "background-color 0.3s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: SHAKE_KEYFRAMES }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: "0",
+              zIndex: 2147483647,
+              opacity: visible ? 1 : 0,
+              transform: visible ? "scale(1)" : "scale(0.9)",
+              transition: "opacity 0.3s ease, transform 0.3s ease",
+              animation: shaking ? "prosopo-puzzle-shake 0.5s ease" : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    backgroundColor: "#fff",
+                    borderRadius: "8px 8px 0 0",
+                    padding: "12px 20px",
+                    width: `${CONTAINER_WIDTH}px`,
+                    boxSizing: "border-box",
+                    textAlign: "center",
+                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                    fontSize: "14px",
+                    fontWeight: 500,
+                    color: headerTextColor,
+                    borderBottom: `2px solid ${headerBorderColor}`,
+                    boxShadow: "0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)",
+                    transition: "color 0.3s ease, border-color 0.3s ease"
+                  },
+                  children: instructionText
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  ref: containerRef,
+                  style: {
+                    position: "relative",
+                    width: `${CONTAINER_WIDTH}px`,
+                    height: `${CONTAINER_HEIGHT}px`,
+                    background: "linear-gradient(135deg, #e8eaf6 0%, #c5cae9 50%, #e8eaf6 100%)",
+                    borderRadius: "0 0 8px 8px",
+                    overflow: "hidden",
+                    userSelect: "none",
+                    boxShadow: "0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)",
+                    opacity: submitting ? 0.6 : 1,
+                    pointerEvents: submitting ? "none" : "auto",
+                    transition: "opacity 0.2s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          left: `${targetX - TARGET_SIZE / 2}px`,
+                          top: `${targetY - TARGET_SIZE / 2}px`,
+                          width: `${TARGET_SIZE}px`,
+                          height: `${TARGET_SIZE}px`,
+                          borderRadius: "50%",
+                          border: "2px dashed rgba(74, 144, 217, 0.6)",
+                          backgroundColor: "rgba(74, 144, 217, 0.08)",
+                          boxSizing: "border-box"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        onMouseDown: handlePieceMouseDown,
+                        onTouchStart: handlePieceTouchStart,
+                        style: {
+                          position: "absolute",
+                          left: `${posX - PIECE_SIZE / 2}px`,
+                          top: `${posY - PIECE_SIZE / 2}px`,
+                          width: `${PIECE_SIZE}px`,
+                          height: `${PIECE_SIZE}px`,
+                          borderRadius: "50%",
+                          background: "radial-gradient(circle at 40% 40%, #6ab0ff, #4a90d9)",
+                          cursor: submitting ? "default" : isDragging.current ? "grabbing" : "grab",
+                          boxShadow: isDragging.current ? "0 4px 12px rgba(74, 144, 217, 0.5)" : "0 2px 6px rgba(74, 144, 217, 0.3)",
+                          transition: isDragging.current ? "none" : "box-shadow 0.2s ease, left 0.3s ease, top 0.3s ease"
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+exports.PuzzleCanvas = PuzzleCanvas;

package/dist/cjs/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./components/ProcaptchaWidget.cjs");
+const ProcaptchaPuzzle = require("./components/ProcaptchaPuzzle.cjs");
+exports.ProcaptchaPuzzle = ProcaptchaPuzzle.ProcaptchaPuzzle;

package/dist/cjs/services/Manager.cjs

@@ -0,0 +1,286 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const string = require("@polkadot/util/string");
+const api = require("@prosopo/api");
+const common = require("@prosopo/common");
+const procaptchaCommon = require("@prosopo/procaptcha-common");
+const types = require("@prosopo/types");
+const util = require("@prosopo/util");
+const utilCrypto = require("@prosopo/util-crypto");
+const Manager = (configInput, state, onStateUpdate, callbacks, frictionlessState, getHoneypotValue) => {
+  const events = procaptchaCommon.getDefaultEvents(callbacks);
+  let storedChallengeResponse;
+  let storedProviderApi;
+  let storedProviderUrl;
+  let storedUser;
+  let storedClickX;
+  let storedClickY;
+  const defaultState = () => {
+    return {
+      // note order matters! see buildUpdateState. These fields are set in order, so disable modal first, then set loading to false, etc.
+      showModal: false,
+      loading: false,
+      index: 0,
+      challenge: void 0,
+      solutions: void 0,
+      isHuman: false,
+      captchaApi: void 0,
+      account: void 0
+      // don't handle timeout here, this should be handled by the state management
+    };
+  };
+  const clearTimeout = () => {
+    window.clearTimeout(Number(state.timeout));
+    updateState({ timeout: void 0 });
+  };
+  const onFailed = () => {
+    updateState({
+      isHuman: false,
+      loading: false
+    });
+    events.onFailed();
+    resetState(frictionlessState?.restart);
+  };
+  const clearSuccessfulChallengeTimeout = () => {
+    window.clearTimeout(Number(state.successfullChallengeTimeout));
+    updateState({ successfullChallengeTimeout: void 0 });
+  };
+  const getConfig = () => {
+    const config = {
+      userAccountAddress: configInput.userAccountAddress || "",
+      ...configInput
+    };
+    if (state.account) {
+      config.userAccountAddress = state.account.account.address;
+    }
+    return types.ProcaptchaConfigSchema.parse(config);
+  };
+  const getAccount = () => {
+    if (!state.account) {
+      throw new common.ProsopoEnvError("GENERAL.ACCOUNT_NOT_FOUND", {
+        context: { error: "Account not loaded" }
+      });
+    }
+    const account = state.account;
+    return { account };
+  };
+  const getDappAccount = () => {
+    if (!state.dappAccount) {
+      throw new common.ProsopoEnvError("GENERAL.SITE_KEY_MISSING");
+    }
+    const dappAccount = state.dappAccount;
+    return dappAccount;
+  };
+  const updateState = procaptchaCommon.buildUpdateState(state, onStateUpdate);
+  const resetState = (frictionlessRestart) => {
+    clearTimeout();
+    clearSuccessfulChallengeTimeout();
+    updateState(defaultState());
+    events.onReset();
+    if (frictionlessRestart) {
+      frictionlessRestart();
+    }
+    storedChallengeResponse = void 0;
+    storedProviderApi = void 0;
+    storedProviderUrl = void 0;
+    storedUser = void 0;
+    storedClickX = void 0;
+    storedClickY = void 0;
+  };
+  const setValidChallengeTimeout = () => {
+    const timeMillis = getConfig().captchas.puzzle.solutionTimeout;
+    const successfullChallengeTimeout = setTimeout(() => {
+      updateState({ isHuman: false });
+      events.onExpired();
+      resetState(frictionlessState?.restart);
+    }, timeMillis);
+    updateState({ successfullChallengeTimeout });
+  };
+  const start = async (x = 0, y = 0) => {
+    storedClickX = x;
+    storedClickY = y;
+    await procaptchaCommon.providerRetry(
+      async () => {
+        if (state.loading) {
+          return;
+        }
+        if (state.isHuman) {
+          return;
+        }
+        resetState();
+        updateState({
+          loading: true
+        });
+        updateState({ attemptCount: state.attemptCount + 1 });
+        const config = getConfig();
+        const selectAccount = async () => {
+          if (frictionlessState) {
+            return frictionlessState.userAccount;
+          }
+          const ext = new (await procaptchaCommon.ExtensionLoader(config.web2))();
+          return ext.getAccount(config);
+        };
+        const user = await selectAccount();
+        const userAccount = user.account.address;
+        updateState({
+          account: { account: { address: userAccount } }
+        });
+        updateState({ dappAccount: config.account.address });
+        await util.sleep(100);
+        if (!config.web2 && !config.userAccountAddress) {
+          throw new common.ProsopoEnvError("GENERAL.ACCOUNT_NOT_FOUND", {
+            context: {
+              error: "Account address has not been set for web3 mode"
+            }
+          });
+        }
+        let getRandomProviderResponse = void 0;
+        if (frictionlessState?.provider) {
+          getRandomProviderResponse = frictionlessState.provider;
+        } else {
+          getRandomProviderResponse = await procaptchaCommon.getProcaptchaRandomActiveProvider(
+            getConfig().defaultEnvironment
+          );
+        }
+        const providerUrl = getRandomProviderResponse.provider.url;
+        const providerApi = new api.ProviderApi(providerUrl, getDappAccount());
+        const simdReadingsOnChallenge = frictionlessState?.getSimdReadings ? await frictionlessState.getSimdReadings(0) : void 0;
+        const challenge = await providerApi.getPuzzleCaptchaChallenge(
+          userAccount,
+          getDappAccount(),
+          frictionlessState?.sessionId,
+          simdReadingsOnChallenge
+        );
+        if (challenge.error) {
+          updateState({
+            loading: false,
+            error: {
+              message: challenge.error.message,
+              key: challenge.error.key || "API.UNKNOWN_ERROR"
+            }
+          });
+          return;
+        }
+        storedChallengeResponse = challenge;
+        storedProviderApi = providerApi;
+        storedProviderUrl = providerUrl;
+        storedUser = user;
+        updateState({
+          loading: false
+        });
+      },
+      async () => {
+        await start();
+      },
+      () => {
+        resetState();
+      },
+      state.attemptCount,
+      3
+    );
+    return storedChallengeResponse;
+  };
+  const submitSolution = async (finalX, finalY, puzzleEvents) => {
+    if (!storedChallengeResponse || !storedProviderApi || !storedProviderUrl || !storedUser) {
+      throw new common.ProsopoEnvError("GENERAL.ACCOUNT_NOT_FOUND", {
+        context: { error: "No challenge data available. Call start() first." }
+      });
+    }
+    updateState({ loading: true });
+    try {
+      const challenge = storedChallengeResponse;
+      const providerApi = storedProviderApi;
+      const providerUrl = storedProviderUrl;
+      const user = storedUser;
+      const config = getConfig();
+      const signer = user.extension?.signer;
+      if (!signer || !signer.signRaw) {
+        throw new common.ProsopoEnvError("GENERAL.CANT_FIND_KEYRINGPAIR", {
+          context: {
+            error: "Signer is not defined, cannot sign message to prove account ownership"
+          }
+        });
+      }
+      const userTimestampSignature = await signer.signRaw({
+        address: user.account.address,
+        data: string.stringToHex(challenge[types.ApiParams.timestamp].toString()),
+        type: "bytes"
+      });
+      let encryptedBehavioralData;
+      if (frictionlessState?.encryptBehavioralData && (frictionlessState?.behaviorCollector1 || frictionlessState?.behaviorCollector2 || frictionlessState?.behaviorCollector3)) {
+        try {
+          const behavioralData = {
+            collector1: frictionlessState.behaviorCollector1?.getData() || [],
+            collector2: frictionlessState.behaviorCollector2?.getData() || [],
+            collector3: frictionlessState.behaviorCollector3?.getData() || [],
+            deviceCapability: frictionlessState.deviceCapability || "unknown"
+          };
+          const dataToEncrypt = frictionlessState.packBehavioralData ? frictionlessState.packBehavioralData(behavioralData) : behavioralData;
+          encryptedBehavioralData = await frictionlessState.encryptBehavioralData(
+            JSON.stringify(dataToEncrypt)
+          );
+        } catch {
+        }
+      }
+      let salt;
+      if (storedClickX !== void 0 && storedClickY !== void 0) {
+        const coords = [storedClickX, storedClickY];
+        const randomSalt = utilCrypto.randomAsHex(
+          coords.map((coord) => coord.toString(16).length + 4).reduce((acc, curr) => acc + curr, 0)
+        );
+        salt = util.embedData(randomSalt, coords);
+      }
+      const simdReadings = frictionlessState?.getSimdReadings ? await frictionlessState.getSimdReadings() : void 0;
+      const hpValue = getHoneypotValue?.();
+      const clientMetaData = hpValue ? { hp: hpValue } : void 0;
+      const verifiedSolution = await providerApi.submitPuzzleCaptchaSolution(
+        challenge,
+        getAccount().account.account.address,
+        getDappAccount(),
+        finalX,
+        finalY,
+        puzzleEvents,
+        userTimestampSignature.signature.toString(),
+        config.captchas.puzzle.verifiedTimeout,
+        encryptedBehavioralData,
+        salt,
+        simdReadings,
+        clientMetaData
+      );
+      if (verifiedSolution[types.ApiParams.verified]) {
+        updateState({
+          isHuman: true,
+          loading: false
+        });
+        events.onHuman(
+          types.encodeProcaptchaOutput({
+            [types.ApiParams.providerUrl]: providerUrl,
+            [types.ApiParams.user]: getAccount().account.account.address,
+            [types.ApiParams.dapp]: getDappAccount(),
+            [types.ApiParams.challenge]: challenge.challenge,
+            [types.ApiParams.timestamp]: challenge.timestamp,
+            [types.ApiParams.signature]: {
+              [types.ApiParams.provider]: challenge.signature.provider,
+              [types.ApiParams.user]: {
+                [types.ApiParams.timestamp]: userTimestampSignature.signature.toString()
+              }
+            }
+          })
+        );
+        setValidChallengeTimeout();
+        return true;
+      }
+      onFailed();
+      return false;
+    } catch (error) {
+      updateState({ loading: false });
+      throw error;
+    }
+  };
+  return {
+    start,
+    submitSolution,
+    resetState
+  };
+};
+exports.Manager = Manager;

package/dist/components/ProcaptchaPuzzle.js

@@ -1,5 +1,17 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Suspense, lazy } from "react";
-const ProcaptchaWidget = lazy(async () => import("./ProcaptchaWidget.js"));
-export const ProcaptchaPuzzle = (props) => (_jsx(Suspense, { children: _jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks, frictionlessState: props.frictionlessState, i18n: props.i18n }) }));
-//# sourceMappingURL=ProcaptchaPuzzle.js.map
+import { jsx } from "@emotion/react/jsx-runtime";
+import { lazy, Suspense } from "react";
+const ProcaptchaWidget = lazy(
+  async () => import("./ProcaptchaWidget.js")
+);
+const ProcaptchaPuzzle = (props) => /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(
+  ProcaptchaWidget,
+  {
+    config: props.config,
+    callbacks: props.callbacks,
+    frictionlessState: props.frictionlessState,
+    i18n: props.i18n
+  }
+) });
+export {
+  ProcaptchaPuzzle
+};