Function.KeybanProvider

function KeybanProvider(props: KeybanProviderProps): Element

Provider component for the Keyban SDK. This component wraps the application and provides Keyban SDK functionalities to the components within the application. It is responsible for configuring the Keyban client with the appropriate options and ensuring that the SDK is accessible via the useKeybanClient hook.

The configuration options for the Keyban SDK are specified via the KeybanClientConfig type, which includes settings such as the API URL, blockchain network (chain), signing algorithm (signer), and storage mechanism (storage).

The provider supports dynamic updates to certain configuration options, such as chain, allowing components to adjust the blockchain network or other configurations during the application's lifecycle.

Additionally, the clientShareProvider prop allows for the injection of a client share provider function. This function is used to cipher the client's share of the end user and is stored securely within Keyban's infrastructure. By utilizing this, Keyban as the server and client share cannot sign operations on behalf of the end users. We recommend providing a unique key per client share to enhance security.

You can use a custom implementation of a ClientShareProvider or the provided KeybanClientShareProvider.

Parameters

Parameter	Type	Description
props	KeybanProviderProps	The Keyban provider configuration options.

Returns

Element

• The provider component wrapping the children components.

Throws

If the configuration is invalid.

See

• KeybanClientConfig for the available configuration options.
• ClientShareProvider for managing shared keys in client-side operations.

Example

import React from "react";
import { KeybanProvider, KeybanChain } from "@keyban/sdk-react";
import { MyClientShareProvider } from './ClientShareProvider';
import { KeybanClientShareProvider } from '@keyban/sdk-base';

const App: React.FC = () => {

  return (
    <KeybanProvider
      appId="your-app-id" // Your unique application ID from Keyban
      chain={KeybanChain.EthereumAnvil} // Specify the blockchain network (e.g., Testnet or Mainnet)
      clientShareProvider={new MyClientShareProvider()} // Custom provider for client shares
    >
      <YourMainComponent />
    </KeybanProvider>
  );
};

const AppWithKeybanClientShareProvider: React.FC = () => {

  return (
    <KeybanProvider
      appId="your-app-id" // Your unique application ID from Keyban
      chain={KeybanChain.EthereumAnvil} // Specify the blockchain network (e.g., Testnet or Mainnet)
      clientShareProvider={React.useMemo(() => new KeybanClientShareProvider(), [])} // Using KeybanClientShareProvider
    >
      <YourMainComponent />
    </KeybanProvider>
  );
};

export default App;