React Provider

For React apps that are not using the ready-made UI.

note

This module is used and provided in the ready-made UI so there is no need to install this separately.

Installation

pnpm i @aioha/react-provider @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-provider'

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

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

2. Use Aioha anywhere within AiohaProvider through useAioha().

src/components/AiohaPage.tsx

import { useAioha } from '@aioha/react-provider'

export const AiohaPage = () => {
  const { aioha, user, provider, otherUsers } = useAioha()

  // rest of your page goes here
}

Logged in username and provider may be retrieved through user and provider variables. Other authenticated accounts can be retrieved through otherUsers variable.

Using Events

Listen for events in useEffect hook.

src/components/YourComponent.tsx

import { useEffect } from 'react'
import { useAioha } from '@aioha/react-provider'

export const YourComponent = () => {
  const { aioha } = useAioha()
  useEffect(() => {
    const handler = () => {
      // handle your event here
    }
    aioha.on('sign_tx_request', handler)

    return () => {
      aioha.off('sign_tx_request', handler)
    }
  }, [])
}

SSR Apps

If you are using a framework that uses SSR (server-side rendering) such as Next.js, you may need to setup Aioha separately in a useEffect().

src/App.tsx

import React, { useEffect } from 'react'
import { Aioha } from '@aioha/aioha'
import { AiohaProvider } from '@aioha/react-provider'

const aioha = new Aioha()

const App = () => {
  useEffect({
    // See options: https://aioha.dev/docs/core/usage#instantiation
    aioha.setup()
  }, [])
  return (
    <AiohaProvider aioha={aioha}>
      <TheRestOfYourApplication />
    </AiohaProvider>
  )
}