Widget sizing

README.md

@@ -127,7 +127,40 @@ data contains the following fields:
 
 ## Verify the User Response Server Side
 
-To verify a user's response on the server side, simpy import the `verify` function from `@prosopo/server` and pass it
+By adding the client side code, you were able to render a Procaptcha widget that identified if users were real people or
+automated bots. When the captcha succeeded, the Procaptcha script inserted unique data into your form data, which is
+then sent to your server for verification. The are currently two options for verifying the user's response server side:
+
+### Option 1. API Verification
+
+To verify that the token is indeed real and valid, you must now verify it at the API endpoint:
+
+https://api.prosopo.io/siteverify
+
+The endpoint expects a POST request with two parameters: your account secret and the `procaptcha-response` sent from
+your frontend HTML to your backend for verification. You can optionally include the user's IP address as an additional
+security check.
+
+A simple test will look like this:
+
+```bash
+curl -X POST https://api.prosopo.io/siteverify \
+-H "Content-Type: application/json" \
+-d 'PROCAPTCHA_RESPONSE'
+```
+
+Note that the endpoint expects the application/json Content-Type. You can see exactly what is sent
+using
+
+```bash
+curl -vv
+```
+
+in the example above.
+
+### Option 2. TypeScript Verification Package
+
+To verify a user's response using TypeScript, simpy import the `verify` function from `@prosopo/server` and pass it
 the `procaptcha-response` POST data. Types can be imported from `@prosopo/types`.
 
 ```typescript
@@ -141,5 +174,5 @@ if (await prosopoServer.isVerified(payload[ApiParams.procaptchaResponse])) {
 }
 ```
 
