Ready-Made 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.

src/App.tsx

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.

note

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

src/components/AiohaPage.tsx

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

warning

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

HiveSigner Callback Page

The callback page has been provided as a component that you can use in a route, as such:

src/Router.tsx

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { HiveSignerCb } from '@aioha/react-ui'

const router = createBrowserRouter([
  {
    path: '/',
    element: <HomePage />
  },
  {
    path: '/hivesigner',
    element: <HiveSignerCb />
  },
  // ...rest of your pages
])

const Router = () => {
  return (
    <>
      <RouterProvider router={router} />
    </>
  )
}

Then specify the path as the callback URL in initAioha():

const aioha = initAioha({
  hivesigner: {
    app: 'ipfsuploader.app',
    callbackURL: window.location.origin + '/hivesigner',
    scope: ['login', 'posting']
  },
  // ...other options
})