ZK Proof of Humanity Widget
npm install zkpoh-widget
A react library to easily integrate your projects with ZK Proof of Humanity
Install the zkpoh-widget package with npm:
``bash`
npm i zkpoh-widget
or yarn:
`bash`
yarn add zkpoh-widget📜 Usage
It could be used to cast LIKE signals to a Post
`html`
...
...
Or to give feedback
`html`
...
...
Or to vote
`html`
...
...
Or just to prove that you are human.
`html`
...
...
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
`
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 (
<>
>
);
}
`
`0x${string}
export interface ZKPoHConnectProps {
externalNullifier: BigNumber | undefined,
signal: string,
children: ReactNode,
theme?: Dict | undefined,
confirmationMessage?: string,
helpText?: string,
contractAddress?: | undefined;`
onChangeState?: (state: ConnectionState) => void,
onLog?: (state: ButtonActionState) => void,
};
externalNullifier ans signal are required parameters, also the children of the tag.
It's possible to configure a Chakra UI theme
`html`
...
...
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.
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