Proof-of-Humanity Core Component for React.
Used as a wrapper for PoH validators.
https://poh-counter.bakoush.in (source code)
npm install poh-react
import { ProofOfHumanityProvider } from 'poh-react';
<ProofOfHumanityProvider>
<App />
</ProofOfHumanityProvider>;
2. Initialize at least one PoH validator plugin (e.g. poh-validator-hcaptcha)
import hCaptchaValidator from 'poh-validator-hcaptcha';
const validator = (
<HCaptchaValidator
sitekey="10000000-ffff-ffff-ffff-000000000001"
url="http://localhost:3000/api/v1/proof"
/>
);
import { useProofOfHumanity } from 'poh-react';
const { getProofOfHumanity } = useProofOfHumanity(validator);
const handleClick = () => {
try {
const { error, errorMessage, proof } = await getProofOfHumanity();
if (!error) {
const tx = await mySmartContract.someImportantMethod(proof);
}
} catch(error) {
console.error(error);
}
}
<button onClick={handleClick}>Send transaction</button>
The method in the smart contract must know how to deal with the
proof
. You can leverage a Solidity library just for that: poh-contracts
If you want to use sovereign PoH instead of the basic one, you have to provide additional options
object to useProofOfHumanity
hook.
Options
object has two properties:
type
– ifsovereign
, the PoH component should ask the user to confirm their address ownership. The default value isbasic
ethereum
– specifies MetaMask API used to sign address ownership confirmation
Example:
import { useProofOfHumanity } from 'poh-react';
const { getProofOfHumanity } = useProofOfHumanity(validator, {
type: 'sovereign',
ethereum
});
Validator plugin component must be a React component accepting the following props:
renderLogoOnly
(boolean) – if true
, the component should render its own logo instead of actual validator interface
data
(string) – data (a hex string) to be included into signed proof-of-humanity. Can be a random hex challege, or a random hex challenge along with address owner signature
onVerify
(function) – must be called once validation is complete with the object with following keys as the only parameter:
-
error
(boolean) –true
in case of error; otherwisefalse
-
errorMessage
(string) – in case of error; otherwisenull
-
proof
(string): proof-of-humanity (a hex string);null
in case of error
Example plugin: hCaptcha validator
- Proof-of-HUMANity on-chain: protect your smart contracts from bots
- Proof-of-Humanity hCaptcha Validator API
- Proof-of-Humanity hCaptcha Validator React
- Proof-of-Humanity Solidity Contracts
- Counter dApp Example
Alex Bakoushin
MIT