@ubique-innovation/heidi-web-components NPM

Heidi Web Components (hwc)

This library provides components that can be used to display a qr code to transfer a proof to the Heidi wallet, or to verify a proof from the wallet.

Installation

pnpm install @ubique-innovation/heidi-web-components

Usage

The components can either be included using browser-native web components or with the generated React components. If the components are used in any environment but React, use the native web components. To do so, import the script file for each web component separately.

If you are using React, import the components from @ubique-innovation/heidi-web-components/react.

Setup

Before including any component, be sure to initialize the global configuration:

// bundler
import { config } from "@ubique-innovation/heidi-web-components";
config.init({ baseUrl: "https://your.base.url" });

// if you are not using react, also import the web-components
import "@ubique-innovation/heidi-web-components/components";

<!-- non bundler (html) -->
<head>
  ...
  <script type="module">
    import { config } from "https://cdn.jsdelivr.net/npm/@ubique-innovation/heidi-web-components/dist/main.js";
    config.init({
      baseUrl: "https://your.base.url",
    });
  </script>
  <!-- include script to webcomponents here -->
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/@ubique-innovation/heidi-web-components/dist/components.js"
  ></script>
</head>

Functions

Obtaining a token

import { initializeProcess } from "@ubique-innovation/heidi-web-components";
// import { initializeProcess } from "https://cdn.jsdelivr.net/npm/@ubique-innovation/heidi-web-components/dist/main.js";

// Pre Auth Flow
const { token } = await initializeProcess({
  action: "pre_auth_issuance",
  preAuthIssuanceData: {
    schemaIdentifier: {
      credentialIdentifier: "identifier",
      version: "0.0.1",
    },
    attributes: {
      attributeName: {
        value: "value",
        attributeType: "STRING",
      },
      ...
    },
    issuerSlug: "issuer-slug", //optional
  },
});

// Presentation Flow
const { token } = await initializeProcess({
  action: "presentation",
  presentationData: {
    proofSchemeId: "identifier",
  },
});

Components

Button (that opens lightbox)

Usage

<!-- non bundler (html) -->
<hwc-button id="my-button" token="set-token-here-or-from-js">
  <!-- this is the slotted element (see below) -->
  <a href="/">Fertig</a>
</hwc-button>

<script>
  const button = document.getElementById("my-button");
  // set token from js (or set it in the html)
  button.token = "your-token";

  // event listeners
  button.addEventListener("success", (e) => {
    console.log("success", e.detail);
  });
  button.addEventListener("close", () => {
    console.log("close");
  });
</script>

// react
import { HWCButton } from "@ubique-innovation/heidi-web-components/react";

function App() {
  return (
    <HWCButton
      token="your-token"
      onSuccess={(e) => console.log("success", e.detail)}
      onClose={() => console.log("close")}
    >
      // this is the slotted element (see below)
      <a href="/">Fertig</a>
    </HWCButton>
  );
}

Lightbox (uncontrolled)

Usage

<!-- non bundler (html) -->
<hwc-lightbox id="my-lightbox" token="set-token-here-or-from-js">
  <!-- this is the slotted element (see below) -->
  <a href="/"> Fertig </a>
</hwc-lightbox>

<script>
  const lightbox = document.getElementById("my-lightbox");
  // set token from js (or set it in the html)
  lightbox.token = "your-token";

  // control open state of lightbox
  lightbox.open = true;
  lightbox.open = false;

  // event listeners
  lightbox.addEventListener("success", (e) => {
    console.log("success", e.detail);
  });
  lightbox.addEventListener("close", () => {
    console.log("close");
  });
</script>

// react
import { HWCLightbox } from "@ubique-innovation/heidi-web-components/react";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <HWCLightbox
      token="your-token"
      open={isOpen}
      onClose={() => setIsOpen(false)}
      onSucces={(e) => console.log("success", e.detail)}
    >
      // this is the slotted element (see below)
      <a href="/">Fertig</a>
    </HWCLightbox>
  );
}

Transfer Proof

Usage

<!-- non bundler (html) -->
<hwc-transfer-proof token="set-token-here-or-from-js">
  <!-- this is the slotted element (see below) -->
  <a href="/">Fertig</a>
</hwc-transfer-proof>

<script>
  const transferProof = document.getElementById("my-transfer-proof");
  // set token from js (or set it in the html)
  transferProof.token = "your-token";

  // event listeners
  transferProof.addEventListener("success", (e) => {
    console.log("success", e.detail);
  });
</script>

// react
import { HWCTransferProof } from "@ubique-innovation/heidi-web-components/react";

function App() {
  return (
    <HWCTransferProof
      token="your-token"
      onSuccess={(e) => console.log("success", e.detail)}
    >
      // this is the slotted element (see below)
      <a href="/">Fertig</a>
    </HWCTransferProof>
  );
}

Attributes

name	type	default	required	description
`token`	`string`	–	yes	the token that is used to create the invite

Slot

The children are inserted into the confirmation screen. This slot is intended to show a button that links to some other screen after the proof was transferred successfully.

@lit/localize @lit/react a11y-dialog is-mobile lean-qr lit

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago