Pow account fix (#1114)

* lint and add lint to PR creation process

* Fix human path

* Undo site key change

* lint:fix

.github/workflows/bump_version.yml

@@ -107,6 +107,9 @@ jobs:
                   # rebuild typechain
                   npm run build:typechain
 
+                  # lint
+                  npm run lint:fix
+
                   # set the author in git
                   git config user.name "prosoponator[bot]"
                   git config user.email "[email protected]"

demos/client-example/src/App.tsx

@@ -54,7 +54,7 @@ function App(props: AppProps) {
         dappName: 'client-example',
         defaultEnvironment:
             (process.env.PROSOPO_DEFAULT_ENVIRONMENT as EnvironmentTypes) || EnvironmentTypesSchema.enum.development,
-        serverUrl: process.env.PROSOPO_SERVER_URL || '',
+        serverUrl: process.env.PROSOPO_SERVER_URL || 'localhost:9228',
         mongoAtlasUri: process.env.PROSOPO_MONGO_EVENTS_URI || '',
         devOnlyWatchEvents: process.env._DEV_ONLY_WATCH_EVENTS === 'true' || false,
     })
@@ -63,8 +63,9 @@ function App(props: AppProps) {
     const urlPath = isLogin ? 'login' : 'signup'
 
     const onLoggedIn = (token: string) => {
-        console.log('getting private resource with token ', token)
-        fetch(new URL('/private', config.serverUrl).href, {
+        const url = new URL('/private', config.serverUrl).href
+        console.log('getting private resource with token ', token, 'at', url)
+        fetch(url, {
             method: 'GET',
             headers: {
                 Origin: 'http://localhost:9230', // TODO: change this to env var
@@ -98,7 +99,9 @@ function App(props: AppProps) {
             password,
             [ApiParams.procaptchaResponse]: procaptchaOutput,
         }
-        fetch(new URL(urlPath, config.serverUrl).href, {
+        const url = new URL(urlPath, config.serverUrl).href
+        console.log('posting to', url, 'with payload', payload)
+        fetch(url, {
             method: 'POST',
             headers: {
                 ...corsHeaders,

packages/account/src/extension/ExtensionWeb2.ts

@@ -76,7 +76,7 @@ export class ExtensionWeb2 extends Extension {
                 },
             },
             name: 'procaptcha-web2',
-            version: '0.1.11',
+            version: '0.3.x',
             signer,
         }
     }

packages/api/src/api/ProviderApi.ts

@@ -13,6 +13,7 @@
 // limitations under the License.
 import { AccountId } from '@prosopo/captcha-contract'
 import {
+    ApiParams,
     ApiPaths,
     CaptchaResponseBody,
     CaptchaSolution,
@@ -25,6 +26,7 @@ import {
     PowCaptchaSolutionResponse,
     ProviderRegistered,
     StoredEvents,
+    SubmitPowCaptchaSolutionBodyType,
     VerificationResponse,
     VerifySolutionBodyType,
 } from '@prosopo/types'
@@ -63,8 +65,8 @@ export default class ProviderApi extends HttpClientBase implements ProviderApi {
         const captchaSolutionBody: CaptchaSolutionBodyType = CaptchaSolutionBody.parse({
             captchas,
             requestHash,
-            user: userAccount,
-            dapp: this.account,
+            [ApiParams.user]: userAccount,
+            [ApiParams.dapp]: this.account,
             salt,
             signature,
         })
@@ -78,10 +80,10 @@ export default class ProviderApi extends HttpClientBase implements ProviderApi {
         maxVerifiedTime?: number
     ): Promise<ImageVerificationResponse> {
         const payload: {
-            dapp: AccountId
-            user: AccountId
-            commitmentId?: string
-            maxVerifiedTime?: number
+            [ApiParams.dapp]: AccountId
+            [ApiParams.user]: AccountId
+            [ApiParams.commitmentId]?: string
+            [ApiParams.maxVerifiedTime]?: number
         } = { dapp: dapp, user: userAccount }
         if (commitmentId) {
             payload['commitmentId'] = commitmentId
@@ -103,17 +105,18 @@ export default class ProviderApi extends HttpClientBase implements ProviderApi {
         randomProvider: RandomProvider,
         nonce: number
     ): Promise<PowCaptchaSolutionResponse> {
-        const { provider, blockNumber } = randomProvider
-        return this.post(ApiPaths.SubmitPowCaptchaSolution, {
-            blockNumber,
-            challenge: challenge.challenge,
-            difficulty: challenge.difficulty,
-            signature: challenge.signature,
-            userAccount,
-            dappAccount,
-            provider,
-            nonce,
-        })
+        const { blockNumber } = randomProvider
+        const body: SubmitPowCaptchaSolutionBodyType = {
+            [ApiParams.blockNumber]: blockNumber,
+            [ApiParams.challenge]: challenge.challenge,
+            [ApiParams.difficulty]: challenge.difficulty,
+            [ApiParams.signature]: challenge.signature,
+            // TODO add utility to convert `AccountId` to string
+            [ApiParams.user]: userAccount.toString(),
+            [ApiParams.dapp]: dappAccount.toString(),
+            [ApiParams.nonce]: nonce,
+        }
+        return this.post(ApiPaths.SubmitPowCaptchaSolution, body)
     }
 
     public submitUserEvents(events: StoredEvents, accountId: AccountId) {
@@ -128,7 +131,7 @@ export default class ProviderApi extends HttpClientBase implements ProviderApi {
         return this.fetch(ApiPaths.GetProviderDetails)
     }
 
-    public getPowCaptchaVerify(challengeId: string, dappAccount: string): Promise<VerificationResponse> {
-        return this.post(ApiPaths.ServerPowCaptchaVerify, { challengeId, dappAccount })
+    public submitPowCaptchaVerify(challenge: string, dapp: string): Promise<VerificationResponse> {
+        return this.post(ApiPaths.ServerPowCaptchaVerify, { [ApiParams.challenge]: challenge, [ApiParams.dapp]: dapp })
     }
 }

packages/common/src/locales/en.json

@@ -1,4 +1,7 @@
 {
+    "ACCOUNT": {
+        "NO_POLKADOT_EXTENSION": "Polkadot extension not found"
+    },
     "WIDGET": {
         "SELECT_ALL": "Select all images containing a",
         "NEXT": "Next",
@@ -158,7 +161,6 @@
         "INVALID_DIR_FORMAT": "Invalid directory format"
     },
     "PROGUI": {
-        "NO_STATE_PROVIDER": "useGlobalState must be used within a GlobalStateProvider",
-        "NO_POLKADOT_EXTENSION": "Polkadot extension not found"
+        "NO_STATE_PROVIDER": "useGlobalState must be used within a GlobalStateProvider"
     }
 }

packages/procaptcha-pow/src/Services/Manager.ts

@@ -142,11 +142,19 @@ export const Manager = (
         }
 
         resetState()
+
+        const config = getConfig()
+
+        // use the passed in account (could be web3) or the zero account
+        const userAccount = config.userAccountAddress || '5C4hrfjw9DjXZTzV3MwzrrAr9P1MJhSrvWGWqi1eSuyUpnhM'
+
         // set the loading flag to true (allow UI to show some sort of loading / pending indicator while we get the captcha process going)
-        updateState({ loading: true })
+        updateState({
+            loading: true,
+            account: { account: { address: userAccount } },
+        })
 
         // snapshot the config into the state
-        const config = getConfig()
         updateState({ dappAccount: config.account.address })
 
         // allow UI to catch up with the loading state
@@ -180,20 +188,24 @@ export const Manager = (
         const challenge = await providerApi.getPowCaptchaChallenge(account.account.address, getDappAccount())
 
         const solution = solvePoW(challenge.challenge, challenge.difficulty)
-        await providerApi.submitPowCaptchaSolution(
+        const verifiedSolution = await providerApi.submitPowCaptchaSolution(
             challenge,
             getAccount().account.address,
             getDappAccount(),
             getRandomProviderResponse,
             solution
         )
-        if (state.isHuman) {
+        if (verifiedSolution[ApiParams.verified]) {
+            updateState({
+                isHuman: true,
+                loading: false,
+            })
             events.onHuman({
                 providerUrl,
                 [ApiParams.user]: getAccount().account.address,
                 [ApiParams.dapp]: getDappAccount(),
-                [ApiParams.challengeId]: challenge.challenge,
-                [ApiParams.blockNumber]: getBlockNumber(),
+                [ApiParams.challenge]: challenge.challenge,
+                [ApiParams.blockNumber]: getRandomProviderResponse.blockNumber,
             })
         }
     }

packages/procaptcha-pow/src/components/Captcha.tsx

@@ -16,8 +16,11 @@ import {
     ContainerDiv,
     LoadingSpinner,
     Logo,
+    WIDGET_BORDER,
+    WIDGET_BORDER_RADIUS,
     WIDGET_DIMENSIONS,
     WIDGET_INNER_HEIGHT,
+    WIDGET_PADDING,
     WIDGET_URL,
     WIDGET_URL_TEXT,
     WidthBasedStylesDiv,
@@ -48,11 +51,11 @@ const Procaptcha = (props: ProcaptchaProps) => {
                             {' '}
                             <div
                                 style={{
-                                    padding: '2px',
-                                    border: '1px solid',
+                                    padding: WIDGET_PADDING,
+                                    border: WIDGET_BORDER,
                                     backgroundColor: theme.palette.background.default,
                                     borderColor: theme.palette.grey[300],
-                                    borderRadius: '4px',
+                                    borderRadius: WIDGET_BORDER_RADIUS,
                                     display: 'flex',
                                     alignItems: 'center',
                                     flexWrap: 'wrap',

packages/procaptcha-react/src/components/ProcaptchaWidget.tsx

@@ -16,8 +16,11 @@ import {
     Checkbox,
     ContainerDiv,
     LoadingSpinner,
+    WIDGET_BORDER,
+    WIDGET_BORDER_RADIUS,
     WIDGET_DIMENSIONS,
     WIDGET_INNER_HEIGHT,
+    WIDGET_PADDING,
     WIDGET_URL,
     WIDGET_URL_TEXT,
     WidthBasedStylesDiv,
@@ -66,11 +69,11 @@ const ProcaptchaWidget = (props: ProcaptchaProps) => {
                             {' '}
                             <div
                                 style={{
-                                    padding: '2px',
-                                    border: '1px solid',
+                                    padding: WIDGET_PADDING,
+                                    border: WIDGET_BORDER,
                                     backgroundColor: theme.palette.background.default,
                                     borderColor: theme.palette.grey[300],
-                                    borderRadius: '8px',
+                                    borderRadius: WIDGET_BORDER_RADIUS,
                                     display: 'flex',
                                     alignItems: 'center',
                                     flexWrap: 'wrap',

packages/procaptcha/src/modules/Manager.ts

@@ -301,7 +301,7 @@ export function Manager(
 
             const account = getAccount()
             const blockNumber = getBlockNumber()
-            const signer = account.extension.signer
+            const signer = getExtension(account).signer
 
             const first = at<CaptchaWithProof>(challenge.captchas, 0)
             if (!first.captcha.datasetId) {
@@ -516,6 +516,14 @@ export function Manager(
         return blockNumber
     }
 
+    const getExtension = (account?: Account) => {
+        account = account || getAccount()
+        if (!account.extension) {
+            throw new ProsopoEnvError('ACCOUNT.NO_POLKADOT_EXTENSION', { context: { error: 'Extension not loaded' } })
+        }
+        return account.extension
+    }
+
     /**
      * Load the contract instance using addresses from config.
      */