@prosopo/procaptcha-react 0.2.39 → 0.2.40

package/dist/components/CaptchaWidget.js

@@ -1,69 +1,148 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { ProsopoDatasetError } from '@prosopo/common';
-import { darkTheme, lightTheme } from './theme.js';
-import { useMemo } from 'react';
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { ProsopoDatasetError } from "@prosopo/common";
+import { lightTheme, darkTheme } from "./theme.js";
+import { useMemo } from "react";
 const getHash = (item) => {
-    if (!item.hash) {
-        throw new ProsopoDatasetError('CAPTCHA.MISSING_ITEM_HASH', { context: { item } });
+  if (!item.hash) {
+    throw new ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });
+  }
+  return item.hash;
+};
+const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
+  const items = challenge.captcha.items;
+  const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
+  const isTouchDevice = "ontouchstart" in window;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        paddingRight: 0.5,
+        paddingBottom: 0.5,
+        // 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__ */ jsx(
+          "div",
+          {
+            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
+              flexBasis: "33.3333%",
+              // include the padding / margin / border in the width
+              boxSizing: "border-box"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { cursor: "pointer", height: "100%", width: "100%" },
+                onClick: isTouchDevice ? void 0 : () => onClick(hash),
+                onTouchStart: isTouchDevice ? () => onClick(hash) : void 0,
+                children: [
+                  /* @__PURE__ */ jsx("div", { style: { border: 1, borderColor: theme.palette.grey[300] }, children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      style: {
+                        width: "100%",
+                        // image should be full width / height of the item
+                        backgroundColor: theme.palette.grey[300],
+                        // 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
+                        height: "auto"
+                        // make the img tag responsive to its container
+                      },
+                      src: item.data,
+                      alt: `Captcha image ${index + 1}`
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        // 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%",
+                        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
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            // 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__ */ jsx(
+                            "svg",
+                            {
+                              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%",
+                                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__ */ jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          },
+          index
+        );
+      })
     }
-    return item.hash;
+  );
 };
-export const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
-    const items = challenge.captcha.items;
-    const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
-    const isTouchDevice = 'ontouchstart' in window;
-    return (_jsx("div", { style: {
-            paddingRight: 0.5,
-            paddingBottom: 0.5,
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-        }, children: items.map((item, index) => {
-            const hash = getHash(item);
-            return (_jsx("div", { style: {
-                    paddingTop: '4px',
-                    paddingLeft: '4px',
-                    flexGrow: 1,
-                    flexBasis: '33.3333%',
-                    boxSizing: 'border-box',
-                }, children: _jsxs("div", { style: { cursor: 'pointer', height: '100%', width: '100%' }, onClick: isTouchDevice ? undefined : () => onClick(hash), onTouchStart: isTouchDevice ? () => onClick(hash) : undefined, children: [_jsx("div", { style: { border: 1, borderColor: theme.palette.grey[300] }, children: _jsx("img", { style: {
-                                    width: '100%',
-                                    backgroundColor: theme.palette.grey[300],
-                                    opacity: solution.includes(hash) && isTouchDevice ? '50%' : '100%',
-                                    display: 'block',
-                                    objectFit: 'contain',
-                                    aspectRatio: '1/1',
-                                }, src: item.data, alt: `Captcha image ${index + 1}` }) }), _jsx("div", { style: {
-                                position: 'relative',
-                                width: '100%',
-                                height: '100%',
-                                top: '-100%',
-                                visibility: solution.includes(hash) ? 'visible' : 'hidden',
-                                transition: 'opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-                                opacity: 1,
-                            }, children: _jsx("div", { style: {
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    bottom: 0,
-                                    right: 0,
-                                    height: '100%',
-                                    width: '100%',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    backgroundColor: 'rgba(0,0,0,0.5)',
-                                }, children: _jsx("svg", { style: {
-                                        backgroundColor: 'transparent',
-                                        display: 'block',
-                                        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: _jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) }) }) })] }) }, index));
-        }) }));
+export {
+  CaptchaWidget
 };
