prosopo · HughParry · Mar 4, 2024 · Jan 29, 2024 · Jan 29, 2024 · Jan 30, 2024
@@ -1,5 +1,5 @@
 {
-    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnPaste": true,
     "editor.formatOnType": true,
     "editor.formatOnSave": true,

@@ -1,6 +1,6 @@
 {
     "source": {
-        "hash": "0x47ccf93a15772e2794acf525ebaa5e374d11453a4edb0bbdf9ce229e9b6bdc88",
+        "hash": "0x3b12eb50a5cb2fabebfce64d1e8ca88245ccde5a881d9d05c5429e6e98d11139",
         "language": "ink! 4.3.0",
         "compiler": "rustc 1.69.0",
         "build_info": {

@@ -1,6 +1,6 @@
 {
     "source": {
-        "hash": "0xd5d61042041d18e2435d77eb4ff86581dadfcf0ef213f4323db798a0c625d679",
+        "hash": "0x3a5d4eceea254f17ac1ce512b7e6a5857818bc2e657530d38bfdcbcc66450c49",
         "language": "ink! 4.3.0",
         "compiler": "rustc 1.69.0",
         "build_info": {

@@ -1,6 +1,6 @@
 {
     "source": {
-        "hash": "0x84e4819370416fa4461dcb132c1d5677c21394ebda33c618c9405398e91da7a7",
+        "hash": "0x81032e46912a91208f1053356c6cba5f949ca74887e2c727b2bdf7e653a3a56b",
         "language": "ink! 4.3.0",
         "compiler": "rustc 1.69.0",
         "build_info": {

@@ -0,0 +1,3 @@
+# Getting Started with the Client Example
+
+This project is a _minimal_ example demonstrating how to include Prosopo PoW Procaptcha in a client React app.
@@ -0,0 +1,8 @@
+PROSOPO_SITE_KEY=5HGjWAeFDfFCWPsjFQdVV2Msvz2XtMktvgocEZcCj68kUMaw
+PROSOPO_SUBSTRATE_ENDPOINT=ws://127.0.0.1:9944
+PROSOPO_CONTRACT_ADDRESS=
+PROSOPO_WEB2=true
+PROSOPO_SERVER_URL=http://localhost:9228
+PROSOPO_PORT=9234
+PROSOPO_DEFAULT_NETWORK=development
+PROSOPO_DEFAULT_ENVIRONMENT=development
@@ -0,0 +1,42 @@
+<!doctype html>
+<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.
+            Only files inside the `public` folder can be referenced from the HTML.
+
+            Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+            work correctly both with client-side routing and a non-root public URL.
+            Learn how to configure a non-root public URL by running `npm run build`.
+        -->
+        <title>Prosopo Procaptcha Client Login Example</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
+        <!--
+            This HTML file is a template.
+            If you open it directly in the browser, you will see an empty page.
+
+            You can add webfonts, meta tags, or analytics to this file.
+            The build step will place the bundled scripts into the <body> tag.
+
+            To begin the development, run `npm start` or `yarn start`.
+            To create a production bundle, use `npm run build` or `yarn build`.
+        -->
+    </body>
+</html>
@@ -0,0 +1,59 @@
+{
+    "name": "@prosopo/client-pow-example",
+    "version": "0.2.41",
+    "private": true,
+    "type": "module",
+    "engines": {
+        "node": ">=18",
+        "npm": ">=9"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.9.3",
+        "@emotion/styled": "^11.9.3",
+        "@mui/material": "^5.9.1",
+        "@prosopo/common": "0.2.41",
+        "@prosopo/procaptcha": "0.2.41",
+        "@prosopo/procaptcha-react": "0.2.41",
+        "@prosopo/types": "0.2.41",
+        "@types/react-dom": "^18.2.4",
+        "electron": "25.8.4",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "web-vitals": "^2.1.4",
+        "@prosopo/procaptcha-pow": "0.2.41"
+    },
+    "devDependencies": {
+        "@prosopo/cli": "0.2.41",
+        "@prosopo/config": "0.2.41",
+        "@types/node": "^20.3.1",
+        "css-loader": "^6.8.1",
+        "eslint-config-react-app": "^7.0.1",
+        "tslib": "2.6.2",
+        "typescript": "5.1.6"
+    },
+    "scripts": {
+        "start": "vite serve --mode=development --config vite.config.ts --port 9240 --host --force",
+        "build": "tsc --build --verbose",
+        "bundle:prod": "vite build --mode=production --config vite.config.ts --outDir dist --emptyOutDir",
+        "bundle:dev": "vite build --mode=development --config vite.config.ts --outDir dist --emptyOutDir",
+        "clean": "tsc --build --clean",
+        "eslint": "npx eslint . --no-error-on-unmatched-pattern --ignore-path ../../.eslintignore",
+        "eslint:fix": "npm run eslint -- --fix",
+        "prettier": "npx prettier . --check --no-error-on-unmatched-pattern --ignore-path ../../.eslintignore",
+        "prettier:fix": "npm run prettier -- --write",
+        "lint": "npm run eslint && npm run prettier",
+        "lint:fix": "npm run eslint:fix && npm run prettier:fix"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
+}
@@ -0,0 +1,40 @@
+// Copyright 2021-2023 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { EnvironmentTypes, EnvironmentTypesSchema, ProsopoClientConfigSchema } from '@prosopo/types'
+import { ProcaptchaPow } from '@prosopo/procaptcha-pow'
+import { useState } from 'react'
+
+function App() {
+    const [account, setAccount] = useState<string>('')
+    const config = ProsopoClientConfigSchema.parse({
+        userAccountAddress: account,
+        account: {
+            address: process.env.PROSOPO_SITE_KEY || '',
+        },
+        web2: process.env.PROSOPO_WEB2 === 'true',
+        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,
+    })
+    return (
+        <div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            <ProcaptchaPow config={config} />
+        </div>
+    )
+}
+
+export default App
@@ -0,0 +1,41 @@
+// Copyright 2021-2023 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// ../.env | .env.local | .env.development >>
+// PROSOPO_API_BASE_URL=http://localhost
+// PROSOPO_SITE_KEY=5FzjruAqyhRGV81pMb4yznNS7t52hNB8u2VC2N1P22j5QLY9
+
+import { EnvironmentTypesSchema, NetworkNamesSchema } from '@prosopo/types'
+import { ProsopoClientConfigInput } from '@prosopo/types'
+
+const getWeb2 = (): boolean | undefined => {
+    return process.env.PROSOPO_WEB2 === 'true' ? true : process.env.PROSOPO_WEB2 === 'false' ? false : undefined
+}
+
+const config: ProsopoClientConfigInput = {
+    account: {
+        address: process.env.PROSOPO_SITE_KEY || '',
+    },
+    userAccountAddress: '',
+    web2: getWeb2(),
+    defaultEnvironment: process.env.PROSOPO_DEFAULT_ENVIRONMENT
+        ? EnvironmentTypesSchema.parse(process.env.PROSOPO_DEFAULT_ENVIRONMENT)
+        : EnvironmentTypesSchema.enum.development,
+    defaultNetwork: process.env.PROSOPO_DEFAULT_NETWORK
+        ? NetworkNamesSchema.parse(process.env.PROSOPO_DEFAULT_NETWORK)
+        : NetworkNamesSchema.enum.development,
+    dappName: 'client-example',
+    serverUrl: process.env.PROSOPO_SERVER_URL || '',
+}
+
+export default config
@@ -0,0 +1,26 @@
+// Copyright 2021-2023 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { CssBaseline } from '@mui/material'
+import App from './App.js'
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+
+root.render(
+    <React.Fragment>
+        <CssBaseline />
+        <App />
+    </React.Fragment>
+)
@@ -0,0 +1,20 @@
+{
+    "extends": "../../tsconfig.esm.json",
+    "compilerOptions": {
+        "rootDir": "./src",
+        "outDir": "./dist",
+        "lib": ["dom", "dom.iterable", "esnext"]
+    },
+    "include": ["src", "src/**/*.json"],
+    "references": [
+        {
+            "path": "../../packages/procaptcha-pow"
+        },
+        {
+            "path": "../../packages/cli"
+        },
+        {
+            "path": "../../dev/config"
+        }
+    ]
+}
@@ -0,0 +1,60 @@
+import * as path from 'path'
+import { VitePluginCloseAndCopy } from '@prosopo/config'
+import { defineConfig } from 'vite'
+import { getLogger } from '@prosopo/common'
+import { loadEnv } from '@prosopo/cli'
+import react from '@vitejs/plugin-react'
+const logger = getLogger(`Info`, `vite.config.js`)
+const dir = path.resolve('.')
+loadEnv(dir)
+// https://vitejs.dev/config/
+export default defineConfig(function ({ command, mode }) {
+    logger.info(`Running at ${dir} in ${mode} mode`)
+    // NODE_ENV must be wrapped in quotes. We just set it to the mode and ignore what's in the env file, otherwise the
+    // mode and NODE_ENV can end up out of sync (one set to development and the other set to production, which causes
+    // issues like this: https://github.com/hashicorp/next-mdx-remote/pull/323
+    logger.info(`NODE_ENV: ${process.env.NODE_ENV}`)
+
+    // Set the env vars that we want to be available in the browser
+    const define = {
+        // used to stop websockets package from breaking
+        'process.env.WS_NO_BUFFER_UTIL': JSON.stringify('true'),
+        'process.env.WS_NO_UTF_8_VALIDATE': JSON.stringify('true'),
+        'process.env.NODE_ENV': JSON.stringify(mode),
+        'process.env.PROSOPO_SUBSTRATE_ENDPOINT': JSON.stringify(process.env.PROSOPO_SUBSTRATE_ENDPOINT),
+        'process.env.PROSOPO_DEFAULT_ENVIRONMENT': JSON.stringify(process.env.PROSOPO_DEFAULT_ENVIRONMENT),
+        // only needed if bundling with a site key
+        'process.env.PROSOPO_SITE_KEY': JSON.stringify(process.env.PROSOPO_SITE_KEY),
+        'process.env.PROSOPO_CONTRACT_ADDRESS': JSON.stringify(process.env.PROSOPO_CONTRACT_ADDRESS),
+        '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),
+    }
+    logger.debug('define', JSON.stringify(define))
+
+    return {
+        watch: false,
+        mode: 'development',
+        bundle: true,
+        define,
+        optimizeDeps: {
+            include: ['prop-types'],
+        },
+        esbuild: {
+            target: ['es2020', 'chrome60', 'edge18', 'firefox60', 'node12', 'safari11'],
+        },
+        build: {
+            modulePreload: { polyfill: true },
+            lib: { entry: path.resolve(__dirname, './index.html'), name: 'client_example' },
+        },
+        plugins: [
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            react(),
+            // Closes the bundler and copies the bundle to the client-bundle-example project unless we're in serve
+            // mode, in which case we don't want to close the bundler because it will close the server
+            command !== 'serve' ? VitePluginCloseAndCopy() : undefined,
+        ],
+        server: { port: process.env.PROSOPO_PORT ? Number(process.env.PROSOPO_PORT) : 9234 },
+    }
+})
@@ -71,6 +71,10 @@ export const getCommonPkgDir = () => {
     return `${getPackagesDir()}/common`
 }
 
+export const getAccountPkgDir = () => {
+    return `${getPackagesDir()}/account`
+}
+
 export const getApiPkgDir = () => {
     return `${getPackagesDir()}/api`
 }
@@ -115,6 +119,10 @@ export const getProcaptchaBundlePkgDir = () => {
     return `${getPackagesDir()}/procaptcha-bundle`
 }
 
+export const getProcaptchaPoWPkgDir = () => {
+    return `${getPackagesDir()}/procaptcha-pow`
+}
+
 export const getProviderPkgDir = () => {
     return `${getPackagesDir()}/provider`
 }
@@ -135,6 +143,10 @@ export const getTypesPkgDir = () => {
     return `${getPackagesDir()}/types`
 }
 
+export const getWebComponentsPkgDir = () => {
+    return `${getPackagesDir()}/web-components`
+}
+
 export const getContractsDir = () => {
     return `${getRootDir()}/contracts`
 }