zkpoh-widget
v0.1.8
Published
ZK Proof of Humanity Widget
Downloads
2
Readme
🛠 Installation
npm or yarn
Install the zkpoh-widget
package with npm:
npm i zkpoh-widget
or yarn:
yarn add zkpoh-widget
📜 Usage
💡 Use cases of ZKPoHConnect React component
It could be used to cast LIKE signals to a Post
...
<ZKPoHConnect signal={'LIKE'} externalNullifier={postId}>Like</ZKPoHConnect>
...
Or to give feedback
...
<ZKPoHConnect signal={feedback} externalNullifier={postId}>Feedback</ZKPoHConnect>
...
Or to vote
...
<ZKPoHConnect signal={ballot} externalNullifier={proposalId}>Vote</ZKPoHConnect>
...
Or just to prove that you are human.
...
<ZKPoHConnect signal={"I'm human"} externalNullifier={verificationCode}>Prove</ZKPoHConnect>
...
📚 Prerequisites
<ZKPoHConnect\>
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"
Caveat: fs config
fs configuration is required. next.config.js
file should be updated to include fs configuration.
example:
/** @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
Initial configuration
A wagmi.sh config should be provider to use <ZKPoHConnect\>
For example:
const { chains, provider } = configureChains([goerli, localhost], [publicProvider()]);
const client = createClient({
autoConnect: true,
connectors: [new InjectedConnector({ chains })],
provider,
});
export default function Home() {
return (
<>
<WagmiConfig client={client}>
<ZKPoHConnect signal={'LIKE'} externalNullifier={postId}>Like</ZKPoHConnect>
</WagmiConfig>
</>
);
}
ZKPoHConnect properties
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.
Chakra UI theme configuration
It's possible to configure a Chakra UI theme
...
<ZKPoHConnect theme:{theme} signal={'LIKE'} externalNullifier={postId}>Like</ZKPoHConnect>
...
Customized messages
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,
custom contract address
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.
Callbacks
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.