ExtensionAccountsProvider

Connect to available extensions and subscribe to accounts.

source

Requirements

• ExtensionsProvider: Must wrap ExtensionAccountsProvider to provide the available extensions.

Usage

ExtensionAccountsProvider provides a simple means of connecting to web3 extensions that implement the window.injectedWeb3 interface, and subscribes to their accounts. It automatically re-connects to extensions on subsequent visits, and allows dApps to set an active account if found in an extension.

Wrap your app with ExtensionAccountsProvider and provide the required props. Note that ExtensionsProvider is also required, in order to provide the available extensions to connect to. The required props are referenced further down.

import {
    ExtensionsProvider,
    ExtensionAccountsProvider,
  } from '@w3ux/react-connect-kit';
 
const AppWithProviders = () => {
 
  // Dapp identifier.
  const dappName = "My Dapp Name";
  // Active network, in lower case.
  const network = "polkadot";
  // SS58 prefix of the current network.
  const ss58 = 0;
  // Active account, if any.
  const activeAccount = null;
  // Setter for Dapp active account.
  const setActiveAccount = (a: string | null) => {
    setState({ ...state, activeAccount: a });
  };
 
  return (
    <ExtensionsProvider>
      <ExtensionAccountsProvider
        dappName={dappName}
        network={network}
        ss58={ss58}
        activeAccount={activeAccount}
        setActiveAccount={setActiveAccount}
      >
      <App />
    </ExtensionAccountsProvider>
  );
);

Connecting Extensions

With the providers in place, you can call connectExtensionAccounts to connect to an extension. The following example attempts to find and connect to Subwallet JS upon a button click.

import {
    useExtensionAccounts,
  } from '@w3ux/react-connect-kit';
 
const ConnectAccounts = () => {
  const { connectExtensionAccounts } = useExtensionAccounts();
 
  return (
    <>
      <button
        type="button"
        onClick={() => {
          if (extension) connectExtensionAccounts('subwallet-js');
        }}
      >
        Connect to Subwallet JS
      </button>
      <App />
    </>
  );
);

Props

dappName

string

A Dapp identifier that is provided to the web3 extension(s) being connected to.

network

string

The active network, in lower-case.

ss58

number

The SS58 prefix of the current network.

Planned to be derived from network in a future release.

activeAccount

string | null

The current active account on your Dapp, if any. ExtensionAccountsProvider will automatically connect to this active account, if found, when subscribing to extension account. See the next prop for more details.

setActiveAccount

(address: string): void

Provide a setter function to call if the active account is found when subscribing to extension accounts.

Values

connectExtensionAccounts

(id: string): Promise<boolean>

Call this function to connect to the provided extension id and subscribe to its accounts.

getExtensionAccounts

(ss58: number) => ImportedAccount[]

Geta a list of available extension accounts, formatted by the provided ss58 prefix.

extensionAccountsSynced

boolean

Signals whether extensions are still being connected to and subscribed to. A value of true means that the process is complete.