Aioha React UI

Opinionated React modal UI for Hive logins through Aioha, styled using Tailwind CSS. This provides a quick and easy way to bootstrap a React web app with ready to use Aioha-powered modal component.

Installation

pnpm i @aioha/react-ui @aioha/aioha

Usage

1. Initialize Aioha and setup the provider at the root of your application. This may be in index.jsx, index.tsx or App.tsx depending on the framework you use.

import { initAioha } from '@aioha/aioha'
import { AiohaProvider } from '@aioha/react-ui'

// See options: https://aioha.dev/docs/core/usage#instantiation
const aioha = initAioha()

const App = () => {
  return (
    <AiohaProvider aioha={aioha}>
      <TheRestOfYourApplication />
    </AiohaProvider>
  )
}

2. Use the modal component and the useAioha() hook anywhere within AiohaProvider.

If your application is primarily styled using Tailwind CSS, it is not required to import @aioha/react-ui/dist/build.css.

import { useState } from 'react'
import { useAioha, AiohaModal } from '@aioha/react-ui'
import { KeyTypes } from '@aioha/aioha'
import { Button, useColorMode } from '@chakra-ui/react'
import '@aioha/react-ui/dist/build.css'

export const AiohaPage = () => {
  const { colorMode } = useColorMode()
  const [modalDisplayed, setModalDisplayed] = useState(false)
  const { user } = useAioha()
  return (
    <>
      <Button onClick={() => setModalDisplayed(true)}>
        {user ?? 'Connect Wallet'}
      </Button>
      <div className={colorMode}>
        <AiohaModal
          displayed={modalDisplayed}
          loginOptions={{
            msg: 'Login',
            keyType: KeyTypes.Posting
          }}
          onLogin={console.log}
          onClose={setModalDisplayed}
        />
      </div>
    </>
  )
}

AiohaModal component

|Property|Required?|Description|Default| |-|-|-|-| |displayed|✅|Boolean of whether the modal is displayed.|false| |loginTitle|❌|Login title to be displayed.|Connect Wallet| |loginHelpUrl|❌|Help URL to be linked under provider selection view, if any.|undefined| |loginOptions|✅|Aioha login options. See available configuration here.|| |onLogin|❌|Callback function to be called upon successful login, if any. Parameter contains login result as defined here.| |onClose|✅|Function to be called to close the modal.|| |imageServer|❌|Image server URL for user avatar.|https://images.hive.blog| |explorerUrl|❌|Hive block explorer URL.|https://hivehub.dev|

ℹ️ Note: hiveauth.cbWait in loginOptions will be overriden as AiohaModal will handle the presentation of HiveAuth QR codes.