Skip to content

ExtensionsProvider

A React context provider that discovers available wallet exensions and allows connection to them.

source

Usage

ExtensionsProvider allows your app to discover the currently installed web3 extensions, and provides a setter to update their status.

Wrap your app with ExtensionsProvider to give your components access to the available web extensions:

import { ExtensionsProvider } from '@w3ux/react-connect-kit';
 
const AppWithProvider = () => (
  <ExtensionsProvider>
    <App />
  </ExtensionsProvider>
);

Extensions data can then be accessed with the useExtensions hook in any wrapped component:

import { useExtensions } from '@w3ux/react-connect-kit';
 
...
const { extensions } = useExtensions();

Syncing Extensions

Web3 extensions are injected into the window.injectedWeb3 object, which is an asynchronous process that happens when the window loads. For this reason, ExtensionsProvider also provides a checkingInjectedWeb3 boolean value, that signals whether the initial check for injectedWeb3 is underway.

checkingInjectedWeb3 will initially be true, and updated to false once window.injectedWeb3 is present, or if injectedWeb3 is not found after a 5 second timeout.

Provider Values

checkingInjectedWeb3

boolean

Returns a boolean reflecting whether window.injectedWeb3 is being checked.

extensionsStatus

Record<string, Extens`ionStatus>

A key value record of each extension and their status. Empty object by default until setExtensionStatus is called.

setExtensionStatus

(id: string, status: ExtensionStatus): void

A function that takes an extension id and status, and updates the extensionsStatus record. Accepts values of installed, not_authenticated and connected.

removeExtensionStatus

(id: string): void

Removes an extension from the extensionsStatus record. This should be called when the extension is not found / not installed.

extensionInstalled

(id: string): boolean

A function that takes an extension id checks whether the extension is installed.

extensionCanConnect

(id: string): boolean

Checks if the provided extension id can be connected to. Returns false if the extension is not installed or is not connected.