@prosopo/procaptcha-react 0.1.1 → 0.1.2

package/src/components/CaptchaComponent.tsx

@@ -1,112 +0,0 @@
-// Copyright (C) 2021-2022 Prosopo (UK) Ltd.
-// This file is part of procaptcha-react <https://github.com/prosopo-io/procaptcha-react>.
-//
-// procaptcha-react is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// procaptcha-react is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with procaptcha-react.  If not, see <http://www.gnu.org/licenses/>.
-import { useEffect, useContext, useReducer } from "react";
-import { Box, Button, Typography } from "@mui/material";
-import {
-    ICaptchaContextReducer,
-    ProsopoCaptchaClient,
-    ProsopoCaptchaStateClient,
-    captchaStateReducer
-} from "@prosopo/procaptcha";
-
-import { CaptchaContextManager } from "./CaptchaManager";
-import { CaptchaWidget } from "./CaptchaWidget";
-
-import { useStyles } from "../styles";
-
-
-export function CaptchaComponent({ clientInterface }: { clientInterface: ProsopoCaptchaClient }) {
-
-    const classes = useStyles();
-
-    const manager: ICaptchaContextReducer = useContext(CaptchaContextManager);
-    const [state, update] = useReducer(captchaStateReducer, { captchaIndex: 0, captchaSolution: [] });
-
-    const { account, contractAddress } = manager.state;
-    const { captchaChallenge, captchaIndex, captchaSolution } = state;
-    const totalCaptchas = captchaChallenge?.captchas.length ?? 0;
-
-    const stateClientInterface = new ProsopoCaptchaStateClient(clientInterface, { state, update });
-
-    useEffect(() => {
-
-        clientInterface.onLoad();
-
-    }, []);
-
-    useEffect(() => {
-        const extension = clientInterface.getExtension();
-        if (contractAddress && extension) {
-            extension.setDefaultAccount();
-            const defaultAccount = extension.getAccount();
-            if (defaultAccount) {
-                clientInterface.onAccountChange(defaultAccount);
-            }
-        }
-    }, [contractAddress]);
-
-    useEffect(() => {
-        if (account && !captchaChallenge) {
-            stateClientInterface.onLoadCaptcha()
-                .catch(error => {
-                    clientInterface.status.update({ error });
-                });
-        }
-    }, [account]);
-
-    // TODO text strings
-    // https://www.npmjs.com/package/i18next
-
-    return (
-        <Box className={classes.root}>
-
-            {account && captchaChallenge &&
-                <Box className={classes.captchasContainer}>
-
-                    <Box className={classes.captchasHeader}>
-                        <Typography className={classes.captchasHeaderLabel}>
-                            Select all images with {captchaChallenge.captchas[captchaIndex].captcha.target}
-                        </Typography>
-                    </Box>
-
-                    <Box className={classes.captchasBody}>
-
-                        <CaptchaWidget challenge={captchaChallenge.captchas[captchaIndex]} solution={captchaSolution[captchaIndex] || []}
-                            onChange={stateClientInterface.onChange.bind(stateClientInterface)} />
-
-                        <Box className={classes.dotsContainer}>
-                            {captchaChallenge?.captchas.map((_, index) =>
-                                <Box key={index} className={captchaIndex === index ? classes.dot : classes.dotActive} />)}
-                        </Box>
-
-                    </Box>
-
-                    <Box className={classes.captchasFooter}>
-                        <Button onClick={() => stateClientInterface.onCancel()} variant="text">
-                            Cancel
-                        </Button>
-                        <Button onClick={() => stateClientInterface.onSubmit()} variant="contained">
-                            {captchaIndex + 1 < totalCaptchas ? "Next" : "Submit"}
-                        </Button>
-                    </Box>
-
-                </Box>
-            }
-        </Box>
-    );
-}
-
-export default CaptchaComponent;

package/src/components/CaptchaManager.ts

@@ -1,44 +0,0 @@
-// Copyright (C) 2021-2022 Prosopo (UK) Ltd.
-// This file is part of procaptcha-react <https://github.com/prosopo-io/procaptcha-react>.
-//
-// procaptcha-react is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// procaptcha-react is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with procaptcha-react.  If not, see <http://www.gnu.org/licenses/>.
-
-import { createContext, useReducer } from "react";
-import {
-    ICaptchaContextState,
-    captchaContextReducer,
-    captchaStatusReducer,
-    ICaptchaContextReducer,
-    ProsopoCaptchaClient,
-    CaptchaEventCallbacks,
-} from "@prosopo/procaptcha";
-
-
-export function useCaptcha(defaultContext: ICaptchaContextState, callbacks?: CaptchaEventCallbacks): ProsopoCaptchaClient {
-    const [context, updateContext] = useReducer(captchaContextReducer, defaultContext);
-    const [status, updateStatus] = useReducer(captchaStatusReducer, {});
-    return new ProsopoCaptchaClient({ state: context, update: updateContext }, { state: status, update: updateStatus }, callbacks);
-}
-
-export const CaptchaContextManager = createContext({
-    state: {
-        config: {
-            "providerApi.baseURL": "",
-            "providerApi.prefix": "",
-            "dappAccount": "",
-            "dappUrl": "",
-        }
-    }, 
-    update: () => {},
-} as ICaptchaContextReducer);

package/src/components/CaptchaWidget.tsx

