@prosopo/procaptcha-react 0.2.2 → 0.2.5

package/README.md

@@ -1,8 +1,9 @@
-# React Prosopo Procaptcha Component Library
+# Prosopo Procaptcha React Component Library
 
 React components for integrating the Prosopo [procaptcha](https://github.com/prosopo/procaptcha) into a React app.
 
-Prosopo is a distributed human verification service that can be used to stop bots from interacting with smart contracts. Sign up to be a network [alpha tester](https://5b06hrhtlmh.typeform.com/to/vNpyOUfg).
+Prosopo is a distributed human verification service that can be used to stop bots from interacting with your apps.
+Sign up to be a network [beta tester](https://prosopo.io/#signup).
 
 ## Installation
 
@@ -14,73 +15,118 @@ npm install @prosopo/procaptcha-react --save
 
 ## Basic Usage
 
-See the [client example](https://github.com/prosopo/client-example) for a minimal example of these components being used in a frontend app.
+See the [client example](https://github.com/prosopo/client-example) for a minimal example of these components being used
+in a frontend app.
 
-```typescript
-<Box className={"App"}>
-
-  
-      <CaptchaContextManager.Provider value={manager}>
-        {showCaptchas &&
-          <CaptchaComponent {...{ clientInterface }} />}
-      </CaptchaContextManager.Provider>
-
-      {!showCaptchas &&
-        <Button onClick={showCaptchaClick} className={"iAmHumanButton"}>
-          <Typography className={"iAmHumanButtonLabel"}>
-            I am human
-          </Typography>
-        </Button>}
-
-    </Box>
+```jsx
+<Procaptcha config={config} callbacks={{ onAccountNotFound, onError, onHuman, onExpired }}/>
 ```
 
 ### Callbacks
-`CaptchaEventCallbacks` are passed to the captcha component at creation.
 
-```typescript
-const clientInterface = useCaptcha({ config }, { onAccountChange, onChange, onSubmit, onSolved, onCancel });
-```
+`ProcaptchaEvents` are passed to the captcha component at creation.
 
 The captcha event callbacks are defined as follows:
 
 ```typescript
-export interface CaptchaEventCallbacks extends ICaptchaClientEvents, ICaptchaStateClientEvents { }
-
-export interface ICaptchaClientEvents {
-  onLoad?: (extension: IExtensionInterface, contractAddress: string) => void;
-  onAccountChange?: (account?: TExtensionAccount) => void;
-}
-
-export interface ICaptchaStateClientEvents {
-  onLoadCaptcha?: (captchaChallenge: GetCaptchaResponse | Error) => void;
-  onSubmit?: (result: TCaptchaSubmitResult | Error, captchaState: ICaptchaState) => void;
-  onChange?: (captchaSolution: number[][], index: number) => void;
-  onCancel?: () => void;
-  onSolved?: (result: TCaptchaSubmitResult, isHuman?: boolean) => void;
+/**
+ * A list of all events which can occur during the Procaptcha process.
+ */
+export interface ProcaptchaEvents {
+    onError: (error: Error) => void
+    onAccountNotFound: (address: string) => void
+    onHuman: (output: ProcaptchaOutput) => void
+    onExtensionNotFound: () => void
+    onExpired: () => void
+    onFailed: () => void
 }
 ```
 
-#### onAccountChange
+### onHuman
+
+The `onHuman` callback is called when the user has successfully completed the captcha challenge. The `ProcaptchaOutput`
+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                                                                                    |
+| user         | string | The user's account address                                                                                                    |
+| blockNumber  | number | The block number of the captcha challenge. This is used to verify that the contacted provider was randomly selected on-chain. |
+
+### onError
+
+The `onError` callback is called when an error occurs during the captcha process. The `Error` object is a standard
+JavaScript error.
 
-When an account is connected or disconnected.
+### onAccountNotFound
 
-#### onLoadCaptcha
+The `onAccountNotFound` callback is called when the user's account is not found in the Procaptcha config in
+the [`userAccountAddress`](https://github.com/prosopo/captcha/blob/0bb4850adfe2b995dc16f7dd18e6ea844a0b6997/packages/types/src/config/config.ts#L116) field.
 
-After a captcha challenge has loaded/failed to load, updates captchaChallenge state and resets captchaIndex.
+### onExpired
 
-#### onChange
+The `onExpired` callback is called when the captcha challenge has expired. This can occur if the user takes too long to
+complete the challenge.
 
-When the captchaSolution is updated (after clicking an image).
+### onFailed
 
-#### onSubmit
+The `onFailed` callback is called when the user has failed the captcha challenge. This can occur if the user answers the
+challenge incorrectly.
 
-Event fired after captcha solution has been submitted. Resets captchaSolution state.
+## Add the Procaptcha Widget to your Web page using a React Component
+
+You can see Procaptcha being used as a React component in
+our [React Demo](https://github.com/prosopo/captcha/blob/main/demos/client-example/src/App.tsx).
+
+The Procaptcha component is called as follows:
+
+```tsx
+
+
+<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
+various Procaptcha events. The following config demonstrates the `REACT_APP_DAPP_SITE_KEY` variable being pulled from
+environment variables.
+
+```tsx
+const config: ProcaptchaConfigOptional = {
+    account: {
+        address: process.env.REACT_APP_DAPP_SITE_KEY || undefined,
+    },
+    web2: 'true',
+    dappName: 'client-example',
+    defaultEnvironment: 'rococo',
+    networks: {
+        rococo: {
+            endpoint: 'wss://rococo-contracts-rpc.polkadot.io:443',
+            contract: {
+                address: '5HiVWQhJrysNcFNEWf2crArKht16zrhro3FcekVWocyQjx5u',
+                name: 'prosopo',
+            },
+        },
+    },
+    solutionThreshold: 80,
+}
+```
 
-#### onSolved
+### Config Options
 
-When captcha is solved. after clearing captchaChallenge.
+| 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                                                  |
+| defaultEnvironment | string | The default environment to use - set to `rococo`                                        |
+| networks           | object | The networks your application supports - copy paste this from the config above          |
+| solutionThreshold  | number | The percentage of captcha that a user must have answered correctly to identify as human |
 
-#### onCancel
+## Verify the User Response Server Side
 
-When captcha is dismissed. before clearing captchaChallenge.
+Please see the main [README](https://github.com/prosopo/captcha/blob/main/README.md) for instructions on how to implement the server side of Procaptcha.

package/dist/cjs/components/CaptchaComponent.cjs

@@ -3,153 +3,131 @@ 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 common = require("@prosopo/common");
 const index = require("../util/index.cjs");
-const theme = require("./theme.cjs");
-const CaptchaComponent = (props) => {
+const CaptchaComponent = ({
+  challenge,
+  index: index$1,
+  solutions,
+  onSubmit,
+  onCancel,
+  onClick,
+  onNext,
+  themeColor
+}) => {
   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(
+  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]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     material.Box,
     {
       sx: {
-        // center the popup horizontally and vertically
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        // fill entire screen
+        // introduce scroll bars when screen < minWidth of children
+        overflowX: "auto",
+        overflowY: "auto",
         width: "100%",
-        height: "100%"
+        maxWidth: "500px",
+        maxHeight: "100%"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
         material.Box,
         {
+          bgcolor: theme$1.palette.background.default,
           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%"
+            display: "flex",
+            flexDirection: "column",
+            minWidth: "300px"
           },
-          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"
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              material.Box,
+              {
+                px: 2,
+                py: 3,
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  width: "100%"
+                },
+                bgcolor: theme$1.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: "capitalize",
+                        fontSize: theme$1.typography.h6.fontSize
                       },
-                      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")
-                        }
-                      )
-                    ]
-                  }
-                )
-              ]
-            }
-          )
+                      children: `${util.at(challenge.captchas, index$1).captcha.target}`
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__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(
+              material.Box,
+              {
+                px: 2,
+                py: 1,
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: "100%"
+                },
+                ...index({ dev: { cy: "dots-captcha" } })
+              }
+            ),
+            /* @__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

@@ -13,12 +13,11 @@ const getHash = (item) => {
   }
   return item.hash;
 };
-function CaptchaWidget(props) {
-  const { challenge, solution, onClick } = props;
+const CaptchaWidget = ({ challenge, solution, onClick }) => {
   const items = challenge.captcha.items;
   const theme = material.useTheme();
   const isTouchDevice = "ontouchstart" in window;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     material.Box,
     {
       component: "div",
@@ -55,13 +54,13 @@ function CaptchaWidget(props) {
                 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(
+                  /* @__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: "lightgray",
+                        backgroundColor: theme.palette.grey[300],
                         // colour of the bands when letterboxing and image
                         opacity: solution.includes(hash) && isTouchDevice ? "50%" : "100%",
                         // iphone workaround
@@ -136,6 +135,6 @@ function CaptchaWidget(props) {
         );
       })
     }
-  ) });
-}
+  );
+};
 exports.CaptchaWidget = CaptchaWidget;