@prosopo/procaptcha-react 0.2.29 → 0.2.32

package/dist/cjs/components/CaptchaComponent.cjs

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

package/dist/cjs/components/CaptchaWidget.cjs

@@ -1,25 +1,29 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const common = require("@prosopo/common");
-const theme = require("./theme.cjs");
-const React = require("react");
+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 getHash = (item) => {
   if (!item.hash) {
-    throw new common.ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });
+    throw new Error("item.hash is undefined");
   }
   return item.hash;
 };
-const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
+const CaptchaWidget = ({ challenge, solution, onClick }) => {
   const items = challenge.captcha.items;
-  const theme$1 = React.useMemo(() => themeColor === "light" ? theme.lightTheme : theme.darkTheme, [themeColor]);
+  const theme = material.useTheme();
   const isTouchDevice = "ontouchstart" in window;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    material.Box,
     {
-      style: {
-        paddingRight: 0.5,
-        paddingBottom: 0.5,
+      component: "div",
+      pr: 0.5,
+      pb: 0.5,
+      sx: {
         // expand to full height / width of parent
         width: "100%",
         height: "100%",
@@ -31,11 +35,11 @@ const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
       children: items.map((item, index) => {
         const hash = getHash(item);
         return /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          material.Box,
           {
-            style: {
-              paddingTop: "4px",
-              paddingLeft: "4px",
+            pt: 0.5,
+            pl: 0.5,
+            sx: {
               // 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
@@ -44,19 +48,19 @@ const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
               boxSizing: "border-box"
             },
             children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+              material.Box,
               {
-                style: { cursor: "pointer", height: "100%", width: "100%" },
+                sx: { cursor: "pointer", height: "100%", width: "100%" },
                 onClick: isTouchDevice ? void 0 : () => onClick(hash),
                 onTouchStart: isTouchDevice ? () => onClick(hash) : void 0,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { border: 1, borderColor: theme$1.palette.grey[300] }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { border: 1, borderColor: theme.palette.grey[300] }, children: /* @__PURE__ */ jsxRuntime.jsx(
                     "img",
                     {
                       style: {
                         width: "100%",
                         // image should be full width / height of the item
-                        backgroundColor: theme$1.palette.grey[300],
+                        backgroundColor: theme.palette.grey[300],
                         // colour of the bands when letterboxing and image
                         opacity: solution.includes(hash) && isTouchDevice ? "50%" : "100%",
                         // iphone workaround
@@ -71,10 +75,10 @@ const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
                       alt: `Captcha image ${index + 1}`
                     }
                   ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: solution.includes(hash), children: /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Box,
                     {
-                      style: {
+                      sx: {
                         // relative to where the element _should_ be positioned
                         position: "relative",
                         // make the overlay the full height/width of an item
@@ -82,15 +86,14 @@ const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
                         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
-                        transition: "opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-                        opacity: 1
+                        transitionDuration: "300ms",
+                        transitionProperty: "opacity"
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
+                        material.Box,
                         {
-                          style: {
+                          sx: {
                             // make the overlay absolute positioned compare to its container
                             position: "absolute",
                             // spread across 100% width/height of the item box
@@ -108,31 +111,22 @@ const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
                             backgroundColor: "rgba(0,0,0,0.5)"
                           },
                           children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "svg",
+                            CheckIconNormalized,
                             {
-                              style: {
-                                backgroundColor: "transparent",
-                                // img must be displayed as block otherwise gets a bottom whitespace border
+                              htmlColor: theme.palette.background.default,
+                              sx: {
+                                // img must be displayed as block otherwise get's a bottom whitespace border
                                 display: "block",
                                 // how big the overlay icon is
                                 width: "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" })
+                                height: "35%"
+                              }
                             }
                           )
                         }
                       )
                     }
-                  )
+                  ) })
                 ]
               }
             )

package/dist/cjs/components/ExtensionAccountSelect.cjs

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const react = require("react");
 const common = require("@prosopo/common");
 const extensionDapp = require("@polkadot/extension-dapp");
 const ExtensionAccountSelect = ({
@@ -10,8 +11,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);
     });
@@ -20,28 +21,27 @@ const ExtensionAccountSelect = ({
     };
   }, []);
   const account = accounts.find((a) => a.address === value) || null;
-  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 }))
-      }
-    )
+  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") })
+    }
   );
 };
 exports.ExtensionAccountSelect = ExtensionAccountSelect;