@prosopo/procaptcha-react 0.1.19 → 0.2.1

package/dist/cjs/components/CaptchaComponent.cjs

@@ -0,0 +1,155 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const CaptchaWidget = require("./CaptchaWidget.cjs");
+const util = require("@prosopo/util");
+const common = require("@prosopo/common");
+const index = require("../util/index.cjs");
+const theme = require("./theme.cjs");
+const CaptchaComponent = (props) => {
+  const { t } = common.useTranslation();
+  const { challenge, index: index$1, solutions, onSubmit, onCancel, onClick, onNext } = props;
+  const captcha = util.at(challenge.captchas, index$1);
+  const solution = util.at(solutions, index$1);
+  return /* @__PURE__ */ jsxRuntime.jsx(material.ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      sx: {
+        // center the popup horizontally and vertically
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        // fill entire screen
+        width: "100%",
+        height: "100%"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        material.Box,
+        {
+          sx: {
+            // introduce scroll bars when screen < minWidth of children
+            overflowX: "auto",
+            overflowY: "auto",
+            width: "100%",
+            // limit the popup width
+            maxWidth: "450px",
+            // maxHeight introduces vertical scroll bars if children content longer than window
+            maxHeight: "100%"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Box,
+            {
+              bgcolor: theme.palette.background.default,
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                // the min width of the popup before scroll bars appear
+                minWidth: "300px"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.Box,
+                  {
+                    px: 2,
+                    py: 3,
+                    sx: {
+                      // center the header
+                      display: "flex",
+                      alignItems: "center",
+                      width: "100%"
+                    },
+                    bgcolor: theme.palette.primary.main,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        material.Typography,
+                        {
+                          sx: {
+                            color: "#ffffff",
+                            fontWeight: 700
+                          },
+                          children: [
+                            t("WIDGET.SELECT_ALL"),
+                            ": "
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Typography,
+                        {
+                          px: 1,
+                          sx: {
+                            color: "#ffffff",
+                            fontWeight: 700,
+                            textTransform: "uppercase",
+                            fontSize: theme.typography.h6.fontSize
+                          },
+                          children: `${util.at(props.challenge.captchas, props.index).captcha.target}`
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { ...index({ dev: { cy: "captcha-" + props.index } }), children: /* @__PURE__ */ jsxRuntime.jsx(CaptchaWidget.CaptchaWidget, { challenge: captcha, solution, onClick }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.Box,
+                  {
+                    px: 2,
+                    py: 1,
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "100%"
+                    },
+                    ...index({ dev: { cy: "dots-captcha" } }),
+                    children: challenge.captchas.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                      material.Box,
+                      {
+                        sx: {
+                          width: 7,
+                          height: 7,
+                          borderRadius: "50%",
+                          border: "1px solid #CFCFCF"
+                        },
+                        mx: 0.5,
+                        bgcolor: index$1 === i ? theme.palette.background.default : "#CFCFCF"
+                      },
+                      i
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  material.Box,
+                  {
+                    px: 2,
+                    pt: 0,
+                    pb: 2,
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: onCancel, variant: "text", children: t("WIDGET.CANCEL") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        material.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")
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+module.exports = CaptchaComponent;

package/dist/cjs/components/CaptchaWidget.cjs

@@ -0,0 +1,141 @@
+"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 getHash = (item) => {
+  if (!item.hash) {
+    throw new Error("item.hash is undefined");
+  }
+  return item.hash;
+};
+function CaptchaWidget(props) {
+  const { challenge, solution, onClick } = props;
+  const items = challenge.captcha.items;
+  const theme = material.useTheme();
+  const isTouchDevice = "ontouchstart" in window;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      component: "div",
+      pr: 0.5,
+      pb: 0.5,
+      sx: {
+        // expand to full height / width of parent
+        width: "100%",
+        height: "100%",
+        // display children in flex, spreading them evenly and wrapping when row length exceeded
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap"
+      },
+      children: items.map((item, index) => {
+        const hash = getHash(item);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            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
+              flexBasis: "33.3333%",
+              // include the padding / margin / border in the width
+              boxSizing: "border-box"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Box,
+              {
+                sx: { 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: "lightgray" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      style: {
+                        width: "100%",
+                        // image should be full width / height of the item
+                        backgroundColor: "lightgray",
+                        // colour of the bands when letterboxing and image
+                        opacity: solution.includes(hash) && isTouchDevice ? "50%" : "100%",
+                        // iphone workaround
+                        display: "block",
+                        // removes whitespace below imgs
+                        objectFit: "contain",
+                        // contain the entire image in the img tag
+                        aspectRatio: "1/1"
+                        // force AR to be 1, letterboxing images with different aspect ratios
+                      },
+                      src: item.data,
+                      alt: `Captcha image ${index + 1}`
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Fade, { in: solution.includes(hash), children: /* @__PURE__ */ jsxRuntime.jsx(
+                    material.Box,
+                    {
+                      sx: {
+                        // relative to where the element _should_ be positioned
+                        position: "relative",
+                        // make the overlay the full height/width of an item
+                        width: "100%",
+                        height: "100%",
+                        // shift it up 100% to overlay the item element
+                        top: "-100%",
+                        // transition on opacity upon (de)selection
+                        transitionDuration: "300ms",
+                        transitionProperty: "opacity"
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        material.Box,
+                        {
+                          sx: {
+                            // make the overlay absolute positioned compare to its container
+                            position: "absolute",
+                            // spread across 100% width/height of the item box
+                            top: 0,
+                            left: 0,
+                            bottom: 0,
+                            right: 0,
+                            height: "100%",
+                            width: "100%",
+                            // display overlays in center
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            // make bg half opacity, i.e. shadowing the item's img
+                            backgroundColor: "rgba(0,0,0,0.5)"
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            CheckIconNormalized,
+                            {
+                              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%"
+                              }
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ) })
+                ]
+              }
+            )
+          },
+          index
+        );
+      })
+    }
+  ) });
+}
+exports.CaptchaWidget = CaptchaWidget;

package/dist/cjs/components/ExtensionAccountSelect.cjs

@@ -0,0 +1,48 @@
+"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 common = require("@prosopo/common");
+const extensionDapp = require("@polkadot/extension-dapp");
+const ExtensionAccountSelect = ({
+  value,
+  dappName,
+  onChange
+}) => {
+  const { t } = common.useTranslation();
+  const [accounts, setAccounts] = react.useState([]);
+  react.useEffect(() => {
+    const prom = extensionDapp.web3Enable(dappName).then(() => {
+      return extensionDapp.web3AccountsSubscribe(setAccounts);
+    });
+    return () => {
+      prom.then((unsub) => unsub());
+    };
+  }, []);
+  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") })
+    }
+  );
+};
+exports.ExtensionAccountSelect = ExtensionAccountSelect;
+exports.default = ExtensionAccountSelect;

package/dist/cjs/components/Procaptcha.cjs

@@ -0,0 +1,215 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const procaptcha = require("@prosopo/procaptcha");
+const material = require("@mui/material");
+const react = require("@emotion/react");
+const react$1 = require("react");
+const CaptchaComponent = require("./CaptchaComponent.cjs");
+const logoStyle = react.css`
+    align-items: center;
+    justify-content: flex-end;
+    display: flex;
+    padding: 8px;
+
+    @media (max-width: 245px) {
+        &:nth-of-type(1),
+        &:nth-of-type(2) {
+            display: none;
+        } /* Both logos hidden */
+    }
+
+    @media (min-width: 245px) and (max-width: 400px) {
+        &:nth-of-type(1) {
+            display: flex;
+        } /* logoWithText */
+        &:nth-of-type(2) {
+            display: none;
+        } /* logoWithoutText */
+    }
+
+    @media (min-width: 401px) {
+        &:nth-of-type(1) {
+            display: none;
+        } /* logoWithText */
+        &:nth-of-type(2) {
+            display: flex;
+        } /* logoWithoutText */
+    }
+`;
+const useRefAsState = (defaultValue) => {
+  const ref = react$1.useRef(defaultValue);
+  const setter = (value2) => {
+    ref.current = value2;
+  };
+  const value = ref.current;
+  return [value, setter];
+};
+const useProcaptcha = () => {
+  const [isHuman, setIsHuman] = react$1.useState(false);
+  const [index, setIndex] = react$1.useState(-1);
+  const [solutions, setSolutions] = react$1.useState([]);
+  const [captchaApi, setCaptchaApi] = useRefAsState(void 0);
+  const [showModal, setShowModal] = react$1.useState(false);
+  const [challenge, setChallenge] = react$1.useState(void 0);
+  const [loading, setLoading] = react$1.useState(false);
+  const [account, setAccount] = react$1.useState(void 0);
+  const [dappAccount, setDappAccount] = react$1.useState(void 0);
+  const [submission, setSubmission] = useRefAsState(void 0);
+  const [timeout, setTimeout] = useRefAsState(void 0);
+  const [blockNumber, setBlockNumber] = useRefAsState(void 0);
+  return [
+    // the state
+    {
+      isHuman,
+      index,
+      solutions,
+      captchaApi,
+      showModal,
+      challenge,
+      loading,
+      account,
+      dappAccount,
+      submission,
+      timeout,
+      blockNumber
+    },
+    // and method to update the state
+    (nextState) => {
+      if (nextState.account !== void 0)
+        setAccount(nextState.account);
+      if (nextState.isHuman !== void 0)
+        setIsHuman(nextState.isHuman);
+      if (nextState.index !== void 0)
+        setIndex(nextState.index);
+      if (nextState.solutions !== void 0)
+        setSolutions(nextState.solutions.slice());
+      if (nextState.captchaApi !== void 0)
+        setCaptchaApi(nextState.captchaApi);
+      if (nextState.showModal !== void 0)
+        setShowModal(nextState.showModal);
+      if (nextState.challenge !== void 0)
+        setChallenge(nextState.challenge);
+      if (nextState.loading !== void 0)
+        setLoading(nextState.loading);
+      if (nextState.showModal !== void 0)
+        setShowModal(nextState.showModal);
+      if (nextState.dappAccount !== void 0)
+        setDappAccount(nextState.dappAccount);
+      if (nextState.submission !== void 0)
+        setSubmission(nextState.submission);
+      if (nextState.timeout !== void 0)
+        setTimeout(nextState.timeout);
+      if (nextState.blockNumber !== void 0)
+        setBlockNumber(nextState.blockNumber);
+    }
+  ];
+};
+const Procaptcha = (props) => {
+  console.log("config", props.config);
+  const config = props.config;
+  const callbacks = props.callbacks || {};
+  const [state, updateState] = useProcaptcha();
+  console.log("state", state);
+  const manager = procaptcha.Manager(config, state, updateState, callbacks);
+  const configSx = config.sx || { maxWidth: "400px", minWidth: "200px" };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { maxWidth: "100%", maxHeight: "100%", overflowX: "auto" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(material.Backdrop, { open: state.showModal, sx: { zIndex: (theme) => theme.zIndex.drawer + 1 }, children: state.challenge ? /* @__PURE__ */ jsxRuntime.jsx(
+      CaptchaComponent,
+      {
+        challenge: state.challenge,
+        index: state.index,
+        solutions: state.solutions,
+        onSubmit: manager.submit,
+        onCancel: manager.cancel,
+        onClick: manager.select,
+        onNext: manager.nextRound
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(material.Alert, { children: "No challenge set." }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { p: 0, sx: [...Array.isArray(configSx) ? configSx : [configSx]], "data-cy": "button-human", children: [
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Box,
+        {
+          p: 1,
+          border: 1,
+          borderColor: "grey.300",
+          borderRadius: 2,
+          sx: {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            flexWrap: "wrap",
+            backgroundColor: "white"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Box,
+              {
+                sx: {
+                  display: "flex",
+                  justifyContent: "flex-start",
+                  alignItems: "center",
+                  flexWrap: "wrap"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    material.Box,
+                    {
+                      sx: {
+                        height: "50px",
+                        width: "50px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexDirection: "column"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          material.Box,
+                          {
+                            sx: {
+                              display: !state.loading ? "block" : "none"
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              material.Checkbox,
+                              {
+                                onChange: manager.start,
+                                checked: state.isHuman,
+                                inputProps: { "aria-label": "controlled" },
+                                sx: {
+                                  "& .MuiSvgIcon-root": { fontSize: 32 }
+                                }
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          material.Box,
+                          {
+                            sx: {
+                              display: state.loading ? "block" : "none"
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { pt: "5px", children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: "24px", disableShrink: true }) })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Box, { p: 1, children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "common.black", children: "I am a human" }) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Link, { href: "https://prosopo.io", target: "_blank", children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { css: logoStyle, dangerouslySetInnerHTML: { __html: logoWithoutText } }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { css: logoStyle, dangerouslySetInnerHTML: { __html: logoWithText } })
+            ] }) }) }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const logoWithText = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2062.63 468.67" height="35px" width="140px"><defs><style>.cls-1{fill:#1d1d1b;}</style></defs><title>Prosopo Logo Black</title><path class="cls-1" d="M335.55,1825.19A147.75,147.75,0,0,1,483.3,1972.94h50.5c0-109.49-88.76-198.25-198.25-198.25v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M269.36,1891.39A147.74,147.74,0,0,1,417.1,2039.13h50.5c0-109.49-88.75-198.24-198.24-198.24v50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M414,2157.17a147.75,147.75,0,0,1-147.74-147.74h-50.5c0,109.49,88.75,198.24,198.24,198.24v-50.5Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M480.17,2091a147.74,147.74,0,0,1-147.74-147.75H281.92c0,109.49,88.76,198.25,198.25,198.25V2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M862.8,2017.5q-27.39,22.86-78.25,22.86h-65v112.19H654.82v-312h134q46.32,0,73.86,24.13t27.55,74.72Q890.2,1994.64,862.8,2017.5ZM813,1905.1q-12.37-10.36-34.7-10.38H719.59v91.87h58.75q22.32,0,34.7-11.22t12.39-35.56Q825.43,1915.48,813,1905.1Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1045.69,1916.42c.78.08,2.51.19,5.19.32v61.81c-3.81-.42-7.2-.71-10.16-.85s-5.36-.21-7.2-.21q-36.4,0-48.89,23.71-7,13.33-7,41.06v110.29H916.89V1921.82h57.58V1962q14-23.07,24.34-31.54,16.94-14.18,44-14.18C1044,1916.32,1044.92,1916.35,1045.69,1916.42Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1265.64,2124.32q-29.21,36.06-88.69,36.06t-88.69-36.06Q1059,2088.26,1059,2037.5q0-49.9,29.22-86.5t88.69-36.59q59.47,0,88.69,36.59t29.21,86.5Q1294.85,2088.26,1265.64,2124.32ZM1217.38,2091q14.17-18.81,14.18-53.48t-14.18-53.37q-14.19-18.7-40.64-18.71T1136,1984.13q-14.29,18.72-14.29,53.37T1136,2091q14.28,18.81,40.75,18.81T1217.38,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1371.81,2078.88q1.92,16.1,8.29,22.87,11.28,12.06,41.7,12.06,17.85,0,28.39-5.29t10.53-15.88a17.12,17.12,0,0,0-8.48-15.45q-8.49-5.28-63.12-18.2-39.33-9.73-55.41-24.35-16.08-14.39-16.09-41.49,0-32,25.14-54.93t70.75-23q43.26,0,70.53,17.25t31.29,59.59H1455q-1.27-11.64-6.58-18.42-10-12.27-34-12.28-19.74,0-28.13,6.14t-8.38,14.4c0,6.91,3,11.93,8.92,15q8.89,4.89,63,16.73,36,8.46,54.05,25.61,17.77,17.35,17.78,43.39,0,34.3-25.56,56t-79,21.7q-54.51,0-80.49-23t-26-58.53Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1745.54,2124.32q-29.22,36.06-88.7,36.06t-88.69-36.06q-29.2-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.7,36.59t29.21,86.5Q1774.75,2088.26,1745.54,2124.32ZM1697.27,2091q14.19-18.81,14.19-53.48t-14.19-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.28,53.37t14.28,53.48q14.3,18.81,40.75,18.81T1697.27,2091Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M1992.75,1946.59q28.24,29.84,28.23,87.63,0,61-27.58,92.93t-71.06,32q-27.69,0-46-13.76-10-7.62-19.6-22.23v120.24H1797V1921.82h57.79v34.08q9.79-15,20.88-23.71,20.23-15.43,48.15-15.45Q1964.53,1916.74,1992.75,1946.59Zm-46.3,43.39q-12.3-20.52-39.88-20.53-33.15,0-45.54,31.11-6.43,16.51-6.42,41.92,0,40.21,21.58,56.51,12.82,9.53,30.37,9.53,25.45,0,38.83-19.48t13.36-51.86Q1958.75,2010.51,1946.45,1990Z" transform="translate(-215.73 -1774.69)"/><path class="cls-1" d="M2249.14,2124.32q-29.2,36.06-88.69,36.06t-88.69-36.06q-29.22-36.06-29.21-86.82,0-49.9,29.21-86.5t88.69-36.59q59.49,0,88.69,36.59t29.22,86.5Q2278.36,2088.26,2249.14,2124.32ZM2200.88,2091q14.19-18.81,14.18-53.48t-14.18-53.37q-14.18-18.7-40.64-18.71t-40.75,18.71q-14.28,18.72-14.29,53.37t14.29,53.48q14.3,18.81,40.75,18.81T2200.88,2091Z" transform="translate(-215.73 -1774.69)"/></svg>';
+const logoWithoutText = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 348" height="35px"><path id="Vector" d="M95.7053 40.2707C127.005 40.2707 157.022 52.6841 179.154 74.78C201.286 96.8759 213.719 126.844 213.719 158.093H254.056C254.056 70.7808 183.16 -4.57764e-05 95.7053 -4.57764e-05V40.2707Z" fill="#000000"/><path id="Vector_2" d="M42.8365 93.0614C58.3333 93.0614 73.6784 96.1087 87.9955 102.029C102.313 107.95 115.322 116.628 126.279 127.568C137.237 138.508 145.93 151.496 151.86 165.79C157.79 180.084 160.843 195.404 160.843 210.875H201.179C201.179 123.564 130.291 52.7906 42.8365 52.7906V93.0614Z" fill="#000000"/><path id="Vector_3" d="M158.367 305.005C127.07 305.003 97.056 292.59 74.926 270.496C52.796 248.402 40.3626 218.437 40.3604 187.191H0.0239563C0.0239563 274.503 70.9123 345.276 158.367 345.276V305.005Z" fill="#000000"/><path id="Vector_4" d="M211.219 252.239C195.722 252.239 180.376 249.191 166.059 243.27C151.741 237.349 138.732 228.67 127.774 217.729C116.816 206.788 108.123 193.799 102.194 179.505C96.2637 165.21 93.2121 149.889 93.2132 134.417H52.8687C52.8687 221.729 123.765 292.509 211.219 292.509V252.239Z" fill="#000000"/></g><defs><clipPath id="clip0_1_2"><rect width="254" height="345" fill="white"/></clipPath></defs></svg>';
+exports.Procaptcha = Procaptcha;

package/dist/cjs/components/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const CaptchaWidget = require("./CaptchaWidget.cjs");
+require("./CaptchaComponent.cjs");
+const ExtensionAccountSelect = require("./ExtensionAccountSelect.cjs");
+const Procaptcha = require("./Procaptcha.cjs");
+exports.CaptchaWidget = CaptchaWidget.CaptchaWidget;
+exports.ExtensionAccountSelect = ExtensionAccountSelect.ExtensionAccountSelect;
+exports.Procaptcha = Procaptcha.Procaptcha;

package/dist/cjs/components/theme.cjs

@@ -0,0 +1,11 @@
+"use strict";
+const material = require("@mui/material");
+const theme = material.createTheme({
+  palette: {
+    primary: {
+      main: "#1976d2",
+      contrastText: "#fff"
+    }
+  }
+});
+module.exports = theme;

package/dist/cjs/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./components/index.cjs");
+require("./util/index.cjs");
+const ExtensionAccountSelect = require("./components/ExtensionAccountSelect.cjs");
+const CaptchaWidget = require("./components/CaptchaWidget.cjs");
+const Procaptcha = require("./components/Procaptcha.cjs");
+exports.ExtensionAccountSelect = ExtensionAccountSelect.ExtensionAccountSelect;
+exports.CaptchaWidget = CaptchaWidget.CaptchaWidget;
+exports.Procaptcha = Procaptcha.Procaptcha;

package/dist/cjs/util/index.cjs

@@ -0,0 +1,14 @@
+"use strict";
+function renameKeysForDataAttr(data = {}) {
+  return Object.keys(data).reduce((prev, curr) => ({ ...prev, [`data-${curr}`]: data[curr] }), {});
+}
+function addDataAttr({
+  general,
+  dev
+}) {
+  return {
+    ...renameKeysForDataAttr(general),
+    ...process.env.NODE_ENV === "development" ? renameKeysForDataAttr(dev) : {}
+  };
+}
+module.exports = addDataAttr;

package/dist/components/Procaptcha.js

@@ -140,7 +140,7 @@ export const Procaptcha = (props) => {
     console.log('state', state);
     const manager = Manager(config, state, updateState, callbacks);
     const configSx = config.sx || { maxWidth: '400px', minWidth: '200px' };
-    return (_jsxs(Box, { sx: { maxWidth: '100%', maxHeight: '100%', overflowX: 'auto' }, children: [_jsx(Backdrop, { open: state.showModal, sx: { zIndex: (theme) => theme.zIndex.drawer + 1 }, children: state.challenge ? (_jsx(CaptchaComponent, { challenge: state.challenge, index: state.index, solutions: state.solutions, onSubmit: manager.submit, onCancel: manager.cancel, onClick: manager.select, onNext: manager.nextRound })) : (_jsx(Alert, { children: "No challenge set." })) }), _jsxs(Box, { p: 1, sx: [...(Array.isArray(configSx) ? configSx : [configSx])], "data-cy": 'button-human', children: [' ', _jsxs(Box, { p: 1, border: 1, borderColor: "grey.300", borderRadius: 2, sx: {
+    return (_jsxs(Box, { sx: { maxWidth: '100%', maxHeight: '100%', overflowX: 'auto' }, children: [_jsx(Backdrop, { open: state.showModal, sx: { zIndex: (theme) => theme.zIndex.drawer + 1 }, children: state.challenge ? (_jsx(CaptchaComponent, { challenge: state.challenge, index: state.index, solutions: state.solutions, onSubmit: manager.submit, onCancel: manager.cancel, onClick: manager.select, onNext: manager.nextRound })) : (_jsx(Alert, { children: "No challenge set." })) }), _jsxs(Box, { p: 0, sx: [...(Array.isArray(configSx) ? configSx : [configSx])], "data-cy": 'button-human', children: [' ', _jsxs(Box, { p: 1, border: 1, borderColor: "grey.300", borderRadius: 2, sx: {
                             display: 'flex',
                             justifyContent: 'space-between',
                             alignItems: 'center',

package/package.json

@@ -1,15 +1,22 @@
 {
     "name": "@prosopo/procaptcha-react",
-    "version": "0.1.19",
+    "version": "0.2.1",
     "author": "PROSOPO LIMITED <info@prosopo.io>",
     "license": "Apache-2.0",
     "main": "./dist/index.js",
     "type": "module",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "require": "./dist/cjs/index.cjs"
+        }
+    },
     "types": "./dist/index.d.ts",
     "source": "./src/index.ts",
     "scripts": {
         "clean": "tsc --build --clean",
-        "build": "tsc --build --verbose",
+        "build": "tsc --build --verbose tsconfig.json",
+        "build:cjs": "npx vite --config vite.cjs.config.ts build",
         "lint": "npx eslint .",
         "lint:fix": "npx eslint . --fix --config ../../.eslintrc.js"
     },
@@ -24,8 +31,8 @@
         "@polkadot/extension-dapp": "0.46.5",
         "@polkadot/extension-inject": "0.46.5",
         "@polkadot/types": "10.9.1",
-        "@prosopo/common": "^0.1.19",
-        "@prosopo/procaptcha": "^0.1.19",
+        "@prosopo/common": "0.2.1",
+        "@prosopo/procaptcha": "0.2.1",
         "i18next": "^21.9.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

package/vite.cjs.config.ts

@@ -0,0 +1,6 @@
+import { ViteCommonJSConfig } from '@prosopo/config'
+import path from 'path'
+
+export default function () {
+    return ViteCommonJSConfig('procaptcha-react', path.resolve('./tsconfig.cjs.json'))
+}