🎭 ZK Proof of Humanity Widget

A react library to easily integrate your projects with ZK Proof of Humanity

🛠 Installation

$3

Install the zkpoh-widget package with npm:

``bash
npm i zkpoh-widget
`

or yarn:

`bash
yarn add zkpoh-widget
`


📜 Usage

$3

It could be used to cast LIKE signals to a Post
`html
...
Like
...
`
Or to give feedback

`html
...
Feedback
...
`

Or to vote

`html
...
Vote
...
`

Or just to prove that you are human.

`html
...
Prove
...
`

📚 Prerequisites

react component uses wagmi.sh as its connection provider to interact with the blockchain and Chakra UI for its UI components.

The following dependencies are needed:

`
"@semaphore-protocol/data": "3.9.0",
"@semaphore-protocol/group": "3.9.0",
"@semaphore-protocol/identity": "3.9.0",
"@semaphore-protocol/proof": "3.9.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-no-ssr": "^1.1.0",
"wagmi": "0.12.1",
"@chakra-ui/react": "^2.5.1",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6"
`


$3

fs configuration is required. next.config.js file should be updated to include fs configuration.

example:

`typescript
/* @type {import('next').NextConfig} /
const fs = require("fs")

const nextConfig = {
reactStrictMode: true,
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback = {
fs: false
}
}

return config
}
}

module.exports = nextConfig

`

⚙️ Configuration

A wagmi.sh config should be provider to use

For example:

`typescript
const { chains, provider } = configureChains([goerli, localhost], [publicProvider()]);

const client = createClient({
autoConnect: true,
connectors: [new InjectedConnector({ chains })],
provider,
});

export default function Home() {
return (
<>


Like



);
}

`

$3

`
export interface ZKPoHConnectProps {
externalNullifier: BigNumber | undefined,
signal: string,
children: ReactNode,
theme?: Dict | undefined,
confirmationMessage?: string,
helpText?: string,
contractAddress?:0x${string} | undefined;
onChangeState?: (state: ConnectionState) => void,
onLog?: (state: ButtonActionState) => void,
};
`

externalNullifier ans signal are required parameters, also the children of the tag.

$3

It's possible to configure a Chakra UI theme

`html
...
Like
...
`

$3

You can customize the helpText used on the 'prove' action, as well as the confirmationMessage that is displayed when the signal casting is complete

`
confirmationMessage?: string,
helpText?: string,
`


$3

It is possible to define a custom contract address for the zk proof of humanity by setting the contractAddress property. By default, it is set to the deployment on goerli.

$3

If you want to receive updates on the state of the buttons or view logs of the actions being performed, you can configure the onChangeState and onLog` callbacks. By passing these callbacks as props to the component, you can get real-time updates on the state of the component and the actions being performed.