-There is an example server side implementation
+There is an example TypeScript server side implementation
 in [demos/client-example-server](https://github.com/prosopo/captcha/tree/main/demos/client-example-server).

demos/client-bundle-example/src/index.html

@@ -17,13 +17,17 @@
                     <label>Password</label>
                     <input type="password" required />
                 </div>
-                <div id="procaptcha-container"></div>
-                <!-- Dev sitekey -->
-                <div
-                    class="procaptcha"
-                    data-theme="light"
-                    data-sitekey="5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw"
-                ></div>
+                <div class="mui-textfield mui-textfield--float-label">
+                    <div id="procaptcha-container"></div>
+                </div>
+                <div class="mui-textfield mui-textfield--float-label">
+                    <!-- Dev sitekey -->
+                    <div
+                        class="procaptcha"
+                        data-theme="light"
+                        data-sitekey="5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw"
+                    ></div>
+                </div>
                 <input type="submit" class="mui-btn mui-btn--raised" />
             </form>
         </div>

demos/client-example/env.development

@@ -6,3 +6,4 @@ PROSOPO_SERVER_URL=http://localhost:9228
 PROSOPO_PORT=9230
 PROSOPO_DEFAULT_NETWORK=development
 PROSOPO_DEFAULT_ENVIRONMENT=development
+_DEV_ONLY_WATCH_EVENTS=true

demos/client-example/src/App.tsx

@@ -16,8 +16,8 @@ import {
     ApiParams,
     EnvironmentTypes,
     EnvironmentTypesSchema,
+    ProcaptchaConfigSchema,
     ProcaptchaOutput,
-    ProsopoClientConfigSchema,
 } from '@prosopo/types'
 import { ExtensionAccountSelect, Procaptcha } from '@prosopo/procaptcha-react'
 import { useState } from 'react'
@@ -40,7 +40,7 @@ function App() {
     // the result of the captcha process. Submit this to your backend server to verify the user is human on the backend
     const [procaptchaOutput, setProcaptchaOutput] = useState<ProcaptchaOutput | undefined>(undefined)
 
-    const config = ProsopoClientConfigSchema.parse({
+    const config = ProcaptchaConfigSchema.parse({
         userAccountAddress: account,
         account: {
             address: process.env.PROSOPO_SITE_KEY || '',
@@ -49,8 +49,8 @@ function App() {
         dappName: 'client-example',
         defaultEnvironment:
             (process.env.PROSOPO_DEFAULT_ENVIRONMENT as EnvironmentTypes) || EnvironmentTypesSchema.enum.development,
-        serverUrl: process.env.PROSOPO_SERVER_URL || '',
-        atlasUri: process.env._DEV_ONLY_WATCH_EVENTS === 'true' || false,
+        serverUrl: process.env.PROSOPO_SERVER_URL,
+        devOnlyWatchEvents: process.env._DEV_ONLY_WATCH_EVENTS === 'true' || false,
     })
 
     const label = isLogin ? 'Login' : 'Sign up'
@@ -202,28 +202,31 @@ function App() {
                                     />
                                 </FormControl>
 
-                                <Procaptcha
-                                    config={config}
-                                    callbacks={{ onAccountNotFound, onError, onHuman, onExpired }}
-                                />
-
-                                <Box sx={{ p: 1 }}>
-                                    <Stack direction="column" spacing={1} sx={{ '& button': { m: 1 } }}>
-                                        <Button
-                                            variant="contained"
-                                            onClick={onActionHandler}
-                                            disabled={!procaptchaOutput}
-                                        >
-                                            {isLogin ? 'Login' : 'Sign up'}
-                                        </Button>
-                                        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-                                            <Box>
-                                                <Typography>- or -</Typography>
+                                <FormControl sx={{ m: 1 }}>
+                                    <Procaptcha
+                                        config={config}
+                                        callbacks={{ onAccountNotFound, onError, onHuman, onExpired }}
+                                    />
+                                </FormControl>
+                                <FormControl>
+                                    <Box sx={{ p: 1 }}>
+                                        <Stack direction="column" spacing={1} sx={{ '& button': { m: 1 } }}>
+                                            <Button
+                                                variant="contained"
+                                                onClick={onActionHandler}
+                                                disabled={!procaptchaOutput}
+                                            >
+                                                {isLogin ? 'Login' : 'Sign up'}
+                                            </Button>
+                                            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                                                <Box>
+                                                    <Typography>- or -</Typography>
+                                                </Box>
                                             </Box>
-                                        </Box>
-                                        <Button onClick={onChangeHandler}>{isLogin ? 'Signup' : 'Login'}</Button>
-                                    </Stack>
-                                </Box>
+                                            <Button onClick={onChangeHandler}>{isLogin ? 'Signup' : 'Login'}</Button>
+                                        </Stack>
+                                    </Box>
+                                </FormControl>
                             </FormGroup>
                         </form>
                     </Box>

demos/client-example/vite.config.ts

@@ -29,6 +29,7 @@ export default defineConfig(function ({ command, mode }) {
         'process.env.PROSOPO_WEB2': JSON.stringify(process.env.PROSOPO_WEB2),
         'process.env.PROSOPO_SERVER_URL': JSON.stringify(process.env.PROSOPO_SERVER_URL),
         'process.env.PROSOPO_PORT': JSON.stringify(process.env.PROSOPO_PORT),
+        'process.env._DEV_ONLY_WATCH_EVENTS': JSON.stringify(process.env._DEV_ONLY_WATCH_EVENTS),
     }
     logger.debug('define', JSON.stringify(define))
 

demos/client-pow-example/index.html

@@ -2,17 +2,11 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
+
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
         <meta name="description" content="Prosopo procaptcha client login example" />
-        <link rel="apple-touch-icon" href="logo192.png" />
-        <!--
-            manifest.json provides metadata used when your web app is installed on a
-            user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-        -->
-        <link rel="manifest" href="manifest.json" />
+
         <!--
             Notice the use of %PUBLIC_URL% in the tags above.
             It will be replaced with the URL of the `public` folder during the build.

demos/client-pow-example/src/App.tsx

@@ -31,7 +31,7 @@ function App() {
         atlasUri: process.env._DEV_ONLY_WATCH_EVENTS === 'true' || false,
     })
     return (
-        <div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <div style={{ height: '100%', display: 'block', justifyContent: 'center', alignItems: 'center' }}>
             <ProcaptchaPow config={config} />
         </div>
     )

dev/config/src/vite/vite.backend.config.ts

@@ -65,6 +65,12 @@ export default async function (
         ...(process.env.PROSOPO_DEFAULT_NETWORK && {
             'process.env.PROSOPO_DEFAULT_NETWORK': JSON.stringify(process.env.PROSOPO_DEFAULT_NETWORK),
         }),
+        ...(process.env.PROSOPO_SUBSTRATE_ENDPOINT && {
+            'process.env.PROSOPO_SUBSTRATE_ENDPOINT': JSON.stringify(process.env.PROSOPO_SUBSTRATE_ENDPOINT),
+        }),
+        ...(process.env.PROSOPO_CONTRACT_ADDRESS && {
+            'process.env.PROSOPO_CONTRACT_ADDRESS': JSON.stringify(process.env.PROSOPO_CONTRACT_ADDRESS),
+        }),
     }
 
     logger.info(`Defined vars ${JSON.stringify(define, null, 2)}`)

dev/scripts/env.development

@@ -12,3 +12,5 @@ NODE_ENV=development
 PROSOPO_LOG_LEVEL=debug
 PROSOPO_DEFAULT_ENVIRONMENT=development
 PROSOPO_DEFAULT_NETWORK=development
+_DEV_ONLY_ATLAS_URI=
+_DEV_ONLY_WATCH_EVENTS=true

dev/scripts/src/setup/setup.ts

@@ -44,10 +44,9 @@ function getDatasetFilePath() {
 }
 
 function getDefaultProvider(): IProviderAccount {
+    const host = process.env.PROSOPO_PROVIDER_HOST || 'localhost'
     return {
-        url: process.env.PROSOPO_API_PORT
-            ? `http://localhost:${process.env.PROSOPO_API_PORT}`
-            : 'http://localhost:9229',
+        url: process.env.PROSOPO_API_PORT ? `http://${host}:${process.env.PROSOPO_API_PORT}` : `http://${host}:9229`,
         fee: 10,
         payee: Payee.dapp,
         stake: Math.pow(10, 13),