@prosopo/procaptcha-react 0.2.17 → 0.2.19

package/README.md

@@ -19,7 +19,7 @@ See the [client example](https://github.com/prosopo/client-example) for a minima
 in a frontend app.
 
 ```jsx
-<Procaptcha config={config} callbacks={{ onAccountNotFound, onError, onHuman, onExpired }}/>
+<Procaptcha config={config} callbacks={{ onAccountNotFound, onError, onHuman, onExpired }} />
 ```
 
 ### Callbacks
@@ -48,7 +48,7 @@ The `onHuman` callback is called when the user has successfully completed the ca
 object contains the following fields:
 
 | Key          | Type   | Description                                                                                                                   |
-|--------------|--------|-------------------------------------------------------------------------------------------------------------------------------|
+| ------------ | ------ | ----------------------------------------------------------------------------------------------------------------------------- |
 | commitmentId | string | The commitment ID of the captcha challenge. This is used to verify the user's response on-chain.                              |
 | providerUrl  | string | The URL of the provider that the user used to solve the captcha challenge.                                                    |
 | dapp         | string | The SITE_KEY of your application / website                                                                                    |
@@ -83,12 +83,7 @@ our [React Demo](https://github.com/prosopo/captcha/blob/main/demos/client-examp
 The Procaptcha component is called as follows:
 
 ```tsx
-
-
-<Procaptcha
-    config={config}
-    callbacks={{onAccountNotFound, onError, onHuman, onExpired}}
-/>
+<Procaptcha config={config} callbacks={{ onAccountNotFound, onError, onHuman, onExpired }} />
 ```
 
 A config object is required and must contain your SITE_KEY. The callbacks are optional and can be used to handle the
@@ -119,7 +114,7 @@ const config: ProcaptchaConfigOptional = {
 ### Config Options
 
 | Key                | Type   | Description                                                                             |
-|--------------------|--------|-----------------------------------------------------------------------------------------|
+| ------------------ | ------ | --------------------------------------------------------------------------------------- |
 | account            | string | The SITE_KEY you received when you signed up                                            |
 | web2               | string | Set to `true` to enable web2 support                                                    |
 | dappName           | string | The name of your application / website                                                  |

package/dist/cjs/components/Button.cjs

@@ -0,0 +1,68 @@
+"use strict";
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const theme = require("./theme.cjs");
+const React = require("react");
+const index = require("../util/index.cjs");
+const buttonStyleBase = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative",
+  boxSizing: "border-box",
+  outline: "0px",
+  border: "0px",
+  margin: "0px",
+  cursor: "pointer",
+  userSelect: "none",
+  verticalAlign: "middle",
+  appearance: void 0,
+  textDecoration: "none",
+  fontWeight: "500",
+  fontSize: "0.875rem",
+  lineHeight: "1.75",
+  letterSpacing: "0.02857em",
+  textTransform: "uppercase",
+  minWidth: "64px",
+  padding: "6px 16px",
+  borderRadius: "4px",
+  transition: "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+  color: "rgb(0, 0, 0)",
+  backgroundColor: "#ffffff",
+  boxShadow: "rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px"
+};
+const Button = ({ themeColor, buttonType, text, onClick }) => {
+  const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
+  const [hover, setHover] = React.useState(false);
+  const buttonStyle = React.useMemo(() => {
+    const baseStyle = {
+      ...buttonStyleBase,
+      color: hover ? theme$1.palette.primary.contrastText : theme$1.palette.background.contrastText
+    };
+    if (buttonType === "cancel") {
+      return {
+        ...baseStyle,
+        backgroundColor: hover ? theme$1.palette.grey[600] : "transparent"
+      };
+    } else {
+      return {
+        ...baseStyle,
+        backgroundColor: hover ? theme$1.palette.primary.main : theme$1.palette.background.default
+      };
+    }
+  }, [buttonType, hover, theme$1]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...index({ dev: { cy: `button-${buttonType}` } }),
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      style: buttonStyle,
+      onClick: (e) => {
+        e.preventDefault();
+        onClick();
+      },
+      children: text
+    }
+  );
+};
+module.exports = Button;

package/dist/cjs/components/CaptchaComponent.cjs

@@ -1,11 +1,11 @@
 "use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const material = require("@mui/material");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const CaptchaWidget = require("./CaptchaWidget.cjs");
 const util = require("@prosopo/util");
 const theme = require("./theme.cjs");
-const react = require("react");
+const React = require("react");
 const common = require("@prosopo/common");
+const Button = require("./Button.cjs");
 const index = require("../util/index.cjs");
 const CaptchaComponent = ({
   challenge,
@@ -20,46 +20,48 @@ const CaptchaComponent = ({
   const { t } = common.useTranslation();
   const captcha = challenge.captchas ? util.at(challenge.captchas, index$1) : null;
   const solution = solutions ? util.at(solutions, index$1) : [];
-  const theme$1 = react.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
+  const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Box,
+    "div",
     {
-      sx: {
+      style: {
         // introduce scroll bars when screen < minWidth of children
         overflowX: "auto",
         overflowY: "auto",
         width: "100%",
         maxWidth: "500px",
-        maxHeight: "100%"
+        maxHeight: "100%",
+        display: "flex",
+        flexDirection: "column"
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        material.Box,
+        "div",
         {
-          bgcolor: theme$1.palette.background.default,
-          sx: {
+          style: {
+            backgroundColor: theme$1.palette.background.default,
             display: "flex",
             flexDirection: "column",
             minWidth: "300px"
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
-              material.Box,
+              "div",
               {
-                px: 2,
-                py: 3,
-                sx: {
+                style: {
                   display: "flex",
                   alignItems: "center",
-                  width: "100%"
+                  width: "100%",
+                  backgroundColor: theme$1.palette.primary.main,
+                  padding: "24px 16px"
                 },
-                bgcolor: theme$1.palette.primary.main,
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs(
-                    material.Typography,
+                    "p",
                     {
-                      sx: {
+                      style: {
                         color: "#ffffff",
-                        fontWeight: 700
+                        fontWeight: 700,
+                        lineHeight: 1.5
                       },
                       children: [
                         t("WIDGET.SELECT_ALL"),
@@ -68,14 +70,13 @@ const CaptchaComponent = ({
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    material.Typography,
+                    "p",
                     {
-                      px: 1,
-                      sx: {
+                      style: {
                         color: "#ffffff",
                         fontWeight: 700,
                         textTransform: "capitalize",
-                        fontSize: theme$1.typography.h6.fontSize
+                        lineHeight: 1.5
                       },
                       children: `${util.at(challenge.captchas, index$1).captcha.target}`
                     }
@@ -83,13 +84,19 @@ const CaptchaComponent = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { ...index({ dev: { cy: "captcha-" + index$1 } }), children: captcha && /* @__PURE__ */ jsxRuntime.jsx(CaptchaWidget.CaptchaWidget, { challenge: captcha, solution, onClick }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { ...index({ dev: { cy: "captcha-" + index$1 } }), children: captcha && /* @__PURE__ */ jsxRuntime.jsx(
+              CaptchaWidget.CaptchaWidget,
+              {
+                challenge: captcha,
+                solution,
+                onClick,
+                themeColor
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              material.Box,
+              "div",
               {
-                px: 2,
-                py: 1,
-                sx: {
+                style: {
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
@@ -98,27 +105,43 @@ const CaptchaComponent = ({
                 ...index({ dev: { cy: "dots-captcha" } })
               }
             ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  padding: "8px 16px",
+                  display: "flex",
+                  width: "100%"
+                }
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              material.Box,
+              "div",
               {
-                px: 2,
-                pt: 0,
-                pb: 2,
-                sx: {
+                style: {
+                  padding: "0 16px 16px",
                   display: "flex",
                   alignItems: "center",
-                  justifyContent: "space-between"
+                  justifyContent: "space-between",
+                  lineHeight: 1.75
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onCancel, variant: "text", children: t("WIDGET.CANCEL") }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    material.Button,
+                    Button,
+                    {
+                      themeColor,
+                      buttonType: "cancel",
+                      onClick: onCancel,
+                      text: t("WIDGET.CANCEL")
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button,
                     {
-                      color: "primary",
-                      onClick: index$1 < challenge.captchas.length - 1 ? onNext : onSubmit,
-                      variant: "contained",
-                      ...index({ dev: { cy: "button-next" } }),
-                      children: index$1 < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT")
+                      themeColor,
+                      buttonType: "next",
+                      text: index$1 < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
+                      onClick: index$1 < challenge.captchas.length - 1 ? onNext : onSubmit
                     }
                   )
                 ]

package/dist/cjs/components/CaptchaWidget.cjs

@@ -1,29 +1,24 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const material = require("@mui/material");
-const CheckIcon = require("@mui/icons-material/Check.js");
-const normalizeIcon = (Icon) => {
-  return Icon.default ? Icon.default : Icon;
-};
-const CheckIconNormalized = normalizeIcon(CheckIcon);
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const theme = require("./theme.cjs");
+const React = require("react");
 const getHash = (item) => {
   if (!item.hash) {
     throw new Error("item.hash is undefined");
   }
   return item.hash;
 };
-const CaptchaWidget = ({ challenge, solution, onClick }) => {
+const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
   const items = challenge.captcha.items;
-  const theme = material.useTheme();
+  const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
   const isTouchDevice = "ontouchstart" in window;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Box,
+    "div",
     {
-      component: "div",
-      pr: 0.5,
-      pb: 0.5,
-      sx: {
+      style: {
+        paddingRight: 0.5,
+        paddingBottom: 0.5,
         // expand to full height / width of parent
         width: "100%",
         height: "100%",
@@ -35,11 +30,11 @@ const CaptchaWidget = ({ challenge, solution, onClick }) => {
       children: items.map((item, index) => {
         const hash = getHash(item);
         return /* @__PURE__ */ jsxRuntime.jsx(
-          material.Box,
+          "div",
           {
-            pt: 0.5,
-            pl: 0.5,
-            sx: {
+            style: {
+              paddingTop: "4px",
+              paddingLeft: "4px",
               // enable the items in the grid to grow in width to use up excess space
               flexGrow: 1,
               // make the width of each item 1/3rd of the width overall, i.e. 3 columns
@@ -48,19 +43,19 @@ const CaptchaWidget = ({ challenge, solution, onClick }) => {
               boxSizing: "border-box"
             },
             children: /* @__PURE__ */ jsxRuntime.jsxs(
-              material.Box,
+              "div",
               {
-                sx: { cursor: "pointer", height: "100%", width: "100%" },
+                style: { cursor: "pointer", height: "100%", width: "100%" },
                 onClick: isTouchDevice ? void 0 : () => onClick(hash),
                 onTouchStart: isTouchDevice ? () => onClick(hash) : void 0,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { border: 1, borderColor: theme.palette.grey[300] }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { border: 1, borderColor: theme$1.palette.grey[300] }, children: /* @__PURE__ */ jsxRuntime.jsx(
                     "img",
                     {
                       style: {
                         width: "100%",
                         // image should be full width / height of the item
-                        backgroundColor: theme.palette.grey[300],
+                        backgroundColor: theme$1.palette.grey[300],
                         // colour of the bands when letterboxing and image
                         opacity: solution.includes(hash) && isTouchDevice ? "50%" : "100%",
                         // iphone workaround
@@ -75,10 +70,10 @@ const CaptchaWidget = ({ challenge, solution, onClick }) => {
                       alt: `Captcha image ${index + 1}`
                     }
                   ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: solution.includes(hash), children: /* @__PURE__ */ jsxRuntime.jsx(
-                    material.Box,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
                     {
-                      sx: {
+                      style: {
                         // relative to where the element _should_ be positioned
                         position: "relative",
                         // make the overlay the full height/width of an item
@@ -86,14 +81,15 @@ const CaptchaWidget = ({ challenge, solution, onClick }) => {
                         height: "100%",
                         // shift it up 100% to overlay the item element
                         top: "-100%",
+                        visibility: solution.includes(hash) ? "visible" : "hidden",
                         // transition on opacity upon (de)selection
-                        transitionDuration: "300ms",
-                        transitionProperty: "opacity"
+                        transition: "opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+                        opacity: 1
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsx(
-                        material.Box,
+                        "div",
                         {
-                          sx: {
+                          style: {
                             // make the overlay absolute positioned compare to its container
                             position: "absolute",
                             // spread across 100% width/height of the item box
@@ -111,22 +107,31 @@ const CaptchaWidget = ({ challenge, solution, onClick }) => {
                             backgroundColor: "rgba(0,0,0,0.5)"
                           },
                           children: /* @__PURE__ */ jsxRuntime.jsx(
-                            CheckIconNormalized,
+                            "svg",
                             {
-                              htmlColor: theme.palette.background.default,
-                              sx: {
-                                // img must be displayed as block otherwise get's a bottom whitespace border
+                              style: {
+                                backgroundColor: "transparent",
+                                // img must be displayed as block otherwise gets a bottom whitespace border
                                 display: "block",
                                 // how big the overlay icon is
                                 width: "35%",
-                                height: "35%"
-                              }
+                                height: "35%",
+                                transition: "fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+                                userSelect: "none",
+                                fill: "currentcolor"
+                              },
+                              focusable: "false",
+                              color: "#fff",
+                              "aria-hidden": "true",
+                              viewBox: "0 0 24 24",
+                              "data-testid": "CheckIcon",
+                              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
                             }
                           )
                         }
                       )
                     }
-                  ) })
+                  )
                 ]
               }
             )

package/dist/cjs/components/Checkbox.cjs

@@ -0,0 +1,56 @@
+"use strict";
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("@emotion/react");
+const theme = require("./theme.cjs");
+const React = require("react");
+const checkboxBefore = react.css`{
+  &:before {
+    content: '""';
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+}`;
+const baseStyle = {
+  width: "2.2em",
+  height: "2.2em",
+  top: "auto",
+  left: "auto",
+  opacity: "1",
+  borderRadius: "12.5%",
+  appearance: "none",
+  cursor: "pointer",
+  margin: "0",
+  borderStyle: "solid",
+  borderWidth: "1px"
+};
+const Checkbox = ({ themeColor, onChange, checked }) => {
+  const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
+  const checkboxStyleBase = {
+    ...baseStyle,
+    border: `1px solid ${theme$1.palette.background.contrastText}`
+  };
+  const [hover, setHover] = React.useState(false);
+  const checkboxStyle = React.useMemo(() => {
+    return {
+      ...checkboxStyleBase,
+      borderColor: hover ? theme$1.palette.background.contrastText : theme$1.palette.grey[400],
+      appearance: checked ? "auto" : "none"
+    };
+  }, [hover, theme$1, checked]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      css: checkboxBefore,
+      type: "checkbox",
+      "aria-live": "assertive",
+      "aria-haspopup": "true",
+      onChange,
+      checked,
+      style: checkboxStyle
+    }
+  );
+};
+module.exports = Checkbox;

package/dist/cjs/components/ExtensionAccountSelect.cjs

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const material = require("@mui/material");
-const react = require("react");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
 const common = require("@prosopo/common");
 const extensionDapp = require("@polkadot/extension-dapp");
 const ExtensionAccountSelect = ({
@@ -11,8 +10,8 @@ const ExtensionAccountSelect = ({
   onChange
 }) => {
   const { t } = common.useTranslation();
-  const [accounts, setAccounts] = react.useState([]);
-  react.useEffect(() => {
+  const [accounts, setAccounts] = React.useState([]);
+  React.useEffect(() => {
     const prom = extensionDapp.web3Enable(dappName).then(() => {
       return extensionDapp.web3AccountsSubscribe(setAccounts);
     });
@@ -21,27 +20,28 @@ const ExtensionAccountSelect = ({
     };
   }, []);
   const account = accounts.find((a) => a.address === value) || null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Autocomplete,
-    {
-      disablePortal: true,
-      id: "select-account",
-      options: accounts,
-      value: account,
-      isOptionEqualToValue: (option, value2) => option.address === value2.address,
-      onChange: (event, value2) => {
-        if (value2) {
-          console.log("Selected account:", value2);
-          onChange(value2.address);
-        } else {
-          console.log("Deselected account");
-          onChange("");
-        }
-      },
-      sx: { width: 550 },
-      getOptionLabel: (option) => `${option.meta.name}: ${option.address}`,
-      renderInput: (props) => /* @__PURE__ */ jsxRuntime.jsx(material.TextField, { ...props, label: t("WIDGET.SELECT_ACCOUNT") })
-    }
+  return (
+    // react select box
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        id: "select-account",
+        onChange: (e) => {
+          const value2 = e.target.value;
+          const account2 = accounts.find((a) => a.address === value2) || null;
+          if (account2) {
+            console.log("Selected account:", value2);
+            onChange(account2.address);
+          } else {
+            console.log("Deselected account");
+            onChange("");
+          }
+        },
+        value: accounts.length > 0 && account ? account.address : void 0,
+        style: { width: "550px" },
+        children: accounts.map(({ address, meta: { name } }) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: address, children: name }))
+      }
+    )
   );
 };
 exports.ExtensionAccountSelect = ExtensionAccountSelect;

package/dist/cjs/components/LoadingSpinner.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const theme = require("./theme.cjs");
+const React = require("react");
+const styled = require("@emotion/styled");
+const LoadingSpinner = ({ themeColor }) => {
+  const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
+  const StyledDiv = styled.div`
+        width: 2em;
+        height: 2em;
+        border: 4px solid ${theme$1.palette.primary.contrastText};
+        border-bottom-color: transparent;
+        border-radius: 50%;
+        display: inherit;
+        box-sizing: border-box;
+        animation: rotation 1s linear infinite;
+        @keyframes rotation {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    `;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledDiv, {});
+};
+exports.LoadingSpinner = LoadingSpinner;
+exports.default = LoadingSpinner;

package/dist/cjs/components/Modal.cjs

@@ -0,0 +1,35 @@
+"use strict";
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const ModalComponent = React.memo((props, nextProps) => {
+  const { show, children } = props;
+  console.log("rendering modal with show: ", show);
+  const display = show ? "flex" : "none";
+  const ModalOuterDivCss = {
+    overflow: "auto",
+    width: "100%",
+    maxHeight: "100%",
+    position: "fixed",
+    top: "0",
+    left: "0",
+    height: "100%",
+    background: "rgba(0, 0, 0, 0.6)",
+    zIndex: "2147483646",
+    transition: "all 0.5s",
+    display
+  };
+  const ModalInnerDivCSS = {
+    maxWidth: "500px",
+    margin: "auto",
+    position: "fixed",
+    background: "white",
+    height: "auto",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    zIndex: "2147483647",
+    transition: "all 0.5s"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: ModalOuterDivCss, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: ModalInnerDivCSS, children }) });
+});
+module.exports = ModalComponent;