personhood-sdk-web-component

Personhood SDK

Visit anima.io | Read the Anima documentation

Install

In your index html

In your index.html add this in the head:

    <script
      src="https://unpkg.com/@anima_protocol/[email protected]/dist/index.js"
    ></script>

With Yarn

first

yarn add @anima_protocol/personhood-sdk-web-component

after in your index

import  "@anima_protocol/personhood-sdk-web-component"

With NPM

first

npm install @anima_protocol/personhood-sdk-web-component

after in your index

import  "@anima_protocol/personhood-sdk-web-component"

Usage

<anima-personhood
    session-id="SESSION_ID"
    chain-id="CHAIN_ID"
    address="ADDRESS"
/>

Attributes list

| Attribute name | Attribute type | Default | Required | Description | | ------------------ | --------------------------------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------------- | | session-id | string | '' | Y | Session can be referred as a customer verification session. More info | | address | string | '' | Y | Your user account Web3 wallet address | | chain-id | string | '1' | N | Your Web3 wallet chain id |

Event

sign

This event is triggered when the user wants to sign their proof to share it or create an anima

document.getElementsByTagName("anima-personhood").addEventListener("sign", async (e) => {
    try {
    const data = await YOUR_WALLET.sign(e.detail.payload);
    e.detail.signSuccess(data);
    } catch (error) {
    e.detail.signError(error);
    }
})

1. payload: string The data to sign detail.data.
2. signSuccess: (signature: string) => void If the sign is success you can send the signature to the SDK with this callback When the signing is successful, you can send the signature to the SDK with this callback detail.signSuccess(data).
3. signError: (signature: unknown) => void When you have an error in the signature, you can send the error to the SDK with this callback detail.signError(error).

shared

document.getElementsByTagName("anima-personhood").addEventListener("shared", async (e) => {
   if(e.detail.verified) {

   } else {

   }
})

This event is triggered when the user has shared their proof. Then you have e.detail.verified: boolean is True when the user is successfull onboarded

Fixing WebComponent lint issues

React

Create index.d.ts in your root project (src) then add this to solve your lint error:

import { DOMAttributes, DetailedHTMLProps, HTMLAttributes } from 'react'

interface SignEvent extends CustomEvent {
    detail: {
        payload: string
        signSuccess: (param: string) => void
        signError: (e: unknown) => void
    }
}
interface SharedEvent extends CustomEvent {
    detail: {
        verified: boolean
    }
}
interface HTMLAnimaPersonhoodEventMap extends HTMLElementEventMap {
    sign: SignEvent
    shared: SharedEvent
}

interface HTMLAnimaPersonhoodElement extends HTMLElement {
    addEventListener<K extends keyof HTMLAnimaPersonhoodEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLAnimaPersonhoodEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
    removeEventListener<K extends keyof HTMLAnimaPersonhoodEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLAnimaPersonhoodEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
}

export interface AnimaPersonhoodHTMLAttributes<T> extends HTMLAttributes<T> {
    address: string
    ['chain-id']?: string
    ['session-id']: string
    ['storj-url']?: string
    ['synaps-url']?: string
}

declare global {
    namespace JSX {
        interface IntrinsicElements {
            ['anima-personhood']: DetailedHTMLProps<AnimaPersonhoodHTMLAttributes<HTMLAnimaPersonhoodElement>, HTMLAnimaPersonhoodElement>;
        }
    }
}

Examples

React

License

Apache 2.0 © Anima