aelf-react

• aelf-react
  • Overview
  • Install
  • aelf-react@core API Reference
    • AElfReactProvider
      • Props
      • Example
      • Multi node
    • useAElfReact
      • Example
    • Notice
    • Example of use

Overview

At a high level, aelf-react is a state machine which ensures that certain key pieces of data (the user's current account, for example) relevant to your dApp are kept up-to-date. To this end, aelf-react uses Context to efficiently store this data, and inject it wherever you need it in your application.

The data conforms to the following interface:

1export interface AElfContextState {
2  name?: string;
3  chainId?: string;
4  account?: AElfAddress;
5  defaultAElfBridge?: AElfDappBridge;
6  aelfBridges?: { [key: string]: AElfDappBridge };
7  nodes?: AElfReactProviderProps['nodes'];
8  pubKey?: string;
9  publicKey?: PublicKey;
10  // is connected
11  isActive: boolean;
12}
13
14export interface AElfContextType extends AElfContextState {
15  /**
16   * The activate connection can optionally pass in a new node
17   * @param nodes - @see AElfReactProviderProps.nodes
18   */
19  activate: (nodes?: AElfReactProviderProps['nodes']) => Promise<true>;
20  // deactivate connection
21  deactivate: () => Promise<true>;
22  // try eagerly connection
23  connectEagerly: (nodes?: AElfReactProviderProps['nodes']) => Promise<true>;
24}

Install

react @>= 16.8

1yarn add @aelf-react/core
2
3# OR
4
5npm install --save @aelf-react/core

aelf-react@core API Reference

AElfReactProvider

aelf-react relies on the existence of a AElfReactProvider at the root of your application (or more accurately, at the root of the subtree which you'd like to have web3 functionality).

Props

1export type AelfNode = {
2  rpcUrl: string;
3  chainId: string;
4};
5
6/**
7 * @param children - A React subtree that needs access to the context.
8 * @param appName - App name.
9 * @param nodes - node object. @example `nodes = {AELF: {rpcUrl:'xxx', chainId:"AELF"}, tDVV: {rpcUrl:'xxx', chainId:"tDVV"}}`
10 */
11export interface AElfReactProviderProps {
12  children: ReactNode;
13  appName: string;
14  nodes?: {
15    [key: string]: AelfNode;
16  };
17}

Example

1import { AElfReactProvider } from '@aelf-react/core';
2function App() {
3  return (
4    <AElfReactProvider
5      appName="example"
6      nodes={{
7        tDVV: { rpcUrl: 'https://tdvv-test-node.aelf.io', chainId: 'tDVV' },
8      }}>
9      <App />
10    </AElfReactProvider>
11  );
12}

Multi node

In some cases, your dApp may want to maintain >1 active aelf node connections simultaneously.

1import { AElfReactProvider } from '@aelf-react/core';
2function App() {
3  return (
4    <AElfReactProvider
5      appName="example"
6      nodes={{
7        tDVV: { rpcUrl: 'https://tdvv-test-node.aelf.io', chainId: 'tDVV' },
8        tDVW: { rpcUrl: 'https://tdvw-test-node.aelf.io', chainId: 'tDVW' },
9      }}>
10      <App />
11    </AElfReactProvider>
12  );
13}

useAElfReact

If you're using Hooks (😇), useAElfReact will be your best friend. Call it from within any function component to access context variables.

Example

1import { useAElfReact } from '@aelf-react/core';
2
3function Component() {
4  const aelfReact = useAElfReact();
5  // ...
6}

Notice

aelf-bridge only supports one node and needs to check whether it is connected, NightElf supports multiple. If your application needs to use aelf-bridge you can usually do this.

1export async function checkAElfBridge(aelfBridge: AElfDappBridge) {
2  if (isAElfBridge(aelfBridge) && !isCurrentAElfBridge(aelfBridge)) {
3    await reConnectAElfBridge(aelfBridge);
4  }
5}

The full example, head over to the example/ utils.

Example of use

head over to the example/ folder.