As promised in our presentation, we announce the release of Aioha web components that can be used in vanilla HTML/JS or any web framework to easily integrate Hive logins with 6 authentication providers including all the UI components and logic required.

Built using Lit and adapted from our React UI, the modal web component uses shadow DOM by default to ensure consistent styling regardless of how the rest of the application are styled.

This allows developers to quickly bootstrap an Aioha-powered Hive app using any framework in less than 5 minutes.

Installation

pnpm i @aioha/lit-ui @aioha/aioha

Or import from the CDN:

<script type="importmap">
  {
    "imports": {
      "@aioha/aioha": "https://unpkg.com/@aioha/aioha@latest/dist/bundle.js",
      "@aioha/lit-ui": "https://unpkg.com/@aioha/lit-ui@latest/dist/bundle.min.js"
    }
  }
</script>

Usage

It takes no more than 5 lines of JavaScript code and one line of HTML to integrate the Aioha modal web components in your application. The full example usage may be found here.

<html>
  <body>
    <button id="connectButton" type="button">Connect Wallet</button>
    <div id="loginModal"></div>
  <body>
  <script type="module">
    import { initAioha, KeyTypes } from '@aioha/aioha'
    import { initModal } from '@aioha/lit-ui'

    // Initialize Aioha
    const aioha = initAioha()

    // Initialize modal UI in a div
    const modal = initModal(aioha, document.getElementById('loginModal'), {
      loginOptions: {
        // see available config here: https://aioha.dev/docs/core/usage#login
      }
    })

    // Show modal on button click
    document.getElementById('connectButton').addEventListener('click', () => (modal.displayed = true))
  </script>
</html>