Gathering detailed insights and metrics for @ubique-innovation/heidi-web-components
Gathering detailed insights and metrics for @ubique-innovation/heidi-web-components
Installations
npm install @ubique-innovation/heidi-web-componentsDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
22.17.0
NPM Version
10.9.2
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
1.0.0-alpha.0
Package Id
@ubique-innovation/heidi-web-components@1.0.0-alpha.0
Unpacked Size
954.74 kB
Size
358.72 kB
File Count
46
NPM Version
10.9.2
Node Version
22.17.0
Published on
Jul 16, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
9
Peer Dependencies
1
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
1pnpm 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:
1// bundler 2import { config } from "@ubique-innovation/heidi-web-components"; 3config.init({ baseUrl: "https://your.base.url" }); 4 5// if you are not using react, also import the web-components 6import "@ubique-innovation/heidi-web-components/components";
1<!-- non bundler (html) --> 2<head> 3 ... 4 <script type="module"> 5 import { config } from "https://cdn.jsdelivr.net/npm/@ubique-innovation/heidi-web-components/dist/main.js"; 6 config.init({ 7 baseUrl: "https://your.base.url", 8 }); 9 </script> 10 <!-- include script to webcomponents here --> 11 <script 12 type="module" 13 src="https://cdn.jsdelivr.net/npm/@ubique-innovation/heidi-web-components/dist/components.js" 14 ></script> 15</head>
Functions
Obtaining a token
1import { initializeProcess } from "@ubique-innovation/heidi-web-components"; 2// import { initializeProcess } from "https://cdn.jsdelivr.net/npm/@ubique-innovation/heidi-web-components/dist/main.js"; 3 4// Pre Auth Flow 5const { token } = await initializeProcess({ 6 action: "pre_auth_issuance", 7 preAuthIssuanceData: { 8 schemaIdentifier: { 9 credentialIdentifier: "identifier", 10 version: "0.0.1", 11 }, 12 attributes: { 13 attributeName: { 14 value: "value", 15 attributeType: "STRING", 16 }, 17 ... 18 }, 19 issuerSlug: "issuer-slug", //optional 20 }, 21}); 22 23// Presentation Flow 24const { token } = await initializeProcess({ 25 action: "presentation", 26 presentationData: { 27 proofSchemeId: "identifier", 28 }, 29});
Components
Button (that opens lightbox)
Usage
1<!-- non bundler (html) --> 2<hwc-button id="my-button" token="set-token-here-or-from-js"> 3 <!-- this is the slotted element (see below) --> 4 <a href="/">Fertig</a> 5</hwc-button> 6 7<script> 8 const button = document.getElementById("my-button"); 9 // set token from js (or set it in the html) 10 button.token = "your-token"; 11 12 // event listeners 13 button.addEventListener("success", (e) => { 14 console.log("success", e.detail); 15 }); 16 button.addEventListener("close", () => { 17 console.log("close"); 18 }); 19</script>
1// react 2import { HWCButton } from "@ubique-innovation/heidi-web-components/react"; 3 4function App() { 5 return ( 6 <HWCButton 7 token="your-token" 8 onSuccess={(e) => console.log("success", e.detail)} 9 onClose={() => console.log("close")} 10 > 11 // this is the slotted element (see below) 12 <a href="/">Fertig</a> 13 </HWCButton> 14 ); 15}
Lightbox (uncontrolled)
Usage
1<!-- non bundler (html) --> 2<hwc-lightbox id="my-lightbox" token="set-token-here-or-from-js"> 3 <!-- this is the slotted element (see below) --> 4 <a href="/"> Fertig </a> 5</hwc-lightbox> 6 7<script> 8 const lightbox = document.getElementById("my-lightbox"); 9 // set token from js (or set it in the html) 10 lightbox.token = "your-token"; 11 12 // control open state of lightbox 13 lightbox.open = true; 14 lightbox.open = false; 15 16 // event listeners 17 lightbox.addEventListener("success", (e) => { 18 console.log("success", e.detail); 19 }); 20 lightbox.addEventListener("close", () => { 21 console.log("close"); 22 }); 23</script>
1// react 2import { HWCLightbox } from "@ubique-innovation/heidi-web-components/react"; 3 4function App() { 5 const [isOpen, setIsOpen] = useState(false); 6 7 return ( 8 <HWCLightbox 9 token="your-token" 10 open={isOpen} 11 onClose={() => setIsOpen(false)} 12 onSucces={(e) => console.log("success", e.detail)} 13 > 14 // this is the slotted element (see below) 15 <a href="/">Fertig</a> 16 </HWCLightbox> 17 ); 18}
Transfer Proof
Usage
1<!-- non bundler (html) --> 2<hwc-transfer-proof token="set-token-here-or-from-js"> 3 <!-- this is the slotted element (see below) --> 4 <a href="/">Fertig</a> 5</hwc-transfer-proof> 6 7<script> 8 const transferProof = document.getElementById("my-transfer-proof"); 9 // set token from js (or set it in the html) 10 transferProof.token = "your-token"; 11 12 // event listeners 13 transferProof.addEventListener("success", (e) => { 14 console.log("success", e.detail); 15 }); 16</script>
1// react 2import { HWCTransferProof } from "@ubique-innovation/heidi-web-components/react"; 3 4function App() { 5 return ( 6 <HWCTransferProof 7 token="your-token" 8 onSuccess={(e) => console.log("success", e.detail)} 9 > 10 // this is the slotted element (see below) 11 <a href="/">Fertig</a> 12 </HWCTransferProof> 13 ); 14}
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.
No vulnerabilities found.
No security vulnerabilities found.