-//# sourceMappingURL=CaptchaWidget.js.map

package/dist/components/Checkbox.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { css } from '@emotion/react';
-import { darkTheme, lightTheme } from './theme.js';
-import { useMemo, useState } from 'react';
-const checkboxBefore = css `{
+import { jsx } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+import { lightTheme, darkTheme } from "./theme.js";
+import { useMemo, useState } from "react";
+const checkboxBefore = css`{
   &:before {
     content: '""';
     position: absolute;
@@ -11,33 +11,47 @@ const checkboxBefore = css `{
   }
 }`;
 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',
+  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 = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
-    const checkboxStyleBase = {
-        ...baseStyle,
-        border: `1px solid ${theme.palette.background.contrastText}`,
+  const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
+  const checkboxStyleBase = {
+    ...baseStyle,
+    border: `1px solid ${theme.palette.background.contrastText}`
+  };
+  const [hover, setHover] = useState(false);
+  const checkboxStyle = useMemo(() => {
+    return {
+      ...checkboxStyleBase,
+      borderColor: hover ? theme.palette.background.contrastText : theme.palette.grey[400],
+      appearance: checked ? "auto" : "none"
     };
-    const [hover, setHover] = useState(false);
-    const checkboxStyle = useMemo(() => {
-        return {
-            ...checkboxStyleBase,
-            borderColor: hover ? theme.palette.background.contrastText : theme.palette.grey[400],
-            appearance: checked ? 'auto' : 'none',
-        };
-    }, [hover, theme, checked]);
-    return (_jsx("input", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), css: checkboxBefore, type: 'checkbox', "aria-live": 'assertive', "aria-haspopup": 'true', onChange: onChange, checked: checked, style: checkboxStyle }));
+  }, [hover, theme, checked]);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      css: checkboxBefore,
+      type: "checkbox",
+      "aria-live": "assertive",
+      "aria-haspopup": "true",
+      onChange,
+      checked,
+      style: checkboxStyle
+    }
+  );
+};
+export {
+  Checkbox as default
 };
-export default Checkbox;
-//# sourceMappingURL=Checkbox.js.map

package/dist/components/ExtensionAccountSelect.js

@@ -1,31 +1,48 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { useTranslation } from '@prosopo/common';
-import { web3AccountsSubscribe, web3Enable } from '@polkadot/extension-dapp';
-export const ExtensionAccountSelect = ({ value, dappName, onChange, }) => {
-    const { t } = useTranslation();
-    const [accounts, setAccounts] = useState([]);
-    useEffect(() => {
-        const prom = web3Enable(dappName).then(() => {
-            return web3AccountsSubscribe(setAccounts);
-        });
-        return () => {
-            prom.then((unsub) => unsub());
-        };
-    }, []);
-    const account = accounts.find((a) => a.address === value) || null;
-    return (_jsx("select", { id: "select-account", onChange: (e) => {
-            const value = e.target.value;
-            const account = accounts.find((a) => a.address === value) || null;
-            if (account) {
-                console.log('Selected account:', value);
-                onChange(account.address);
-            }
-            else {
-                console.log('Deselected account');
-                onChange('');
-            }
-        }, value: accounts.length > 0 && account ? account.address : undefined, style: { width: '550px' }, children: accounts.map(({ address, meta: { name } }) => (_jsx("option", { value: address, children: name }))) }));
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslation } from "@prosopo/common";
+import { web3Enable, web3AccountsSubscribe } from "@polkadot/extension-dapp";
+const ExtensionAccountSelect = ({
+  value,
+  dappName,
+  onChange
+}) => {
+  const { t } = useTranslation();
+  const [accounts, setAccounts] = useState([]);
+  useEffect(() => {
+    const prom = web3Enable(dappName).then(() => {
+      return web3AccountsSubscribe(setAccounts);
+    });
+    return () => {
+      prom.then((unsub) => unsub());
+    };
+  }, []);
+  const account = accounts.find((a) => a.address === value) || null;
+  return (
+    // react select box
+    /* @__PURE__ */ 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__ */ jsx("option", { value: address, children: name }))
+      }
+    )
+  );
+};
+export {
+  ExtensionAccountSelect,
+  ExtensionAccountSelect as default
 };