@@ -1,43 +0,0 @@
-// Copyright (C) 2021-2022 Prosopo (UK) Ltd.
-// This file is part of procaptcha-react <https://github.com/prosopo-io/procaptcha-react>.
-//
-// procaptcha-react is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// procaptcha-react is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with procaptcha-react.  If not, see <http://www.gnu.org/licenses/>.
-import { Avatar } from "@mui/material";
-import { CaptchaResponseCaptcha } from "@prosopo/procaptcha";
-
-import { useStyles } from "../styles";
-
-
-export function CaptchaWidget({ challenge, solution, onChange }:
-    {challenge: CaptchaResponseCaptcha, solution: number[], onChange: (index: number) => void}) {
-    // TODO challenge.items
-    //const items = Array.from(Array(9).keys());
-    console.log("CHALLENGE", challenge);
-    const items = challenge.captcha.items;
-    const classes = useStyles();
-
-    return (
-      <>
-        {items.map((item, index) => <Avatar
-          key={index}
-          src={item.path} // TODO challenge.items[].path...
-          variant="square"
-          className={classes.captchaItem + " " + (solution.includes(index) ? " selected" : "")}
-          onClick={() => onChange(index)} />
-        )}
-      </>
-    );
-  }
-
-  export default CaptchaWidget;

package/src/components/ExtensionAccountSelect.tsx

@@ -1,38 +0,0 @@
-// Copyright (C) 2021-2022 Prosopo (UK) Ltd.
-// This file is part of procaptcha-react <https://github.com/prosopo-io/procaptcha-react>.
-//
-// procaptcha-react is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// procaptcha-react is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with procaptcha-react.  If not, see <http://www.gnu.org/licenses/>.
-import { SyntheticEvent } from "react";
-import { Autocomplete, TextField } from "@mui/material";
-import { TExtensionAccount } from "@prosopo/procaptcha";
-
-
-export const ExtensionAccountSelect = ({value, options, onChange}: 
-        {value?: TExtensionAccount, options: TExtensionAccount[], onChange: (value: TExtensionAccount | null) => void}) => {
-    return (
-        <Autocomplete
-            disablePortal
-            id="select-accounts" // TODO
-            options={options}
-            value={value}
-            isOptionEqualToValue={(option, value) => option.address === value.address}
-            onChange={(event: SyntheticEvent<Element, Event>, value: TExtensionAccount | null) => onChange(value)}
-            sx={{ width: 550 }} // TODO prop
-            getOptionLabel={(option: any) => `${option.meta.name}\n${option.address}`}
-            renderInput={(props) => <TextField {...props} label="Select account" />} // TODO label
-        />
-    );
-}
-
-export default ExtensionAccountSelect;

package/src/components/index.ts

@@ -1,19 +0,0 @@
-// Copyright (C) 2021-2022 Prosopo (UK) Ltd.
-// This file is part of procaptcha-react <https://github.com/prosopo-io/procaptcha-react>.
-//
-// procaptcha-react is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// procaptcha-react is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with procaptcha-react.  If not, see <http://www.gnu.org/licenses/>.
-export * from './CaptchaManager';
-export * from './CaptchaWidget';
-export * from './CaptchaComponent';
-export * from './ExtensionAccountSelect';

package/src/index.ts

@@ -1,17 +0,0 @@
-// Copyright (C) 2021-2022 Prosopo (UK) Ltd.
-// This file is part of procaptcha-react <https://github.com/prosopo-io/procaptcha-react>.
-//
-// procaptcha-react is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// procaptcha-react is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with procaptcha-react.  If not, see <http://www.gnu.org/licenses/>.
-export * from './components';
-export * from './styles';

package/src/styles.ts

@@ -1,89 +0,0 @@
-// Copyright (C) 2021-2022 Prosopo (UK) Ltd.
-// This file is part of procaptcha-react <https://github.com/prosopo-io/procaptcha-react>.
-//
-// procaptcha-react is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// procaptcha-react is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-//
-// You should have received a copy of the GNU General Public License
-// along with procaptcha-react.  If not, see <http://www.gnu.org/licenses/>.
-import { makeStyles } from "@mui/styles";
-
-const dot = {
-  width: 7,
-  height: 7,
-  borderRadius: 3.5,
-  marginRight: 5,
-  border: "1px solid #CFCFCF",
-  backgroundColor: "#FFFFFF",
-}
-
-export const useStyles = makeStyles({
-  root: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    height: "100%"
-  },
-  captchasContainer: {
-    display: "flex",
-    flexDirection: "column",
-    background: "#FFFFFF",
-    border: "1px solid #CFCFCF",
-    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.2)"
-  },
-  captchasHeader: {
-    display: "flex",
-    alignItems: "center",
-    backgroundColor: "#bdbdbd",
-    height: 80,
-    paddingLeft: 20
-  },
-  captchasBody: {
-    display: "flex",
-    width: 460,
-    flexWrap: "wrap",
-    height: "max-content",
-    paddingTop: 10,
-    paddingLeft: 10,
-    borderBottom: "1px solid #CFCFCF"
-  },
-  captchasFooter: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    height: 80,
-    paddingLeft: 20,
-    paddingRight: 20
-  },
-  captchaItem: {
-    width: "140px !important",
-    borderRadius: 2,
-    height: "140px !important",
-    marginRight: 10,
-    marginBottom: 10
-  },
-  captchasHeaderLabel: {
-    color: "#ffffff"
-  },
-  dotsContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    paddingBottom: 15,
-    paddingTop: 10
-  },
-  dot,
-  dotActive: {
-    ...dot,
-    backgroundColor: "#CFCFCF"
-  },
-});