@ubique-innovation/heidi-web-components
v1.0.0-alpha.12
Published
<div align="center"> <a href="https://ubique.ch" target="_blank"> <img src="./.github/assets/ub-logo.svg" width="120" style="margin-right: 32px;"> <img src="./.github/assets/app-icon.svg" width="90"> </a> </div>
Readme
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-componentsUsage
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";
config.init({ baseUrl: "https://your.base.url" });
// if you are not using react, also import the web-components
import "@ubique-innovation/heidi-web-components";<!-- non bundler (html esm) -->
<head>
...
<script type="module">
import { config } from "https://cdn.jsdelivr.net/npm/@ubique-innovation/heidi-web-components/dist/config.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/main.js"
></script>
</head><!-- non bundler (html umd) -->
<head>
...
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@ubique-innovation/heidi-web-components/dist/main.umd.js"
></script>
</head>
<body>
<hwc-button>Test</hwc-button>
<script>
HeidiWebComponents.config.init({
baseUrl: "https://your.base.url",
});
</script>
</body>Functions
Obtaining a token
import { initializeProcess } from "@ubique-innovation/heidi-web-components/utils";
// 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 |
| showDisclosureInfo | boolean | false | no | whether to show the disclosure information for the current presentation |
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.