-export default ExtensionAccountSelect;
-//# sourceMappingURL=ExtensionAccountSelect.js.map

package/dist/components/LoadingSpinner.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { darkTheme, lightTheme } from './theme.js';
-import { useMemo } from 'react';
-import styled from '@emotion/styled';
-export const LoadingSpinner = ({ themeColor }) => {
-    const theme = useMemo(() => (themeColor === 'light' ? lightTheme : darkTheme), [themeColor]);
-    const StyledDiv = styled.div `
+import { jsx } from "@emotion/react/jsx-runtime";
+import { lightTheme, darkTheme } from "./theme.js";
+import { useMemo } from "react";
+import styled from "@emotion/styled";
+const LoadingSpinner = ({ themeColor }) => {
+  const theme = useMemo(() => themeColor === "light" ? lightTheme : darkTheme, [themeColor]);
+  const StyledDiv = styled.div`
         width: 2em;
         height: 2em;
         border: 4px solid ${theme.palette.background.contrastText};
@@ -22,7 +22,9 @@ export const LoadingSpinner = ({ themeColor }) => {
             }
         }
     `;
-    return _jsx(StyledDiv, {});
+  return /* @__PURE__ */ jsx(StyledDiv, {});
+};
+export {
+  LoadingSpinner,
+  LoadingSpinner as default
 };
-export default LoadingSpinner;
-//# sourceMappingURL=LoadingSpinner.js.map

package/dist/components/Modal.js

@@ -1,36 +1,18 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import React from 'react';
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import "../style/Modal.css";
+import React from "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: display,
-    };
-    const ModalInnerDivCSS = {
-        maxWidth: '500px',
-        margin: 'auto',
-        position: 'fixed',
-        background: 'white',
-        height: '100%',
-        maxHeight: '100%',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        zIndex: '2147483647',
-        transition: 'all 0.5s',
-    };
-    return (_jsx("div", { style: ModalOuterDivCss, children: _jsx("div", { style: ModalInnerDivCSS, children: children }) }));
+  const { show, children } = props;
+  console.log("rendering modal with show: ", show);
+  const display = show ? "block" : "none";
+  const ModalOuterDivCss = {
+    display
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "modalOuter", style: ModalOuterDivCss, children: [
+    /* @__PURE__ */ jsx("div", { className: "modalBackground" }),
+    /* @__PURE__ */ jsx("div", { className: "modalInner", children })
+  ] });
 });
-export default ModalComponent;
-//# sourceMappingURL=Modal.js.map
+export {
+  ModalComponent as default
+};

package/dist/components/Procaptcha.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { ProcaptchaPlaceholder } from './CaptchaPlaceholder.js';
-import { Suspense, lazy } from 'react';
-const ProcaptchaWidget = lazy(async () => import('./ProcaptchaWidget.js'));
-const Procaptcha = (props) => (_jsx(Suspense, { fallback: _jsx(ProcaptchaPlaceholder, { darkMode: props.config.theme }), children: _jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks }) }));
-export default Procaptcha;
-//# sourceMappingURL=Procaptcha.js.map
+import { jsx } from "@emotion/react/jsx-runtime";
+import { ProcaptchaPlaceholder } from "./CaptchaPlaceholder.js";
+import { lazy, Suspense } from "react";
+const ProcaptchaWidget = lazy(async () => import("./ProcaptchaWidget.js"));
+const Procaptcha = (props) => /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ProcaptchaPlaceholder, { darkMode: props.config.theme }), children: /* @__PURE__ */ jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks }) });
+export {
+  Procaptcha as default
+};