# zkpoh-widget

> ZK Proof of Humanity Widget

Latest version **0.1.8** (published 2023-05-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install zkpoh-widget
pnpm add zkpoh-widget
yarn add zkpoh-widget
bun add zkpoh-widget
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2023-05-07 |
| First published | 2023-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 4.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Maintainers | elm0l |

## Links

- npm: https://www.npmjs.com/package/zkpoh-widget
- Repository: https://github.com/elmol/zk-proof-of-humanity
- Issues: https://github.com/elmol/zk-proof-of-humanity/issues
- npm.io page: https://npm.io/package/zkpoh-widget

## Dependencies (11)

- [react](https://npm.io/package/react.md) 18.2.0
- [wagmi](https://npm.io/package/wagmi.md) ^0.12.1
- [react-dom](https://npm.io/package/react-dom.md) 18.2.0
- [react-no-ssr](https://npm.io/package/react-no-ssr.md) ^1.1.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.6
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.6
- [@chakra-ui/react](https://npm.io/package/@chakra-ui/react.md) ^2.5.1
- [@semaphore-protocol/data](https://npm.io/package/@semaphore-protocol/data.md) 3.9.0
- [@semaphore-protocol/group](https://npm.io/package/@semaphore-protocol/group.md) 3.9.0
- [@semaphore-protocol/proof](https://npm.io/package/@semaphore-protocol/proof.md) 3.9.0
- [@semaphore-protocol/identity](https://npm.io/package/@semaphore-protocol/identity.md) 3.9.0

## Recent versions

- 0.1.8 (latest) — 2023-05-07
- 0.1.7 — 2023-05-07
- 0.1.6 — 2023-05-01
- 0.1.5 — 2023-05-01
- 0.1.4 — 2023-04-30
- 0.1.3 — 2023-04-30
- 0.1.2 — 2023-04-28
- 0.1.1 — 2023-04-25

## README

<p align="center">
    <h1 align="center">
         🎭 ZK Proof of Humanity Widget
    </h1>
</p>

<p style="text-align:center;">
A react library to easily integrate your projects with <b>ZK Proof of Humanity</b> 
</p>

## 🛠 Installation
### npm or yarn

Install the `zkpoh-widget` package with npm:

```bash
npm i zkpoh-widget
```

or yarn:

```bash
yarn add zkpoh-widget
```
## 📜 Usage

### 💡 Use cases of ZKPoHConnect React component

It could be used to cast LIKE signals to a Post
```html
...
<ZKPoHConnect signal={'LIKE'} externalNullifier={postId}>Like</ZKPoHConnect>
...
```
Or to give feedback

```html
...
<ZKPoHConnect signal={feedback} externalNullifier={postId}>Feedback</ZKPoHConnect>
...
```

Or to vote

```html
...
<ZKPoHConnect signal={ballot} externalNullifier={proposalId}>Vote</ZKPoHConnect>
...
```

Or just to prove that you are human.

```html
...
<ZKPoHConnect signal={"I'm human"} externalNullifier={verificationCode}>Prove</ZKPoHConnect>
...
```

## 📚 Prerequisites

`<ZKPoHConnect\>` react component uses [wagmi.sh](https://wagmi.sh/) as its connection provider to interact with the blockchain and [Chakra UI](https://chakra-ui.com/) 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:

```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
### Initial configuration

A [wagmi.sh](https://wagmi.sh/) config should be provider to use `<ZKPoHConnect\>` 

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 (
    <>
        <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](https://chakra-ui.com/) theme

```html
...
<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 <ZKPoHConnect> component, you can get real-time updates on the state of the component and the actions being performed.

---
_Source: https://npm.io/package/zkpoh-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._