@anima-protocol/personhood-sdk-web-component v0.2.2

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/personhood-sdk-web-component@0.1.0-rc6/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

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