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.

note

If you are using a framework that uses SSR (i.e. Next.js), you may need to setup Aioha separately in useEffect() as outlined here.

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
})